/* ── Top Bar ───────────────────────────────────────────────── */
.site-topbar { background-color:var(--topbar-bg,#1e293b); color:var(--topbar-text,#94a3b8); font-size:.8125rem; line-height:1; }
.topbar-sticky { position:sticky; top:0; z-index:calc(var(--z-sticky) + 1); }
.topbar-sticky ~ .site-header.is-sticky { top:var(--topbar-height,36px); }
.topbar-inner { display:flex; align-items:center; justify-content:space-between; height:var(--topbar-height,36px); gap:1rem; }
.topbar-left, .topbar-right { display:flex; align-items:center; gap:1rem; flex-shrink:0; }
.topbar-contact { display:inline-flex; align-items:center; gap:.375rem; color:var(--topbar-link,#cbd5e1); text-decoration:none; transition:color var(--transition-fast); }
.topbar-contact:hover { color:var(--topbar-link-hover,#fff); }
.topbar-custom-text { color:var(--topbar-text,#94a3b8); font-size:.8125rem; }
.topbar-social { display:flex; align-items:center; gap:.5rem; }
.topbar-social-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:var(--topbar-link,#cbd5e1); border-radius:4px; transition:color var(--transition-fast),background var(--transition-fast); text-decoration:none; }
.topbar-social-icon:hover { color:var(--topbar-link-hover,#fff); background:rgba(255,255,255,.1); }
/* Custom uploaded icon image */
.topbar-social-custom-img { width:16px; height:16px; object-fit:contain; display:block; filter:brightness(0) invert(.7); transition:filter var(--transition-fast); }
.topbar-social-icon:hover .topbar-social-custom-img { filter:brightness(0) invert(1); }
@media (max-width:768px) {
    .topbar-inner { height:max(32px,var(--topbar-height,36px)); }
    .topbar-sticky ~ .site-header.is-sticky { top:max(32px,var(--topbar-height,36px)); }
    .topbar-custom-text { display:none; }
    .topbar-left { gap:.625rem; }
    /* On mobile show icon only for phone/email */
    .topbar-contact span { display:none; }
}

.site-header { position:relative; background:var(--header-bg); border-bottom:1px solid var(--header-border); z-index:var(--z-sticky); transition:box-shadow var(--transition-base); }
.site-header.is-sticky { position:sticky; top:0; }
.site-header.scrolled  { box-shadow:var(--shadow-md); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); height:var(--header-height); }
.site-branding { flex-shrink:0; }
.site-logo img { height:calc(var(--header-height) - 24px); width:auto; }
.site-name-link { text-decoration:none; }
.site-title { display:block; font-family:var(--font-heading); font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--header-text); line-height:1; }
.main-navigation { flex:1; display:flex; justify-content:flex-end; }
.nav-menu { display:flex; align-items:center; gap:var(--space-xs); list-style:none; padding:0; margin:0; }
.nav-menu a { display:inline-block; padding:.375rem .75rem; font-size:var(--font-size-sm); font-weight:var(--font-weight-medium); color:var(--header-text); border-radius:var(--radius-md); transition:all var(--transition-fast); text-decoration:none; }
.nav-menu a:hover,.nav-menu .current-menu-item>a { background:rgba(0,0,0,.07); color:var(--color-accent); }
.nav-menu li { position:relative; }
.nav-menu .sub-menu { position:absolute; top:100%; left:0; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); min-width:200px; padding:var(--space-sm) 0; list-style:none; opacity:0; visibility:hidden; transform:translateY(8px); transition:all var(--transition-base); z-index:var(--z-dropdown); }
.nav-menu li:hover>.sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu .sub-menu a { display:block; color:var(--color-text); padding:.5rem 1rem; border-radius:0; }
.nav-menu .sub-menu a:hover { background:var(--color-bg-alt); }
.header-actions { display:flex; align-items:center; gap:var(--space-sm); flex-shrink:0; }

/* ── Sub-menu toggle button (hidden on desktop) ─────────────── */
.sub-menu-toggle { display:none; }

/* ── Toggle Button ─────────────────────────────────────────── */
/* Hide the toggle wrapper entirely above 1024px when it only contains
   the nav-toggle button (so it doesn't take flex/gap space on desktop). */
.header-slot-group--toggle-only { display:none; }
.nav-toggle { display:none; width:40px; height:40px; background:transparent; border:1px solid var(--color-border); border-radius:var(--radius-md); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; transition:background var(--transition-fast),border-color var(--transition-fast); }
.nav-toggle:hover { background:rgba(0,0,0,.05); border-color:var(--color-primary); }
.nav-toggle-icon,.nav-toggle-icon::before,.nav-toggle-icon::after { display:block; width:20px; height:2px; background:var(--header-text); border-radius:2px; transition:all var(--transition-base); }
.nav-toggle-icon { position:relative; }
.nav-toggle-icon::before,.nav-toggle-icon::after { content:""; position:absolute; left:0; }
.nav-toggle-icon::before { top:-6px; }
.nav-toggle-icon::after  { top:6px; }
.nav-toggle[aria-expanded=true] { background:rgba(0,0,0,.05); border-color:var(--color-primary); }
.nav-toggle[aria-expanded=true] .nav-toggle-icon { background:transparent; }
.nav-toggle[aria-expanded=true] .nav-toggle-icon::before { transform:rotate(45deg); top:0; }
.nav-toggle[aria-expanded=true] .nav-toggle-icon::after  { transform:rotate(-45deg); top:0; }

/* ── Header Slot Groups ────────────────────────────────────── */
.header-slot-group { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

/* ── Cart Button ───────────────────────────────────────────── */
.header-cart-btn { position:relative; display:flex; align-items:center; background:none; border:none; cursor:pointer; color:var(--menu-link-color); padding:.25rem; line-height:1; }
.header-cart-btn:hover { color:var(--color-primary); }
.cart-count { position:absolute; top:-6px; right:-8px; background:var(--color-primary); color:#fff; font-size:10px; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.cart-count--empty { display:none; }

/* ── Search Button ─────────────────────────────────────────── */
.header-search-btn { background:none; border:none; cursor:pointer; color:var(--menu-link-color); padding:.25rem; line-height:1; }
.header-search-btn:hover { color:var(--color-primary); }

/* ── Centered Header ───────────────────────────────────────── */
.header-inner--centered { display:flex; flex-direction:column; align-items:stretch; padding:1rem 1.5rem; gap:.5rem; }
.header-centered-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; }
.header-logo-row .site-branding,
.header-nav-row  .main-navigation  { grid-column:2; justify-self:center; }
.header-logo-row .header-slot-group--before-logo,
.header-nav-row  .header-slot-group--before-nav  { grid-column:1; justify-self:start; }
.header-logo-row .header-slot-group--after-logo,
.header-nav-row  .header-slot-group--after-nav   { grid-column:3; justify-self:end; }


/* ── Search Modal ──────────────────────────────────────────── */
#gotchaSearchModal .modal-content {
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:var(--color-bg);
}

#gotchaSearchModal .modal-header {
    padding:.75rem 1rem .25rem;
}

#gotchaSearchModal .modal-body {
    padding:0 1.5rem 1.5rem;
}

/* Search form layout */
#gotchaSearchModal .search-form {
    display:flex;
    align-items:center;
    gap:0;
    border:1.5px solid var(--color-border);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
    background:var(--color-bg);
}

#gotchaSearchModal .search-form:focus-within {
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Hide the default label (screen reader only) */
#gotchaSearchModal .search-form label {
    flex:1;
    margin:0;
    display:flex;
}

#gotchaSearchModal .search-form .search-field {
    flex:1;
    width:100%;
    border:none;
    outline:none;
    background:transparent;
    padding:.875rem 1.125rem;
    font-size:1rem;
    color:var(--color-text);
    box-shadow:none;
}

#gotchaSearchModal .search-form .search-field::placeholder {
    color:var(--color-text-muted, #94a3b8);
}

/* Search submit button */
#gotchaSearchModal .search-form .search-submit {
    flex-shrink:0;
    border:none;
    border-left:1.5px solid var(--color-border);
    background:var(--color-primary);
    color:#fff;
    padding:.875rem 1.5rem;
    font-size:.95rem;
    font-weight:500;
    cursor:pointer;
    transition:background var(--transition-fast);
    white-space:nowrap;
}

#gotchaSearchModal .search-form .search-submit:hover {
    background:var(--color-primary-hover);
}
/* ── Tablet ( ≤ 1024px ) ───────────────────────────────────── */
@media ( max-width:1024px ) {

    .header-slot-group--toggle-only { display:flex; }
    .nav-toggle { display:flex; }
    .main-navigation { display:none; }

    /* ── Mobile drawer ── */
    .nav-open .main-navigation {
        display:flex !important;
        flex-direction:column !important;
        justify-content:flex-start !important;
        align-items:stretch !important;
        align-content:flex-start !important;
        position:fixed;
        top:calc(var(--header-height) + 10px);
        left:0; right:0; bottom:0;
        background:var(--color-bg);
        padding:1rem 1.25rem 2rem;
        overflow-y:auto;
        z-index:var(--z-overlay);
        box-shadow:var(--shadow-lg);
        animation:slideDown .2s ease;
    }

    @keyframes slideDown {
        from { opacity:0; transform:translateY(-8px); }
        to   { opacity:1; transform:translateY(0); }
    }

    /* ── Nav menu list ── */
    .nav-open .nav-menu {
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0;
        width:100%;
        margin:0 !important;
        padding:0 !important;
        list-style:none;
        flex:0 0 auto !important;
        align-self:flex-start !important;
    }

    /* ── All item rows: link + toggle button side by side ── */
    .nav-open .nav-menu > li { display:flex; flex-wrap:wrap; align-items:stretch; border-bottom:1px solid var(--color-border); }
    .nav-open .nav-menu .sub-menu li { display:flex; flex-wrap:wrap; align-items:stretch; }
    .nav-open .nav-menu > li:first-child { border-top:1px solid var(--color-border); }

    .nav-open .nav-menu > li > a {
        flex:1;
        display:block;
        font-size:1rem;
        font-weight:500;
        padding:.875rem 1rem;
        color:var(--color-text);
        background:transparent;
        border-radius:0;
        border-bottom:none;
        transition:color var(--transition-fast), background var(--transition-fast);
    }

    .nav-open .nav-menu > li > a:hover,
    .nav-open .nav-menu > li.current-menu-item > a { color:var(--color-primary); background:rgba(0,0,0,.03); }

    /* ── Sub-menu toggle +/- button ── */
    .nav-open .nav-menu .sub-menu .sub-menu-toggle { display:flex; border-left:1px solid var(--color-border); }
    .nav-open .sub-menu-toggle {
        display:flex;
        align-items:center;
        justify-content:center;
        flex-shrink:0;
        width:48px;
        background:transparent;
        border:none;
        border-left:1px solid var(--color-border);
        cursor:pointer;
        color:var(--color-text);
        transition:background var(--transition-fast), color var(--transition-fast);
    }

    .nav-open .sub-menu-toggle:hover { background:rgba(0,0,0,.04); color:var(--color-primary); }

    /* Plus icon via pseudo-elements */
    .sub-toggle-icon { position:relative; display:block; width:14px; height:14px; }
    .sub-toggle-icon::before,
    .sub-toggle-icon::after {
        content:"";
        position:absolute;
        background:currentColor;
        border-radius:2px;
        transition:transform .25s ease, opacity .25s ease;
    }
    .sub-toggle-icon::before { width:14px; height:2px; top:6px; left:0; }  /* horizontal bar */
    .sub-toggle-icon::after  { width:2px; height:14px; top:0; left:6px; }  /* vertical bar = plus */

    /* Minus: hide vertical bar when open */
    .nav-open .sub-open > .sub-menu-toggle .sub-toggle-icon::after { transform:rotate(90deg); opacity:0; }
    .nav-open .sub-open > .sub-menu-toggle { color:var(--color-primary); background:rgba(0,0,0,.04); }

    /* ── Sub-menu: hidden by default, shown on .sub-open ── */
    .nav-open .nav-menu .sub-menu {
        display:none !important;
        width:100%;
        position:static !important;
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        box-shadow:none !important;
        border:none !important;
        border-left:3px solid var(--color-primary) !important;
        border-radius:0 !important;
        background:transparent !important;
        min-width:0 !important;
        padding:.25rem 0 .5rem .75rem !important;
        margin:0 0 .5rem 1rem !important;
        z-index:auto !important;
        animation:fadeIn .2s ease;
    }

    .nav-open .nav-menu li.sub-open > .sub-menu { display:block !important; }

    @keyframes fadeIn {
        from { opacity:0; transform:translateY(-4px); }
        to   { opacity:1; transform:translateY(0); }
    }

    .nav-open .nav-menu .sub-menu a {
        flex:1;
        display:block;
        font-size:.9rem;
        padding:.5rem .75rem;
        color:var(--color-text);
        border-radius:var(--radius-md);
    }

    .nav-open .nav-menu .sub-menu a:hover { color:var(--color-primary); background:rgba(0,0,0,.04); }

    /* ── Nested sub-menu (3rd level) ── */
    .nav-open .nav-menu .sub-menu .sub-menu { margin-left:1rem !important; border-left-color:var(--color-border) !important; }

    /* ── Tablet: hide CTA text, keep icons ── */
    .header-cta-btn { display:none; }
    .header-login-btn { min-width:36px; justify-content:center; padding:.375rem; }

    /* Centered header: hide nav row */
    .header-inner--centered { padding:.75rem 1rem; }
    .header-nav-row { display:none; }
    .header-logo-row { grid-template-columns:auto 1fr auto; }
}

/* ── Mobile ( ≤ 768px ) ────────────────────────────────────── */
@media ( max-width:768px ) {

    .header-inner { gap:.375rem; }

    /* Hide CTA buttons from header bar — shown inside drawer instead */
    .header-cta-btn { display:none !important; }

    /* Login: icon only — hide label text */
    .header-login-btn .btn-label { display:none; }
    .header-login-btn { padding:.375rem; min-width:36px; justify-content:center; }

    /* Cart, search, login icons all visible beside toggle */
    .header-cart-btn,
    .header-search-btn { display:flex; padding:.375rem; }

    /* Larger touch targets */
    .nav-toggle { width:44px; height:44px; }
}

/* ── Mobile CTA area (bottom of drawer) ───────────────────── */
.mobile-cta-area {
    display:flex;
    flex-direction:column;
    gap:.75rem;
    padding:1.25rem 1rem 0;
    margin-top:1rem;
    border-top:1px solid var(--color-border);
}

.mobile-cta-area .header-cta-btn {
    display:block !important;
    width:100%;
    text-align:center;
    padding:.75rem 1rem;
    font-size:1rem;
}