/** Shopify CDN: Minification failed

Line 523:3 Unexpected "}"

**/
/* ab-header-styles.css — R656: the header/subnav static CSS, extracted from the inline
   <style> in sections/header.liquid. Settings-driven values arrive as --abhdr-v* custom
   properties defined inline on :root (header is a singleton; units absorbed INTO each var).
   The glass-recipe liquid assigns + the product-template conditional stay inline. */
/* ═══════════════════════════════════════════════════════════
     AB Subnav, Outer container
     ═══════════════════════════════════════════════════════════ */
  /* R193: the shared floating-header axis lives on :root — scoped to the subnav it was invisible
     to the pill nav (a different element), which is why the two sat on different lines. One value,
     every breakpoint, both components. */
  /* R604: the :root token block that used to live here (geometry + glass material + hover
     language + active-state model) has MOVED to snippets/ab-glass-tokens.liquid, rendered
     unconditionally from theme.liquid's <head>.
     It was gated behind the ab_subnav_enabled / ab_show conditionals, so on any page WITHOUT a
     floating subnav — the Shop Booths collection page — the tokens were never emitted and the
     pill nav / cart / logo fell back to their own var() fallbacks: a 2.3x brighter border and a
     plain drop shadow instead of the layered refraction. Two materials for one component.
     Do not re-declare these here; the snippet is the single source. */
  .ab-subnav {
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    /* R199: NO will-change here. `will-change: opacity/transform` promotes this element into its
       own compositing group, and a child's backdrop-filter then samples that (empty) group instead
       of the page — the blur computes correctly but paints nothing, which is why page text showed
       through the glass unblurred. It also costs a permanent layer on mobile. */
  }

  /* ── BAR ── */
  .ab-subnav--bar {
    top: var(--ab-header-full-h, var(--ab-header-h, 0px));
    height: var(--absn-h, 44px);
    z-index: 45;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
  }
  .ab-subnav--bar.ab-subnav--hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }
  .ab-subnav--bar.ab-subnav--swap {
    top: 0; z-index: 55;
  }

  /* ── ALL PILLS: start aligned with nav bar ── */
  .ab-subnav--pill,
  .ab-subnav--pill-center,
  .ab-subnav--pill-split {
    top: var(--ab-nav-top, 0px);
    height: var(--ab-header-h, 60px);
    z-index: 55;
    justify-content: center;
    /* Fast appear, then geometry morphs */
    transition: opacity 0.08s ease-out,
                height 0.5s cubic-bezier(0.22,1,0.36,1),
                top 0.5s cubic-bezier(0.22,1,0.36,1),
                padding 0.5s cubic-bezier(0.22,1,0.36,1);
  }
  /* Hidden */
  .ab-subnav--pill.ab-subnav--hidden,
  .ab-subnav--pill-center.ab-subnav--hidden,
  .ab-subnav--pill-split.ab-subnav--hidden {
    opacity: 0; pointer-events: none; transform: none;
    height: var(--ab-header-h, 60px);
    top: var(--ab-nav-top, 0px);
    padding: 0;
    transition: none;
  }
  /* Morphed: pill shape */
  .ab-subnav--pill.ab-morphed,
  .ab-subnav--pill-center.ab-morphed,
  .ab-subnav--pill-split.ab-morphed {
    height: var(--ab-float-h, 44px);
    /* R191: ONE axis for every floating header. The per-section pill-top setting used to win and
       left the subnav sitting lower than the pill nav, so the morph visibly jumped. --ab-float-top
       is the single source (12px desktop / mobile alike, set on :root below). */
    top: var(--ab-float-top, 12px);
  }
  .ab-subnav--pill-center.ab-morphed,
  .ab-subnav--pill-split.ab-morphed {
    padding: 0 var(--absn-pill-side, 16px);
  }
  /* Returning: simple dissolve in place (no geometry morph).
     The pill keeps its morphed shape and just fades out. */
  .ab-subnav--pill.ab-subnav--returning,
  .ab-subnav--pill-center.ab-subnav--returning,
  .ab-subnav--pill-split.ab-subnav--returning {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  }
  /* Content hides immediately when returning */
  .ab-subnav--returning .ab-subnav__body > *,
  .ab-subnav--returning .ab-subnav__cta--split {
    opacity: 0 !important;
    transition: opacity 0.08s ease !important;
  }

  /* ── Content: visible only when morphed ── */
  .ab-subnav--pill .ab-subnav__body > *,
  .ab-subnav--pill-center .ab-subnav__body > *,
  .ab-subnav--pill-split .ab-subnav__body > *,
  .ab-subnav--pill .ab-subnav__cta--split,
  .ab-subnav--pill-center .ab-subnav__cta--split,
  .ab-subnav--pill-split .ab-subnav__cta--split {
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  .ab-subnav--pill.ab-morphed .ab-subnav__body > *,
  .ab-subnav--pill-center.ab-morphed .ab-subnav__body > *,
  .ab-subnav--pill-split.ab-morphed .ab-subnav__body > *,
  .ab-subnav--pill-split.ab-morphed .ab-subnav__cta--split {
    opacity: 1;
    transition: opacity 0.2s ease 0.25s;
  }

  /* ── Header crossfade ── */
  body.ab-subnav-active #sticky-header-content {
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
  }
  body:not(.ab-subnav-active) #sticky-header-content {
    opacity: 1;
    transition: opacity 0.35s cubic-bezier(0.25,0.1,0.25,1);
  }
  body.ab-subnav-bar-swap #sticky-header-content {
    opacity: 1; transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); pointer-events: none;
  }
  body:not(.ab-subnav-bar-swap) #sticky-header-content {
    transform: translateY(0);
  }

  /* ── Header lock: opacity-only, no translateY ──
     Lock is removed immediately when subnav reverses, so the
     crossfade CSS above controls the actual fade-in timing. */
  body.ab-header-locked #sticky-header-content,
  body.ab-header-locked #sticky-header {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* ═══════════════════════════════════════════════════════════
     On-scroll-up reinforcement  (v3, sticky, transform-free at rest)

     KEY INSIGHT: any `transform` on an ancestor, even translateY(0) —
     creates a new containing block, which traps position:fixed children
     (like the cart drawer) inside the header section. So we NEVER set
     transform in the base or "show" state. Transform is ONLY present
     briefly during the hide animation and the reveal-back animation,
     then removed via the `transitionend` listener so fixed children
     (cart drawer, overlays) work correctly at all other times.
     ═══════════════════════════════════════════════════════════ */
  .section-header.ab-scrollup-ready {
    position: sticky !important;
    top: 0 !important;
    z-index: 50;
    width: 100%;
    /* NO transform here, keeps fixed children working */
  }
  /* Hiding: slide up off-screen */
  .section-header.ab-scrollup-ready.ab-scrollup-hide {
    transform: translateY(-105%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
  }
  /* Revealing: animate from -105% back to 0, then JS removes this class */
  .section-header.ab-scrollup-ready.ab-scrollup-reveal {
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .section-header.ab-scrollup-ready.ab-scrollup-show #sticky-header-content {
    background: rgb(var(--background-color-header)) !important;
    position: relative !important;
  }
  /* Prevent theme's .sticky-header from also going fixed */
  .section-header.ab-scrollup-ready .sticky-header {
    position: relative !important;
  }
  /* Ensure subnav doesn't fight the scroll-up header when lock is off */
  body.ab-subnav-active .section-header.ab-scrollup-ready.ab-scrollup-show #sticky-header-content {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Body
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__body {
    display: flex;
    align-items: center;
    height: 100%;
    background: var(--absn-bg, #EAF0FF);
    padding: 0 var(--absn-pad, 16px);
    gap: var(--absn-gap, 2px);
    font-family: var(--abhdr-v0);
    overflow-x: hidden;
    overflow-y: visible;
  }

  .ab-subnav--bar .ab-subnav__body {
    flex: 1;
    border-bottom: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
  }

  .ab-subnav--pill .ab-subnav__body,
  .ab-subnav--pill-center .ab-subnav__body,
  .ab-subnav--pill-split .ab-subnav__body {
    flex: 1; border-radius: 0; margin: 0; box-shadow: none;
    border: none;
    border-bottom: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    /* Morph works in both directions */
    transition: border-radius 0.5s cubic-bezier(0.22,1,0.36,1),
                margin 0.5s cubic-bezier(0.22,1,0.36,1),
                max-width 0.5s cubic-bezier(0.22,1,0.36,1),
                box-shadow 0.4s ease,
                border-color 0.3s ease,
                flex 0.5s cubic-bezier(0.22,1,0.36,1);
  }
  /* Only snap geometry when fully hidden (after fading completes) */
  .ab-subnav--pill.ab-subnav--hidden .ab-subnav__body,
  .ab-subnav--pill-center.ab-subnav--hidden .ab-subnav__body,
  .ab-subnav--pill-split.ab-subnav--hidden .ab-subnav__body {
    border-radius: 0 !important; margin: 0 !important;
    max-width: none !important; box-shadow: none !important;
    flex: 1 !important;
    transition: none;
  }
  .ab-subnav--pill.ab-morphed .ab-subnav__body {
    border-radius: 40px;
    margin: 0 var(--absn-pill-side, 16px);
    border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v2));
  }
  .ab-subnav--pill-center.ab-morphed .ab-subnav__body {
    flex: 0 1 auto; max-width: var(--absn-body-fit, 90%);
    border-radius: 40px; margin: 0 auto;
    border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v2));
  }
  .ab-subnav--pill-split.ab-morphed .ab-subnav__body {
    flex: 0 1 auto; max-width: var(--absn-body-fit, 80%);
    border-radius: 40px;
    border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v2));
  }

  /* ═══════════════════════════════════════════════════════════
     Split CTA
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__cta--split {
    flex-shrink: 0; height: 100%;
    background: var(--absn-cta-bg, #2A3550);
    color: var(--absn-cta-text, #EAF0FF);
    font-size: var(--absn-font-size, 12px); font-weight: 700;
    padding: 0 16px; border-radius: 40px;
    text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; cursor: pointer;
    box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v3));
    border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    margin-left: var(--absn-split-gap, 8px);
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.4s ease 0.15s, transform 0.4s cubic-bezier(0.22,1,0.36,1) 0.15s;
  }
  .ab-subnav--pill-split.ab-morphed .ab-subnav__cta--split {
    opacity: 1; transform: scale(1);
  }
  .ab-subnav--pill-split.ab-subnav--hidden .ab-subnav__cta--split {
    opacity: 0 !important; transform: scale(0.85) !important; transition: none;
  }
  /* Equal heights in the floating split state: the cart circle is the reference
     (--absn-h). The Shop CTA tracked the container via height:100% and the body
     pill grew with its link padding, so the three drifted apart, pin all to
     the cart's height. */
  .ab-subnav--pill-split .ab-subnav__cta--split {
    height: var(--ab-float-h, 44px);
    align-self: center;
  }
  .ab-subnav--pill-split.ab-morphed .ab-subnav__body {
    height: var(--ab-float-h, 44px);
    align-items: center;
  }

  /* ═══════════════════════════════════════════════════════════
     Subnav Cart Button
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                 /* R202: icon + count sit side by side */
    flex-shrink: 0;
    /* R202: circle when empty, pill that widens as digits are added */
    height: calc(var(--ab-float-h, 44px) - 4px);
    min-width: calc(var(--ab-float-h, 44px) - 4px);
    width: auto;
    padding: 0 12px;
    border-radius: 999px;
    aspect-ratio: 1;
    padding: 0;
    background: var(--absn-cart-bg, #2A3550);
    color: var(--absn-cart-text, #EAF0FF);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    transition: opacity 0.15s ease;
    margin-left: 4px;
  }
  @media (hover:hover) and (pointer:fine){ /* R293 */
  .ab-subnav__cart-btn:hover { background: var(--ab-hover-solid, #1E47CE); color: var(--ab-hover-solid-ink, #fff); opacity: 1; } }
  .ab-subnav__cart-btn-icon {
    width: 20px; height: 20px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    /* R252: was #EAF0FF for the old navy button — invisible now the cart is light glass. It
       inherits the button's ink so it follows rest (navy) and hover (white) automatically. */
    color: inherit;
  }
  .ab-subnav__cart-btn-icon svg {
    width: 100%; height: 100%;
    stroke: currentColor; fill: none;
  }
  /* R202: the count lives INSIDE the cart button now — no floating disc, no white stroke ring.
     The button is a pill that grows with the digits (1 digit -> circle, 2-3 digits -> wider pill),
     so the number always sits on the navy fill instead of punching a hole in the glass edge. */
  .ab-subnav__cart-badge {
    position: static;
    background: none;
    color: inherit;
    font-family: var(--absn-cart-badge-font, inherit);
    font-size: calc(var(--absn-font-size, 14px) - 1px);
    font-weight: var(--absn-cart-badge-weight, 700);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex; align-items: center;
    padding: 0;
    pointer-events: none;
  }
  .ab-subnav__cart-badge--empty { display: none; }
  /* R296: hide the count whenever it is zero, driven off the data attribute rather than the
     --empty class. Both JS paths already write data-subnav-cart-count on every repaint, so this
     cannot desync; the class toggle can, if any code path updates the attribute/text without also
     updating the class (or repaints a cloned bar before the class is re-applied). Declarative
     beats a toggle here — an empty cart must never render a bare "0". */
  .ab-subnav__cart-badge[data-subnav-cart-count="0"] { display: none; }

  /* Split variant: external pill button. Sized to the subnav's own height
     (var(--ab-header-h), which the Shop CTA fills via height:100%) on BOTH axes, an
     explicit circle exactly as tall as the Shop button. Explicit width avoids the
     aspect-ratio + flex `width:auto` collapse that shrank it to the icon size. */
  /* R329: cart + count breathe — auto width, extra left padding, never a squeezed circle */
  .ab-subnav__cart-btn--split { width:auto !important; min-width:var(--ab-float-h,44px);
    padding-left:18px !important; padding-right:14px !important; }
  .ab-subnav__cart-btn--split {
    /* split buttons only show in the MORPHED pill state, whose bar height is --absn-h —
       sizing to --ab-header-h (the taller pre-morph header) made the cart balloon */
    height: var(--absn-h, 44px);
    width: var(--absn-h, 44px);
    aspect-ratio: 1;
    margin-left: var(--absn-split-gap, 8px);
    border-radius: 50%;
    box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v3));
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.4s ease 0.15s, transform 0.4s cubic-bezier(0.22,1,0.36,1) 0.15s;
  }
  .ab-subnav--pill-split.ab-morphed .ab-subnav__cart-btn--split {
    opacity: 1; transform: scale(1);
  }
  .ab-subnav--pill-split.ab-subnav--hidden .ab-subnav__cart-btn--split {
    opacity: 0 !important; transform: scale(0.85) !important; transition: none;
  }

  /* Pill content visibility for cart button */
  .ab-subnav--pill .ab-subnav__cart-btn:not(.ab-subnav__cart-btn--split),
  .ab-subnav--pill-center .ab-subnav__cart-btn:not(.ab-subnav__cart-btn--split) {
    opacity: 0; transition: opacity 0.18s ease;
  }
  .ab-subnav--pill.ab-morphed .ab-subnav__cart-btn:not(.ab-subnav__cart-btn--split),
  .ab-subnav--pill-center.ab-morphed .ab-subnav__cart-btn:not(.ab-subnav__cart-btn--split) {
    opacity: 1; transition: opacity 0.2s ease 0.25s;
  }
  .ab-subnav--returning .ab-subnav__cart-btn {
    opacity: 0 !important; transition: opacity 0.08s ease !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Scroll area + edge-fade
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__scroll {
    display: flex; align-items: center;
    gap: var(--absn-gap, 2px);
    overflow-x: auto; scrollbar-width: none;
    -ms-overflow-style: none; flex: 1; min-width: 0;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none;
  }
  .ab-subnav__scroll::-webkit-scrollbar { display: none; }

  .ab-subnav__scroll.fade-left {
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--absn-fade, 28px), black 100%);
    mask-image: linear-gradient(to right, transparent, black var(--absn-fade, 28px), black 100%);
  }
  .ab-subnav__scroll.fade-right {
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--absn-fade, 28px)), transparent);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - var(--absn-fade, 28px)), transparent);
  }
  .ab-subnav__scroll.fade-left.fade-right {
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--absn-fade, 28px), black calc(100% - var(--absn-fade, 28px)), transparent);
    mask-image: linear-gradient(to right, transparent, black var(--absn-fade, 28px), black calc(100% - var(--absn-fade, 28px)), transparent);
  }

  /* ═══════════════════════════════════════════════════════════
     Back-to-top control (upper-left, "What's included" colour)
     ═══════════════════════════════════════════════════════════ */
  /* Dedicated "back to top" control: a round button the same height as the cart
     icon, pinned at the far left of the bar, sitting apart from the mobile toggle. */
  .ab-subnav__backtop {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    height: calc(var(--absn-h, 44px) - 8px);
    width: calc(var(--absn-h, 44px) - 8px);
    margin-right: 8px; padding: 0;
    border: none; cursor: pointer;
    /* Navy ink, NO fill circle, a plain scroll-to-top affordance that must not read
       as an active/selected button (it used to borrow the electric active colour +
       an 8% tinted disc, which looked like a pressed state). */
    color: #2A3550;
    background: transparent;
    border-radius: 50%;
    transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
  }
  @media (hover:hover) and (pointer:fine){ /* R293 */
  .ab-subnav__backtop:hover { opacity: 1; color: var(--absn-active, #1E47CE); } } /* R210: colour, no lift */
  .ab-subnav__backtop:active { transform: translateY(0); }
  /* R335: optically even inset — the hover circle is (--absn-h - 8), leaving 4px above and below;
     the pill's 16px side padding made the LEFT gap 4x that. Pull the button back so its left gap
     equals the vertical gap, derived from the same vars so a bar-height change keeps it true. */
  .ab-subnav--pill-split .ab-subnav__body .ab-subnav__backtop,
  .ab-subnav--pill .ab-subnav__body .ab-subnav__backtop,
  .ab-subnav--pill-center .ab-subnav__body .ab-subnav__backtop{
    /* R339: measured — the morphed body is --ab-float-h (44) while the circle derives from
       --absn-h (48-8=40), so the real vertical gap is (44-40)/2 = 2px, not 4. Derive from BOTH
       vars so the left inset always equals the top/bottom gap exactly. */
    margin-left: calc(((var(--ab-float-h, 44px) - (var(--absn-h, 44px) - 8px)) / 2) - var(--absn-pad, 16px));
  }
  /* Up-arrow stays a stroke icon, never let an inherited rule fill it. */
  .ab-subnav__backtop svg { width: 17px; height: 17px; fill: none !important; }
  .ab-subnav__backtop svg line,
  .ab-subnav__backtop svg polyline,
  .ab-subnav__backtop svg path { fill: none !important; stroke: currentColor; }
  .ab-subnav__backtop svg { display: block; }
  .ab-subnav__backtop--logo { width: auto; border-radius: 8px; padding: 0 4px; }
  .ab-subnav__backtop img { height: calc(var(--absn-h, 44px) - 22px); width: auto; display: block; }
  .ab-subnav--glass .ab-subnav__backtop { position: relative; z-index: 2; }

  /* External back-to-top, its own circular button, sibling of the pill body. Shown only
     in mobile dropdown mode (below); hidden everywhere else. Fades/scales in with the
     split cart + Shop CTA so the morph stays cohesive. */
  .ab-subnav__backtop-ext { display: none; }
  .ab-subnav--pill-split .ab-subnav__backtop-ext {
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.4s ease 0.15s, transform 0.4s cubic-bezier(0.22,1,0.36,1) 0.15s;
  }
  .ab-subnav--pill-split.ab-morphed .ab-subnav__backtop-ext { opacity: 1; transform: scale(1); }
  .ab-subnav--pill-split.ab-subnav--hidden .ab-subnav__backtop-ext {
    opacity: 0 !important; transform: scale(0.85) !important; transition: none;
  }


  /* ═══════════════════════════════════════════════════════════
     R201 — SATELLITE PARITY. The long glass pill carries a hairline refraction edge, an inset top
     highlight and a soft drop shadow; the logo / Shop / cart circles beside it had none of that, so
     they read as flat stickers next to a lens. Every satellite now wears the SAME edge + shadow
     (shared vars), and the Shop label shares the nav's type scale.
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__home-ext,
  .ab-subnav__backtop-ext,
  .ab-subnav__cta,
  .ab-subnav__cart-btn {
    /* R247: ONE refraction edge for every satellite — hairline border plus the shared layered
       inset light, so none of them reads as a drawn stroke next to the pill. */
    border: 1px solid var(--ab-glass-border, rgba(255,255,255,.28)) !important;
    box-shadow: var(--ab-glass-shadow, 0 8px 26px rgba(42,53,80,.16)) !important;
  }

  /* one type scale across the bar: Shop matches the nav links */
  .ab-subnav__cta {
    font-size: var(--absn-font-size, 14px) !important;
  }

  /* ═══════════════════════════════════════════════════════════
     Links
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__link {
    color: var(--absn-text, #9B948C);
    font-size: var(--absn-font-size, 12px);
    font-weight: var(--abhdr-v4);
    padding: 4px 10px; white-space: nowrap;
    text-decoration: none; border-radius: 6px;
    transition: color 0.15s ease; flex-shrink: 0;
  }
  @media (hover:hover) and (pointer:fine){ /* R293 */
  .ab-subnav__link:hover {
    color: var(--ab-hover-ink, #1E47CE); opacity: 1;
  } }
  .ab-subnav__link.is-active {
    /* R330: the active anchor is ALWAYS a filled chip — the cool blue-grey "you are here"
       neutral — never a bare-text state. Stability beats subtlety here: this rule outranks the
       glass hover block so no cascade combination can strip the fill mid-scroll. */
    background: var(--ab-active-chip, #C7D3EA) !important;
    color: var(--ab-active-ink, #2A3550) !important;
    font-weight: var(--abhdr-v5);
    opacity: 1;
  }};
    opacity: 1;
  }

  /* ═══════════════════════════════════════════════════════════
     CTA (inside body)
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__cta:not(.ab-subnav__cta--split) {
    display: inline-flex; align-items: center; flex-shrink: 0;
    background: var(--absn-cta-bg, #2A3550);
    color: var(--absn-cta-text, #EAF0FF);
    font-size: var(--absn-font-size, 12px); font-weight: 700;
    padding: 6px 16px; border-radius: var(--absn-cta-radius, 20px);
    text-decoration: none; white-space: nowrap;
    line-height: 1; cursor: pointer; transition: opacity 0.15s ease;
  }
  @media (hover:hover) and (pointer:fine){ /* R293 */
  .ab-subnav__cta:not(.ab-subnav__cta--split):hover { background: var(--ab-hover-solid, #1E47CE); color: var(--ab-hover-solid-ink, #fff); opacity: 1; } }

  /* ═══════════════════════════════════════════════════════════
     Liquid Glass
     Apple-style: blur + saturate + brightness + specular edge
     + refraction gradient (light streak across surface)
     ═══════════════════════════════════════════════════════════ */
  
  .ab-subnav--glass .ab-subnav__link {
    text-shadow: none;
  }
  /* glass auto-contrast: inactive items darken toward ink so they hold up over busy
     scenes regardless of the stored nav colour */
  .ab-subnav--glass .ab-subnav__link:not(.is-active) {
    color: color-mix(in srgb, var(--abhdr-v6) 45%, #1C2740);
  }
  /* ── Liquid-glass surfaces: nav pill + Shop CTA + cart button ──
     Layered like the macOS-dock reference: a blurred + refracted backdrop layer (::before)
     sits UNDER the content, topped by a directional "shine" rim, instead of a flat tint
     with a uniform white ring (which read as the odd strokes). */
  .ab-subnav--glass .ab-subnav__body,
  .ab-subnav--glass .ab-subnav__cta,
  .ab-subnav--glass .ab-subnav__cart-btn {
    position: relative;
    isolation: isolate;
    background: transparent;
    /* TASK 3: EXACT ATC-bar rim/shine recipe (snippets/ab-pm-styles.liquid line 470), reading the
       global `settings.glass_rim`, so the pill edge matches the floating add-to-cart bar. The
       trailing drop shadow stays section-configurable (ab_subnav_shadow_intensity) so the merchant
       keeps the existing pill-shadow slider. */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255, var(--abhdr-v7)),
      inset 0 0 0 1px rgba(255,255,255, var(--abhdr-v8)),
      inset 0 -1px 0 rgba(42,53,80,.06),
      0 8px var(--abhdr-v9) rgba(42,53,80,var(--abhdr-v10));
  }
  /* ATC-matched hairline border on the pill body (line 469 of ab-pm-styles.liquid) */
  .ab-subnav--glass.ab-morphed .ab-subnav__body {
    border-color: color-mix(in srgb, #fff 60%, transparent);
  }
  /* the diffusion layer: blurred + saturated backdrop, tinted, clipped to the rounded shape
     by border-radius (no overflow:hidden, so the cart badge + dropdowns are never clipped) */
  .ab-subnav--glass .ab-subnav__body::before,
  .ab-subnav--glass .ab-subnav__cta::before,
  /* R217: the Shop pill went invisible — its fill lives only on a ::before layer, and with the
     glass restyle that layer stopped painting, leaving white label on white glass. Put the fill on
     the element itself so it can never disappear; ::before keeps handling the frosted variant. */
  /* R248: navy marks the ACTIVE item only, so Shop drops to the same glass as the cart and the
     logo — clear background, navy ink at rest, cobalt fill with white ink on hover. */
  .ab-subnav--glass .ab-subnav__cta{
    background: var(--ab-glass-bg, rgba(255,255,255,.55)) !important;
    color: #2A3550 !important;
    -webkit-backdrop-filter: blur(var(--ab-glass-blur,12px)) saturate(var(--ab-glass-sat,1.4));
    backdrop-filter: blur(var(--ab-glass-blur,12px)) saturate(var(--ab-glass-sat,1.4));
  }
  .ab-subnav--glass .ab-subnav__cta::before{ background: transparent !important; }
  /* R247: navy marks the ACTIVE item, so the scrolled bar's cart also drops to light glass with
     navy ink, matching the fixed pill's cart exactly. */
  .ab-subnav--glass .ab-subnav__cart-btn{
    background: var(--ab-glass-bg, rgba(255,255,255,.55)) !important;
    color: #2A3550 !important;
    -webkit-backdrop-filter: blur(var(--ab-glass-blur,12px)) saturate(var(--ab-glass-sat,1.4));
    backdrop-filter: blur(var(--ab-glass-blur,12px)) saturate(var(--ab-glass-sat,1.4));
  }
  .ab-subnav--glass .ab-subnav__cart-btn::before{ background: transparent !important; }
  .ab-subnav--glass .ab-subnav__cart-badge{ color: inherit; }
  /* R250: the cart glyph was drawn white for the old navy button — on light glass it vanished.
     Force it to the button's own ink so it follows rest/hover states. */
  .ab-subnav--glass .ab-subnav__cart-btn svg,
  .ab-subnav--glass .ab-subnav__cart-btn svg *{ stroke: currentColor !important; }
  .ab-subnav--glass .ab-subnav__cart-btn svg [fill]:not([fill="none"]){ fill: currentColor !important; }
  /* links are inline text — give them the pill shape so the cobalt fill reads as a control.
     R293: this one is NOT a hover rule, so it stays OUTSIDE the gate below — inside it, touch
     devices would lose the pill shape entirely. */
  .ab-subnav__link{ border-radius: 999px; padding-left: 10px; padding-right: 10px; transition: background .16s ease, color .16s ease; }
  /* R293: every hover state below is gated behind a real pointer. On touch the browser latches
     :hover after a tap and holds it until the next tap elsewhere, so a tapped control stayed
     ELECTRIC BLUE instead of settling back to its resolved rest/active colour. */
  @media (hover:hover) and (pointer:fine){
  .ab-subnav--glass .ab-subnav__cart-btn:hover svg,
  .ab-subnav--glass .ab-subnav__cart-btn:hover svg *{ stroke: #fff !important; }
  /* R219: hover states had to out-rank those base fills, so they are stated here at the same
     specificity and marked important — the floating header now answers the pointer exactly like
     the fixed pill: solid buttons fill electric, links and the logo take electric ink. */
  .ab-subnav--glass .ab-subnav__cta:hover,
  .ab-subnav--glass .ab-subnav__cart-btn:hover{ background: var(--ab-hover-solid, #1E47CE) !important; color: var(--ab-hover-solid-ink, #fff) !important; }
  .ab-subnav__link:hover,
  .ab-subnav__backtop:hover,
  .ab-subnav__backtop-ext:hover,
  .ab-subnav__home-ext:hover{ color: var(--ab-hover-ink, #FFFFFF) !important; }
  .ab-subnav__link:hover,
  .ab-subnav__backtop:hover,
  .ab-subnav__backtop-ext:hover,
  .ab-subnav__home-ext:hover{ background: var(--ab-hover-surface, #1E47CE) !important; }
  .ab-subnav--glass .ab-subnav__cart-btn:hover::before,
  .ab-subnav--glass .ab-subnav__cta:hover::before { background: var(--ab-hover-solid, #1E47CE); }
  }/* end R293 hover gate */
  .ab-subnav--glass .ab-subnav__cart-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter:
      blur(var(--abhdr-v11))
      saturate(var(--abhdr-v12))
      brightness(1.06);
    backdrop-filter:
      blur(var(--abhdr-v11))
      saturate(var(--abhdr-v12))
      brightness(1.06);
  }
  /* per-surface tint (pill uses the nav tint; buttons use their own colour) */
  .ab-subnav--glass .ab-subnav__body::before {
    /* ATC-matched glass: a SINGLE mix of the tint straight toward transparent at the (low) frost
       %, exactly like #cv-sticky-bar. No white pre-mix — that second mix is what made the pill
       read as a near-solid wall instead of glass. Same material as the floating add-to-cart bar,
       just shaped as a pill. */
    background: color-mix(in srgb, var(--abhdr-v13) var(--abhdr-v14), transparent);
  }
  /* Render the pill-body frost/diffusion as a DIRECT backdrop-filter on the body element (exactly
     like the #cv-sticky-bar ATC floater) instead of a z-index:-1 ::before. The Shopify customizer
     preview renders a direct backdrop-filter but NOT a negative-z ::before, so the live diffusion
     now also shows in the editor. The pill's border-radius clips the blur; no overflow:hidden, so
     the cart badge + dropdowns are never clipped. */
  .ab-subnav--glass .ab-subnav__body {
    /* R198: shared material (see :root). Was a heavier tint + 2.2 saturation + brightness lift,
       which read as a grey slab beside the pill's clear frost. */
    background: var(--ab-glass-bg, rgba(255,255,255,.55));
    /* R368: fallbacks on every var — a var() that fails at computed-value time resets the whole
       declaration to `none` silently (the extraction-gotcha class of bug). */
    -webkit-backdrop-filter: blur(var(--ab-glass-blur, 12px)) saturate(var(--ab-glass-sat, 1.4));
    backdrop-filter: blur(var(--ab-glass-blur, 12px)) saturate(var(--ab-glass-sat, 1.4));
    /* R187/193: same material spec as the pill nav — hairline highlight border + inset top light.
       The border WIDTH comes from --absn-border-w (merchant setting, 0 by default), so the glass
       variant raises it to 1px rather than being silently zeroed. */
    --absn-border-w: 1px;
    border: 1px solid var(--ab-glass-border);
    border-width: 1px;
    box-shadow: var(--ab-glass-shadow);
    box-shadow: 0 6px 22px rgba(42,53,80,.14), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .ab-subnav--glass .ab-subnav__body::before { display: none; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ab-subnav--glass .ab-subnav__body { background: color-mix(in srgb, var(--abhdr-v13) 45%, #ffffff); }
  }
  /* R368: the prefers-reduced-transparency override that lived here is what killed the band's
     frost — the merchant's own browser matches `reduce`, so the floating band rendered as a
     near-solid white slab (light) / an unblurred clear veil (ondark) on every machine they own,
     reported three times as "too many permutations of liquid glass". Shop/cart kept their blur
     (the override only touched their ::before layers), which is why they were "the good
     examples". User call: ONE frosted material everywhere — the override is removed for the
     whole floating-header family. The @supports capability fallback below still covers browsers
     that cannot blur at all. */
  .ab-subnav--glass .ab-subnav__cta::before {
    /* R200: Shop matches the cart — solid navy. Both settings are already #2A3550; only the frost
       differed, which rendered Shop as a washed grey pill next to a solid navy cart. */
    background: var(--absn-cta-bg, #2A3550);
  }
  .ab-subnav--glass .ab-subnav__cart-btn::before {
    /* R197: the cart stays SOLID navy on the glass bar. At the shared 55% frost it washed out to a
       grey disc over busy hero art — the cart is the one control that must always read clearly. */
    background: var(--absn-cart-bg, #2A3550);
  }
  /* (Removed the SVG #ab-glass-distortion refraction warp, it read as "weird" and is what
     made the liquid glass look off. The clean blur+saturate frosted glass above is the
     cookie-banner-style effect requested.) */
  /* iOS momentum-scroll perf: a fixed/pinned element with a large backdrop-blur re-samples the
     whole blurred backdrop every frame while the page flings past it — the #1 cause of the
     mobile-Safari "flick lag". backdrop-filter cost scales with blur radius, and the frost tint
     below already obscures the page beneath, so on phones we cap the radius hard (≈12px) and keep
     the desktop "max blur" untouched. Visually near-identical on a small screen, far cheaper. */
  @media (max-width: 749px){
    .ab-subnav--glass .ab-subnav__body::before,
    .ab-subnav--glass .ab-subnav__cta::before,
    .ab-subnav--glass .ab-subnav__cart-btn::before {
      -webkit-backdrop-filter: blur(12px) saturate(var(--abhdr-v12)) brightness(1.06);
      backdrop-filter: blur(12px) saturate(var(--abhdr-v12)) brightness(1.06);
    }
  }
  /* solid fallback where backdrop-filter is unsupported (older Android WebView / in-app
     browsers / blocklisted GPUs) so the nav never renders over raw page content */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ab-subnav--glass .ab-subnav__body::before { background: color-mix(in srgb, var(--abhdr-v13) 45%, #ffffff); }
    .ab-subnav--glass .ab-subnav__cta::before { background: var(--absn-cta-bg, #2A3550); }
    .ab-subnav--glass .ab-subnav__cart-btn::before { background: var(--absn-cart-bg, #2A3550); }
  }
  /* content sits above the diffusion layer */
  .ab-subnav--glass .ab-subnav__scroll,
  .ab-subnav--glass .ab-subnav__cta,
  .ab-subnav--glass .ab-subnav__cart-btn,
  .ab-subnav--glass .ab-subnav__dropdown-toggle {
    position: relative;
    z-index: 1;
  }
  /* R368: reduced-transparency override removed (see the note beside the body rule above). */

  /* ── Liquid-glass: external back-to-top circle (matches the pill body's frosted white) ──
     The standalone up-arrow circle (mobile dropdown + desktop pill-split layouts) was a solid
     white/tinted disc; under glass it now mirrors the same frosted-white recipe as the nav pill:
     transparent button + rim/shine box-shadow, with the blur+saturate backdrop on ::before so the
     arrow glyph sits above the diffusion layer. */
  .ab-subnav--glass .ab-subnav__backtop-ext {
    position: relative;
    isolation: isolate;
    background: transparent;
    border-color: rgba(255,255,255, var(--abhdr-v15));
    color: #2A3550;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255, var(--abhdr-v15)),
      inset 0 1px 0 0 rgba(255,255,255, 0.55),
      0 8px var(--abhdr-v9) rgba(42,53,80,var(--abhdr-v10));
  }
  .ab-subnav--glass .ab-subnav__backtop-ext::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter:
      blur(var(--abhdr-v11))
      saturate(var(--abhdr-v12))
      brightness(1.06);
    backdrop-filter:
      blur(var(--abhdr-v11))
      saturate(var(--abhdr-v12))
      brightness(1.06);
    /* same single-mix ATC glass as the pill body (no white pre-mix) */
    background: color-mix(in srgb, var(--abhdr-v13) var(--abhdr-v14), transparent);
  }
  .ab-subnav--glass .ab-subnav__backtop-ext svg { position: relative; z-index: 1; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ab-subnav--glass .ab-subnav__backtop-ext::before { background: color-mix(in srgb, var(--abhdr-v13) 45%, #ffffff); }
  }
  /* R368: reduced-transparency override removed (see the note beside the body rule above). */

  /* ═══════════════════════════════════════════════════════════
     Dropdown toggle, hidden on desktop, visible on mobile dropdown mode
     ═══════════════════════════════════════════════════════════ */
  .ab-subnav__dropdown-toggle {
    display: none; /* hidden by default + on desktop */
  }
  .ab-subnav__chevron {
    transition: transform 0.25s ease;
    fill: none !important;
    flex-shrink: 0;
  }
  .ab-subnav__dropdown-toggle[aria-expanded="true"] .ab-subnav__chevron {
    transform: rotate(180deg);
  }

  /* ═══════════════════════════════════════════════════════════
     M12: Home circle — its OWN external round button to the LEFT of the pill cluster.
     A direct child of .ab-subnav (sibling of the body + the external back-to-top circle),
     so it is OUTSIDE the pill strip and never overlaps the pill, the back-to-top circle, or
     the cart circle (each owns its box, laid out by the parent flex row). Mirrors the external
     back-to-top circle's size/shape/offset: same diameter (var(--absn-h)), border-radius:999px,
     same morph fade-in. Shows a merchant-assigned logo image when set, else the house glyph.
     ═══════════════════════════════════════════════════════════ */
  /* Hidden by default; revealed (with the morph) only on the floating pill styles + mobile
     dropdown, exactly like .ab-subnav__backtop-ext, so it appears alongside the pill. */
  .ab-subnav__home-ext { display: none; }
  .ab-subnav--pill .ab-subnav__home-ext,
  .ab-subnav--pill-center .ab-subnav__home-ext,
  .ab-subnav--pill-split .ab-subnav__home-ext {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    height: var(--absn-h, 44px); width: var(--absn-h, 44px);
    margin-right: var(--absn-split-gap, 8px); padding: 0;
    border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
    background: var(--absn-bg, #EAF0FF);
    color: var(--absn-active, #1E47CE);
    border-radius: 999px; cursor: pointer; text-decoration: none;
    box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v16));
    /* Fade/scale in with the morph, mirroring the external back-to-top circle. */
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.4s ease 0.15s, transform 0.4s cubic-bezier(0.22,1,0.36,1) 0.15s;
  }
  .ab-subnav--pill.ab-morphed .ab-subnav__home-ext,
  .ab-subnav--pill-center.ab-morphed .ab-subnav__home-ext,
  .ab-subnav--pill-split.ab-morphed .ab-subnav__home-ext { opacity: 1; transform: scale(1); }
  /* Home circle is DESKTOP-ONLY (merchant request): on mobile it crowded the pill +
     back-to-top + Shop CTA + cart, so hide it ≤749px and reclaim that width for the
     Shop button. Desktop keeps the home circle. */
  @media (max-width: 749px) {
    .ab-subnav__home-ext,
    .ab-subnav--pill .ab-subnav__home-ext,
    .ab-subnav--pill-center .ab-subnav__home-ext,
    .ab-subnav--pill-split .ab-subnav__home-ext { display: none !important; }
  }
  .ab-subnav--pill.ab-subnav--hidden .ab-subnav__home-ext,
  .ab-subnav--pill-center.ab-subnav--hidden .ab-subnav__home-ext,
  .ab-subnav--pill-split.ab-subnav--hidden .ab-subnav__home-ext {
    opacity: 0 !important; transform: scale(0.85) !important; transition: none;
  }
  @media (hover:hover) and (pointer:fine){ /* R293 */
  .ab-subnav__home-ext:hover { transform: translateY(-1px) scale(1); } }
  /* R336: on the homepage the subnav's brand satellite is navy/white — the active page marker
     (user spec; matches the pill nav's logo). !important beats the glass fill overrides. */
  .ab-subnav__home-ext.is-here{ background:#2A3550 !important; color:#EAF0FF !important; }
  .ab-subnav__home-ext:active { transform: translateY(0) scale(1); }
  .ab-subnav__home-ext:focus-visible {
    outline: 2px solid var(--absn-active, #1E47CE);
    outline-offset: 2px;
  }
  /* House glyph: stroke-only, never let an inherited rule fill it. */
  .ab-subnav__home-ext svg {
    width: 18px; height: 18px; display: block;
    fill: none !important; stroke: currentColor;
  }
  .ab-subnav__home-ext svg path { fill: none !important; stroke: currentColor; }
  /* Merchant logo image: contained + padded a few px + centered inside the circle. */
  .ab-subnav__home-ext img {
    width: 100%; height: 100%; display: block;
    padding: 6px; box-sizing: border-box;
    object-fit: contain; object-position: center;
    border-radius: inherit;
  }
  /* Under glass: the circle drops its solid disc + flat border/shadow for the frosted-white
     ::before (matching the pill body + back-to-top circle): transparent button + rim/shine. */
  .ab-subnav--glass .ab-subnav__home-ext {
    position: relative;
    isolation: isolate;
    background: transparent;
    border-color: rgba(255,255,255, var(--abhdr-v15));
    color: #2A3550;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255, var(--abhdr-v15)),
      inset 0 1px 0 0 rgba(255,255,255, 0.55),
      0 8px var(--abhdr-v9) rgba(42,53,80,var(--abhdr-v10));
  }
  .ab-subnav--glass .ab-subnav__home-ext::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    -webkit-backdrop-filter: blur(var(--abhdr-v11)) saturate(var(--abhdr-v12)) brightness(1.06);
    backdrop-filter: blur(var(--abhdr-v11)) saturate(var(--abhdr-v12)) brightness(1.06);
    /* same single-mix ATC glass as the pill body (no white pre-mix) */
    background: color-mix(in srgb, var(--abhdr-v13) var(--abhdr-v14), transparent);
  }
  .ab-subnav--glass .ab-subnav__home-ext svg,
  .ab-subnav--glass .ab-subnav__home-ext img { position: relative; z-index: 1; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ab-subnav--glass .ab-subnav__home-ext::before { background: color-mix(in srgb, var(--abhdr-v13) 45%, #ffffff); }
  }
  /* R368: reduced-transparency override removed (see the note beside the body rule above). */

  /* ═══════════════════════════════════════════════════════════
     Mobile
     ═══════════════════════════════════════════════════════════ */
  @media (max-width: 749px) {
    .ab-subnav__body {
      padding: 0 var(--absn-m-pad, 10px);
    }
    .ab-subnav__link { font-size: 11px; padding: 4px 7px; }
    .ab-subnav__cta:not(.ab-subnav__cta--split) { font-size: 11px; padding: 5px 12px; }
    .ab-subnav__cta--split { font-size: 11px; padding: 0 12px; }
    .ab-subnav__cart-btn { padding: 0; height: calc(var(--absn-h, 44px) - 4px); width: calc(var(--absn-h, 44px) - 4px); }
    /* Split cart = full pill height, matching the Shop CTA + dropdown pill (it was visibly small) */
    .ab-subnav__cart-btn--split { height: var(--absn-h, 44px); width: var(--absn-h, 44px); }
    .ab-subnav__cart-btn-icon { width: 17px; height: 17px; }
    .ab-subnav__cart-badge { min-width: 14px; height: 14px; font-size: 8px; line-height: 14px; top: -3px; right: -1px; }

    /* Back-to-top pulled OUT of the dropdown pill into its own circle on the LEFT, so the
       pill stays a single (dropdown) touch target. Same height as the pill + split cart. */
    .ab-subnav--m-dropdown .ab-subnav__backtop { display: none; }
    .ab-subnav--m-dropdown .ab-subnav__backtop-ext {
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      height: var(--absn-h, 44px); width: var(--absn-h, 44px);
      margin-right: var(--absn-split-gap, 8px); padding: 0;
      border: var(--absn-border-w, 1px) solid var(--absn-border, #EAF0FF);
      background: var(--absn-bg, #EAF0FF);
      color: var(--absn-active, #1E47CE);
      border-radius: 50%; cursor: pointer;
      box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v16));
    }
    .ab-subnav--m-dropdown .ab-subnav__backtop-ext svg { width: 18px; height: 18px; fill: none !important; stroke: currentColor; display: block; }
    .ab-subnav--m-dropdown .ab-subnav__backtop-ext:active { opacity: 0.7; }
    /* Under glass the mobile dropdown circle drops its solid disc + flat border/shadow so the
       frosted-white ::before (defined above) shows through, matching the nav pill. */
    .ab-subnav--glass.ab-subnav--m-dropdown .ab-subnav__backtop-ext {
      background: transparent;
      border-color: rgba(255,255,255, var(--abhdr-v15));
      color: #2A3550;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255, var(--abhdr-v15)),
        inset 0 1px 0 0 rgba(255,255,255, 0.55),
        0 8px var(--abhdr-v9) rgba(42,53,80,var(--abhdr-v10));
    }

    /* Pill morphed margins on mobile */
    .ab-subnav--pill.ab-morphed .ab-subnav__body {
      margin: 0 var(--absn-m-pad, 8px);
    }
    .ab-subnav--pill-center.ab-morphed,
    .ab-subnav--pill-split.ab-morphed {
      padding: 0 var(--absn-m-pad, 8px);
    }

    /* Outer nav: clip horizontal overflow but allow shadow below */
    .ab-subnav { max-width: 100vw; overflow-x: clip; overflow-y: visible; }

    /* ── SCROLL mode: body clips horizontally, scroll area inside ── */
    .ab-subnav--m-scroll .ab-subnav__body {
      overflow-x: hidden;
      overflow-y: visible;
    }
    .ab-subnav--m-scroll .ab-subnav__scroll {
      gap: 0;
      min-width: 0;
      flex: 1 1 0%;
    }

    /* ── DROPDOWN MODE on mobile ── */
    .ab-subnav--m-dropdown .ab-subnav__body {
      position: relative;
      /* Keep the CLOSED pill clipped horizontally so a long label's chevron can never escape
         the floating header. NOTE (was the launch bug): a mismatched `overflow-x:clip;
         overflow-y:visible` pair is illegal per the CSS Overflow spec — when one axis is
         `clip` and the other `visible`, the browser FORCES the visible axis to compute to
         `auto`. That turned this `position:relative` body into a clipping context on the Y
         axis too, so the absolutely-positioned dropdown panel (top:100%, below the pill) was
         clipped to zero height. The toggle JS fired and added `.ab-dd-open`/`.ab-dropdown-open`
         fine, but the list was invisible — tapping showed nothing. We now keep BOTH axes
         clipped while closed (so the chevron stays inside) and restore `overflow:visible` only
         when open (rule below) so the panel can drop down. */
      overflow: clip;
      min-width: 0;
      padding: 0 var(--absn-dd-pad, 12px);
    }
    /* OPEN state: let the dropdown panel (position:absolute, top:100%) escape the pill
       downward. This is the fix for the dead mobile dropdown — without it the body's clip
       hides the section-links list entirely. */
    .ab-subnav--m-dropdown .ab-subnav__body.ab-dd-open {
      overflow: visible;
    }
    /* Floating (morphed) pill uses (near) full viewport width on mobile so the dropdown
       label has real room and never truncates to a couple of letters — the up / shop / cart
       buttons get pushed out to the edges. Overrides the content-fit --absn-body-fit cap. */
    .ab-subnav--m-dropdown.ab-morphed .ab-subnav__body {
      max-width: calc(100vw - 14px) !important;
      flex: 1 1 auto !important;
    }
    /* Configurable shadow on closed dropdown pill */
    .ab-subnav.ab-subnav--m-dropdown .ab-subnav__body:not(.ab-dd-open) {
      box-shadow: 0 2px var(--abhdr-v1) rgba(0,0,0,var(--abhdr-v16));
    }
    /* Fill mode: body stretches to fill available width */
    .ab-subnav--m-dropdown.ab-subnav--dd-fill .ab-subnav__body {
      flex: 1 !important;
      max-width: none !important;
    }
    .ab-subnav--m-dropdown .ab-subnav__dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px 4px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--absn-active, #1E47CE);
      flex: 1;
      min-width: 0;
    }
    /* Label ALWAYS truncates with an ellipsis so the chevron keeps its space inside the
       pill on long section names (full name still shows in the open dropdown list). It is
       the flex child that yields width, so it needs flex:1 1 auto + min-width:0. */
    .ab-subnav--m-dropdown .ab-subnav__dropdown-label {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    /* (dd-truncate setting is now redundant for the toggle label, kept as a no-op.) */
    .ab-subnav--m-dropdown.ab-subnav--dd-truncate .ab-subnav__dropdown-label {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ab-subnav--m-dropdown .ab-subnav__scroll {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: rgba(255,255,255,.94);
      -webkit-backdrop-filter: blur(18px) saturate(1.7);
      backdrop-filter: blur(18px) saturate(1.7);
      border: 1px solid color-mix(in srgb, #fff 70%, transparent);
      border-top: none;
      border-radius: 0 0 var(--absn-dd-radius, 16px) var(--absn-dd-radius, 16px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,.5);
      padding: 0;
      overflow-x: visible;
      overflow-y: auto;
      max-height: 60vh;
      z-index: 10;
      -webkit-mask-image: none;
      mask-image: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
      pointer-events: none;
    }
    .ab-subnav--m-dropdown.ab-subnav--bar .ab-subnav__scroll {
      border-radius: 0 0 var(--absn-dd-radius, 16px) var(--absn-dd-radius, 16px);
    }
    .ab-subnav--m-dropdown .ab-subnav__scroll.ab-dropdown-open {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .ab-subnav--m-dropdown .ab-subnav__body.ab-dd-open {
      /* Bottom corners flatten to join with dropdown panel */
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
      border-bottom-color: transparent !important;
      /* Top corners match dropdown radius for unified shape */
      border-top-left-radius: var(--absn-dd-radius, 16px) !important;
      border-top-right-radius: var(--absn-dd-radius, 16px) !important;
      /* Shared shadow wraps the entire open state */
      box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
    }
    /* Let dropdown panel + shadow escape outer nav clip */
    .ab-subnav--m-dropdown.ab-subnav.ab-nav-dd-open,
    .ab-subnav--m-dropdown.ab-subnav:has(.ab-dd-open) {
      overflow: visible !important;
    }
    .ab-subnav--m-dropdown .ab-subnav__link {
      white-space: normal;
      padding: 10px 16px;
      font-size: 13px;
      border-radius: 0;
      border-bottom: 1px solid rgba(42,53,80,.08);
      flex-shrink: unset;
    }
    .ab-subnav--m-dropdown .ab-subnav__link:last-child {
      border-bottom: none;
      border-radius: 0 0 var(--absn-dd-radius, 16px) var(--absn-dd-radius, 16px);
    }
    .ab-subnav--m-dropdown .ab-subnav__link.is-active {
      background: color-mix(in srgb, var(--absn-active, #1E47CE) 8%, transparent);
    }
  }
