/* =========================================================================
   HEADER COMPONENT  — WoodMart-inspired aesthetics
   Variants: classic | centered | minimal | brand | topbar | boutique
   ========================================================================= */

/* ── Shared header essentials ─────────────────────────────────── */
.header-navbar.floating-nav {
    background: var(--surface, #fff) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 1px 4px rgba(0,0,0,0.03);
    transition: box-shadow 0.25s ease, background 0.25s ease;
    /* Zero the Bootstrap .navbar default padding (.75rem 1rem) so the
       only horizontal gutter comes from .navbar-container's per-variant
       rules below. Without this, Bootstrap added 16px on each side, our
       container added another 28/16/10px on top, and the stacking
       changed at each Bootstrap breakpoint — exactly the "logo
       jumping" the merchant was seeing. One source of truth fixes it. */
    padding: 0 !important;
}
.header-navbar.floating-nav.is-scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,0.08);
}
.header-navbar .header_img,
.header-navbar .nav-brand img {
    transition: transform 0.25s ease, filter 0.25s ease;
}
.header-navbar .nav-brand:hover .header_img {
    transform: scale(1.04);
}
.header-navbar .nav-title,
.header-navbar .header_tagline {
    font-weight: 800;
    letter-spacing: -0.012em;
    line-height: 1.2;
    color: var(--text, #1a1a1a);
}
.header-navbar .sub-text,
.header-navbar .header_address {
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(0,0,0,0.55);
    letter-spacing: 0.02em;
}

/* ── Variant: CLASSIC ─────────────────────────────────────────── */
.header-variant--classic .navbar-container {
    padding: 0 28px;
    min-height: 78px;
    gap: 18px;
}
/* Logo + tagline + search-bar all get an explicit flex-shrink:0 so
   the layout never reflows when the classic-nav grows wider (more
   categories) or the inline search input expands. Without these,
   the logo could shrink off the leading edge — that's the "jumping
   to the side" the merchant was seeing. The classic-nav remains the
   only flexible row item; everything else holds its natural width. */
.header-variant--classic .nav-brand.nav-logo {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
}
.header-variant--classic .nav-brand.nav-logo .header_img {
    height: 50px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain;
    display: block;
}
.header-variant--classic .nav-brand.nav-tagline {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0;
    align-self: center;
}
.header-variant--classic .nav-title.header_tagline {
    font-size: 22px;
}
.header-variant--classic .search-bar {
    gap: 10px;
    flex: 0 0 auto;
}

/* ── Classic inline category nav (with sub-category dropdowns) ──
   NOTE: overflow MUST stay `visible` on the .classic-nav itself, otherwise the
   sub-category dropdown gets clipped (overflow-x:auto silently forces
   overflow-y:auto too — a CSS spec quirk). To keep the row from running off-
   screen on narrow viewports we move the horizontal scroll onto a wrapper at
   the @media breakpoint below. */
.classic-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    min-width: 0;
}
.classic-nav__item {
    position: relative;
    list-style: none;
    flex-shrink: 0;
}
.classic-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.01em;
}
.classic-nav__link:hover,
.classic-nav__link.active {
    color: var(--primary-color, #111);
    background: rgba(0,0,0,0.04);
    text-decoration: none;
}
.classic-nav__chev {
    opacity: 0.5;
    transition: transform 0.18s, opacity 0.15s;
}
.classic-nav__item:hover .classic-nav__chev {
    opacity: 1;
    transform: rotate(180deg);
}

/* "Secondary" header entries (Blog / Contact) sit after the categories
   with a subtle vertical divider so they read as a distinct group. */
.classic-nav__item--secondary {
    position: relative;
}
.classic-nav__item--secondary:first-of-type::before {
    content: '';
    position: absolute;
    inset-block: 8px;
    inset-inline-start: -2px;
    width: 1px;
    background: rgba(0,0,0,0.10);
    pointer-events: none;
}
.classic-nav__item--secondary .classic-nav__link {
    color: var(--text-muted, #6b7280);
    font-weight: 500;
}
.classic-nav__item--secondary .classic-nav__link:hover,
.classic-nav__item--secondary .classic-nav__link.active {
    color: var(--text, #1a1a1a);
}

/* Sub-category dropdown */
.classic-nav__sub {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 200px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 200;
}
.classic-nav__item:hover .classic-nav__sub,
.classic-nav__item:focus-within .classic-nav__sub,
.classic-nav__item.is-open .classic-nav__sub {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.classic-nav__item.is-open .classic-nav__chev {
    opacity: 1;
    transform: rotate(180deg);
}
.classic-nav__sub li { list-style: none; margin: 0; }
.classic-nav__sub a {
    display: block;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #1a1a1a);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}
.classic-nav__sub a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--primary-color, #111);
    text-decoration: none;
}

/* Dark scheme — submenu dropdown reads as a dark card lifted off
   the navbar with a soft shadow + light border. Hover bg flips
   to a faint white tint so the active item shows clearly. */
html[data-scheme="dark"] .classic-nav__sub {
    background: #15151b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-scheme="dark"] .classic-nav__sub a {
    color: #e8ecf4;
}
html[data-scheme="dark"] .classic-nav__sub a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--primary-color, #fff);
}

/* Classic-variant tweaks: tagline shrinks, nav takes the middle space */
.header-variant--classic .nav-brand.nav-tagline {
    flex: 0 0 auto;
    max-width: 200px;
    padding-inline-end: 12px;
    border-inline-end: 1px solid rgba(0,0,0,0.08);
    margin-inline-end: 6px;
}

@media (max-width: 991px) {
    /* On small screens the inline category nav wraps to a second visual row
       inside the same flex container — wrapping keeps the sub-menu visible
       (a horizontal scroll wrapper would clip the dropdown). The brand
       text block stays visible (just gets a tighter cap) so there's
       always something next to "הכל" — otherwise narrow viewports
       like the builder-preview iframe end up with an empty brand slot. */

    /* Tablet gutter tighten — graduated companion to the phone
       override at ≤768px below. Tablets still have more room than
       phones so 16px keeps the layout breathing, but 28px (the
       desktop value) leaves the logo floating awkwardly far from
       the screen edge in this range. The ≤768px rule then drops to
       10px once the action cluster gets crowded. */
    .header-variant--classic .navbar-container {
        padding: 0 16px;
        gap: 12px;
    }
    .header-variant--classic .nav-brand.nav-logo {
        margin-inline-start: 0;
    }
    .header-variant--classic .nav-brand.nav-tagline {
        max-width: 140px;
        padding-inline-end: 8px;
        margin-inline-end: 4px;
    }
    .header-variant--classic .nav-brand.nav-tagline .header_tagline { font-size: 15px; }
    .header-variant--classic .nav-brand.nav-tagline .header_address { display: none; }
    .classic-nav { flex-wrap: wrap; row-gap: 4px; }
    .classic-nav__link { padding: 8px 10px; font-size: 12.5px; }
    .classic-nav__sub { min-width: 160px; }
}

/* Classic header hamburger button. Hidden on desktop because the
 * inline .classic-nav is enough; appears on phones (≤700 px) next
 * to the cart so the row reads as [logo · profile · cart · menu]
 * in LTR / [menu · cart · profile · logo] in RTL. Styled to match
 * the unified action-icon family (.nav-cart-icon / .nav-profile-trigger)
 * so the hamburger looks like one of the three icons instead of a
 * naked SVG — same 40 × 40 chip, same background + border, and the
 * border-radius tracks the body.icon-shape-* setting picked in the
 * builder. */
.classic__menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    margin: 0 4px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: var(--text, #1a1a1a);
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background .18s, color .18s, border-color .18s, transform .15s;
    line-height: 1;
}
.classic__menu-btn:hover {
    background: var(--primary-color, #111);
    color: #fff;
    border-color: var(--primary-color, #111);
    transform: scale(1.05);
}
.classic__menu-btn:active { transform: scale(0.95); }
.classic__menu-btn svg {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* icon-shape body classes: keep the hamburger visually in sync with
 * the profile + cart icons (see custom.css unified action-icon block). */
body.icon-shape-circle  .classic__menu-btn { border-radius: 50%; }
body.icon-shape-rounded .classic__menu-btn { border-radius: 12px; }
body.icon-shape-square  .classic__menu-btn { border-radius: 4px; }
body.icon-shape-flat    .classic__menu-btn {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
body.icon-shape-flat .classic__menu-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* Dark scheme — match what the unified icons do in dark mode. */
html[data-scheme="dark"] .classic__menu-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e8ecf4;
}
html[data-scheme="dark"] body.icon-shape-flat .classic__menu-btn {
    background: transparent;
    border: none;
    color: #ffffff;
}

/* Hide the inline category nav and surface the hamburger button
   from tablet on down. Tablets (768-991 px) used to fall into a
   dead zone where the inline nav didn't fit and the hamburger was
   still hidden, so the merchant had no way to reach the menu on
   that breakpoint. 991 px matches the rest of the storefront
   responsive rules (centered header, search-bar collapse, etc.). */
@media (max-width: 991px) {
    .header-variant--classic .classic-nav { display: none !important; }
    .header-variant--classic .classic__menu-btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   Variant: CENTERED — three-zone bar (search · brand · actions) +
   horizontal nav below. Inspired by Reformation / Glossier / Aesop
   style headers. Refined serif brand name, uppercase nav tracking,
   sliding underline indicator.
   ════════════════════════════════════════════════════════════════ */
.header-variant--centered {
    padding: 0 !important;
    background: var(--surface, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-variant--centered .centered-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 28px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* — Row 1: search | brand | actions — */
.header-variant--centered .centered-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    min-height: 56px;
}
.header-variant--centered .centered-bar__start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    /* Keep the search field compact + tidy */
    max-width: 280px;
}
.header-variant--centered .centered-bar__start .search-input {
    width: 100%;
}
.header-variant--centered .centered-bar__end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}
.header-variant--centered .centered-cart {
    color: var(--text, #111) !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .15s ease;
}
.header-variant--centered .centered-cart:hover { background: rgba(0,0,0,0.05); }

/* — Brand block — — */
.header-variant--centered .centered-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none !important;
    color: inherit !important;
    transition: opacity .15s;
}
.header-variant--centered .centered-brand:hover { opacity: 0.86; }
.header-variant--centered .centered-brand__logo {
    height: 52px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    /* No background / padding / border-radius — let the merchant's
       logo file stand on its own without a coloured tile around it. */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
}
/* When the merchant hasn't uploaded a logo, the text block carries
   the brand on its own — drop the row gap so the headline doesn't
   look orphaned. */
.header-variant--centered .centered-brand.text-only { gap: 0; }
.header-variant--centered .centered-brand.text-only .centered-brand__text {
    align-items: center;
    text-align: center;
}
.header-variant--centered .centered-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: start;
}
.header-variant--centered .centered-brand__name {
    margin: 0;
    font-family: 'Cormorant Garamond', 'Frank Ruhl Libre', 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text, #111);
    line-height: 1.05;
}
.header-variant--centered .centered-brand__tagline {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* — Row 2: category nav — */
.header-variant--centered .centered-nav {
    list-style: none;
    margin: 0;
    padding: 6px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 12px;
}
.header-variant--centered .centered-nav__item {
    position: relative;
    list-style: none;
}
.header-variant--centered .centered-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text, #111);
    text-decoration: none !important;
    transition: color .15s ease;
    position: relative;
}
/* Sliding underline indicator — sits below the text, scales from
   center on hover and active states */
.header-variant--centered .centered-nav__link::after {
    content: '';
    position: absolute;
    inset-inline: 14px;
    bottom: 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
    border-radius: 1.5px;
}
.header-variant--centered .centered-nav__link:hover::after,
.header-variant--centered .centered-nav__link.active::after {
    transform: scaleX(1);
}
.header-variant--centered .centered-nav__link.active { color: var(--primary-color, #111); }
.header-variant--centered .centered-nav__chev {
    color: currentColor;
    opacity: .55;
    transition: transform .18s ease, opacity .15s;
}
.header-variant--centered .centered-nav__item:hover .centered-nav__chev {
    opacity: 1;
    transform: rotate(180deg);
}

/* Secondary items (Blog / Contact us) — slightly muted */
.header-variant--centered .centered-nav__item--secondary .centered-nav__link {
    color: var(--text-muted, #6b7280);
}
.header-variant--centered .centered-nav__item--secondary .centered-nav__link:hover,
.header-variant--centered .centered-nav__item--secondary .centered-nav__link.active {
    color: var(--text, #111);
}

/* Vertical divider between categories and secondary entries */
.header-variant--centered .centered-nav__divider {
    width: 1px;
    height: 18px;
    background: rgba(0,0,0,0.10);
    margin: 0 8px;
    list-style: none;
}

/* — Sub-category dropdown — */
.header-variant--centered .centered-nav__sub {
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 200px;
    background: var(--surface, #fff);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.04);
    padding: 6px;
    list-style: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 200;
}
[dir="rtl"] .header-variant--centered .centered-nav__sub {
    transform: translateX(50%) translateY(-6px);
}
.header-variant--centered .centered-nav__item:hover .centered-nav__sub,
.header-variant--centered .centered-nav__item:focus-within .centered-nav__sub,
.header-variant--centered .centered-nav__item.is-open .centered-nav__sub {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .header-variant--centered .centered-nav__item:hover .centered-nav__sub,
[dir="rtl"] .header-variant--centered .centered-nav__item:focus-within .centered-nav__sub,
[dir="rtl"] .header-variant--centered .centered-nav__item.is-open .centered-nav__sub {
    transform: translateX(50%) translateY(0);
}
.header-variant--centered .centered-nav__sub li { list-style: none; }
.header-variant--centered .centered-nav__sub a {
    display: block;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #111);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease;
    letter-spacing: -0.005em;
    text-transform: none;
}
.header-variant--centered .centered-nav__sub a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--text, #111);
    text-decoration: none;
}

/* Dark scheme — centered variant submenu */
html[data-scheme="dark"] .header-variant--centered .centered-nav__sub {
    background: #15151b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-scheme="dark"] .header-variant--centered .centered-nav__sub a {
    color: #e8ecf4;
}
html[data-scheme="dark"] .header-variant--centered .centered-nav__sub a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

/* — Responsive: collapse three columns + wrap nav — */
@media (max-width: 991px) {
    .header-variant--centered .centered-wrap { padding: 10px 16px 0; gap: 8px; }
    .header-variant--centered .centered-bar {
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        min-height: 50px;
    }
    .header-variant--centered .centered-brand__logo { height: 38px; max-width: 70px; padding: 4px 6px; border-radius: 10px; }
    .header-variant--centered .centered-brand__name { font-size: 22px; }
    .header-variant--centered .centered-brand__tagline { display: none; }
    .header-variant--centered .centered-bar__start { max-width: none; }
    .header-variant--centered .centered-nav {
        padding: 8px 0 10px;
        gap: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .header-variant--centered .centered-nav::-webkit-scrollbar { display: none; }
    .header-variant--centered .centered-nav__link { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
    .header-variant--centered .centered-nav__divider { display: none; }
}
@media (max-width: 640px) {
    .header-variant--centered .centered-brand { gap: 8px; }
    .header-variant--centered .centered-bar__start .nav-search-trigger,
    .header-variant--centered .centered-bar__start .search-input { /* shrink */ }
}

/* — Dark scheme — */
html[data-scheme="dark"] .header-variant--centered {
    background: rgba(255,255,255,0.02);
    border-bottom-color: rgba(255,255,255,0.06);
}
html[data-scheme="dark"] .header-variant--centered .centered-brand__name { color: #E8ECF4; }
html[data-scheme="dark"] .header-variant--centered .centered-brand__tagline { color: #94A3B8; }
html[data-scheme="dark"] .header-variant--centered .centered-brand__logo { background: rgba(255,255,255,0.04); }
html[data-scheme="dark"] .header-variant--centered .centered-cart { color: #E8ECF4 !important; }
html[data-scheme="dark"] .header-variant--centered .centered-cart:hover { background: rgba(255,255,255,0.06); }
html[data-scheme="dark"] .header-variant--centered .centered-nav { border-top-color: rgba(255,255,255,0.06); }
html[data-scheme="dark"] .header-variant--centered .centered-nav__link { color: #E8ECF4; }
html[data-scheme="dark"] .header-variant--centered .centered-nav__item--secondary .centered-nav__link { color: #94A3B8; }
html[data-scheme="dark"] .header-variant--centered .centered-nav__divider { background: rgba(255,255,255,0.10); }
html[data-scheme="dark"] .header-variant--centered .centered-nav__sub {
    background: #15151b;
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
html[data-scheme="dark"] .header-variant--centered .centered-nav__sub a { color: #E8ECF4; }
html[data-scheme="dark"] .header-variant--centered .centered-nav__sub a:hover { background: rgba(255,255,255,0.07); }

/* ── Variant: MINIMAL ─────────────────────────────────────────── */
.header-variant--minimal {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    box-shadow: none;
}
.header-variant--minimal .navbar-container {
    height: 62px;
    padding: 0 24px;
    /* Three-column grid: menu button | brand (centred) | actions.
       Pre-existing flex layout left the brand floating between the
       menu button and the action stack, which made it drift around
       depending on the action stack's width. */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
.header-variant--minimal .minimal__brand {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.header-variant--minimal .header_img,
.header-variant--minimal .minimal__brand img {
    height: 44px !important;
    width: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    object-fit: contain;
}
.header-variant--minimal .minimal__brand-name {
    font-family: 'Cormorant Garamond', 'Frank Ruhl Libre', 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text, #111);
    line-height: 1;
}
.header-variant--minimal .search-bar { justify-self: end; }
.header-variant--minimal .minimal__menu-btn { justify-self: start; }

/* ── Variant: BRAND ──────────────────────────────────────────── */
.header-variant--brand {
    background: var(--surface, #fff);
}
/* The top accent stripe rendered before the nav (existing structure) */
.header-variant--brand + nav,
nav.header-variant--brand {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-variant--brand .navbar-container {
    padding: 12px 32px;
    min-height: 84px;
}
.header-variant--brand .navbar-container > div[style*="text-align:center"] {
    /* brand-name block */
}

/* ── Variant: TOPBAR (two-row utility bar + main nav) ────────── */
.header-variant--topbar,
nav.header-variant + .header-variant--topbar { /* fallback */ }
/* Top utility row */
.header-topbar-utility {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    background: var(--text, #1a1a1a);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header-topbar-utility a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.15s;
}
.header-topbar-utility a:hover { color: #fff; }

/* ── Variant: BOUTIQUE ──────────────────────────────────────────
   Floating capsule: small logo+name on the start side, wide centred
   search bar, action icons on the end. The outer nav is transparent
   so the inner .boutique__row reads as a pill floating above the
   page, with horizontal breathing room from the viewport edges. */
.header-variant--boutique,
nav.header-variant--boutique,
.header-navbar.floating-nav.header-variant--boutique {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px clamp(16px, 4vw, 36px) 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* On pages WITHOUT a hero (category, blog index/post, product page,
   and the home page when hero variant = none) the floating capsule
   sits over the very top of the page content. Push the content down
   so titles, breadcrumbs, gallery etc. aren't hidden behind it. */
body.header-variant-boutique:not(.hero-flush) .content-wrapper {
    padding-top: 90px !important;
}
body.header-variant-boutique.product-page .app-content {
    padding-top: 90px;
}
.header-variant--boutique .boutique__row {
    /* Three-column grid: menu trigger | centered logo | actions.
       Same layout pattern as the minimal variant, but the row is a
       floating capsule (white pill on a transparent nav).

       Default width matches the legacy boutique look (1024 px capsule).
       The body.header-width-{wide|full} overrides below stretch the
       capsule when the merchant picks a wider option from the header-
       width picker. The other floating variants honour header-width
       via `.navbar-container` directly; boutique needs its own override
       because the cap lives on `.boutique__row` (inside the container)
       to keep the pill chrome. */
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 22px;
    min-height: 60px;
    max-width: 1024px;
    margin: 0 auto;
    background: var(--surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    box-shadow: 0 6px 24px -8px rgba(0, 0, 0, 0.18),
                0 2px 6px rgba(0, 0, 0, 0.05);
}
body.header-width-wide .header-variant--boutique .boutique__row {
    max-width: 1320px;
}
body.header-width-full .header-variant--boutique .boutique__row {
    max-width: none;
}
.header-variant--boutique .boutique__menu-btn { justify-self: start; }
.header-variant--boutique .boutique__brand {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}
.header-variant--boutique .boutique__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header-variant--boutique .boutique__brand {
    display: flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
}
.header-variant--boutique .boutique__logo {
    height: 40px !important;
    max-width: 160px;
    width: auto !important;
    object-fit: contain;
    /* Logo file shows on its own — no coloured tile around it. */
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.header-variant--boutique .boutique__name-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.header-variant--boutique .boutique__name {
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: -0.015em;
    color: var(--text, #1a1a1a) !important;
    line-height: 1.15 !important;
    white-space: nowrap;
    margin: 0 !important;
}
.header-variant--boutique .boutique__tagline {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: rgba(0,0,0,0.5);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-variant--boutique .boutique__search-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 480px;
    margin: 0 auto;
}
.header-variant--boutique .boutique__search-wrap .search-input {
    flex: 1;
}
.header-variant--boutique .boutique__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mobile boutique: keep logo on the side, hide tagline, search shrinks */
@media (max-width: 768px) {
    .header-variant--boutique .boutique__row {
        gap: 8px;
        padding: 10px 14px;
        min-height: 60px;
    }
    .header-variant--boutique .boutique__logo { height: 36px !important; }
    .header-variant--boutique .boutique__name { font-size: 15px !important; }
    .header-variant--boutique .boutique__tagline { display: none; }
}

/* ── Cart icon counter badge (works across all variants) ──────── */
.nav-cart-icon {
    position: relative;
}
.nav-cart-icon::after {
    /* Optional counter — populated via Blade if pro_cart count > 0 */
    display: none;
}

/* When the merchant has the inline side cart turned on, the cart
   already lives in the products row at desktop widths (col-xl-4 next
   to col-xl-8). The header cart icon would just be a dead button —
   cartpopupclick toggles .cart-side-panel which isn't even rendered
   in this mode. Hide the icon from xl up so it doesn't read as
   broken. The mobile breakpoint stacks the inline cart BELOW the
   products, so we keep the icon there and make it scroll-to-cart
   via the JS fallback in script.js. */
@media (min-width: 1200px) {
    body.cart-inline-on .nav-cart-icon,
    body.cart-inline-on a.cartpopup { display: none !important; }
}

/* ── Auth/login button — keep only the inner-icon padding fix.
       The full visual treatment (size, shape, colors, hover) is owned by
       the unified .nav-action-icon rules in custom.css so every action
       icon in the navbar looks identical. ─────────────────────────── */
.search-bar .btn.bg--gray i.fa-user { padding: 0 !important; }
.search-bar .dropdown-toggle {
    border-radius: 100px !important;
    font-weight: 600;
    font-size: 12px;
}

/* ── Dropdown menu polish ─────────────────────────────────────── */
.dropdown-menu.dropdown-menu-custom {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    padding: 6px;
    min-width: 180px;
}
.dropdown-menu.dropdown-menu-custom .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text, #1a1a1a);
    transition: background 0.12s, color 0.12s;
}
.dropdown-menu.dropdown-menu-custom .dropdown-item:hover {
    background: rgba(0,0,0,0.04);
    color: var(--primary-color, #111);
}

/* ── Mobile: ensure variants stay readable ───────────────────── */
@media (max-width: 768px) {
    /* Centered variant has its own .centered-wrap + .centered-bar
       rules in the responsive block above; nothing to do here. */

    /* Hug the page edges on phones — the 28px desktop gutter eats
       too much room next to the action cluster, so the logo ends up
       floating awkwardly far from the screen edge. Drop the
       container's inline padding to 10px and strip the per-img
       padding so the logo aligns flush with the navbar edge on
       the leading side. The trailing-side action icons inherit the
       same 10px gutter, so the cluster also tucks closer to the
       opposite edge. */
    .header-variant--classic .navbar-container {
        padding: 0 10px;
        gap: 8px;
    }
    .header-variant--classic .nav-brand.nav-logo {
        margin-inline-start: 0;
    }
    .header-variant--classic .nav-brand.nav-logo .header_img {
        height: 38px !important;
        padding: 0 !important;
        border-radius: 8px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   Inline-search component — _search.blade.php (variant=inline).

   The <input id="search"> itself is the pill (border + bg + radius).
   The icon and the category chip are positioned ABSOLUTELY inside
   the input's bounding box — leading edge (right in RTL) gets the
   search icon, trailing edge (left in RTL) gets the category chip.
   The input has padding reserved on both sides so typed text never
   collides with either overlay.

   Source order in HTML is [icon, input, select] but layout is
   driven by absolute positioning rather than flex order, so the
   source order is mostly irrelevant — what matters is the
   inset-inline-* values below.
   ───────────────────────────────────────────────────────────────── */

/* Wrapper is just a positioning context — no border, no background,
   no flex layout. The input does the visual work. */
.search-input.store-search-form {
    position: relative;
    display: block;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0;
    min-height: 0;
    box-shadow: none !important;
    overflow: visible;
}
.search-input.store-search-form:focus-within {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* The input IS the frame. */
.search-input.store-search-form > input,
.search-input.store-search-form > #search {
    width: 100%;
    height: 44px;
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 999px !important;
    outline: none;
    font-size: 13px;
    color: var(--text, #111);
    padding-inline-start: 16px;  /* default — bumped when chip present */
    padding-inline-end: 52px;    /* room for the trailing icon badge */
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    box-sizing: border-box;
}
.search-input.store-search-form > input::placeholder,
.search-input.store-search-form > #search::placeholder {
    color: rgba(0, 0, 0, 0.45);
}
.search-input.store-search-form > input:focus,
.search-input.store-search-form > #search:focus {
    border-color: rgba(var(--primary-rgb, 17, 17, 17), 0.35) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 17, 17, 17), 0.08);
}
/* When a category chip is rendered, reserve room for it on the
   leading edge (right in RTL) so the chip doesn't sit on top of
   typed text. */
.search-input.store-search-form.has-cats > input,
.search-input.store-search-form.has-cats > #search {
    padding-inline-start: 130px;
}

/* Trailing icon badge — absolutely positioned inside the input pill,
   on the END side (left in RTL, right in LTR) so it visually sits
   right next to the profile + cart icons in the navbar. Matches the
   .nav-profile-trigger / .nav-cart-icon size + shape. */
.search-input.store-search-form > .search-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 4px;
    inset-inline-start: auto;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text, #111);
    opacity: 1;
    transition: background .18s ease, color .18s ease;
    text-decoration: none;
    line-height: 0;
    z-index: 2;
}
.search-input.store-search-form > .search-icon:hover {
    background: rgba(0, 0, 0, 0.10);
}
.search-input.store-search-form > .search-icon svg,
.search-input.store-search-form > .search-icon img {
    display: block;
    width: 18px;
    height: 18px;
    opacity: 1;
}
body.icon-shape-rounded .search-input.store-search-form > .search-icon { border-radius: 12px; }
body.icon-shape-square  .search-input.store-search-form > .search-icon { border-radius: 4px; }
body.icon-shape-flat    .search-input.store-search-form > .search-icon { background: transparent; border-radius: 0; }

/* Leading category chip — absolutely positioned inside the input.
   Sits on the START side (right in RTL, left in LTR) — opposite of
   the search icon badge. */
.search-input.store-search-form > .store-search-cat {
    position: absolute;
    top: 50%;
    inset-inline-start: 6px;
    inset-inline-end: auto;
    transform: translateY(-50%);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(0, 0, 0, 0.04);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 10px 10px;
    border: none;
    border-radius: 999px;
    color: var(--text, #111);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    max-width: 120px;
    padding-block: 7px;
    padding-inline-start: 24px;
    padding-inline-end: 12px;
    transition: background .18s ease;
    z-index: 2;
}
[dir="rtl"] .search-input.store-search-form > .store-search-cat {
    background-position: right 10px center;
}
.search-input.store-search-form > .store-search-cat:hover {
    background-color: rgba(0, 0, 0, 0.08);
}
.search-input.store-search-form > .store-search-cat:focus {
    outline: none;
    background-color: rgba(var(--primary-rgb, 17, 17, 17), 0.10);
}
.search-input.store-search-form > .store-search-cat option {
    background: #fff;
    color: #111;
    font-weight: 500;
}

/* ── Dark scheme ── */
html[data-scheme="dark"] .search-input.store-search-form > input,
html[data-scheme="dark"] .search-input.store-search-form > #search {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e8ecf4;
}
html[data-scheme="dark"] .search-input.store-search-form > input:focus,
html[data-scheme="dark"] .search-input.store-search-form > #search:focus {
    background: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] .search-input.store-search-form > input::placeholder,
html[data-scheme="dark"] .search-input.store-search-form > #search::placeholder {
    color: rgba(255, 255, 255, 0.45);
}
html[data-scheme="dark"] .search-input.store-search-form > .search-icon {
    background: rgba(255, 255, 255, 0.10);
    color: #e8ecf4;
}
html[data-scheme="dark"] .search-input.store-search-form > .search-icon:hover {
    background: rgba(255, 255, 255, 0.16);
}
html[data-scheme="dark"] .search-input.store-search-form > .store-search-cat {
    background-color: rgba(255, 255, 255, 0.08);
    color: #e8ecf4;
}
html[data-scheme="dark"] .search-input.store-search-form > .store-search-cat:hover {
    background-color: rgba(255, 255, 255, 0.14);
}

/* ── Mobile (<992px): tighter chip + tighter end padding ── */
@media (max-width: 991.98px) {
    .search-input.store-search-form.has-cats > input,
    .search-input.store-search-form.has-cats > #search {
        padding-inline-end: 100px;
    }
    .search-input.store-search-form > .store-search-cat {
        max-width: 92px;
        font-size: 11.5px;
        padding-block: 6px;
        padding-inline-start: 10px;
        padding-inline-end: 22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Universal mobile hamburger for top-layout headers.
   Lives inside .store-header-wrap (so it anchors next to whichever
   header variant the merchant picked). The button only shows at
   <=991px, and only for variants that DON'T already carry their own
   hamburger (minimal + boutique have built-in ones inside their
   markup). The desktop category navs (.classic-nav, .centered-nav,
   .store-top-nav) collapse on mobile — the drawer opened by the
   hamburger replaces them.
   ═══════════════════════════════════════════════════════════════════ */

.store-header-wrap { position: relative; }

.store-mobile-toggle {
    display: none;
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    color: var(--pc-text-1, #111);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.store-mobile-toggle:hover,
.store-mobile-toggle:focus-visible {
    background: var(--primary-color, #111);
    color: #fff;
    border-color: transparent;
    outline: none;
}
.store-mobile-toggle svg { display: block; }

html[data-scheme="dark"] .store-mobile-toggle {
    background: rgba(20, 22, 28, 0.94);
    border-color: rgba(255, 255, 255, 0.10);
    color: #e8ecf4;
}

@media (max-width: 991.98px) {
    /* Surface the universal hamburger for top-layout variants that
       don't carry their own. (The .store-mobile-toggle element isn't
       rendered in any current template, so the display rule is a
       no-op today — kept for forward compatibility if a future variant
       opts back into the universal button.) */
    body.layout-top:not(.header-variant-minimal):not(.header-variant-boutique) .store-mobile-toggle {
        display: inline-flex;
    }

    /* Hide the desktop inline category navs at mobile widths — the
       drawer is the mobile entry point for categories. The topbar
       variant's `.store-top-nav` is intentionally NOT hidden here:
       the category strip is the defining visual feature of the
       double-row layout, so we keep it visible on mobile (it's
       already horizontally scrollable via the @media block in
       custom.css line 2438 so it doesn't overflow). Only the classic
       and centered nav rows collapse — those are full-width
       dropdowns that don't fit on a phone. */
    body.layout-top .classic-nav,
    body.layout-top .centered-nav {
        display: none !important;
    }
    /* No padding-inline-start clear here: the .store-mobile-toggle
       isn't actually rendered, so reserving 64 px for it just pushed
       the logo off its anchor edge (visible bug in classic + RTL).
       Variants that carry their own inline hamburger (classic uses
       .classic__menu-btn, sitting INSIDE the action cluster) don't
       need this clearance at all. */
}

/* The `.store-top-nav` category strip is rendered unconditionally for
   every top-layout variant (so the builder's live variant swap can
   reveal it without re-injecting markup), but it should only be
   visible for the `topbar` variant — the double-row layout is the
   one designed to host a permanent category row. Hide it for every
   other top variant at every viewport. Outside the @media block
   above so the rule applies on desktop + tablet + mobile uniformly,
   not just at ≤991 px. */
body.layout-top:not(.header-variant-topbar) .store-top-nav {
    display: none !important;
}