/* Khanewal Fabrics — custom CSS (CDN Tailwind demo build)
   Production: use resources/css/app.css with `npm run build` instead.
   Keep this file minimal — utilities come from Tailwind CDN. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --kf-maroon: #7B1E3B;
    --kf-maroon-dark: #5E1730;
    --kf-gold: #C9A227;
    --kf-cream: #FDF9F4;
    --kf-whatsapp: #25D366;
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', ui-sans-system, system-ui, sans-serif; background: var(--kf-cream); }
.font-display { font-family: 'Playfair Display', Georgia, serif; }

[x-cloak] { display: none !important; }

/* Slim elegant scrollbar */
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: #F5EFE8; }
::-webkit-scrollbar-thumb { background: #D8C4AE; border-radius: 8px; border: 2px solid #F5EFE8; }
::-webkit-scrollbar-thumb:hover { background: var(--kf-maroon); }
* { scrollbar-width: thin; scrollbar-color: #D8C4AE #F5EFE8; }

/* Fabric image zoom (product detail) — transform-origin is set inline by Alpine */
.zoom-lens { overflow: hidden; cursor: zoom-in; }
.zoom-lens img { transition: transform .25s ease; will-change: transform; }
.zoom-lens:hover img { transform: scale(2); }

/* Line clamp fallback (Tailwind CDN provides line-clamp, this is a safety net) */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Range slider accent */
input[type="range"] { accent-color: var(--kf-maroon); }

/* Hide number input arrows for qty fields */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Subtle fabric-texture hero overlay */
.texture-dots {
    background-image: radial-gradient(rgba(201, 162, 39, .18) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* Print: order / invoice friendly */
@media print {
    header, footer, .no-print { display: none !important; }
    body { background: #fff; }
}