:root{
  --bv-ink:#14181D; --bv-muted:#616A76; --bv-accent:#1F6F5C; --bv-accent-ink:#fff;
  --bv-hairline:rgba(20,24,29,.16);
  --bv-g-fill:rgba(255,255,255,.72);
  --bv-blur:26px; --bv-sat:185%;
  /* Pill only, and only where real refraction is available (.bv-refract).
     The lens BENDS the backdrop there instead of merely frosting it, so the
     blur comes down and the veil thins out - blur and opacity both destroy
     the very detail the refraction exists to show. */
  /* ONE glass recipe, shared by the pill and the drop menu. They are the same
     material at two sizes - never two look-alike treatments that can drift
     apart. Anything that changes the glass changes it here, for both.

     The reference sets Tint to #ffffff00 - fully clear. A white veil is what
     makes refraction invisible: it flattens the very detail the lens is
     bending, so this stays a whisper. */
  --bv-glass-fill:rgba(255,255,255,.05);
  --bv-glass-blur:3px; --bv-glass-sat:190%;
  /* Crown and bounce are drawn by the generated specular map, from the real
     surface normal. Repeating them as inset highlights only muddies the rim. */
  --bv-emboss-pill:inset 0 10px 22px -16px rgba(255,255,255,.8),inset 0 -12px 26px -20px rgba(20,24,29,.14);
  --bv-crown:rgba(255,255,255,.92); --bv-bounce:rgba(255,255,255,.42);
  --bv-rim-hi:rgba(255,255,255,1); --bv-rim-cool:rgba(178,206,247,.62);
  --bv-rim-warm:rgba(255,226,201,.58); --bv-rim-lo:rgba(20,24,29,.10);
  --bv-sh-lift:0 1px 2px rgba(20,24,29,.07),0 10px 24px -8px rgba(20,24,29,.16),0 28px 64px -24px rgba(20,24,29,.28);
  --bv-emboss:inset 0 1.5px 0 var(--bv-crown),inset 0 -1.5px 0 var(--bv-bounce),inset 0 12px 26px -14px rgba(255,255,255,.95),inset 0 -14px 30px -20px rgba(20,24,29,.16);
  --bv-bar-w:min(1180px,calc(100vw - 32px));
  --bv-pill-w:170px;
  /* 41px is the real bar height in both states. It used to live only as
     _heightMax on the Bricks element (#brxe-bvhdr0{max-height:41px}), which
     silently clamped the 66px/52px these tokens used to claim - so the tokens
     read like the source of truth while changing nothing. The Bricks setting
     is gone and these now govern. */
  --bv-bar-h:41px; --bv-pill-h:41px; --bv-bar-r:22px;
  --bv-top-rest:18px; --bv-top-pill:14px;
  --bv-offset:74px;            /* fallback; bv-glass-header.js measures the real one */
  --bv-brand-x:48px;           /* hamburger (38) + lockup gap (10) */
  --bv-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --bv-ease:cubic-bezier(.22,1,.36,1);
  --bv-ease-out:cubic-bezier(.2,.72,.3,1);
  --bv-dur:.66s;
  --bv-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- shell ---------- */
.bv-hdr{
  position:fixed; top:var(--bv-top-rest); left:50%; z-index:1000;
  width:var(--bv-bar-w); height:var(--bv-bar-h);
  border-radius:var(--bv-bar-r); transform:translateX(-50%);
  background:transparent; box-shadow:none;
  /* Deliberately NO backdrop-filter here. Any non-none backdrop-filter on an
     ancestor creates a backdrop root, and the drop menu nested inside would
     then blur the header instead of the page. The blur lives on the lens. */
  transition:width var(--bv-dur) var(--bv-ease),height var(--bv-dur) var(--bv-ease),
             border-radius var(--bv-dur) var(--bv-ease),top var(--bv-dur) var(--bv-ease),
             background .5s ease,box-shadow var(--bv-dur) var(--bv-ease);
}
/* ==========================================================================
   .bv-glass - REUSABLE LIQUID GLASS
   --------------------------------------------------------------------------
   Put the class on any element and the script fits it with glass: it BENDS the
   page behind it, blurs it slightly, and lights its rim.

       <div class="bv-glass"> ... </div>

   Nothing else is needed. The script injects the five layers, measures the box,
   builds the displacement and specular maps at that exact size, and rebuilds
   them whenever the box or the device pixel ratio changes.

   TUNING - all optional, per element or globally:
     --bv-glass-fill    the veil. LOWER = more visible bending.
     --bv-glass-blur    how soft the bent backdrop is
     --bv-glass-sat     saturation; what separates glass from frosted plastic
     --bv-glass-w / -h  override the glass size (defaults to the element box)

   TWO REQUIREMENTS. Break either and the glass silently goes flat while every
   computed style still reads perfectly correct:

     1. The host must NOT create a Backdrop Root, or the layers inside have no
        page left to sample. No filter, no backdrop-filter, no opacity below 1,
        no mask, no contain:paint, and no will-change naming any of those.
        A plain transform is fine. will-change is forced off below because it
        is the one that keeps coming back.

     2. Only ONE element may filter the backdrop, which is why the blur and the
        displacement travel together on __refract. Never add a second
        backdrop-filter layer: siblings do not compound, the upper one just
        overwrites the lower one and its blur is thrown away.

   Full reasoning in LIQUID-GLASS.md.
   ========================================================================== */
.bv-glass{
  position:relative;
  background:var(--bv-glass-fill);
  box-shadow:var(--bv-sh-lift),var(--bv-emboss-pill);
  will-change:auto !important;              /* requirement 1 */
}

/* The five layers. Centred rather than inset:0, so --bv-glass-w/-h can size the
   glass independently of its host - the header needs exactly that, because the
   resting bar is 1180px wide while its glass is a 180px pill. */
.bv-glass > .bv-glass__lens,
.bv-glass > .bv-glass__refract,
.bv-glass > .bv-glass__spec,
.bv-glass > .bv-glass__sheen,
.bv-glass > .bv-glass__rim{
  position:absolute;top:50%;left:50%;
  width:var(--bv-glass-w,100%);height:var(--bv-glass-h,100%);
  transform:translate(-50%,-50%);
  border-radius:inherit;pointer-events:none;
}
/* Anything that is not a glass layer is content, and sits above all of them. */
.bv-glass > :not([class^="bv-glass__"]){position:relative;z-index:6}

/* 1. lens - gradient and grain only. Carries NO blur; see requirement 2. */
.bv-glass__lens{
  z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 26%,rgba(255,255,255,0) 62%,rgba(255,255,255,.10) 100%),var(--bv-noise);
  background-size:auto,160px 160px;
}
/* 2. refract - THE GLASS. The script writes the real filter here:
      backdrop-filter: blur() saturate() url(#generated-map) */
.bv-glass__refract{z-index:2}
/* 3. spec - Fresnel edge and the two glare lobes, generated with the map. */
.bv-glass__spec{z-index:3;background-size:100% 100%;background-repeat:no-repeat}
/* 4. sheen - travelling highlight. */
.bv-glass__sheen{z-index:4;overflow:hidden}
.bv-glass__sheen::after{
  content:"";position:absolute;inset:-40% -10%;
  background:linear-gradient(104deg,transparent 44%,rgba(255,255,255,.30) 49%,rgba(255,255,255,.72) 50.5%,rgba(255,255,255,.30) 52%,transparent 57%);
  transform:translateX(-120%);
  animation:bvSweep 7.5s cubic-bezier(.42,0,.18,1) 1.4s infinite;
}
@keyframes bvSweep{0%{transform:translateX(-120%)}34%,100%{transform:translateX(120%)}}
/* 5. rim - chromatic hairline, cool on one side and warm on the other. This is
      where the dispersion lives now the filter does a single pass. */
.bv-glass__rim{
  z-index:5;padding:1.25px;
  background:linear-gradient(147deg,var(--bv-rim-hi) 0%,var(--bv-rim-cool) 22%,var(--bv-rim-lo) 40%,transparent 52%,var(--bv-rim-lo) 64%,var(--bv-rim-warm) 84%,var(--bv-rim-hi) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}

/* Where url() displacement is unavailable (Safari, Firefox) there is no bending
   at all, so the glass falls back to an honest heavy frost. A thin veil without
   the bend just reads as a washed-out version of the old design. */
.bv-glass:not(.bv-glass--refracting){
  background:var(--bv-g-fill);
  box-shadow:var(--bv-sh-lift),var(--bv-emboss);
}
.bv-glass:not(.bv-glass--refracting) .bv-glass__lens{
  -webkit-backdrop-filter:blur(var(--bv-blur)) saturate(var(--bv-sat));
          backdrop-filter:blur(var(--bv-blur)) saturate(var(--bv-sat));
}

/* ==========================================================================
   HEADER PILL - the one host whose glass is not its own box
   The bar morphs from 1180px to a pill, so its layers are pinned to the pill
   size and fade in late, once the bar has all but finished contracting.
   Direct-child selectors here, never inherited custom properties - the drop
   menu is a descendant and would otherwise inherit the pill dimensions.
   ========================================================================== */
/* .bv-glass sets position:relative so the layers have something to anchor to.
   That is only a DEFAULT for hosts that are static - any host with its own
   positioning must restate it after the component, as the bar does here.
   (Missed once: the header silently became position:relative, fell into the
   flow and scrolled away with the page.) */
.bv-hdr{position:fixed}

.bv-hdr > .bv-glass__lens,
.bv-hdr > .bv-glass__refract,
.bv-hdr > .bv-glass__spec,
.bv-hdr > .bv-glass__sheen,
.bv-hdr > .bv-glass__rim{
  width:var(--bv-pill-w);height:var(--bv-pill-hr,var(--bv-pill-h));
  border-radius:999px;opacity:0;
}
.bv-hdr > .bv-glass__lens{transition:opacity .5s ease .04s}
.bv-hdr > .bv-glass__sheen{transition:opacity .5s ease .2s}
.bv-hdr > .bv-glass__rim{transition:opacity .46s ease .14s}
.bv-hdr > .bv-glass__refract,
.bv-hdr > .bv-glass__spec{transition:opacity .26s ease}
.bv-hdr.is-pill > .bv-glass__lens,
.bv-hdr.is-pill > .bv-glass__refract,
.bv-hdr.is-pill > .bv-glass__spec,
.bv-hdr.is-pill > .bv-glass__sheen,
.bv-hdr.is-pill > .bv-glass__rim{opacity:1}
.bv-hdr.is-pill > .bv-glass__refract,
.bv-hdr.is-pill > .bv-glass__spec{transition:opacity .3s ease .3s}
/* The sweep only runs while collapsed. */
.bv-hdr:not(.is-pill) .bv-glass__sheen::after{animation:none}

.bv-hdr.is-pill{
  width:var(--bv-pill-w);height:var(--bv-pill-h);border-radius:999px;top:var(--bv-top-pill);
}
/* REST = no chrome at all: no fill, no rim, no shadow. */
.bv-hdr:not(.is-pill){background:transparent;box-shadow:none}

.bv-hdr.bv-measure{width:max-content}
.bv-hdr.bv-measure,.bv-hdr.bv-measure *{transition:none !important}
/* Transitions off WITHOUT changing geometry, unlike .bv-measure above. It
   brackets the whole measure routine and is held one frame past the restore,
   so putting .bv-measure's max-content width back can never animate. */
.bv-hdr.bv-frozen,.bv-hdr.bv-frozen *{transition:none !important}
/* ---------- inner grid ---------- */
/* Bricks .brxe-block is a flex COLUMN whose items do not stretch, so the inner
   bar collapses to content width unless both of these are forced. */
.bv-hdr{display:block}
.bv-hdr__inner{width:100%;
  position:relative;z-index:6;height:100%;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0 14px;
  transition:padding var(--bv-dur) var(--bv-ease),gap var(--bv-dur) var(--bv-ease);
}
.bv-hdr.is-pill .bv-hdr__inner,.bv-hdr.bv-measure .bv-hdr__inner{grid-template-columns:auto auto auto;gap:6px;padding:0 7px}
/* Comp: hamburger + brand lock up together on the LEFT, actions on the right.
   (.bv-menu lives inside .bv-brand-wrap, so it is not a grid item itself.) */
.bv-brand-wrap{
  grid-column:1;justify-self:start;
  /* Anchor for the out-of-flow wordmark. Without it the wordmark resolves
     against .bv-hdr__inner and lands on top of the hamburger. */
  position:relative;
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;
  width:auto;max-width:max-content;flex:0 0 auto;
}
/* Bricks .brxe-block defaults to flex-direction:column - must be overridden. */
.bv-actions{grid-column:3;justify-self:end;display:flex;flex-direction:row;align-items:center;gap:2px}
/* Bricks sets width:100% on .brxe-block, which defeats justify-self:end. */
.bv-actions{width:auto;max-width:max-content;flex:0 0 auto}
.bv-actions > .brxe-shortcode{display:flex;align-items:center;line-height:0;width:auto;flex:0 0 auto}
.bv-menu{width:auto;flex:0 0 auto}
.bv-hdr__inner > *{min-width:0}
/* The body offset that clears the fixed header is NOT set here on purpose.
   This stylesheet loads on the frontend, and the Bricks builder canvas IS the
   frontend - a global body rule pushed the builder's editing surface down.
   It is added as inline CSS in bv-glass-header.php, skipped in the builder. */
/* Seam divider between the menu and the actions: removed on request. */
.bv-actions::before{content:none !important;display:none !important}

/* ---------- logo ----------
   The wordmark used to collapse from 200px to 0 with max-width, which relaid
   out the whole bar on every frame of the morph - hamburger, mark, actions and
   cart badge all shifting together. It is now taken OUT OF FLOW and simply
   cross-fades with the mark, so the only width left animating in the header is
   the mark's own 28px. */
.bv-brand{
  position:absolute;left:var(--bv-brand-x);top:50%;
  transform:translateY(-50%);
  /* Out of flow it shrink-wraps, and the logo image inside carries
     max-width:100% - a cyclic width the engine resolves to zero. max-content
     makes it definite again. */
  width:max-content;max-width:none;
  transition:opacity .26s ease,transform var(--bv-dur) var(--bv-ease);
}
.bv-brand img{height:34px;width:auto;display:block;object-fit:contain}
.bv-hdr.is-pill .bv-brand,.bv-hdr.bv-measure .bv-brand{
  opacity:0;transform:translateY(-50%) translateY(-7px) scale(.92);pointer-events:none;
}

/* ---------- compact mark ----------
   The wordmark is too wide for the pill, so the square mark takes over there
   and the brand stays present instead of disappearing. */
/* The mark keeps its slot in BOTH states and only cross-fades with the
   wordmark, which is out of flow above it. With this, nothing in the header
   changes width during the morph - the bar's own width is the only animated
   geometry left, and layout shift drops to ~0. */
.bv-mark{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 28px;width:28px;
  opacity:0;transform:scale(.7);
  transition:opacity .3s ease,transform var(--bv-dur) var(--bv-ease);
}
.bv-mark img{height:28px;width:28px;display:block;object-fit:contain}
.bv-hdr.is-pill .bv-mark,.bv-hdr.bv-measure .bv-mark{
  opacity:1;transform:none;
}

/* ---------- icon buttons (shared by wishlist + FluentCart mini cart) ---------- */
.bv-ico,.bv-hdr .fct-mini-cart-button,.bv-hdr .bricks-mobile-menu-toggle{
  position:relative;width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:12px;background:transparent;
  color:var(--bv-ink);cursor:pointer;padding:0;
  transition:background .24s ease,border-color .24s ease,box-shadow .24s ease,transform .3s var(--bv-ease-out);
  -webkit-tap-highlight-color:transparent;
}
.bv-ico:hover,.bv-hdr .fct-mini-cart-button:hover,.bv-hdr .bricks-mobile-menu-toggle:hover{
  background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(255,255,255,.5),0 2px 6px -2px rgba(20,24,29,.18);
}
.bv-ico:active,.bv-hdr .fct-mini-cart-button:active{transform:scale(.92)}
.bv-ico svg{width:19px;height:19px;display:block}
.bv-hdr.is-pill .bv-ico,.bv-hdr.is-pill .fct-mini-cart-button,.bv-hdr.is-pill .bricks-mobile-menu-toggle{border-radius:999px}
.bv-hdr :focus-visible{outline:2px solid var(--bv-accent);outline-offset:3px;border-radius:4px}

/* FluentCart mini cart: keep its AJAX behaviour, swap to our icon + hide price in pill */
.bv-hdr .fct-mini-cart-button > .fct-mini-cart-wrap svg{display:none}
.bv-hdr .fct-mini-cart-wrap{display:inline-flex;align-items:center;justify-content:center}
.bv-hdr .fct-mini-cart-wrap::after{
  content:"";width:19px;height:19px;display:block;background:currentColor;
  -webkit-mask:var(--bv-cart-icon) center/contain no-repeat;
          mask:var(--bv-cart-icon) center/contain no-repeat;
}
/* The cart says HOW MANY, not how much. The running total duplicated the
   offer card, and because it changed width on every cart update it dragged the
   whole bar with it during the morph. FluentCart already renders a count in
   .fct-mini-cart-badge, so only that is kept.
   (Their own rules out-specify a single class, hence the button scope.) */
.bv-hdr .fct-mini-cart-button .fct-mini-cart-amount{display:none !important}
.bv-hdr .fct-mini-cart-button{width:38px;min-width:38px;padding:0}
.bv-hdr .fct-mini-cart-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.bv-hdr .fct-mini-cart-button .fct-mini-cart-badge{
  position:absolute !important;
  left:auto !important;right:-6px;top:-5px;bottom:auto;
  transform:none !important;
  /* FluentCart ships a fixed-width circle; let it grow for a 2-digit count. */
  width:auto;min-width:17px;height:17px;padding:0 5px;box-sizing:border-box;
  border-radius:999px;
  background:var(--bv-gold,#FEBE10) !important;color:var(--bv-ink) !important;
  font-family:var(--bv-mono);font-size:10px;font-weight:700;line-height:1;
  letter-spacing:0;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 2px rgba(255,255,255,.92);
}
/* Empty cart: bv-glass-header.js sets this from the badge's own value. */
.bv-hdr .fct-mini-cart-button[data-bv-cart-empty] .fct-mini-cart-badge{display:none !important}

/* ---------- Bricks nav menu -> glass sheet ---------- */
.bv-hdr .brxe-nav-menu{display:flex;align-items:center}
.bv-hdr .bricks-nav-menu-wrapper{display:none !important}
/* Hamburger: Bricks absolutely positions its bars for its OWN default toggle
   size (left:16px; top:0/7/14), which sits off-centre inside our 38x38 button.
   Re-centre them.

   All three now share ONE top value - the button's centre line - and the whole
   hamburger/close morph runs on transform alone. The previous version animated
   `top`, which relayouts the button on every frame of the morph; that is what
   made the icon stutter. Transform-only is composited, so it stays smooth on
   a phone. */
.bv-hdr .bricks-mobile-menu-toggle{position:relative}
/* Centred with percentages, NOT fixed pixels. The bars are absolutely
   positioned against the button's PADDING box, which sits 1px inside its
   transparent border - so the old `top:18px;left:9px` already landed 0.8px low
   and 1px right on the 38px desktop button, and the 36px mobile button kept
   the same pixel values while shrinking, putting it 1.8px low and 2px right.
   50% + a -50% self-offset is exact at any button size. */
.bv-hdr .bricks-mobile-menu-toggle .bar-top,
.bv-hdr .bricks-mobile-menu-toggle .bar-center,
.bv-hdr .bricks-mobile-menu-toggle .bar-bottom{
  background-color:var(--bv-ink);height:1.6px;border-radius:2px;
  width:20px !important;
  top:50% !important; left:50% !important;
  right:auto !important; bottom:auto !important; margin:0 !important;
  transform-origin:50% 50%;
  transition:transform .3s var(--bv-ease-out),opacity .15s linear !important;
}
.bv-hdr .bricks-mobile-menu-toggle .bar-top{transform:translate(-50%,-50%) translateY(-6.5px) !important}
.bv-hdr .bricks-mobile-menu-toggle .bar-center{transform:translate(-50%,-50%) !important}
.bv-hdr .bricks-mobile-menu-toggle .bar-bottom{transform:translate(-50%,-50%) translateY(6.5px) !important}

/* Open state = a true close (X). Bricks only rotates its bars, it never brings
   them together, so at our spacing they formed a chevron. Both outer bars
   travel back to the centre line and cross; the middle one collapses. */
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-top{
  transform:translate(-50%,-50%) rotate(45deg) !important;
}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-center{
  opacity:0 !important;transform:translate(-50%,-50%) scaleX(.15) !important;
}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom{
  transform:translate(-50%,-50%) rotate(-45deg) !important;
}
/* Keep the toggle in the bar when open; Bricks otherwise repositions it. */
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-toggle{
  position:relative !important;top:auto !important;left:auto !important;right:auto !important;
}

/* Bricks paints its dark default on ::before (inset:0), which sits over our
   glass. Clear it, or the panel renders solid #23282D. */
.bv-hdr .bricks-mobile-menu-wrapper::before{background:transparent !important}

/* Drop menu: Bricks ships a full-height fixed drawer (inset:0 542px 0 0, 300x923).
   Re-anchor it under the hamburger and let it size to its content. */
.bv-menu{position:relative}
.bv-hdr .bricks-mobile-menu-wrapper{
  position:absolute !important;
  inset:auto !important;
  top:calc(100% + 14px) !important;
  left:0 !important; right:auto !important; bottom:auto !important;
  width:max-content !important;
  min-width:200px;
  max-width:min(320px,calc(100vw - 28px));
  height:auto !important; max-height:calc(100vh - 140px);
  overflow-y:auto;
  padding:10px !important;
  color:var(--bv-ink) !important;
  border-radius:20px;
  /* Fill, shadow and every glass layer come from .bv-glass, which the script
     adds to this wrapper - the menu is the SAME material as the header pill,
     not a look-alike. Nothing glass-related belongs in this rule.

     In particular: no backdrop-filter and no will-change. Either would make
     this wrapper a Backdrop Root and the glass inside it would have no page
     left to sample - which is exactly how the panel ended up showing neither
     blur nor bend while reporting perfectly healthy computed styles. */
  /* The panel carries a backdrop blur, so animating ITS transform makes the
     browser re-sample and re-blur the page behind it on every frame - that is
     what made opening and closing stutter on phones. Hold it still and fade it
     instead; the movement lives on the list items inside, where nothing has to
     be re-sampled. */
  transform:none !important;
  transition:opacity .22s var(--bv-ease-out),visibility 0s linear .22s !important;
}
.bv-hdr .bricks-mobile-menu{
  width:100%;display:flex;flex-direction:column;gap:2px;align-items:stretch;
  padding:0 !important;margin:0 !important;
}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper{
  transition:opacity .22s var(--bv-ease-out),visibility 0s !important;
  /* NO will-change here. It creates a Backdrop Root, and it was being applied
     precisely when the menu opens - so the glass layers inside had no page
     left to sample and the panel showed neither blur nor bend, while every
     computed style still read correctly. See LIQUID-GLASS.md 5.1. */
}
.bv-hdr .bricks-mobile-menu > li{width:100%}

/* Staggered item reveal, as in the original design. Re-runs on every open
   because the items only match once the ancestor gains .show-mobile-menu. */
.bv-hdr .bricks-mobile-menu > li{opacity:0;transform:translateY(8px)}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li{
  animation:bvRise .45s var(--bv-ease) forwards;
}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(1){animation-delay:.04s}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(2){animation-delay:.09s}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(3){animation-delay:.14s}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(4){animation-delay:.19s}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(5){animation-delay:.24s}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(6){animation-delay:.29s}
@keyframes bvRise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bv-hdr .bricks-mobile-menu > li{opacity:1;transform:none}
  .bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu > li{animation:none}
}
.bv-hdr .bricks-mobile-menu > li > a{
  display:flex;align-items:center;
  padding:11px 14px !important;
  min-height:0 !important;
  font-size:.9375rem;line-height:1.3;font-weight:500;
  color:var(--bv-ink);border-radius:12px;
  transition:background .2s ease,color .2s ease;
}
/* Bricks' scrim. It is absolutely positioned, so once .bv-menu became a
   positioned ancestor it anchored to the nav element and painted a grey slab
   over the header instead of covering the viewport. This design has no scrim. */
.bv-hdr .bricks-mobile-menu-overlay{display:none !important}

/* Bricks locks the page whenever its mobile menu opens, because its own menu is
   a full-height drawer that owns the viewport. Ours is a small panel anchored
   under the hamburger, with no scrim and nothing to trap - so there is nothing
   to lock the page for, and freezing it just strands the reader mid-article.
   The panel is inside the fixed header, so it travels with it and stays
   anchored while the page scrolls underneath.
   This site has exactly one mobile menu (ours); if another Bricks drawer is
   ever added that genuinely needs the lock, scope this to the header. */
body.no-scroll{overflow:visible !important}

/* Geometry must apply in BOTH states. Scoping it to .show-mobile-menu made the
   panel snap back to Bricks' 300x923 fixed drawer the instant that class was
   removed - the flicker seen while closing. Only visibility is state-dependent,
   and it is transitioned so the panel fades out instead of vanishing. */
.bv-hdr .bricks-mobile-menu-wrapper{
  display:block !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  text-align:left !important;
  visibility:hidden !important;
  opacity:0;
  transform:translateY(-8px) scale(.98);
  transform-origin:top left;
  transition:opacity .2s ease,transform .3s var(--bv-ease),visibility .3s;
}
.bv-hdr .brxe-nav-menu.show-mobile-menu .bricks-mobile-menu-wrapper{
  visibility:visible !important;
  opacity:1;
  transform:none;
}
.bv-hdr .bricks-mobile-menu > li > a:hover{background:rgba(255,255,255,.7);color:var(--bv-accent)}

/* ---------- small screens ----------
   The wordmark measures ~95px, not the 200px max it is allowed, so hamburger
   (36) + mark (26) + wordmark (~80) + actions (~120) fits inside the ~355px a
   375px phone offers. The lockup stays whole; only the boxes tighten. */
@media (max-width:640px){
  :root{--bv-bar-h:41px;--bv-bar-r:18px;--bv-top-rest:12px;--bv-top-pill:10px;--bv-offset:68px;
         --bv-blur:14px;--bv-dur:.46s;
         /* Mobile-only safety net; see the rule below. */
         --bv-glass-blur-mobile:7px}

  /* ---- MOBILE: guaranteed blur underneath the glass -----------------------
     Phones accept url() in a backdrop-filter and then render nothing. There is
     no way to detect that: the support probe can only test whether the CSS
     PARSER accepts url(), never whether the filter actually paints - assigning
     url(#a-filter-that-does-not-exist) sticks just as happily. So the script
     believes displacement works, puts the blur inside that same filter list,
     and the phone renders neither - a flat, sharp panel.

     This puts a slight blur back on the lens, underneath, for small screens
     only. DESKTOP IS DELIBERATELY UNTOUCHED - it renders the displacement
     properly and must keep exactly the look it has.

     Where the displacement DOES render (Chromium on a capable phone) the
     refraction layer covers this completely and does its own blur, so this
     changes nothing there. It only shows up when the bend never paints.

     Both selectors are listed so this wins whether or not the script decided
     the browser was refraction-capable. */
  .bv-glass__lens,
  .bv-glass:not(.bv-glass--refracting) .bv-glass__lens{
    -webkit-backdrop-filter:blur(var(--bv-glass-blur-mobile)) saturate(var(--bv-glass-sat));
            backdrop-filter:blur(var(--bv-glass-blur-mobile)) saturate(var(--bv-glass-sat));
  }
  .bv-hdr{width:calc(100vw - 20px)}
  .bv-hdr__inner{padding:0 9px;gap:4px}
  .bv-hdr.is-pill .bv-hdr__inner{padding:0 6px;gap:4px}
  :root{--bv-brand-x:43px}      /* hamburger (36) + lockup gap (7) */
  .bv-brand-wrap{gap:7px}
  .bv-brand img{height:26px}
  .bv-mark{flex-basis:24px;width:24px}
  .bv-mark img{height:24px;width:24px}
  .bv-ico,.bv-hdr .bricks-mobile-menu-toggle,.bv-hdr .fct-mini-cart-button{width:36px;min-width:36px;height:36px;padding:0}
  .bv-ico svg{width:18px;height:18px}
  .bv-actions{gap:0}
  .bv-hdr .bricks-mobile-menu-wrapper{min-width:184px;max-width:calc(100vw - 40px)}
}

@media (prefers-reduced-motion:reduce){
  .bv-hdr,.bv-hdr *{transition-duration:.01ms !important}
  /* .bv-hdr__sheen is a pre-rename leftover and matched nothing, so the sweep
     kept running for reduced-motion visitors. The layer is .bv-glass__sheen,
     and it is left unscoped so every glass host is covered, not just the bar. */
  .bv-glass__sheen::after{animation:none;opacity:.25}
}