@font-face{font-family:'Mahonie Header Sans';font-style:normal;font-weight:300 800;src:url('../fonts/header-open-sans-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:'MH Icons';font-style:normal;font-weight:900;src:url('../fonts/header-fa-solid.woff2') format('woff2')}
@font-face{font-family:'MH Icons';font-style:normal;font-weight:400;src:url('../fonts/header-fa-regular.woff2') format('woff2')}
@font-face{font-family:'MH Account';font-style:normal;font-weight:400;src:url('../fonts/header-account.woff2') format('woff2')}
html body header.mahonie-header.page-header{font-size:13px;line-height:1.4;padding:0;margin:0;box-sizing:border-box;box-shadow:none;border-radius:0;min-height:0}
html body.cms-index-index header.mahonie-header.page-header{font-size:14px}
.mahonie-header *,.mahonie-header *::before,.mahonie-header *::after{box-sizing:border-box}
.mahonie-header a{text-decoration:none}
.mahonie-header button{font-family:inherit;padding:0 12px;box-shadow:none;font-weight:400;margin:0;letter-spacing:normal;text-transform:none}
.mahonie-header li{margin:0 0 9px;line-height:inherit}
.mahonie-header .fas,.mahonie-header .far{font-family:'MH Icons';font-style:normal;display:inline-block;line-height:1;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased}
.mahonie-header .fas{font-weight:900}.mahonie-header .far{font-weight:400}
.mahonie-header .fa-user::before{font-family:'MH Account';font-weight:600;content:'\e91a'}
.mahonie-header .fa-chevron-down::before{content:'\f078'}.mahonie-header .fa-search::before{content:'\f002'}.mahonie-header .fa-heart::before{content:'\f004'}.mahonie-header .fa-sign-in-alt::before{content:'\f2f6'}.mahonie-header .fa-user-plus::before{content:'\f234'}.mahonie-header .fa-arrow-left::before{content:'\f060'}.mahonie-header .fa-times::before{content:'\f00d'}.mahonie-header .fa-chevron-right::before{content:'\f054'}

/* =========================================================================
   MAHONIE SINGLE HEADER — one stylesheet, scoped to .mahonie-header.
   No global selectors, no !important unless required to beat Porto defaults.
   ========================================================================= */
:root {
    --mh-ink:        #211a15;
    --mh-ink-soft:   #625951;
    --mh-paper:      rgba(255, 255, 255, .975);
    --mh-line:       rgba(33, 26, 21, .11);
    --mh-line-soft:  rgba(33, 26, 21, .07);
    --mh-h:          60px;
    --mh-header-compact: 56px;
    --mh-h-mobile:   62px;
    --mh-ease:       cubic-bezier(.22, 1, .36, 1);
    --mh-z-header:   1000;
    --mh-z-overlay:  1100;
}

.mahonie-announce {
    background: #15110e;
    color: #eee9e0;
    text-align: center;
    /* The strip is a flow sibling BEFORE <header>, so it never inherited the
       header's Open Sans and rendered in the Porto body face (Inter) — a
       different font from the nav directly beneath it. Pin it to one family. */
    font-family: "Mahonie Header Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 10px 16px;
    line-height: 1;
}

/* Use higher specificity to win over Porto's type14/page-header defaults.
   position: fixed pins to the viewport regardless of the page-wrapper flex
   container. The announcement bar (which is NOT inside this header) scrolls
   away naturally; the header stays pinned at the top of the viewport. */
html body header.mahonie-header.page-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--mh-z-header);
    background: transparent;
    color: var(--mh-ink);
    font-family: "Mahonie Header Sans", "Helvetica Neue", Arial, sans-serif;
    border-bottom: 1px solid transparent;
    /* Note: no `will-change: transform` here. With it set, any `position: fixed`
       descendant (the mobile drawer) takes the header as its containing block
       instead of the viewport, breaking the drawer's full-height layout. */
    transition: transform .35s var(--mh-ease), background-color .35s var(--mh-ease), border-color .35s var(--mh-ease);
}
.mahonie-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;     /* center the row vertically inside the bar */
    gap: clamp(16px, 2.4vw, 40px);
    min-height: var(--mh-h);
    padding: 0 clamp(20px, 3.2vw, 52px);
    padding-top: 36px;       /* push the whole row down to align with the right-side icons */
    padding-bottom: 16px;   /* small bottom space so it doesn't sit flush */
    transition: min-height .35s var(--mh-ease), background-color .35s var(--mh-ease), box-shadow .35s var(--mh-ease);
}
/* === STICKY ===
   The <header> is the sticky element so the bar (and the announcement strip
   above it, when present) scroll away naturally. The bar re-pins on scroll. */
.mahonie-bar {
    background: transparent;
}
/* === NON-HERO PAGES (no .hero) — show solid white + dark text from the start === */
html body .mahonie-bar:not(.mahonie-over-hero) {
    background: var(--mh-paper);
    color: var(--mh-ink);
    border-bottom: 1px solid var(--mh-line-soft);
}
html body .mahonie-bar:not(.mahonie-over-hero) a,
html body .mahonie-bar:not(.mahonie-over-hero) .icon-btn,
html body .mahonie-bar:not(.mahonie-over-hero) .icon-btn i { color: var(--mh-ink); }
/* === TRANSPARENT OVER HERO (pages with a .hero element right under the header) ===
   When the page has <main> with .hero as the first section, the bar stays
   transparent + the logo/nav/icons render in white, larger, bolder. Once the user
   scrolls past the hero (>40px), the .scrolled class is added and the bar turns
   solid white with dark text. On every other page (.hero absent) the bar is solid
   from the start. */
.mahonie-bar.mahonie-over-hero {
    background: transparent;
    box-shadow: none;
    border-bottom: 0;
    color: #fff;
}
.mahonie-bar.mahonie-over-hero .mahonie-nav-list a {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.mahonie-bar.mahonie-over-hero .mahonie-nav-list a::after { background: #fff; }
.mahonie-bar.mahonie-over-hero a,
.mahonie-bar.mahonie-over-hero .icon-btn,
.mahonie-bar.mahonie-over-hero .icon-btn i {
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.mahonie-bar.mahonie-over-hero .icon-btn i { font-size: 19px; }
.mahonie-bar.mahonie-over-hero .currency-trigger { font-weight: 700; letter-spacing: .18em; }
/* === COMPACT (scrolled) === */
.mahonie-bar.mahonie-scrolled {
    min-height: var(--mh-header-compact);
    box-shadow: 0 4px 20px rgba(15, 12, 9, .08);
}
/* === HIDE ON SCROLL DOWN / SHOW ON SCROLL UP === */
html body header.mahonie-header.page-header.mahonie-header-hidden {
    transform: translateY(-110%) !important;
}
/* When the user has scrolled, the over-hero variant collapses to solid white. */
.mahonie-bar.mahonie-over-hero.mahonie-scrolled {
    background: var(--mh-paper);
    color: var(--mh-ink);
    box-shadow: 0 4px 20px rgba(15, 12, 9, .08);
    border-bottom: 1px solid var(--mh-line-soft);
}
.mahonie-bar.mahonie-over-hero.mahonie-scrolled a,
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .icon-btn,
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .icon-btn i {
    color: var(--mh-ink);
    text-shadow: none;
}
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .mahonie-nav-list a {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    text-shadow: none;
}
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .icon-btn i { font-size: 19px; }

/* --- LOGO -------------------------------------------------------------- */
.mahonie-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--mh-ink);
    /* Reserve a slot so the layout doesn't shift. Replace min-width with your
       real logo's natural width when you drop the <img> in. */
    min-width: 120px;
    min-height: 36px;
}
.mahonie-logo img {
    display: block;
    width: auto;
    height: 36px;
    max-width: 52px;
    object-fit: contain;
}
.mahonie-logo .wordmark {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    white-space: nowrap;
    color: var(--mh-ink);
}
.mahonie-logo__wordmark {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1;
    white-space: nowrap;
    color: var(--mh-ink);
    transition: color .35s var(--mh-ease);
}
/* White on transparent-over-hero */
.mahonie-bar.mahonie-over-hero .mahonie-logo,
.mahonie-bar.mahonie-over-hero .mahonie-logo__wordmark { color: #fff; }
/* Dark after scroll (also for over-hero pages that collapsed) */
.mahonie-bar.mahonie-scrolled .mahonie-logo,
.mahonie-bar.mahonie-scrolled .mahonie-logo__wordmark,
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .mahonie-logo,
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .mahonie-logo__wordmark { color: var(--mh-ink); }
/* Hide the wordmark if the user inserts a real <img> (so the brand name doesn't double up) */
.mahonie-logo img + .mahonie-logo__wordmark,
.mahonie-logo img ~ .mahonie-logo__wordmark { display: none; }

/* --- NAV --------------------------------------------------------------- */
.mahonie-nav {
    justify-self: center;
    min-width: 0;
}
.mahonie-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.4vw, 28px);
}
.mahonie-nav-list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mh-ink);
    text-decoration: none;
    transition: color .25s ease, opacity .25s ease;
}
.mahonie-nav-list a::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .4s var(--mh-ease);
}
.mahonie-nav-list a:hover { opacity: .62; }
.mahonie-nav-list a:hover::after,
.mahonie-nav-list a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* === SUBMENU (desktop hover dropdown) ============================== */
.mahonie-nav-list > li {
    position: relative;
}
.mahonie-nav-list .mahonie-submenu {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 220px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 12, 9, .12);
    border: 1px solid var(--mh-line-soft);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .25s var(--mh-ease), visibility 0s linear .25s;
    z-index: 1100;
}
.mahonie-nav-list > li.has-children.is-open > .mahonie-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
    transition: opacity .25s ease, transform .3s var(--mh-ease);
}
.mahonie-submenu a {
    display: block;
    padding: 10px 22px;
    font-size: 13px;        /* identical to .mahonie-nav-list > li > a */
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mh-ink) !important;
    text-decoration: none;
    text-shadow: none !important;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.mahonie-submenu a::after { display: none !important; }
.mahonie-submenu a:hover,
.mahonie-submenu a:focus-visible { background: rgba(33, 26, 21, .04); opacity: 1; }

/* === ATTACHED PANEL (desktop only) ==================================
   The submenu was a dropdown floating under its own <li>. Two failures:
     1. the parent item is a real link, so clicking it navigated to
        /shop.html and the menu vanished mid-browse — exactly the
        "appears for a fraction of a second then disappears" report;
     2. a panel detached from the <li> can never be reached by a hover
        chain: the pointer crosses a gap between the two and :hover dies.
   So: the <li> stops being the positioning context (position:static) and
   the panel anchors to the fixed <header> instead — full-bleed, flush with
   the bar's bottom edge, reading as part of the header panel. Opening is
   driven by JS (.is-open), never by :hover. */
@media (min-width: 769px) {
    .mahonie-nav-list > li.has-children { position: static; }
    .mahonie-nav-list .mahonie-submenu {
        position: absolute;
        /* Start INSIDE the bar's empty bottom strip (bar is 91-99px tall, its
           nav row ends ~y65). With a plain top:100% the <li> ends ~25-40px above
           the panel, and a real pointer crossing that dead strip fires mouseleave:
           the grace timer expires and the panel shuts before the pointer arrives
           — the "menu appears for a fraction of a second" report, round 2. */
        top: calc(100% - 26px);
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        padding: 48px clamp(20px, 3.2vw, 52px) 24px;   /* 22px visual + 26px bar overlap */
        border: 0;
        border-top: 1px solid var(--mh-line-soft);
        box-shadow: 0 24px 44px rgba(15, 12, 9, .10);
        transform: translateY(-10px);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 4px clamp(10px, 1.6vw, 26px);
    }
    .mahonie-nav-list > li.has-children.is-open > .mahonie-submenu { transform: translateY(0); }
    .mahonie-submenu li { margin: 0; }
    .mahonie-submenu a { padding: 8px 0; }
    /* The section's own landing page, surfaced as the panel's heading link
       (a click on the parent now opens the panel instead of navigating). */
    .mahonie-submenu .mahonie-submenu-head {
        padding-right: clamp(12px, 1.6vw, 24px);
        margin-right: clamp(4px, 1vw, 16px);
        border-right: 1px solid var(--mh-line);
    }
    .mahonie-submenu .mahonie-submenu-head a {
        font-weight: 700;
        color: var(--mh-ink) !important;
        border-bottom: 1px solid var(--mh-ink);
    }
}

/* --- ACTIONS (currency + search + account + cart) ---------------------- */
.mahonie-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: end;
    position: relative;
}
.mahonie-actions .icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--mh-ink);
    cursor: pointer;
    text-decoration: none;
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    transition: background-color .2s ease, transform .2s ease;
}
.mahonie-actions .icon-btn:hover { background: rgba(33, 26, 21, .06); transform: translateY(-1px); }
.mahonie-actions .icon-btn:focus-visible { outline: 2px solid var(--mh-ink-soft); outline-offset: 2px; }

.mahonie-actions .currency-trigger {
    width: auto;
    padding: 0 10px;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.mahonie-actions .currency-trigger i { font-size: 10px; opacity: .55; margin-left: 4px; }
.mahonie-currency-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 130px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(25, 20, 16, .10);
    border: 1px solid var(--mh-line-soft);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .25s var(--mh-ease), visibility 0s linear .25s;
    z-index: var(--mh-z-overlay);
}
.mahonie-currency.open .mahonie-currency-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mahonie-currency-menu a {
    display: block;
    padding: 8px 16px;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mh-ink) !important;
    text-decoration: none;
}
.mahonie-currency-menu a:hover,
.mahonie-currency-menu a.active { background: rgba(33, 26, 21, .04); }

/* --- SEARCH PANEL (full-width below the bar) --------------------------- */
.mahonie-search {
    position: relative;
}
.mahonie-search-panel {
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    left: auto;
    width: min(560px, 90vw);
    background: #fff;
    border: 1px solid var(--mh-line-soft);
    border-radius: 2px;
    box-shadow: 0 24px 60px rgba(25, 20, 16, .12);
    padding: 22px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .3s var(--mh-ease), visibility 0s linear .3s;
    z-index: var(--mh-z-overlay);
}
.mahonie-search.open .mahonie-search-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mahonie-search-panel input.input-text {
    width: 100%;
    height: 48px;
    border: 0;
    border-bottom: 1px solid var(--mh-ink);
    border-radius: 0;
    background: transparent;
    font-size: 16px;
    padding: 0;
}
.mahonie-search-panel .mahonie-search-cat {
    width: 100%;
    margin-top: 12px;
    height: 40px;
    border: 0;
    border-bottom: 1px solid var(--mh-line);
    background: transparent;
    font-size: 12px;
    color: var(--mh-ink-soft);
}
.mahonie-search-panel .mahonie-search-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    gap: 8px;
}
.mahonie-search-panel .mahonie-search-submit {
    height: 40px;
    padding: 0 22px;
    border: 0;
    background: var(--mh-ink);
    color: #fff;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}
.mahonie-search-discovery { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.mahonie-search-discovery a {
    display: inline-flex;
    padding: 6px 12px;
    border: 1px solid var(--mh-line);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--mh-ink);
    text-decoration: none;
}
.mahonie-search-discovery a:hover { background: rgba(33, 26, 21, .045); }

/* --- ACCOUNT DROPDOWN -------------------------------------------------- */
.mahonie-account {
    position: relative;
}
.mahonie-account-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--mh-line-soft);
    box-shadow: 0 16px 40px rgba(25, 20, 16, .10);
    list-style: none;
    margin: 0;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s ease, transform .25s var(--mh-ease), visibility 0s linear .25s;
    z-index: var(--mh-z-overlay);
}
.mahonie-account.open .mahonie-account-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mahonie-account-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mh-ink) !important;
    text-decoration: none;
}
.mahonie-account-menu a:hover { background: rgba(33, 26, 21, .04); }
.mahonie-account-menu i { width: 16px; text-align: center; color: var(--mh-ink-soft); }

/* --- CART (self-contained — no Porto minicart block) ------------------- */
.mahonie-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}
.mahonie-cart-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mh-ink);
    text-decoration: none;
    border-radius: 50%;
    transition: background-color .2s ease, transform .2s ease;
}
.mahonie-cart-icon:hover { background: rgba(33, 26, 21, .06); transform: translateY(-1px); }
.mahonie-cart-icon i {
    font-size: 17px;
    line-height: 1;
    color: var(--mh-ink);
    /* fas (solid) FA5 icons require font-weight: 900 to render the glyph */
    font-weight: 900;
}
/* Match the size of the other over-hero icons (search/account are 19px) */
.mahonie-bar.mahonie-over-hero .mahonie-cart-icon i,
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .mahonie-cart-icon i { font-size: 19px; }
/* Match the per-state color of the other icons */
.mahonie-bar.mahonie-over-hero .mahonie-cart-icon,
.mahonie-bar.mahonie-over-hero .mahonie-cart-icon i { color: #fff; }
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .mahonie-cart-icon,
.mahonie-bar.mahonie-over-hero.mahonie-scrolled .mahonie-cart-icon i { color: var(--mh-ink); }
/* Strip Porto's "Cart" text + counter labels + subtotal — bag icon only, matches other icons */
.mahonie-cart .minicart-wrapper .action.showcart .text,
.mahonie-cart .minicart-wrapper .action.showcart .counter-label,
.mahonie-cart .minicart-wrapper .action.showcart .counter-number,
.mahonie-cart .minicart-wrapper .showcart.action-subtotal,
.mahonie-cart .minicart-wrapper .cart-text { display: none !important; }
.mahonie-cart .minicart-wrapper .action.showcart > i.minicart-icon { font-size: 20px; }
/* Make sure the bag icon is the same FontAwesome family as other icons */
.mahonie-cart .minicart-wrapper .minicart-icon { font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif; font-weight: 400; }
/* Lock the header background to opaque white — win over any leaked transparent-hero overrides
   Now obsolete: the header is transparent by default and gets its background from
   the per-state rules below. Keeping a no-op comment marker so we remember the
   specificity war is over.
   body header.mahonie-header.mahonie-header,
   html body header.mahonie-header { background-color: var(--mh-paper) !important; }
*/

/* --- MOBILE HAMBURGER (rendered, not injected) ------------------------- */
.mahonie-mobile-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    color: var(--mh-ink);
}
.mahonie-mobile-toggle::before,
.mahonie-mobile-toggle::after,
.mahonie-mobile-toggle span::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: transform .3s var(--mh-ease), opacity .2s ease;
}
.mahonie-mobile-toggle::before { transform: translateY(-5px); }
.mahonie-mobile-toggle::after  { transform: translateY(5px); }
.mahonie-mobile-toggle span::before { display: block; }
.mahonie-mobile-toggle span { position: relative; display: block; width: 20px; height: 1px; }
.mahonie-header.menu-open .mahonie-mobile-toggle::before { transform: rotate(45deg); }
.mahonie-header.menu-open .mahonie-mobile-toggle::after  { transform: rotate(-45deg); }
.mahonie-header.menu-open .mahonie-mobile-toggle span::before { opacity: 0; }

/* --- MOBILE NAV DRAWER (hidden on desktop by default) ----------------- */
.mahonie-nav-drawer { display: none; }

/* --- MOBILE LAYOUT ----------------------------------------------------- */
@media (max-width: 768px) {
    .mahonie-announce { padding: 8px 12px; }   /* keep the 11px base; 10px on mobile was a third size */
    .mahonie-bar {
        /* Symmetric columns so the wordmark centres in the BAR itself. The old
           44px | 1fr | 88px split parked the logo 22px left of true centre. */
        grid-template-columns: 1fr auto 1fr;
        min-height: var(--mh-h-mobile);
        padding: 0 8px;
        gap: 0;
    }
    .mahonie-mobile-toggle { display: inline-flex; justify-self: start; }
    .mahonie-logo { justify-self: center; min-width: 0; }
    .mahonie-logo img { display: none; }
    /* NB: the element carries .mahonie-logo__wordmark; the old ".wordmark"
       selector here matched nothing, so the mobile size never applied. */
    .mahonie-logo__wordmark { font-size: 18px; letter-spacing: .14em; }
    .mahonie-nav { display: none; }
    .mahonie-actions { grid-column: 3; justify-self: end; gap: 2px; }
    .mahonie-actions .currency-trigger,
    .mahonie-account .icon-btn .label-account { display: none; }
    .mahonie-account .icon-btn { width: 38px; height: 38px; }
    .mahonie-search-panel {
        position: fixed;
        top: var(--mh-h-mobile);
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 22px 18px 28px;
        min-height: calc(100vh - var(--mh-h-mobile));
        box-shadow: none;
    }
    /* Mobile drawer for nav (desktop hidden via .mahonie-nav-drawer {display:none} above)
   Side-panel style (Porto convention): slides in from the LEFT, ~88% viewport width,
   full height. Includes a subtle backdrop scrim that closes the drawer on click. */
    .mahonie-nav-drawer {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 88%;
        max-width: 380px;
        background: #fff;
        padding: 0;
        overflow-y: auto;
        z-index: calc(var(--mh-z-overlay) + 1);
        transform: translateX(-100%);
        transition: transform .35s var(--mh-ease);
        box-shadow: 8px 0 32px rgba(15, 12, 9, .12);
    }
    .mahonie-header.menu-open .mahonie-nav-drawer { display: block; transform: translateX(0); }
    /* Backdrop scrim — only visible when menu is open on mobile */
    .mahonie-header.menu-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 12, 9, .42);
        z-index: var(--mh-z-overlay);
        animation: mahonie-fade-in .3s var(--mh-ease);
    }
    @keyframes mahonie-fade-in { from { opacity: 0; } to { opacity: 1; } }
    .mahonie-nav-drawer .mahonie-nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .mahonie-nav-drawer .mahonie-nav-list a {
        min-height: 64px;       /* every drawer row is the same height */
        padding: 0 22px;
        font-size: 13px;        /* one size for the whole header, both views */
        letter-spacing: .18em;  /* one tracking value for the whole header */
        border-bottom: 1px solid var(--mh-line-soft);
    }
    .mahonie-nav-drawer .mahonie-nav-list a::after { display: none; }
    /* Drawer header (back button + title) */
    .mahonie-drawer-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 20px 22px 18px;
        border-bottom: 1px solid var(--mh-line-soft);
        margin-bottom: 6px;
        background: #faf7f2;
    }
    .mahonie-drawer-back {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: transparent;
        border: 0;
        padding: 6px 0;
        font-size: 11px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--mh-ink-soft);
        cursor: pointer;
    }
    .mahonie-drawer-back i { font-size: 11px; }
    .mahonie-drawer-back[hidden] { display: none !important; }
    .mahonie-drawer-title {
        /* Was Cormorant Garamond 26px — the drawer's rows were serif while
           their own sub-items were sans, i.e. two typefaces in one menu. */
        font-family: "Mahonie Header Sans", "Helvetica Neue", Arial, sans-serif;
        font-size: 11px;   /* 13px sat 1px off the rows and read as a mistake */
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--mh-ink);
        line-height: 1.1;
    }
    /* Explicit close control. The hamburger sits UNDER the open drawer and a tap
       on the scrim targets <header> itself (pseudo-element), so previously there
       was no way to dismiss the drawer on a touch device at all. */
    .mahonie-drawer-close {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: 0;
        border-radius: 50%;
        color: var(--mh-ink);
        font-size: 16px;
        cursor: pointer;
        transition: background-color .2s ease;
    }
    .mahonie-drawer-close:hover { background: rgba(33, 26, 21, .06); }
    /* Parent item button in drawer (tap to drill down) — premium editorial feel */
    .mahonie-drawer-parent {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 64px;
        padding: 0 22px;
        font-family: "Mahonie Header Sans", "Helvetica Neue", Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--mh-ink);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--mh-line-soft);
        text-align: left;
        cursor: pointer;
        transition: background-color .2s ease, padding-left .2s ease;
    }
    .mahonie-drawer-parent:hover { padding-left: 26px; }
    .mahonie-drawer-parent i { font-size: 14px; opacity: .55; }
    .mahonie-drawer-parent .label { flex: 1; }
    /* Top-level links (no children) — same premium treatment, with optional inline arrow */
    .mahonie-drawer-list > li.has-children + li:not(.has-children) > a,
    .mahonie-drawer-list > li:not(.has-children) > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 64px;
        padding: 0 22px;
        font-family: "Mahonie Header Sans", "Helvetica Neue", Arial, sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--mh-ink);
        text-decoration: none;
        border-bottom: 1px solid var(--mh-line-soft);
        transition: background-color .2s ease, padding-left .2s ease;
    }
    .mahonie-drawer-list > li:not(.has-children) > a:hover { padding-left: 26px; }
    .mahonie-drawer-list > li:not(.has-children) > a::after {
        content: "\f105";
        font-family: "Font Awesome 5 Free", FontAwesome, sans-serif;
        font-weight: 900;
        font-size: 14px;
        color: var(--mh-ink-soft);
        opacity: .55;
    }
    /* Sub-list inside drawer (hidden by default) */
    .mahonie-drawer-sublist {
        display: none;
        list-style: none;
        margin: 0;
        padding: 8px 0 14px;
        background: #faf7f2;
    }
    .mahonie-drawer-sublist li a {
        display: block;
        padding: 14px 22px 14px 34px;
        font-family: "Mahonie Header Sans", "Helvetica Neue", Arial, sans-serif;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .18em;   /* was .12em — a second tracking value in one menu */
        color: var(--mh-ink-soft);
        text-decoration: none;
        border-bottom: 1px solid rgba(33, 26, 21, .06);
        transition: color .2s ease, padding-left .2s ease;
    }
    .mahonie-drawer-sublist li a:hover { color: var(--mh-ink); padding-left: 38px; }
    .mahonie-drawer-sublist li:last-child a { border-bottom: 0; }
    .mahonie-drawer-list.drilldown .mahonie-drawer-sublist,
    .mahonie-drawer-list li.submenu-open > .mahonie-drawer-sublist { display: block; }
    .mahonie-drawer-list li.submenu-open > .mahonie-drawer-parent { display: none; }
    .mahonie-drawer-list.drilldown > li:not(.submenu-open) { display: none; }
}
@media (max-width: 380px) {
    .mahonie-bar { grid-template-columns: 1fr auto 1fr; padding: 0 6px; }
    .mahonie-logo__wordmark { font-size: 16px; }
    .mahonie-actions { gap: 0; }
    .mahonie-actions .icon-btn,
    .mahonie-account .icon-btn { width: 34px; height: 34px; min-width: 34px; }
}
/* Phones 340px and under (iPhone SE 1st gen, older Android): the action row's
   min-content is wider than an even 1fr column, which pushed the wordmark off
   centre. Shrink both sides so the symmetric grid stays symmetric. */
@media (max-width: 340px) {
    .mahonie-bar { padding: 0 4px; }
    .mahonie-logo__wordmark { font-size: 15px; letter-spacing: .1em; }
    .mahonie-actions { gap: 0; }
    .mahonie-actions .icon-btn,
    .mahonie-account .icon-btn { width: 30px; height: 30px; min-width: 30px; font-size: 14px; }
}

/* --- A11Y -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .mahonie-header, .mahonie-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Native Breeze cart in the existing CMS-owned slot. */
.mahonie-header .mahonie-cart .minicart-wrapper{float:none;margin:0;width:38px;height:38px}
.mahonie-header .mahonie-cart .action.showcart{display:inline-flex!important;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;min-height:38px;padding:0;border-radius:50%;color:var(--mh-ink);position:relative;text-decoration:none}
.mahonie-header .mahonie-cart .action.showcart::before{content:'\f07a';font-family:'MH Icons';font-weight:900;font-size:17px;line-height:1;color:inherit;width:auto;height:auto;background:none;margin:0}
.mahonie-header .mahonie-cart .action.showcart::after{display:none}
.mahonie-bar.mahonie-over-hero .mahonie-cart .action.showcart{color:#fff}
.mahonie-bar.mahonie-over-hero .mahonie-cart .action.showcart::before{font-size:19px}
.mahonie-bar.mahonie-scrolled .mahonie-cart .action.showcart{color:var(--mh-ink)}
.mahonie-header .mahonie-cart .action.showcart:hover{background:rgba(33,26,21,.06);transform:translateY(-1px)}
.mahonie-header .mahonie-cart .minicart-wrapper .counter.qty{position:absolute!important;top:-3px!important;right:-4px!important;left:auto!important;bottom:auto!important;min-width:14px;height:14px;line-height:14px;margin:0;padding:0 3px;border-radius:9px;background:#211a15;color:white}
.mahonie-header .mahonie-cart .minicart-wrapper .counter-number{display:inline!important;font:9px/14px Arial,sans-serif;color:#fff}
.mahonie-header .mahonie-cart .minicart-wrapper .counter.qty.empty{display:none!important}
.mahonie-header .block-minicart{color:#211a15;font-size:14px;line-height:1.4;text-shadow:none;max-width:calc(100vw - 20px)}
.mahonie-header .block-minicart a{color:#211a15!important;text-shadow:none!important}
.mahonie-header .mahonie-mobile-toggle{height:32px;border:1px solid #ccc;background:#fff;border-radius:4px;line-height:30px}
.mahonie-header .mahonie-mobile-toggle span{flex:none}

/* Neutralize Breeze/legacy admin chrome declarations without changing public-header geometry. */
header.mahonie-header .mahonie-nav>.mahonie-nav-list>li>a{font-size:13px!important;font-weight:700!important;letter-spacing:2.34px!important;line-height:18.2px!important;padding:0 6px!important}
header.mahonie-header .mahonie-actions .currency-trigger{font-weight:700!important;padding:0 10px!important;letter-spacing:1.98px!important}
header.mahonie-header .mahonie-cart .minicart-wrapper .action.showcart::before{mask:none!important;-webkit-mask:none!important;background:none!important;font-style:normal!important;font-weight:400!important}
header.mahonie-header .mahonie-cart .minicart-wrapper .counter.qty{position:absolute!important;top:-3px!important;right:-4px!important;inset-inline:auto -4px!important;min-width:14px!important;width:auto!important;height:14px!important;padding:0 3px!important;line-height:14px!important;border-radius:7px!important;background:#231b15!important;color:#fff!important}
header.mahonie-header .mahonie-cart .minicart-wrapper .counter-number{display:inline!important;font:9px/14px Arial,sans-serif!important;color:#fff!important}
header.mahonie-header .mahonie-cart .minicart-wrapper .counter.qty.empty{display:none!important}
@media(min-width:992px){body.catalog-category-view header.mahonie-header .mahonie-nav>.mahonie-nav-list>li>a{line-height:18.2px!important}}

/* Navigation repair: desktop styling retained, mobile viewport drawer. */
html.mahonie-navigation-open,html.mahonie-navigation-open body{overflow:hidden!important;overscroll-behavior:none}
.mahonie-header .mahonie-nav .mahonie-submenu{max-height:calc(100dvh - 100px);overflow-y:auto;overscroll-behavior:contain}
.mahonie-header .mahonie-nav .mahonie-submenu>li{min-width:0}
.mahonie-header .mahonie-nav .mahonie-submenu>li>a{white-space:normal;line-height:1.5}
@media(min-width:1101px){
 .mahonie-header .mahonie-nav .mahonie-submenu{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px 28px!important;padding:26px 42px!important}
 .mahonie-header .mahonie-nav .mahonie-submenu>li.mahonie-submenu-head{grid-column:1/-1;padding-bottom:12px!important;border-bottom:1px solid rgba(33,26,21,.12)!important}
}
@media(max-width:1100px){
 .mahonie-header .mahonie-nav{display:none!important}
 .mahonie-header .mahonie-mobile-toggle{display:inline-flex!important;flex:0 0 36px!important;padding:6px!important;width:36px;height:36px}
 .mahonie-header .mahonie-header-inner{width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding:0 14px!important;gap:12px!important;flex-wrap:nowrap!important}
 .mahonie-header .mahonie-header-left{min-width:0!important;gap:10px!important;flex:1 1 auto!important}
 .mahonie-header .mahonie-logo{white-space:nowrap!important;flex:0 1 auto!important;min-width:0!important}
 .mahonie-header .mahonie-header-actions{flex:0 0 auto!important;gap:10px!important}
 .mahonie-header .mahonie-currency,.mahonie-header .mahonie-wishlist{display:none!important}
 .mahonie-header .mahonie-icon-button{flex:0 0 30px!important;width:30px!important;height:36px!important}
 .mahonie-header.menu-open{transform:none!important;will-change:auto!important;opacity:1!important;pointer-events:auto!important;z-index:10000!important}
 .mahonie-header .mahonie-nav-drawer{display:none!important;position:fixed!important;inset:0 0 auto auto!important;width:min(88vw,380px)!important;max-width:100vw!important;height:100vh!important;height:100dvh!important;max-height:none!important;margin:0!important;box-sizing:border-box!important;overflow-x:hidden!important;overflow-y:auto!important;transform:none!important;background:#f6f2ec!important;z-index:10002!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 0 max(24px,env(safe-area-inset-bottom))!important;box-shadow:-12px 0 40px rgba(0,0,0,.18)!important}
 .mahonie-header.menu-open .mahonie-nav-drawer{display:block!important;animation:mahonie-drawer-enter .24s ease-out;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
 .mahonie-header.menu-open::after{content:""!important;display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;background:rgba(21,17,14,.46)!important;z-index:10001!important;pointer-events:auto!important}
 .mahonie-header .mahonie-drawer-header{position:sticky!important;top:0!important;z-index:2!important;background:#f6f2ec!important;padding:calc(20px + env(safe-area-inset-top)) 22px 18px!important;display:flex!important;align-items:center;gap:12px;border-bottom:1px solid #dcd3c8}
 .mahonie-header .mahonie-drawer-back[hidden]{display:none!important}
 .mahonie-header .mahonie-drawer-title{flex:1!important;text-align:left!important;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
 .mahonie-header .mahonie-drawer-close{flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px;border:0!important;background:transparent!important;font-size:30px!important;line-height:1!important;color:#211a15!important}
 .mahonie-header .mahonie-drawer-back{min-height:44px;color:#211a15!important}
 .mahonie-header .mahonie-drawer-list{display:block!important;margin:0!important;padding:12px 22px!important;list-style:none!important}
 .mahonie-header .mahonie-drawer-list>.level0{border-bottom:1px solid #ded5ca;margin:0!important;padding:0!important}
 .mahonie-header .mahonie-drawer-list>.level0>a,.mahonie-header .mahonie-drawer-parent{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:54px!important;padding:16px 0!important;box-sizing:border-box!important;text-decoration:none!important;font-size:14px!important;letter-spacing:.04em!important;color:#211a15!important;background:transparent!important;border:0!important;text-align:left!important}
 .mahonie-header .mahonie-drawer-list .mahonie-submenu{display:none!important;position:static!important;transform:none!important;visibility:visible!important;opacity:1!important;width:auto!important;max-height:none!important;background:transparent!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important}
 .mahonie-header .mahonie-drawer-list.drilldown>.level0{display:none!important}
 .mahonie-header .mahonie-drawer-list.drilldown>.level0.submenu-open{display:block!important;border:0!important}
 .mahonie-header .mahonie-drawer-list.drilldown>.submenu-open>.mahonie-drawer-parent{display:none!important}
 .mahonie-header .mahonie-drawer-list.drilldown>.submenu-open>.mahonie-submenu{display:block!important;pointer-events:auto!important}
 .mahonie-header .mahonie-drawer-sublist>li{border-bottom:1px solid #ded5ca!important;margin:0!important;padding:0!important}
 .mahonie-header .mahonie-drawer-sublist>li>a{display:block!important;padding:18px 0!important;min-height:54px!important;box-sizing:border-box!important;color:#211a15!important;font-size:14px!important;white-space:normal!important;text-decoration:none!important}
 .mahonie-header .mahonie-nav-drawer :focus-visible{outline:2px solid #8c6748!important;outline-offset:2px}
}
@keyframes mahonie-drawer-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.mahonie-header.menu-open .mahonie-nav-drawer{animation:none!important}}

/* Discount prices must wrap within narrow category cards, not widen the page. */
@media(max-width:1100px){body.catalog-category-view .products-grid .product-item .product-item-details .price-box{display:flex!important;flex-wrap:wrap!important;align-items:baseline;gap:2px 6px;width:100%!important;min-width:0!important;max-width:100%!important}body.catalog-category-view .product-item .price-box>.special-price,body.catalog-category-view .product-item .price-box>.old-price{max-width:100%!important;margin:0!important}}