/* =========================================================
   MEXTRO PRIVÉ — Site-wide Luxury Styles
   Loaded on every public page alongside Tailwind CDN.
   ========================================================= */

:root {
    color-scheme: dark; /* tells the browser to render native controls (select dropdowns,
                            scrollbars, date pickers) in dark mode instead of OS-default white —
                            this is what actually fixes white <select> dropdown backgrounds,
                            since inline styles on <option> are unreliable across browsers */
    --bg: #050505;
    --bg-secondary: #101010;
    --card: #181818;
    --gold: #D4AF37;
    --gold-hover: #C8A12E;
    --white: #FFFFFF;
    --gray: #B8B8B8;
    --border: rgba(212, 175, 55, .20);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bg);
    font-family: 'Poppins', sans-serif;
    color: var(--white);
}

.font-display { font-family: 'Playfair Display', serif; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ---------- Loading screen ---------- */
#luxe-loader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
}
#luxe-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
#luxe-loader img { width: 72px; animation: pulse-logo 1.6s ease-in-out infinite; }
@keyframes pulse-logo {
    0%, 100% { opacity: .55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* ---------- Header ---------- */
#site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(5,5,5,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background-color .3s ease;
}
#site-header.scrolled {
    background: rgba(5,5,5,0.92);
    border-bottom-color: var(--border);
}
.nav-link {
    position: relative;
    color: var(--gray);
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color .25s ease;
}
.nav-link::after {
    content: '';
    position: absolute; left: 0; bottom: -6px;
    width: 0; height: 1px; background: var(--gold);
    transition: width .3s ease;
}
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { width: 100%; }

.icon-btn {
    color: var(--gray);
    transition: color .25s ease, transform .25s ease;
    position: relative;
}
.icon-btn:hover { color: var(--gold); transform: translateY(-1px); }
.icon-badge {
    position: absolute; top: -6px; right: -8px;
    background: var(--gold); color: #000;
    font-size: 10px; font-weight: 600;
    width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Mega menu ---------- */
.mega-menu {
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.mega-menu-trigger:hover .mega-menu,
.mega-menu:hover {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* ---------- Buttons ---------- */
.btn-gold {
    background: #000000;
    border: 1px solid var(--gold);
    color: var(--gold);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 11px;
    transition: all .3s ease;
    padding: 8px 16px;
    white-space: nowrap;
    display: inline-block;
}

@media (min-width: 640px) {
    .btn-gold {
        font-size: 12px;
        padding: 9px 18px;
        letter-spacing: 1.75px;
    }
}

@media (min-width: 1024px) {
    .btn-gold {
        font-size: 13px;
        padding: 10px 24px;
        letter-spacing: 2px;
    }
}

.btn-gold:hover { background: var(--gold); color: #000; box-shadow: 0 0 24px rgba(212,175,55,0.35); }

.btn-gold-solid {
    background: var(--gold);
    color: #000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 11px;
    transition: all .3s ease;
    padding: 8px 16px;
    white-space: nowrap;
    display: inline-block;
}

@media (min-width: 640px) {
    .btn-gold-solid {
        font-size: 12px;
        padding: 9px 18px;
        letter-spacing: 1.75px;
    }
}

@media (min-width: 1024px) {
    .btn-gold-solid {
        font-size: 13px;
        padding: 10px 24px;
        letter-spacing: 2px;
    }
}

.btn-gold-solid:hover { background: var(--gold-hover); box-shadow: 0 0 24px rgba(212,175,55,0.35); }

/* Belt-and-suspenders: explicit dark color-scheme on every select, since browser
   support/inheritance for the :root-level declaration varies slightly */
select { color-scheme: dark; }

.luxe-input {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    color: var(--white);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.luxe-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.luxe-input::placeholder { color: #666; }

/* ---------- Hero ---------- */
.hero-glow {
    position: absolute; border-radius: 50%;
    filter: blur(100px);
    background: radial-gradient(circle, rgba(212,175,55,0.30) 0%, rgba(212,175,55,0) 70%);
    pointer-events: none;
    animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(40px,-30px) scale(1.1); }
}
/* ---------- Hero ---------- */
.hero-glow {
    position: absolute; border-radius: 50%;
    filter: blur(100px);
    background: radial-gradient(circle, rgba(212,175,55,0.30) 0%, rgba(212,175,55,0) 70%);
    pointer-events: none;
    animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift {
    0% { transform: translate(0,0) scale(1); }
    100% { transform: translate(40px,-30px) scale(1.1); }
}

.hero-bottle {
    animation: float-bottle 6s ease-in-out infinite;
    filter: drop-shadow(0 30px 60px rgba(212,175,55,0.25));
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes float-bottle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

/* Mobile: Scale down bottle */
@media (max-width: 767px) {
    .hero-bottle {
        width: 200px !important;
        height: 200px !important;
    }
    .hero-bottle img {
        width: 150px !important;
        height: 150px !important;
    }
}

/* Tablet: Medium bottle */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-bottle {
        width: 240px !important;
        height: 240px !important;
    }
    .hero-bottle img {
        width: 180px !important;
        height: 180px !important;
    }
}

/* Desktop hero-bottle sizing (1024px and up) now lives in the
   consolidated FLUID SCALING FOR LARGE SCREENS section below, which
   scales it continuously all the way to 3840px instead of stopping
   at a fixed size. */

/* ---------- Product card ---------- */
.product-card {
    background: var(--card);
    border: 1px solid var(--border);
    transition: border-color .3s ease, transform .3s ease;
}
.product-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.product-card .quick-actions {
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}
.product-card:hover .quick-actions { opacity: 1; transform: translateY(0); }

/* ---------- Section eyebrow ---------- */
.eyebrow {
    font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold);
}

/* ---------- Brand marquee ---------- */
.marquee-track {
    display: flex; width: max-content;
    animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- Countdown ---------- */
.countdown-box {
    background: rgba(212,175,55,0.06);
    border: 1px solid var(--border);
    min-width: 64px;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Luxury cursor (desktop only) ---------- */
.luxe-cursor {
    position: fixed; top: 0; left: 0; z-index: 9998;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform .15s ease, opacity .3s ease;
}
.luxe-cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9997;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform .25s ease, width .25s ease, height .25s ease, border-color .25s ease;
}
@media (pointer: coarse) {
    .luxe-cursor, .luxe-cursor-ring { display: none; }
}

/* ---------- Responsive adjustments ---------- */

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .hero-glow { 
        filter: blur(60px) !important;
        opacity: 0.6 !important;
    }
    .hero-glow:first-of-type {
        width: 280px !important;
        height: 280px !important;
        top: -40px !important;
        right: -40px !important;
    }
    .hero-glow:last-of-type {
        width: 220px !important;
        height: 220px !important;
        bottom: -30px !important;
        left: -30px !important;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-glow { filter: blur(80px); }
    .hero-glow:first-of-type {
        width: 420px !important;
        height: 420px !important;
        top: -80px !important;
        right: -60px !important;
    }
    .hero-glow:last-of-type {
        width: 320px !important;
        height: 320px !important;
        bottom: -60px !important;
        left: -40px !important;
    }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .hero-glow { filter: blur(100px); }
    .hero-glow:first-of-type {
        width: 560px !important;
        height: 560px !important;
        top: -120px !important;
        right: -100px !important;
    }
    .hero-glow:last-of-type {
        width: 420px !important;
        height: 420px !important;
        bottom: -100px !important;
        left: -80px !important;
    }
}

/* Stats section responsive fixes */
.stats-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.stats-item {
    flex-basis: auto;
    min-width: fit-content;
}

.stats-divider {
    width: 1px;
    height: 40px;
    background: var(--border);
    display: block;
}

/* Mobile: Stack vertically, hide dividers */
@media (max-width: 767px) {
    .stats-container {
        flex-direction: row;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    .stats-divider {
        display: none;
    }
}

/* Tablet+: Show dividers */
@media (min-width: 768px) {
    .stats-container {
        gap: 2rem;
        margin-top: 2rem;
    }
    .stats-divider {
        height: 45px;
        display: block;
    }
}

/* Desktop+: Larger gaps */
@media (min-width: 1024px) {
    .stats-container {
        gap: 2.5rem;
        margin-top: 2.5rem;
    }
    .stats-divider {
        height: 50px;
    }
}

/* =========================================================
   FLUID SCALING FOR LARGE SCREENS
   Tailwind's default breakpoints stop growing at 1280px (xl), so a
   1366px laptop and a 3840px laptop rendered the exact same pixel
   sizes for text — and every section container hard-capped at
   1600px, so on anything wider than that the content just floated
   in the middle with dead space on both sides instead of filling
   the screen. These rules take over from 768px/1024px/1600px and
   scale continuously — ONE formula, no plateau in the middle — all
   the way out to 3840px, covering ordinary laptops (1280–1440),
   Retina/HiDPI laptops (1512–1728 logical px), and high-res laptops
   (1920, 2560×1440, 2560×1600, and 4K 3840×2160), so proportions
   keep growing at every one of those sizes instead of freezing
   partway through. Below these widths, Tailwind's existing
   mobile/tablet classes are untouched — mobile is unaffected by
   every rule below. Every property here carries !important: the
   Tailwind CDN script injects its own <style> tag at runtime, and
   depending on exactly when that finishes it can end up later in
   the document than this file, which would let an equal-specificity
   Tailwind utility win the cascade. !important removes that risk
   entirely regardless of load timing. */

/* Section containers (header, hero, every content section) — was a
   hard max-width:1600px with nothing beyond it, so anything wider
   just showed empty black margins instead of using the extra screen.
   Now grows continuously from 1600px up to 3840px. */
@media (min-width: 1600px) {
    div.max-w-\[1600px\] {
        max-width: clamp(1600px, calc(1600px + (100vw - 1600px) * 0.5357), 2800px) !important;
    }
}

/* Hero heading — the site's largest text, most visible offender */
@media (min-width: 1024px) {
    h1.hero-title {
        font-size: clamp(3.75rem, 1.93rem + 2.84vw, 8.75rem) !important;
    }
}

/* Hero eyebrow label + intro paragraph */
@media (min-width: 1024px) {
    p.hero-eyebrow {
        font-size: clamp(0.875rem, 0.69rem + 0.28vw, 1.375rem) !important;
    }
    p.hero-lead {
        font-size: clamp(1.125rem, 0.85rem + 0.43vw, 1.875rem) !important;
    }
}

/* Hero stat numbers (4+, 30+, 100%) */
@media (min-width: 1024px) {
    p.hero-stat-num {
        font-size: clamp(2.25rem, 1.61rem + 0.99vw, 4rem) !important;
    }
}

/* Every other page-title h1 (Shop, Brands, Contact, Cart, etc.) — these
   all cap out at 48px from 640px onward with no further growth at
   all, so they read tiny on a big laptop. Hero keeps its own larger
   scale via .hero-title above, so it's excluded here. */
@media (min-width: 768px) {
    h1.font-display:not(.hero-title) {
        font-size: clamp(3rem, 2.5rem + 1.04vw, 5rem) !important;
    }
}

/* Section headings used across every page (Luxury Collections, New
   Arrivals, Best Sellers, Trending, The Gift Collection, etc.) */
@media (min-width: 768px) {
    h2.font-display {
        font-size: clamp(2.25rem, 1.625rem + 1.3vw, 4.75rem) !important;
    }
}

/* Hero bottle/logo graphic — same continuous growth, 1024px to 3840px */
@media (min-width: 1024px) {
    .hero-bottle {
        width: clamp(300px, calc(300px + (100vw - 1024px) * 0.1065), 600px) !important;
        height: clamp(300px, calc(300px + (100vw - 1024px) * 0.1065), 600px) !important;
    }
    .hero-bottle img {
        width: clamp(224px, calc(224px + (100vw - 1024px) * 0.0767), 440px) !important;
        height: clamp(224px, calc(224px + (100vw - 1024px) * 0.0767), 440px) !important;
    }
    .hero-bottle svg {
        width: clamp(220px, calc(220px + (100vw - 1024px) * 0.071), 420px) !important;
        height: auto !important;
    }
}

/* ---------- Back to top ---------- */
#back-to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    width: 44px; height: 44px;
    background: rgba(16,16,16,0.85);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .3s ease;
}
#back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top:hover { border-color: var(--gold); }

/* ---------- WhatsApp float ---------- */
#whatsapp-float {
    position: fixed; left: 24px; bottom: 24px; z-index: 90;
    width: 52px; height: 52px; border-radius: 50%;
    background: #1f1f1f;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
#whatsapp-float:hover { border-color: var(--gold); transform: scale(1.06); }

/* ---------- Instagram tile placeholder ---------- */
.insta-tile {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #141414 0%, #1c1c1c 60%, #0d0d0d 100%);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}
.insta-tile::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.14), transparent 60%);
}

@media (prefers-reduced-motion: reduce) {
    .hero-glow, .hero-bottle, .marquee-track, #luxe-loader img { animation: none !important; }
    .reveal { opacity: 1; transform: none; transition: none; }
}