/* ============================================
   1. GLOBAL & STICKY WRAPPER
   ============================================ */
.sticky-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: #EDE8D0;
}

.sticky-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sticky-wrapper a {
    text-decoration: none;
}

/* Push page content below the fixed header.
   --header-height is set by JS (see script at bottom of this file's notes)
   The px fallback values are safe upper-bound guesses if JS hasn't run yet.

   IMPORTANT for true auto-resize on every device: --header-height must be
   recalculated any time the header's real height can change, not just once
   on load. On the JS side, make sure you have something like:

       function setHeaderHeight() {
           const h = document.querySelector('.sticky-wrapper').offsetHeight;
           document.documentElement.style.setProperty('--header-height', h + 'px');
       }
       window.addEventListener('load', setHeaderHeight);
       window.addEventListener('resize', setHeaderHeight);
       window.addEventListener('orientationchange', setHeaderHeight);
       // also call setHeaderHeight() after fonts load (document.fonts.ready)
       // since webfont swap can change text height/wrapping after first paint.

   Without the resize/orientationchange listeners, rotating a phone or
   resizing a browser window (desktop users do this constantly) leaves a
   stale --header-height and either a gap or overlapping content. */
body {
    padding-top: var(--header-height, 210px);
}

/* ============================================
   2. TOP BAR (Black)
   ============================================ */
.top-bar {
    background-color: #111111;
    color: #ffffff;
    /* clamp(min, preferred, max) scales continuously between viewport
       sizes instead of jumping at fixed breakpoints */
    font-size: clamp(11px, 1.6vw, 13px);
    padding: 8px clamp(12px, 4vw, 40px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    flex-wrap: wrap;
    row-gap: 4px;
}

.top-bar-links {
    display: flex;
    gap: 20px;
}

.top-bar-links li a {
    color: #cccccc;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.top-bar-links li a:hover {
    color: #d4a359; /* Gold accent */
}

/* ============================================
   3. MAIN HEADER (White Background)
   ============================================ */
.site-header {
    background-color: #ffffff;
    min-height: 80px;
}

.main-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px clamp(16px, 4vw, 40px);
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: nowrap;
}

.mobile-menu-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #1a0802;
    order: -1; /* Always appears first/left on mobile */
}

/* Search Bar */
.search-bar {
    flex: 0 1 500px;
    margin: 0 20px;
}

.search-bar form {
    display: flex;
    border: 1px solid #dddddd;
    border-radius: 25px;
    overflow: hidden;
    background-color: #f9f9f9;
}

.search-bar input {
    flex: 1;
    padding: 10px 20px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    min-width: 0; /* prevents flex overflow on small screens */
}

.search-bar button {
    background-color: #e8ded2;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    color: #333;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.search-bar button:hover {
    background-color: #d8cebf;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.header-actions > a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 16px;
    transition: background 0.2s;
}

.header-actions > a:hover {
    background-color: #e0e0e0;
}

/* NOTE: .language-selector lives INSIDE .header-actions in the real markup
   (div.language-selector is a child of div.header-actions, alongside the
   wishlist/account/admin/cart links) — not a sibling of .header-actions at
   the .container level. Its position relative to the cart icon is
   controlled by source order within .header-actions (see the HTML: the
   language selector already comes right before the cart link), so no
   `order` override is needed here. */
.language-selector select {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    outline: none;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: all 0.3s ease;
}

.language-selector select:hover {
    border-color: #d4a359;
}

.cart-icon {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #d4a359;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   4. MAIN NAVIGATION (Desktop - Dark Brown)
   ============================================ */
.main-nav {
    background-color: #1a0802;
    position: relative;
    min-height: 50px;
}

.main-nav > ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav > ul > li {
    position: relative;
}

.main-nav > ul > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.main-nav > ul > li:hover > a {
    background-color: #2e1005;
    color: #d4a359;
}

/* ============================================
   5. STANDARD DROPDOWNS (Snacking, Wholesale)
   ============================================ */
.main-nav > ul > li > ul {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    width: 260px;
    border-top: 3px solid #d4a359;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.main-nav > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-nav > ul > li > ul > li > a {
    display: block;
    padding: 12px 20px;
    color: #333333;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s, color 0.2s;
}

.main-nav > ul > li > ul > li > a:hover {
    background-color: #f9f9f9;
    color: #1a0802;
    font-weight: 600;
    padding-left: 25px;
}

/* ============================================
   6. MEGA MENU DROPDOWN (Shop)
   ============================================ */
.mega-menu {
    position: static !important;
    display: inline-block;
}

.mega-menu > a {
    display: inline-block;
    padding: 10px 15px;
}

.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-top: 3px solid #d4a359;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

.mega-menu:hover .mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mega-dropdown-inner {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 30px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.mega-column {
    flex: 1;
    max-width: 220px;
}

.mega-column h4 {
    font-size: 14px;
    font-weight: 700;
    color: #1a0802;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #1a0802;
    text-transform: uppercase;
}

.mega-column ul li {
    margin-bottom: 8px;
    list-style: none;
}

.mega-dropdown .mega-column ul li a {
    display: block !important;
    color: #555555 !important; /* Dark Gray text */
    font-size: 13.5px !important;
    font-weight: 400 !important;
    padding: 2px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    transition: color 0.2s ease !important;
}
.mega-dropdown .mega-column ul li a:hover {
    color: #d4a359 !important; /* Gold accent on hover */
    font-weight: 600 !important;
}

.mega-column ul li a:hover {
    color: #d4a359;
    font-weight: 600;
}

/* ============================================
   7. MARQUEE / AUTO-SLIDE BAR (Red)
   ============================================ */
.marquee-container {
    background-color: #9e1b0e;
    color: #ffffff;
    padding: 10px 0;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    min-height: 40px;
}

.marquee-track {
    display: flex;
    width: fit-content;
    animation: marquee-scroll 25s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
    padding-left: 20px;
}

@media screen and (max-width: 768px) {
    .marquee-content span {
        font-size: 12.5px;
        letter-spacing: 0.2px;
    }
}

.marquee-content span {
    font-size: 13px;
    font-weight: 600;
}

.marquee-divider {
    color: #e5978f;
    font-weight: normal !important;
}

@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================
   8. MOBILE SIDEBAR (off-canvas nav, used <=1024px)
   ============================================ */
.mobile-overlay,
#mobile-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-overlay.active,
#mobile-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-sidebar,
#mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: 300px;
    max-width: 85vw;
    background-color: #ffffff;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    will-change: transform;
}

.mobile-sidebar.active,
#mobile-sidebar.active {
    transform: translateX(0);
}

body.menu-open {
    overflow: hidden;
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eeeeee;
}

.auth-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #333333;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
}

.auth-link {
    color: #111111;
    text-decoration: none;
    font-weight: 500;
}

.auth-divider {
    margin: 0 8px;
    color: #888888;
}

.close-btn {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #333333;
    cursor: pointer;
    padding: 0 4px;
}

/* Navigation & Accordion Lists */
.sidebar-nav {
    padding: 10px 0 30px 0;
}

.accordion-list,
.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.accordion-header,
.single-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: #222222;
    text-decoration: none;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #f4f4f4;
    transition: background-color 0.2s ease;
}

.accordion-header:hover,
.single-link:hover {
    background-color: #f9f9f9;
}

.submenu.level-2 .accordion-header,
.submenu.level-2 .single-link {
    padding-left: 28px;
}

.submenu.level-3 .accordion-header,
.submenu.level-3 .single-link {
    padding-left: 36px;
    font-size: 14px;
}

.submenu.level-4 a {
    display: block;
    padding: 10px 20px 10px 48px;
    color: #444444;
    text-decoration: none;
    font-size: 13.5px;
    border-bottom: 1px solid #f8f8f8;
}

.submenu.level-4 a:hover {
    color: #000000;
    background-color: #f4f4f4;
}

.toggle-icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-icon::before {
    content: "∨";
    font-size: 12px;
    font-weight: bold;
    color: #555555;
    transition: transform 0.2s ease;
}

.accordion-item.open > .accordion-header > .toggle-icon::before {
    content: "−";
    font-size: 16px;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
    background-color: #ffffff;
}

.accordion-item.open > .submenu {
    max-height: 1000px;
    transition: max-height 0.4s ease-in-out;
}

.sidebar-footer {
    padding: 20px;
    margin-top: 15px;
    border-top: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    color: #333333;
    text-decoration: none;
    font-size: 14px;
}

/* ============================================
   9. CONTENT WRAPPER
   ============================================ */
.main-content {
    padding: 30px 20px;
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================
   10. ALERTS
   ============================================ */
.alert {
    padding: 12px 20px;
    border-radius: 12px;
    margin: 12px 0;
}

.alert-success {
    background: #d4edda;
    color: #155724;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
}

/* ============================================
   11. RESPONSIVE — SINGLE CONSOLIDATED BLOCK
   (Everything mobile/tablet related lives here now.
    No other @media blocks exist elsewhere in this file
    for these selectors — that was the main source of
    conflicting/duplicate rules before.)
   ============================================ */

/* ---------- LARGE / ULTRA-WIDE DESKTOP (>=1600px) ----------
   .container already caps at max-width:1400px + margin:0 auto, so it
   stays centered and doesn't stretch edge-to-edge on huge monitors.
   Nothing else needed here — documented for clarity. */

/* ---------- SMALL DESKTOP / LAPTOP (1025px–1279px) ----------
   Desktop nav still applies here (mobile block below only triggers
   at <=1024px), but padding/gaps get a bit tighter so the mega-menu
   and search bar don't feel cramped just above the mobile cutoff. */
@media screen and (max-width: 1279px) and (min-width: 1025px) {
    .main-header .container {
        padding: 15px 24px;
    }

    .search-bar {
        flex-basis: 320px;
        margin: 0 12px;
    }

    .main-nav > ul > li > a {
        padding: 16px 14px;
        font-size: 13.5px;
    }
}

/* ---------- TABLET (<=1024px) ---------- */
@media screen and (max-width: 1024px) {
    .top-bar {
        padding: 8px 16px;
        font-size: clamp(10.5px, 2.6vw, 12px);
    }

    .top-bar-links {
        display: none;
    }

    /* Language selector stays visible on mobile, restored per feedback.
       It lives INSIDE .header-actions in the real markup, right before
       the cart link — no order/margin override needed to keep it ahead
       of the cart, source order already does that. flex-shrink:0 just
       keeps it from being squeezed to nothing now that .header-actions
       shares row 1 with the logo and hamburger. */
     .language-selector {
    display: block;
    flex-shrink: 0;
   }

    .language-selector select {
        padding: 6px 10px;
        font-size: 12px;
        height: auto;
    }

    .header-actions > a:not(.cart-icon) {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: background-color 0.2s;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* Desktop nav is fully replaced by the off-canvas #mobile-sidebar,
       so just hide it rather than trying to reuse it inline. */
    .main-nav {
        display: none;
    }

    /* Row 1: hamburger — logo — header-actions (language selector, then
       cart — that's already their source order inside .header-actions).
       Row 2: search, full width.

       Switched from flex-wrap to CSS Grid on purpose: with flex-wrap,
       the browser wraps ANY item that doesn't fit the remaining space on
       its line — so even with order set correctly, .header-actions could
       still get pushed to its own row the moment logo+actions combined
       width ran a few px over on a given phone, which is exactly what
       was happening. A 2-row grid has no such ambiguity: "toggle logo
       actions" / "search search search" are fixed cells, so the header
       is ALWAYS exactly those 2 rows on every screen size — items can
       only shrink internally, never wrap to a 3rd row. */
    .main-header .container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "toggle logo actions"
            "search search search";
        align-items: center;
        column-gap: clamp(6px, 2vw, 10px);
        row-gap: 8px;
        padding: 10px clamp(12px, 4vw, 16px);
    }

    .mobile-menu-toggle {
        grid-area: toggle;
    }

    /* Logo is a <div class="logo"> wrapping the <a><img></a> in the real
       markup (not a bare <a>) — target it directly. Its grid column is
       "1fr" (all the leftover space between the hamburger and the
       actions block), and min-width:0 lets it shrink below its content
       size instead of forcing the row wider than the screen. */
    .main-header .container > .logo {
        grid-area: logo;
        min-width: 0;
        overflow: hidden;
    }

    .main-header .container > .logo img {
        max-height: 32px;
        width: auto;
        display: block;
    }

    /* .header-actions is the real, direct grid child of .container here
       (language selector and cart both live inside it). Its grid column
       is "auto" (sized to its own content) and it sits in the row's last
       cell, so it's pinned to the right edge automatically — no auto
       margin needed. It stays a flex row internally so its own children
       (language selector, cart) can still shrink to fit. */
    .header-actions {
        grid-area: actions;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        min-width: 0;
    }


    .header-actions > a.cart-icon {
        width: 40px;
        height: 40px;
        background-color: #f5f5f5;
        border: 1px solid #eee;
        flex-shrink: 0;
    }

    /* Search bar's grid-area spans all 3 columns, so it's always its own
       full-width row below the logo/actions row — regardless of how
       tight row 1 gets. */
    .search-bar {
        grid-area: search;
        margin: 0;
    }


    .search-bar form {
        border-radius: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        border-color: #e5e0d3;
    }

    .search-bar input {
        padding: 12px 18px;
        font-size: 14px;
    }

    .search-bar button {
        padding: 0 20px;
    }

    /* Header is shorter now that rows are tightened up, so the
       fallback offset (used before JS sets --header-height) is
       reduced to match. Adjust to the real measured height if
       it doesn't match after testing. */
    body {
        padding-top: var(--header-height, 130px);
    }

    main,
    #MainContent,
    .main-content,
    #content,
    .site-content,
    .page-wrapper,
    #page {
        padding-top: 0 !important; /* body padding already accounts for header */
        margin-top: 0;
    }
}

/* ---------- MOBILE (<=768px) ---------- */
@media screen and (max-width: 768px) {
    .top-bar {
        justify-content: center;
        padding: 8px 10px;
        text-align: center;
    }

    .top-bar > div:first-child {
        width: 100%;
        text-align: center;
        font-size: 12px;
    }

    .language-selector select {
        padding: 4px 8px;
        font-size: 11px;
    }

    body {
        padding-top: var(--header-height, 125px);
    }
}

/* ---------- SMALL MOBILE (<=480px) ---------- */
@media screen and (max-width: 480px) {
    .language-selector select {
        padding: 2px 6px;
        font-size: 10px;
        border-radius: 12px;
        max-width: 90px;
        text-overflow: ellipsis;
    }

    body {
        padding-top: var(--header-height, 120px);
    }
}

/* ---------- VERY SMALL / OLDER PHONES (<=360px) ----------
   Covers narrow devices like iPhone SE (375px, close enough to catch
   here via the query below too), Galaxy Fold cover screen (~280px),
   and old Android phones. Search input, cart, and language selector
   can start colliding below ~360px without this. */
@media screen and (max-width: 360px) {
    .main-header .container {
        padding: 8px 10px;
        column-gap: 6px;
    }

    .search-bar input {
        padding: 10px 12px;
        font-size: 13px;
    }

    .search-bar button {
        padding: 0 14px;
    }

    .header-actions > a.cart-icon {
        width: 34px;
        height: 34px;
    }

    .language-selector select {
        max-width: 70px;
        font-size: 9.5px;
    }

    .marquee-content span {
        font-size: 11px;
    }

    body {
        padding-top: var(--header-height, 115px);
    }
}

/* ---------- SHORT VIEWPORT / LANDSCAPE PHONES ----------
   A phone rotated to landscape often has plenty of width but very
   little height (e.g. 700px wide x 340px tall). Width-only breakpoints
   miss this, and a tall fixed header can eat half the visible screen.
   Use max-height rather than max-width here. */
@media screen and (max-height: 420px) and (orientation: landscape) {
    .top-bar {
        min-height: 28px;
        padding: 4px 16px;
        font-size: 11px;
    }

    .main-header .container {
        padding: 6px 16px;
    }

    .search-bar {
        display: none; /* reclaim vertical space; keep search reachable
                           via the mobile sidebar/menu instead */
    }

    body {
        padding-top: var(--header-height, 90px);
    }
}

/* ---------- FOLDABLES / TABLETS IN BETWEEN (481px–767px) ----------
   Large phones and small tablets in portrait sit right between the
   two breakpoints above; nothing extra is needed since the fluid
   clamp() values already carry them smoothly, but flagged here so
   it's clear this range was considered rather than accidentally
   skipped. */

/* ---------- HIGH-DPI / RETINA SCREENS ----------
   No pixel-density-specific overrides needed: all sizing above uses
   relative units (px is fine since it's a CSS px, already DPI-
   independent) and clamp()/vw, so retina and standard-DPI screens at
   the same CSS viewport width render identically. Avoid adding any
   raw device-pixel-ratio media queries unless you introduce raster
   images that need @2x/@3x swapping — that's a separate concern from
   this layout. */
   @media screen and (max-width: 1024px) {
    .top-bar {
        padding: 5px 16px;        /* was 8px 16px */
        min-height: 30px;         /* was inherited 40px */
    }

    .main-header .container {
        padding: 8px clamp(12px, 4vw, 16px);  /* was 10px */
        row-gap: 4px;              /* was 8px */
        column-gap: clamp(4px, 2vw, 8px);     /* was clamp(6px, 2vw, 10px) */
    }

    .mobile-menu-toggle {
        width: 34px;               /* was 40px */
        height: 34px;
    }

    .header-actions > a.cart-icon {
        width: 34px;               /* was 40px */
        height: 34px;
    }

    .language-selector select {
        padding: 4px 8px;          /* was 6px 10px */
        font-size: 11px;           /* was 12px */
    }

    .search-bar {
        margin: 0;
    }

    .search-bar input {
        padding: 8px 16px;         /* was 12px 18px */
        font-size: 13px;           /* was 14px */
    }

    .search-bar button {
        padding: 0 16px;           /* was 0 20px */
    }

    body {
        padding-top: var(--header-height, 130px);  /* logo/cart/language now share row 1 with search on its own row 2 — shorter header, so this fallback stays lower than the old 3-row estimate */
    }
}