/* Nail Market Georgia — shared visual layer on top of Tailwind (CDN) */

@font-face {
    font-family: 'BPG Mrgvlovani Caps';
    src: url('../fonts/bpg-mrgvlovani-caps/bpg-mrgvlovani-caps-webfont.woff2') format('woff2'),
         url('../fonts/bpg-mrgvlovani-caps/bpg-mrgvlovani-caps-webfont.woff') format('woff'),
         url('../fonts/bpg-mrgvlovani-caps/bpg-mrgvlovani-caps-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html { scroll-behavior: smooth; }

body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }

/* hide horizontal scrollbars on swipeable rows (mobile nav, chips) */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Long product names (codes like "210/105L") must wrap inside 2-col mobile grids */
.product-card { min-width: 0; }
.product-card h3, .product-card h3 a { overflow-wrap: anywhere; word-break: break-word; }

/* iOS: inputs below 16px trigger auto-zoom on focus */
@media (max-width: 639px) {
    input[type="text"], input[type="search"], input[type="number"], input[type="tel"], input[type="email"], textarea, select { font-size: 16px !important; }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/*
 * !important is deliberate here: Tailwind's CDN build injects responsive
 * text-size utilities (e.g. .lg\:text-6xl) that bundle their OWN line-height
 * (often exactly 1, i.e. zero space between lines). Those rules have the same
 * specificity as our leading-* classes and load AFTER this stylesheet, so
 * they silently win the cascade and collapse multi-line headings — which is
 * exactly what caused Georgian text to visually overlap itself. Anything
 * using this decorative display font needs guaranteed breathing room
 * regardless of which Tailwind size utility is also applied.
 */
.font-display {
    font-family: 'BPG Mrgvlovani Caps', 'Noto Sans Georgian', sans-serif;
    line-height: 1.45 !important;
}

/* ---- glass / gradient surfaces -------------------------------------- */
.glass-header { background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); }

.hero-gradient {
    background: radial-gradient(120% 140% at 10% 0%, #4A154A 0%, #2D0B2E 45%, #22081f 100%);
}
.hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 60% at 85% 20%, rgba(229, 46, 77, .28), transparent 70%),
        radial-gradient(30% 50% at 70% 100%, rgba(212, 163, 115, .18), transparent 70%);
}

.brand-badge {
    background: linear-gradient(135deg, #E52E4D 0%, #B38328 100%);
}

/* ---- scrollbars -------------------------------------------------------- */
.custom-scrollbar::-webkit-scrollbar { height: 6px; width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e52e4d; border-radius: 10px; }

/* ---- product cards ------------------------------------------------------ */
.product-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -14px rgba(229, 46, 77, 0.25);
}
.product-card img { transition: transform 0.5s ease; }
.product-card:hover img { transform: scale(1.06); }

/* ---- buttons -------------------------------------------------------- */
.btn-primary {
    background: linear-gradient(135deg, #E52E4D 0%, #C41C38 100%);
    box-shadow: 0 8px 18px -8px rgba(229, 46, 77, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* ---- fade/slide utility for JS-toggled panels ------------------------ */
.fade-in { animation: nmFadeIn 0.2s ease-out; }
@keyframes nmFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- image aspect box (uniform product thumbnails) -------------------- */
.img-box { position: relative; width: 100%; padding-top: 100%; background: #f8f4f2; overflow: hidden; }
.img-box img, .img-box .img-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- line clamp fallback (Tailwind CDN already ships this, kept for safety) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (min-width: 480px) { .xs\:block { display: block; } }
@media (max-width: 479px) { .xs\:block { display: none; } }