/* Local Tailwind-compatible stylesheet for Clafor CS product page.
   This version includes the utility classes used by the current HTML page.
   It does not depend on any external CDN.
*/

*,*::before,*::after{box-sizing:border-box}

html{
    line-height:1.5;
    -webkit-text-size-adjust:100%;
    font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}

body{
    margin:0;
    background:#f9fafb;
    color:#111827;
    font-family:inherit;
    line-height:1.5;
}

img{
    max-width:100%;
    display:block;
}

button,input,textarea,select{font:inherit}
a{color:inherit}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Container */
.container{width:100%;margin-inline:auto;padding-inline:1rem}
@media(min-width:640px){.container{max-width:640px}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:1024px){.container{max-width:1024px}}
@media(min-width:1280px){.container{max-width:1200px}}

/* Display / flex / grid */
.mx-auto{margin-inline:auto}
.flex{display:flex}
.grid{display:grid}
.flex-col{flex-direction:column}
.flex-col-reverse{flex-direction:column-reverse}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.flex-shrink-0{flex-shrink:0}

.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Gaps */
.gap-2{gap:.5rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

/* Width / height */
.w-full{width:100%}
.w-12{width:3rem}
.h-12{height:3rem}
.max-w-sm{max-width:24rem}
.max-w-md{max-width:28rem}
.max-w-7xl{max-width:80rem}

/* Padding */
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-10{padding:2.5rem}
.px-3{padding-inline:.75rem}
.px-4{padding-inline:1rem}
.pr-6{padding-right:1.5rem}
.py-1{padding-block:.25rem}
.py-8{padding-block:2rem}
.pt-28{padding-top:7rem}
.pt-40{padding-top:10rem}
.pb-8{padding-bottom:2rem}

/* Margin */
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.mr-2{margin-right:.5rem}
.ml-2{margin-left:.5rem}
.mt-1{margin-top:.25rem}

/* Vertical spacing */
.space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}
.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}

/* Overflow / radius */
.overflow-hidden{overflow:hidden}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}

/* Shadows */
.shadow{
    box-shadow:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
}
.shadow-md{
    box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
}
.shadow-lg{
    box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
}
.shadow-xl{
    box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
}

/* Borders */
.border{border-width:1px;border-style:solid}
.border-gray-100{border-color:#f3f4f6}

/* Backgrounds / gradient */
.bg-white{background-color:#fff}
.bg-gray-50{background-color:#f9fafb}
.bg-blue-600{background-color:#2563eb}
.bg-gradient-to-r{
    background-image:linear-gradient(to right,var(--tw-gradient-stops));
}
.from-red-400{
    --tw-gradient-from:#f87171;
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(248,113,113,0));
}
.from-red-500{
    --tw-gradient-from:#ef4444;
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(239,68,68,0));
}
.to-red-800{--tw-gradient-to:#991b1b}
.to-red-900{--tw-gradient-to:#7f1d1d}

/* Text */
.text-white{color:#fff}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-gray-800{color:#1f2937}
.text-blue-500{color:#3b82f6}
.text-blue-600{color:#2563eb}
.text-blue-700{color:#1d4ed8}
.text-green-500{color:#22c55e}
.text-green-600{color:#16a34a}

.text-sm{font-size:.875rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}

.font-sans{font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.text-center{text-align:center}
.text-justify{text-align:justify}
.leading-8{line-height:2}
.leading-9{line-height:2.25}
.leading-relaxed{line-height:1.625}

.list-disc{list-style-type:disc}

/* Images */
.aspect-square{aspect-ratio:1 / 1}
.object-cover{object-fit:cover}

/* Hover / transition */
.transition{
    transition-property:color,background-color,border-color,box-shadow,transform,opacity;
    transition-duration:150ms;
    transition-timing-function:cubic-bezier(.4,0,.2,1);
}
.duration-300{transition-duration:300ms}
.hover\:shadow-lg:hover{
    box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
}
.hover\:shadow-xl:hover{
    box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:text-blue-600:hover{color:#2563eb}

/* Existing page-specific helpers */
.card{background:#fff;border-radius:.5rem;overflow:hidden}
.product-image{width:100%}
.price-tag{color:#fff;padding:.25rem .75rem;border-radius:9999px;font-size:.875rem}
.view-btn{background:#2563eb;color:#fff;padding:.25rem 1rem;border-radius:.5rem;font-size:.875rem}
.style3{display:none}

/* Responsive Tailwind utilities */
@media(min-width:640px){
    .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:768px){
    .md\:flex-row{flex-direction:row}
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
    .md\:w-1\/2{width:50%}
    .md\:mb-0{margin-bottom:0}
    .md\:p-10{padding:2.5rem}
    .md\:max-w-md{max-width:28rem}
    .md\:text-lg{font-size:1.125rem}
    .md\:text-3xl{font-size:1.875rem}
}

@media(min-width:1024px){
    .lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}
}

/* Keyboard focus */
:focus-visible{outline:3px solid #93c5fd;outline-offset:2px}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
    }

}


@media (min-width: 1024px) {
    .lg\:grid-cols-8 {
        grid-template-columns: repeat(8, 94px);
        justify-content: center;
        column-gap: 30px;
        row-gap: 20px;
    }

    .lg\:grid-cols-8 > img {
        width: 94px;
        height: 94px;
        max-width: 94px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
}

p {
    margin-top: 0.25rem;
}

/* Sky blue gradient for product Hero sections */
.bg-gradient-to-tl{
    background-image:linear-gradient(to top left,var(--tw-gradient-stops));
}

.from-sky-500{
    --tw-gradient-from:#0ea5e9;
    --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(14,165,233,0));
}

.to-sky-900{
    --tw-gradient-to:#0c4a6e;
}

.from-gray-500 {
    --tw-gradient-from: #6b7280;
    --tw-gradient-stops:
        var(--tw-gradient-from),
        var(--tw-gradient-to, rgba(107,114,128,0));
}

.to-gray-900 {
    --tw-gradient-to: #111827;
}

/* Blue to Gray gradient for Hero sections */
.bg-gradient-to-tr{
    background-image:linear-gradient(to top right,var(--tw-gradient-stops));
}

.from-blue-200{
    --tw-gradient-from:#bfdbfe;
    --tw-gradient-stops:
        var(--tw-gradient-from),
        var(--tw-gradient-to,rgba(191,219,254,0));
}

.to-gray-700{
    --tw-gradient-to:#374151;
}