/** Shopify CDN: Minification failed

Line 1015:3 Unexpected "}"

**/
/* START_SECTION:apex-announcement (INDEX:2) */
.announce {
    position: relative;
    z-index: 11;
    background-color: var(--an-bg, var(--color-bg-elevated));
    color: var(--an-fg, var(--color-text));
  }

  /* Optional background photograph. The colour setting stays underneath as
     the ground the image loads over, and as the fallback if the merchant
     clears the image. Cropped to fill — the bar is a ~35px-tall band at any
     width, so a chosen image is always being cropped hard; the focal point
     from the image picker is what decides which part survives. */
  .announce--image {
    background-image: var(--an-image);
    background-size: cover;
    background-position: var(--an-focal, center);
    background-repeat: no-repeat;
    filter: saturate(0.5);
  }

  .announce__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding-block: var(--an-pad-block, var(--space-2xs));
  }

  .announce__text {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin: 0;
    color: inherit;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-align: center;
    text-transform: uppercase;
  }

  .announce__text--link {
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
  }

  .announce__text--link svg {
    width: 1em;
    height: 1em;
    transition: transform var(--motion-fast) var(--ease-out);
  }

  @media (hover: hover) {
    .announce__text--link:hover {
      color: var(--brand-accent-bright);
    }

    .announce__text--link:hover svg {
      transform: translateX(var(--space-unit));
    }
  }

  .announce__text--link:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }
/* END_SECTION:apex-announcement */
/* START_SECTION:apex-footer (INDEX:13) */
.apex-footer {
    padding-block: var(--ft-pad-block, var(--space-xl));
    background-color: var(--ft-bg, var(--color-bg));
  }

  /* --------------------------------------------------------------------
     Top row.

     Mobile stacks. At 990 it becomes the measured 3 / 2 / 2 / 2 / 3 row —
     expressed as an explicit 12-track grid rather than .apex-grid, because
     the children need different spans and .apex-grid's .col-* classes would
     have to be sprinkled through the markup to say so.
     -------------------------------------------------------------------- */

  .apex-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .apex-footer__logo {
    display: inline-block;
    line-height: 0;
  }

  .apex-footer__logo svg {
    display: block;
    width: var(--ft-logo-w, 16rem);
    height: auto;
  }

  /* --- menus ------------------------------------------------------------ */

  .apex-footer__menu-heading {
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .apex-footer__links,
  .apex-footer__policy-links {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .apex-footer__links {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .apex-footer__link,
  .apex-footer__policy-link {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.01em;
    line-height: var(--leading-tight);
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--motion-fast) var(--ease-out);
  }

  @media (hover: hover) {
    .apex-footer__link:hover,
    .apex-footer__policy-link:hover {
      color: var(--brand-accent);
    }
  }

  .apex-footer__link:focus-visible,
  .apex-footer__policy-link:focus-visible {
    outline: var(--rule-thickness) solid var(--brand-accent);
    outline-offset: var(--space-unit);
  }

  /* --- newsletter -------------------------------------------------------- */

  .apex-footer__newsletter-heading {
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-tight);
  }

  /* The field is a single underline with the submit sitting on its end — no
     box, no fill. The border lives on the wrapper rather than the input so
     the arrow sits inside the same rule. */
  .apex-footer__field {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    border-block-end: 1px solid var(--color-border);
    transition: border-color var(--motion-fast) var(--ease-out);
  }

  .apex-footer__field:focus-within {
    border-block-end-color: var(--brand-accent);
  }

  .apex-footer__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2xs) 0;
    border: 0;
    background-color: transparent;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
  }

  .apex-footer__input::placeholder {
    color: var(--color-text-faint);
  }

  /* The focus ring belongs to the field, which is what visually reads as the
     control — an outline on the borderless input alone would draw a box that
     exists nowhere else in the design. */
  .apex-footer__input:focus {
    outline: none;
  }

  .apex-footer__submit {
    display: grid;
    flex: none;
    place-items: center;
    padding: var(--space-2xs);
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-out);
  }

  .apex-footer__submit svg {
    display: block;
    width: 1em;
    height: auto;
  }

  @media (hover: hover) {
    .apex-footer__submit:hover {
      color: var(--brand-accent);
    }
  }

  .apex-footer__submit:focus-visible {
    outline: var(--rule-thickness) solid var(--brand-accent);
    outline-offset: var(--space-unit);
  }

  .apex-footer__form-message {
    margin: var(--space-2xs) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
  }

  .apex-footer__form-message--error {
    color: var(--brand-accent);
  }

  /* --- social badges -----------------------------------------------------

     Circular white badges with a dark glyph, as Mint draws them. The circle
     is the one place --radius-pill earns its keep: every other radius in this
     theme is 0, and a squared social badge reads as a mistake rather than a
     choice.

     44px (--btn-height), not Mint's 38.5 — that is under the 44px WCAG 2.2
     target-size minimum, and these are the smallest tap targets on the page.
     The 20px glyph inside matches Mint exactly.
     -------------------------------------------------------------------- */

  .apex-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
  }

  .apex-footer__social-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--btn-height) / 1.3);
    height: calc(var(--btn-height) / 1.3);
    border-radius: var(--radius-pill);
    background-color: var(--brand-primary);
    color: var(--color-text-on-light);
    transition: background-color var(--motion-fast) var(--ease-out),
      color var(--motion-fast) var(--ease-out);
  }

  .apex-footer__social-badge svg {
    display: block;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
  }

  /* Bronze on hover — GUESSED. No mockup shows a social row at all, so this
     is the theme's accent applied consistently, not a measured state. */
  @media (hover: hover) {
    .apex-footer__social-badge:hover {
      background-color: var(--brand-accent);
      color: var(--brand-primary);
    }
  }

  .apex-footer__social-badge:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }

  /* --------------------------------------------------------------------
     Bottom bar. Separated by space alone — the design uses no divider rules.
     -------------------------------------------------------------------- */

  .apex-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-start: var(--space-xl);
  }

  .apex-footer__copyright {
    margin: 0;
    color: var(--color-text-faint);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
  }

  .apex-footer__policy-links {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .apex-footer__policy-link {
    text-transform: none;
  }

  /* --- link columns go 3-up --------------------------------------------- */

  @media screen and (min-width: 750px) {
    .apex-footer__top {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--grid-gap);
    }

    .apex-footer__brand,
    .apex-footer__newsletter {
      grid-column: 1 / -1;
    }

    .apex-footer__bottom {
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
    }
  }

  /* --- the measured row ------------------------------------------------- */

  @media screen and (min-width: 990px) {
    .apex-footer__top {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      align-items: start;
      row-gap: var(--grid-gap-row);
    }

    .apex-footer__brand {
      grid-column: span 3;
    }

    .apex-footer__menu {
      grid-column: span 2;
    }

    .apex-footer__newsletter {
      grid-column: span 3;
    }
  }
/* END_SECTION:apex-footer */
/* START_SECTION:apex-header (INDEX:14) */
/* The height setting is a DESKTOP control — mobile keeps the measured 84px
     from tokens.css, because the mockup's two bars are different heights. */
  .apex-header {
    position: relative;
    z-index: 10;
    width: 100%;
    background-color: var(--color-bg);
  }

  /* The containing block for the overlay header below. Its only child is
     absolutely positioned, so this collapses to zero height and takes no space
     in flow — but `inset-block-start: 0` now means "the top of the header
     section" rather than "the top of the page". That is what lets an
     announcement bar sit above the overlay header without being covered by it. */
  .apex-header-section {
    position: relative;
    z-index: 10;
  }

  /* Sticky overlay header. The WRAPPER sticks, not the header — the header
     itself is absolute, and an absolute element cannot stick.

     Because the wrapper is zero-height, sticking it costs no layout: it sits
     in flow directly under the announcement bar, scrolls up with it, and
     latches at y=0 once the bar has gone. The header rides along absolutely
     positioned inside it and keeps floating over whatever is beneath.

     Scoped with :has() to the overlay layout on purpose. The solid layout is a
     real in-flow bar and has its own opt-in `sticky` setting; sticking the
     wrapper as well would make that choice unavailable on every other
     template. */
  .apex-header-section:has(.apex-header--overlay) {
    position: sticky;
    inset-block-start: 0;
  }

  /* Transparent, sitting over the hero photograph — the mockup's default.
     Absolute rather than fixed so it scrolls away with the hero, and so it
     takes no space in flow, letting the hero start at the top of the page. */
  .apex-header--overlay {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: rgba(0,0,0,0.8);
  }

  .apex-header--sticky {
    position: sticky;
    inset-block-start: 0;
  }

  .apex-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--header-height);
  }

  /* --- logo ------------------------------------------------------------ */

  .apex-header__logo {
    flex: none;
    display: block;
    line-height: 0;
  }

  .apex-header__logo svg {
    display: block;
    width: var(--logo-w-mobile, var(--header-logo-width));
    height: auto;
  }

  /* --- desktop nav ----------------------------------------------------- */

  .apex-header__nav {
    display: none;
  }

  .apex-header__menu {
    display: flex;
    align-items: center;
    gap: var(--header-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .apex-header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-unit);
    padding-block: var(--space-2xs);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
  }

  @media (hover: hover) {
    .apex-header__link:hover {
      color: var(--brand-accent);
    }
  }

  .apex-header__link[aria-current='page'],
  .apex-header__link[data-child-active='true'] {
    color: var(--brand-accent);
  }

  /* --- desktop dropdown -------------------------------------------------

     Hover and focus only, no JavaScript.

     `:hover` here is deliberately NOT wrapped in `@media (hover: hover)` the
     way every other hover rule in this file is. That guard exists to stop a
     hover state sticking after a tap — but with no click fallback, a stuck
     hover is the only way a touch device wide enough for the desktop nav can
     open this at all. Here it is the feature, not the bug.

     The panel is hidden with `visibility`, never `display: none`, for two
     reasons: it can transition, and :focus-within has something to reveal.
     Tabbing to the parent link opens the panel, which makes its children
     focusable, which keeps :focus-within true all the way through them. */

  .apex-header__item {
    position: relative;
  }

  /* chevron-right at 90deg. svg-icons has no chevron-down, and drawing one
     would be this exact path rotated. */
  .apex-header__caret {
    flex: none;
    width: 1em;
    height: 1em;
    transform: rotate(90deg);
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .apex-header__item--parent:hover .apex-header__caret,
  .apex-header__item--parent:focus-within .apex-header__caret {
    transform: rotate(-90deg);
  }

  /* Below 990px the drawer renders these same links inline instead. */
  .apex-header__submenu {
    display: none;
  }

  .apex-header__link:focus-visible,
  .apex-header__sublink:focus-visible,
  .apex-drawer__sublink:focus-visible,
  .apex-header__action:focus-visible,
  .apex-header__logo:focus-visible,
  .apex-header__burger:focus-visible,
  .apex-drawer__link:focus-visible,
  .apex-drawer__secondary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }

  /* --- actions --------------------------------------------------------- */

  .apex-header__actions {
    display: flex;
    align-items: center;
    gap: var(--header-action-gap);
    margin-inline-start: auto;
    @media only screen and (min-width: 750px) {
      margin-inline-start: 0;
    }
  }

  .apex-header__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
  }

  @media (hover: hover) {
    .apex-header__action:hover {
      color: var(--brand-accent);
    }
  }

  .apex-icon {
    display: block;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .apex-cart__count {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
  }

  /* Account and cart are hidden on mobile in the mockup — both live in the
     drawer instead. See the note in CLAUDE.md; this is a merchandising
     trade-off, not a technical one. */
  .apex-header__action {
    display: none;
  }

  /* --- burger ---------------------------------------------------------- */

  .apex-header__burger {
    display: grid;
    place-items: center;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    cursor: pointer;
    list-style: none;
  }

  .apex-header__burger::-webkit-details-marker {
    display: none;
  }

  .apex-burger {
    display: grid;
    gap: 0.5rem;
    width: 100%;
  }

  .apex-burger > span {
    display: block;
    height: 2px;
    background-color: currentColor;
    transition: transform var(--motion-med) var(--ease-out),
      opacity var(--motion-fast) var(--ease-out);
  }

  details[open] .apex-burger > span:nth-child(1) {
    transform: translateY(0.7rem) rotate(45deg);
  }

  details[open] .apex-burger > span:nth-child(2) {
    opacity: 0;
  }

  details[open] .apex-burger > span:nth-child(3) {
    transform: translateY(-0.7rem) rotate(-45deg);
  }

  /* --- drawer ---------------------------------------------------------- */

  .apex-header__drawer {
    display: block;
    color: var(--color-text);
  }

  /* The panel must be a DIRECT child of <details> and start hidden. Dawn's
     MenuDrawer adds .menu-opening one frame after setting `open`, which is what
     gives the transform something to transition from — a plain
     `details[open]` rule would snap, because the content is not rendered at all
     until the moment it opens. Same contract as component-menu-drawer.css. */
  .apex-drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min(90vw, 42rem);
    padding: calc(var(--header-height) + var(--space-lg)) var(--gutter) var(--space-xl);
    overflow-y: auto;
    background-color: var(--color-bg-elevated);
    transform: translateX(100%);
    visibility: hidden;
  }

  details[open] > .apex-drawer {
    transition: transform var(--motion-med) var(--ease-out),
      visibility var(--motion-med) var(--ease-out);
  }

  details[open].menu-opening > .apex-drawer {
    transform: translateX(0);
    visibility: visible;
  }

  .apex-drawer__close {
    position: absolute;
    inset-block-start: calc((var(--header-height) - var(--header-icon-size)) / 2);
    inset-inline-end: var(--gutter);
    display: grid;
    place-items: center;
    width: var(--header-icon-size);
    height: var(--header-icon-size);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  .apex-drawer__close-icon {
    width: var(--space-sm);
    height: var(--space-sm);
  }

  .apex-drawer__close:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: var(--focus-ring-offset);
  }

  .apex-drawer__menu {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .apex-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-light);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
  }

  .apex-drawer__link .btn-arrow {
    color: var(--brand-accent);
  }

  @media (hover: hover) {
    .apex-drawer__link:hover {
      color: var(--brand-accent);
    }
  }

  .apex-drawer__link[data-child-active='true'] {
    color: var(--brand-accent);
  }

  /* A row is now link + optional sub-list, so the row itself has to stack
     them. The gap on .apex-drawer__menu stays the gap BETWEEN top-level
     items; this is the tighter one within a single item. */
  .apex-drawer__menu li {
    display: grid;
    gap: var(--space-xs);
  }

  .apex-drawer__submenu {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding-inline-start: var(--space-xs);
    border-inline-start: 1px solid var(--color-border);
    list-style: none;
  }

  .apex-drawer__sublink {
    display: block;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
  }

  .apex-drawer__sublink[aria-current='page'] {
    color: var(--brand-accent);
  }

  @media (hover: hover) {
    .apex-drawer__sublink:hover {
      color: var(--brand-accent);
    }
  }

  .apex-drawer__footer {
    display: grid;
    gap: var(--space-xs);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-border);
  }

  .apex-drawer__secondary {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-out);
  }

  @media (hover: hover) {
    .apex-drawer__secondary:hover {
      color: var(--color-text);
    }
  }

  /* --- desktop --------------------------------------------------------- */

  @media screen and (min-width: 990px) {
    .apex-header {
      --header-height: var(--header-h, 10.8rem);
    }

    .apex-header__logo svg {
      width: var(--logo-w-desktop, var(--header-logo-width));
    }
    
    .apex-header__inner svg {
      filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    }
    .apex-header__inner {
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    }
    
    /* Stretched to the full bar height on purpose: the panel hangs off the
       bottom edge of the header, so the item has to reach that edge — or the
       pointer crosses a dead gap on the way down and the menu closes
       mid-travel. */
    .apex-header__nav {
      display: block;
      align-self: stretch;
      margin-left: auto;
      margin-right: calc(var(--header-nav-gap) / 2);
    }

    .apex-header__menu {
      height: 100%;
    }

    .apex-header__item {
      display: flex;
      align-items: center;
      height: 100%;
    }

    /* Centred under its parent rather than left-anchored. This nav sits hard
       against the right of the bar, so a left-anchored panel on the last item
       — which is the one that has children — would run off the viewport.
       Centring halves the overhang in both directions. */
    .apex-header__submenu {
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 50%;
      z-index: 1;
      display: grid;
      gap: var(--space-2xs);
      width: max-content;
      max-width: calc(100vw - var(--gutter) * 2);
      margin: 0;
      padding: var(--space-xs) var(--space-sm);
      border: 1px solid var(--color-border);
      background-color: var(--color-bg-elevated);
      list-style: none;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-50%) translateY(calc(var(--space-unit) * -1));
      transition: opacity var(--motion-fast) var(--ease-out),
        transform var(--motion-fast) var(--ease-out),
        visibility var(--motion-fast) var(--ease-out);
    }

    .apex-header__item--parent:hover > .apex-header__submenu,
    .apex-header__item--parent:focus-within > .apex-header__submenu {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .apex-header__subgroup {
      display: grid;
      gap: var(--space-2xs);
      margin: 0;
      padding-block-start: var(--space-2xs);
      padding-inline-start: var(--space-xs);
      list-style: none;
    }

    .apex-header__sublink {
      display: block;
      color: var(--color-text-muted);
      font-family: var(--font-body);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      text-decoration: none;
      transition: color var(--motion-fast) var(--ease-out);
    }

    .apex-header__sublink:hover,
    .apex-header__sublink[aria-current='page'] {
      color: var(--brand-accent);
    }

    .apex-header__action {
      display: inline-flex;
    }

    .apex-header__drawer {
      display: none;
    }
  }
/* END_SECTION:apex-header */
/* START_SECTION:facility-subs (INDEX:40) */
/* ======================================================================
     Bands
     ====================================================================== */

  .fsub-band {
    padding-block: var(--fsub-pad-block, var(--space-section));
    background-color: var(--fsub-bg, var(--color-bg));
  }

  .fsub-band--alt {
    background-color: var(--fsub-bg-alt, var(--color-bg-alt));
  }

  /* `isolation: isolate` makes this a stacking context, so the two negative
     z-index layers below sit ABOVE this radial gradient and BELOW the copy
     without the container needing a z-index of its own. Without it they would
     escape to the nearest ancestor context and land behind the page. */
  .fsub-hero {
    position: relative;
    isolation: isolate;
    background-image: radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--light) 5%, var(--fsub-bg, var(--color-bg))) 0%,
      var(--fsub-bg, var(--color-bg)) 62%
    );
  }

  /* Both layers only exist when a photograph is set — with no image the hero
     is exactly the flat band it was. */
  .fsub-hero__media {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--fsub-hero-focus, 50% 50%);
    opacity: var(--fsub-hero-opacity, 0.45);
  }

  /* Darkens toward the left, where the copy sits, and toward the bottom, so
     the band still steps cleanly into the one beneath it. Mixed off the band's
     own background rather than a second hardcoded dark, so it tracks whatever
     colour the merchant sets. */
  .fsub-hero__scrim {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image:
      linear-gradient(
        to right,
        color-mix(in srgb, var(--fsub-bg, var(--color-bg)) 78%, transparent) 0%,
        color-mix(in srgb, var(--fsub-bg, var(--color-bg)) 30%, transparent) 70%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        transparent 40%,
        color-mix(in srgb, var(--fsub-bg, var(--color-bg)) 70%, transparent) 100%
      );
  }

  /* Opt-in clearance for an OVERLAY header (absolute, top: 0), which would
     otherwise sit on top of this band's first line.

     Off by default because the store currently renders `apex-header--solid`
     with an announcement bar above it — both in normal flow — so the header
     already reserves its own height and this pad would be 108px of dead air.
     CLAUDE.md still describes the header as overlay with no announcement bar;
     that is stale against the live settings, not a contradiction to resolve
     here. Flip this on if the header ever goes back to overlay. */
  .fsub-hero--overlay {
    padding-block-start: calc(var(--header-height) + var(--fsub-pad-block, var(--space-section)));
  }

  .fsub-hero__inner {
    /* max-width: 62ch; */
  }

  /* --- shared type -------------------------------------------------------- */

  .fsub-eyebrow {
    margin: 0 0 var(--space-2xs);
    color: var(--brand-accent);
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-style: italic;
    font-weight: var(--weight-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .fsub-h1,
  .fsub-h2 {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-heading);
    text-transform: uppercase;
    text-wrap: balance;
  }

  .fsub-h1 {
    font-size: var(--text-h2);
  }

  .fsub-h2 {
    font-size: var(--text-h2);
  }

  .fsub-h3 {
    font-size: var(--text-h3);
    color: white;
    text-transform: uppercase;
    text-wrap-style: balance;
}  }

  /* The second half of a two-part heading, in bronze. Its own line at every
     width — the two clauses are a statement and its payoff, not one sentence
     that happens to wrap. */
  .fsub-accent {
    display: block;
    color: var(--brand-accent);
  }

  .fsub-lead,
  .fsub-body {
    max-width: 64ch;
    color: var(--color-text-muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  .fsub-lead {
    margin-block-start: var(--space-sm);
    font-size: var(--text-lead);
  }

  .fsub-body {
    margin-block-start: var(--space-xs);
  }

  .fsub-rte > :first-child { margin-block-start: 0; }
  .fsub-rte > :last-child { margin-block-end: 0; }

  .fsub-rte a {
    color: var(--brand-accent);
    text-underline-offset: 0.2em;
  }

  .fsub-note {
    margin: var(--space-sm) 0 0;
    color: var(--color-text-faint);
    font-family: var(--font-eyebrow);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: var(--leading-tight);
  }

  .fsub-footnote {
    max-width: 72ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .fsub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
  }

  .fsub-head {
    /* max-width: 64ch; */
    margin-block-end: var(--space-lg);
  }

  /* ======================================================================
     Offset — the numbered steps
     ====================================================================== */

  .fsub-steps {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fsub-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-block-start: var(--space-xs);
    border-block-start: var(--rule-thickness) solid var(--color-border);
  }

  /* The step number is the only place on the page a numeral carries the
     bronze at display size. It is decorative — the <ol> already numbers the
     list for assistive tech — hence aria-hidden on the span. */
  .fsub-step__num {
    color: var(--brand-accent);
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .fsub-step__title {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
  }

  .fsub-step__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  /* ======================================================================
     Plans — the expanded card
     ====================================================================== */

  /* `stretch`, NOT `start` — the homepage card grid uses start because its
     cards have nothing that needs to align. Here the ledger is pushed to the
     bottom of its card with `margin-block-start: auto`, and that only lines
     the three ledgers up with each other if the cards are the same height in
     the first place. Gold's court note runs to two lines where Bronze's runs
     to one; without stretch the three coverage figures sit at three different
     heights and stop reading as a row to compare. */
  .fsub-plans {
    margin: 0 0 var(--space-md);
    padding: 0;
    align-items: stretch;
    list-style: none;
  }

  /* Every metallic ramp on a card derives from --fsub-tone, so re-pointing a
     tier tone moves its border, dot, rule, glow, bar and check marks together.
       -hi  highlight — tone lifted toward the light
       -lo  shadow    — tone sunk toward the ground */
  .fsub-plan {
    --fsub-tone-hi: color-mix(in srgb, var(--fsub-tone) 45%, var(--light));
    --fsub-tone-lo: color-mix(in srgb, var(--fsub-tone) 40%, var(--ground));
  }

  .fsub-plan__frame {
    position: relative;
    height: 100%;
    padding: var(--fsub-border-w, 2px);
    border-radius: var(--fsub-radius, 16px);
    background-image: linear-gradient(
      150deg,
      var(--fsub-tone-hi) 0%,
      var(--fsub-tone) 26%,
      var(--fsub-tone-lo) 52%,
      color-mix(in srgb, var(--fsub-tone) 55%, var(--light)) 74%,
      var(--fsub-tone-hi) 100%
    );
    box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--fsub-tone) 50%, transparent);
  }

  /* Face radius is the outer radius minus the border thickness — anything
     larger and the gradient shows through the corners as four bright pips. */
  .fsub-plan__card {
    display: flex;
    height: 100%;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-radius: calc(var(--fsub-radius, 16px) - var(--fsub-border-w, 2px));
    background-image: linear-gradient(
      165deg,
      color-mix(in srgb, var(--fsub-tone) 6%, var(--color-bg-elevated)) 0%,
      var(--color-bg) 100%
    );
  }

  .fsub-plan--featured .fsub-plan__card {
    background-image: linear-gradient(
      165deg,
      color-mix(in srgb, var(--fsub-tone) 10%, var(--color-bg-elevated)) 0%,
      var(--color-bg) 100%
    );
  }

  /* Overhangs the card's top edge. The band's own padding keeps it off the
     section above. */
  .fsub-plan__badge {
    position: absolute;
    z-index: 1;
    inset-block-start: -9px;
    inset-inline-start: 50%;
    padding: var(--space-unit) var(--space-xs);
    border-radius: calc(var(--fsub-radius, 16px) * 0.4);
    background-image: linear-gradient(
      140deg,
      var(--fsub-tone-hi),
      color-mix(in srgb, var(--fsub-tone) 75%, var(--light))
    );
    color: var(--color-text-on-light);
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-weight: var(--weight-eyebrow);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  .fsub-plan__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
  }

  .fsub-plan__tier {
    color: var(--fsub-tone);
    font-family: var(--font-eyebrow);
    font-size: var(--text-sm);
    font-weight: var(--weight-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .fsub-plan__dot {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--radius-pill);
    background-image: linear-gradient(140deg, var(--fsub-tone-hi), var(--fsub-tone));
    box-shadow: 0 0 12px color-mix(in srgb, var(--fsub-tone) 70%, transparent);
  }

  .fsub-plan__price {
    margin: 0;
    color: var(--color-text);
  }

  /* Amount and suffix stack rather than sharing a baseline — the markup strips
     the whitespace between the two spans, so inline they form one unbreakable
     run with no break opportunity, and a 7-character price plus a word-length
     suffix does not fit a third of the rail at 750. */
  .fsub-plan__price-amount {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--weight-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-body);
    line-height: 1;
  }

  .fsub-plan__price-suffix {
    display: block;
    margin-block-start: var(--space-unit);
    color: var(--color-text-muted);
    font-family: var(--font-eyebrow);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-label);
  }

  .fsub-plan__description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
  }

  /* A tinted hairline that fades out to the right, not a full-width rule. */
  .fsub-plan__rule {
    display: block;
    height: var(--rule-thickness);
    background-image: linear-gradient(
      90deg,
      color-mix(in srgb, var(--fsub-tone) 55%, transparent),
      color-mix(in srgb, var(--fsub-tone) 6%, transparent)
    );
  }

  /* --- allocations -------------------------------------------------------- */

  .fsub-alloc {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
  }

  .fsub-alloc__label {
    color: var(--color-text-faint);
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-weight: var(--weight-eyebrow);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .fsub-alloc__value {
    margin: var(--space-unit) 0 0;
  }

  .fsub-alloc__figure {
    display: block;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-display);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
  }

  .fsub-alloc__note {
    display: block;
    margin-block-start: var(--space-unit);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  /* Pack formats, one checked bullet each — the same treatment the homepage
     card gives its feature lines. The icon takes the tier tone through
     currentColor, so bronze/silver/gold check marks come for free. */
  .fsub-packs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin: var(--space-2xs) 0 0;
    padding: 0;
    list-style: none;
  }

  .fsub-pack {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
  }

  .fsub-pack__icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    margin-block-start: 0.2rem;
    color: var(--fsub-tone);
  }

  /* --- the ledger ---------------------------------------------------------
     Pushed to the bottom of the card with `margin-block-start: auto` so the
     ledgers line up across three cards whose allocation lists run to different
     lengths. That alignment is the whole reason the band exists — the three
     coverage figures have to be readable as a row. */

  .fsub-ledger {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-start: auto;
    padding: var(--space-xs);
    border-radius: calc(var(--fsub-radius, 16px) * 0.5);
    background-color: color-mix(in srgb, var(--fsub-tone) 8%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fsub-tone) 22%, transparent);
  }

  .fsub-ledger__title {
    margin: 0;
    color: var(--fsub-tone);
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-weight: var(--weight-eyebrow);
    letter-spacing: var(--tracking-label);
    line-height: var(--leading-tight);
    text-transform: uppercase;
  }

  .fsub-ledger__rows {
    margin: 0;
  }

  /* Label and amount share a line WHEN THEY FIT, and the amount drops to its
     own right-aligned line when they do not — rather than the label being
     squeezed until it hyphen-less-wraps mid-word.

     `flex-wrap: wrap` plus `flex: 0 0 auto` on the label is what buys that:
     with any shrink allowed, flex shortens the label to its longest word
     before it ever considers wrapping the amount, which is how "Retail value
     at MSRP" became a five-line column at 990. Not shrinking means the amount
     wraps first, and `margin-inline-start: auto` keeps it hard right on the
     line it lands on. A merchant who types a genuinely long label still gets
     ordinary word wrapping via `max-width: 100%`. */
  .fsub-ledger__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--space-2xs);
    padding-block: var(--space-unit);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
  }

  .fsub-ledger__row dt {
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* tabular-nums so the three amounts align on their decimal point down the
     column, which is what makes the subtraction read as a subtraction. */
  .fsub-ledger__row dd {
    margin: 0;
    flex: 0 0 auto;
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .fsub-ledger__row--total {
    margin-block-start: var(--space-unit);
    padding-block-start: var(--space-2xs);
    border-block-start: 1px solid color-mix(in srgb, var(--fsub-tone) 30%, transparent);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  /* --text-body, not --text-h4, all the way up to 1200.

     750-989 is where a card is at its NARROWEST — 198px of content box, less
     32px of ledger padding, leaves 166px for a label and an amount on one
     line. "You keep" + "+$19.89" at --text-h4 needs 174px and blew the row out
     by 8px. It cannot simply shrink at 750 either: hard rule 5 forbids type
     that is larger on mobile than on tablet, so the mobile size has to come
     down to what the tablet card can afford. The display size arrives at 1200
     with the rest of the card. */
  .fsub-ledger__row--total dd {
    color: var(--fsub-tone);
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: var(--weight-display);
  }

  /* --- coverage bar ------------------------------------------------------- */

  .fsub-cov {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-start: var(--space-unit);
  }

  .fsub-cov__track {
    display: block;
    overflow: hidden;
    height: var(--rule-thickness);
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--light) 12%, transparent);
  }

  .fsub-cov__fill {
    display: block;
    width: var(--fsub-cov-w, 0%);
    height: 100%;
    background-image: linear-gradient(90deg, var(--fsub-tone-lo), var(--fsub-tone-hi));
  }

  .fsub-cov__label {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-tight);
  }

  .fsub-cov__label strong {
    color: var(--fsub-tone);
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-display);
  }

  .fsub-plan__cta {
    margin: 0;
  }

  /* ======================================================================
     FAQ
     ====================================================================== */

  .fsub-faq__list {
    margin-block-start: var(--space-md);
  }

  .fsub-qa {
    border-block-end: 1px solid var(--color-border);
  }

  .fsub-qa:first-child {
    border-block-start: 1px solid var(--color-border);
  }

  .fsub-qa__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    padding-block: var(--space-sm);
    color: var(--color-text);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
    list-style: none;
  }

  /* Safari draws its own disclosure triangle through ::-webkit-details-marker
     regardless of `list-style: none`. */
  .fsub-qa__q::-webkit-details-marker {
    display: none;
  }

  .fsub-qa__q:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: calc(var(--focus-ring-offset) * -1);
  }

  @media (hover: hover) {
    .fsub-qa__q:hover .fsub-qa__q-text {
      color: var(--brand-accent);
    }
  }

  .fsub-qa__q-text {
    transition: color var(--motion-fast) var(--ease-out);
  }

  /* A plus sign built from two bars, rotated to a minus when open. Drawn
     rather than typed for the same reason the arrow is: the Zalando subset has
     no glyph that would match. */
  .fsub-qa__mark {
    position: relative;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
  }

  .fsub-qa__mark::before,
  .fsub-qa__mark::after {
    position: absolute;
    background-color: var(--brand-accent);
    content: '';
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: var(--rule-thickness);
    transform: translateY(-50%);
    transition: transform var(--motion-fast) var(--ease-out);
  }

  .fsub-qa__mark::after {
    transform: translateY(-50%) rotate(90deg);
  }

  .fsub-qa[open] .fsub-qa__mark::after {
    transform: translateY(-50%) rotate(0deg);
  }

  .fsub-qa__a {
    max-width: 68ch;
    padding-block-end: var(--space-sm);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-wrap: pretty;
  }

  /* ======================================================================
     Closing CTA
     ====================================================================== */

  .fsub-band--cta {
    background-color: var(--color-bg-deep);
  }

  .fsub-cta {
    max-width: 56ch;
  }

  /* ======================================================================
     Desktop step-up. Base above is mobile; nothing here shrinks type.
     ====================================================================== */

  @media screen and (min-width: 750px) {
    .fsub-eyebrow {
      font-size: var(--text-sm);
    }

    .fsub-h1 {
      font-size: var(--text-display);
    }

    .fsub-step__text,
    .fsub-plan__description,
    .fsub-alloc__note,
    .fsub-pack,
    .fsub-footnote,
    .fsub-note {
      font-size: var(--text-body);
    }

    .fsub-cov__label {
      font-size: var(--text-sm);
    }

    .fsub-qa__q,
    .fsub-step__title,
    .fsub-alloc__figure {
      font-size: var(--text-h4);
    }

    .fsub-head {
      margin-block-end: var(--space-xl);
    }

    /* HELD FLAT at the mobile size, not stepped up with --text-h1.

       --text-h1 becomes 5.6rem at 750, and "$849.95" is ~245px at that size.
       The card never has 245px of content to give it until 1200: it is 247px
       at 750 (2-up) and drops to 182px at 990, where 3-up arrives at the same
       moment --gutter jumps 4.8rem -> 8rem and makes a card NARROWER at 990
       than it was at 989.

       Sizing it to the 990 card and holding that everywhere below 1200 is
       what keeps the ramp monotonic — hard rule 5 forbids type that is bigger
       on a smaller viewport, so it cannot simply be tuned per band. */
    .fsub-plan__price-amount {
      font-size: 3.6rem;
    }

    .fsub-plan__card {
      padding: var(--space-md);
    }
  }

  /* Card width grows with the rail while --gutter stays put above 990, so by
     1200 there is room for the card's full display sizes again. */
  @media screen and (min-width: 1200px) {
    .fsub-plan__price-amount {
      font-size: var(--text-h1);
    }

    .fsub-ledger__row {
      font-size: var(--text-body);
    }

    .fsub-ledger__row--total dd {
      font-size: var(--text-h4);
    }
  }
/* END_SECTION:facility-subs */