/* ============================================================
   Rennuce — SITE HEADER (header.css)
   REDESIGNED LAYOUT — two-row structure (Bella-style)

   Row 1 (topbar): social icons (left) — logo (center) — actions (right)
   Row 2 (navbar): centered flat nav links — no dropdowns, no mega-menu

   Load order: AFTER reset.css, typography.css, components.css
   Depends on:  variables.css (all --space-*, --color-*, etc.)

   Sections:
     1.  Header Tokens
     2.  Header Shell & Sticky Behaviour
     3.  Row 1 — Topbar Layout
     4.  Logo
     5.  Social Icons
     6.  Header Action Buttons
     7.  Cart / Wishlist Badges
     8.  Hamburger Icon
     9.  Row 2 — Navbar Layout
    10.  Nav Item & Link (flat, no chevron)
    11.  Mobile Drawer Shell
    12.  Mobile Drawer Header & Search
    13.  Mobile Navigation (flat list)
    14.  Mobile Drawer Footer
    15.  Scrolled State
    16.  Active Page Highlight
    17.  Reduced Motion
    18.  Responsive Overrides
   ============================================================ */


/* =====================================================
   1. HEADER TOKENS
===================================================== */

:root {
    --topbar-height: 108px;
    --topbar-height-scrolled: 84px;
    --navbar-height: 48px;
    --navbar-height-scrolled: 40px;

    --header-bg: #FFFFFF;
    --header-bg-scrolled: rgba(255, 255, 255, 0.97);
    --header-border: rgba(0, 0, 0, 0.07);
    --header-shadow: 0 1px 0 var(--header-border);
    --header-shadow-scrolled: 0 2px 20px rgba(0, 0, 0, 0.08);
    --header-text: var(--color-text-primary, #0A0A0A);
    --header-link-hover: var(--color-brand-gold, #C9A96E);

    --navbar-bg: var(--color-bg-secondary, #FAF8F5);
    --navbar-border: var(--color-border, #E5E5E5);

    --drawer-width: 320px;
    --drawer-bg: #FFFFFF;
    --drawer-border: var(--color-border, #E5E5E5);
}


/* =====================================================
   2. HEADER SHELL & STICKY BEHAVIOUR
===================================================== */

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky, 200);
    width: 100%;
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    transition: box-shadow 0.28s ease,
        background 0.28s ease;
    isolation: isolate;
}

.site-header--hidden {
    transform: translateY(-100%);
    box-shadow: none;
    transition: transform 0.22s ease-in,
        box-shadow 0.22s ease-in;
}

.site-header[data-scrolled="true"] {
    background: var(--header-bg-scrolled);
    box-shadow: var(--header-shadow-scrolled);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =====================================================
   3. ROW 1 — TOPBAR LAYOUT
   Three-column flex: [social] [logo] [actions]
===================================================== */

.site-header__topbar {
    height: var(--topbar-height);
    transition: height 0.28s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}


.site-header__topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-6, 1.5rem);
}


/* =====================================================
   4. LOGO
===================================================== */

.site-header__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2-5, 0.625rem);
    text-decoration: none;
    flex-shrink: 0;
    color: var(--header-text);
    transition: opacity var(--duration-fast, 120ms) var(--ease-in-out);
}

.site-header__logo:hover {
    opacity: 0.80;
}

.site-header__logo:focus-visible {
    outline: 2px solid var(--color-brand-gold, #C9A96E);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 4px);
}

.site-header__logo-img {
    height: 90px;
    width: auto;
    max-width: 200px;
    display: block;
    object-fit: contain;
    transition: height 0.28s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}



.site-header__logo-img--sm {
    height: 32px;
}


/* =====================================================
   5. SOCIAL ICONS
===================================================== */

.site-header__social {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    flex-shrink: 0;
    width: 140px;
    /* balances the actions column so the logo stays centered */
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--header-text);
    border-radius: var(--radius-full, 9999px);
    transition: background var(--duration-fast, 120ms) var(--ease-in-out),
        color var(--duration-fast, 120ms) var(--ease-in-out);
}

.social-link:hover {
    background: var(--color-gray-100, #F5F5F5);
    color: var(--color-brand-gold, #C9A96E);
}

.social-link:focus-visible {
    outline: 2px solid var(--color-brand-gold, #C9A96E);
    outline-offset: 2px;
}


/* =====================================================
   6. HEADER ACTION BUTTONS
   Search, Wishlist, Account, Cart, Hamburger
===================================================== */

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1, 0.25rem);
    flex-shrink: 0;
    width: 140px;
    /* mirrors .site-header__social so logo stays centered */
}

.header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 40px;
    color: var(--header-text);
    background: none;
    border: none;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast, 120ms) var(--ease-in-out),
        color var(--duration-fast, 120ms) var(--ease-in-out),
        transform var(--duration-fast, 120ms) var(--ease-out);
    flex-shrink: 0;
    padding: 0;
}

.header-action:hover {
    background: var(--color-gray-100, #F5F5F5);
    color: var(--color-brand-black, #0A0A0A);
}

.header-action:active {
    transform: scale(0.92);
}

.header-action:focus-visible {
    outline: 2px solid var(--color-brand-gold, #C9A96E);
    outline-offset: 2px;
}

.header-action svg {
    flex-shrink: 0;
}

.header-action--hamburger {
    display: none;
    /* shown on mobile breakpoint */
}


/* =====================================================
   7. CART / WISHLIST BADGES
===================================================== */

.header-action__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: var(--color-brand-gold, #C9A96E);
    color: var(--color-brand-black, #0A0A0A);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: var(--weight-bold, 700);
    line-height: 17px;
    text-align: center;
    border-radius: var(--radius-full, 9999px);
    pointer-events: none;
    transition: transform var(--duration-base, 200ms) var(--ease-bounce),
        opacity var(--duration-base, 200ms) var(--ease-in-out);
    transform-origin: center;
}

@keyframes badge-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.35);
    }

    70% {
        transform: scale(0.88);
    }

    100% {
        transform: scale(1);
    }
}

.header-action__badge.is-updated {
    animation: badge-pop 0.35s var(--ease-out) forwards;
}


/* =====================================================
   8. HAMBURGER ICON
===================================================== */

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 20px;
    height: 16px;
}

.hamburger__bar {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: var(--radius-full, 9999px);
    transform-origin: center;
    transition: transform 0.30s var(--ease-out),
        opacity 0.20s var(--ease-in-out),
        width 0.25s var(--ease-out);
}

.header-action--hamburger[aria-expanded="true"] .hamburger__bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.header-action--hamburger[aria-expanded="true"] .hamburger__bar:nth-child(2) {
    opacity: 0;
    width: 0;
}

.header-action--hamburger[aria-expanded="true"] .hamburger__bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}


/* =====================================================
   9. ROW 2 — NAVBAR LAYOUT
===================================================== */

.site-header__navbar {
    height: var(--navbar-height);
    background: var(--navbar-bg);
    border-top: 1px solid var(--navbar-border);
    border-bottom: 1px solid var(--navbar-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.28s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
}

.site-header[data-scrolled="true"] .site-header__navbar {
    height: var(--navbar-height-scrolled);
}

.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}


/* =====================================================
   10. NAV ITEM & LINK
   Flat — no chevron, no dropdown
===================================================== */

.nav-item__link {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4, 1rem);
    height: var(--navbar-height);
    font-family: var(--font-sans);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--header-text);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    transition: color var(--duration-fast, 120ms) var(--ease-in-out),
        height 0.28s var(--ease-in-out);
}

.site-header[data-scrolled="true"] .nav-item__link {
    height: var(--navbar-height-scrolled);
}

.nav-item__link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: var(--space-4, 1rem);
    right: var(--space-4, 1rem);
    height: 1.5px;
    background: var(--color-brand-gold, #C9A96E);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.28s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    border-radius: var(--radius-full, 9999px);
}

.nav-item__link:hover::after,
.nav-item__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

.nav-item__link:focus-visible {
    outline: 2px solid var(--color-brand-gold, #C9A96E);
    outline-offset: -4px;
    border-radius: var(--radius-sm, 4px);
}

.nav-item__link--sale {
    color: #DC2626;
    font-weight: var(--weight-semibold, 600);
}

.nav-item__link--sale::after {
    background: #DC2626;
}

.nav-item__link--sale:hover {
    color: #B91C1C;
}


/* =====================================================
   11. MOBILE DRAWER SHELL
===================================================== */

.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 400);
    pointer-events: none;
}

.mobile-drawer[aria-hidden="false"] {
    pointer-events: auto;
}

.mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.30s var(--ease-in-out);
    cursor: pointer;
}

.mobile-drawer[aria-hidden="false"] .mobile-drawer__backdrop {
    opacity: 1;
}

.mobile-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--drawer-width);
    max-width: 85vw;
    background: var(--drawer-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
    transition: transform 0.35s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    will-change: transform;
}

.mobile-drawer[aria-hidden="false"] .mobile-drawer__panel {
    transform: translateX(0);
}


/* =====================================================
   12. MOBILE DRAWER HEADER & SEARCH
===================================================== */

.mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--drawer-border);
    flex-shrink: 0;
}

.mobile-drawer__logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    text-decoration: none;
    color: var(--color-brand-black, #0A0A0A);
}

.mobile-drawer__logo .site-header__logo-text {
    font-size: var(--text-xl, 1.25rem);
}

.mobile-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--radius-md, 8px);
    color: var(--color-text-muted, #A3A3A3);
    cursor: pointer;
    transition: background var(--duration-fast, 120ms) var(--ease-in-out),
        color var(--duration-fast, 120ms) var(--ease-in-out);
    flex-shrink: 0;
}

.mobile-drawer__close:hover {
    background: var(--color-brand-black, #0A0A0A);
    border-color: var(--color-brand-black, #0A0A0A);
    color: var(--color-brand-white, #fff);
}

.mobile-drawer__close:focus-visible {
    outline: 2px solid var(--color-brand-gold, #C9A96E);
    outline-offset: 2px;
}

.mobile-drawer__search {
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--drawer-border);
    flex-shrink: 0;
}

.mobile-drawer__search-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2-5, 0.625rem);
    width: 100%;
    padding: var(--space-2-5, 0.625rem) var(--space-3, 0.75rem);
    background: var(--color-bg-secondary, #F5F5F5);
    border: 1.5px solid transparent;
    border-radius: var(--radius-full, 9999px);
    color: var(--color-text-muted, #A3A3A3);
    font-family: var(--font-sans);
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-base, 200ms) var(--ease-in-out),
        background var(--duration-base, 200ms) var(--ease-in-out);
}

.mobile-drawer__search-btn:hover {
    border-color: var(--color-brand-gold, #C9A96E);
    background: var(--color-bg-primary, #fff);
    color: var(--color-text-secondary, #525252);
}

.mobile-drawer__search-btn svg {
    flex-shrink: 0;
}


/* =====================================================
   13. MOBILE NAVIGATION — FLAT LIST
===================================================== */

.mobile-drawer__nav {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #E5E5E5) transparent;
}

.mobile-drawer__nav::-webkit-scrollbar {
    width: 3px;
}

.mobile-drawer__nav::-webkit-scrollbar-thumb {
    background: var(--color-border, #E5E5E5);
    border-radius: var(--radius-full);
}

.mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: var(--space-2, 0.5rem) 0;
}

.mobile-nav__item {
    border-bottom: 1px solid var(--drawer-border);
}

.mobile-nav__item:last-child {
    border-bottom: none;
}

.mobile-nav__link {
    display: flex;
    align-items: center;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-primary, #0A0A0A);
    text-decoration: none;
    transition: color var(--duration-fast, 120ms) var(--ease-in-out),
        background var(--duration-fast, 120ms) var(--ease-in-out);
}

.mobile-nav__link:hover {
    background: var(--color-bg-secondary, #F5F5F5);
    color: var(--color-brand-black, #0A0A0A);
}

.mobile-nav__link--sale {
    color: #DC2626;
    font-weight: var(--weight-semibold, 600);
}

.mobile-nav__link--sale:hover {
    background: #FEF2F2;
    color: #B91C1C;
}


/* =====================================================
   14. MOBILE DRAWER FOOTER
===================================================== */

.mobile-drawer__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--drawer-border);
    padding: var(--space-4, 1rem) 0;
    background: var(--color-bg-secondary, #F5F5F5);
}

.mobile-drawer__footer-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-drawer__footer-link {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-secondary, #525252);
    text-decoration: none;
    transition: background var(--duration-fast, 120ms) var(--ease-in-out),
        color var(--duration-fast, 120ms) var(--ease-in-out);
}

.mobile-drawer__footer-link svg {
    flex-shrink: 0;
    color: var(--color-text-muted, #A3A3A3);
    transition: color var(--duration-fast, 120ms) var(--ease-in-out);
}

.mobile-drawer__footer-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-text-primary, #0A0A0A);
}

.mobile-drawer__footer-link:hover svg {
    color: var(--color-brand-gold, #C9A96E);
}

.mobile-drawer__footer-link--whatsapp {
    color: #16A34A;
}

.mobile-drawer__footer-link--whatsapp svg {
    color: #16A34A;
}

.mobile-drawer__footer-link--whatsapp:hover {
    background: rgba(22, 163, 74, 0.06);
    color: #15803D;
}

.mobile-drawer__footer-link--whatsapp:hover svg {
    color: #15803D;
}


/* =====================================================
   15. SCROLLED STATE
===================================================== */

/* Handled inline above via [data-scrolled="true"] selectors
   on topbar, logo, navbar and nav-item__link heights. */


/* =====================================================
   16. ACTIVE PAGE HIGHLIGHT
   JS compares data-page on <body> to data-category
   on each nav link and adds .is-active
===================================================== */

.nav-item__link.is-active {
    color: var(--color-brand-black, #0A0A0A);
    font-weight: var(--weight-semibold, 600);
}

.mobile-nav__link.is-active {
    color: var(--color-brand-black, #0A0A0A);
    font-weight: var(--weight-semibold, 600);
}


/* =====================================================
   17. REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-header,
    .site-header__topbar,
    .site-header__navbar,
    .nav-item__link,
    .nav-item__link::after,
    .mobile-drawer__panel,
    .mobile-drawer__backdrop,
    .hamburger__bar,
    .header-action__badge {
        transition: none;
        animation: none;
    }

}


/* =====================================================
   18. RESPONSIVE OVERRIDES
===================================================== */

/* ── LG: ≤ 1024px ── */
@media (max-width: 1024px) {

    .nav-item__link {
        padding: 0 var(--space-3, 0.75rem);
        font-size: var(--text-xs, 0.75rem);
    }

}

/* ── MD: ≤ 768px — MOBILE LAYOUT ── */
@media (max-width: 768px) {

    /* Hide row 2 entirely — nav lives in the drawer now */
    .site-header__navbar {
        display: none;
    }

    /* Hide social icons to save space on small screens */
    .site-header__social {
        display: none;
    }

    /* Actions column no longer needs to balance against social icons */
    .site-header__actions {
        width: auto;
    }

    /* Show hamburger */
    .header-action--hamburger {
        display: flex;
    }

    /* Hide account icon to save space, keep wishlist + cart */
    .header-action--account {
        display: none;
    }

}

/* ── SM: ≤ 640px ── */
@media (max-width: 640px) {

    :root {
        --topbar-height: 70px;
        --topbar-height-scrolled: 52px;
    }

    .site-header__topbar-inner {
        gap: var(--space-3, 0.75rem);
    }

    .header-action--search {
        display: none;
        /* drawer search handles it */
    }

    .site-header__logo-img {
        height: 62px;
    }

    .mobile-drawer__panel {
        --drawer-width: 290px;
        max-width: 92vw;
    }

}

/* ── XS: ≤ 480px ── */
@media (max-width: 480px) {

    .header-action--wishlist {
        display: none;
    }

    .site-header__logo-img {
        height: 52px;
    }

}

/* =====================================================
   19. DESKTOP DROPDOWN NAV
===================================================== */

.nav-chevron {
    flex-shrink: 0;
    transition: transform 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.nav-item--dropdown.is-open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: var(--space-2, 0.5rem) 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 300;
    pointer-events: none;
}

.nav-item--dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav-dropdown__link {
    display: block;
    padding: var(--space-2-5, 0.625rem) var(--space-5, 1.25rem);
    font-family: var(--font-sans);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-primary, #0A0A0A);
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}

.nav-dropdown__link:hover {
    background: var(--color-bg-secondary, #FAF8F5);
    color: var(--color-brand-gold, #C9A96E);
}

.nav-dropdown__link:focus-visible {
    outline: 2px solid var(--color-brand-gold, #C9A96E);
    outline-offset: -2px;
}

/* =====================================================
   20. MOBILE ACCORDION SUBMENU
===================================================== */

.mobile-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-family: 'Tenor sans';
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-medium, 500);
    color: var(--color-text-primary, #0A0A0A);
    transition: background 120ms ease;
}

.mobile-nav__toggle:hover {
    background: var(--color-bg-secondary, #F5F5F5);
}

.mobile-nav__toggle .nav-chevron {
    flex-shrink: 0;
    transition: transform 0.25s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.mobile-nav__item--open .mobile-nav__toggle .nav-chevron {
    transform: rotate(180deg);
}

.mobile-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-2, 0.5rem) 0;
    background: var(--color-bg-secondary, #FAF8F5);
    border-top: 1px solid var(--drawer-border);
}

.mobile-nav__sublink {
    display: block;
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem) var(--space-3, 0.75rem) calc(var(--space-5, 1.25rem) + 1rem);
    font-family: var(--font-sans);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-normal, 400);
    color: var(--color-text-secondary, #525252);
    text-decoration: none;
    transition: color 120ms ease, background 120ms ease;
}

.mobile-nav__sublink:hover {
    color: var(--color-brand-gold, #C9A96E);
    background: rgba(201, 169, 110, 0.06);
}