/* =============================================================================
   Bigscreen store — site chrome (ticker + pill nav + footer), ported from the
   marketing site's chrome.css (single design system: one violet signal on a
   black stage, Neue Haas + Fragment Mono, angular bevel shape system).
   Loads AFTER beyond-store.css / beyond-copy.css and overrides their legacy
   header/footer rules. Font-face declarations live in sections/header.liquid
   (they need Liquid asset filters).
   ============================================================================= */

/* ---- Tokens ---- */
:root {
  --brand:      #4D1EF7;
  --brand-deep: #4000FF;
  --ink:        #FCFCFD;
  --paper:      #000000;
  --graphite:   #222425;
  --muted:      #787E81;
  --hairline:   #DFDFDF;
  --off-white:  #F4F3F3;

  /* Muted text on an OFF-WHITE plate.
     The store's one secondary grey (#70777A) clears 4.5:1 on white, which is
     where most of it sits, but only reaches 4.07:1 once the surface underneath
     steps down to #F4F3F3 — so every muted label on a plate (the stage chrome,
     the callout chips, the SteamVR note) was below the floor. The system already
     answers this: Reading Grey is specified "only where the 4.5:1 floor still
     holds". Where it doesn't, this is the substitute — not a second named grey,
     but the ink itself pulled back far enough to read as the same weight the
     grey has on white. Lands at ~4.85:1 on #F4F3F3. */
  --muted-on-plate: rgba(10, 10, 12, .58);

  --font-display: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New - Regular", system-ui, sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, monospace;

  --ease-signature: cubic-bezier(.16, 1, .3, 1);
  --ease-brand:     cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 180ms; --dur: 300ms; --dur-slow: 600ms;

  --desktopMaxWidth: min(1648px, max(75vw, 856px));

  /* Desktop nav plate (mirrors the site twin's chrome.css). --navInset is the
     air above and below the wordmark, derived rather than chosen: a --navMarkH
     mark centred in a --navPlateH plate. The plate then hangs --navOverhang
     outside the content column so that same value works as its side padding —
     the wordmark ends up evenly inset on all three sides AND still sitting on
     the content grid line, because the overhang absorbs the difference. The
     actions frame and the ticker ride the same edge. */
  --navPlateH: 76px;
  --navMarkH: 22px;
  --navInset: calc((var(--navPlateH) - var(--navMarkH)) / 2);   /* 27px */
  --navOverhang: calc(var(--navInset) - 16px);                  /* 11px — 16px is the content gutter */
  --navEdge: max(8px, calc((100% - var(--desktopMaxWidth)) / 2 - var(--navOverhang)));

  /* chrome geometry: floating pill + violet marquee strip directly below it
     (homepage note-bar register, but scrolling) */
  --ticker-h: 38px;
  --pill-top: 18px;
  --pill-h: 76px;
  --headerBtnHeight: 42px;
}

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* =============================================================================
   0. THEME FONT OVERRIDE — Dawn wires every element (headings, body, buttons,
   apps, cart) to --font-heading-family / --font-body-family, which the theme
   settings point at Assistant. Redefining the variables here (this sheet loads
   after theme.liquid's :root block) converts the ENTIRE theme to Neue Haas in
   one place — container-level overrides lose to Dawn's direct element rules.
   Weights pinned to 400/500: the system never uses bold.
   ============================================================================= */
:root {
  --font-body-family: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New", sans-serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-weight-bold: 500;
  --font-heading-family: "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display Pro - 55 Roman", "Zen Kaku Gothic New", sans-serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
}

/* =============================================================================
   1. TICKER — the ship-schedule marquee as the homepage's violet note bar:
   full-width violet strip directly under the pill, white mono, still scrolling.
   Hides on scroll down, returns on scroll up (bs-ticker--hidden, see header.liquid).
   ============================================================================= */
/* The homepage #bs-announce recipe: violet bar tucked UNDER the pill (lower z,
   top overlaps behind the nav so it reads as one unit), matched to the pill's
   contained width, right edge inset 18px with a full-height bevel cut that
   continues the nav's angled corner. Slides up behind the nav to hide. */
.bs-ticker {
  position: fixed; z-index: 70;
  top: 90px;
  left: var(--navEdge);
  right: calc(var(--navEdge) + 18px);
  height: 38px;
  background: var(--brand);
  /* top-right MUST stay 0: the bottom-right bevel is full-height (38px = the
     bar height), so any radius on the top-right fights it, the browser scales
     both down, and the diagonal drops off the pill's angle line — it "sticks
     out". The sharp top-right point is tucked behind the pill anyway. */
  border-radius: 3px 0 38px 3px;
  corner-shape: round round bevel round;
  display: flex; align-items: center; overflow: hidden;
  /* the chrome unit's lift lives on the marquee's bottom edge, not the pill:
     a downward pill shadow would fall straight onto this violet bar and dim it */
  box-shadow: 0 16px 34px -12px rgba(0,0,0,0.55);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.bs-ticker--hidden { transform: translateY(-100%); pointer-events: none; }
@media (max-width: 991.98px) {
  .bs-ticker {
    top: 60px; left: 10px; right: 24px; height: 34px;
    border-radius: 3px 0 34px 3px;
    corner-shape: round round bevel round;
  }
  .bs-ticker .mv2-content > span { font-size: 11px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) { .bs-ticker { transition: none; } }
/* neutralize the legacy absolute placement */
.bs-ticker .marqueev2 {
  position: static; top: auto; height: 100%;
  background: transparent;
}
/* the tape is JS-driven (scroll pull + cruise) — kill the legacy CSS loop and
   its space-around/min-width spread; the tape owns its density */
.bs-ticker .mv2-scroll { animation: none; }
.bs-ticker .mv2-content {
  display: flex; align-items: center;
  min-width: 0; flex: 0 0 auto;
  justify-content: flex-start;
  column-gap: 48px;
}
.bs-ticker-track {
  display: flex; align-items: center;
  column-gap: 48px;
  height: 100%;
  padding-left: 24px;
  will-change: transform;
}
@media (max-width: 991.98px) {
  .bs-ticker .mv2-content { column-gap: 24px; }
  .bs-ticker-track { column-gap: 24px; padding-left: 16px; }
}
/* reduced motion: static tape, first copy only */
@media (prefers-reduced-motion: reduce) {
  .bs-ticker .mv2-content { min-width: 0; justify-content: flex-start; padding-left: 16px; }
  .bs-ticker .mv2-content + .mv2-content { display: none; }
}
.bs-ticker .mv2-content > span {
  color: #FCFCFD;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .bs-ticker .mv2-scroll { animation: none; }
  .bs-ticker .mv2-content { min-width: 0; justify-content: flex-start; padding-left: 16px; }
  .bs-ticker .mv2-content + .mv2-content { display: none; }
}

/* =============================================================================
   2. FLOATING PILL NAV (ported from chrome.css, offset below the ticker)
   ============================================================================= */
/* the legacy font-detail wrappers push weight 500 onto everything inside the
   chrome; Fragment Mono has no 500 cut so browsers synthesize a faux bold.
   The chrome is Regular everywhere — flatten it. */
.header-nav-frame, .header-nav-frame *,
.header-btn-frame, .header-btn-frame *,
#mnav-overlay, #mnav-overlay *,
.bs-ticker, .bs-ticker * { font-weight: 400; }
/* same rule for third-party and legacy surfaces: the system has no bold */
[class*="yotpo"], [class*="yotpo"] *,
.disclaimer-frame, .disclaimer-frame *,
.eg-cart-drawer, .eg-cart-drawer * { font-weight: 400 !important; }
.header-nav-background {
  position: fixed; z-index: 100;
  background: #000;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 0;
  height: auto; width: auto;   /* legacy set 100%x96 */
  box-shadow: 0 0 24px 2px rgba(255,255,255,0.08);
  /* angular pill: 3 corners softened, 45-degree bevel bottom-right */
  border-radius: 3px 3px 22px 3px;
  corner-shape: round round bevel round;
}
a.header-logo img { filter: brightness(0) invert(1); }
a.header-link {
  color: rgba(255, 255, 255, 0.62);
  transition: color 180ms var(--ease-brand);
  text-decoration: none;
}
a.header-link:hover { color: #fff; }
a.header-link span { color: inherit; }

/* Desktop: contained pill — logo left, links centered, actions right */
@media (min-width: 992px) {
  .header-nav-background {
    top: var(--pill-top);
    /* The SAME inset formula as .header-nav-frame and .bs-ticker — never
       left:50% + translateX(-50%). The two are mathematically identical, but
       they round differently: a transform-centred box and an inset-positioned
       box snap to different device pixels whenever
       (100% - --desktopMaxWidth)/2 lands on a fraction. That put the ticker a
       device pixel left of the pill — the sliver "sticking out on the left",
       reported in Brave at 90% zoom (zoom just changes the effective viewport
       width to one of the fractional cases; it also reproduces at 100% at
       e.g. 1443px). One formula for all three edges means they cannot
       disagree. Width follows from the insets: it resolves to
       --desktopMaxWidth, and to 100%-32px once the viewport is narrower than
       that, which is what the old max-width clamp did. */
    left: var(--navEdge);
    right: var(--navEdge);
    width: auto;
    max-width: none;
    height: var(--navPlateH);
  }
  .header-nav-frame {
    position: fixed;
    top: var(--pill-top);
    left: var(--navEdge);
    right: var(--navEdge);
    width: auto; max-width: none;
    height: var(--navPlateH); margin: 0; z-index: 100;
  }
  nav.header-nav {
    position: relative;
    display: flex; align-items: center;
    height: var(--navPlateH); width: 100%;
    padding: 0 var(--navInset);
    background: transparent;
    color: #fff;
    gap: 0; grid: none;
  }
  a.header-logo, a.header-logo img { height: var(--navMarkH); width: auto; margin: 0; }
  a.header-logo { display: flex; align-items: center; }
  /* The actions (account / cart) ride in their own fixed frame
     stacked over this one, so nothing in the nav reserves room for them and
     this centred row simply grew until it slid under the cart button — English
     did it from ~1140px down, where the pill stops tracking the viewport and
     sits at its 856px floor. Two guards: the gap tracks the pill instead of
     staying at 28px, and the fit guard in header.liquid measures the row and
     folds it into the hamburger when it still cannot clear the actions (the
     only honest answer across ~40 locales, whose labels are wider than these). */
  .header-links {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px);
    white-space: nowrap;
  }
  a.header-link {
    font-family: var(--font-mono);
    font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em;
    width: fit-content; white-space: nowrap;
  }
  .header-btn-frame {
    position: fixed;
    top: var(--pill-top);
    left: auto;
    right: var(--navEdge);
    width: auto; max-width: none;
    height: var(--navPlateH) !important;   /* legacy sizes the frame 96 + marquee 56 */
    margin: 0;
    padding: 0 var(--navInset) 0 0;
    display: flex; align-items: center; justify-content: end;
    z-index: 100; color: #fff;
    background: transparent;
  }
  .header-btn-frame > div { display: flex; justify-content: end; align-items: center; height: auto !important; }
  /* legacy pseudo-spacer that pushed content below the old marquee — kill it */
  .header-btn-frame > div::after { display: none; }
  html:not(.nav-compact) .nav-btn { display: none !important; }

  /* Compact desktop: the pill keeps its full geometry — logo, cart —
     and only the link row folds into the same hamburger + overlay the phone
     uses. Set by the fit guard in header.liquid, never by a breakpoint: what
     runs out is the room between the logo and the actions, which depends on
     how wide the translated labels are, not on the viewport alone. */
  html.nav-compact .header-links { display: none !important; }
  html.nav-compact .header-nav .nav-btn {
    display: flex !important;
    position: absolute; right: 16px; top: 50%;
    width: 40px; height: 40px; margin-top: -20px;
    align-items: center; justify-content: center;
    color: #FCFCFD; cursor: pointer; background: none; border: 0;
  }
  /* room for that button at the pill's right edge */
  html.nav-compact .header-btn-frame { padding-right: 70px; }
}

/* Small desktop (992–1200px): the pill is pinned at its 856px floor here — the
   viewport grows but the nav doesn't — while the row still carries six labels
   and the actions still hold the right side (~130px, since the cart pill
   replaced cart + order now). A centred row can only be
   as wide as twice its narrower margin, so this is where it ran out. It buys the
   room with a step of type rather than by folding into the hamburger; the fit
   guard is still behind it for the markets whose labels are longer than these. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  a.header-link { font-size: 13px; }
}

/* The chrome is fully fixed (ticker + pill contribute no flow height), so give
   the document the offset the old sticky header used to provide. */
body { padding-top: calc(var(--ticker-h) + 112px) !important; }   /* ticker + 18 gap + 76 pill + 18 clearance */
@media (max-width: 991.98px) { body { padding-top: calc(var(--ticker-h) + 74px) !important; } }  /* ticker + 10 + 54 + 10 */

/* ---- Pre-footer circuit band ----------------------------------------------
   Ported from the marketing site's shared prefooter (src/site/pages/press.html
   and 14 others). An absolutely pinned line-art layer at the bottom of main,
   running up BEHIND the last section and settling into the footer plate; a
   brighter second layer wakes in a soft circle trailing the cursor.

   Absolute, never in flow — the band is ~500px tall and must add zero page
   height, exactly as on the site. That means the sections have to be lifted
   above it, hence the z-index:1 rule; without it the art paints over content.
   Asset URLs are bare filenames because Shopify serves every asset from one
   flat directory (same trick as bs-vrchat-bg.webp in bs-product.css). */
main#MainContent { position: relative; }
main#MainContent > .shopify-section { position: relative; z-index: 1; }
/* Lifting the sections is only half of it: Dawn wraps each one in an opaque
   colour-scheme plate, and scheme 1 (the store's white) painted straight over
   the band — 472px of its 576px was hidden. The page body is already white, so
   clearing that fill is visually identical everywhere else and simply lets the
   band show through. Scoped to main so the footer's own plate is untouched. */
main#MainContent .color-background-1 { background-color: transparent; background-image: none; }

@property --bs-cr { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes bsCircuitWake { from { opacity: 0; } 55% { opacity: .18; } to { opacity: .14; } }

.bs-prefooter {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  pointer-events: none;
  height: clamp(380px, 40vw, 580px);
  overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, rgba(244, 243, 243, .5) 26%, var(--off-white) 58%, #E7E7EA 100%);
  --bs-cr: 0px;
  transition: --bs-cr .85s cubic-bezier(.16, 1, .3, 1);
}
.bs-prefooter.is-probing { --bs-cr: 620px; }
/* base line-art: always on, for everyone */
.bs-prefooter::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("bs-circuit-base.svg") center center / cover no-repeat;
  filter: invert(1); opacity: .2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 78%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* wake layer: revealed only inside the cursor circle, intersected with a
   vertical band so it never touches the fade edges */
.bs-prefooter::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("bs-circuit-wake.svg") center center / cover no-repeat;
  filter: invert(1); opacity: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%, #000 62%, transparent 100%), radial-gradient(circle var(--bs-cr) at var(--cx) var(--cy), #000 0%, transparent 78%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 48%, #000 62%, transparent 100%), radial-gradient(circle var(--bs-cr) at var(--cx) var(--cy), #000 0%, transparent 78%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: opacity .6s ease;
}
.bs-prefooter.is-probing::after { opacity: .14; animation: bsCircuitWake 1.05s cubic-bezier(.16, 1, .3, 1) both; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bs-prefooter::after { opacity: 0; }
  .bs-prefooter { transition: none; }
}

/* "Order now" CTA — violet, mono, beveled. No longer in the nav (the cart took
   that slot, see below); still the pill button the legacy Builder snippets
   render, so the rule stays until they are deleted. */
a.header-btn, a.header-btn:link, a.header-btn:visited {
  display: flex; flex-direction: row; justify-content: center; align-items: center;
  height: var(--headerBtnHeight); max-height: var(--headerBtnHeight);
  margin: 0 !important;   /* legacy gives the pill button 28px block margins */
  padding: 0 24px; width: fit-content;
  background: var(--brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 2px 2px 10px 2px;
  corner-shape: round round bevel round;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color 280ms ease, color 280ms ease;
}
a.header-btn:hover { background: var(--brand-deep) !important; color: #fff !important; }

/* Cart — the chrome's one action, in the slot "Order now" used to hold: ghost
   bevel button carrying icon + label + count bubble. It stays a ghost rather
   than inheriting the violet fill, because the cart is the way BACK to a
   decision, not the decision — the violet belongs to the order button on the
   product page, and to the count bubble when there is actually something in
   there. Markup lives in snippets/bs-cart-button.liquid so the cart-JS
   re-renders keep the same look. */
a.bs-cart-btn, a.bs-cart-btn:link, a.bs-cart-btn:visited {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--headerBtnHeight);
  padding: 0 16px;
  color: var(--ink);
  border: 1px solid rgba(252, 252, 253, 0.28);
  border-radius: 2px 2px 10px 2px;
  corner-shape: round round bevel round;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  text-decoration: none;
  transition: border-color var(--dur), color var(--dur);
}
a.bs-cart-btn:hover { border-color: rgba(252, 252, 253, 0.6); color: #fff; }
a.bs-cart-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* mono sits high in its box; nudge the label onto the icon's centre line */
a.bs-cart-btn .bs-cart-label { display: block; margin-top: 1px; }
a.bs-cart-btn .cart-count-bubble {
  /* Dawn pins this bubble with left/bottom (base.css, in rem — so 22px here);
     left beats right when both resolve, which parked the count mid-button the
     moment the button stopped being a 42px square. Clear both. */
  position: absolute; top: -7px; right: -7px; left: auto; bottom: auto;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: 10px; line-height: 16px;
  border-radius: 2px 2px 6px 2px;
  corner-shape: round round bevel round;
}
a.bs-cart-btn .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Language switcher (footer legal bar) ----------------------------------
   Rendered by snippets/bs-lang-select.liquid inside .bs-footer-legal, and only
   where the market publishes more than one language (Japan). Mirrors the
   marketing site's .bs-foot-lang exactly — same position, same weights — so the
   two properties share one convention. The entries are BUTTONS (the switch is a
   POST of locale_code, see the snippet) styled to the legal bar's link
   vocabulary: quiet grey, darker when current, a hairline dividing the pair. */
.bs-foot-lang-form { margin: 0; }
.bs-foot-lang { display: flex; align-items: center; }
.bs-foot-lang button {
  appearance: none; background: none; border: 0;
  padding: 0 10px;
  font: inherit; color: #646A6E;
  cursor: pointer;
  transition: color .18s;
}
.bs-foot-lang button:first-child { padding-left: 0; }
.bs-foot-lang button + button { border-left: 1px solid var(--hairline); }
.bs-foot-lang button:hover { color: #0a0a0c; }
.bs-foot-lang button[aria-current] { color: #0a0a0c; }

/* Account icon — cookie-gated (see header.liquid), desktop only */
a.nav-account { display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-right: 8px; border-radius: 999px;
  color: rgba(255,255,255,0.62); flex: 0 0 auto; text-decoration: none;
  transition: color 180ms var(--ease-brand); }
a.nav-account.is-visible { display: inline-flex; }
a.nav-account:hover { color: #fff; }
a.nav-account svg { display: block; }
@media (max-width: 991.98px) { a.nav-account.is-visible { display: none; } }

/* Hamburger bars — hairlines in currentColor. Painted at every breakpoint
   rather than inside the mobile block, because the compact desktop nav
   (html.nav-compact) shows the same button inside the pill; each breakpoint
   only places it. Inert while the button is display:none. */
.header-nav .nav-btn .nav-btn-inner { display: none !important; }
.header-nav .nav-btn::before,
.header-nav .nav-btn::after {
  content: ""; position: absolute; left: 9px; right: 9px; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
.header-nav .nav-btn::before { top: 14px; box-shadow: 0 6px 0 currentColor; }
.header-nav .nav-btn::after  { top: 26px; }

/* Active nav link (current page) */
@media (min-width: 992px) {
  a.header-link { position: relative; }
  a.header-link.is-active { color: #fff; }
  a.header-link.is-active::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
    background: var(--brand);
  }
}

/* =============================================================================
   3. NAV SUBMENUS — hover/focus dropdowns (desktop only)
   ============================================================================= */
@media (min-width: 992px) {
  .nav-item { position: relative; display: inline-flex; align-items: center; }
  .nav-item .header-link { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }

  .nav-caret {
    width: 0; height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.55;
    transition: transform 180ms ease, opacity 180ms ease;
  }
  .nav-item:hover .nav-caret,
  .nav-item:focus-within .nav-caret { transform: rotate(180deg); opacity: 1; }

  .nav-menu {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%) translateY(6px);
    padding-top: 30px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 170ms ease, transform 170ms ease;
    z-index: 300;
  }
  .nav-item:hover .nav-menu,
  .nav-item:focus-within .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .nav-menu-panel {
    min-width: 268px;
    background: #0b0b0e;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 3px 3px 16px 3px;
    corner-shape: round round bevel round;
    padding: 7px;
    box-shadow: 0 20px 44px rgba(0,0,0,0.5);
  }
  .nav-menu-link {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 13px;
    border-radius: 2px 2px 9px 2px;
    corner-shape: round round bevel round;
    text-decoration: none;
    transition: background-color 150ms ease;
  }
  .nav-menu-link:hover { background: rgba(255,255,255,0.07); }
  .nml-title {
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.04em;
    font-size: 12.5px; color: #fff;
  }
  .nml-sub {
    font-family: var(--font-display);
    font-size: 12px; letter-spacing: 0; text-transform: none;
    color: rgba(255,255,255,0.42);
  }
  .nav-menu-group {
    margin: 6px 13px 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 10px; color: rgba(255,255,255,0.4);
  }
  .nav-menu-link.is-current { position: relative; }
  .nav-menu-link.is-current::after {
    content: "";
    position: absolute; top: 15px; right: 13px;
    width: 6px; height: 6px;
    background: var(--brand); border-radius: 50%;
  }

  /* nested flyout (Resources) */
  .nav-sub { position: relative; }
  .nav-sub-trigger { position: relative; padding-right: 30px; }
  .nav-sub-trigger::after {
    content: "";
    position: absolute; top: 50%; right: 15px;
    width: 6px; height: 6px;
    border-top: 1.5px solid rgba(255,255,255,0.55);
    border-right: 1.5px solid rgba(255,255,255,0.55);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 150ms ease;
  }
  .nav-sub:hover > .nav-sub-trigger,
  .nav-sub:focus-within > .nav-sub-trigger { background: rgba(255,255,255,0.07); }
  .nav-sub:hover > .nav-sub-trigger::after,
  .nav-sub:focus-within > .nav-sub-trigger::after { border-top-color: #fff; border-right-color: #fff; }
  .nav-flyout {
    position: absolute;
    top: -7px; left: 100%;
    padding-left: 10px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateX(6px);
    transition: opacity 170ms ease, transform 170ms ease;
    z-index: 310;
  }
  .nav-sub:hover > .nav-flyout,
  .nav-sub:focus-within > .nav-flyout {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(0);
  }
}

/* ---- Blog "new posts" badge — tiny angular violet chip, top-right ----
   Twin of the marketing chrome.css block; count is computed live in
   header.liquid (the marketing side bakes it at build time). */
.header-link.has-badge { position: relative; overflow: visible; }
.nav-badge {
  position: absolute;
  top: -8px; right: -14px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  background: #4D1EF7 !important;
  color: #fff !important;
  font-family: "Fragment Mono", ui-monospace, monospace;
  font-size: 9px;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0;
  border-radius: 2px 2px 5px 2px;
  corner-shape: round round bevel round;
}

/* =============================================================================
   4. MOBILE — pill + hamburger + slide-in overlay (clone of desktop nav)
   ============================================================================= */
@media (max-width: 991.98px) {
  :root { --ticker-h: 34px; --pill-top: 10px; --pill-h: 54px; }

  .header-nav-background {
    top: 10px;
    left: 10px; right: 10px;
    width: auto; max-width: none;
    height: 54px;
    border-radius: 3px 3px 18px 3px;
    corner-shape: round round bevel round;
  }
  .header-nav-frame {
    position: fixed;
    top: 10px; left: 10px; right: 10px;
    width: auto; max-width: none;
    height: 54px; margin: 0; z-index: 100;
    display: flex; align-items: center;
  }
  nav.header-nav {
    display: flex; align-items: center;
    height: 54px; width: 100%;
    padding: 0 0 0 18px; gap: 0;
    background: transparent; color: #fff; grid: none;
  }
  .header-links { display: none !important; }
  a.header-logo { display: flex; align-items: center; height: 18px; width: auto; margin: 0; }
  a.header-logo img { filter: brightness(0) invert(1); height: 18px; width: auto; margin: 0; }

  /* cart sits just left of the hamburger */
  .header-btn-frame {
    position: fixed !important;
    top: 17px !important; bottom: auto !important;
    right: 68px; left: auto !important;   /* 56px hamburger edge + room for the count bubble's 6px overhang */
    z-index: 110; margin: 0 !important; padding: 0 !important;
    max-width: none !important; width: auto !important; height: auto !important;
    display: flex; align-items: center;
  }
  .header-btn-frame > div { display: flex; align-items: center; flex-direction: row; }
  .header-btn-frame > div::after { display: none; }
  /* The labelled pill rides the phone too — it is the only way to the cart on a
     screen where everything else is behind the hamburger, so it never collapses
     to a bare icon. */
  a.bs-cart-btn, a.bs-cart-btn:link, a.bs-cart-btn:visited {
    height: 38px; padding: 0 12px; gap: 7px;
    font-size: 13px; letter-spacing: 0.06em;
  }
  a.bs-cart-btn svg { width: 18px; height: 18px; }
  /* …with one exception, and it isn't a viewport: the pill and the wordmark sit
     in separate fixed frames, so nothing stops a long translated label
     (WARENKORB, WINKELWAGEN) from walking into the logo on a narrow phone.
     Same answer as the desktop link row — the fit guard in header.liquid
     measures the gap and drops the label to the icon alone when it runs out. */
  html.cart-compact a.bs-cart-btn,
  html.cart-compact a.bs-cart-btn:link,
  html.cart-compact a.bs-cart-btn:visited { width: 38px; padding: 0; }
  html.cart-compact a.bs-cart-btn .bs-cart-label { display: none; }

  /* hairline hamburger drawn in currentColor (bars painted above, shared with
     the compact desktop nav — this block only places the button) */
  .header-nav .nav-btn {
    display: flex !important; position: fixed; z-index: 110;
    top: 17px; right: 16px; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    color: #FCFCFD; cursor: pointer; pointer-events: auto; background: none; border: 0;
  }
}

/* ---- Slide-in overlay (all breakpoints declare; desktop hides) ---- */
#mnav-overlay { position: fixed; inset: 0; z-index: 9999; background: #0D0D0D; color: #FCFCFD;
  display: flex; flex-direction: column;
  padding: 20px 24px max(28px, env(safe-area-inset-bottom));
  gap: 0; transform: translateX(100%); visibility: hidden;
  transition: transform .42s cubic-bezier(0.2,0.8,0.2,1), visibility 0s linear .42s; }
#mnav-overlay.open { transform: none !important; visibility: visible;
  transition: transform .42s cubic-bezier(0.2,0.8,0.2,1); }
#mnav-close { position: absolute; top: 14px; right: 18px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; background: transparent;
  border: none; color: #FCFCFD; font-size: 0; line-height: 1; cursor: pointer; }
#mnav-close::before, #mnav-close::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px;
  background: currentColor; border-radius: 1px;
}
#mnav-close::before { transform: rotate(45deg); }
#mnav-close::after { transform: rotate(-45deg); }
#mnav-close:focus-visible, #mnav-overlay a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
#mnav-cta {
  margin-top: 22px; min-height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  border-radius: 3px 3px 14px 3px; corner-shape: round round bevel round;
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; font-weight: 400;
  text-decoration: none;
  transition: background-color .12s cubic-bezier(0.2,0.8,0.2,1);
}
#mnav-cta:active { background: var(--brand-deep); }
a#mnav-cta:link, a#mnav-cta:visited, a#mnav-cta:hover, a#mnav-cta:focus, a#mnav-cta:active { color: #fff; }
/* Flex column so the utility tier can pin to the bottom (margin-top:auto)
   while still scrolling with the menu when the accordions are open. */
.mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: 44px; scrollbar-width: none;
  display: flex; flex-direction: column; }
.mnav-body::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { html:not(.nav-compact) #mnav-overlay { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #mnav-overlay, #mnav-overlay.open { transition: none; } }

/* ---- Overlay menu = runtime clone of the desktop nav, flat accordion ----
   Not breakpoint-scoped any more: the compact desktop nav (html.nav-compact)
   opens this same overlay above 992px. Everything below is scoped to
   #mnav-overlay, which is display:none unless the menu is in play, so the
   block is inert wherever the full nav is showing. `@media all` keeps the
   braces — the alternative was re-indenting 130 lines to no effect. */
@media all {
  #mnav-overlay .mnav-menu { display: flex; flex-direction: column; position: static; transform: none; gap: 0;
    flex: 0 0 auto; }   /* never shrink when the accordions overflow the body */
  #mnav-overlay .nav-item { display: flex; flex-wrap: wrap; align-items: center; position: static; }
  #mnav-overlay .mnav-menu > .nav-item,
  #mnav-overlay .mnav-menu > a.header-link { border-bottom: 1px solid rgba(252,252,253,.10); }

  #mnav-overlay a.header-link {
    display: inline-flex !important; align-items: center; gap: 10px;
    padding: 17px 0; min-height: 0; width: auto;
    font-family: var(--font-mono);
    font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
    color: #FCFCFD; line-height: 1.2; transition: opacity .12s;
  }
  #mnav-overlay a.header-link:active { opacity: .6; }
  #mnav-overlay a.header-link.is-active { text-decoration: underline;
    text-decoration-color: var(--brand); text-decoration-thickness: 2px; text-underline-offset: 7px; }
  /* blog badge: in-flow next to the label instead of pinned to the corner */
  #mnav-overlay .nav-badge { position: static; margin-left: 6px; }

  #mnav-overlay .mnav-toggle { margin-left: auto; width: 56px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; color: #FCFCFD; cursor: pointer; }
  #mnav-overlay .nav-caret { width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid currentColor; opacity: .6;
    transition: transform .18s ease, opacity .18s ease; }
  #mnav-overlay .nav-item.is-open .nav-caret { transform: rotate(180deg); opacity: 1; }

  #mnav-overlay .nav-menu { flex-basis: 100%; display: none; position: static; transform: none;
    padding: 0; opacity: 1; visibility: visible; pointer-events: auto; }
  #mnav-overlay .nav-item.is-open .nav-menu { display: block; }
  #mnav-overlay .nav-menu-panel { min-width: 0; background: transparent; border: 0;
    border-radius: 0; box-shadow: none; padding: 4px 0 14px; margin: 0; }
  #mnav-overlay .nav-menu-link { display: flex; flex-direction: column; gap: 3px;
    padding: 11px 14px; text-decoration: none;
    border-radius: 2px 2px 10px 2px; corner-shape: round round bevel round;
    transition: background-color .15s ease; }
  #mnav-overlay .nav-menu-link:active { background: rgba(255,255,255,.06); opacity: 1; }
  #mnav-overlay .nml-title { font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 12.5px; color: #fff; }
  #mnav-overlay .nml-sub { font-size: 12px; letter-spacing: 0; text-transform: none;
    color: rgba(255,255,255,.42); font-family: var(--font-display); }
  #mnav-overlay .nav-menu-group { margin: 12px 14px 4px; padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-family: var(--font-mono); text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 10px; color: rgba(255,255,255,.4); }
  #mnav-overlay .nav-sub { display: block; width: 100%; }
  #mnav-overlay .nav-sub-trigger { padding-right: 14px; }
  #mnav-overlay .nav-sub-trigger::after { display: none; }
  #mnav-overlay .nav-flyout { position: static; padding-left: 0;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  #mnav-overlay .nav-flyout .nav-menu-panel {
    margin: 2px 0 6px 14px; padding: 4px 8px;
    background: rgba(255,255,255,.045);
    border-radius: 3px 3px 13px 3px; corner-shape: round round bevel round; }
  #mnav-overlay .nav-flyout .nav-menu-link { padding: 10px 8px; }
  #mnav-overlay .nav-menu-link.is-current .nml-title::after { content: "";
    display: inline-block; width: 6px; height: 6px; margin-left: 8px;
    background: var(--brand); border-radius: 50%; }

  /* ---- Utility tier (footer destinations, in the menu's quiet register) ----
     Pinned to the BOTTOM of .mnav-body (margin-top:auto), so it sits just above
     the Order Now CTA rather than crowding the primary nav — the empty space
     belongs between the two tiers, not under them. Its own hairline anchors it;
     once the accordions open and the body overflows, auto resolves to 0 and it
     simply flows after the menu and scrolls. Two mono-labeled columns; links in
     the reading voice at detail size — a tier below the mono-caps top-level
     rows, so the primary nav stays the loudest thing in the menu. */
  #mnav-overlay .mnav-util { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; padding: 26px 0 2px; border-top: 1px solid rgba(252,252,253,.10); }
  #mnav-overlay .mnav-util-head { margin: 0 0 6px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,.4); }
  #mnav-overlay .mnav-util-head::before { content: "/ "; }
  #mnav-overlay .mnav-util a { display: block; padding: 8px 0;
    font-family: var(--font-display);
    font-size: 15px; line-height: 1.2; color: rgba(252,252,253,.78);
    text-decoration: none; transition: opacity .12s; }
  #mnav-overlay .mnav-util a:active { opacity: .6; }
}

/* legacy mobile nav block is replaced by the overlay — never show it */
header.nav-mobile { display: none !important; }
/* legacy in-flow notes */
div.mobile-note, div.header-note { display: none !important; }

/* =============================================================================
   5. FOOTER — white plate (bs-footer), ported from the site
   ============================================================================= */
.bs-footer { background: #fff; color: #0a0a0c; font-family: var(--font-display);
  padding: clamp(48px, 7vw, 96px) 0 0; position: relative; z-index: 10;
  width: 100%; box-sizing: border-box;
  border-top: 1px solid var(--hairline); }   /* separation on the light store pages */
.bs-footer-inner { max-width: var(--desktopMaxWidth); margin: 0 auto; padding-inline: 16px;
  box-sizing: border-box; display: grid;
  grid-template-columns: 1.5fr 1.2fr 1fr 1fr 1fr; gap: 40px 32px; }
.bs-foot-corp { color: #646A6E; font-size: 15px; margin: 0 0 24px; }
.bs-foot-primary { display: flex; flex-direction: column; gap: 2px; }
.bs-foot-primary a { font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1.18; color: #0a0a0c;   /* 55 Roman — never medium */
  text-decoration: none; letter-spacing: -0.01em; transition: color .18s var(--ease-brand); }
.bs-foot-primary a:hover { color: var(--brand); }
.bs-foot-discord { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  height: 46px; padding: 0 22px; background: #000; color: #fff;
  border-radius: 2px 2px 12px 2px; corner-shape: round round bevel round;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 13px; font-weight: 400; text-decoration: none; width: fit-content;
  transition: transform .18s var(--ease-brand); }
.bs-foot-discord:hover { transform: translateY(-1px); }
/* Pin every link state (and the label span): theme css and the browser's
   :visited default both recolor plain links, which turned this button's text
   grey/blue once the Discord invite had been visited. Twin of the marketing
   chrome.css pin — the text is always white. */
a.bs-foot-discord:link, a.bs-foot-discord:visited, a.bs-foot-discord:hover,
a.bs-foot-discord:focus, a.bs-foot-discord:active,
a.bs-foot-discord:link span, a.bs-foot-discord:visited span, a.bs-foot-discord:hover span,
a.bs-foot-discord:focus span, a.bs-foot-discord:active span { color: #fff !important; }
.bs-foot-head { color: #646A6E; font-size: 15px; font-weight: 400; margin: 0 0 18px; }
.bs-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bs-foot-col a { color: #0a0a0c; font-size: 15px; text-decoration: none;
  transition: color .18s var(--ease-brand); }
.bs-foot-col a:hover { color: var(--brand); }
.bs-foot-region-head { margin-top: 40px; }

/* country selector (Dawn disclosure restyled to the system) */
.bs-foot-region .localization-form { margin: 0; }
.bs-foot-region .disclosure { position: relative; }
.bs-foot-region .disclosure__button {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid rgba(10,10,12,0.25);
  border-radius: 2px 2px 10px 2px; corner-shape: round round bevel round;
  padding: 10px 14px; cursor: pointer; color: #0a0a0c;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  transition: border-color var(--dur);
}
.bs-foot-region .disclosure__button:hover { border-color: #0a0a0c; }
.bs-foot-region .disclosure__button svg { width: 12px; height: 12px; transform: rotate(90deg); }
.bs-foot-region .disclosure__list-wrapper {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 20;
  background: #fff; border: 1px solid rgba(10,10,12,0.18);
  border-radius: 3px 3px 14px 3px; corner-shape: round round bevel round;
  box-shadow: 0 20px 44px rgba(0,0,0,0.18);
  max-height: 300px; overflow-y: auto; min-width: 240px; padding: 6px;
}
.bs-foot-region .disclosure__list { list-style: none; margin: 0; padding: 0; }
.bs-foot-region .disclosure__link {
  display: block; padding: 8px 10px; color: #0a0a0c; font-size: 13px; text-decoration: none;
  border-radius: 2px 2px 8px 2px; corner-shape: round round bevel round;
}
.bs-foot-region .disclosure__link:hover { background: rgba(10,10,12,0.06); }
.bs-foot-region .disclosure__link--active { font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.bs-foot-region .localization-form__currency { color: #646A6E; }

.bs-footer-legal { width: calc(100% - 32px); max-width: calc(var(--desktopMaxWidth) - 32px);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 24px 0 48px; box-sizing: border-box;
  border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; color: #646A6E; font-size: 13px; }
.bs-footer-legal nav { display: flex; gap: 32px; }
.bs-footer-legal a { color: #646A6E; text-decoration: none; transition: color .18s; }
.bs-footer-legal a:hover { color: #0a0a0c; }
@media (max-width: 991.98px) {
  .bs-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .bs-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .bs-footer-inner { grid-template-columns: 1fr; }
  .bs-footer-legal { flex-direction: column; align-items: flex-start; }
  .bs-foot-discord { width: 100%; justify-content: center; }
}

/* Klaviyo embed sits on the white plate — keep its width in check */
.bs-foot-news .klaviyo-form-style { max-width: 280px; }

/* =============================================================================
   6. KLAVIYO NEWSLETTER POPUP — the signup modal, reskinned from Klaviyo's old
   black card to the store system: white plate, bevel corner, Haas type, one
   violet signal on the submit arrow. The markup is Klaviyo's, rendered at
   runtime with inline styles + !important reset rules, so everything here is
   an !important override on Klaviyo's stable hooks (data-testids and the
   klaviyo-* classes — the goNNNN classes are generated per publish, never
   target them). The old dark skin lived in beyond-store.css ("KLAVIO
   NEWSLETTER MODAL", now removed); it also hid the validation-error container
   (input~div) — that stays visible now.

   Scoped to [data-testid="modal-form-container"]: hits any Klaviyo modal
   (popup/flyout), never the footer embed. Copy, trigger timing, and targeting
   stay in Klaviyo's form editor ("Newsletter Popup", form SVDdhc).
   ============================================================================= */
[data-testid="modal-form-container"],
[data-testid="modal-form-container"] form.klaviyo-form {
  border-radius: 3px 3px 24px 3px !important;
  corner-shape: round round bevel round;
}
[data-testid="modal-form-container"] form.klaviyo-form {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  max-width: calc(100vw - 20px) !important;   /* store mobile gutter is 10px per side */
}

/* success step — the only step with no email input. Its single row of text
   otherwise collapses the plate to a ~50px strip with the close X floating
   oddly beside it; hold the main step's height and center the message so
   both steps read as the same card. */
[data-testid="modal-form-container"] form.klaviyo-form:not(:has(.klaviyo-emailinput)) {
  min-height: 284px !important;  /* the main step's measured height — the two steps hold the same plate */
  align-items: center !important;
  justify-content: center !important;
}

/* close X — Klaviyo draws it as an SVG with stroke="#FFFFFF" presentation
   attributes; CSS wins over those. Circle dropped, bare hairline glyph. */
[data-testid="modal-form-container"] .klaviyo-close-form circle { stroke: transparent; fill: transparent; }
[data-testid="modal-form-container"] .klaviyo-close-form path { stroke: #000; stroke-width: 1.5; }

/* type: heading = Subhead 32/40 (Klaviyo's inline 32px already matches; the
   mobile step to 26/32 is ours), body = Body Small 18/24 in the one grey.
   A Fragment Mono heading was tried and reverted (July 2026): even stepped
   down to Body Large and uppercased it read worse, not "more styled" —
   headlines stay Haas, mono stays labels. */
/* Baseline for EVERY step of the form: the success ("thanks for subscribing")
   step carries the form design's old white text on markup the specific rules
   below don't match, which rendered white-on-white on the white plate. Lowest
   specificity here, so the heading/paragraph rules below still win their
   colors on the main step. */
[data-testid="modal-form-container"] .klaviyo-form-richtext * {
  color: #000 !important;
  font-family: var(--font-display) !important;
}
[data-testid="modal-form-container"] .klaviyo-form-richtext :is(h1, h2, h3, h4) span {
  color: #000 !important;
  font-family: var(--font-display) !important;
  font-weight: 400 !important;   /* 55 Roman — never bold */
  line-height: 40px !important;
  letter-spacing: normal !important;
}
[data-testid="modal-form-container"] .klaviyo-form-richtext p span {
  color: #70777A !important;
  font-family: var(--font-display) !important;
  line-height: 24px !important;
}

/* row padding — matched by content (:has), not row position, so a reordered
   or added row in the form editor degrades to Klaviyo's own padding instead
   of taking someone else's. 40px side gutter on the plate; the image (arrow)
   component's 20px top is alignment, not rhythm: it bottom-aligns the 40px
   chip with the input's underline inside Klaviyo's 60px row. */
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext h1) { padding: 48px 40px 0 !important; }
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext p) { padding: 8px 40px 16px !important; }
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-emailinput) { padding: 0 0 0 40px !important; }
[data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-image) { padding: 20px 40px 0 16px !important; }

/* email input — the footer embed's register: bare underline, no box */
[data-testid="modal-form-container"] .klaviyo-emailinput input {
  color: #000 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #70777A !important;
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  padding: 0 !important;
}
[data-testid="modal-form-container"] .klaviyo-emailinput input::placeholder { color: #70777A !important; opacity: 1 !important; }
[data-testid="modal-form-container"] .klaviyo-emailinput input:focus { border-bottom-color: #000 !important; }

/* submit — Klaviyo ships it as a button wrapping an arrow image. The chip is
   the popup's one violet signal; the filter forces the arrow art white
   whatever colour the uploaded PNG is. */
[data-testid="modal-form-container"] .klaviyo-form-image button {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; padding: 0 !important;
  background: var(--brand) !important;
  border-radius: 2px 2px 12px 2px !important;
  corner-shape: round round bevel round;
  transition: background-color var(--dur);
  cursor: pointer;
}
[data-testid="modal-form-container"] .klaviyo-form-image button:hover { background: var(--brand-deep) !important; }
[data-testid="modal-form-container"] .klaviyo-form-image img { filter: brightness(0) invert(1); }

@media (max-width: 640.98px) {
  /* heading steps to the mobile Subhead token (26/32); 24px side gutters */
  [data-testid="modal-form-container"] .klaviyo-form-richtext :is(h1, h2, h3, h4) span {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext h1) { padding: 40px 24px 0 !important; }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-richtext p) { padding: 8px 24px 16px !important; }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-emailinput) { padding: 0 0 0 24px !important; }
  [data-testid="modal-form-container"] [data-testid="form-component"]:has(.klaviyo-form-image) { padding: 20px 24px 0 12px !important; }
}

/* =============================================================================
   BEVEL FALLBACK — browsers without corner-shape (Safari incl. all iOS,
   Firefox, 2026-08) keep the border-radius but drop the bevel, so the big
   cut corner renders as a fat CURVE — the opposite of the corner language.

   Fallback: reproduce the CUT with a clip-path. The polygon hugs the element
   loosely (±80px) on the three straight sides — so focus outlines and most
   of a box-shadow survive the clip — and slices exactly along the bevel
   diagonal at the bottom-right. Border-radius drops to the rule's small
   value so the leftover bottom-right rounding doesn't fight the cut.
   Template, for a bevel of N px:
     clip-path: polygon(-80px -80px, calc(100% + 80px) -80px,
                        100% calc(100% - Npx), calc(100% - Npx) 100%,
                        -80px calc(100% + 80px));

   The one place clip-path CANNOT go: elements drawn as a 1px outline ring
   on a matching surface (ghost cart button, option cards, swatches…) — the
   clip slices the ring open along the diagonal and leaves a visible notch,
   so those keep a quiet small radius instead. Dark chips whose 1px keyline
   is near-invisible (12–30% white on black) still take the cut.

   Every rule pairing a large radius with corner-shape in THIS FILE must have
   a twin here. Same convention in bs-cart / bs-product / bs-store /
   section-blog-post / section-main-blog.
   ============================================================================= */
@supports not (corner-shape: round round bevel round) {
  /* ticker: the cut is full-height (38px desktop / 34px mobile). The clip
     slices the bar's wide soft shadow along the diagonal's extension, which
     reads as a pale smear under the cut — so the shadow goes entirely; the
     violet on white doesn't need it to separate. Same for the dropdown
     panel below (its hairline border still draws the edge). */
  .bs-ticker {
    border-radius: 3px 0 0 3px;
    box-shadow: none;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 38px), calc(100% - 38px) 100%, -80px calc(100% + 80px));
  }
  .header-nav-background {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 22px), calc(100% - 22px) 100%, -80px calc(100% + 80px));
  }
  @media (max-width: 991.98px) {
    .bs-ticker { clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 34px), calc(100% - 34px) 100%, -80px calc(100% + 80px)); }
    .header-nav-background { clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 18px), calc(100% - 18px) 100%, -80px calc(100% + 80px)); }
  }
  a.header-btn, a.header-btn:link, a.header-btn:visited {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 10px), calc(100% - 10px) 100%, -80px calc(100% + 80px));
  }
  a.bs-cart-btn .cart-count-bubble {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 6px), calc(100% - 6px) 100%, -80px calc(100% + 80px));
  }
  .nav-menu-panel {   /* dark panel: its 12%-white keyline hides the notch */
    border-radius: 3px;
    box-shadow: none;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 16px), calc(100% - 16px) 100%, -80px calc(100% + 80px));
  }
  .nav-menu-link {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 9px), calc(100% - 9px) 100%, -80px calc(100% + 80px));
  }
  .nav-badge {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 5px), calc(100% - 5px) 100%, -80px calc(100% + 80px));
  }
  #mnav-cta {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 14px), calc(100% - 14px) 100%, -80px calc(100% + 80px));
  }
  #mnav-overlay .nav-menu-link {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 10px), calc(100% - 10px) 100%, -80px calc(100% + 80px));
  }
  #mnav-overlay .nav-flyout .nav-menu-panel {
    border-radius: 3px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 13px), calc(100% - 13px) 100%, -80px calc(100% + 80px));
  }
  .bs-foot-discord {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 12px), calc(100% - 12px) 100%, -80px calc(100% + 80px));
  }
  .bs-foot-region .disclosure__link {
    border-radius: 2px;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 8px), calc(100% - 8px) 100%, -80px calc(100% + 80px));
  }
  /* outline-ring surfaces: quiet corner, no cut (see block comment) */
  a.bs-cart-btn, a.bs-cart-btn:link, a.bs-cart-btn:visited,
  .bs-foot-region .disclosure__button { border-radius: 2px; }
  .bs-foot-region .disclosure__list-wrapper { border-radius: 3px; }
  /* Klaviyo popup: white bordered card keeps the quiet corner; the violet
     submit chip is a fill, so it takes the cut (radius needs !important to
     beat the skin rules above; clip-path has no competition) */
  [data-testid="modal-form-container"],
  [data-testid="modal-form-container"] form.klaviyo-form { border-radius: 3px !important; }
  [data-testid="modal-form-container"] .klaviyo-form-image button {
    border-radius: 2px !important;
    clip-path: polygon(-80px -80px, calc(100% + 80px) -80px, 100% calc(100% - 12px), calc(100% - 12px) 100%, -80px calc(100% + 80px));
  }
}