/**
 * OnlySatvik Premium Header v2 — bold redesign.
 * Utility bar + spacious main bar + prominent Order CTA.
 */

/* ══ Utility strip ══ */
.os-utility-bar {
    /* v2.9.101 (owner): the solid dark-green bar made the
       whole site read green — the bar is now a light tint of
       the brand gray, with the phone number and the purity
       line in dark green. Nothing else in the header changed. */
    background: #f4f4f4;
    color: var(--os-text, #1f2a1f);
    border-bottom: 1px solid #e9e6de;
    font-size: 12px;
    letter-spacing: 0.8px;
    padding: 8px 24px;
    text-align: center;
}

.os-utility-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* v2.9.78 — the strip's items (phone · Open Daily · Google
       rating · purity) sit centred as one group; the !important
       keeps that true even if a served CSS variant (skin, UCSS)
       tries to spread or left-pack them (owner, 2026-11-03). */
    justify-content: center !important;
    gap: 12px;
    flex-wrap: wrap;
}

.os-utility-bar a {
    color: var(--os-brand-dark, #2c9440) !important;
    text-decoration: none !important;
    font-weight: 700;
}

.os-utility-sep {
    opacity: 0.4;
}

.os-utility-highlight {
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: 11px;
    color: var(--os-brand-dark, #2c9440);
}

/* v2.9.42 — the phone icon sat on the text baseline, 4–5px
   high and un-sized (owner: "call icon in front of phone
   number is not aligned"). The strip items are now flex rows
   so the icon centres exactly on the number, at a fixed size,
   filled with the strip's white. */
.os-utility-item {
    display: inline-flex;
    align-items: center;
}

.os-utility-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
}

.os-utility-icon svg {
    width: 14px;
    height: 14px;
    display: block;
    fill: var(--os-brand-dark, #2c9440);
}

/* ══ Main sticky bar — taller, spacious ══ */
.sb-top-bar-frame {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid #f0ebe0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
}

.sb-top-bar-bg {
    display: none !important;
}

.sb-top-bar {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 18px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 32px !important;
}

/* ══ Logo — larger, serif ══ */
.sb-logo-frame {
    flex-shrink: 0 !important;
    text-decoration: none !important;
}

.sb-logo-frame .logotype__title {
    font-family: 'Poppins', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--os-text, #1f2a1f) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    display: block !important;
}

.sb-logo-frame .logotype__sub {
    font-size: 10px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--os-brand, #39b54a) !important;
    font-weight: 700 !important;
    margin-top: 4px !important;
    display: block !important;
}

.sb-logo-frame img.custom-logo {
    max-height: 56px !important;
    width: auto !important;
}

/* ══ Logo sizing — single authority (v2.2.22) ═══════════════════
   The logo is an SVG with 375×375 attributes. The base stylesheet
   sizes it off a fixed 130px frame (width:100%), and before
   v2.2.22 the frame markup nested the logo link inside another
   anchor, so browsers split the frame and NO logo rule matched the
   image — it rendered at intrinsic size (~360px) and burst out of
   the header. These rules outrank the base ones and hold the logo
   to a fixed height at every width; width follows the artwork. */
.sb-top-bar-frame .sb-top-bar .sb-logo-frame {
    width: auto !important;
    height: auto !important;
    max-width: 210px !important;
    flex: 0 0 auto !important;
}

.sb-top-bar-frame .sb-top-bar .sb-logo-frame .custom-logo-link {
    display: block !important;
    line-height: 0 !important;
}

.sb-top-bar-frame .sb-top-bar .sb-logo-frame img.custom-logo {
    display: block !important;
    width: auto !important;
    height: 84px !important;
    max-width: 200px !important;
    max-height: 84px !important;
    object-fit: contain !important;
}

.sb-logo-textlink {
    text-decoration: none !important;
    display: block !important;
}

@media (max-width: 1100px) {
    /* v2.9.59: logo 76 -> 84px, bar padding 18 -> 14px pays for it;
       the bar's total height is unchanged (see the desktop note). */
    .sb-top-bar-frame .sb-top-bar {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
    .sb-top-bar-frame .sb-top-bar .sb-logo-frame img.custom-logo {
        height: 84px !important;
        max-height: 84px !important;
        max-width: 180px !important;
    }
}

@media (max-width: 640px) {
    /* v2.9.59: logo 66 -> 72px, bar padding 14 -> 11px pays for it. */
    .sb-top-bar-frame .sb-top-bar {
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }
    .sb-top-bar-frame .sb-top-bar .sb-logo-frame {
        max-width: 150px !important;
    }
    .sb-top-bar-frame .sb-top-bar .sb-logo-frame img.custom-logo {
        height: 72px !important;
        max-height: 72px !important;
        max-width: 150px !important;
    }
}

/* ══ Nav — centered, generous spacing ══ */
.sb-right-side {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

#sb-dynamic-menu {
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
}

.sb-navigation.sb-navigation-default {
    display: flex !important;
    gap: 36px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
}

.sb-navigation.sb-navigation-default > li > a {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    color: var(--os-text, #1f2a1f) !important;
    text-decoration: none !important;
    padding: 10px 4px !important;
    position: relative !important;
    transition: color 0.2s ease !important;
    text-transform: none !important;
}

.sb-navigation.sb-navigation-default > li > a:hover {
    color: var(--os-brand, #39b54a) !important;
}

.sb-navigation.sb-navigation-default > li > a::after {
    content: "" !important;
    position: absolute !important;
    /* v2.2.28: the base theme's own a:after is a round dot pinned
       at top:50% — it never reset here, so this bar rendered
       through the middle of the link text instead of under it
       and was effectively invisible. Pin it under the text. */
    top: auto !important;
    margin-top: 0 !important;
    width: auto !important;
    border-radius: 3px !important;
    bottom: 4px !important;
    left: 4px !important;
    right: 4px !important;
    height: 3px !important;
    background: var(--os-brand, #39b54a) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.25s ease !important;
}

/* Underline shows on hover, while pressed, and stays on the
   item for the page you are on. */
.sb-navigation.sb-navigation-default > li > a:hover::after,
.sb-navigation.sb-navigation-default > li > a:active::after,
.sb-navigation.sb-navigation-default > li.current-menu-item > a::after,
.sb-navigation.sb-navigation-default > li.current-menu-ancestor > a::after,
.sb-navigation.sb-navigation-default > li.current_page_item > a::after,
.sb-navigation.sb-navigation-default > li > a[aria-current="page"]::after {
    transform: scaleX(1) !important;
}

.sb-navigation.sb-navigation-default > li.current-menu-item > a {
    color: var(--os-brand, #39b54a) !important;
}

/* v2.9.37 — the base theme's round nav dots retire for good.
   style.css paints an 8px circle through a::before (left:15px,
   top:50%, scaled in on li.sb-active) and a matching a::after
   at right:15px. The ::after became the underline bar above,
   but the ::before dot survived — on a short item like FAQ it
   lands on the second letter (owner screenshot, 2026-11-01).
   Sub-menu links lose the leftover ::after dot too. */
nav .sb-navigation li a::before,
nav .sb-navigation li li a::after {
    content: none !important;
    display: none !important;
}

/* v2.9.37 — centre the menu group in the bar (owner: the menu
   sat left of centre). The list is already a flex row; centre
   it inside the header's middle column, and let the built-in
   bar's nav take the free space so it centres there too. */
.sb-navigation.sb-navigation-default {
    justify-content: center !important;
    width: 100% !important;
}
.sb-top-bar .sb-right-side > nav {
    flex: 1 1 auto !important;
}

/* v2.9.38 — header search is an always-visible box beside
   the cart (owner: replace the icon with the actual search
   box). Sits in .sb-buttons-frame in both header variants. */
/* v2.9.42 — the desktop search box was capped at 208px and
   flex-shrunk to ~106px at laptop widths (owner: "not big
   enough to type in"). It now holds a fixed, generous width
   per band and never shrinks. */
.os-header-search {
    flex: 0 0 300px;
    min-width: 0;
}
.os-header-search .dgwt-wcas-search-wrapp {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}
@media (max-width: 1399px) and (min-width: 1101px) {
    .os-header-search {
        flex-basis: 260px;
    }
}
@media (max-width: 1250px) and (min-width: 1101px) {
    .os-header-search {
        flex-basis: 230px;
    }
}
/* v2.9.45 — the search toggle icon exists in the markup at
   every width but only renders ≤1100px (rule in that block);
   on desktop the always-visible box makes it redundant. */
.os-search-toggle {
    display: none;
}
.os-header-search .os-search-form {
    display: flex;
    align-items: center;
    gap: 6px;
}
.os-header-search .os-search-form input[type='search'] {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 1.5px solid #d9e6da;
    border-radius: 999px;
    padding: 0 16px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14.5px;
    background: #fff;
}
.os-header-search .os-search-form button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--os-brand, #39b54a);
    cursor: pointer;
    padding: 0;
}
.os-header-search .os-search-form button svg {
    width: 19px;
    height: 19px;
    fill: #fff;
}
@media (max-width: 1100px) {
    /* v2.9.45 — ONE-ROW mobile/tablet header (owner: the stacked
       rows wasted the space beside the logo; search becomes an
       icon that opens a sheet, the standard app pattern).
       Supersedes the v2.9.42 tablet-band arrangement (spread
       shrink-wrapped columns + inline search box): the columns
       now form a single row — logo | (nav column collapsed to
       zero width; its menu panel is fixed-position and does not
       need the box) | actions filling the rest, right-aligned.
       Desktop ≥1101px is untouched: the search box stays
       always-visible there and the toggle is display:none. */
    body.os-header-elementor .sb-top-bar .elementor-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    body.os-header-elementor .sb-top-bar .elementor-top-column:first-child {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    body.os-header-elementor .sb-top-bar .elementor-top-column:nth-child(2) {
        flex: 0 0 0 !important;
        width: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    body.os-header-elementor .sb-top-bar .elementor-top-column:last-child {
        flex: 1 1 auto !important;
        width: auto !important;
    }
    .sb-buttons-frame {
        justify-content: flex-end !important;
    }
    /* Search: icon in the row, box as a sheet under the header.
       The sheet is position:fixed, which inside the sticky
       frame anchors to the frame (its backdrop-filter makes it
       the containing block) — same mechanism as the menu panel. */
    .os-search-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        flex: 0 0 auto;
        border-radius: 50%;
        border: 1.5px solid #d9e6da;
        background: #fff;
        cursor: pointer;
        padding: 0;
    }
    .os-search-toggle svg {
        width: 20px;
        height: 20px;
        fill: var(--os-brand-dark, #2c9440);
        display: block;
    }
    body.os-search-open .os-search-toggle {
        background: var(--os-brand, #39b54a);
        border-color: var(--os-brand, #39b54a);
    }
    body.os-search-open .os-search-toggle svg {
        fill: #fff;
    }
    .os-header-search {
        display: none !important;
    }
    body.os-search-open .os-header-search {
        display: block !important;
        position: fixed;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        padding: 12px 16px 16px;
        background: #fff;
        box-shadow: 0 18px 30px rgba(31, 42, 31, 0.14);
        z-index: 998;
    }
    .os-header-search .dgwt-wcas-search-wrapp {
        max-width: none !important;
    }
    /* The actions row must fit the stacked column once the
       search box joins it: the frame is flex-shrink:0 for the
       desktop bar, which makes the whole Elementor widget
       chain size to its content and overflow small screens.
       Let it shrink here; the search box (min-width:0)
       absorbs the squeeze. */
    body.os-header-elementor .sb-buttons-frame {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .sb-top-bar .elementor-top-column,
    .sb-top-bar .elementor-widget-wrap,
    .sb-top-bar .elementor-widget {
        min-width: 0 !important;
    }
}

/* v2.9.38 — true centring for the Elementor header on
   desktop: the section becomes a 1fr/auto/1fr grid, so the
   menu column sits at the exact centre of the bar whatever
   the logo and actions widths are, and the section spans
   the full bar instead of Elementor's boxed width. */
@media (min-width: 1101px) {
    /* header.php wraps the bar in the base theme's .container,
       which caps at ~1140px — the whole header row used to sit
       inside that narrow box while the utility strip ran full
       width. Let the header use the bar's own 1320px width. */
    .sb-top-bar-frame > .container {
        max-width: 1320px !important;
    }
    .sb-top-bar .elementor-container {
        max-width: none !important;
        display: grid !important;
        /* v2.9.48: was 1fr auto 1fr — the equal side tracks let the
           ~490px actions column overflow its track in the 1101-1210px
           band and slide the search box over the nav's last item
           (Contact under the search box, owner report 2026-11-02;
           rig-measured 34px of overlap at 1101px, 9px at 1150px).
           Size both end columns to their content and give the nav
           the flexible middle: the search can never reach it, and
           the empty void left of the nav is gone. */
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }
    .sb-top-bar .elementor-top-column {
        width: auto !important;
        min-width: 0 !important;
    }
    .sb-top-bar .elementor-top-column:first-child {
        justify-self: start;
    }
    /* v2.9.48: shrink-wrap the nav column and centre it inside the
       flexible middle track. */
    .sb-top-bar .elementor-top-column:nth-child(2) {
        justify-self: center;
    }
    .sb-top-bar .elementor-top-column:last-child {
        justify-self: end;
    }
    /* v2.9.48: trim the desktop bar's wasted vertical space — the
       bar measured 156px tall around a 104px row (18px top/bottom
       padding + an 84px logo). 10px padding and a 76px logo bring
       it to ~132px. Mobile bands keep their own sizing below.
       v2.9.59: owner asked for a bigger logo WITHOUT a taller bar —
       the logo grows 76 -> 86px and the padding shrinks 10 -> 5px
       to pay for it exactly; the bar's total height is unchanged. */
    .sb-top-bar-frame .sb-top-bar {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    .sb-top-bar-frame .sb-top-bar .sb-logo-frame img.custom-logo {
        height: 86px !important;
        max-height: 86px !important;
    }
}

/* v2.9.38 — mobile: the base theme fixes the bar at 90px
   (style.css, max-width:992px, and the .sb-scroll state at
   every width). With the Elementor columns stacked, the
   bar's content is ~154px, so the fixed height pushed the
   logo up into the utility strip and the actions below the
   frame (owner screenshot, 2026-11-02; reproduced in the
   mobfix rig). Let the bar size to its content. */
@media (max-width: 1100px) {
    .sb-top-bar-frame .sb-top-bar,
    .sb-top-bar-frame.sb-scroll .sb-top-bar {
        height: auto !important;
    }
}

/* Dropdowns */
.sb-navigation .sub-menu {
    background: #fff !important;
    border: 1px solid #f0ebe0 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
    padding: 10px !important;
    min-width: 220px !important;
}

.sb-navigation .sub-menu a {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 12px 18px !important;
    border-radius: 10px !important;
    color: var(--os-text, #1f2a1f) !important;
    display: block !important;
}

.sb-navigation .sub-menu a:hover {
    background: var(--os-brand-soft, #e9f9ec) !important;
    color: var(--os-brand-dark, #2c9440) !important;
}

/* ══ Actions — Order Now CTA + Cart ══ */
.sb-buttons-frame {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

/* Phone pill in header (v2.2.21 — matches the approved homepage
   preview: white pill, phone number, next to the green Cart pill).
   Replaces the old Order Now button in the buttons frame. */
.os-header-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    color: #222 !important;
    border: 2px solid #e2e8e2 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    padding: 12px 22px !important;
    border-radius: 100px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.os-header-phone svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--os-brand, #39b54a) !important;
    flex-shrink: 0 !important;
}

.os-header-phone:hover {
    border-color: var(--os-brand, #39b54a) !important;
    color: var(--os-brand-deep, #2c9440) !important;
    transform: translateY(-1px) !important;
}

/* Cart — green pill with label (v2.2.21, preview match) */
.sb-buttons-frame .sb-btn-cart {
    background: var(--os-brand, #39b54a) !important;
    border: 2px solid var(--os-brand, #39b54a) !important;
    border-radius: 100px !important;
    width: auto !important;
    height: 48px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(57, 181, 74, 0.3) !important;
    transition: all 0.15s ease !important;
    position: relative !important;
}

.sb-buttons-frame .sb-btn-cart:hover {
    background: var(--os-brand-deep, #2c9440) !important;
    border-color: var(--os-brand-deep, #2c9440) !important;
    transform: translateY(-1px) !important;
}

.sb-buttons-frame .sb-btn-cart .sb-icon-svg-cart {
    filter: brightness(0) invert(1) !important;
}

.os-cart-label {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
}

/* The primary menu contains a search menu item (the product-
   search plugin's form injected as a menu entry). It stays
   hidden inside the menu — since v2.9.38 the visible search
   box lives in the header actions — and the owner can delete
   that menu item in Appearance → Menus. */
.sb-navigation .dgwt-wcas-search-wrapp {
    display: none !important;
}

.sb-cart-number {
    /* v2.8.0 (owner): the count sits INSIDE the cart pill, as in
       the approved design — not hanging off its corner. */
    position: static !important;
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    background: var(--os-accent, #ff914d) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 22px !important;
    height: 22px !important;
    border-radius: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 6px !important;
    border: 0 !important;
}

.sb-cart-number .cart-count {
    background: transparent !important;
    color: #fff !important;
}

/* Mobile menu button */
.sb-menu-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 100px !important;
    border: 2px solid #e8e0d4 !important;
    background: #fff !important;
    flex-shrink: 0 !important;
    /* v2.2.29: the base button carries padding-top:20px from the
       old theme, which pushed the hamburger lines off-centre
       inside the circle. Centre the lines properly. */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.sb-menu-btn span,
.sb-menu-btn span::before,
.sb-menu-btn span::after {
    background: var(--os-text, #1f2a1f) !important;
    height: 2px !important;
}

/* v2.9.45 — the base theme gives the span margin:7px 0 0; in
   the flex-centred button the margin box is what gets centred,
   so the three lines rendered 3.5px below the button's centre
   (measured in the rig; owner: "hamburger menu is not
   vertically center"). Zero the margin; the lines sit dead
   centre. */
.sb-menu-btn span {
    margin: 0 !important;
}

@media (max-width: 768px) {
    /* Hide desktop-only utility items on mobile */
    .os-utility-desktop-only,
    .os-utility-desktop-only + .os-utility-sep {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .os-utility-desktop-only {
        display: inline !important;
    }
}

/* ══ Responsive ══ */
@media (max-width: 1100px) {
    /* v1.4.17 fix: the nav container must stay rendered — the mobile
       dropdown panel lives inside it. The old display:none here killed
       the menu at every width ≤1100px, and since style.css only shows
       the burger ≤992px, widths 993–1100px had no navigation at all. */
    #sb-dynamic-menu {
        display: block !important;
    }
    .sb-menu-btn {
        display: flex !important;
    }
    .os-header-phone {
        padding: 12px 24px !important;
        font-size: 13px !important;
    }

    /* Mobile dropdown panel — one behavior for all widths ≤1100px.
       v2.9.43: the old rule used position:absolute with left/right:0,
       which anchors to the nearest positioned ancestor — in the
       Elementor header that is the 15px-wide nav WIDGET, so the open
       panel rendered as a 15px sliver at the right edge with the
       links clipped to their first letters (owner's screenshot,
       2026-11-02). position:fixed anchors to the sticky frame
       instead — the frame's backdrop-filter makes it the containing
       block for fixed descendants — so top:100% is just below the
       header bar and left/right:0 span its full width at any
       viewport. Height hugs the content (5 links), capped so it
       can never run past the bottom of the screen. */
    nav .sb-navigation.sb-navigation-default {
        display: block !important;
        position: fixed !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        height: auto !important;
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
        overflow: auto;
        padding-top: 30px !important;
        opacity: 0;
        transform: translateY(30px);
        pointer-events: none;
        /* v2.9.44 — solid white, no see-through (owner: "Don't
           make it transparent"): the 0.92 alpha + blur let the
           page ghost through the open panel. */
        background-color: #fff;
        box-shadow: 0 18px 30px rgba(31, 42, 31, 0.14);
        border-top: solid 1px #F2F3F5;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: 0.3s ease-in-out;
        z-index: 999;
    }
    nav .sb-navigation.sb-navigation-default li {
        text-align: center;
        width: 100%;
        height: auto;
        display: block;
    }
    nav .sb-navigation.sb-navigation-default li a {
        line-height: 20px;
        margin-bottom: 30px;
    }
    nav .sb-navigation.sb-navigation-default li ul {
        box-shadow: none !important;
        border: none;
        background-color: #FF914D;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transform: none;
        opacity: 1;
        pointer-events: all;
        position: relative;
        top: 0 !important;
        left: 0;
        display: block;
    }
    nav .sb-navigation.sb-navigation-default li ul li {
        text-align: center;
    }
    nav .sb-navigation.sb-navigation-default li ul li a {
        line-height: 20px;
        height: 20px;
    }
    nav .sb-navigation.sb-navigation-default li:hover ul {
        padding-top: 30px;
        opacity: 1;
        max-height: 750px;
        margin-bottom: 30px;
    }
    nav .sb-navigation.sb-navigation-default.sb-active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }
}

@media (max-width: 640px) {
    .os-utility-bar {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }
    .os-utility-inner {
        /* v2.9.45: tighter, even rhythm (was 6px 14px) so the
           wrapped rows read as one centred stack. */
        gap: 4px 10px !important;
        line-height: 1.5 !important;
    }
    /* v2.2.29: on phones the strip wraps — drop the dot separators
       (they dangled at line ends) and give the purity line its own
       full, centred row so both lines align cleanly. */
    .os-utility-sep {
        display: none !important;
    }
    .os-utility-highlight {
        /* v2.9.45: no longer forced full-bleed (flex 0 0 100% made
           the line stretch edge to edge while the rows above it
           sat centred as a group — the misalignment the owner
           flagged). It now sizes to its text and centres in line
           with the rating pill above it, wrapping to its own
           centred row when the two cannot share one. */
        flex: 0 1 auto !important;
        text-align: center !important;
    }
    .sb-top-bar {
        padding: 14px 16px !important;
        gap: 16px !important;
    }
    .sb-logo-frame .logotype__title {
        font-size: 26px !important;
    }
    .os-header-phone {
        display: none !important;
    }
}

/* v2.2.21: on narrow phones the Cart pill drops its label and keeps
   icon + count badge, so logo + cart + burger never crowd. */
@media (max-width: 480px) {
    .os-cart-label {
        display: none !important;
    }
    /* v2.2.29: with the label hidden, the pill collapsed into a
       wide oval blob. A true 48px circle reads intentionally,
       with the glyph centred and the count badge on its rim. */
    .sb-buttons-frame .sb-btn-cart {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    /* v2.9.45 — restore the rim badge in the icon-only circle:
       the v2.8.0 inline-badge rule (right for the desktop pill,
       where the count sits inside per the approved design)
       also governed this circle, pushing the glyph 16px off
       centre with the count beside it at mid-height (measured;
       owner: "cart badge and icon are still not fixed"). In
       the circle the badge rides the rim and the glyph — now
       the only in-flow child — centres exactly. The pill keeps
       its inline badge above 480px. */
    .sb-cart-number {
        position: absolute !important;
        top: -5px !important;
        right: -5px !important;
        margin: 0 !important;
        min-width: 20px !important;
        height: 20px !important;
        border: 2px solid #fff !important;
        z-index: 2;
    }
}

/* v2.2.23: the nav list must never show markers — the base theme
   relies on flex layout without an explicit list-style reset, and
   in the mobile dropdown panel the items fell back to bullets. */
.sb-navigation,
.sb-navigation ul,
.sb-navigation li {
    list-style: none !important;
}

.sb-navigation li::marker {
    content: none !important;
}

/* v2.2.23: pin the cart glyph's box explicitly — its size used to
   depend on the old round button's layout, and in the pill it
   could collapse and take the icon with it. */
.sb-buttons-frame .sb-btn-cart .sb-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 24px !important;
    flex: 0 0 auto !important;
    /* The base button style wraps the glyph in a pale disc with a
       white ring — on the green pill that disc plus the whitened
       glyph washed the icon out completely. No disc on the pill. */
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border-radius: 0 !important;
}

.sb-buttons-frame .sb-btn-cart .sb-icon-svg-cart {
    display: block !important;
    width: 22px !important;
    height: 24px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ══ v2.9.25 (owner's header list, 2026-11-01) ══
   - The utility strip and the header bar span the full width
     (the Elementor bar's baked boxed container is overridden
     here so no re-apply is needed), nav centred, actions right.
   - The Google stars in the utility strip use the brand orange.
   - The hamburger only exists where its dropdown panel does
     (≤1100px); on desktop it rendered but toggled nothing. */
.os-utility-inner {
    max-width: none;
}
.os-utility-stars {
    color: #ff914d;
    letter-spacing: 1px;
}
/* The rating reads as a white pill on the strip
   (owner, 2026-11-01: the bare text was not readable)
   — dark text + orange stars on white, high contrast
   at strip size. */
.os-utility-bar a.os-utility-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    color: #1f2a1f !important;
    border-radius: 999px;
    padding: 3px 12px 3px 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.os-utility-bar a.os-utility-rating-pill .os-utility-stars {
    font-size: 13px;
    letter-spacing: 1.5px;
}
.os-el-headerbar .elementor-container {
    max-width: none !important;
    padding-left: 28px;
    padding-right: 28px;
}
.os-el-headerbar .sb-buttons-frame {
    justify-content: flex-end;
}
@media (min-width: 1101px) {
    .sb-menu-btn {
        display: none !important;
    }
}

/* ── Promo bar (v2.9.42) ──────────────────────────────────
   Slim orange alert above the header, rendered only while
   a valid WooCommerce coupon is active (inc/os-promo-bar.php).
   Brand orange with dark text — white on this orange would
   fail contrast, so the code chip carries the white. */
.os-promo-bar {
    background: #ff914d;
    color: #2b1a08;
    font-family: 'Inter', Arial, sans-serif;
}
.os-promo-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 8px 48px 8px 16px;
    text-align: center;
}
.os-promo-tag {
    background: #2c9440;
    color: #fff;
    font-family: 'Poppins', Arial, sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 9px;
}
.os-promo-msg {
    font-size: 13.5px;
    font-weight: 600;
}
.os-promo-ends {
    font-weight: 700;
}
.os-promo-code {
    background: #fff;
    border: 1.5px dashed #2b1a08;
    color: #2b1a08;
    font-weight: 800;
    letter-spacing: 0.6px;
    border-radius: 8px;
    padding: 3px 10px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
}
.os-promo-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #2b1a08;
    padding: 4px 8px;
}
@media (max-width: 600px) {
    .os-promo-msg {
        font-size: 12.5px;
    }
}

/* ── Mobile strip: Option B (v2.9.70, owner 2026-11-03) ─────
   ONE line on phones: phone · hours · Google G + stars. The
   G chip replaces the words "Rated on Google" (the pill's text
   is hidden via font-size:0; the stars keep their own size),
   and the purity line leaves the strip — it now lives in the
   homepage hero, beside the Order Now button. Desktop is unchanged. */
.os-utility-g {
    display: none;
}
@media (max-width: 700px) {
    .os-utility-bar {
        padding: 8px 14px;
        font-size: 11.5px;
        letter-spacing: 0.2px;
    }
    .os-utility-inner {
        flex-wrap: nowrap;
        gap: 7px;
    }
    .os-utility-item {
        white-space: nowrap;
    }
    .os-utility-purity {
        display: none;
    }
    .os-utility-bar a.os-utility-rating-pill {
        background: transparent;
        box-shadow: none;
        color: #fff !important;
        padding: 0;
        gap: 5px;
        font-size: 0;
    }
    .os-utility-bar a.os-utility-rating-pill .os-utility-stars {
        font-size: 12.5px;
        letter-spacing: 0.5px;
    }
    .os-utility-g {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: #fff;
        flex: none;
    }
    .os-utility-g svg {
        width: 12px;
        height: 12px;
        display: block;
    }
}

/* v2.9.113 (overnight audit, P1): at ≤380px the header's
   right-anchored actions row slides left over the logo —
   measured on the live page at 360px: logo box x54–135, the
   search toggle at x121–167, a 14px overlap (at 390px the same
   row clears the logo by 16px). In this band only, pull the
   bar's side insets in (28px → 16px) and tighten the buttons
   frame gap (14px → 10px): the logo moves left, the actions
   cluster moves right, and the toggle clears the logo by
   ~18px at 360px (replica-measured). Rendering at ≥381px is
   untouched. */
@media (max-width: 380px) {
    .os-el-headerbar .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .sb-buttons-frame {
        gap: 10px !important;
    }
}