/** Shopify CDN: Minification failed

Line 13706:16 Expected "]" to go with "["

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:2) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:ew-hero-carousel (INDEX:6) */
.ew-hcar {
    background-color: var(--ew-hcar-band, transparent);
    padding-block: var(--ew-hcar-pad-block-start-mobile, 0) var(--ew-hcar-pad-block-end-mobile, 12px);
    padding-inline: var(--ew-hcar-pad-inline-start-mobile, 16px)
      var(--ew-hcar-pad-inline-end-mobile, 16px);
  }

  .ew-hcar__wrap {
    position: relative;
  }

  /* Native CSS scroll-snap, one slide in view. Each cell is 100% of the track, so the
     crop is whatever aspect-ratio the breakpoint asks for and the artwork covers it. */
  .ew-hcar__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--ew-hcar-gap, 0px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .ew-hcar__track::-webkit-scrollbar {
    display: none;
  }

  .ew-hcar__slide {
    position: relative;
    display: block;
    scroll-snap-align: start;
    overflow: hidden;
    border-radius: var(--ew-hcar-radius, 0px);
    aspect-ratio: var(--ew-hcar-ratio-mobile, 4 / 5);
    color: inherit;
    text-decoration: none;
  }

  .ew-hcar__slide:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: calc(var(--focus-outline-offset, 3px) * -1);
  }

  .ew-hcar__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Arrows sit over the slide and stay invisible until the carousel is hovered or focused.
     That is the design and it still measures visibility:hidden on the true reference. The
     ::after grows the hit area to the 44px floor without moving the 34px glyph. */
  .ew-hcar__arrow {
    position: absolute;
    top: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--ew-hcar-arrow-size, 34px);
    height: var(--ew-hcar-arrow-size, 34px);
    padding: 8px;
    border: 0;
    border-radius: 9999px;
    background-color: var(--ew-hcar-arrow-bg, rgba(21, 21, 21, 0.79));
    color: var(--ew-hcar-arrow-color, #ffffff);
    cursor: pointer;
    transform: translateY(-50%);
    visibility: hidden;
    z-index: 2;
  }

  .ew-hcar__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-hcar__arrow svg {
    width: var(--ew-hcar-arrow-icon, 18px);
    height: var(--ew-hcar-arrow-icon, 18px);
  }

  .ew-hcar__arrow--prev {
    inset-inline-start: var(--ew-hcar-arrow-inset, 8px);
  }

  .ew-hcar__arrow--next {
    inset-inline-end: var(--ew-hcar-arrow-inset, 8px);
  }

  .ew-hcar__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .ew-hcar__wrap:focus-within .ew-hcar__arrow,
  .ew-hcar__arrow:focus-visible {
    visibility: visible;
  }

  .ew-hcar__arrow:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  /* Dots ride INSIDE the slide, centred, a fixed inset up from its bottom edge. */
  .ew-hcar__dots {
    position: absolute;
    inset-inline: 0;
    bottom: var(--ew-hcar-dot-inset, 8px);
    display: flex;
    justify-content: center;
    gap: var(--ew-hcar-dot-gap, 8px);
    z-index: 2;
  }

  .ew-hcar__dot {
    position: relative;
    box-sizing: border-box;
    width: var(--ew-hcar-dot-size-mobile, 8px);
    height: var(--ew-hcar-dot-size-mobile, 8px);
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: var(--ew-hcar-dot-color-mobile, #9e9e9e);
    cursor: pointer;
  }

  .ew-hcar__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-hcar__dot[aria-selected='true'] {
    background-color: var(--ew-hcar-dot-active-mobile, var(--color-accent, #bf1c1d));
  }

  .ew-hcar__dot:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  .ew-hcar__empty {
    margin: 0;
    font-size: var(--font-size--sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--style-border-radius-sm);
    padding: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .ew-hcar {
      padding-block: var(--ew-hcar-pad-block-start-tablet, 32px)
        var(--ew-hcar-pad-block-end-tablet, 16px);
      padding-inline: var(--ew-hcar-pad-inline-start-tablet, 32px)
        var(--ew-hcar-pad-inline-end-tablet, 32px);
    }

    .ew-hcar__slide {
      aspect-ratio: var(--ew-hcar-ratio-tablet, 3 / 1);
    }

    .ew-hcar__dot {
      width: var(--ew-hcar-dot-size, 8px);
      height: var(--ew-hcar-dot-size, 8px);
      background-color: var(--ew-hcar-dot-color, #e2e2e2);
    }

    .ew-hcar__dot[aria-selected='true'] {
      background-color: var(--ew-hcar-dot-active, #121212);
    }

    .ew-hcar__wrap--arrows-from-tablet .ew-hcar__arrow {
      display: flex;
    }
  }

  @media screen and (min-width: 990px) {
    .ew-hcar {
      padding-block: var(--ew-hcar-pad-block-start, 0) var(--ew-hcar-pad-block-end, 24px);
      padding-inline: var(--ew-hcar-pad-inline-start, 64px) var(--ew-hcar-pad-inline-end, 64px);
    }

    .ew-hcar__slide {
      aspect-ratio: var(--ew-hcar-ratio, 3 / 1);
    }

    .ew-hcar__arrow {
      display: flex;
    }
  }

  @media (hover: hover) {
    .ew-hcar__wrap:hover .ew-hcar__arrow {
      visibility: visible;
    }
  }
/* END_SECTION:ew-hero-carousel */

/* START_SECTION:ew-icon-rail (INDEX:7) */
.ew-irail {
    background-color: var(--ew-irail-band, transparent);
    padding-block: var(--ew-irail-pad-block-start-mobile, 0) var(--ew-irail-pad-block-end-mobile, 0);
    padding-inline: var(--ew-irail-pad-inline-start-mobile, 16px)
      var(--ew-irail-pad-inline-end-mobile, 16px);
  }

  .ew-irail__heading {
    margin: 0 0 12px;
    font-size: var(--font-size--lg);
    font-weight: 700;
  }

  /* The arrows are flex siblings of the track, not an overlay — that is how the reference
     builds it: 56 + 888 + 56 = 1000, centred inside the content column. */
  .ew-irail__wrap {
    display: flex;
    align-items: center;
    max-width: var(--ew-irail-max, 1000px);
    margin-inline: auto;
  }

  .ew-irail__track {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
      (100% - (var(--ew-irail-per-view-mobile, 4.3) - 1) * var(--ew-irail-gap, 0px)) /
        var(--ew-irail-per-view-mobile, 4.3)
    );
    gap: var(--ew-irail-gap, 0px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .ew-irail__track::-webkit-scrollbar {
    display: none;
  }

  .ew-irail__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    scroll-snap-align: start;
    color: inherit;
    text-decoration: none;
    text-align: center;
  }

  .ew-irail__tile:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
    border-radius: var(--style-border-radius-sm, 4px);
  }

  .ew-irail__disc {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--ew-irail-disc-mobile, 60px);
    height: var(--ew-irail-disc-mobile, 60px);
    margin-block-end: var(--ew-irail-label-gap, 5px);
    border-radius: 9999px;
    background-color: var(--ew-irail-disc-bg, #f5f5f5);
    color: var(--ew-irail-icon-color, var(--color-accent, #bf1c1d));
  }

  .ew-irail__icon {
    display: block;
    width: var(--ew-irail-icon-mobile, 32px);
    height: var(--ew-irail-icon-mobile, 32px);
    fill: none;
    stroke: currentcolor;
    stroke-width: var(--ew-irail-icon-stroke, 2);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ew-irail__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ew-irail-label-clamp, 2);
    overflow: hidden;
    font-size: var(--ew-irail-label-size-mobile, 12px);
    font-weight: var(--ew-irail-label-weight, 400);
    line-height: var(--ew-irail-label-lh-mobile, 120%);
    color: var(--ew-irail-label-color, #000000);
    text-transform: var(--ew-irail-label-transform, none);
  }

  /* Invisible at rest. On the true reference, with the GemPages runtime running, every
     carousel arrow on the site still reports `visibility: hidden` — they are hover-revealed
     by design (`docs/2B-DECISIONS.md`). `visibility`, not `display`, because these arrows
     are flex SIBLINGS of the track: hiding them by display would hand their 56px back to
     the track and re-measure every tile. They stay in the tab order and :focus-within
     reveals them, so a keyboard user can always see what they are operating. */
  .ew-irail__arrow {
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--ew-irail-arrow-tablet, 32px);
    height: var(--ew-irail-arrow-tablet, 32px);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--ew-irail-arrow-color, #121212);
    cursor: pointer;
    visibility: hidden;
  }

  .ew-irail__wrap:focus-within .ew-irail__arrow,
  .ew-irail__arrow:focus-visible {
    visibility: visible;
  }

  @media (hover: hover) {
    .ew-irail__wrap:hover .ew-irail__arrow {
      visibility: visible;
    }
  }

  .ew-irail__arrow svg {
    width: var(--ew-irail-arrow-icon, 24px);
    height: var(--ew-irail-arrow-icon, 24px);
  }

  .ew-irail__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .ew-irail__arrow:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  .ew-irail__empty {
    margin: 0;
    font-size: var(--font-size--sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--style-border-radius-sm);
    padding: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .ew-irail {
      padding-block: var(--ew-irail-pad-block-start-tablet, 0)
        var(--ew-irail-pad-block-end-tablet, 0);
      padding-inline: var(--ew-irail-pad-inline-start-tablet, 32px)
        var(--ew-irail-pad-inline-end-tablet, 32px);
    }

    .ew-irail__track {
      grid-auto-columns: calc(
        (100% - (var(--ew-irail-per-view-tablet, 7) - 1) * var(--ew-irail-gap, 0px)) /
          var(--ew-irail-per-view-tablet, 7)
      );
    }

    .ew-irail__disc {
      width: var(--ew-irail-disc-tablet, 60px);
      height: var(--ew-irail-disc-tablet, 60px);
    }

    .ew-irail__icon {
      width: var(--ew-irail-icon-tablet, 32px);
      height: var(--ew-irail-icon-tablet, 32px);
    }

    .ew-irail__label {
      font-size: var(--ew-irail-label-size-tablet, 12px);
      line-height: var(--ew-irail-label-lh-tablet, 180%);
    }

    .ew-irail__arrow {
      display: flex;
    }
  }

  @media screen and (min-width: 990px) {
    .ew-irail {
      padding-block: var(--ew-irail-pad-block-start, 0) var(--ew-irail-pad-block-end, 32px);
      padding-inline: var(--ew-irail-pad-inline-start, 64px) var(--ew-irail-pad-inline-end, 64px);
    }

    .ew-irail__track {
      grid-auto-columns: calc(
        (100% - (var(--ew-irail-per-view, 8) - 1) * var(--ew-irail-gap, 0px)) /
          var(--ew-irail-per-view, 8)
      );
    }

    .ew-irail__disc {
      width: var(--ew-irail-disc, 70px);
      height: var(--ew-irail-disc, 70px);
    }

    .ew-irail__icon {
      width: var(--ew-irail-icon, 38px);
      height: var(--ew-irail-icon, 38px);
    }

    .ew-irail__label {
      font-size: var(--ew-irail-label-size, 16px);
      line-height: var(--ew-irail-label-lh, 100%);
    }

    .ew-irail__arrow {
      width: var(--ew-irail-arrow, 56px);
      height: var(--ew-irail-arrow, 56px);
    }
  }
/* END_SECTION:ew-icon-rail */

/* START_SECTION:ew-link-tiles (INDEX:8) */
/* Mobile first. Each breakpoint re-points the local --_* variables; the properties that
     consume them are declared once. Every fallback is the value this section rendered
     before the per-breakpoint settings existed, so a page that sets none of them does not
     move by a pixel. */
  .ew-link-tiles {
    --_gap: var(--ew-gap-mobile, var(--ew-gap, 16px));
    --_content-gap: var(--ew-content-gap-mobile, var(--_gap));
    --_pad-start: var(--ew-pad-start-mobile, var(--ew-pad-start, 32px));
    --_pad-end: var(--ew-pad-end-mobile, var(--ew-pad-end, 32px));
    --_pad-inline-start: var(--ew-pad-inline-start-mobile, 0px);
    --_pad-inline-end: var(--ew-pad-inline-end-mobile, 0px);
    --_track-inset: 0px;
    /* The tiles-in-view count for this breakpoint. Only the centre-snapped rail reads it;
       the fixed-column tracks below keep naming their own variables, unchanged. */
    --_tiles: var(--ew-tiles-mobile, 1);

    display: flex;
    flex-direction: column;
    gap: var(--_content-gap);
    padding-block: var(--_pad-start) var(--_pad-end);
    padding-inline: var(--_pad-inline-start) var(--_pad-inline-end);
    background-color: var(--ew-band-bg, transparent);
    border-block-end: var(--ew-band-border-width, 0) solid
      var(--ew-band-border-color, transparent);
  }

  .ew-link-tiles__header {
    display: flex;
    flex-direction: column;
    gap: var(--ew-heading-gap-mobile, var(--ew-heading-gap, 4px));
  }

  .ew-link-tiles__header--center {
    align-items: center;
    text-align: center;
  }

  /* The unset fallbacks are the exact values this heading resolved to before these
     settings existed: the theme's own h2 weight, and an inherited colour (Horizon's
     `h2 { color: var(--color, var(--font-h2-color)) }` names an undefined variable, so
     the declaration is dropped and the colour inherits). */
  .ew-link-tiles__heading {
    margin: 0;
    font-size: var(--ew-heading-size-mobile, var(--font-size--xl));
    font-weight: var(--ew-heading-weight, var(--font-h2--weight));
    line-height: var(--ew-heading-lh-mobile, 1.2);
    color: var(--ew-heading-color, inherit);
  }

  .ew-link-tiles__subheading {
    font-size: var(--ew-sub-size-mobile, var(--font-size--sm));
    line-height: var(--ew-sub-lh-mobile, inherit);
    color: var(--ew-sub-color, inherit);
    opacity: var(--ew-sub-opacity, 0.8);
  }

  .ew-link-tiles__subheading > :first-child {
    margin-block-start: 0;
  }

  .ew-link-tiles__subheading > :last-child {
    margin-block-end: 0;
  }

  /* Mobile "one big, one small, one full" (owner 2026-10-14, More Collections). Below
     750px the list stops being a rail: tile 1 big and tile 2 smaller side by side at the
     same height (3fr / 2fr with aspect ratios in the same 3:2 proportion), tile 3 full
     width underneath. From 750px the section's own layout (rail or grid) takes over. */
  .ew-link-tiles__list.ew-link-tiles__list--bento-m {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    padding-inline: 0;
    padding-block-end: 0;
  }

  .ew-link-tiles__list--bento-m > :nth-child(1) {
    --ew-tile-aspect-mobile: 3 / 4;
  }

  .ew-link-tiles__list--bento-m > :nth-child(2) {
    --ew-tile-aspect-mobile: 2 / 4;
    --ew-ov-pad: 8px;
  }

  .ew-link-tiles__list--bento-m > :nth-child(3) {
    grid-column: 1 / -1;
    --ew-tile-aspect-mobile: 16 / 10;
  }

  .ew-link-tiles__list--bento-m > :nth-child(-n + 2) .ew-ov__heading {
    font-size: var(--font-size--md, 1rem);
  }

  /* The narrow tile keeps heading + button; its sub-line would not fit. */
  .ew-link-tiles__list--bento-m > :nth-child(2) .ew-ov__sub {
    display: none;
  }

  /* Grid — wraps. */
  .ew-link-tiles__list--grid {
    display: grid;
    grid-template-columns: repeat(var(--ew-cols-mobile), minmax(0, 1fr));
    gap: var(--_gap);
  }

  /* Rail — native CSS scroll-snap, no carousel library.
     --ew-tiles may be fractional (1.3 shows one tile plus a third of the next), which is
     how the captured designs signal "there is more to scroll" without an arrow. */
  .ew-link-tiles__list--rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
      (100% - (var(--ew-tiles-mobile) - 1) * var(--_gap)) / var(--ew-tiles-mobile)
    );
    gap: var(--_gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 0;
    scrollbar-width: thin;
    padding-block-end: var(--ew-rail-pad-end, 4px);
    padding-inline: var(--_track-inset) var(--_track-inset);
    overscroll-behavior-x: contain;
  }

  /* The captured designs lay a carousel out as [arrow][track][arrow] and then hide the
     arrows, so the track is narrower than the row and centred inside it. --_track-inset
     reproduces that geometry without drawing chrome the design never shows. */
  .ew-link-tiles--no-scrollbar .ew-link-tiles__list--rail {
    scrollbar-width: none;
  }

  .ew-link-tiles--no-scrollbar .ew-link-tiles__list--rail::-webkit-scrollbar {
    display: none;
  }

  /* ── Centre-snapped rail ─────────────────────────────────────────────────────────────
     The captured carousels rest with the active tile CENTRED in the row and an equal sliver
     of its neighbours showing on each side. This track only ever rested flush-left, with
     the whole peek bunched on the right — blue-light's was 0 | 882 | 254 against a design
     of 119 | 882 | 118.

     `track_inset` is the wrong lever for it, and was tried: `grid-auto-columns` divides the
     PADDED content box, so insetting the track shrinks every tile — 134/84 took those
     882x353 tiles down to 676x271 and cost 83px of section height.

     What works is to pad by exactly the amount that leaves the content box equal to ONE
     tile: peek = (row - tile) / 2 leaves row - 2*peek = tile, so `grid-auto-columns: 100%`
     reproduces the old tile width to the pixel and the padding itself supplies both peeks.
     Substituting tile = (row - (tiles - 1) * gap) / tiles and simplifying gives the
     expression below. It is exact for any tiles-in-view and collapses to zero peek at
     exactly one tile in view, which is the right answer there.

     A percentage in `padding` resolves against the containing block — the rail wrapper,
     i.e. the full row — which is what lets --_peek be written without knowing the tile
     width first, and is why the same percentage cannot be used inside `grid-auto-columns`,
     where it would resolve against the already-padded box. */
  .ew-link-tiles__list--rail.ew-link-tiles__list--center {
    --_peek: calc(
      (100% - 2 * var(--_track-inset) + var(--_gap)) * (var(--_tiles) - 1) / var(--_tiles) / 2
    );

    grid-auto-columns: 100%;
    padding-inline: calc(var(--_track-inset) + var(--_peek));
  }

  /* Both selectors, because blocks/ew-link-tile.liquid declares `start` on the wrapper and
     again on the anchor inside it. */
  .ew-link-tiles__list--center .ew-tile-wrap,
  .ew-link-tiles__list--center .ew-tile {
    scroll-snap-align: center;
  }

  /* Text pills size to their own content instead of a fixed column.
     Progressive enhancement — without :has() they fall back to fixed columns. */
  .ew-link-tiles__list--rail:has(.ew-tile--text) {
    grid-auto-columns: max-content;
  }

  /* ── Overrides of the tile block's own rules ─────────────────────────────────────────
     Two classes deep, so they outrank `.ew-tile__*` in blocks/ew-link-tile.liquid
     whichever order the bundle lands in, and the block file stays untouched. Every
     fallback is the block's own declared value, so a section that sets none of these
     renders byte-for-byte as before.

     `min-height: 44px` on the text row is the block's tap-target floor. It is worth having
     on a bare text pill; on an image tile the anchor is already hundreds of pixels tall, so
     lowering it there costs no reachable target — and it is what makes a 25px caption sit
     25px under its image the way the design draws it. */
  .ew-link-tiles__list .ew-tile__text {
    min-height: var(--ew-tile-text-min, 44px);
  }

  .ew-link-tiles__list .ew-tile__label {
    font-size: var(
      --ew-tile-label-px-mobile,
      var(--ew-tile-label-px, var(--ew-tile-label-size, var(--font-size--sm)))
    );
    font-weight: var(--ew-tile-label-weight, 500);
    line-height: var(--ew-tile-label-lh-mobile, var(--ew-tile-label-lh, 1.3));
    color: var(--ew-tile-label-color, inherit);
    text-transform: var(--ew-tile-label-transform, none);
  }

  /* ── Natural tile shape ──────────────────────────────────────────────────────────────
     No ratio is imposed: the media box takes its height from the image, which is the only
     way to reproduce artwork whose ratio is not on any ladder — and the only way to stop
     `object-fit: cover` cropping it. The <img> keeps its width/height attributes, so the
     intrinsic ratio is known before the bytes land and nothing shifts.

     The two modifier classes are independent: --nat governs tablet and up, --nat-m governs
     mobile, and the desktop block restores the fixed ratio when only mobile is natural.
     Every rule is two classes deep so it outranks blocks/ew-link-tile.liquid's own. */
  .ew-link-tiles--nat-m .ew-tile__media {
    aspect-ratio: auto;
  }

  .ew-link-tiles--nat-m .ew-tile__image {
    height: auto;
    object-fit: fill;
  }

  /* The badge layer mirrors the media box. With no ratio to mirror it tracks the whole
     tile instead, which is exact for the tiles that carry a badge (they have no label
     row) and close enough to be worth having for the ones that do. */
  .ew-link-tiles--nat-m .ew-tile-overlay {
    aspect-ratio: auto;
    inset-block: 0;
  }

  /* ── Carousel controls ──────────────────────────────────────────────────────────────
     The arrows sit ON the track, inset from its edges, and are invisible at rest. That is
     the design: on the true reference, with the GemPages runtime running, all four arrows
     still report visibility:hidden. Hover reveals them; :focus-within also reveals them so
     they are not a keyboard trap you cannot see. */
  .ew-link-tiles__rail-wrap {
    position: relative;
  }

  .ew-link-tiles__arrow {
    position: absolute;
    top: var(--ew-arrow-top, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--ew-arrow-size, 28px);
    height: var(--ew-arrow-size, 28px);
    padding: var(--ew-arrow-padding, 4px);
    border: 0;
    border-radius: 9999px;
    background-color: var(--ew-arrow-bg, rgba(255, 255, 255, 0.85));
    color: var(--ew-arrow-color, #121212);
    cursor: pointer;
    transform: translateY(-50%);
    visibility: hidden;
    z-index: 2;
  }

  /* A 44px hit area around a 28px mark, without changing a single painted pixel. */
  .ew-link-tiles__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-link-tiles__arrow svg {
    width: 100%;
    height: 100%;
  }

  .ew-link-tiles__arrow--prev {
    inset-inline-start: var(--ew-arrow-inset, 8px);
  }

  .ew-link-tiles__arrow--next {
    inset-inline-end: var(--ew-arrow-inset, 8px);
  }

  .ew-link-tiles__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .ew-link-tiles__rail-wrap:focus-within .ew-link-tiles__arrow,
  .ew-link-tiles__arrow:focus-visible {
    visibility: visible;
  }

  .ew-link-tiles__arrow:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  @media (hover: hover) {
    .ew-link-tiles__rail-wrap:hover .ew-link-tiles__arrow {
      visibility: visible;
    }
  }

  /* Dots. 8px marks in a 44px tap target, so the row measures 44px whatever the mark. */
  .ew-link-tiles__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ew-dot-gap, 12px);
  }

  .ew-link-tiles__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .ew-link-tiles__dot-mark {
    display: block;
    width: var(--ew-dot-size, 8px);
    height: var(--ew-dot-size, 8px);
    border-radius: 9999px;
    background-color: var(--ew-dot-color, #7d7d7d);
  }

  .ew-link-tiles__dot[aria-selected='true'] .ew-link-tiles__dot-mark {
    background-color: var(--ew-dot-color-active, #ffffff);
  }

  .ew-link-tiles__dot:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, -6px);
  }

  /* Per-breakpoint visibility. The designs put arrows on desktop only and dots on tablet
     and below; both are settings because other pages want other combinations. */
  .ew-link-tiles__rail-wrap--from-tablet .ew-link-tiles__arrow,
  .ew-link-tiles__rail-wrap--from-desktop .ew-link-tiles__arrow {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .ew-link-tiles__rail-wrap--from-tablet .ew-link-tiles__arrow {
      display: flex;
    }

    .ew-link-tiles__dots--upto-mobile {
      display: none;
    }
  }

  @media screen and (min-width: 990px) {
    .ew-link-tiles__rail-wrap--from-desktop .ew-link-tiles__arrow {
      display: flex;
    }

    .ew-link-tiles__dots--upto-tablet {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .ew-link-tiles {
      --_gap: var(--ew-gap-tablet, var(--ew-gap, 16px));
      --_content-gap: var(--ew-content-gap-tablet, var(--_gap));
      --_pad-start: var(--ew-pad-start-tablet, var(--ew-pad-start, 32px));
      --_pad-end: var(--ew-pad-end-tablet, var(--ew-pad-end, 32px));
      --_pad-inline-start: var(--ew-pad-inline-start-tablet, 0px);
      --_pad-inline-end: var(--ew-pad-inline-end-tablet, 0px);
      --_track-inset: var(--ew-track-inset-tablet, 0px);
      --_tiles: var(--ew-tiles-tablet, 1);
    }

    .ew-link-tiles__header--center-desktop {
      align-items: center;
      text-align: center;
    }

    .ew-link-tiles__header {
      gap: var(--ew-heading-gap-tablet, var(--ew-heading-gap, 4px));
    }

    .ew-link-tiles__heading {
      font-size: var(--ew-heading-size-tablet, var(--font-size--2xl));
      line-height: var(--ew-heading-lh-tablet, 1.2);
    }

    .ew-link-tiles__subheading {
      font-size: var(--ew-sub-size-tablet, var(--font-size--sm));
      line-height: var(--ew-sub-lh-tablet, inherit);
    }

    .ew-link-tiles__list--grid {
      grid-template-columns: repeat(var(--ew-cols), minmax(0, 1fr));
    }

    .ew-link-tiles__list--rail {
      grid-auto-columns: calc(
        (100% - (var(--ew-tiles-tablet) - 1) * var(--_gap)) / var(--ew-tiles-tablet)
      );
    }

    /* Hand the mobile bento back to the section's own tablet/desktop layout. */
    .ew-link-tiles__list--rail.ew-link-tiles__list--bento-m {
      grid-auto-flow: column;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-inline: var(--_track-inset) var(--_track-inset);
      padding-block-end: var(--ew-rail-pad-end, 4px);
    }

    .ew-link-tiles__list--grid.ew-link-tiles__list--bento-m {
      grid-template-columns: repeat(var(--ew-cols), minmax(0, 1fr));
    }

    .ew-link-tiles__list--bento-m > :nth-child(3) {
      grid-column: auto;
    }

    .ew-link-tiles__list--bento-m > :nth-child(2) .ew-ov__sub {
      display: block;
    }

    .ew-link-tiles__list--bento-m > :nth-child(-n + 2) .ew-ov__heading {
      font-size: var(--font-size--2xl, 1.5rem);
    }

    .ew-link-tiles__list .ew-tile__label {
      font-size: var(
        --ew-tile-label-px-tablet,
        var(--ew-tile-label-px, var(--ew-tile-label-size, var(--font-size--sm)))
      );
      line-height: var(--ew-tile-label-lh-tablet, var(--ew-tile-label-lh, 1.3));
    }

    .ew-link-tiles--nat .ew-tile__media,
    .ew-link-tiles--nat .ew-tile-overlay {
      aspect-ratio: auto;
    }

    .ew-link-tiles--nat .ew-tile-overlay {
      inset-block: 0;
    }

    .ew-link-tiles--nat .ew-tile__image {
      height: auto;
      object-fit: fill;
    }

    /* Natural on the phone, a fixed crop from tablet up — put the ratio back. */
    .ew-link-tiles--nat-m:not(.ew-link-tiles--nat) .ew-tile__media,
    .ew-link-tiles--nat-m:not(.ew-link-tiles--nat) .ew-tile-overlay {
      aspect-ratio: var(--ew-tile-aspect, 1);
    }

    .ew-link-tiles--nat-m:not(.ew-link-tiles--nat) .ew-tile-overlay {
      inset-block: 0 auto;
    }

    .ew-link-tiles--nat-m:not(.ew-link-tiles--nat) .ew-tile__image {
      height: 100%;
      object-fit: var(--ew-tile-fit, cover);
    }
  }

  @media screen and (min-width: 990px) {
    .ew-link-tiles {
      --_gap: var(--ew-gap, 16px);
      --_content-gap: var(--ew-content-gap, var(--_gap));
      --_pad-start: var(--ew-pad-start, 32px);
      --_pad-end: var(--ew-pad-end, 32px);
      --_pad-inline-start: var(--ew-pad-inline-start, 0px);
      --_pad-inline-end: var(--ew-pad-inline-end, 0px);
      --_track-inset: var(--ew-track-inset, 0px);
      --_tiles: var(--ew-tiles, 1);
    }

    .ew-link-tiles__header {
      gap: var(--ew-heading-gap, 4px);
    }

    .ew-link-tiles__heading {
      font-size: var(--ew-heading-size, var(--font-size--2xl));
      line-height: var(--ew-heading-lh, 1.2);
    }

    .ew-link-tiles__subheading {
      font-size: var(--ew-sub-size, var(--font-size--sm));
      line-height: var(--ew-sub-lh, inherit);
    }

    .ew-link-tiles__list--rail {
      grid-auto-columns: calc((100% - (var(--ew-tiles) - 1) * var(--_gap)) / var(--ew-tiles));
    }

    .ew-link-tiles__list .ew-tile__label {
      font-size: var(
        --ew-tile-label-px,
        var(--ew-tile-label-size, var(--font-size--sm))
      );
      line-height: var(--ew-tile-label-lh, 1.3);
    }
  }
/* END_SECTION:ew-link-tiles */

/* START_SECTION:ew-product-carousel (INDEX:9) */
/* Band tones (Easysight palette, visual.md Palette v1). Each tone sets the band AND the
     ink that has to sit on it, so a band can never be paired with unreadable text.
     #242833 = the Dark surface role (no root token carries it under a generic name yet;
     ez-tokens names it only as --offer-ink). */
  .ew-pcar--tone-dark {
    --ew-pcar-band: var(--_ew-dark-surface, #242833);
    --ew-pcar-heading-color: #ffffff;
    --ew-pcar-sub-color: #ffffff;
    --ew-pcar-dot-color: rgb(255 255 255 / 0.35);
    --ew-pcar-dot-active: #ffffff;
  }

  /* Brand-red band (owner 2026-10-14). #BF1C1D under white = 6.2:1, AA at every text
     size. The pill sits on the WHITE card, not on the band, so it stays the red pill. */
  .ew-pcar--tone-red {
    --ew-pcar-band: var(--color-accent, #bf1c1d);
    --ew-pcar-heading-color: #ffffff;
    --ew-pcar-sub-color: #ffffff;
    --ew-pcar-dot-color: rgb(255 255 255 / 0.45);
    --ew-pcar-dot-active: #ffffff;
  }

  .ew-pcar--tone-fill {
    --ew-pcar-band: var(--surface-fill, #f9f8f6);
    --ew-pcar-heading-color: var(--color-foreground);
    --ew-pcar-sub-color: var(--color-foreground);
    --ew-pcar-dot-color: rgb(var(--color-foreground-rgb) / 0.25);
    --ew-pcar-dot-active: var(--color-foreground);
  }

  .ew-pcar--tone-none {
    --ew-pcar-band: transparent;
    --ew-pcar-heading-color: var(--color-foreground);
    --ew-pcar-sub-color: var(--color-foreground);
    --ew-pcar-dot-color: rgb(var(--color-foreground-rgb) / 0.25);
    --ew-pcar-dot-active: var(--color-foreground);
  }

  /* A white card on the off-white fill needs a hairline to hold its edge. */
  .ew-pcar--tone-fill .ew-pcar__cell {
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / 0.06);
  }

  .ew-pcar {
    background-color: var(--ew-pcar-band, transparent);
    padding-block: var(--ew-pcar-pad-block-start-mobile, 16px)
      var(--ew-pcar-pad-block-end-mobile, 32px);
    padding-inline: var(--ew-pcar-pad-inline-start-mobile, 16px)
      var(--ew-pcar-pad-inline-end-mobile, 16px);
  }

  .ew-pcar__header {
    margin-block-end: var(--ew-pcar-header-gap-mobile, 16px);
    text-align: start;
  }

  .ew-pcar__heading {
    margin: 0;
    font-size: var(--ew-pcar-heading-size-mobile, 22px);
    font-weight: var(--ew-pcar-heading-weight, 700);
    line-height: var(--ew-pcar-heading-lh-mobile, 120%);
    color: var(--ew-pcar-heading-color, inherit);
  }

  .ew-pcar__sub {
    font-size: var(--ew-pcar-sub-size-mobile, 14px);
    line-height: var(--ew-pcar-sub-lh-mobile, 140%);
    color: var(--ew-pcar-sub-color, inherit);
  }

  .ew-pcar__sub > :first-child {
    margin-block-start: 0;
  }

  .ew-pcar__sub > :last-child {
    margin-block-end: 0;
  }

  .ew-pcar__wrap {
    position: relative;
  }

  /* Native CSS scroll-snap rail. `--ew-pcar-per-view` cards fit the track exactly, which
     is what makes the reference's fifth card land flush on the page-width edge. */
  .ew-pcar__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
      (100% - (var(--ew-pcar-per-view-mobile, 2) - 1) * var(--ew-pcar-gap-mobile, 8px)) /
        var(--ew-pcar-per-view-mobile, 2)
    );
    gap: var(--ew-pcar-gap-mobile, 8px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .ew-pcar__track::-webkit-scrollbar {
    display: none;
  }

  .ew-pcar__cell {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    scroll-snap-align: start;
    background-color: var(--ew-pcar-card-bg, #ffffff);
    border: var(--ew-pcar-card-border-width, 0) solid
      var(--ew-pcar-card-border-color, transparent);
    border-radius: var(--ew-pcar-card-radius, 12px);
    padding: var(--ew-pcar-card-pad, 8px);
  }

  /* Bold & Vibrant: the photo runs edge to edge inside the border and only the copy is
     inset. The card keeps its bottom padding so the swatch row does not touch the frame. */
  .ew-pcar__cell--flush {
    padding: 0 0 var(--ew-pcar-card-pad, 8px);
    overflow: hidden;
  }

  .ew-pcar__cell--flush .ew-pcar__title,
  .ew-pcar__cell--flush .ew-pcar__prices,
  .ew-pcar__cell--flush .ew-pcar__swatches {
    padding-inline: var(--ew-pcar-card-pad, 8px);
  }

  .ew-pcar__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .ew-pcar__link:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  .ew-pcar__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ew-pcar-image-radius, 0px);
  }

  .ew-pcar__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ew-pcar-image-fit, contain);
  }

  .ew-pcar__image--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  /* The collection tag, pinned to the image box's top-right corner. Fully rounded, brand
     red (--color-accent), white bold 12px — it is a label, not a discount flash. */
  .ew-pcar__badge {
    position: absolute;
    top: var(--ew-pcar-badge-inset, 8px);
    inset-inline-end: var(--ew-pcar-badge-inset, 8px);
    display: block;
    box-sizing: border-box;
    padding: var(--ew-pcar-badge-pad-block, 4px) var(--ew-pcar-badge-pad-inline, 10px);
    border-radius: 9999px;
    background-color: var(--ew-pcar-badge-bg, var(--color-accent, #bf1c1d));
    color: var(--ew-pcar-badge-color, #ffffff);
    font-size: var(--ew-pcar-badge-size, 12px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    z-index: 1;
  }

  .ew-pcar__title {
    margin: 0 0 var(--ew-pcar-title-gap, 0px);
    font-size: var(--ew-pcar-title-size-mobile, 14px);
    font-weight: 400;
    line-height: var(--ew-pcar-title-lh, 120%);
    color: var(--ew-pcar-title-color, #000000);
    text-align: start;
  }

  .ew-pcar__prices {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    justify-content: start;
    align-items: center;
    column-gap: var(--ew-pcar-price-column-gap, 8px);
    margin-block-end: var(--ew-pcar-price-gap-mobile, 4px);
    font-variant-numeric: tabular-nums;
  }

  .ew-pcar__price {
    font-size: var(--ew-pcar-price-size-mobile, 18px);
    font-weight: 700;
    line-height: var(--ew-pcar-price-lh-mobile, 180%);
    color: var(--ew-pcar-price-color, #151515);
  }

  .ew-pcar__compare {
    font-size: var(--ew-pcar-compare-size-mobile, 14px);
    font-weight: 400;
    line-height: var(--ew-pcar-price-lh-mobile, 180%);
    color: var(--ew-pcar-compare-color, #000000);
    text-decoration: line-through;
  }

  .ew-pcar__swatches {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--ew-pcar-swatch-gap, 8px);
    row-gap: var(--ew-pcar-swatch-row-gap, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ew-pcar__swatch {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: var(--ew-pcar-swatch-size, 30px);
    height: var(--ew-pcar-swatch-size, 30px);
    border-radius: 9999px;
    flex: 0 0 auto;
  }

  .ew-pcar__swatch--active {
    border: var(--ew-pcar-swatch-ring-width, 1px) solid var(--ew-pcar-swatch-ring, #121212);
    padding: var(--ew-pcar-swatch-ring-pad, 4px);
  }

  .ew-pcar__swatch-dot {
    display: block;
    box-sizing: border-box;
    width: var(--ew-pcar-swatch-dot, 22px);
    height: var(--ew-pcar-swatch-dot, 22px);
    border-radius: 9999px;
    background-color: #ffffff;
    background-position: center;
    background-size: cover;
    /* Hairline so a white or pale swatch still reads on the white card; on a dark swatch
       it disappears into the fill. Inset, so the dot does not grow. */
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground-rgb, 0 0 0) / 0.18);
  }

  .ew-pcar__swatch--active .ew-pcar__swatch-dot {
    width: var(--ew-pcar-swatch-dot-active, 20px);
    height: var(--ew-pcar-swatch-dot-active, 20px);
  }

  /* A value the reference paints nothing for: transparent, a 1px #000000 outline on the
     inactive slots, none on the active one whose ring already draws the circle, and the
     value's own name clipped by it. Same rules and same measurements as
     `blocks/ew-gp-card.liquid`, taken off `shots/true/cat-eye-collection-true-1280.png`.

     No value on this section's rails currently lands here — the only homepage rail with
     swatches on is Bold & Vibrant, and all five of its products carry admin colours — so
     this is carried across to keep the two ladders identical rather than proven on live
     content. It cannot change what renders today; it only stops the two files drifting,
     which is exactly how the palette bug came to exist in both of them. */
  .ew-pcar__swatch-dot--blank {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #000000;
    background-color: transparent;
  }

  .ew-pcar__swatch--active .ew-pcar__swatch-dot--blank {
    border-width: 0;
  }

  .ew-pcar__swatch-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #000000;
    text-align: center;
  }

  /* Arrows over the track, invisible at rest — the reference measures visibility:hidden
     and reveals them on hover. ::after lifts the hit area to the 44px floor. */
  .ew-pcar__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--ew-pcar-arrow-size, 34px);
    height: var(--ew-pcar-arrow-size, 34px);
    padding: 8px;
    border: 0;
    border-radius: 9999px;
    background-color: var(--ew-pcar-arrow-bg, rgba(21, 21, 21, 0.79));
    color: var(--ew-pcar-arrow-color, #ffffff);
    cursor: pointer;
    transform: translateY(-50%);
    visibility: hidden;
    z-index: 2;
  }

  .ew-pcar__arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-pcar__arrow svg {
    width: var(--ew-pcar-arrow-icon, 18px);
    height: var(--ew-pcar-arrow-icon, 18px);
  }

  .ew-pcar__arrow--prev {
    inset-inline-start: var(--ew-pcar-arrow-inset, 8px);
  }

  .ew-pcar__arrow--next {
    inset-inline-end: var(--ew-pcar-arrow-inset, 8px);
  }

  .ew-pcar__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
  }

  .ew-pcar__wrap--arrows-desktop .ew-pcar__arrow {
    display: none;
  }

  .ew-pcar__wrap:focus-within .ew-pcar__arrow,
  .ew-pcar__arrow:focus-visible {
    visibility: visible;
  }

  .ew-pcar__arrow:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  .ew-pcar__dots {
    display: flex;
    justify-content: center;
    gap: var(--ew-pcar-dot-gap, 8px);
    margin-block-start: var(--ew-pcar-dot-space-mobile, 8px);
  }

  .ew-pcar__dot {
    position: relative;
    box-sizing: border-box;
    width: var(--ew-pcar-dot-size-mobile, 8px);
    height: var(--ew-pcar-dot-size-mobile, 8px);
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: var(--ew-pcar-dot-color, #151515);
    cursor: pointer;
  }

  .ew-pcar__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-pcar__dot[aria-selected='true'] {
    background-color: var(--ew-pcar-dot-active, #ffffff);
  }

  .ew-pcar__dot:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  .ew-pcar__empty {
    margin: 0;
    font-size: var(--font-size--sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--style-border-radius-sm);
    padding: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .ew-pcar {
      padding-block: var(--ew-pcar-pad-block-start-tablet, 32px)
        var(--ew-pcar-pad-block-end-tablet, 32px);
      padding-inline: var(--ew-pcar-pad-inline-start-tablet, 32px)
        var(--ew-pcar-pad-inline-end-tablet, 32px);
    }

    .ew-pcar__header {
      margin-block-end: var(--ew-pcar-header-gap-tablet, 16px);
    }

    .ew-pcar__heading {
      font-size: var(--ew-pcar-heading-size-tablet, 32px);
      line-height: var(--ew-pcar-heading-lh-tablet, 120%);
    }

    .ew-pcar__sub {
      font-size: var(--ew-pcar-sub-size-tablet, 16px);
      line-height: var(--ew-pcar-sub-lh-tablet, 180%);
    }

    .ew-pcar__track {
      grid-auto-columns: calc(
        (100% - (var(--ew-pcar-per-view-tablet, 3) - 1) * var(--ew-pcar-gap-tablet, 16px)) /
          var(--ew-pcar-per-view-tablet, 3)
      );
      gap: var(--ew-pcar-gap-tablet, 16px);
    }

    .ew-pcar__title {
      font-size: var(--ew-pcar-title-size-tablet, 16px);
    }

    .ew-pcar__prices {
      margin-block-end: var(--ew-pcar-price-gap-tablet, 4px);
    }

    .ew-pcar__price {
      font-size: var(--ew-pcar-price-size-tablet, 18px);
      line-height: var(--ew-pcar-price-lh-tablet, 180%);
    }

    .ew-pcar__compare {
      font-size: var(--ew-pcar-compare-size-tablet, 16px);
      line-height: var(--ew-pcar-price-lh-tablet, 180%);
    }

    .ew-pcar__dots {
      margin-block-start: var(--ew-pcar-dot-space, 12px);
    }

    .ew-pcar__dot {
      width: var(--ew-pcar-dot-size, 10px);
      height: var(--ew-pcar-dot-size, 10px);
    }
  }

  @media screen and (min-width: 990px) {
    .ew-pcar {
      padding-block: var(--ew-pcar-pad-block-start, 32px) var(--ew-pcar-pad-block-end, 32px);
      padding-inline: var(--ew-pcar-pad-inline-start, 64px) var(--ew-pcar-pad-inline-end, 64px);
    }

    .ew-pcar__header {
      margin-block-end: var(--ew-pcar-header-gap, 16px);
    }

    .ew-pcar__heading {
      font-size: var(--ew-pcar-heading-size, 36px);
      line-height: var(--ew-pcar-heading-lh, 130%);
    }

    .ew-pcar__sub {
      font-size: var(--ew-pcar-sub-size, 18px);
      line-height: var(--ew-pcar-sub-lh, 140%);
    }

    .ew-pcar__track {
      grid-auto-columns: calc(
        (100% - (var(--ew-pcar-per-view, 5) - 1) * var(--ew-pcar-gap, 16px)) /
          var(--ew-pcar-per-view, 5)
      );
      gap: var(--ew-pcar-gap, 16px);
    }

    .ew-pcar__title {
      font-size: var(--ew-pcar-title-size, 18px);
    }

    .ew-pcar__prices {
      margin-block-end: var(--ew-pcar-price-gap, 0px);
    }

    .ew-pcar__price {
      font-size: var(--ew-pcar-price-size, 22px);
      line-height: var(--ew-pcar-price-lh, 140%);
    }

    .ew-pcar__compare {
      font-size: var(--ew-pcar-compare-size, 16px);
      line-height: var(--ew-pcar-price-lh, 140%);
    }

    .ew-pcar__wrap--arrows-desktop .ew-pcar__arrow {
      display: flex;
    }

    .ew-pcar__wrap--dots-below-desktop .ew-pcar__dots {
      display: none;
    }
  }

  @media (hover: hover) {
    .ew-pcar__wrap:hover .ew-pcar__arrow {
      visibility: visible;
    }

    .ew-pcar__link:hover .ew-pcar__image--hover {
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ew-pcar__image--hover {
      transition: none;
    }
  }
/* END_SECTION:ew-product-carousel */

/* START_SECTION:ew-trust-bar (INDEX:10) */
/* Mobile first. Each breakpoint re-points the local --_* variables and the shared
     --ew-trust-* variables the block reads; the properties that consume them are declared
     once. EVERY fallback is the value this section rendered before the per-breakpoint
     settings existed, so a trust bar that sets none of them does not move by a pixel.

     A per-breakpoint variable whose source is absent resolves to the guaranteed-invalid
     value, which is exactly what makes `var(--x, <old default>)` fall through to the old
     default — that is the whole mechanism, not an accident. */
  .ew-trust-bar {
    --_track: var(--ew-track-m, minmax(0, 1fr));
    --_gap: var(--ew-gap-m, var(--ew-gap-d, 16px));
    --_pad-start: var(--ew-pad-start-m, var(--ew-pad-start-d, 24px));
    --_pad-end: var(--ew-pad-end-m, var(--ew-pad-end-d, 24px));
    --_title-size: var(
      --ew-title-m,
      var(--ew-title-d, var(--ew-trust-title-size, var(--font-size--sm)))
    );
    --_title-lh: var(--ew-title-lh-m, var(--ew-title-lh-d, 1.25));
    --_sub-size: var(--ew-sub-m, var(--ew-sub-d, var(--font-size--xs)));
    --_sub-lh: var(--ew-sub-lh-m, var(--ew-sub-lh-d, 1.25));

    --_body-size: var(--ew-body-m, var(--ew-body-d, var(--ew-trust-body-size, var(--font-size--sm))));
    --_body-lh: var(--ew-body-lh-m, var(--ew-body-lh-d, 1.4));

    --ew-trust-emoji-size: var(--ew-emoji-m, var(--ew-emoji-d, 24px));
    --ew-trust-icon-size: var(--ew-trust-icon-m, var(--ew-trust-icon-d, 24px));
    --ew-trust-item-gap: var(--ew-item-gap-m, var(--ew-item-gap-d, 10px));
    --ew-trust-card-radius: var(--ew-crad-m, var(--ew-crad-d));
    --ew-trust-card-pad-block: var(--ew-cpb-m, var(--ew-cpb-d));
    --ew-trust-card-pad-inline: var(--ew-cpi-m, var(--ew-cpi-d));
    /* The captured mobile row is deliberately asymmetric — 36px left, 24px right on
       blue-light. `docs/2B-DECISIONS.md` §5 says reproduce it, so mobile gets two
       settings where tablet and desktop share one. */
    --_pad-inline-start: var(--ew-pad-inline-start-m, 0px);
    --_pad-inline-end: var(--ew-pad-inline-end-m, 0px);

    display: grid;
    grid-template-columns: repeat(var(--ew-cols-mobile), var(--_track));
    gap: var(--_gap);
    justify-items: var(--ew-align, start);
    justify-content: var(--ew-row-justify, normal);
    padding-block: var(--_pad-start) var(--_pad-end);
    padding-inline: var(--_pad-inline-start) var(--_pad-inline-end);
    background-color: var(--ew-band-bg, transparent);
  }

  /* The colour-scheme class on this element would otherwise paint the whole row. Two
     classes so it outranks `.color-scheme-N` whichever order the bundle lands in. Cards
     stretch to fill their column so a row of them reads as one band of equal blocks. */
  .ew-trust-bar.ew-trust-bar--cards {
    background-color: var(--ew-band-bg, transparent);
    justify-items: stretch;
  }

  /* ── Overrides of the block's own rules ──────────────────────────────────────────────
     Two classes deep, so they outrank `.ew-trust-item*` in the block file whichever order
     the bundle lands in, and the block stays untouched. Each fallback is the block's own
     declared value. */
  .ew-trust-bar .ew-trust-item {
    justify-content: var(--ew-item-justify, normal);
    color: var(--ew-card-text-color, inherit);
  }

  .ew-trust-bar--cards .ew-trust-item {
    background-color: var(--ew-card-bg-color, var(--ew-trust-card-bg, transparent));
  }

  /* Easysight 2026-10-14: an unset icon colour is the brand red (--color-accent), the
     one accent this strip carries. */
  .ew-trust-bar .ew-trust-item__icon {
    color: var(--ew-icon-color, var(--color-accent, #bf1c1d));
  }

  .ew-trust-bar .ew-trust-item__title {
    font-size: var(--_title-size);
    font-weight: var(--ew-title-weight, 600);
    line-height: var(--_title-lh);
  }

  .ew-trust-bar .ew-trust-item__subtitle {
    font-size: var(--_sub-size);
    line-height: var(--_sub-lh);
    opacity: var(--ew-sub-opacity, 0.75);
  }

  /* The body copy's standoff from the headline. The block declares 6px; the captured
     card designs set the two solid against each other and carry the space in the line
     height instead. The fallback is the block's own value, so nothing moves untold. */
  /* The block sizes the body from one global variable with a hardcoded 1.4 line height —
     the captured cards run 16/140 at desktop, 12/180 at tablet and 18/140 on the phone,
     which one number cannot say. Every fallback below is the block's own value. */
  .ew-trust-bar .ew-trust-item__body {
    margin-block-start: var(--ew-title-gap, 6px);
    font-size: var(--_body-size);
    line-height: var(--_body-lh);
    opacity: var(--ew-body-opacity, 0.85);
  }

  @media screen and (min-width: 750px) {
    .ew-trust-bar {
      --_pad-inline-start: var(--ew-pad-inline-t, 0px);
      --_pad-inline-end: var(--ew-pad-inline-t, 0px);
      --_track: var(--ew-track-t, minmax(0, 1fr));
      --_gap: var(--ew-gap-t, var(--ew-gap-d, 16px));
      --_pad-start: var(--ew-pad-start-t, var(--ew-pad-start-d, 24px));
      --_pad-end: var(--ew-pad-end-t, var(--ew-pad-end-d, 24px));
      --_title-size: var(
        --ew-title-t,
        var(--ew-title-d, var(--ew-trust-title-size, var(--font-size--sm)))
      );
      --_title-lh: var(--ew-title-lh-t, var(--ew-title-lh-d, 1.25));
      --_sub-size: var(--ew-sub-t, var(--ew-sub-d, var(--font-size--xs)));
      --_sub-lh: var(--ew-sub-lh-t, var(--ew-sub-lh-d, 1.25));
      --_body-size: var(--ew-body-t, var(--ew-body-d, var(--ew-trust-body-size, var(--font-size--sm))));
      --_body-lh: var(--ew-body-lh-t, var(--ew-body-lh-d, 1.4));

      --ew-trust-emoji-size: var(--ew-emoji-t, var(--ew-emoji-d, 24px));
      --ew-trust-icon-size: var(--ew-trust-icon-t, var(--ew-trust-icon-d, 24px));
      --ew-trust-item-gap: var(--ew-item-gap-t, var(--ew-item-gap-d, 10px));
      --ew-trust-card-radius: var(--ew-crad-t, var(--ew-crad-d));
      --ew-trust-card-pad-block: var(--ew-cpb-t, var(--ew-cpb-d));
      --ew-trust-card-pad-inline: var(--ew-cpi-t, var(--ew-cpi-d));

      grid-template-columns: repeat(var(--ew-cols), var(--_track));
    }
  }

  @media screen and (min-width: 990px) {
    .ew-trust-bar {
      --_pad-inline-start: var(--ew-pad-inline-d, 0px);
      --_pad-inline-end: var(--ew-pad-inline-d, 0px);
      --_track: var(--ew-track-d, minmax(0, 1fr));
      --_gap: var(--ew-gap-d, 16px);
      --_pad-start: var(--ew-pad-start-d, 24px);
      --_pad-end: var(--ew-pad-end-d, 24px);
      --_title-size: var(--ew-title-d, var(--ew-trust-title-size, var(--font-size--sm)));
      --_title-lh: var(--ew-title-lh-d, 1.25);
      --_sub-size: var(--ew-sub-d, var(--font-size--xs));
      --_sub-lh: var(--ew-sub-lh-d, 1.25);
      --_body-size: var(--ew-body-d, var(--ew-trust-body-size, var(--font-size--sm)));
      --_body-lh: var(--ew-body-lh-d, 1.4);

      --ew-trust-emoji-size: var(--ew-emoji-d, 24px);
      --ew-trust-icon-size: var(--ew-trust-icon-d, 24px);
      --ew-trust-item-gap: var(--ew-item-gap-d, 10px);
      --ew-trust-card-radius: var(--ew-crad-d);
      --ew-trust-card-pad-block: var(--ew-cpb-d);
      --ew-trust-card-pad-inline: var(--ew-cpi-d);
    }
  }
/* END_SECTION:ew-trust-bar */

/* START_SECTION:ew-ugc-masonry (INDEX:11) */
.ew-ugc {
    /* Easysight 2026-10-14: the band is the palette's one off-white surface and the rule a
       quiet ink line, replacing Eyewinsome's blue-tinted greys (#F3F6FA / #CFD9E6). */
    background-color: var(--ew-ugc-band, var(--surface-fill, #f9f8f6));
    padding-block: var(--ew-ugc-pad-block-start-mobile, 32px)
      var(--ew-ugc-pad-block-end-mobile, 32px);
    padding-inline: var(--ew-ugc-pad-inline-start-mobile, 16px)
      var(--ew-ugc-pad-inline-end-mobile, 16px);
  }

  .ew-ugc__heading {
    margin: 0;
    font-size: var(--ew-ugc-heading-size-mobile, 20px);
    font-weight: 700;
    line-height: var(--ew-ugc-heading-lh-mobile, 120%);
    color: var(--ew-ugc-heading-color, #000000);
    text-align: start;
  }

  .ew-ugc__sub {
    margin-block-end: var(--ew-ugc-header-gap, 12px);
    font-size: var(--ew-ugc-sub-size-mobile, 14px);
    line-height: var(--ew-ugc-sub-lh-mobile, 140%);
    color: var(--ew-ugc-sub-color, #000000);
    text-align: start;
  }

  .ew-ugc__sub > :first-child {
    margin-block-start: 0;
  }

  .ew-ugc__sub > :last-child {
    margin-block-end: 0;
  }

  /* Easysight 2026-10-14: TWO columns on mobile. The three column stacks dissolve
     (display: contents) so all twelve cells flow, in order, into one 2-up grid; large
     cells drop to one track so every row pairs. Tablet and up keep the masonry below. */
  .ew-ugc__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ew-ugc-col-gap, 8px);
    row-gap: var(--ew-ugc-stack-gap, 8px);
    margin-block-end: var(--ew-ugc-grid-gap-below, 12px);
  }

  /* Each column is its own 2-up grid. A large cell spans both tracks, so consecutive small
     cells pair themselves and the masonry needs no measuring. */
  .ew-ugc__col {
    display: contents;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ew-ugc-col-gap, 8px);
    row-gap: var(--ew-ugc-stack-gap, 8px);
    align-content: start;
  }

  .ew-ugc__cell {
    box-sizing: border-box;
    min-width: 0;
    background-color: var(--ew-ugc-card-bg, #ffffff);
    border-radius: var(--ew-ugc-card-radius, 8px);
    padding: var(--ew-ugc-card-pad, 3px);
  }

  .ew-ugc__cell--large {
    grid-column: auto;
  }

  .ew-ugc__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .ew-ugc__link:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  .ew-ugc__media {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--ew-ugc-image-radius, 8px);
  }

  .ew-ugc__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ew-ugc__meta {
    display: block;
    padding: var(--ew-ugc-meta-pad-block, 2px) var(--ew-ugc-meta-pad-inline, 8px);
  }

  .ew-ugc__name {
    display: block;
    font-size: var(--ew-ugc-name-size-mobile, 14px);
    font-weight: 400;
    line-height: var(--ew-ugc-name-lh-mobile, 180%);
    color: var(--ew-ugc-name-color, #000000);
  }

  /* The price and its struck compare-at wrap onto a second line when the cell is too
     narrow to hold both — which is exactly what the reference does, and the whole of the
     lookbook's 64px tablet deficit. A two-track grid could not wrap, so the small cells
     stayed one price-row short of the design at 768 while the wide cells matched. Flex
     with wrapping reproduces it at every width with no breakpoint setting: at 1280 and at
     375 the cells are wide enough that both marks still sit on one line. */
  .ew-ugc__prices {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: var(--ew-ugc-price-column-gap, 8px);
    font-variant-numeric: tabular-nums;
  }

  .ew-ugc__price {
    font-size: var(--ew-ugc-price-size-mobile, 18px);
    font-weight: 700;
    line-height: var(--ew-ugc-price-lh-mobile, 180%);
    color: var(--ew-ugc-price-color, #000000);
  }

  .ew-ugc__compare {
    font-size: var(--ew-ugc-compare-size-mobile, 14px);
    font-weight: 400;
    line-height: var(--ew-ugc-price-lh-mobile, 180%);
    color: var(--ew-ugc-compare-color, #000000);
    text-decoration: line-through;
  }

  .ew-ugc__rule {
    padding-block: var(--ew-ugc-rule-space, 12px);
  }

  .ew-ugc__rule-line {
    display: block;
    width: 100%;
    height: var(--ew-ugc-rule-width, 2px);
    background-color: var(--ew-ugc-rule-color, rgb(var(--color-foreground-rgb) / 0.1));
  }

  .ew-ugc__cta-row {
    text-align: center;
  }

  /* A plain underlined text link, not a button: no fill, no border, no radius. The ::after
     lifts the hit area to the 44px floor on mobile, where the design's own padding is 0. */
  .ew-ugc__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: var(--ew-ugc-cta-size-mobile, 14px);
    font-weight: var(--ew-ugc-cta-weight, 500);
    line-height: var(--ew-ugc-cta-lh, 140%);
    color: var(--ew-ugc-cta-color, #151515);
    text-decoration: underline;
    background-color: transparent;
  }

  .ew-ugc__cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-ugc__cta:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentcolor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  /* The design's label carries a deliberate double space before the handle. HTML would
     collapse it, so the run of spaces is preserved rather than normalised away. */
  .ew-ugc__cta-text {
    white-space: pre-wrap;
  }

  .ew-ugc__cta-arrow {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    text-decoration: none;
  }

  .ew-ugc__empty {
    margin: 0;
    font-size: var(--font-size--sm);
    border: 1px dashed var(--color-border);
    border-radius: var(--style-border-radius-sm);
    padding: var(--gap-lg);
  }

  @media screen and (min-width: 750px) {
    .ew-ugc {
      padding-block: var(--ew-ugc-pad-block-start-tablet, 32px)
        var(--ew-ugc-pad-block-end-tablet, 32px);
      padding-inline: var(--ew-ugc-pad-inline-start-tablet, 32px)
        var(--ew-ugc-pad-inline-end-tablet, 32px);
    }

    .ew-ugc__heading {
      font-size: var(--ew-ugc-heading-size-tablet, 30px);
      line-height: var(--ew-ugc-heading-lh-tablet, 120%);
    }

    .ew-ugc__sub {
      font-size: var(--ew-ugc-sub-size-tablet, 16px);
      line-height: var(--ew-ugc-sub-lh-tablet, 180%);
    }

    .ew-ugc__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: var(--ew-ugc-row-gap, 16px);
    }

    .ew-ugc__col {
      display: grid;
    }

    .ew-ugc__cell--large {
      grid-column: span 2;
    }

    .ew-ugc__name {
      font-size: var(--ew-ugc-name-size-tablet, 14px);
      line-height: var(--ew-ugc-name-lh-tablet, 180%);
    }

    .ew-ugc__price {
      font-size: var(--ew-ugc-price-size-tablet, 18px);
      line-height: var(--ew-ugc-price-lh-tablet, 160%);
    }

    .ew-ugc__compare {
      font-size: var(--ew-ugc-compare-size-tablet, 14px);
      line-height: var(--ew-ugc-price-lh-tablet, 160%);
    }

    .ew-ugc__cta {
      padding: var(--ew-ugc-cta-pad-block, 12px) var(--ew-ugc-cta-pad-inline, 24px);
      font-size: var(--ew-ugc-cta-size-tablet, 16px);
    }
  }

  @media screen and (min-width: 990px) {
    .ew-ugc {
      padding-block: var(--ew-ugc-pad-block-start, 32px) var(--ew-ugc-pad-block-end, 32px);
      padding-inline: var(--ew-ugc-pad-inline-start, 64px) var(--ew-ugc-pad-inline-end, 64px);
    }

    .ew-ugc__heading {
      font-size: var(--ew-ugc-heading-size, 34px);
      line-height: var(--ew-ugc-heading-lh, 130%);
    }

    .ew-ugc__sub {
      font-size: var(--ew-ugc-sub-size, 18px);
      line-height: var(--ew-ugc-sub-lh, 140%);
    }

    .ew-ugc__name {
      font-size: var(--ew-ugc-name-size, 16px);
      line-height: var(--ew-ugc-name-lh, 140%);
    }

    .ew-ugc__price {
      font-size: var(--ew-ugc-price-size, 22px);
      line-height: var(--ew-ugc-price-lh, 140%);
    }

    .ew-ugc__compare {
      font-size: var(--ew-ugc-compare-size, 16px);
      line-height: var(--ew-ugc-price-lh, 140%);
    }

    .ew-ugc__cta {
      font-size: var(--ew-ugc-cta-size, 22px);
    }
  }
/* END_SECTION:ew-ugc-masonry */

/* START_SECTION:ez-azadi-bar (INDEX:13) */
/* Azadi sale bar. Ground #01411E, ink #F6F2E7 warm cream, gold #E3B85C.
     Zero interaction: no link, no button, no tabindex, no cursor change, no handler. */
  .az {
    --az-ground: #01411e;
    --az-ink: #f6f2e7;
    --az-gold: #e3b85c;
    --az-tick: rgba(227, 184, 92, 0.45);

    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    color: var(--az-ink);
    font-family: var(--font-body--family, 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
    background:
      linear-gradient(102deg, transparent 15%, rgba(255, 255, 255, 0.034) 45%, transparent 74%),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.017) 0 1px,
        rgba(0, 0, 0, 0.032) 1px 2px,
        transparent 2px 5px
      ),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #054c25 0%, #01411e 54%, #013818 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      inset 0 -1px 0 rgba(227, 184, 92, 0.34);
  }
  /* the cloth's tooth */
  .az::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.13;
  }

  .az__in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 7px 14px;
  }

  /* the lockup — the occasion sits as a mark at the edge; nothing rides the track */
  .az__mark {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
  }
  .az__moon {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    fill: var(--az-gold);
    display: block;
  }
  .az__lock {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .az__eyebrow {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 7.5px;
    line-height: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--az-gold);
    white-space: nowrap;
  }
  .az__name {
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--az-ink);
    white-space: nowrap;
  }
  .az__rule {
    flex: 0 0 1px;
    width: 1px;
    height: 24px;
    margin: 0 9px;
    background: rgba(227, 184, 92, 0.28);
  }

  /* the sentence — one line, never wrapping. a wrap breaks the bar height. */
  .az__copy {
    flex: 0 0 100%;
    min-width: 0;
    order: -1;
    margin: 0 0 5px;
    text-align: center;
    font-size: 11.5px;
    line-height: 15px;
    font-weight: 400;
    letter-spacing: 0.002em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .az__copy[hidden] {
    display: none;
  }
  .az__copy b,
  .az__copy strong {
    font-weight: 700;
    color: var(--az-gold);
  }
  .az__copy p {
    margin: 0;
    display: inline;
  }

  /* the rail — one rule that THICKENS. no groove, no container, no fill in a track. */
  .az__module {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* the margin-top books the annotation band: the today caption and its leader live
     ABOVE the rail in absolute position. */
  .az__rail {
    position: relative;
    height: 5px;
    margin-top: 15px;
  }
  /* still to come — a hairline */
  .az__rail::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1.5px;
    margin-top: -0.75px;
    background: rgba(246, 242, 231, 0.3);
  }
  /* done — a flat solid band, square ends, no rounding, no gloss */
  .az__done {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--pos);
    z-index: 1;
    background: var(--az-ink);
    animation: az-fill 820ms cubic-bezier(0.22, 0.85, 0.28, 1) 140ms both;
  }
  /* the measure — faint unlabelled ticks at the quarters. a ruler, not a grid. */
  .az__rail::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: linear-gradient(
      90deg,
      transparent calc(25% - 0.5px),
      var(--az-tick) calc(25% - 0.5px) calc(25% + 0.5px),
      transparent calc(25% + 0.5px) calc(50% - 0.5px),
      var(--az-tick) calc(50% - 0.5px) calc(50% + 0.5px),
      transparent calc(50% + 0.5px) calc(75% - 0.5px),
      var(--az-tick) calc(75% - 0.5px) calc(75% + 0.5px),
      transparent calc(75% + 0.5px)
    );
  }

  /* today — an annotation on a leader line, not an object on the rail */
  .az__now {
    position: absolute;
    left: var(--pos);
    bottom: 100%;
    z-index: 3;
    width: 1px;
    height: 6px;
    margin-left: -0.5px;
    background: rgba(227, 184, 92, 0.85);
    animation: az-annot 380ms cubic-bezier(0.2, 0.8, 0.3, 1) 800ms both;
  }
  .az__now b {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: block;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 8.5px;
    line-height: 9px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--az-gold);
    white-space: nowrap;
  }
  .az__now[data-anchor='mid'] b {
    transform: translateX(-50%);
  }
  .az__now[data-anchor='start'] b {
    transform: none;
  }
  .az__now[data-anchor='end'] b {
    transform: translateX(-100%);
  }

  /* the endpoints — passed vs coming told by height AND inversion, never tone alone */
  .az__end {
    position: absolute;
    top: 50%;
    z-index: 4;
    line-height: 0;
  }
  .az__end--l {
    left: 0;
  }
  .az__end--r {
    right: 0;
  }
  .az__end > i {
    display: block;
    transform: translateY(-50%);
    font-style: normal;
  }
  .az__end[data-state='coming'] > i,
  .az__end--l[data-state='today'] > i {
    width: 2px;
    height: 12px;
    background: var(--az-ink);
  }
  .az__end[data-state='passed'] > i {
    width: 3px;
    height: 9px;
    background: var(--az-ground);
  }
  .az__end--r[data-state='today'] > i {
    width: 3px;
    height: 12px;
    background: var(--az-ground);
  }

  /* the dates */
  .az__dates {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 4px;
  }
  .az__date {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 10.5px;
    line-height: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--az-ink);
    font-variant-numeric: tabular-nums;
  }
  .az__date[data-state='passed'] {
    color: rgba(246, 242, 231, 0.44);
  }

  @keyframes az-fill {
    from {
      width: 0;
    }
  }
  @keyframes az-annot {
    from {
      opacity: 0;
      transform: translateY(3px);
    }
  }

  @media screen and (min-width: 360px) {
    .az__copy {
      font-size: 12.5px;
    }
  }

  /* Desktop: one centred group. Pushed to opposite ends of a 1280px bar the parts read
     as stranded objects with a dead middle (found by rendering, kept). */
  @media screen and (min-width: 750px) {
    .az__in {
      flex-wrap: nowrap;
      justify-content: center;
      max-width: 1180px;
      margin: 0 auto;
      padding: 9px 32px 11px;
    }
    .az__copy {
      flex: 0 1 auto;
      order: 0;
      margin: 0 0 0 20px;
      text-align: left;
      font-size: 14px;
      line-height: 19px;
    }
    .az__module {
      flex: 0 0 400px;
      margin-left: 38px;
    }
    .az__rule {
      height: 27px;
      margin: 0 0 0 11px;
    }
    .az__moon {
      width: 13px;
      height: 13px;
    }
    .az__eyebrow {
      font-size: 8.5px;
      line-height: 10px;
    }
    .az__name {
      font-size: 13px;
      line-height: 15px;
    }
    .az__date {
      font-size: 11px;
      line-height: 13px;
    }
    .az__now b {
      font-size: 9px;
    }
  }
  @media screen and (min-width: 1040px) {
    .az__module {
      flex: 0 0 440px;
      margin-left: 52px;
    }
    .az__copy {
      margin-left: 26px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .az__done,
    .az__now {
      animation: none !important;
    }
  }
/* END_SECTION:ez-azadi-bar */

/* START_SECTION:ez-browse-tiles (INDEX:14) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-browse {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_container: var(--size-container, 1280px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-sm: var(--radius-sm, 4px);
    --_aspect-tile: var(--aspect-tile, 4 / 3);
    /* Deliberately BESPOKE, minted under a PRIVATE name (never under a canon token name —
       the bug-114 class): a 2:3 tall-portrait tile rung. It is OFF the canon aspect ladder
       (nearest canon portrait = --aspect-lifestyle 4/5) and is the owner-locked S9 style-tile
       intent. BANKED as a post-freeze canon note; not written into design_system.md. */
    --_aspect-portrait-tall: 2 / 3;
    /* ON the canon ladder — the 1:1 rung, read through a structural private name so a square
       TILE never has to borrow the circle style's geometric 1:1 allowance. */
    --_aspect-square: var(--aspect-product, 1 / 1);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_lift: var(--surface-lift, #f4efe4);

    padding-block: var(--_section-y);
    background: var(--_surface);
    color: var(--_text);
    /* [B8] contain any sub-pixel/scroll-snap width leakage — the tile row scrolls INTERNALLY;
       clip (not hidden) never widens the page and is position:sticky-safe. */
    overflow-x: clip;
  }

  .ez-browse__inner {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_pad-x);
  }

  /* ---- S4 heading zone -------------------------------------------------- */
  .ez-browse__head { margin-block-end: var(--_heading-gap); }
  .ez-browse__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ez-browse__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--_gutter);
  }
  .ez-browse__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
  }
  /* ---- Tile row: mobile = native scroll-snap with edge-peek -------------- */
  .ez-browse__grid {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ez-browse__grid::-webkit-scrollbar { display: none; }
  .ez-browse__grid > .ez-browse-tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc((100% - var(--_gutter) - var(--ez-peek, 24px)) / 3);
  }
  .ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
    width: calc((100% - (var(--_gutter) * 3) - var(--ez-peek, 24px)) / 4);
  }

  /* [S4/S9 additive] MOBILE GRID mode — a static N-up grid instead of the snap rail. The
     `[v1.6]` tile-row carve-out (component-contracts C2) makes the snap+peek rail the DEFAULT
     wayfinding grammar and that stays untouched; this mode exists because the home S4 (2x2) and
     S9 (2x3) tile sets are owner-locked as comparison GRIDS on phone — a controlled set the
     buyer reads at once, not a graze row. Snap/peek are dropped wholesale in this mode (a grid
     has nothing to snap to), so no half-transport is left behind. */
  .ez-browse--m-grid .ez-browse__grid {
    display: grid;
    grid-template-columns: repeat(var(--ez-mcols, 2), 1fr);
    row-gap: var(--_gutter);
    overflow: visible;
    scroll-snap-type: none;
  }
  .ez-browse--m-grid .ez-browse__grid > .ez-browse-tile,
  .ez-browse--m-grid.ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
    width: auto;
    scroll-snap-align: none;
  }
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--touch-gap, 8px);
  }
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse__grid > .ez-browse-tile,
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse-tile__link {
    min-width: 0;
  }
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse-tile__label {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* ---- C4 image tile ---------------------------------------------------- */
  .ez-browse-tile { list-style: none; }
  .ez-browse-tile__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--_stack-sm);
    color: inherit;
    text-decoration: none;
  }
  /* Press + hover cues ride the ANCHOR only. A tile with no destination renders as a <div>
     (the C4 conditional-wrap pattern) and must carry NO interactive cue — a press-scale on a
     non-navigating tile is a dead affordance (§2.8 all-or-none clickability). */
  a.ez-browse-tile__link:active { transform: scale(var(--_press)); }

  .ez-browse-tile__media {
    width: 100%;
    aspect-ratio: var(--_aspect-selected-m, var(--_aspect-selected-d, var(--_aspect-tile)));
    overflow: hidden;
    border-radius: var(--_radius-md);
    background: var(--_surface);
    border: var(--_hairline) solid var(--_line);
    transition: background-color var(--_dur-base) var(--_ease);
  }
  /* [S4/S9 additive] TILE ASPECT — a BOUNDED choice of canon aspect rungs (§A3 counter-rule:
     constrained choice, never a free numeric primitive). `tile` is the default and reads the
     canon --aspect-tile 4/3, so every pre-existing instance renders byte-identically.
     `portrait` 2:3 is OFF-CANON (nearest canon portrait rung = --aspect-lifestyle 4/5) — it is
     the owner-locked S9 intent; BANKED as a post-freeze canon note, not written into canon.
     Declared BEFORE the circle rule so the circle style still wins at equal specificity. */
  .ez-browse--ar-square { --_aspect-selected-d: var(--_aspect-square); }
  .ez-browse--ar-tile { --_aspect-selected-d: var(--_aspect-tile); }
  .ez-browse--ar-editorial { --_aspect-selected-d: var(--aspect-editorial, 3 / 2); }
  .ez-browse--ar-lifestyle { --_aspect-selected-d: var(--aspect-lifestyle, 4 / 5); }
  .ez-browse--ar-portrait { --_aspect-selected-d: var(--_aspect-portrait-tall); }
  .ez-browse--mar-square { --_aspect-selected-m: var(--_aspect-square); }
  .ez-browse--mar-tile { --_aspect-selected-m: var(--_aspect-tile); }
  .ez-browse--mar-editorial { --_aspect-selected-m: var(--aspect-editorial, 3 / 2); }
  .ez-browse--mar-lifestyle { --_aspect-selected-m: var(--aspect-lifestyle, 4 / 5); }
  .ez-browse--mar-portrait { --_aspect-selected-m: var(--_aspect-portrait-tall); }
  .ez-browse--style-circle .ez-browse-tile__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full, 50%);
  }
  .ez-browse-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ez-browse-tile__media picture { display: block; width: 100%; height: 100%; }
  .ez-browse--style-circle .ez-browse-tile__img { object-fit: contain; }
  .ez-browse-tile__placeholder { width: 100%; height: 100%; }
  .ez-browse-tile__placeholder svg { width: 100%; height: 100%; }

  /* [bug-165] NO cream bed behind tile media on hover. Catalog imagery is a pure-white cutout, so
     a warm lift panel renders the cutout's own white box as a visible rectangle. Canon already
     retired the lift as a card hover cue (§6 C2 v1.5) — the media zoom is the cue. Cutouts sit on
     canvas white, never on a cream panel. Mirrors the same removal in blocks/ez-browse-tiles.liquid. */

  .ez-browse-tile__label {
    margin: 0;
    text-align: center;
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
    font-weight: var(--_w-medium);
  }
  /* [C4] Image-tile style: the label is an OVERLAID bounded chip — design_system.md §6 C4
     default (a bounded chip legible over a clean image, NOT a full-image scrim; --radius-sm 4px
     per the §9.3 overlay-label grammar; the whole tile is the link, so the chip is not
     separately interactive). The circle/category style keeps the label BENEATH (the C4
     category / busy-photo fallback — an overlay chip on a round contain-fit icon is not the
     image-tile grammar; the audit notes beneath works for shape/category cuts). */
  .ez-browse--style-tile .ez-browse-tile__label {
    position: absolute;
    inset-block-end: var(--_stack-sm);
    inset-inline-start: var(--_stack-sm);
    padding: 2px var(--space-stack-sm, 8px); /* 2px = chip micro-inset (allowlisted) */
    border-radius: var(--_radius-sm);
    background: var(--_surface);
    color: var(--_text);
    text-align: start;
  }

  /* ---- 750 seam: desktop grid (design_system.md §2.3) ------------------- */
  @media screen and (min-width: 750px) {
    .ez-browse {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-browse--desktop-width .ez-browse__grid {
      box-sizing: border-box;
      padding-inline: calc((100% - var(--ez-desktop-width, 100%)) / 2);
    }
    .ez-browse__heading { font-size: var(--type-h2-size, 1.75rem); }
    .ez-browse-tile__media { aspect-ratio: var(--_aspect-selected-d, var(--_aspect-tile)); }
    .ez-browse--style-tile .ez-browse__grid {
      display: grid;
      grid-template-columns: repeat(var(--ez-cols, 6), 1fr);
      row-gap: var(--_gutter);
      overflow: visible;
    }
    .ez-browse--m-grid.ez-browse--mcols-4.ez-browse--style-tile .ez-browse__grid {
      grid-template-columns: repeat(var(--ez-cols, 4), minmax(0, 1fr));
      gap: var(--_gutter);
    }
    .ez-browse--style-circle .ez-browse__grid {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: var(--_heading-gap);
      overflow: visible;
    }
    .ez-browse--style-tile .ez-browse__grid > .ez-browse-tile,
    .ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
      width: auto;
    }
    .ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
      flex: 0 0 calc((100% - (var(--_gutter) * (var(--ez-cols, 6) - 1))) / var(--ez-cols, 6));
    }
  }

  /* [S4/S9 additive] grid-end view-all (the A-2 standalone link as the coverage backstop —
     never a 5th tile). Start-aligned to match the section's head. */
  .ez-browse__foot { display: flex; justify-content: flex-start; }

  @media (prefers-reduced-motion: reduce) {
    a.ez-browse-tile__link:active { transform: none; }
    .ez-browse * { transition-duration: 0.01ms !important; }
  }
/* END_SECTION:ez-browse-tiles */

/* START_SECTION:ez-compare-pdp (INDEX:15) */
.ez-cmp-pdp__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
    padding: 0.6rem 1rem; background: #1f2328; color: #f2f4f6;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem;
    border-block-start: 2px solid #3a4048;
  }
  .ez-cmp-pdp__num { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
  .ez-cmp-pdp__headnote { color: #aeb6bf; }
  .ez-cmp-pdp__head .ez-cmp-pdp__k { font-size: 0.72rem; }
  .ez-cmp-pdp { padding: 1.25rem 1.25rem 1.75rem; background: #fafafa; font-size: 0.95rem; line-height: 1.55; }
  .ez-cmp-pdp__lead { margin: 0 0 1rem; max-width: 62ch; color: #333; }
  .ez-cmp-pdp__links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
  .ez-cmp-pdp__link {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1.1rem; border-radius: 6px; text-decoration: none;
    font-weight: 600; border: 1px solid transparent;
  }
  .ez-cmp-pdp__link--old { background: #fdf3e0; color: #6b4a12; border-color: #e2c082; }
  .ez-cmp-pdp__link--new { background: #e7f7ee; color: #0f5a30; border-color: #92d6ac; }
  .ez-cmp-pdp__k {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem;
    font-weight: 700; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 3px;
  }
  .ez-cmp-pdp__link--old .ez-cmp-pdp__k { background: #d9911f; color: #241a05; }
  .ez-cmp-pdp__link--new .ez-cmp-pdp__k { background: #22b866; color: #05210f; }
  .ez-cmp-pdp__list { margin: 0; padding-inline-start: 1.1rem; max-width: 72ch; color: #333; }
  .ez-cmp-pdp__list li { margin-bottom: 0.5rem; }
  .ez-cmp-pdp__list em { color: #8a5a00; font-style: normal; font-weight: 600; }
/* END_SECTION:ez-compare-pdp */

/* START_SECTION:ez-compare-slot (INDEX:16) */
.ez-cmp {
    display: block;
    margin: 0;
  }
  .ez-cmp__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #1f2328;
    color: #f2f4f6;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.3;
    border-block-start: 2px solid #3a4048;
  }
  .ez-cmp__bar--old { background: #4a3410; border-block-start-color: #b8801f; }
  .ez-cmp__bar--new { background: #103a1f; border-block-start-color: #1f9d55; }
  .ez-cmp__bar--foot { border-block-start: none; border-block-end: 2px solid #1f9d55; }
  .ez-cmp__tag {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.72rem;
    background: #565c66;
    color: #fff;
  }
  .ez-cmp__tag--old { background: #d9911f; color: #241a05; }
  .ez-cmp__tag--new { background: #22b866; color: #05210f; }
  .ez-cmp__label { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
  .ez-cmp__note { color: #aeb6bf; }
  .ez-cmp__bar--old .ez-cmp__note { color: #e6c98f; }
  .ez-cmp__bar--new .ez-cmp__note { color: #8fe6b4; }
  .ez-cmp__body {
    padding: 1rem 1.25rem;
    background: #fafafa;
    border-block-end: 1px solid #e3e3e3;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .ez-cmp__body a { color: #1a3d8f; text-decoration: underline; }
  .ez-cmp__stage { position: relative; }
/* END_SECTION:ez-compare-slot */

/* START_SECTION:ez-comparison-table (INDEX:17) */
/* Design-system tokens -> section-scoped private aliases (theme-foundation.md §A1). */
  .ez-ct {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_container: var(--size-container, 1280px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-sm: var(--space-inset-sm, 12px);
    --_radius-md: var(--radius-md, 8px);
    --_icon: var(--size-icon-md, 24px);
    --_hairline: var(--stroke-hairline, 1px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_lift: rgb(var(--color-foreground-rgb, 18 18 18) / 0.05); /* PRIVATE ~5%-ink category-row tint — deliberately NOT the warm --surface-lift step (see [C9] below); un-aliased 2026-07-13 so the token root sheet's --surface-lift cannot hijack it (bug-114 class). */
    /* [C9] the FEATURED (recommended) column reads as a highlighted column CARD — a clearly
       visible warm-neutral tonal step (§3.7 surface-lift), NOT the ~5% --_lift used for category
       rows (too faint to read as "the recommended one"), and NOT a saturated band (§9.2). Falls
       to a concrete warm neutral; the token root sheet's --surface-lift (#f4efe4) wins at :root. */
    --_featured-fill: var(--surface-lift, #f4efe4);
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Mobile reflow = horizontal scroll (grid stays intact) ------------ */
  .ez-ct__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* [P2 — audit block 13] Self-hiding right-edge scroll shadow (local/scroll background technique):
       hints "more columns -> scroll" and disappears once scrolled to the end. The cover layer
       (background-attachment:local) rides with the content and masks the shadow layer (attachment
       fixed to the viewport inline-end) when the end is reached. No left hint needed (first column is
       pinned). No JS; when the table fits (no overflow) the cover sits over the shadow so nothing shows. */
    background:
      linear-gradient(to left, var(--_surface), var(--_surface)) 100% 0 / 24px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.10), rgb(0 0 0 / 0)) 100% 0 / 14px 100% no-repeat;
    background-attachment: local, scroll;
  }

  /* ---- Table ------------------------------------------------------------ */
  .ez-ct__table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: center;
  }
  .ez-ct__corner {
    border: 0;
    background: transparent;
  }
  .ez-ct__colhead {
    padding: var(--_inset-sm);
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--_w-semibold);
    color: var(--_text);
    border-block-end: var(--_hairline) solid var(--_line);
    vertical-align: middle;
  }

  /* Row cells (rendered by ez-comparison-row.liquid) */
  .ez-ct__rowlabel {
    padding: var(--_inset-sm);
    text-align: start;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-medium);
    color: var(--_text);
    border-block-end: var(--_hairline) solid var(--_line);
    white-space: nowrap;
  }
  .ez-ct__cell {
    padding: var(--_inset-sm);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
    color: var(--_muted);
    border-block-end: var(--_hairline) solid var(--_line);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
  }
  .ez-ct__table tbody tr:last-child .ez-ct__rowlabel,
  .ez-ct__table tbody tr:last-child .ez-ct__cell {
    border-block-end: 0;
  }

  /* [P1 mobile — audit block 13] Sticky first column. The row-label (+ the empty top-left corner,
     so the header row stays aligned above it) pins to the inline-start edge while the value columns
     scroll, so a phone reader never loses which row they are on — the comparison's whole job on the
     primary (mobile) surface. The opaque surface background covers the value cells scrolling
     underneath; a hairline on the inline-end edge separates the pinned column while it is stuck.
     z-index keeps the pinned cells above the scrolling ones. */
  .ez-ct__corner,
  .ez-ct__rowlabel {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--_surface);
    border-inline-end: var(--_hairline) solid var(--_line);
  }

  /* [C9] Featured column = ONE clearly-visible tonal surface-lift step (never a saturated band) */
  .ez-ct__col--featured {
    background: var(--_featured-fill);
  }
  .ez-ct__cell--featured {
    background: var(--_featured-fill);
    color: var(--_text);
    font-weight: var(--_w-medium);
  }
  .ez-ct__colhead.ez-ct__col--featured {
    border-start-start-radius: var(--_radius-md);
    border-start-end-radius: var(--_radius-md);
  }
  .ez-ct__table tbody tr:last-child .ez-ct__cell--featured {
    border-end-start-radius: var(--_radius-md);
    border-end-end-radius: var(--_radius-md);
  }

  /* Category-divider row (a full-width sub-heading) */
  .ez-ct__cat {
    padding: var(--_inset-sm);
    text-align: start;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--_muted);
    background: var(--_lift);
    border-block-end: var(--_hairline) solid var(--_line);
  }

  /* Check / cross glyphs (B4 line-art, §3.4) */
  .ez-ct__mark {
    inline-size: var(--_icon);
    block-size: var(--_icon);
    display: inline-block;
    vertical-align: middle;
  }
  .ez-ct__mark--no { opacity: 0.5; }

  /* ---- 750 seam (design_system.md §2.3) --------------------------------- */
  @media screen and (min-width: 750px) {
    .ez-ct {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
      --_inset-sm: var(--space-inset-md, 16px);
    }
    .ez-ct__colhead { font-size: var(--type-h3-size, 1.125rem); }
    .ez-ct__rowlabel,
    .ez-ct__cell { font-size: var(--type-body-size, 1rem); }
  }
/* END_SECTION:ez-comparison-table */

/* START_SECTION:ez-curation-handful (INDEX:18) */
/* The .ez-curation shell + head + grid + empty CSS is owned by ez-curation-list.liquid (same ns,
     bundled once). This file adds only the handful-specific hero band + the H1 size bump. */

  /* The page H1 (curation name) reads more prominent than the tail's H2 -- both share
     .ez-curation__heading (h2-sized), so bump only the handful's heading to the H1 rung. */
  .ez-curation--handful .ez-curation__heading {
    font-size: var(--type-h1-size, 1.75rem);
    line-height: var(--type-h1-line, 1.15);
  }

  .ez-curation__hero {
    margin: 0 0 var(--space-heading-gap, 24px);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--surface-fill, #f9f8f6);
    aspect-ratio: var(--aspect-editorial, 3 / 2);
    max-block-size: 46svh;
  }
  .ez-curation__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_SECTION:ez-curation-handful */

/* START_SECTION:ez-curation-list (INDEX:19) */
/* ---------------------------------------------------------------------------
     Design-system tokens resolved ONCE into section-scoped private aliases (the
     theme-foundation §A1 pattern): each reads the canonical N3 token and falls back
     to the provisional value (structure/motion) or the live scheme token (colour
     roles). The :root definition WINS over the fallback, so an N2 retune flows
     through with zero edits here. Components below read only the --_ aliases.
     --------------------------------------------------------------------------- */
  .ez-curation {
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_container: var(--size-container, 1280px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_h2-size: var(--type-h2-size, 1.375rem);
    --_h2-line: var(--type-h2-line, 1.2);
    --_eyebrow-size: var(--type-eyebrow-size, 0.75rem);
    --_eyebrow-line: var(--type-eyebrow-line, 1.3);
    --_body-size: var(--type-body-size, 1rem);
    --_body-line: var(--type-body-line, 1.5);
    --_w-semibold: var(--type-weight-semibold, 600);
    /* bespoke colour roles -> live theme scheme token fallback (resolves identically to :root) */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_text-muted: var(--color-text-muted, var(--color-foreground-muted));
  }

  /* ===== Shell outer + inner (mirrors ez-shell §6 S1; ez-shell's class list does not include this ns) === */
  .ez-curation {
    padding-block: var(--space-section-y, 32px);
    background: var(--color-surface, var(--color-background));
    color: var(--color-text, var(--color-foreground));
  }
  .ez-curation__inner {
    max-width: var(--size-container, 1280px);
    margin-inline: auto;
    padding-inline: var(--ez-shell-pad-x, 16px);
  }

  /* ===== Head zone (mirrors ez-shell §6 S4 for this ns): eyebrow + heading + space-between view-all row === */
  .ez-curation__head { margin-block-end: var(--space-heading-gap, 24px); }
  .ez-curation__eyebrow {
    margin: 0 0 var(--space-stack-xs, 4px);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
  }
  .ez-curation__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--type-weight-semibold, 600);
  }
  .ez-curation__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-gutter, 12px);
  }

  /* ===== The continue-into GRID (design_system.md §2.5 product-grid role): 2-up -> 3-up @750 -> columns @990.
     Mirrors the ez-product-rail grid-mode values; classes are section-owned here so the transport is correct
     (no bug-158 emitter/selector mismatch -- this file owns both halves). The .ez-card look is inherited from
     the globally-bundled ez-product-card CSS. ============================================================= */
  .ez-curation__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-gutter, 12px);
    row-gap: var(--space-heading-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-curation__grid > .ez-card { width: auto; }

  .ez-curation__empty {
    margin: 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    color: var(--color-text-muted, var(--color-foreground-muted));
  }

  /* ---- 750 seam (design_system.md §2.3): desktop heading-gap/gutter flip at :root; grid -> 3-up ---------- */
  @media screen and (min-width: 750px) {
    .ez-curation__grid { grid-template-columns: repeat(3, 1fr); }
  }
  /* ---- 990 seam: grid -> the configured desktop column count ------------------------------------------- */
  @media screen and (min-width: 990px) {
    .ez-curation__grid { grid-template-columns: repeat(var(--ez-cols, 4), 1fr); }
  }
/* END_SECTION:ez-curation-list */

/* START_SECTION:ez-curations (INDEX:20) */
/* ---------------------------------------------------------------------------
     Design-system tokens resolved ONCE into section-scoped private aliases
     (execution-system §A1): canonical N3 token NAME + provisional fallback
     (structure/motion) or the live scheme token (colour roles). The :root sheet
     WINS over each fallback, so an N2 retune flows through with zero edits here.
     --------------------------------------------------------------------------- */
  .ez-cur {
    --_gutter: var(--space-gutter, 12px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_radius-md: var(--radius-md, 8px);
    --_dur-base: var(--motion-functional, 200ms);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_press: var(--motion-press-scale, 0.98);
    --_zoom: var(--motion-hover-zoom, 1.03);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));

    /* --_private: the §6 C5 edge-peek, pinned to the §2.1 inset rung (inside the 16-24 band).
       Deliberately NOT a merchant setting -- a peek width is a design primitive, not content. */
    --_peek: var(--space-inset-md, 16px);
  }

  /* ===== Shell outer + inner (mirrors ez-shell §6 S1; ez-shell's class list does not include this ns) === */
  .ez-cur {
    padding-block: var(--space-section-y, 32px);
    background: var(--color-surface, var(--color-background));
    color: var(--color-text, var(--color-foreground));
    /* clip the scroll-snap rail's overflow; the popup host is emitted OUTSIDE this element (bug-159) */
    overflow: hidden;
  }
  .ez-cur__inner {
    max-width: var(--size-container, 1280px);
    margin-inline: auto;
    padding-inline: var(--ez-shell-pad-x, 16px);
  }

  /* ===== Head zone (mirrors ez-shell §6 S4 for this ns): eyebrow + heading + space-between view-all === */
  .ez-cur__head { margin-block-end: var(--space-heading-gap, 24px); }
  .ez-cur__eyebrow {
    margin: 0 0 var(--space-stack-xs, 4px);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
  }
  .ez-cur__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
  }
  .ez-cur__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--_gutter);
  }

  /* ===== The door rail — mobile scroll-snap tile-row, NO chrome (§6 C2 wayfinding carve-out) ==== */
  .ez-cur__rail {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scroll-padding-inline-start: var(--_peek);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ez-cur__rail::-webkit-scrollbar { display: none; }

  .ez-cur__cell {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* edge peek: show cols_m cells + a sliver of the previous and next */
    width: calc((100% - (var(--_gutter) * (var(--ez-cur-cols-m, 2) - 1)) - (var(--_peek) * 2)) / var(--ez-cur-cols-m, 2));
  }

  /* Owner-style BIG peek (half of the next door), gated behind data-ez-cur-peek="half" (a constrained
     schema CHOICE, not a raw peek primitive). Flush start; the half-door reveals on the trailing edge.
     Specificity (0,2,0) wins over the base .ez-cur__cell. */
  .ez-cur[data-ez-cur-peek="half"] .ez-cur__rail { scroll-padding-inline-start: 0; }
  .ez-cur[data-ez-cur-peek="half"] .ez-cur__cell {
    width: calc((100% - (var(--_gutter) * var(--ez-cur-cols-m, 1))) / (var(--ez-cur-cols-m, 1) + 0.5));
  }

  /* ===== The door — ONE interactive element (§6 C1), nothing interactive nested inside it ======= */
  .ez-cur__door {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--_text);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-cur__thumb {
    position: relative;
    display: block;
    aspect-ratio: var(--ez-cur-door-aspect, 4 / 5);
    border-radius: var(--_radius-md);
    overflow: hidden;
    background: var(--surface-fill, #f9f8f6);
  }
  .ez-cur__thumb-img,
  .ez-cur__thumb-ph {
    display: block;
    width: 100%;
    height: 100%;
  }
  .ez-cur__thumb-img {
    object-fit: cover;
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-cur__thumb-ph svg { width: 100%; height: 100%; object-fit: cover; }
  .ez-cur__name {
    display: block;
    margin-block-start: var(--_stack-sm);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-medium);
    color: var(--_text);
  }

  /* the door COMMITS (it opens the modal / navigates) -> it presses (§7 press carve-out) */
  .ez-cur__door:active { transform: scale(var(--_press)); }
  /* hover is a bonus, never the sole affordance (§2.8 [v1.4]): a whole-thumb zoom, not a lift */
  @media (hover: hover) {
    .ez-cur__door:hover .ez-cur__thumb-img { transform: scale(var(--_zoom)); }
  }

  /* ===== 750 seam (design_system.md §2.3): desktop re-lays as a grid, no horizontal scroll ====== */
  @media screen and (min-width: 750px) {
    .ez-cur { --_gutter: var(--space-gutter, 16px); }
    .ez-cur__rail {
      display: grid;
      grid-template-columns: repeat(var(--ez-cur-cols-d, 4), 1fr);
      column-gap: var(--_gutter);
      row-gap: var(--space-heading-gap, 32px);
      overflow: visible;
      scroll-snap-type: none;
      scroll-padding-inline-start: 0;
    }
    .ez-cur__cell,
    .ez-cur[data-ez-cur-peek="half"] .ez-cur__cell { width: auto; }
  }

  /* ===== Reduced motion — no press, no zoom animation (the instant snap is a state change, not motion) === */
  @media (prefers-reduced-motion: reduce) {
    .ez-cur__rail { scroll-behavior: auto; }
    .ez-cur__door:active { transform: none; }
    .ez-cur__door,
    .ez-cur__thumb-img { transition-duration: 0.01ms; }
  }
/* END_SECTION:ez-curations */

/* START_SECTION:ez-editorial-band (INDEX:21) */
/* Design-system tokens -> section-scoped private aliases with provisional fallbacks
     (theme-foundation.md §A1). Components below read only the --_ aliases. */
  .ez-eb {
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-md: var(--space-stack-md, 12px);
    --_container: var(--size-container, 1280px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_measure: 46ch;
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));

    /* [law 1] bounded, never 100vh. Mobile defaults to 4:5; the cap is the only viewport unit. */
    --_ar: var(--ez-eb-aspect-m, var(--aspect-lifestyle, 4 / 5));
    --_cap: 110svh;

    /* FULL-BLEED: the band spans the viewport regardless of any container it sits inside. */
    display: block;
    position: relative;
    /* [law 2] the section's own box ends at a hard edge — no gradient, no bleed, no shadow. */
    background: transparent;
    color: var(--_text);
  }

  .ez-eb__band {
    position: relative;
    width: 100%;
    aspect-ratio: var(--_ar);
    max-block-size: var(--_cap);
    overflow: hidden;
    /* the DARK. A real dark surface while there is no photography; once an image lands it
       covers this and the dark lives IN the image (the eventual law). */
    background: var(--_surface);
    /* [law 2] hard dark->white exit cut: the band simply STOPS here. Do not add a
       gradient / fade / soft edge to this element — that is the page-is-ending signal. */
  }

  .ez-eb__media, .ez-eb__empty { position: absolute; inset: 0; display: block; }
  .ez-eb__img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---- Type overlay (DOM, never baked into the art) ---------------------- */
  .ez-eb__inner {
    position: absolute;
    inset: 0;
    max-width: var(--_container);
    margin-inline: auto;
    padding: var(--_inset-lg) var(--_pad-x);
    display: flex;
    pointer-events: none; /* nothing here is interactive this pass */
  }
  /* mobile: type at the TOP of the canvas */
  .ez-eb--text-top .ez-eb__inner { align-items: flex-start; justify-content: flex-start; }
  .ez-eb--text-center .ez-eb__inner { align-items: center; justify-content: center; text-align: center; }

  .ez-eb__type { max-width: var(--_measure); }

  .ez-eb__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  /* DISPLAY scale — the editorial headline rung (design_system.md §3.6). The root sheet flips
     --type-display-size 2.125rem -> 3.25rem at the 750 seam, so no per-section desktop step. */
  .ez-eb__heading {
    margin: 0;
    font-size: var(--type-display-size, 2.125rem);
    line-height: var(--type-display-line, 1.05);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-eb__standfirst {
    margin-block-start: var(--_stack-md);
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
  }
  .ez-eb__standfirst > :first-child { margin-block-start: 0; }
  .ez-eb__standfirst > :last-child { margin-block-end: 0; }

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------- */
  @media screen and (min-width: 750px) {
    .ez-eb { --_measure: 52ch; }
    /* desktop aspect rungs — bounded choice, never 100vh (law 1) */
    .ez-eb--ar-ultrawide .ez-eb__band { aspect-ratio: 21 / 9; }
    .ez-eb--ar-wide .ez-eb__band { aspect-ratio: 16 / 9; }
    .ez-eb--ar-classic .ez-eb__band { aspect-ratio: 3 / 2; }
    /* desktop: type block UPPER-LEFT */
    .ez-eb--text-top .ez-eb__inner { align-items: flex-start; }
    .ez-eb__inner { padding: var(--space-48, 48px) var(--_pad-x); }
    .ez-eb__standfirst { font-size: var(--type-body-lg-size, 1.125rem); line-height: var(--type-body-lg-line, 1.5); }
  }

  /* [STILLNESS] no entrance choreography, no parallax, no transitions in this section. */
/* END_SECTION:ez-editorial-band */

/* START_SECTION:ez-faq (INDEX:22) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-faq {
    /* [v1.3] 32/32 vertical BOTH breakpoints (supersedes 48/80). Reading surface: inner is capped
       at --_measure (65ch, §S5), not the 1280 box, so sides stay a modest 16 at all widths. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_inset: var(--space-inset-md, 16px);
    --_measure: var(--size-measure, 65ch);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_dur-exp: var(--motion-expressive, 400ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-regular: var(--type-weight-regular, 400);
    --_q-line: 1.35; /* question leading — between h3-line 1.3 and caption 1.4; owner-accepted since W1; snap-to --type-h3-line a taste call */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_accent: var(--color-accent, #BF1C1D);
    /* accordion card fill + hover/open surface-lift (§3.7 colour-shift, not a motion lift) */
    --_fill: var(--surface-fill, #f9f8f6);
    --_lift: var(--surface-lift, #f4efe4);
  }

  /* Outer rhythm + S4 head zone -> shared ez-shell + ez-section-head. The inner keeps its OWN
     65ch reading measure (S5 measure cap), so it is NOT shared. */
  .ez-faq__inner {
    max-width: var(--_measure);
    margin-inline: auto;
    padding-inline: var(--_pad-x);
  }

  /* ---- Accordion (design_system.md §6 3.5) [v1.3] SINGLE-OPEN + accented/lifted -------------
     gapped ~8px rounded cards on a neutral fill (hairline dividers superseded — ONE separation);
     a warm §3.7 surface-lift on hover/open; the open item's +/− turns accent (ONE pull). */
  .ez-faq__list { display: flex; flex-direction: column; gap: var(--_stack-sm); }

  .ez-faq__item {
    border-radius: var(--_radius-md);
    background: var(--_fill);
    transition: background-color var(--_dur-base) var(--_ease);
  }
  @media (hover: hover) { .ez-faq__item:hover { background: var(--_lift); } }
  .ez-faq__item.is-open { background: var(--_lift); }

  .ez-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_inset);
    width: 100%;
    min-height: var(--_control);
    padding: var(--_stack-sm) var(--_inset);
    border: 0;
    border-radius: var(--_radius-md);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--_q-line);
    font-weight: var(--_w-semibold);
    text-align: start;
    cursor: pointer;
  }
  .ez-faq__q:active { transform: scale(var(--_press)); }

  /* plus <-> minus: two bars, the vertical one collapses when open; open item = accent (one pull) */
  .ez-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--_muted);
    transition: color var(--_dur-base) var(--_ease);
  }
  .ez-faq__q[aria-expanded="true"] .ez-faq__icon { color: var(--_accent); }
  .ez-faq__icon::before,
  .ez-faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 15px;
    height: 2px;
    border-radius: var(--radius-pill, 999px); /* pill-ends on the 15x2 bar clamp to 1px — value-identical, semantically correct rung */
    background: currentColor;
    translate: -50% -50%;
    transition: opacity var(--_dur-base) var(--_ease), transform var(--_dur-base) var(--_ease);
  }
  .ez-faq__icon::after { transform: rotate(90deg); }
  .ez-faq__q[aria-expanded="true"] .ez-faq__icon::after {
    opacity: 0;
    transform: rotate(0deg);
  }

  .ez-faq__panel {
    overflow: hidden;
    transition: max-height var(--_dur-exp) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  /* collapsed state is applied by ez-faq.js (data-collapsed) so the content
     stays readable if JS never runs (progressive enhancement) */
  .ez-faq__panel[data-collapsed] { max-height: 0; opacity: 0; }

  .ez-faq__answer {
    padding: 0 var(--_inset) var(--_inset);
    max-width: var(--_measure);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
  }
  .ez-faq__answer > :first-child { margin-block-start: 0; }
  .ez-faq__answer > :last-child { margin-block-end: 0; }
  .ez-faq__answer a { color: inherit; text-decoration: underline; }

  @media screen and (min-width: 750px) {
    .ez-faq {
      /* [v1.3] 32/32 vertical both breakpoints (supersedes 80) */
      --_section-y: var(--space-section-y, 32px);
      --_heading-gap: var(--space-heading-gap, 32px);
    }
    .ez-faq__q { font-size: var(--type-h3-size, 1.125rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-faq__panel,
    .ez-faq__icon::before,
    .ez-faq__icon::after { transition-duration: 0.01ms !important; }
    .ez-faq__q:active { transform: none; }
  }
/* END_SECTION:ez-faq */

/* START_SECTION:ez-hero (INDEX:23) */
/* ---------------------------------------------------------------------------
     Design-system tokens resolved ONCE into section-scoped private aliases.
     Each reads the canonical N3 token (design_system.md) and falls back to the
     provisional N2-overridable value (structure/motion) or the live theme scheme
     token (bespoke colour roles) until N4 lands the global token layer. Components
     below read only the --_ aliases. (theme-foundation.md §A1)
     --------------------------------------------------------------------------- */
  .ez-hero {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80); contained-extent
       sides 16/64 (a full-bleed hero stays edge-to-edge). */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_gutter: var(--space-gutter, 12px);
    --_container: var(--size-container, 1280px);
    --_inset: var(--space-inset-lg, 24px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_control: var(--size-control-md, 48px);
    --_control-lg: var(--size-control-lg, 56px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-none: var(--radius-none, 0px);
    --_aspect-hero: var(--ez-hero-aspect-m, var(--aspect-lifestyle, 4 / 5));
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-bold: var(--type-weight-bold, 700);
    /* bespoke colour roles -> live theme scheme token fallback */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    /* text-on-imagery role (visual.md/N2) -> legible light default over a photo */
    --_on-media: var(--color-on-media, #ffffff);
  }
  /* Shell outer (rhythm + position:relative) -> shared ez-shell (hero is head-partial: its head
     lives inside the slide overlay, so only the OUTER shell is shared, not a head zone). */

  .ez-hero__viewport { position: relative; }

  /* ---- Slide (rendered by ez-hero-slide.liquid) ------------------------- */
  .ez-hero__slide { position: relative; }

  .ez-hero__banner-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--_radius-md);
  }
  .ez-hero__slide--linked .ez-hero__content {
    z-index: 2;
    pointer-events: none;
  }
  .ez-hero__slide--linked .ez-hero__content a { pointer-events: auto; }

  .ez-hero__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--_radius-md);
    background: var(--_surface);
  }
  .ez-hero__img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .ez-hero--fit-cover .ez-hero__img { object-fit: cover; }
  .ez-hero--fit-contain .ez-hero__img { object-fit: contain; }
  .ez-hero__placeholder { width: 100%; height: 100%; }
  .ez-hero__placeholder svg { width: 100%; height: 100%; }

  .ez-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--_stack-md);
  }
  .ez-hero__eyebrow {
    margin: 0;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  .ez-hero__heading {
    margin: 0;
    font-size: var(--type-h1-size, 1.75rem);
    line-height: var(--type-h1-line, 1.15);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-hero__subheading {
    margin: 0;
    font-size: var(--type-body-lg-size, 1.125rem);
    line-height: var(--type-body-lg-line, 1.5);
    max-width: 46ch;
  }
  .ez-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_stack-md) var(--_inset);
    margin-block-start: var(--_stack-sm);
  }

  /* primary CTA — --radius-md (8px) CTA tier (design_system.md §3.1) */
  .ez-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    padding-inline: var(--space-inset-lg, 24px);
    border: 0;
    border-radius: var(--_radius-md);
    background: var(--_text);
    color: var(--_surface);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--_dur-fast) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  .ez-hero__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) {
    .ez-hero__cta:hover { opacity: 0.9; }
  }

  /* quiet secondary link — rendered via the shared ez-standalone-link snippet
     (design_system.md §6 A-2 / v1.3 #13: black label + accent slide-in underline,
     persistent on touch). ONE source; no per-section link CSS here. */

  /* ======================================================================
     LAYOUT: side-by-side (split) — mobile stacked (genuine re-lay), desktop 2-col
     ====================================================================== */
  .ez-hero--layout-split .ez-hero__slide {
    display: grid;
    gap: var(--_gutter);
  }
  .ez-hero--layout-split .ez-hero__media { aspect-ratio: var(--_aspect-hero); }
  .ez-hero--layout-split .ez-hero__content {
    justify-content: center;
    padding-block: var(--_inset);
  }

  /* ======================================================================
     LAYOUT: overlay + center-stage — content sits ON the media
     ====================================================================== */
  .ez-hero--layout-overlay .ez-hero__slide,
  .ez-hero--layout-center .ez-hero__slide { position: relative; }
  .ez-hero--layout-overlay .ez-hero__media,
  .ez-hero--layout-center .ez-hero__media {
    aspect-ratio: var(--_aspect-hero);
  }
  .ez-hero--layout-overlay .ez-hero__content,
  .ez-hero--layout-center .ez-hero__content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    color: var(--_on-media);
    padding: var(--_inset);
    /* localized gradient behind the text ONLY — the real photo stays dominant
       (design_system.md §8 Type 1 full-bleed legibility carve-out; NOT a full scrim) */
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 78%);
  }
  .ez-hero--layout-center .ez-hero__content {
    inset: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0) 72%);
  }
  .ez-hero--layout-overlay .ez-hero__cta,
  .ez-hero--layout-center .ez-hero__cta {
    background: var(--_on-media);
    color: #111111;
  }

  /* ======================================================================
     EXTENT: contained vs full-bleed
     ====================================================================== */
  .ez-hero--extent-contained .ez-hero__viewport {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_pad-x);
  }
  /* full-bleed: media spans the section width; content keeps a readable inset */

  /* ======================================================================
     HEIGHT: standard (aspect-driven) vs tall brand-moment (bounded)
     ====================================================================== */
  .ez-hero--h-tall.ez-hero--layout-overlay .ez-hero__media,
  .ez-hero--h-tall.ez-hero--layout-center .ez-hero__media {
    aspect-ratio: auto;
    min-height: 78svh;
  }

  /* ======================================================================
     CAROUSEL transport (>1 slide) — native finite scroll-snap
     ====================================================================== */
  .ez-hero--carousel .ez-hero__track {
    display: flex;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    list-style: none;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }
  .ez-hero--carousel .ez-hero__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .ez-hero__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-hero--extent-contained .ez-hero__controls {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_gutter);
  }
  .ez-hero__dots {
    display: flex;
    align-items: center;
    gap: var(--_stack-sm);
  }
  /* Nav chrome (dot button + overlay arrow incl. hero's z-index 3 + disabled) -> shared ez-carousel-styles. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    .ez-hero {
      /* [v1.3] 32/32 vertical both breakpoints (supersedes 80); contained-extent sides = 64. */
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_gutter: var(--space-24, 24px); /* deliberate 24px desktop gap (canon 16-24 band) — pinned to the raw rung so the root's 16px flip can't shrink it */
      --_heading-gap: var(--space-heading-gap, 32px);
    }
    .ez-hero--layout-split .ez-hero__slide {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .ez-hero--layout-split.ez-hero--media-right .ez-hero__media { order: 2; }
    .ez-hero--layout-split .ez-hero__media { aspect-ratio: auto; }
    .ez-hero--layout-split .ez-hero__img { position: absolute; inset: 0; }
    .ez-hero--layout-overlay .ez-hero__media,
    .ez-hero--layout-center .ez-hero__media {
      /* [v1.3 #18] desktop banner default = 21:9; 16:9 is a per-instance bounded
         override (desktop_aspect select). Mobile reads its own bounded aspect setting. */
      aspect-ratio: var(--aspect-hero, var(--ez-hero-aspect-d, 21 / 9));
    }
    .ez-hero__heading { font-size: var(--type-h1-size, 2.5rem); }
    .ez-hero--layout-split .ez-hero__content { padding-inline: var(--_inset); }
    .ez-hero__dots { display: none; }
    .ez-hero__controls { display: none; }
  }

  /* ---- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-hero__track { scroll-behavior: auto; }
    .ez-hero * { transition-duration: 0.01ms !important; }
    .ez-hero__cta:active { transform: none; }
  }
/* END_SECTION:ez-hero */

/* START_SECTION:ez-image-banner (INDEX:24) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-banner {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_on-media: var(--color-on-media, #ffffff);
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */
  ez-image-banner { display: block; }

  /* ---- Track: single = block; carousel = native scroll-snap ------------- */
  .ez-banner__track {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-banner__viewport { position: relative; }
  .ez-banner--carousel .ez-banner__track {
    overflow-y: hidden;
    /* [B7] MANDATORY snap (was proximity): the engine's banner-carousel bundle steps to a slide
       START both ways; mandatory always completes the snap, matching the hero / shoppable. */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }

  .ez-banner__slide {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* mobile: slides-per-view with an edge-peek sliver */
    width: calc((100% - (var(--_gutter) * (var(--ez-spv-m, 1) - 1)) - var(--ez-peek, 0px)) / var(--ez-spv-m, 1));
    border-radius: var(--_radius-md);
    overflow: hidden;
  }

  .ez-banner__media { display: block; position: relative; width: 100%; height: 100%; }
  .ez-banner__link { display: block; width: 100%; height: 100%; }
  .ez-banner__img { display: block; width: 100%; height: 100%; }
  .ez-banner--fit-cover .ez-banner__img { object-fit: cover; }
  .ez-banner--fit-contain .ez-banner__img { object-fit: contain; }

  /* aspect: locked per role so a carousel's cells share ONE ratio (§2.6);
     "natural" keeps the image's own ratio (only sensible for a single banner) */
  .ez-banner--ar-square   .ez-banner__slide { aspect-ratio: 1 / 1; }
  .ez-banner--ar-portrait .ez-banner__slide { aspect-ratio: 4 / 5; }
  .ez-banner--ar-landscape .ez-banner__slide { aspect-ratio: 4 / 3; }
  .ez-banner--ar-classic  .ez-banner__slide { aspect-ratio: 3 / 2; }
  .ez-banner--ar-wide     .ez-banner__slide { aspect-ratio: 16 / 9; }
  .ez-banner--ar-ultrawide .ez-banner__slide { aspect-ratio: 21 / 9; } /* [bug-119] canon banner default crop (design_system.md §2.6 [v1.3]); inert for existing instances */
  .ez-banner--ar-natural .ez-banner__img { height: auto; }

  .ez-banner__placeholder { width: 100%; height: 100%; }
  .ez-banner__placeholder svg { width: 100%; height: 100%; }

  /* ---- Overlay / below text (rendered by ez-image-banner-slide.liquid) --- */
  .ez-banner__content { display: flex; flex-direction: column; gap: var(--_stack-md); }
  .ez-banner--text-overlay .ez-banner__content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    color: var(--_on-media);
    padding: var(--_inset-lg);
    /* localized gradient behind the text ONLY (§8 legibility carve-out; NOT a full scrim) */
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 76%);
  }
  .ez-banner--text-below .ez-banner__content { padding-block-start: var(--_inset); }
  .ez-banner--text-none .ez-banner__content { display: none; }

  .ez-banner--align-center .ez-banner__content { text-align: center; align-items: center; }
  .ez-banner--align-end .ez-banner__content { text-align: end; align-items: flex-end; }

  .ez-banner__eyebrow-slide {
    margin: 0;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .ez-banner__title {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-banner__subtitle {
    margin: 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    max-width: 46ch;
  }
  .ez-banner__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    margin-block-start: var(--_stack-sm);
    padding-inline: var(--_inset-lg);
    border: 0;
    border-radius: var(--_radius-md);
    background: var(--_text);
    color: var(--_surface);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--_dur-fast) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  .ez-banner--align-center .ez-banner__cta { align-self: center; }
  .ez-banner--align-end .ez-banner__cta { align-self: flex-end; }
  .ez-banner--text-overlay .ez-banner__cta { background: var(--_on-media); color: #111111; }
  .ez-banner__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-banner__cta:hover { opacity: 0.9; } }

  /* ---- Controls --------------------------------------------------------- */
  .ez-banner__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-banner__dots { display: flex; align-items: center; gap: var(--_stack-sm); margin-inline: auto; }
  /* Nav chrome (dot button + progress bar + overlay arrow + disabled) -> shared ez-carousel-styles. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    .ez-banner {
      /* [v1.3] 32/32 vertical both breakpoints (supersedes 80); desktop sides = 64 (the 1280 box). */
      --_section-y: var(--space-section-y, 32px);
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-banner__title { font-size: var(--type-h1-size, 2.5rem); }
    .ez-banner__slide {
      width: calc((100% - (var(--_gutter) * (var(--ez-spv-d, 1) - 1))) / var(--ez-spv-d, 1));
    }
    .ez-banner__controls { display: none; }
  }

  /* ---- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-banner__track { scroll-behavior: auto; }
    .ez-banner * { transition-duration: 0.01ms !important; }
    .ez-banner__cta:active { transform: none; }
  }
/* END_SECTION:ez-image-banner */

/* START_SECTION:ez-image-compare (INDEX:25) */
/* Design-system tokens -> section-scoped private aliases (theme-foundation.md §A1). */
  .ez-ic {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_inset-sm: var(--space-inset-sm, 12px);
    --_container: var(--size-container, 1280px);
    --_radius-sm: var(--radius-sm, 4px);
    --_radius-md: var(--radius-md, 8px);
    --_handle: 44px;
    --_conn: 2px;
    --_label-pad-y: 6px;   /* L1 badge chip: proportions between rungs by design (chip sits on image) */
    --_label-pad-x: 10px;
    --_label-line: 1.2;    /* chip leading; must NOT couple to --type-h2-line despite the equal value */
    --_handle-gap: 1px;    /* chevron glyph gap inside the 44px handle */
    --_hairline: var(--stroke-hairline, 1px);
    --_stroke-focus: var(--stroke-heavy, 2px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_accent: var(--color-accent, #BF1C1D);
    --_compare-elevation: 0 1px 3px rgb(0 0 0 / 0.18); /* PRIVATE bespoke depth for the divider/handle — deliberately NOT canon --elevation-1 geometry; un-aliased 2026-07-13 (bug-114) so the token root sheet can define canon elevations without hijacking this */
  }
  /* Shell (outer rhythm + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Stage ------------------------------------------------------------ */
  .ez-ic__stage {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--ez-ic-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--_radius-md);
    user-select: none;
    -webkit-user-select: none;
  }
  /* [P0 mobile scroll-trap fix — audit block 5; design_system §2.3 + v1.4 #3] touch-action is
     ORIENTATION-AWARE, not a blanket `none`. A blanket `none` on this full-width block dead-zoned
     the primary mobile gesture: a finger landing here could not scroll the page past it. Now the
     browser owns the CROSS axis (page scroll) while the drag axis drives the divider:
       horizontal slider -> pan-y  (vertical finger drags scroll the page; horizontal drags = divider)
       vertical slider   -> pan-x  (horizontal finger drags scroll the page; vertical drags = divider)
     The JS already uses pointer events (pointercancel releases the drag when the browser takes over
     for a cross-axis pan), so only the axis gate changes; the divider drag stays 1:1. */
  .ez-ic__stage--horizontal { cursor: ew-resize; touch-action: pan-y; }
  .ez-ic__stage--vertical { cursor: ns-resize; touch-action: pan-x; }

  .ez-ic__layer {
    position: absolute;
    inset: 0;
  }
  /* After layer clipped so LEFT = before, RIGHT = after; divider at --pos */
  .ez-ic__stage--horizontal .ez-ic__layer--after {
    clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%));
  }
  .ez-ic__stage--vertical .ez-ic__layer--after {
    clip-path: inset(calc(var(--pos, 50) * 1%) 0 0 0);
  }

  .ez-ic__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--_fit, cover);
    display: block;
    /* [C10a] the divider drag is handled on the stage; the images must neither start a native
       image-drag nor intercept the pointer (the background must stay fixed while dragging). */
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }
  .ez-ic__ph { position: absolute; inset: 0; }
  .ez-ic__ph svg { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Labels = L1 static badge (4px, factual, solid fill on image for legibility) */
  .ez-ic__label {
    position: absolute;
    inset-block-start: var(--_inset-sm);
    padding: var(--_label-pad-y) var(--_label-pad-x);
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--_label-line);
    font-weight: var(--_w-semibold);
    color: var(--_text);
    background: var(--_surface);
    border-radius: var(--_radius-sm);
    box-shadow: var(--_compare-elevation);
    pointer-events: none;
    z-index: 3;
  }
  .ez-ic__label--before { inset-inline-start: var(--_inset-sm); }
  .ez-ic__label--after { inset-inline-end: var(--_inset-sm); }
  .ez-ic__stage--vertical .ez-ic__label--after {
    inset-block-start: auto;
    inset-block-end: var(--_inset-sm);
    inset-inline-start: var(--_inset-sm);
    inset-inline-end: auto;
  }

  /* Divider + handle */
  .ez-ic__divider {
    position: absolute;
    background: var(--_surface);
    box-shadow: var(--_compare-elevation);
    pointer-events: none;
    z-index: 4;
  }
  .ez-ic__stage--horizontal .ez-ic__divider {
    inset-block: 0;
    inset-inline-start: calc(var(--pos, 50) * 1%);
    inline-size: var(--_conn);
    transform: translateX(-50%);
  }
  .ez-ic__stage--vertical .ez-ic__divider {
    inset-inline: 0;
    inset-block-start: calc(var(--pos, 50) * 1%);
    block-size: var(--_conn);
    transform: translateY(-50%);
  }

  .ez-ic__handle {
    position: absolute;
    z-index: 5;
    inline-size: var(--_handle);
    block-size: var(--_handle);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_handle-gap);
    color: var(--_text);
    background: var(--_surface);
    border-radius: var(--radius-full, 50%);
    box-shadow: var(--_compare-elevation);
    pointer-events: none;
  }
  .ez-ic__handle svg { inline-size: 16px; block-size: 16px; }
  .ez-ic__stage--horizontal .ez-ic__handle {
    inset-block-start: 50%;
    inset-inline-start: calc(var(--pos, 50) * 1%);
    transform: translate(-50%, -50%);
  }
  .ez-ic__stage--vertical .ez-ic__handle {
    inset-inline-start: 50%;
    inset-block-start: calc(var(--pos, 50) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* The range is the a11y control: invisible, full-cover, keyboard-focusable.
     pointer-events:none so pointer drag is handled on the stage (ez-image-compare.js);
     Tab focus + arrow keys still operate it. */
  .ez-ic__range {
    position: absolute;
    inset: 0;
    z-index: 6;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
  }
  .ez-ic__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--_handle); block-size: var(--_handle); }
  .ez-ic__range::-moz-range-thumb { border: 0; inline-size: var(--_handle); block-size: var(--_handle); background: transparent; }
  /* Focus-visible surfaces on the handle */
  .ez-ic__range:focus-visible ~ .ez-ic__handle {
    outline: var(--_stroke-focus) solid var(--_accent);
    outline-offset: 2px;
  }

  /* ---- 750 seam (design_system.md §2.3) --------------------------------- */
  @media screen and (min-width: 750px) {
    .ez-ic {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
      --_handle: 48px;
    }
    .ez-ic__stage { max-inline-size: 960px; margin-inline: auto; }
  }
/* END_SECTION:ez-image-compare */

/* START_SECTION:ez-infinite-banner (INDEX:26) */
/* Design-system tokens -> section-scoped private aliases with provisional fallbacks
     until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-inf {
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_on-media: var(--color-on-media, #ffffff);
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  ez-infinite-banner { display: block; }
  .ez-inf__viewport { position: relative; }

  /* ---- Track: single = block; loop = native scroll-snap (JS clones the sets) ---- */
  .ez-inf__track {
    position: relative; /* the slides' offsetParent -> offsetLeft == scroll coordinate (JS wrap math) */
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-inf--loop .ez-inf__track {
    overflow-y: hidden;
    /* mandatory centre-snap: each slide centres; the wrap reposition moves by an exact set-width,
       so it always lands on an equivalent snap point and never fights the snap. */
    scroll-snap-type: x mandatory;
    /* NO scroll-behavior:smooth here (deliberate — do not re-add). Per CSSOM, a direct scrollLeft
       assignment inherits the element's scroll-behavior, so a CSS smooth would make the JS wrap
       reposition (scrollLeft += set-width in ez-infinite-banner.js _normalize) ANIMATE — turning the
       invisible whole-set jump into a VISIBLE boundary slide, the dead-end artifact an infinite loop
       must never show. The two user nav actions (arrows/dots) pass behavior:'smooth' explicitly in
       JS so they stay smooth; the wrap + initial centre + resize stay INSTANT. */
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }

  .ez-inf__slide {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: var(--_aspect-selected-m, var(--_aspect-selected-d, var(--aspect-tile, 4 / 3)));
    /* centre-snap so a slide rests centred with a PEEK of the previous + next slide on BOTH sides
       (the bidirectional swipe affordance). */
    scroll-snap-align: center;
    width: calc((100% - (2 * var(--ez-peek, 40px)) - (var(--_gutter) * (var(--ez-spv-m, 1) - 1))) / var(--ez-spv-m, 1));
    border-radius: var(--_radius-md);
    overflow: hidden;
  }
  /* a single slide (no loop) is a plain full-width banner: no peek reservation */
  .ez-inf:not(.ez-inf--loop) .ez-inf__slide { width: 100%; }

  .ez-inf__media, .ez-inf__link { display: block; position: relative; width: 100%; height: 100%; }
  .ez-inf__img, .ez-inf__video { display: block; width: 100%; height: 100%; }
  .ez-inf--fit-cover .ez-inf__img, .ez-inf--fit-cover .ez-inf__video { object-fit: cover; }
  .ez-inf--fit-contain .ez-inf__img, .ez-inf--fit-contain .ez-inf__video { object-fit: contain; }

  /* aspect: locked per instance so a loop's cells share ONE ratio (§2.6) */
  .ez-inf--ar-square { --_aspect-selected-d: var(--aspect-product, 1 / 1); }
  .ez-inf--ar-portrait { --_aspect-selected-d: var(--aspect-lifestyle, 4 / 5); }
  .ez-inf--ar-landscape { --_aspect-selected-d: var(--aspect-tile, 4 / 3); }
  .ez-inf--ar-classic { --_aspect-selected-d: var(--aspect-editorial, 3 / 2); }
  .ez-inf--ar-wide { --_aspect-selected-d: var(--aspect-video, 16 / 9); }
  .ez-inf--mar-square { --_aspect-selected-m: var(--aspect-product, 1 / 1); }
  .ez-inf--mar-portrait { --_aspect-selected-m: var(--aspect-lifestyle, 4 / 5); }
  .ez-inf--mar-landscape { --_aspect-selected-m: var(--aspect-tile, 4 / 3); }
  .ez-inf--mar-classic { --_aspect-selected-m: var(--aspect-editorial, 3 / 2); }
  .ez-inf--mar-wide { --_aspect-selected-m: var(--aspect-video, 16 / 9); }

  .ez-inf__placeholder { width: 100%; height: 100%; }
  .ez-inf__placeholder svg { width: 100%; height: 100%; }

  /* ---- Overlay / below text (rendered by ez-infinite-banner-slide.liquid) --- */
  .ez-inf__content { display: flex; flex-direction: column; gap: var(--_stack-md); }
  .ez-inf--text-overlay .ez-inf__content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    color: var(--_on-media);
    padding: var(--_inset-lg);
    /* localized gradient behind the text ONLY (§8 legibility carve-out; NOT a full scrim) */
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 76%);
  }
  .ez-inf--text-below .ez-inf__content { padding-block-start: var(--_inset); }
  .ez-inf--text-none .ez-inf__content { display: none; }
  .ez-inf--align-center .ez-inf__content { text-align: center; align-items: center; }
  .ez-inf--align-end .ez-inf__content { text-align: end; align-items: flex-end; }

  .ez-inf__eyebrow-slide {
    margin: 0;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .ez-inf__title {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-inf__subtitle {
    margin: 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    max-width: 46ch;
  }
  .ez-inf__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    margin-block-start: var(--_stack-sm);
    padding-inline: var(--_inset-lg);
    border: 0;
    border-radius: var(--_radius-md);
    background: var(--_text);
    color: var(--_surface);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--_dur-fast) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  /* Placeholder state: a CTA label whose destination does not exist yet renders as PLAIN TEXT,
     deliberately WITHOUT the button box — a button-shaped element that cannot be pressed is the
     dead-affordance the all-or-none clickability rule bars. Label rung, quiet. */
  .ez-inf__cta-static {
    margin: var(--_stack-sm) 0 0;
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
    font-weight: var(--_w-medium);
    opacity: 0.85;
  }
  .ez-inf--align-center .ez-inf__cta { align-self: center; }
  .ez-inf--align-end .ez-inf__cta { align-self: flex-end; }
  .ez-inf--text-overlay .ez-inf__cta { background: var(--_on-media); color: #111111; }
  /* the CTA commits an action -> it DOES press (unlike the nav) */
  .ez-inf__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-inf__cta:hover { opacity: 0.9; } }

  /* ---- Controls: dots only (a curated ~3-slide loop has no "end" -> no progress bar) ---- */
  .ez-inf__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-inf__dots { display: flex; align-items: center; gap: var(--_stack-sm); }
  /* Nav chrome (dot button + overlay arrow + hover) -> shared ez-carousel-styles. The infinite
     arrow is NEVER disabled (no [disabled] rule there) and its dot/arrow transitions are bg-only. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    .ez-inf {
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-inf__title { font-size: var(--type-h1-size, 2.5rem); }
    .ez-inf__slide { aspect-ratio: var(--_aspect-selected-d, var(--aspect-tile, 4 / 3)); }
    .ez-inf--loop .ez-inf__slide {
      width: calc((100% - (2 * var(--ez-peek, 40px)) - (var(--_gutter) * (var(--ez-spv-d, 1) - 1))) / var(--ez-spv-d, 1));
    }
    .ez-inf__controls { display: none; }
  }

  /* ---- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-inf__track { scroll-behavior: auto; }
    .ez-inf * { transition-duration: 0.01ms !important; }
    .ez-inf__cta:active { transform: none; }
  }
/* END_SECTION:ez-infinite-banner */

/* START_SECTION:ez-lens-tiles (INDEX:27) */
/* Design-system tokens -> private aliases with provisional fallbacks (theme-foundation §A1).
     Components below read only the --_ aliases.

     ⚠️ THE SELECTOR LIST IS LOAD-BEARING — bug-159, and the same class as bug-145. This section
     renders TWO SIBLING SUBTREES: `.ez-lens` (the shell) and `<ez-lens-popup class="ez-lens-pop">`,
     which is deliberately HOISTED OUT of the shell so a position:fixed overlay escapes the shell's
     `overflow-x: clip`. A custom property declared on `.ez-lens` alone therefore does NOT reach the
     popup — every `var(--_*)` in the popup rules becomes invalid-at-computed-value-time and the
     WHOLE declaration drops, which renders as a completely unstyled sheet (no background, no
     radius, no padding) even though the rules loaded and literal-valued props applied.
     So the alias block declares on BOTH HOSTS in ONE rule — one source, no second copy to drift.
     Only the LAYOUT half below is shell-only. If you ever add a third subtree, add it here too. */
  .ez-lens,
  .ez-lens-pop {
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_stack-lg: var(--space-stack-lg, 16px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_touch: var(--touch-target-min, 44px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-lg: var(--radius-lg, 12px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-regular: var(--type-weight-regular, 400);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_fill: var(--surface-fill, #f9f8f6);
    /* peek per surface (component-contracts C2 application guidance): lenses ~12px sliver */
    --_peek: var(--space-stack-md, 12px);
  }

  /* SHELL-ONLY layout. Deliberately NOT on .ez-lens-pop: the popup host must never take the
     section's padding/background, and `overflow-x: clip` on it would clip its own fixed
     children — the exact thing the hoist exists to prevent. */
  .ez-lens {
    padding-block: var(--_section-y);
    background: var(--_surface);
    color: var(--_text);
    /* the tile row scrolls INTERNALLY; clip never widens the page and is sticky-safe */
    overflow-x: clip;
  }

  .ez-lens__inner {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_pad-x);
  }

  .ez-lens__head { margin-block-end: var(--_heading-gap); }
  .ez-lens__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ez-lens__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
    /* the shipped heading is 8 words and wraps to two lines on every phone width; a greedy wrap
       leaves line 1 at ~97% of the content box and "are for." alone on line 2. Balance evens the
       two lines. It cannot add a line, and the S8->S10 crest has ~300px of spare either way.
       Same treatment several ez-shell siblings already carry on their headings. */
    text-wrap: balance;
  }

  /* ---- Tile row: mobile = native scroll-snap with edge-peek ------------- */
  .ez-lens__row {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ez-lens__row::-webkit-scrollbar { display: none; }

  .ez-lens__cell {
    flex: 0 0 auto;
    list-style: none;
    scroll-snap-align: start;
    /* 2-up with a sliver of the third — the "more, swipe" cue */
    width: calc((100% - var(--_gutter) - var(--_peek)) / 2);
  }

  /* ---- The tile (a BUTTON: it opens an overlay in place, it does not navigate) ---- */
  .ez-lens__tile {
    position: relative;
    display: block;
    width: 100%;
    /* min-height keeps the whole-tile target well over the 44px touch floor at any width */
    min-block-size: var(--_touch);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-lens__tile:active { transform: scale(var(--_press)); }
  .ez-lens__tile:focus-visible {
    outline: var(--stroke-heavy, 2px) solid var(--_text);
    outline-offset: 2px;
  }

  .ez-lens__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ez-lens-tile-aspect-m, var(--aspect-lifestyle, 4 / 5));
    overflow: hidden;
    border-radius: var(--_radius-md);
    background: var(--_fill);
    border: var(--_hairline) solid var(--_line);
  }
  .ez-lens__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ez-lens__media picture { display: block; width: 100%; height: 100%; }
  /* placeholder: a plain neutral field — no illustration, no red, nothing to read */
  .ez-lens__placeholder { display: block; width: 100%; height: 100%; background: var(--_fill); }

  /* the FACE — name + one benefit line, beneath the image, one grammar across all five */
  .ez-lens__face {
    display: block;
    margin-block-start: var(--_stack-sm);
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
  }
  .ez-lens__name { font-weight: var(--_w-semibold); }
  .ez-lens__sep { margin-inline: var(--_stack-xs); opacity: 0.5; }
  .ez-lens__benefit { font-weight: var(--_w-regular); opacity: 0.75; }

  /* ================= THE POPUP (read-only editorial; ZERO input controls) ============= */
  ez-lens-popup { display: block; }
  ez-lens-popup[hidden] { display: none; }

  /* body scroll-lock while the popup is open (overlay non-negotiable 4). position:fixed is the
     only lock that holds on iOS Safari; ez-lens-popup.js preserves + restores the scroll offset. */
  body.ez-lens-locked {
    position: fixed;
    inline-size: 100%;
    overflow: hidden;
  }

  .ez-lens-pop__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 1000);
    background: rgb(0 0 0 / 0.55);
  }
  .ez-lens-pop__panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .ez-lens-pop__panel[hidden] { display: none; }

  .ez-lens-pop__sheet {
    position: relative;
    width: 100%;
    max-width: 640px;
    /* bounded so the sheet never exceeds the viewport; the body scrolls INSIDE it */
    max-block-size: 92svh;
    display: flex;
    flex-direction: column;
    background: var(--_surface);
    color: var(--_text);
    border-start-start-radius: var(--_radius-lg);
    border-start-end-radius: var(--_radius-lg);
    box-shadow: var(--elevation-3, 0 12px 32px rgb(26 26 26 / 0.14));
    overflow: hidden;
  }

  .ez-lens-pop__close {
    position: absolute;
    inset-block-start: var(--_stack-sm);
    inset-inline-end: var(--_stack-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_touch);
    block-size: var(--_touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--_surface);
    color: var(--_text);
    cursor: pointer;
  }
  .ez-lens-pop__close svg { inline-size: var(--size-icon-md, 24px); block-size: var(--size-icon-md, 24px); }
  .ez-lens-pop__close:focus-visible { outline: var(--stroke-heavy, 2px) solid var(--_text); outline-offset: 2px; }

  /* the ONE scrolling region — a bounded sheet with an internal scroll never strands content
     above the scroll origin (the centred-flex-overflow trap) */
  .ez-lens-pop__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  .ez-lens-pop__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ez-lens-popup-aspect-m, var(--aspect-video, 16 / 9));
    overflow: hidden;
    background: var(--_fill);
  }
  .ez-lens-pop__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ez-lens-pop__media picture { display: block; width: 100%; height: 100%; }
  .ez-lens-pop__placeholder { width: 100%; height: 100%; background: var(--_fill); }

  .ez-lens-pop__body { padding: var(--_inset-lg) var(--_inset) var(--_inset-lg); }

  .ez-lens-pop__title {
    margin: 0 0 var(--_stack-md);
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
  }
  .ez-lens-pop__taste {
    margin: 0 0 var(--_inset-lg);
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    max-width: var(--size-measure, 65ch);
  }
  .ez-lens-pop__taste > :first-child { margin-block-start: 0; }
  .ez-lens-pop__taste > :last-child { margin-block-end: 0; }

  .ez-lens-pop__facts {
    margin: 0 0 var(--_inset-lg);
    padding: var(--_inset);
    border: var(--_hairline) solid var(--_line);
    border-radius: var(--_radius-md);
    background: var(--_fill);
  }
  .ez-lens-pop__fact + .ez-lens-pop__fact { margin-block-start: var(--_stack-md); }
  .ez-lens-pop__fact dt {
    margin: 0 0 2px; /* label micro-inset (allowlisted) */
    font-size: var(--type-caption-size, 0.75rem);
    line-height: var(--type-caption-line, 1.4);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--_muted);
  }
  .ez-lens-pop__fact dd {
    margin: 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
  }

  .ez-lens-pop__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_stack-md); }

  /* THE ONE BRAND-RED IN THE SECTION. Nothing else in .ez-lens may carry the accent. */
  .ez-lens-pop__shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--_control);
    padding-inline: var(--_inset-lg);
    border-radius: var(--_radius-md);
    background: var(--color-accent, #BF1C1D);
    color: #ffffff;
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--motion-duration-fast, 150ms) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  .ez-lens-pop__shop:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-lens-pop__shop:hover { opacity: 0.92; } }
  .ez-lens-pop__shop:focus-visible { outline: var(--stroke-heavy, 2px) solid var(--_text); outline-offset: 2px; }

  /* the deferred second button — present, deliberately DIMMED, does nothing until its page
     is ready. Never rendered as an anchor with no destination. */
  .ez-lens-pop__learn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--_control);
    padding-inline: var(--_inset-lg);
    border: var(--_hairline) solid var(--_line);
    border-radius: var(--_radius-md);
    background: none;
    color: var(--_text);
    font: inherit;
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-medium);
    text-decoration: none;
  }
  .ez-lens-pop__learn--off {
    opacity: var(--opacity-disabled, 0.45);
    cursor: default;
    pointer-events: none;
  }

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    /* both hosts again — a responsive alias flip declared on the shell alone would re-open
       bug-159 the moment a popup rule consumes one of these. */
    .ez-lens,
    .ez-lens-pop {
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-lens__heading { font-size: var(--type-h2-size, 1.75rem); }
    /* five tiles as a static row — nothing to operate on a pointer */
    .ez-lens__row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      overflow: visible;
      scroll-snap-type: none;
    }
    .ez-lens__cell { width: auto; scroll-snap-align: none; }
    .ez-lens__media { aspect-ratio: var(--ez-lens-tile-aspect-d, var(--aspect-lifestyle, 4 / 5)); }

    /* the sheet becomes a centred dialog rather than a bottom sheet */
    .ez-lens-pop__panel { align-items: center; padding: var(--_inset-lg); }
    .ez-lens-pop__sheet {
      max-block-size: 86svh;
      border-radius: var(--_radius-lg);
    }
    .ez-lens-pop__body { padding: var(--_inset-lg); }
    .ez-lens-pop__media { aspect-ratio: var(--ez-lens-popup-aspect-d, var(--aspect-video, 16 / 9)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-lens__tile:active, .ez-lens-pop__shop:active { transform: none; }
    .ez-lens * { transition-duration: 0.01ms !important; }
  }
/* END_SECTION:ez-lens-tiles */

/* START_SECTION:ez-offer-bar (INDEX:28) */
.ez-offer-bar {
    --_bg: var(--offer-ink, #242833);
    --_fg: var(--offer-on-ink, #ffffff);
    --_pad: var(--space-12, 12px);
    --_gap: var(--space-8, 8px);
    --_min: var(--touch-target-min, 44px);
    background: var(--_bg);
    color: var(--_fg);
  }
  .ez-offer-bar__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_gap);
    max-inline-size: 1280px;
    min-block-size: var(--_min);
    margin-inline: auto;
    padding-inline: var(--_pad);
    color: inherit;
    text-decoration: none;
    font-size: var(--type-caption-size, 0.75rem);
    line-height: 1.2;
    font-weight: var(--type-weight-semibold, 600);
    letter-spacing: 0.01em;
  }
  .ez-offer-bar__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-inline-size: 0;
  }
  .ez-offer-bar__text--wide { display: none; }
  .ez-offer-bar__sep { opacity: 0.45; }
  .ez-offer-bar__end { opacity: 0.72; font-weight: var(--type-weight-medium, 500); }
  .ez-offer-bar__chev { flex: none; }
  .ez-offer-bar__link:focus-visible {
    outline: 2px solid var(--_fg);
    outline-offset: -4px;
  }
  .ez-offer-bar__link:active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0.10);
    pointer-events: none;
  }
  @media (min-width: 750px) {
    .ez-offer-bar__link {
      --_pad: var(--space-16, 16px);
      --_gap: var(--space-12, 12px);
      font-size: var(--type-label-size, 0.8125rem);
    }
  }
  @media (min-width: 750px) and (pointer: fine) {
    .ez-offer-bar__link { min-block-size: 40px; }
  }
  @media (min-width: 990px) {
    .ez-offer-bar__text--wide { display: inline; }
    .ez-offer-bar__text--narrow { display: none; }
  }
  @media (hover: hover) {
    .ez-offer-bar__link:hover .ez-offer-bar__text { text-decoration: underline; text-underline-offset: 3px; }
  }

  /* Cart line discount badge (native allocation, snippets/cart-products.liquid + assets/cart.css
     .custom-coupon), restyled only while the offer bar is on the page, so it reverts after the
     window on its own: one line, ink text, eyelet dot instead of the tag icon. Still shows every
     discount title. */
  html:has(.ez-offer-bar) .custom-coupon {
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgb(26 26 26 / 0.05);
    color: var(--offer-text, #1a1a1a);
    font-size: var(--type-caption-size, 0.75rem);
    font-weight: var(--type-weight-semibold, 600);
    white-space: nowrap;
  }
  html:has(.ez-offer-bar) .custom-coupon::before {
    inline-size: 4px;
    block-size: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--offer-eyelet, #BF1C1D);
  }
/* END_SECTION:ez-offer-bar */

/* START_SECTION:ez-process-steps (INDEX:29) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-steps {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_container: var(--size-container, 1280px);
    --_measure: var(--size-measure, 65ch);
    --_circle: 48px;
    --_icon: var(--size-icon-lg, 28px);
    --_conn: var(--stroke-regular, 1.5px);
    --_hairline: var(--stroke-hairline, 1px);
    --_row-gap: var(--space-32, 32px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-regular: var(--type-weight-regular, 400);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
  }
  /* Shell (outer rhythm + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Track: mobile = vertical timeline -------------------------------- */
  .ez-steps__track {
    counter-reset: ez-step;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--_row-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- Step (rendered by ez-step.liquid) -------------------------------- */
  .ez-step {
    counter-increment: ez-step;
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: var(--_circle) 1fr;
    column-gap: var(--_gutter);
    align-items: start;
  }

  /* Connector: mobile = vertical line from this circle down to the next */
  .ez-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--_circle) / 2);
    inset-block-start: var(--_circle);
    inset-block-end: calc(-1 * var(--_row-gap));
    inline-size: var(--_conn);
    background: var(--_line);
    transform: translateX(-50%);
    z-index: 0;
  }

  .ez-step__marker {
    position: relative;
    z-index: 1;
    inline-size: var(--_circle);
    block-size: var(--_circle);
    display: grid;
    place-items: center;
    border: var(--_conn) solid var(--_line);
    border-radius: var(--radius-full, 50%);
    background: var(--_surface);
    color: var(--_text);
    overflow: hidden;
  }
  .ez-step__marker--auto::before {
    content: counter(ez-step);
    font-size: var(--type-h3-size, 1.125rem);
    line-height: 1;
    font-weight: var(--_w-semibold);
    font-variant-numeric: tabular-nums;
  }
  .ez-step__num {
    font-size: var(--type-h3-size, 1.125rem);
    line-height: 1;
    font-weight: var(--_w-semibold);
    font-variant-numeric: tabular-nums;
  }
  .ez-step__icon {
    inline-size: var(--_icon);
    block-size: var(--_icon);
    object-fit: contain;
    display: block;
  }

  .ez-step__body {
    padding-block-start: var(--_stack-xs);
  }
  .ez-step__title {
    margin: 0;
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--_w-semibold);
    text-wrap: balance;
  }
  .ez-step__text {
    margin: var(--_stack-xs) 0 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
    color: var(--_muted);
    max-width: var(--_measure);
  }

  /* ---- 750 seam: horizontal row (design_system.md §2.3) ----------------- */
  @media screen and (min-width: 750px) {
    .ez-steps {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
      --_circle: 72px;
    }

    .ez-steps__track {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--_gutter);
    }
    .ez-step {
      flex: 1 1 0;
      min-inline-size: 0;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      row-gap: var(--_stack-sm);
    }
    /* Connector: desktop = horizontal line between circle centers */
    .ez-step:not(:last-child)::before {
      inset-inline-start: 50%;
      inset-inline-end: auto;
      inset-block-start: calc(var(--_circle) / 2);
      inset-block-end: auto;
      inline-size: 100%;
      block-size: var(--_conn);
      transform: translateY(-50%);
    }
    .ez-step__body { padding-block-start: 0; max-inline-size: 24ch; }
  }
/* END_SECTION:ez-process-steps */

/* START_SECTION:ez-product-rail (INDEX:30) */
/* ---------------------------------------------------------------------------
     Design-system tokens resolved ONCE into section-scoped private aliases.
     Each reads the canonical N3 token (design_system.md) and falls back to the
     provisional N2-overridable value (structure/motion) or the live theme scheme
     token (bespoke colour roles) until N4 lands the global token layer. The
     global definition WINS over the fallback, so N2's repoint flows through with
     zero edits here. Components below read only the --_ aliases. (theme-foundation §A1)
     --------------------------------------------------------------------------- */
  .ez-product-rail {
    /* [v1.3] shell VALUES — the 1280-box lock (design_system.md §6 S1): section box = 1280px
       (1152 content + 64 desktop sides), mobile 16 sides, 32/32 vertical BOTH breakpoints, square. */
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_inset: var(--space-inset-md, 16px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-lg: var(--space-stack-lg, 16px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-sm: var(--radius-sm, 4px);
    --_aspect-product: var(--aspect-product, 1 / 1);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_w-bold: var(--type-weight-bold, 700);
    /* bespoke colour roles -> live theme scheme token fallback */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_lift: var(--surface-lift, #f4efe4);
    /* [v1.5] site-wide card resting look — 12px radius + a 1px LIGHT ink-alpha border + ONE faint resting
       shadow, from the ONE shared --ez-card-* token set (base.css :root; single source of truth, consumed
       by BOTH this rail card and the stock .product-card). A whole-card hover ZOOM (matches the stock card)
       is the desktop cue. Supersedes the v1.4 lift + 2-level shadow AND the interim flat-white card.
       design_system.md v1.5 ledger #1/#2/#3. GLOBAL --ez-card-* tokens live in base.css; the --_ aliases
       here are the structural set. */
    /* brand accent red (pulled from the live theme, == the save-badge red) — used ONLY for the
       animated view-all underline (v1.3 ledger #13: accent-on-a-link-underline is allowed). */
    /* L1 badge family fills pulled from the live theme (ai product block ai_gen_block_8eb9c79 +
       the default collection-page card _product-card-gallery): #BF1C1D save-red (== the brand
       accent -> EXCLUDED, never the accent), #7C3AED top-deal purple, #059669 best-value green.
       The factual badge fills from the family (no border, white text); sold-out stays neutral. */
    --_badge-fill: var(--badge-new-fill, #059669);
    --_badge-soldout: var(--badge-soldout-fill, #f7f7f7);
  }
  /* Shell outer (rhythm + background + [B8] overflow-clip) + the 1280 inner + the S4 head zone
     (eyebrow / heading / space-between head-row) -> shared ez-shell; the overlay-arrow / mobile-dot
     / scroll-progress chrome -> shared ez-carousel-styles. This section owns only the transport
     track + the C2 card + grid mode below. */

  /* ---- Native scroll-snap track (the transport) ------------------------- */
  ez-product-rail { display: block; }
  /* [v1.3] positioned viewport so the desktop arrows overlay ON the rail */
  .ez-pr__viewport { position: relative; }

  .ez-pr__track {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    /* [v1.5] vertical room so neither the swatch selection ring (2px outline + 2px offset) NOR the card's
       faint resting shadow (0 6px 14px, ~20px bottom reach) is clipped by this scroll track (overflow-x:auto
       forbids overflow-y:visible, so we pad). 24px covers the shadow reach + the ring. */
    padding-block: var(--space-24, 24px); /* shadow + ring headroom (exact-rung pick) */
    padding-inline: 0;
    list-style: none;
    overflow-y: hidden;
    /* [v1.3] proximity (not mandatory) so the direction-aware arrow targets hold — mandatory would
       re-snap PREV's right-aligned target back to a start edge. Swipe still snaps on release. The
       snap + smooth stay SECTION-owned (the snap-neutral engine base never writes them). */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* [carousel-peek] direction-aware BIDIRECTIONAL edge-peek: inset each card's snap point by the
       edge-peek so cards 2..N reveal a sliver of the PREVIOUS card on the left (the "you can scroll
       back" cue), while the card-width math (below) keeps the NEXT-card sliver on the right. Card 1
       stays flush — its -peek snap clamps to 0 at scrollLeft 0 — so at the START only the forward peek
       shows, in the MIDDLE both show, at the END only the backward peek shows. Desktop resets to 0. */
    scroll-padding-inline-start: var(--ez-peek, 24px);
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }

  .ez-pr__track > .ez-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* [carousel-peek] mobile 2-up leaving room for a peek sliver on BOTH sides (backward + forward),
       so the direction-aware bidirectional peek (scroll-padding above) always reveals the next card in
       whichever direction is still scrollable. */
    width: calc((100% - var(--_gutter) - (var(--ez-peek, 24px) * 2)) / 2);
  }

  /* ---- C2 product card -------------------------------------------------- */
  /* [E2 2026-07-21] These card rules read GLOBAL design-system tokens DIRECTLY (with a
     provisional fallback), NOT the rail-scoped --_ aliases above, so the card is
     surface-independent: it renders correctly on ANY card-bearing surface off-rail
     (search / PDP recs / predictive popup), not only inside .ez-product-rail. Completes
     the bug-145 in-place repoint (which fixed only the swatch ring) for the whole card.
     The rules stay in this globally-bundled {% stylesheet %} so every surface gets them. */
  /* [v1.5] site-wide card resting look — 12px radius + a 1px LIGHT ink-alpha border + ONE faint resting
     shadow, from the ONE shared --ez-card-* token set (base.css :root). Whole-card hover ZOOM below
     (matches the stock card). design_system.md v1.5 ledger #1/#3; supersedes the v1.4 lift + 2-level
     shadow AND the interim flat-white card. */
  .ez-card {
    list-style: none;
    border: var(--ez-card-border, 1px solid rgb(0 0 0 / 0.10));
    border-radius: var(--ez-card-radius, 12px);
    box-shadow: var(--ez-card-shadow, 0 6px 14px rgb(0 0 0 / 0.06));
    padding: var(--space-stack-sm, 8px);
    /* stacking root for the dead-zone fix: the stretched PDP ::after (z-1), the media (z-2, kept above so
       its hover angle-swap survives) and the swatch row (z-3, above the link so a swatch tap still swaps
       colour) all resolve INSIDE the card; isolate keeps them from leaking out to the rail arrows. */
    position: relative;
    isolation: isolate;
    /* [v1.5] whole-card hover-zoom transition (matches the stock card's --hover-transition-*); reduced-motion kills it. */
    transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }
  .ez-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  /* [v1.6] dead-zone fix (bug-109): stretch the PDP link across the WHOLE card as an ::after overlay so
     every pixel that isn't an interactive swatch — including the swatch-row GAPS that used to be dead —
     navigates to the PDP. Sits at z-1 (UNDER the media at z-2, so the media hover angle-swap is never
     stolen by the overlay); the swatch buttons are raised above it (below). This replaces the v1.5
     :active press-scale, removed per the owner-final "no press on the card". */
  .ez-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ez-card__media {
    position: relative;
    /* z-2: above the stretched-link ::after (z-1) so the media is directly clickable AND its hover
       angle-swap still fires (an overlay stealing the pointer would kill .ez-card__media:hover). */
    z-index: 2;
    aspect-ratio: var(--aspect-product, 1 / 1);
    overflow: hidden;
    /* [item 2] image-to-edge: the media breaks OUT of the card's 8px padding on the TOP + SIDES so the
       product image sits flush to the card top + sides; the body/price/swatch layer below keeps the inner
       padding. Radius on the TOP TWO corners only (inner radius = card radius - the 1px border) so the image
       corners align with the card's rounded top; overflow:hidden clips the image to it. */
    margin-block-start: calc(-1 * var(--space-stack-sm, 8px));
    margin-inline: calc(-1 * var(--space-stack-sm, 8px));
    border-radius: calc(var(--ez-card-radius, 12px) - var(--stroke-hairline, 1px)) calc(var(--ez-card-radius, 12px) - var(--stroke-hairline, 1px)) 0 0;
    /* transparent = the white card shows through; the white product image sits flat inside the card. */
    background: transparent;
  }
  .ez-card__img {
    width: 100%;
    height: 100%;
    /* [owner delta] fill the 1:1 media box edge-to-edge ("1:1 all in the container") — cover, not contain.
       The box is already square (.ez-card__media aspect-ratio: --_aspect-product = 1/1); cover makes the
       product image fill it with no letterbox gaps. The product-on-white normalized angles are ~square,
       so nothing meaningful crops off the frame. */
    object-fit: cover;
  }
  .ez-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  .ez-card__placeholder { width: 100%; height: 100%; }

  @media (hover: hover) {
    /* [v1.5] whole-card ZOOM on hover (matches the stock collection card's card-hover-effect-scale),
       replacing the killed translateY lift. Calm, zero-spring ease-out, transform-only. */
    .ez-card:hover { transform: scale(var(--hover-scale-amount, 1.03)); }
    /* the 2nd-angle ANGLE SWAP stays, scoped to the media so hovering the title / swatch row never flips
       the image. A single-image SKU just zooms (no swap, no tone-shift — a wash on white re-muddied it). */
    .ez-card__media:hover .ez-card__img--hover { opacity: 1; }
  }

  /* L1 [v1.3] static factual badge — a FILL from the live-theme 3-colour badge family (no border,
     white text, never the accent-red); 4px; max one (Liquid enforces). Sold-out = neutral status. */
  .ez-card__badge {
    position: absolute;
    inset-block-start: var(--space-stack-sm, 8px);
    inset-inline-start: var(--space-stack-sm, 8px);
    padding: 2px var(--space-stack-sm, 8px); /* 2px = badge micro-inset (allowlisted) */
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: var(--badge-new-fill, #059669);
    color: #fff;
    font-size: var(--type-caption-size, 0.75rem);
    font-weight: var(--type-weight-medium, 500);
    letter-spacing: 0.02em;
  }
  .ez-card__badge--sold-out { background: var(--badge-soldout-fill, #f7f7f7); color: var(--color-text, var(--color-foreground)); }

  /* [item 2] title + price LEFT-aligned on every surface (incl. search) — lock start-alignment against any
     inherited centering; the price flex row is already flex-start. */
  .ez-card__body { padding-block-start: var(--space-stack-sm, 8px); text-align: start; }
  /* C2 [v1.3] price > name: the name is small + unbold, the price the bigger, bolder line. */
  .ez-card__title {
    /* [item 2] tighten the title -> price gap: drop the 4px (--_stack-xs) bottom margin so they sit closer;
       the title's own line-height leading keeps a small natural gap to the price. On-ladder (0). */
    margin: 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-h3-line, 1.3); /* card title = the h3 ROLE (canon 3.6); sized body-sm per v1.3 price>name */
    font-weight: var(--type-weight-regular, 400);
    /* two-line clamp keeps every card body the same height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ez-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-stack-sm, 8px);
    font-size: 1.0625rem;
    font-weight: var(--type-weight-bold, 700);
    font-variant-numeric: tabular-nums;
  }
  .ez-card__price-current { font-weight: var(--type-weight-bold, 700); }
  .ez-card__price-current--muted { opacity: 0.65; }
  /* L3 [v1.3] sale is INK-led (the current price is the pull, not a sale-red — visual.md/bench). */
  .ez-card__price-current--sale { color: var(--color-text, var(--color-foreground)); }
  .ez-card__price-was {
    opacity: 0.55;
    text-decoration: line-through;
    font-weight: var(--type-weight-regular, 400);
    font-size: var(--type-body-sm-size, 0.875rem);
  }

  /* C-3 [v1.3] swatches — BIG (30px chip, 44px hit-area) · INTERACTIVE (tap swaps the card hero to
     the variant image) · selection = a RING (outline), never a fill · row sits OUTSIDE the card
     link · density adapts to card width (ez-product-rail.js hides the overflow into "+N"). */
  /* [A3] nowrap: the swatch row is ALWAYS a single line, so it can never reflow its height
     (the wrap<->unwrap jump was the "weird movement"); ez-product-rail.js folds any overflow
     into the "+N" chip (whole swatches only, never a partial). No overflow clip on the row so
     the selection ring is never cut. */
  .ez-card__swatches {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* [item B] name / price / swatch read as ONE flush-left column — explicit start-alignment,
       robust against any inherited centering. */
    justify-content: flex-start;
    gap: var(--card-swatch-gap, 8px);
    /* [owner delta] separation price -> swatch row. History: 16px (--_stack-lg) -> 20px (FIX B, "a bit more
       air") -> 12px here (owner: 20 was "going a bit far"; pulled back toward the tight title->price rhythm he
       called "alright"). 12px is the on-ladder rung; the swatch row still reads slightly separated from price.
       The inter-swatch HORIZONTAL gap stays --card-swatch-gap (8px) — unchanged. */
    margin: var(--space-12, 12px) 0 0;
    /* [item B] (1) LEFT-ALIGN the row to the text edge: the chip BODIES already sat at the card
       content-left (== the title/price left edge), but the DEFAULT-selected chip's outward selection
       ring (box-shadow) poked ~4px LEFT of that edge — the visible mis-alignment the owner flagged.
       Shift the row right by that exact ring outer-spread (2px surface gap + the ring width, the same
       expression the ring box-shadow uses) so the selected chip's ring now LANDS on the text edge and
       the three read as one clean column at rest.
       (2) a bit MORE bottom space below the swatches: 8px row pad-bottom ON TOP of the card's 8px
       padding (~16px total) so the swatch row doesn't sit tight to the card's bottom edge. */
    padding: 0 0 var(--space-stack-sm, 8px) calc(2px + var(--card-swatch-ring-width, 2px));
    list-style: none;
    /* [v1.6] dead-zone fix: the row sits ABOVE the stretched PDP ::after (z-3 > z-1) but is itself
       pointer-transparent, so a tap on an empty gap (or the "+N" chip) FALLS THROUGH to the PDP link;
       only the swatch BUTTONS re-enable pointer events (below) — so a swatch tap swaps colour while every
       other pixel of the row navigates. JS delegation still fires: the click bubbles from the button
       (pointer-events:auto) up through this row's listener even though the row is pointer-events:none. */
    position: relative;
    z-index: 3;
    pointer-events: none;
  }
  .ez-card__swatches > li { display: inline-flex; }
  .ez-card__swatches > li[hidden] { display: none; }
  /* [A2] SMALL card-appropriate chip (20px) — near the default collection card's native-small
     size (owner's "fine" reference, fix consistently), clearly below the bench/PDP 30px "big".
     The card keeps a full 44px HIT AREA via the ::before, so touch-accessibility (§6 C-3) holds. */
  .ez-card__swatch {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: var(--radius-full, 50%);
    border: var(--stroke-hairline, 1px) solid var(--color-line, var(--color-border));
    background: var(--ez-swatch, var(--color-surface, var(--color-background)));
    background-size: cover;
    background-position: center;
    cursor: pointer;
    /* [v1.6] the row is pointer-events:none so its gaps fall through to the PDP link; the BUTTON re-enables
       pointer events so a swatch tap swaps colour. touch-action:manipulation keeps the tap crisp on touch
       (no 300ms delay / double-tap-zoom). */
    pointer-events: auto;
    touch-action: manipulation;
    /* [item 2] selection RING via BOX-SHADOW (a 2px surface-colour gap + a ring), NOT outline — outline-color
       did not animate on select. The two-layer shadow keeps the ring OUTSIDE the chip with a small gap; the
       ring colour fades transparent -> ink and a subtle scale gives tactile feedback. Both animate over .18s.
       [bug-145] the ring reads the CANONICAL --color-surface / --color-text (rooted at ez-tokens :root + per
       scheme), NOT the rail-scoped --_surface / --_text — so it resolves on OFF-RAIL grids (search / collection)
       too; an unresolved var() with no fallback would void the whole box-shadow (computes to none). The fallback
       matches the sheet (--color-surface := --color-background, --color-text := --color-foreground) so resilience
       resolves IDENTICALLY to :root on every scope — never a literal that could lie about the active scheme. */
    box-shadow: 0 0 0 2px var(--color-surface, var(--color-background)), 0 0 0 calc(2px + var(--card-swatch-ring-width, 2px)) transparent;
    /* durations/eases ride the motion ladder (owner's fuzzy ".18s" -> the 150ms fast token, snappy for a
       selection + == the prior swatch transition). Names box-shadow + transform per the locked spec. */
    transition: box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)), transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  /* 44px hit-area around the 18px chip (touch floor) without changing the visible size */
  .ez-card__swatch::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 44px;
    height: 44px;
    translate: -50% -50%;
  }
  .ez-card__swatch.is-selected {
    box-shadow: 0 0 0 2px var(--color-surface, var(--color-background)), 0 0 0 calc(2px + var(--card-swatch-ring-width, 2px)) var(--color-text, var(--color-foreground));
    transform: scale(1.08);
  }
  .ez-card__swatch--unavailable { border-style: dashed; opacity: 0.65; }
  .ez-card__swatch-more {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    font-size: var(--type-caption-size, 0.75rem);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  .ez-card__swatch-more[hidden] { display: none; }

  /* skeleton cells: shown by the recommendations rail until the fetch resolves
     (perceived-speed on patchy PK networks; static, no shimmer -> reduced-motion-safe) */
  .ez-card--skeleton .ez-card__media { background: var(--surface-lift, #f4efe4); }
  .ez-card--skeleton .ez-card__title,
  .ez-card--skeleton .ez-card__price {
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-lift, #f4efe4);
    color: transparent;
  }

  /* ---- Controls — the ROW container + the dots container stay section-owned; the mobile-dot
     BUTTON, the scroll-progress bar/fill and the overlay arrows are shared ez-carousel-styles.
     Dots + progress are the MOBILE controls; arrows are DESKTOP (§2.3 750 seam). ------------- */
  .ez-pr__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-pr__dots {
    display: flex;
    align-items: center;
    gap: var(--_stack-sm);
    margin-inline: auto;
  }

  /* ---- 750 seam: desktop layout (design_system.md §2.3) ----------------- */
  @media screen and (min-width: 750px) {
    .ez-product-rail {
      /* [v1.3] 32/32 vertical BOTH breakpoints; desktop sides = 64 (the 1280 box). These mirror the
         global ez-tokens :root 750 flips (kept explicit, matching hero/banner). The shell head-size
         (--type-h2-size 1.375->1.75) + pad-x + the arrow reveal auto-flip via the shared layers. */
      --_section-y: var(--space-section-y, 32px);
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    /* [carousel-peek] desktop is arrow-driven + flush (arrows disable at the reachable end to convey
       direction), so reset the mobile bidirectional-peek snap inset to 0 here. */
    .ez-pr__track { scroll-padding-inline-start: 0; }
    .ez-pr__track > .ez-card {
      /* desktop shows the configured column count, no peek */
      width: calc((100% - (var(--_gutter) * (var(--ez-cols, 4) - 1))) / var(--ez-cols, 4));
    }
    .ez-pr__controls { display: none; }
  }

  /* ---- [S7 additive] FREE-SCROLL transport: the row scrolls freely, no snap-to-card.
     The `free_scroll` setting label promises exactly this; the engine's `free` flag only
     governed arrow disable-state, so the CSS half is here. Cells drop their snap targets
     too (a snap-align with no snap-type is inert, but leaving it would lie about the mode).
     Controls chrome is suppressed in Liquid (component-contracts C2: free-scroll carries no
     bullets). ------------------------------------------------------------------------ */
  .ez-product-rail--free .ez-pr__track {
    scroll-snap-type: none;
    scroll-padding-inline-start: 0;
  }
  .ez-product-rail--free .ez-pr__track > .ez-card { scroll-snap-align: none; }

  /* ---- Grid layout mode: multi-row static grid (design_system.md §2.5 product-grid role):
     2-up base -> 3-up @750 -> columns_desktop @990. No scroll-snap, no controls. --------- */
  .ez-product-rail--grid .ez-pr__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--_heading-gap);
    overflow: visible;
    scroll-snap-type: none;
  }
  .ez-product-rail--grid .ez-pr__track > .ez-card {
    width: auto;
    scroll-snap-align: none;
  }
  @media screen and (min-width: 750px) {
    .ez-product-rail--grid .ez-pr__track { grid-template-columns: repeat(3, 1fr); }
  }
  @media screen and (min-width: 990px) {
    .ez-product-rail--grid .ez-pr__track { grid-template-columns: repeat(var(--ez-cols, 4), 1fr); }
  }

  /* ---- reduced motion: kill smooth-scroll + transitions ----------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-pr__track { scroll-behavior: auto; }
    .ez-product-rail * { transition-duration: 0.01ms !important; }
    /* [v1.5] reduced motion KILLS the whole-card hover zoom (the resting shadow + border persist). */
    .ez-card:hover { transform: none; }
    /* card press-scale stays removed (owner-final: no press on the card) AND the rail nav arrow/dot
       press-scale removed (owner: "no press on the rail"). Only the view-all link presses; guard it. */
  }
/* END_SECTION:ez-product-rail */

/* START_SECTION:ez-section (INDEX:31) */
/* Design-system tokens -> shell-scoped private aliases. Fallbacks equal the
     ez-tokens.liquid :root values; :root wins everywhere it is present. */
  .ez-section {
    --_section-y: var(--space-section-y, 32px);
    /* THE between-element gap. The shell owns the space BETWEEN its blocks; a block carries
       none of its own (owner ruling 2026-07-29: "sections own in between element spacing is
       enough"). One existing semantic rung, no new value: --space-heading-gap, 24 mobile ->
       32 at the 750 seam. It reads correctly as a flat gap because the section's own rhythm
       does the separating: 32 between two elements inside a section vs 64 across a section
       boundary (32 padding either side), so a heading still reads ATTACHED to the element it
       heads at half the distance to the next section. */
    --_row-gap: var(--space-heading-gap, 24px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_container: var(--size-container, 1280px);
    /* content column = the 1280 box minus its two sides (1152 desktop, viewport-bound mobile) */
    --_content-max: calc(var(--_container) - (2 * var(--_pad-x)));

    padding-block: var(--_section-y);
    background: var(--color-surface, var(--color-background));
    color: var(--color-text, var(--color-foreground));
  }

  /* Separator / utility shell variant (S1) — a SINGLE locked variant, not an open setting:
     zero rhythm for a pure hairline or a flush utility row, one small reduced rung for a band
     with a little height. Such a section IS the band/hairline/strip, so it never also spends
     whitespace. This is the ONE sanctioned way to get a non-standard rhythm (design_system.md
     §2.1): the SHELL grants it, per instance, from a bounded list. A block never takes it —
     a per-block padding setting is the Horizon pattern the owner ruled out, and a hardcoded
     per-section escape (the live theme's `ez-trust--home-flush`, keyed on a section id inside
     the trust-strip file) is the same leak wearing a different hat. */
  .ez-section--rhythm-separator-hairline { padding-block: 0; }
  .ez-section--rhythm-separator-band { padding-block: var(--space-stack-lg, 16px); }

  /* The full-bleed grid: three columns, so a child sits in `content` by default and an
     opted-in MAIN element spans `full` (edge to edge) without touching its own margins.
     Reproduces the previous `max-width + margin-inline:auto + padding-inline` box exactly. */
  .ez-section__inner {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--_pad-x), 1fr)
      [content-start] minmax(0, var(--_content-max))
      [content-end] minmax(var(--_pad-x), 1fr)
      [full-end];
    row-gap: var(--_row-gap);
  }
  .ez-section__inner > * { grid-column: content; min-width: 0; }
  .ez-section__inner > .ez-section__bleed { grid-column: full; }

  /* Section-level full width (schema): the whole section runs edge to edge, no side inset. */
  .ez-section--full-width { --_pad-x: 0px; --_content-max: 100%; }

  /* Contain sub-pixel / scroll-snap width leakage from a bleeding transport child.
     `clip` never widens the page and stays sticky-safe. A fixed OVERLAY belonging to a
     nested block must be emitted OUTSIDE this wrapper (same rule as the ez-* shells). */
  .ez-section:has(.ez-section__bleed) { overflow-x: clip; }

  /* Empty-shell rule. A content block that finds it has nothing to show (an empty product
     recommendations rail is the live case) hides ITSELF, never the shared shell — hiding the
     shell would take its sibling blocks with it. This rule then hides the shell only once
     EVERY content block in it is hidden, so a heading is never left orphaned above nothing.
     Progressive enhancement: without :has() the worst case is the old orphan heading. */
  .ez-section:has([data-ez-section-content]):not(:has([data-ez-section-content]:not([hidden]))) {
    display: none;
  }
  .ez-section__inner > [hidden] { display: none; }
/* END_SECTION:ez-section */

/* START_SECTION:ez-shell-preview (INDEX:32) */
/* ez-shell-preview — REVIEW SCAFFOLDING (preview only, delete before Z). Literal LOCKED shell values (round-2b)
     because the --space-* tokens still hold the old 48/80 until W2. */
  .ez-shellprev { color: #1a1a1a; background: #ffffff; overflow-x: hidden; }
  .ez-shellprev *, .ez-shellprev *::before, .ez-shellprev *::after { box-sizing: border-box; }

  /* ---- THE LOCKED SHELL ---- */
  .shellprev { padding-block: 32px; }                                              /* 32 top / 32 bottom, both breakpoints */
  .shellprev__box { max-width: 1280px; margin-inline: auto; padding-inline: 64px; } /* 1280 box = 1152 content + 64 sides */
  .shellprev--full { padding-inline: 0; margin-inline: calc(50% - 50vw); width: 100vw; } /* full-bleed edge-to-edge */
  @media screen and (max-width: 749px) {
    .shellprev__box { padding-inline: 16px; }                                      /* mobile 16 sides */
  }

  /* ---- contained content ---- */
  .shellprev__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8a8a; }
  .shellprev__h { margin: 0 0 24px; font-size: 28px; line-height: 1.15; font-weight: 700; }
  .shellprev__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  @media screen and (min-width: 750px) { .shellprev__grid { grid-template-columns: repeat(4, 1fr); } }
  .shellprev__media { aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f4f4f4; }
  .shellprev__media svg, .shellprev__ph { width: 100%; height: 100%; }
  .shellprev__name { margin: 8px 0 2px; font-size: 14px; }
  .shellprev__price { margin: 0; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* ---- full-width BANNER: 21:9 desktop / 4:5 mobile default; full image + overlaid text/CTA, no split ---- */
  .shellprev__band { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: #eceae6; }
  @media screen and (max-width: 749px) { .shellprev__band { aspect-ratio: 4 / 5; } }
  .shellprev__band svg, .shellprev__bandimg { width: 100%; height: 100%; object-fit: cover; }
  /* SUBTLE localized gradient reserves the text zone for legibility — image clearly dominant (owner: the prior fade was "one a lot") */
  .shellprev__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.40), rgb(0 0 0 / 0.06) 45%, transparent 65%); }
  @media screen and (max-width: 749px) { .shellprev__band::after { background: linear-gradient(180deg, rgb(0 0 0 / 0.44), rgb(0 0 0 / 0.06) 42%, transparent 62%); } }
  .shellprev__overlay { position: absolute; inset: 0; }
  /* text + CTA sit UP on the image (upper placement), both breakpoints — never bottom-hugging or dropping out */
  .shellprev__overlay-inner { max-width: 1280px; margin-inline: auto; padding-inline: 64px; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding-block-start: 44px; gap: 12px; }
  @media screen and (max-width: 749px) { .shellprev__overlay-inner { padding-inline: 16px; padding-block-start: 28px; } }
  .shellprev__oveyebrow { margin: 0; color: #fff; opacity: 0.9; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
  .shellprev__ovh { margin: 0; color: #fff; font-size: 36px; line-height: 1.1; font-weight: 700; max-width: 18ch; text-wrap: balance; }
  @media screen and (max-width: 749px) { .shellprev__ovh { font-size: 28px; } }
  .shellprev__ovcta { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 24px; background: #fff; color: #1a1a1a; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; }

  /* ---- tiles ---- */
  .shellprev__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .shellprev__tile { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f4f4f4; }
  .shellprev__tile svg { width: 100%; height: 100%; }
  .shellprev__tilelabel { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; background: rgb(255 255 255 / 0.92); padding: 3px 9px; border-radius: 4px; font-size: 13px; font-weight: 500; }

  .shellprev__foot { max-width: 1280px; margin: 8px auto 0; padding-inline: 64px; padding-block: 32px; font-size: 12px; color: #8a8a8a; }
  @media screen and (max-width: 749px) { .shellprev__foot { padding-inline: 16px; } }
/* END_SECTION:ez-shell-preview */

/* START_SECTION:ez-shoppable-gallery (INDEX:33) */
/* Design-system tokens resolved once into section-scoped private aliases; components read
     only the --_ aliases (theme-foundation.md §A1). Structure/motion fall back to the
     design_system.md provisional value; bespoke colour roles to the live scheme token. */
  .ez-shop {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_gutter: var(--space-gutter, 12px);
    --_container: var(--size-container, 1280px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-lg: var(--radius-surface, 12px);
    --_radius-full: var(--radius-full, 50%);
    --_aspect: var(--aspect-lifestyle, 4 / 5);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_dur-exp: var(--motion-expressive, 400ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_ease-exit: var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_on-media: var(--color-on-media, #ffffff);
    --_scrim: var(--color-overlay-scrim, rgb(0 0 0 / 0.5));
  }
  /* Shell outer (rhythm + background + [B8] overflow-clip) + the 1280 inner + the S4 head zone
     (muted eyebrow / inline_richtext heading, head_row:false) -> shared ez-shell; the overlay-arrow
     / mobile-dot / scroll-progress chrome -> shared ez-carousel-styles. This section owns the scene
     track + hotspot markers + the product bottom-sheet below. */

  /* ---- Track / scenes -------------------------------------------------- */
  .ez-shop__track {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-shop__item { position: relative; margin: 0; }
  .ez-shop__media {
    position: relative;
    aspect-ratio: var(--_aspect);
    overflow: hidden;
    border-radius: var(--_radius-md);
    background: var(--_surface);
  }
  .ez-shop__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ez-shop__placeholder { width: 100%; height: 100%; }
  .ez-shop__placeholder svg { width: 100%; height: 100%; }

  /* ---- Hotspot marker -------------------------------------------------- */
  .ez-shop__marker {
    position: absolute;
    left: var(--ez-x, 50%);
    top: var(--ez-y, 60%);
    transform: translate(-50%, -50%);
    width: var(--_control);
    height: var(--_control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .ez-shop__marker-dot {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: var(--_radius-full);
    background: var(--_on-media);
    box-shadow: 0 0 0 var(--_hairline) rgb(0 0 0 / 0.15);
  }
  .ez-shop__marker-dot::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: var(--_radius-full);
    background: var(--_text);
  }
  .ez-shop__marker-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--_radius-full);
    box-shadow: 0 0 0 2px var(--_on-media);
    opacity: 0.7;
    animation: ez-shop-pulse 2s var(--_ease) infinite;
  }
  @keyframes ez-shop-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    70% { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }
  .ez-shop__marker:active { transform: translate(-50%, -50%) scale(var(--_press)); }
  .ez-shop__marker:focus-visible { outline: var(--stroke-heavy, 2px) solid var(--_text); outline-offset: 3px; border-radius: var(--_radius-full); }

  /* ---- Product mini-card (rendered into the sheet body) ---------------- */
  .ez-shop__card { display: flex; gap: var(--_inset); align-items: center; text-decoration: none; color: inherit; }
  .ez-shop__card-media {
    flex: 0 0 auto;
    width: 96px;
    aspect-ratio: var(--aspect-product, 1 / 1);
    border-radius: var(--_radius-md);
    overflow: hidden;
    background: var(--_surface);
  }
  .ez-shop__card-media img, .ez-shop__card-media svg { width: 100%; height: 100%; object-fit: contain; display: block; }
  .ez-shop__card-info { display: flex; flex-direction: column; gap: var(--_stack-xs); min-width: 0; }
  .ez-shop__card-title { font-size: var(--type-h3-size, 1.125rem); line-height: var(--type-h3-line, 1.3); font-weight: var(--_w-semibold); }
  .ez-shop__card-price { font-size: var(--type-body-size, 1rem); font-variant-numeric: tabular-nums; }
  .ez-shop__card-was { color: var(--_muted); margin-inline-end: var(--_stack-sm); }
  .ez-shop__card-cta {
    margin-block-start: var(--_stack-xs);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---- Carousel (>1 scene) — finite native scroll-snap ----------------- */
  .ez-shop__track--carousel {
    display: flex;
    grid-template-columns: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--_gutter);
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }
  .ez-shop__track--carousel .ez-shop__item {
    flex: 0 0 calc(100% - var(--_gutter) * 2);
    scroll-snap-align: start;
  }
  /* Controls — the ROW container + the dots container stay section-owned; the mobile-dot BUTTON, the
     scroll-progress bar + its scaleX fill (`.ez-shop__progress-fill`, bug-120), and the overlay arrows
     are all shared ez-carousel-styles. */
  .ez-shop__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-shop__dots { display: flex; align-items: center; gap: var(--_stack-sm); }

  /* [v1.3 #16(b)] positioned viewport so the desktop arrows overlay ON the rail; the arrow chevron
     itself (bg / size / hover / disabled / 750 reveal) is shared ez-carousel-styles. */
  .ez-shop__viewport { position: relative; }

  /* ---- Product sheet (bottom-sheet mobile / centered popover desktop) --- */
  .ez-shop__sheet[hidden] { display: none; }
  .ez-shop__sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 1000);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .ez-shop__backdrop {
    position: absolute;
    inset: 0;
    background: var(--_scrim);
    opacity: 0;
    transition: opacity var(--_dur-base) var(--_ease);
  }
  .ez-shop__sheet.is-open .ez-shop__backdrop { opacity: 1; }
  .ez-shop__panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    background: var(--_surface);
    color: var(--_text);
    border-start-start-radius: var(--_radius-lg);
    border-start-end-radius: var(--_radius-lg);
    padding: var(--_inset-lg);
    padding-block-end: calc(var(--_inset-lg) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform var(--_dur-exp) var(--_ease);
  }
  .ez-shop__sheet.is-open .ez-shop__panel { transform: translateY(0); }
  .ez-shop__close {
    position: absolute;
    inset-block-start: var(--_stack-sm);
    inset-inline-end: var(--_stack-sm);
    width: var(--_control);
    height: var(--_control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--_radius-full);
    background: transparent;
    color: var(--_text);
    cursor: pointer;
  }
  .ez-shop__close svg { width: 22px; height: 22px; }
  .ez-shop__close:active { transform: scale(var(--_press)); }

  /* ---- 750 seam: desktop (design_system.md §2.3) ----------------------- */
  @media screen and (min-width: 750px) {
    .ez-shop { --_section-y: var(--space-section-y, 32px); --_gutter: var(--space-24, 24px); /* deliberate 24px desktop gap (canon 16-24 band, peek-most surface) — pinned to the raw rung so the root's 16px flip can't shrink it */ --_heading-gap: var(--space-heading-gap, 32px); }
    .ez-shop__track { grid-template-columns: repeat(3, 1fr); }
    .ez-shop__track--carousel .ez-shop__item { flex: 0 0 calc((100% - var(--_gutter) * 2) / 3); }
    /* desktop = overlay arrows on the rail (shared ez-carousel-styles reveals them); the
       dots/progress control row is mobile-only. */
    .ez-shop__controls { display: none; }
    .ez-shop__sheet { align-items: center; }
    .ez-shop__panel {
      border-radius: var(--_radius-lg);
      transform: translateY(12px) scale(0.98);
      opacity: 0;
      transition: transform var(--_dur-base) var(--_ease), opacity var(--_dur-base) var(--_ease);
    }
    .ez-shop__sheet.is-open .ez-shop__panel { transform: translateY(0) scale(1); opacity: 1; }
  }

  /* ---- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-shop__track--carousel { scroll-behavior: auto; }
    .ez-shop__marker-dot::after { animation: none; opacity: 0; }
    .ez-shop * { transition-duration: 0.01ms !important; }
    /* markers keep their centering transform; press-scale is dropped */
    .ez-shop__marker:active { transform: translate(-50%, -50%); }
    .ez-shop__close:active { transform: none; }
  }
/* END_SECTION:ez-shoppable-gallery */

/* START_SECTION:ez-styleguide (INDEX:34) */
/* ============================================================================
     ez-styleguide — REVIEW SCAFFOLDING (preview only, delete before Z).
     Design-system tokens resolved into private aliases with provisional fallbacks
     (theme-foundation §A1) so the bench renders on-token before N4. Status-stamp
     colours are a review-tool legend, deliberately functional (not a customer surface).
     ============================================================================ */
  .ez-sg {
    --_gutter: var(--space-gutter, 12px);
    --_container: var(--size-container, 1280px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_radius-sm: var(--radius-sm, 4px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-lg: var(--radius-surface, 12px);
    --_radius-pill: var(--radius-pill, 999px);
    --_radius-full: var(--radius-full, 50%);
    --_hairline: var(--stroke-hairline, 1px);
    --_control: var(--size-control-md, 48px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_dur-exp: var(--motion-expressive, 400ms);
    --_dur-exit: var(--motion-duration-exit-spatial, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_ease-exit: var(--motion-ease-exit, cubic-bezier(0.4, 0, 1, 1));
    --_w-regular: var(--type-weight-regular, 400);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_lift: var(--surface-lift, #f4efe4);
    --_fill: var(--surface-fill, #f9f8f6);
    --_measure: var(--size-measure, 65ch);
    /* interaction-accent spine (owner dopamine doctrine): selected / checked / active states carry brand accent.
       Buttons stay ink until the W2 token repoint (item 16 — do not pre-apply). Accent NEVER spends the
       one-accent SURFACE budget (it is a state colour, not a section fill), NEVER errors, NEVER swatches. */
    --_accent: var(--color-accent, #BF1C1D);
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    /* L1 [v1.3] badge family — the 3 colours already in use on the live theme (ai product block
       ai_gen_block_8eb9c79 + the default collection-page card _product-card-gallery): #BF1C1D
       save-red (== the brand accent -> EXCLUDED, never the accent), #7C3AED top-deal purple,
       #059669 best-value green. Factual badges fill from the family (no border, white text);
       sold-out stays a neutral status. */
    --_badge-a: #059669;
    --_badge-b: #7C3AED;
    --_badge-soldout: #f7f7f7;
    /* focus-state model v2 (owner round 2): rest = white interior + border separator; HOVER = light neutral fill;
       FOCUS = the SAME border darkens on a WHITE interior (caret + border, no fill). ONE border, never a second.
       Placeholder clearly lighter than filled text. */
    --_hover-fill: rgb(0 0 0 / 0.05);
    --_focus-border: var(--_text);
    --_placeholder: rgb(0 0 0 / 0.42);
    /* review-tool functional legend colours (not customer surface) */
    --_ok: #1f8a53;
    --_ok-bg: rgb(31 138 83 / 0.1);
    --_warn: #a8730a;
    --_warn-bg: rgb(168 115 10 / 0.12);
    --_todo: #5b6472;
    --_todo-bg: rgb(91 100 114 / 0.1);
    --_dorm: #2f6db0;
    --_dorm-bg: rgb(47 109 176 / 0.1);
    /* L3 sale grammar is ink-led per visual.md (the current price is the pull; the strike is muted ink,
       NEVER red — no fake urgency). --_sale kept only as a legacy alias, no longer consumed. */
    --_sale: var(--color-sale, #b12704);

    display: block;
    padding-block: var(--space-section-y, 32px);
    background: var(--_surface);
    color: var(--_text);
    font-variant-numeric: tabular-nums;
  }
  .ez-sg *, .ez-sg *::before, .ez-sg *::after { box-sizing: border-box; }

  .ez-sg__masthead,
  .ez-sg__group,
  .ez-sg__foot {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_gutter);
  }

  /* ---- masthead ---- */
  .ez-sg__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: 0.75rem; font-weight: var(--_w-semibold);
    letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6;
  }
  .ez-sg__title { margin: 0 0 var(--_stack-sm); font-size: 2rem; line-height: 1.1; font-weight: var(--_w-bold); }
  .ez-sg__lede { margin: 0 0 var(--_inset-lg); max-width: var(--_measure); line-height: 1.5; opacity: 0.85; }

  .ez-sg__legend {
    display: flex; flex-wrap: wrap; gap: var(--_stack-sm) var(--_inset);
    margin-block-end: var(--_inset);
    font-size: 0.8125rem;
  }
  .ez-sg__legend-item { display: inline-flex; align-items: center; gap: 6px; opacity: 0.85; }

  .ez-sg__tally {
    display: flex; flex-wrap: wrap; gap: var(--_stack-sm);
    margin: 0 0 var(--_inset-lg);
  }
  .ez-sg__tally-cell {
    flex: 1 1 auto; min-width: 88px;
    border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-md);
    padding: var(--_stack-sm) var(--_inset);
  }
  .ez-sg__tally-cell dt { margin: 0; font-size: 0.75rem; opacity: 0.7; }
  .ez-sg__tally-cell dd.ez-sg__num { margin: 2px 0 0; font-size: 1.5rem; font-weight: var(--_w-bold); }
  .ez-sg__tally-cell--total { border-color: var(--_text); }

  /* ---- groups + rows ---- */
  .ez-sg__group { margin-block-start: var(--space-section-y, 32px); }
  .ez-sg__grouptitle {
    margin: 0 0 var(--_inset);
    padding-block-end: var(--_stack-sm);
    border-block-end: 2px solid var(--_text);
    font-size: 1.25rem; font-weight: var(--_w-bold);
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--_inset);
  }
  .ez-sg__groupcount { font-size: 0.8125rem; font-weight: var(--_w-regular); opacity: 0.6; }

  .ez-sg__row {
    display: grid; gap: var(--_stack-sm) var(--_inset-lg);
    padding-block: var(--_inset-lg);
    border-block-end: var(--_hairline) solid var(--_line);
  }
  .ez-sg__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--_stack-sm); }
  .ez-sg__code {
    font-weight: var(--_w-bold); font-size: 0.8125rem;
    background: var(--_lift); border-radius: var(--_radius-sm);
    padding: 2px 8px; min-width: 40px; text-align: center;
  }
  .ez-sg__elname { font-weight: var(--_w-semibold); }

  .ez-sg__stamp {
    font-size: 0.6875rem; font-weight: var(--_w-bold);
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 3px 8px; border-radius: var(--_radius-sm); white-space: nowrap;
  }
  .ez-sg__stamp--built { color: var(--_ok); background: var(--_ok-bg); }
  .ez-sg__stamp--drift { color: var(--_warn); background: var(--_warn-bg); }
  .ez-sg__stamp--todo { color: var(--_todo); background: var(--_todo-bg); }
  .ez-sg__stamp--dormant { color: var(--_dorm); background: var(--_dorm-bg); }

  /* secondary SPACING-CUSTODY tag (owner addendum; NOT the doctrine stamp) -> outlined, mono, clearly secondary */
  .ez-sg__spacing {
    font-size: 0.625rem; font-weight: var(--_w-medium);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: 2px 7px; border-radius: var(--_radius-sm);
    border: var(--_hairline) solid var(--_line); background: transparent; white-space: nowrap;
  }
  .ez-sg__spacing--neutral { color: var(--_ok); border-color: var(--_ok); }
  .ez-sg__spacing--owner   { color: var(--_dorm); border-color: var(--_dorm); font-weight: var(--_w-bold); }
  .ez-sg__spacing--flag    { color: var(--_warn); border-color: var(--_warn); }
  .ez-sg__spacing--wrinkle { color: var(--_dorm); border-color: var(--_line); }
  .ez-sg__spacing--fixed   { color: var(--_dorm); border-color: var(--_line); }
  .ez-sg__spacing--base    { color: var(--_todo); border-color: var(--_line); }
  .ez-sg__spacing--na      { color: var(--_todo); border-color: var(--_line); opacity: 0.55; }
  .ez-sg__addendum {
    margin: var(--_inset) 0 0; padding: var(--_inset); max-width: var(--_measure);
    background: var(--_lift); border-radius: var(--_radius-md); border-inline-start: 3px solid var(--_warn);
    font-size: 0.8125rem; line-height: 1.5;
  }

  .ez-sg__demo { display: flex; flex-direction: column; gap: var(--_stack-md); }
  .ez-sg__demo--empty { opacity: 1; }
  .ez-sg__cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_stack-md); }
  .ez-sg__cluster--stack { flex-direction: column; align-items: flex-start; }
  .ez-sg__hint { margin: 0; font-size: 0.8125rem; line-height: 1.45; opacity: 0.65; max-width: var(--_measure); }
  .ez-sg__sublabel { margin: 0; font-size: 0.75rem; font-weight: var(--_w-semibold); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }
  /* NOT-BUILT-YET / spec-note placeholder card: a plain dashed hairline card (no fill, no left accent bar —
     the side-bar read as generic AI-callout styling, owner round 2). Reads as an honest "not built yet" slot. */
  .ez-sg__specnote {
    margin: 0; padding: var(--_inset); line-height: 1.5; max-width: var(--_measure);
    border: 1px dashed var(--_line); border-radius: var(--_radius-md);
    font-size: 0.875rem;
  }
  .ez-sg__note { margin: 0; font-size: 0.8125rem; line-height: 1.5; max-width: var(--_measure); opacity: 0.9; }
  .ez-sg__note code, .ez-sg__specnote code, .ez-sg__hint code { font-size: 0.85em; background: var(--_lift); padding: 1px 5px; border-radius: var(--_radius-sm); }
  .ez-sg__proseline { margin: 0; line-height: 1.5; }

  .ez-sg__foot {
    margin-block-start: var(--space-section-y, 32px);
    padding-block-start: var(--_inset);
    border-block-start: var(--_hairline) solid var(--_line);
    font-size: 0.8125rem; opacity: 0.6;
  }
  .ez-sg__foot p { margin: 0; max-width: var(--_measure); }

  /* two-column rows on desktop (meta+demo left, note right) */
  @media screen and (min-width: 750px) {
    .ez-sg__title { font-size: 2.5rem; }
    .ez-sg__row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
    .ez-sg__meta { grid-column: 1; }
    .ez-sg__demo { grid-column: 1; }
    .ez-sg__note { grid-column: 2; grid-row: 1 / span 2; padding-inline-start: var(--_inset-lg); border-inline-start: var(--_hairline) solid var(--_line); }
  }

  /* ============================ element demos ============================ */
  /* buttons (A-1) */
  .sg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--_stack-sm);
    min-height: var(--_control); padding-inline: var(--_inset-lg);
    border: var(--_hairline) solid transparent; border-radius: var(--_radius-md);
    font: inherit; font-weight: var(--_w-semibold); font-size: 0.9375rem;
    text-decoration: none; cursor: pointer;
    transition: transform var(--_dur-fast) var(--_ease), opacity var(--_dur-base) var(--_ease), background-color var(--_dur-base) var(--_ease);
  }
  .sg-btn:active { transform: scale(var(--_press)); }
  .sg-btn--primary { background: var(--_text); color: var(--_surface); border-color: var(--_text); }
  .sg-btn--secondary { background: var(--_surface); color: var(--_text); border-color: var(--_text); }
  .sg-btn--quiet { background: transparent; color: var(--_text); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
  .sg-btn--icon { padding: 0; width: var(--_control); border-color: var(--_line); }
  .sg-btn--icon svg { width: 22px; height: 22px; }
  .sg-btn--block { width: 100%; }
  .sg-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
  .sg-btn.is-loading { pointer-events: none; }
  @media (hover: hover) { .sg-btn--primary:hover { opacity: 0.9; } }

  .sg-spinner {
    width: 16px; height: 16px; flex: 0 0 auto;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
    animation: sg-spin 0.7s linear infinite;
  }
  .sg-spinner--standalone { width: 28px; height: 28px; color: var(--_text); }
  @keyframes sg-spin { to { transform: rotate(360deg); } }

  /* links (A-2) */
  /* inline prose link: interaction-accent + underline that PERSISTS on hover/focus (bug: it was hiding on hover) */
  .sg-link-inline { color: var(--_accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
  .sg-link-inline:hover, .sg-link-inline:focus-visible { text-decoration: underline; color: var(--_accent); }
  /* standalone link: chevron + accent, no resting underline; hover/focus reveals an under-WORD underline
     (NOT the product-card whole-card zoom — a link PRESSES in from centre 0.98, no lift/drift; [v1.5] the
     only sanctioned hover-motion transform is the product-card zoom, §7.3, and translateY-lift is retired).
     align-self hugs the content so the press-scale is tight on the text+chevron (the drift was a stretched box). */
  .sg-link-standalone {
    display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; min-height: 44px;
    color: var(--_accent); font-weight: var(--_w-medium);
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
    transform-origin: center;
    transition: transform var(--_dur-fast) var(--_ease), text-decoration-color var(--_dur-fast) var(--_ease);
  }
  .sg-link-standalone svg { width: 1em; height: 1em; flex: 0 0 auto; }
  @media (hover: hover) { .sg-link-standalone:hover { text-decoration-color: currentColor; } }
  .sg-link-standalone:focus-visible { text-decoration-color: currentColor; }
  .sg-link-standalone:active { transform: scale(var(--_press)); }

  /* inputs (B-1) — unified focus model: rest = white interior + border separator; focus = the SAME
     border darkens + interior takes a light neutral fill (no second border); placeholder lighter than filled. */
  .sg-field { display: flex; flex-direction: column; gap: var(--_stack-xs); width: 100%; max-width: 320px; }
  .sg-field__label { font-size: 0.8125rem; font-weight: var(--_w-medium); }
  .sg-input, .sg-select__el, .sg-textarea {
    width: 100%; min-height: var(--_control); padding-inline: var(--_inset);
    border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-sm);
    background: var(--_surface); color: var(--_text); font: inherit;
    transition: border-color var(--_dur-fast) var(--_ease), background-color var(--_dur-fast) var(--_ease);
  }
  .sg-input::placeholder, .sg-textarea::placeholder { color: var(--_placeholder); }
  @media (hover: hover) {
    .sg-input:hover, .sg-select__el:hover, .sg-textarea:hover { background: var(--_hover-fill); }
  }
  .sg-input:focus, .sg-input:focus-visible,
  .sg-select__el:focus, .sg-select__el:focus-visible,
  .sg-textarea:focus, .sg-textarea:focus-visible {
    outline: none; border-color: var(--_focus-border); background: var(--_surface);
  }
  .sg-textarea { min-height: 88px; padding-block: var(--_stack-sm); resize: vertical; }
  /* Horizon's input[type=email/text] (0,1,1) out-specifies the single .sg-input class (0,1,0), so scope the
     input's rest / hover / focus under .ez-sg (0,2,0 / 0,3,0) to win the base-theme bleed. v2: hover grey, focus white. */
  .ez-sg .sg-input { background: var(--_surface); border: var(--_hairline) solid var(--_line); }
  @media (hover: hover) { .ez-sg .sg-input:hover { background: var(--_hover-fill); } }
  .ez-sg .sg-input:focus, .ez-sg .sg-input:focus-visible { border-color: var(--_focus-border); background: var(--_surface); }
  .sg-select { position: relative; display: block; }
  .sg-select__el { padding-inline-end: 40px; appearance: none; -webkit-appearance: none; cursor: pointer; }
  .sg-select__chev { position: absolute; inset-inline-end: var(--_inset); inset-block-start: 50%; translate: 0 -50%; width: 16px; height: 16px; pointer-events: none; }

  /* search (B-2) — same focus model; the grey fill covers the WHOLE box (icon + field + clear);
     magnifier darkened so it reads; icons vertically aligned (display:block kills the baseline gap). */
  .sg-search {
    position: relative; display: flex; align-items: center; width: 100%; max-width: 360px;
    border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-sm);
    background: var(--_surface); min-height: var(--_control); padding-inline: var(--_inset);
    transition: border-color var(--_dur-fast) var(--_ease), background-color var(--_dur-fast) var(--_ease);
  }
  @media (hover: hover) { .sg-search:hover { background: var(--_hover-fill); } }
  .sg-search:focus-within { border-color: var(--_focus-border); background: var(--_surface); }
  .sg-search__icon { width: 20px; height: 20px; flex: 0 0 auto; display: block; opacity: 0.9; }
  .sg-search__input { flex: 1; border: 0; background: transparent; font: inherit; color: inherit; padding-inline: var(--_stack-sm); min-height: 44px; }
  .sg-search__input::placeholder { color: var(--_placeholder); }
  .sg-search__input:focus-visible { outline: none; }
  .sg-search__clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--_muted); cursor: pointer; }
  .sg-search__clear[hidden] { display: none; }  /* author display:inline-flex out-specifies the UA [hidden]{display:none}, so restate it */
  .sg-search__clear svg { width: 16px; height: 16px; display: block; }
  /* Horizon's input[type=search] (0,1,1) out-specifies .sg-search__input (0,1,0) and paints it grey in BOTH
     states — scope it TRANSPARENT under .ez-sg (0,2,0 / 0,3,0) so the WRAPPER governs (white rest / grey hover /
     white focus) and the field shows no grey residue. */
  .ez-sg .sg-search__input { background: transparent; border: 0; }
  .ez-sg .sg-search__input:focus, .ez-sg .sg-search__input:focus-visible { background: transparent; }

  /* checkbox / radio (C-1) — real inputs; CHECKED = accent fill + glyph (interaction-accent; distinct from the
     error red, which is inline-text-only and never a fill); glyph centred via grid (fixes tick misplacement +
     radio-dot off-centre); bolder tick; a quick zero-spring pop on select (a little life, motion stays controlled). */
  .sg-check { display: inline-flex; align-items: center; gap: var(--_stack-sm); cursor: pointer; position: relative; min-height: 44px; }
  .sg-check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
  .sg-check__box {
    width: 20px; height: 20px; flex: 0 0 auto;
    display: grid; place-content: center;
    border: var(--_hairline) solid var(--_muted); border-radius: var(--_radius-sm);
    background: var(--_surface);
    transition: background-color var(--_dur-fast) var(--_ease), border-color var(--_dur-fast) var(--_ease);
  }
  .sg-check--radio .sg-check__box { border-radius: var(--_radius-full); }
  .sg-check input:checked ~ .sg-check__box { background: var(--_accent); border-color: var(--_accent); }
  .sg-check:not(.sg-check--radio) .sg-check__box::after {
    content: ""; width: 6px; height: 10px;
    border: 2.5px solid var(--_surface); border-top: 0; border-inline-start: 0;
    rotate: 45deg; translate: 1px -1px;   /* optical-centre nudge: a bit right + a bit up (owner round 2) */
    scale: 0; opacity: 0;
    transition: scale var(--_dur-fast) var(--_ease), opacity var(--_dur-fast) var(--_ease);
  }
  .sg-check:not(.sg-check--radio) input:checked ~ .sg-check__box::after { scale: 1; opacity: 1; }
  .sg-check--radio .sg-check__box::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_surface);
    scale: 0; opacity: 0; transition: scale var(--_dur-fast) var(--_ease), opacity var(--_dur-fast) var(--_ease);
  }
  .sg-check--radio input:checked ~ .sg-check__box::after { scale: 1; opacity: 1; }
  .sg-check input:focus-visible ~ .sg-check__box { outline: 2px solid var(--_focus-border); outline-offset: 2px; }

  /* swatch (C-3) — BIG interactive touch targets (eyewear accessibility, esp. on the homepage card); card
     swatches SWAP the card hero on click; selection = an outline RING (never a fill — a fill would hide the
     colour it shows); multicolor/tortoise via a pattern fill (Shopify native colour-pattern); +N overflow kept. */
  .sg-swatch-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .sg-swatch {
    width: 30px; height: 30px; flex: 0 0 auto; padding: 0; position: relative;
    border-radius: var(--_radius-full);
    border: var(--_hairline) solid var(--_line);
    background: var(--sg-sw, var(--_surface));
  }
  .sg-swatch--btn { cursor: pointer; outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--_dur-fast) var(--_ease); }
  /* 44px hit target around the 30px chip (touch floor) without changing the visible size */
  .sg-swatch--btn::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 44px; height: 44px; translate: -50% -50%; }
  .sg-swatch--btn.is-selected { outline-color: var(--_text); }
  .sg-swatch--unavailable { border-style: dashed; opacity: 0.65; }
  .sg-swatch--multi { background-image: conic-gradient(from 45deg, #7a4a1e, #caa24a, #2c6b4f, #2c2c2c, #7a4a1e); }
  .sg-swatch--tortoise { background-image: repeating-linear-gradient(48deg, #6b3f1d 0 4px, #a9743a 4px 8px, #2a1a0c 8px 11px); }
  .sg-swatch-more { min-height: 44px; display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: var(--_w-medium); opacity: 0.7; }

  /* chips (C-4) — toggle in a picker; SELECTED = accent fill + a visible × so dismissibility is obvious
     (clicking a selected chip unselects it; it no longer reads as a stuck pressed button). */
  .sg-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
    padding-inline: var(--_inset); border: var(--_hairline) solid var(--_line);
    border-radius: var(--_radius-pill); background: var(--_surface); color: var(--_text);
    font: inherit; font-size: 0.875rem; cursor: pointer;
    transition: background-color var(--_dur-fast) var(--_ease), color var(--_dur-fast) var(--_ease), border-color var(--_dur-fast) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .sg-chip:active { transform: scale(var(--_press)); }
  .sg-chip.is-on { background: var(--_accent); color: var(--_surface); border-color: var(--_accent); padding-inline-end: 10px; }
  .sg-chip__dismiss { display: none; align-items: center; justify-content: center; width: 15px; height: 15px; margin-inline-start: 1px; }
  .sg-chip__dismiss svg { width: 100%; height: 100%; display: block; }
  .sg-chip.is-on .sg-chip__dismiss { display: inline-flex; }
  .sg-chip--removable { cursor: default; }
  .sg-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .sg-chip__x svg { width: 12px; height: 12px; }

  /* stepper (D-1) — focus model on the container; the icons never show a text cursor (pointer only, svg
     pointer-events off, no text selection); +/− get hover/press feedback (container fills grey + a small icon
     press), firing on tap too; the number field edits normally (keeps its text caret). */
  .sg-stepper {
    display: inline-flex; align-items: center;
    border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-sm);
    overflow: hidden; width: max-content;
    transition: border-color var(--_dur-fast) var(--_ease);
  }
  .sg-stepper.is-field-focus { border-color: var(--_focus-border); }  /* fires only when the number FIELD has focus (JS-toggled), never on +/- clicks */
  .sg-stepper__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    padding: 0; border: 0; background: var(--_surface); color: var(--_text); cursor: pointer; user-select: none;
    transition: background-color var(--_dur-fast) var(--_ease);
  }
  .sg-stepper__btn svg { width: 16px; height: 16px; pointer-events: none; transition: scale var(--_dur-fast) var(--_ease); }
  @media (hover: hover) { .sg-stepper__btn:hover:not(:disabled) { background: var(--_hover-fill); } }
  .sg-stepper__btn:active:not(:disabled) { background: rgb(0 0 0 / 0.1); }
  .sg-stepper__btn:active:not(:disabled) svg { scale: 0.88; }
  .sg-stepper__btn:disabled { opacity: 0.35; cursor: default; }
  .sg-stepper__val { width: 44px; height: 44px; text-align: center; border: 0; border-inline: var(--_hairline) solid var(--_line); background: var(--_surface); color: var(--_text); font: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; cursor: text; }
  .sg-stepper__val::-webkit-outer-spin-button, .sg-stepper__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  /* Horizon's input[type=number] (0,1,1) out-specifies .sg-stepper__val (0,1,0) and paints it grey — scope it
     under .ez-sg so the qty field is WHITE at rest AND focus, grey ONLY on hover (owner). Hover rule last so it
     wins over focus when both apply. */
  .ez-sg .sg-stepper__val { background: var(--_surface); }
  .ez-sg .sg-stepper__val:focus, .ez-sg .sg-stepper__val:focus-visible { outline: none; background: var(--_surface); }
  @media (hover: hover) { .ez-sg .sg-stepper__val:hover { background: var(--_hover-fill); } }

  /* dropdown (E-1) — THE site-wide dropdown/menu pattern (B-1's native panel is the old type, replaced by E-1
     going forward). ONE separation (shadow only, no border). The trigger commits nothing, so NO button
     press-in — the chevron rotates down↔up as the affordance. Sort-by trigger aligned (svg display:block). */
  .sg-dropdown { position: relative; display: inline-block; }
  .sg-dropdown [data-sg-dropdown-trigger]:active { transform: none; }
  .sg-dropdown [data-sg-dropdown-trigger] svg { display: block; transition: rotate var(--_dur-base) var(--_ease); }
  .sg-dropdown [data-sg-dropdown-trigger][aria-expanded="true"] svg { rotate: 180deg; }
  .sg-dropdown__panel {
    position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 5;
    min-width: 200px; margin: 0; padding: 6px; list-style: none;
    background: var(--_surface); border-radius: var(--_radius-lg);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.14);
  }
  .sg-dropdown__panel[hidden] { display: none; }
  .sg-dropdown__panel button { display: block; width: 100%; text-align: start; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: inherit; border-radius: var(--_radius-sm); cursor: pointer; min-height: 40px; }
  .sg-dropdown__panel button:hover { background: var(--_lift); }

  /* card frames (C1/C2/M1) */
  .sg-cardframe { width: 200px; border-radius: var(--_radius-md); }
  .sg-cardframe__ph { display: block; width: 100%; aspect-ratio: 1/1; border-radius: var(--_radius-md); overflow: hidden; }
  .sg-cardframe__body { border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-md); margin-block-start: var(--_stack-sm); padding: var(--_inset); }
  .sg-cardframe__t { margin: 0; font-size: 0.875rem; }

  /* [v1.5] product-card resting look = 12px radius + a 1px LIGHT border + ONE faint shadow, pulled STRAIGHT
     from the shipped shared --ez-card-* token set (base.css :root — the single source of truth, consumed by
     BOTH the ez rail .ez-card AND the stock .product-card__content). Referencing the REAL tokens (with
     provisional fallbacks) makes this demo AUTO-SYNC to any future card change instead of drifting again.
     design_system.md v1.5 ledger #1 / #2 (the light-both border+shadow pair). */
  .sg-pcard {
    width: 190px;
    padding: var(--_stack-sm);
    border: var(--ez-card-border, 1px solid rgb(0 0 0 / 0.10));
    border-radius: var(--ez-card-radius, 12px);
    box-shadow: var(--ez-card-shadow, 0 6px 14px rgb(0 0 0 / 0.06));
    transition: transform var(--_dur-base) var(--_ease);
  }
  /* PRODUCT media stays 1:1 (P7). The hero SWAP is demoed by tinting the contained frame's backdrop to the
     selected variant colour (a stand-in for the real variant photo, which is still product-on-white). */
  .sg-pcard__media { position: relative; aspect-ratio: 1/1; border-radius: var(--_radius-md); overflow: hidden; display: grid; place-items: center; background: var(--sg-hero, var(--_surface)); transition: background-color var(--_dur-base) var(--_ease); }
  .sg-pcard__ph { width: 82%; height: 82%; }
  /* C2 type hierarchy FLIP (owner): name smaller + unbold, price bigger + bold */
  .sg-pcard__title { margin: var(--_stack-sm) 0 2px; font-size: 0.875rem; font-weight: var(--_w-regular); }
  .sg-pcard__price { margin: 0 0 var(--_stack-sm); font-size: 1.0625rem; font-weight: var(--_w-bold); font-variant-numeric: tabular-nums; }
  .sg-pcard .sg-swatch-row { margin-block-start: var(--_stack-xs); }
  /* [v1.5] whole-card ZOOM on hover (reuses the shipped --hover-scale-amount, matching the stock collection
     card's card-hover-effect-scale + the ez rail .ez-card), REPLACING the retired translateY lift. Calm,
     zero-spring ease-out, transform-only. design_system.md v1.5 ledger #3. */
  @media (hover: hover) {
    .sg-pcard:hover { transform: scale(var(--hover-scale-amount, 1.03)); }
  }
  /* reduced motion KILLS the zoom; the resting shadow + border persist (they ARE the touch/mobile-parity
     depth — no dead hover on mobile, per the v1.4 mobile-parity hard rule). */
  @media (prefers-reduced-motion: reduce) {
    .sg-pcard:hover { transform: none; }
  }

  .sg-ugc { width: 170px; aspect-ratio: 4/5; border-radius: var(--_radius-md); overflow: hidden; background: var(--_lift); }
  .sg-ugc__ph { width: 100%; height: 100%; }

  .sg-mframe { position: relative; width: 150px; border-radius: var(--_radius-md); overflow: hidden; background: var(--_surface); border: var(--_hairline) solid var(--_line); }
  .sg-mframe--product { aspect-ratio: 1/1; }
  .sg-mframe--life { aspect-ratio: 4/5; }
  .sg-mframe svg { width: 100%; height: 100%; }
  .sg-mframe__tag { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; font-size: 0.6875rem; background: var(--_surface); border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-sm); padding: 1px 6px; }

  /* tiles (C4/C6) — image-led, whitespace-led (no default border; a border only when the visual needs it).
     C-6 collection-tile aspect is VARIABLE per placement (a bounded schema choice), not a fixed 4:3. */
  .sg-tile { width: 150px; }
  .sg-tile__media { aspect-ratio: 4/3; border-radius: var(--_radius-md); overflow: hidden; background: var(--_lift); }
  .sg-tile__media svg { width: 100%; height: 100%; }
  .sg-tile--circle .sg-tile__media { aspect-ratio: 1/1; border-radius: var(--_radius-full); }
  .sg-tile--square .sg-tile__media { aspect-ratio: 1/1; }
  .sg-tile--portrait .sg-tile__media { aspect-ratio: 4/5; }
  .sg-tile--bordered .sg-tile__media { border: var(--_hairline) solid var(--_line); }
  .sg-tile__label { margin: var(--_stack-sm) 0 0; text-align: center; font-size: 0.875rem; font-weight: var(--_w-medium); }

  /* badges (L1) [v1.3] — a colour FILL from the live-theme 3-colour badge family (no border, white
     text, never the accent-red). Max ONE per card, factual only, 4px. Sold-out = neutral status. */
  .sg-badge {
    display: inline-block; padding: 3px 9px;
    border: 0; border-radius: var(--_radius-sm);
    background: var(--_badge-a); color: #fff;
    font-size: 0.75rem; font-weight: var(--_w-medium); letter-spacing: 0.02em;
  }
  .sg-badge--b { background: var(--_badge-b); }
  .sg-pcard__media .sg-badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; }
  .sg-badge--muted { background: var(--_badge-soldout); color: var(--_text); }

  /* trust badge (L2) */
  .sg-trust { display: inline-flex; align-items: center; gap: var(--_stack-md); text-align: start; max-width: 280px; }
  .sg-trust__ic { flex: 0 0 auto; width: 28px; height: 28px; opacity: 0.7; }
  .sg-trust__ic svg { width: 100%; height: 100%; }
  .sg-trust__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sg-trust__lb { font-size: 0.875rem; font-weight: var(--_w-semibold); }
  .sg-trust__sub { font-size: 0.75rem; opacity: 0.7; }

  /* price (L3) — sale-price-FIRST (the pull: bigger + bold, ink), struck was-price second on the RIGHT
     (muted ink, NEVER red — no fake urgency, the current price is the pull not a red strike). */
  .sg-price { margin: 0; display: flex; align-items: baseline; gap: var(--_stack-sm); font-variant-numeric: tabular-nums; }
  .sg-price__lab { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.5; min-width: 48px; }
  .sg-price__now { font-weight: var(--_w-semibold); }
  .sg-price__now--sale { font-weight: var(--_w-bold); font-size: 1.0625rem; color: var(--_text); }
  .sg-price__was { text-decoration: line-through; color: var(--_muted); font-size: 0.9375rem; }

  /* section shell (S1) */
  .sg-shell { border: var(--_hairline) dashed var(--_line); border-radius: var(--_radius-md); }
  .sg-shell__pad { display: block; font-size: 0.6875rem; opacity: 0.55; padding: var(--_stack-sm) var(--_inset); }
  .sg-shell__inner { margin: 0 var(--_inset) var(--_inset); padding: var(--_inset); background: var(--_lift); border-radius: var(--_radius-sm); font-size: 0.8125rem; }

  /* grid (S2) */
  .sg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--_stack-md); max-width: 320px; }
  .sg-grid span { aspect-ratio: 1/1; background: var(--_lift); border-radius: var(--_radius-md); }
  /* center-aligned option (bounded schema choice): auto-width cells centred in the container */
  .sg-grid--center { grid-template-columns: repeat(3, 56px); justify-content: center; }

  /* divider (S3) */
  .sg-divider-demo { font-size: 0.8125rem; opacity: 0.8; }
  .sg-divider { border: 0; border-block-start: var(--_hairline) solid var(--_line); margin: var(--_stack-md) 0; }

  /* head zone (S4) */
  .sg-headzone__eye { margin: 0 0 var(--_stack-xs); font-size: 0.75rem; font-weight: var(--_w-semibold); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
  .sg-headzone__h { margin: 0; font-size: 1.375rem; font-weight: var(--_w-semibold); }

  /* prose (S5) */
  .sg-prose { margin: 0; max-width: var(--_measure); line-height: 1.5; }

  /* feature list (S6) */
  .sg-featurelist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--_stack-sm); }
  .sg-featurelist li { display: flex; align-items: center; gap: var(--_stack-sm); }
  .sg-featurelist__ic { flex: 0 0 auto; width: 24px; height: 24px; opacity: 0.7; }
  .sg-featurelist__ic svg { width: 100%; height: 100%; }

  /* carousel (2.x) — one consistent pattern across all rails. Desktop arrows overlay ON the rail (chevron on a
     dark translucent backing, the image stays visible); mobile = touch + peek, no arrows. Bullets are SNAP
     semantics — a free-scroll variant (--free) carries none. Peek per surface via --sg-peek (products 24 /
     collection 18 / lenses 12). */
  .sg-carousel { max-width: 340px; --sg-peek: 24px; }
  .sg-carousel__viewport { position: relative; }
  /* proximity (not mandatory) so the direction-aware arrow positions hold — mandatory would re-snap PREV's
     right-aligned target back to a start edge. Swipe still snaps on release. Flagged as application guidance. */
  .sg-carousel__track { display: flex; gap: var(--_stack-md); margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scroll-behavior: smooth; scrollbar-width: none; }
  .sg-carousel--free .sg-carousel__track { scroll-snap-type: none; }
  .sg-carousel__track::-webkit-scrollbar { display: none; }
  .sg-carousel__track > li { flex: 0 0 calc((100% - var(--_stack-md) - var(--sg-peek)) / 2); scroll-snap-align: start; aspect-ratio: 1/1; background: var(--_lift); border-radius: var(--_radius-md); overflow: hidden; }
  .sg-carousel--free .sg-carousel__track > li { scroll-snap-align: none; }
  .sg-carousel__track > li svg { width: 100%; height: 100%; }
  .sg-carousel__dots { display: flex; gap: 8px; justify-content: center; margin-block-start: var(--_stack-md); }
  .sg-carousel__dots span { width: 8px; height: 8px; border-radius: var(--_radius-full); background: var(--_line); }
  .sg-carousel__dots span.is-active { background: var(--_text); }
  .sg-carousel__arrow {
    position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 3;
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--_radius-full);
    background: rgb(0 0 0 / 0.55); color: #fff; cursor: pointer;
    transition: background-color var(--_dur-fast) var(--_ease);
  }
  .sg-carousel__arrow svg { width: 22px; height: 22px; display: block; }
  .sg-carousel__arrow--prev { inset-inline-start: 6px; }
  .sg-carousel__arrow--next { inset-inline-end: 6px; }
  @media (hover: hover) { .sg-carousel__arrow:hover { background: rgb(0 0 0 / 0.72); } }
  @media screen and (min-width: 750px) { .sg-carousel .sg-carousel__arrow { display: inline-flex; } }

  /* sticky bar (3.4) */
  .sg-stickybar { border: var(--_hairline) solid var(--_line); border-radius: var(--_radius-sm); padding: var(--_stack-md); box-shadow: 0 -2px 8px rgb(0 0 0 / 0.06); max-width: 340px; }

  /* accordion (3.5) — SINGLE-OPEN (opening one closes the others); designed interactive items with an "open me"
     vibe: 8px rounded cards on a neutral fill, a warm surface-LIFT on hover/open (§3.7 colour-shift, NOT a motion
     lift), and the open item's +/− turns accent (ONE accent pull — single-open keeps it to one). Zero-spring. */
  .sg-acc { max-width: 480px; display: flex; flex-direction: column; gap: var(--_stack-sm); }
  .sg-acc__item {
    border-radius: var(--_radius-md); background: var(--_fill);
    transition: background-color var(--_dur-base) var(--_ease);
  }
  @media (hover: hover) { .sg-acc__item:hover { background: var(--_lift); } }
  .sg-acc__item.is-open { background: var(--_lift); }
  .sg-acc__q { display: flex; align-items: center; justify-content: space-between; gap: var(--_inset); width: 100%; min-height: var(--_control); padding: var(--_stack-md) var(--_inset); border: 0; background: transparent; color: inherit; font: inherit; font-weight: var(--_w-semibold); text-align: start; cursor: pointer; border-radius: var(--_radius-md); }
  .sg-acc__ic { position: relative; flex: 0 0 auto; width: 18px; height: 18px; color: var(--_muted); transition: color var(--_dur-base) var(--_ease); }
  .sg-acc__ic::before, .sg-acc__ic::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 15px; height: 2px; border-radius: 1px; background: currentColor; translate: -50% -50%; transition: opacity var(--_dur-base) var(--_ease), transform var(--_dur-base) var(--_ease); }
  .sg-acc__ic::after { transform: rotate(90deg); }
  .sg-acc__q[aria-expanded="true"] .sg-acc__ic { color: var(--_accent); }
  .sg-acc__q[aria-expanded="true"] .sg-acc__ic::after { opacity: 0; transform: rotate(0deg); }
  .sg-acc__panel { overflow: hidden; transition: max-height var(--_dur-exp) var(--_ease), opacity var(--_dur-base) var(--_ease); }
  .sg-acc__panel[data-collapsed] { max-height: 0; opacity: 0; }
  .sg-acc__panel p { margin: 0; padding: 0 var(--_inset) var(--_inset); font-size: 0.9375rem; line-height: 1.5; opacity: 0.9; }

  /* inline notice + toast (4.1) */
  .sg-inline-notice { margin: 0; font-size: 0.8125rem; color: var(--_sale); }
  .sg-toast-host { position: fixed; inset-block-end: 20px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1200; pointer-events: none; }
  .sg-toast { pointer-events: auto; background: var(--_text); color: var(--_surface); border-radius: var(--_radius-md); padding: 12px 18px; font-size: 0.875rem; box-shadow: 0 8px 28px rgb(0 0 0 / 0.18); opacity: 0; transform: translateY(8px); transition: opacity var(--_dur-base) var(--_ease), transform var(--_dur-base) var(--_ease); }
  .sg-toast.is-in { opacity: 1; transform: translateY(0); }

  /* loading (4.2) */
  .sg-skel-card { width: 150px; }
  .sg-skel-card__media { aspect-ratio: 1/1; border-radius: var(--_radius-md); background: var(--_lift); }
  .sg-skel-card__line { height: 12px; border-radius: var(--_radius-sm); background: var(--_lift); margin-block-start: var(--_stack-sm); }
  .sg-skel-card__line--short { width: 60%; }

  /* empty state (4.4) */
  .sg-empty { display: flex; flex-direction: column; align-items: center; gap: var(--_stack-sm); text-align: center; padding: var(--_inset-lg); max-width: 320px; }
  .sg-empty__ic { width: 40px; height: 40px; opacity: 0.5; }
  .sg-empty__ic svg { width: 100%; height: 100%; }
  .sg-empty__t { margin: 0; font-weight: var(--_w-medium); }

  /* shared bottom-sheet (3.1) — enter uses the expressive tier; EXIT uses the quicker exit tier so the close
     animation completes before the JS hides it (the fix for the janky/cut close). */
  .sg-sheet[hidden] { display: none; }
  .sg-sheet { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; }
  .sg-sheet__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); opacity: 0; transition: opacity var(--_dur-exit) var(--_ease-exit); }
  .sg-sheet.is-open .sg-sheet__backdrop { opacity: 1; transition: opacity var(--_dur-base) var(--_ease); }
  .sg-sheet__panel { position: relative; width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; background: var(--_surface); color: var(--_text); border-start-start-radius: var(--_radius-lg); border-start-end-radius: var(--_radius-lg); padding: var(--_inset-lg); transform: translateY(100%); transition: transform var(--_dur-exit) var(--_ease-exit); }
  .sg-sheet.is-open .sg-sheet__panel { transform: translateY(0); transition: transform var(--_dur-exp) var(--_ease); }
  .sg-sheet__close { position: absolute; inset-block-start: var(--_inset); inset-inline-end: var(--_inset); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
  .sg-sheet__close svg { width: 22px; height: 22px; }
  .sg-sheet__title { margin: 0 44px var(--_stack-md) 0; font-size: 1.125rem; font-weight: var(--_w-semibold); }
  .sg-sheet__body { margin: 0; line-height: 1.5; max-width: var(--_measure); }
  .sg-sheet__cta { margin-block-start: var(--_inset-lg); }
  @media screen and (min-width: 750px) {
    .sg-sheet { align-items: center; }
    .sg-sheet__panel { border-radius: var(--_radius-lg); transform: translateY(16px); opacity: 0; transition: transform var(--_dur-exit) var(--_ease-exit), opacity var(--_dur-exit) var(--_ease-exit); }
    .sg-sheet.is-open .sg-sheet__panel { transform: translateY(0); opacity: 1; transition: transform var(--_dur-exp) var(--_ease), opacity var(--_dur-base) var(--_ease); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-sg *, .ez-sg *::before, .ez-sg *::after { transition-duration: 0.01ms !important; }
    .sg-spinner { animation-duration: 0.01ms; }
    .sg-btn:active, .sg-chip:active, .sg-swatch--btn:active, .sg-link-standalone:active { transform: none; }
    .sg-stepper__btn:active:not(:disabled) svg { scale: 1; }
    .sg-carousel__track { scroll-behavior: auto; }
  }
/* END_SECTION:ez-styleguide */

/* START_SECTION:ez-trust-strip (INDEX:35) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-trust {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    /* desktop inline-row cluster gap — an ELEMENT gap in this section's custody, NOT the
       shell's section rhythm (--space-section-y). Exact-value 40 rung so the gap holds when
       the token sheet lands (was misusing --space-section-y, whose canon is 32). */
    --_row-gap: var(--space-40, 40px);
    --_stack-xs: var(--space-stack-xs, 4px);
    /* [v1.10] badge vertical padding tightened 16 -> 8 (owner refinement 2026-07-21): the woven
       floor was reading ~65px tall for ~33px of content. --space-stack-sm is the vertical-rhythm
       rung that seats the icon + 2-line lockup snug without cramping. Was --space-inset-md (16). */
    --_pad-y: var(--space-stack-sm, 8px);
    --_container: var(--size-container, 1280px);
    --_icon: var(--size-icon-lg, 28px);
    --_hairline: var(--stroke-hairline, 1px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_text-gap: 2px;      /* label<->sub micro-stack, below the 4px floor; --space-2 rung candidate (3rd sighting) */
    --_badge-line: 1.25;   /* two-line lockup leading, tighter than label-line 1.3 so label+sub read as one unit */
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_line: var(--color-line, var(--color-border));

    display: block; /* .ez-trust sits on the <ez-trust-strip> custom element (inline by default) */
  }
  .ez-trust.ez-trust--home-flush {
    margin-block: 0;
    padding-block: 0;
  }
  /* Outer rhythm + 1280 inner + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Row: mobile 2-up, desktop centered inline (LIGHTEST woven floor) -- */
  .ez-trust__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: var(--_row-gap);
    row-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- L2 trust-badge (rendered by ez-trust-badge.liquid) — uniform static -- */
  .ez-trust-badge { min-width: 0; list-style: none; }
  .ez-trust-badge__unit {
    display: grid;
    grid-template-columns: var(--_icon) minmax(0, max-content);
    align-items: center;
    justify-content: start;
    column-gap: var(--_gutter);
    width: 100%;
    height: 100%;
    text-align: start;
    padding-block: var(--_pad-y);
  }

  .ez-trust-badge__icon {
    flex: 0 0 auto;
    width: var(--_icon);
    height: var(--_icon);
    object-fit: contain;
  }
  .ez-trust-badge__icon-ph {
    flex: 0 0 auto;
    width: var(--_icon);
    height: var(--_icon);
    color: var(--_muted);
    opacity: 0.6;
  }
  .ez-trust-badge__icon-ph svg { width: 100%; height: 100%; }

  .ez-trust-badge__text { display: flex; flex-direction: column; gap: var(--_text-gap); min-width: 0; }
  .ez-trust-badge__label {
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--_badge-line);
    font-weight: var(--_w-semibold);
  }
  .ez-trust-badge__sub {
    font-size: var(--type-caption-size, 0.75rem);
    line-height: var(--_badge-line);
    font-weight: var(--_w-regular);
    color: var(--_muted);
  }

  /* ---- 750 seam: desktop centered inline row --------------------------- */
  @media screen and (min-width: 750px) {
    .ez-trust { --_section-y: var(--space-section-y, 32px); --_pad-x: 64px; }
    .ez-trust__row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--_row-gap);
    }
    .ez-trust-badge { flex: 0 1 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-trust * { transition-duration: 0.01ms !important; }
  }
/* END_SECTION:ez-trust-strip */

/* START_SECTION:ez-value-props (INDEX:36) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-vprops {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_icon: var(--size-icon-lg, 28px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    /* boxed panel = the STATIC separation role (--surface-fill), NOT --surface-lift (the
       interactive/depth role) — a static panel taking lift would fake a tappable affordance
       (design_system.md §3.7; v1.3 #4 affordance honesty). Canon fallback #f9f8f6. */
    --_fill: var(--surface-fill, #f9f8f6);
  }
  /* Shell (outer rhythm + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Grid: mobile stack (1-up) or 2-up; desktop N-up ------------------ */
  .ez-vprops__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-vprops--m-grid .ez-vprops__grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- S6 feature-list unit (rendered by ez-value-prop.liquid) ---------- */
  .ez-vprop {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--_stack-sm);
  }
  /* boxed = ONE neutral surface-fill separation (never a saturated band, never stacked) */
  .ez-vprops--card-boxed .ez-vprop {
    background: var(--_fill);
    border-radius: var(--_radius-md);
    padding: var(--_inset-lg);
  }

  .ez-vprop__icon {
    width: var(--_icon);
    height: var(--_icon);
    display: block;
    object-fit: contain;
  }
  .ez-vprop__icon-ph { color: var(--_muted); opacity: 0.6; }
  .ez-vprop__icon-ph svg { width: var(--_icon); height: var(--_icon); }

  .ez-vprop__label {
    margin: 0;
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--_w-semibold);
  }
  .ez-vprop__text {
    margin: 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
    color: var(--_muted);
    max-width: 44ch;
  }

  /* ---- 750 seam: desktop N-up (design_system.md §2.3) ------------------- */
  @media screen and (min-width: 750px) {
    .ez-vprops {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-vprops__grid { grid-template-columns: repeat(var(--ez-cols, 3), 1fr); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-vprops * { transition-duration: 0.01ms !important; }
  }
/* END_SECTION:ez-value-props */

/* START_SECTION:ez-video-banner (INDEX:37) */
/* Design-system tokens -> section-scoped private aliases (canon NAME + exact-sheet fallback). */
  .ez-vb {
    --_gutter: var(--space-gutter, 12px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_radius-md: var(--radius-md, 8px);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_press: var(--motion-press-scale, 0.98);
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));

    /* --_private: the §6 C5 edge-peek, pinned to the §2.1 inset rung (inside the 16-24 band).
       Deliberately NOT a merchant setting — a peek width is a design primitive, not content. */
    --_peek: var(--space-inset-md, 16px);
    --_aspect-reel: 9 / 16;   /* the 9:16 REEL form of --aspect-video (design_system.md §2.6) */
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell. */

  ez-video-banner { display: block; }
  .ez-vb__viewport { position: relative; }

  /* ---- Track: native CSS scroll-snap (no slider library) ---------------------------- */
  .ez-vb__track {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* [carousel-peek] direction-aware bidirectional peek, same mechanic as the product rail:
       inset each cell's snap point by the peek so tiles 2..N reveal a sliver of the PREVIOUS
       tile, while the width math below keeps the NEXT-tile sliver on the right. */
    scroll-padding-inline-start: var(--_peek);
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> ez-carousel-styles base. */
  }

  .ez-vb__tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc((100% - (var(--_gutter) * (var(--ez-vb-cols-m, 2) - 1)) - (var(--_peek) * 2)) / var(--ez-vb-cols-m, 2));
  }

  /* [half-peek 2026-07-24] Owner-ruled S3 BIG peek: show `cols + 0.5` tiles so the NEXT tile sits
     50% in view (mobile 1 + 50% of the 2nd; desktop 3 + 50% of the 4th). A layout MODE gated behind
     data-ez-vb-peek="half" (a constrained schema CHOICE, not a raw peek primitive) — the default
     edge-peek path above is untouched, so the preview pages stay byte-for-byte. Flush start; the
     half-tile reveals on the trailing edge. Specificity (0,2,0) wins over the base .ez-vb__tile. */
  .ez-vb[data-ez-vb-peek="half"] .ez-vb__track {
    scroll-padding-inline-start: 0;
  }
  .ez-vb[data-ez-vb-peek="half"] .ez-vb__tile {
    width: calc((100% - (var(--_gutter) * var(--ez-vb-cols-m, 1))) / (var(--ez-vb-cols-m, 1) + 0.5));
  }

  /* ---- The tile: ONE button, nothing interactive nested inside it (§6 C1) ----------- */
  .ez-vb__opener {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--_text);
    text-align: start;
    cursor: pointer;
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-vb__media {
    position: relative;
    display: block;
    /* [additive 2026-07-24] per-instance tile aspect; unset -> the shipped 9:16 reel (byte-for-byte).
       The LIGHTBOX video is a separate 9:16 (snippets/ez-lightbox-styles.liquid) and is NOT touched. */
    aspect-ratio: var(--ez-vb-aspect, var(--_aspect-reel));
    border-radius: var(--_radius-md);
    overflow: hidden;
    background: var(--surface-fill, #f9f8f6);
  }
  .ez-vb__poster,
  .ez-vb__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ez-vb__video {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--_dur-base) var(--_ease);
  }
  /* the preview crossfades in only once it is genuinely PLAYING — never a blank black box */
  .ez-vb__video[data-ez-vb-on] { opacity: 1; }
  .ez-vb__placeholder { display: block; width: 100%; height: 100%; }
  .ez-vb__placeholder svg { width: 100%; height: 100%; }

  /* [2026-07-23 owner ruling] The tile play glyph is GONE — markup and CSS both. It promised
     playback in place while the tap opens a fullscreen overlay, which is an affordance lie
     (§2.8). Nothing replaces it: the tile is a real <button> that presses, it carries a label,
     and the motion is its own cue. Advertising the wrong action is worse than advertising none. */

  .ez-vb__label {
    display: block;
    margin-block-start: var(--_stack-sm);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-medium);
    color: var(--_muted);
  }

  /* the tile COMMITS (it opens the viewer) -> it presses; the carousel NAV never does ([v1.6]) */
  .ez-vb__opener:active { transform: scale(var(--_press)); }

  /* ---- No controls row. [2026-07-23 owner ruling] this row carries NO dots and NO scroll-
     progress bar on either viewport; snap + edge-peek is the whole mobile affordance and the
     desktop OVERLAY arrows (shared ez-carousel-styles, hidden below 750) are the pointer path. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------------------ */
  @media screen and (min-width: 750px) {
    .ez-vb { --_gutter: var(--space-gutter, 16px); }
    /* desktop is arrow-driven + flush, so the mobile peek inset resets (matches the rail) */
    .ez-vb__track { scroll-padding-inline-start: 0; }
    .ez-vb__tile {
      width: calc((100% - (var(--_gutter) * (var(--ez-vb-cols-d, 4) - 1))) / var(--ez-vb-cols-d, 4));
    }
    /* [half-peek 2026-07-24] desktop BIG peek: cols + 0.5 tiles (3 full + 50% of the 4th at cols_d=3) */
    .ez-vb[data-ez-vb-peek="half"] .ez-vb__tile {
      width: calc((100% - (var(--_gutter) * var(--ez-vb-cols-d, 3))) / (var(--ez-vb-cols-d, 3) + 0.5));
    }
  }

  /* ---- Reduced motion --------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-vb__track { scroll-behavior: auto; }
    .ez-vb__opener:active { transform: none; }
    .ez-vb__opener,
    .ez-vb__video { transition-duration: 0.01ms; }
  }
/* END_SECTION:ez-video-banner */

/* START_SECTION:featured-product (INDEX:40) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

    @media screen and (min-width: 750px) {
      --padding-block: 40px;
      --padding-inline: 40px;
    }
  }

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:41) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--color-border);
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a {
    color: var(--color-foreground-muted);
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:42) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
  }

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:43) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:44) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply inherit to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:is(:hover, [aria-expanded='true']))) .header__row {
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-text: inherit;
    }

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='top']:hover .header__row--top,
  [data-transparent-color-scheme='top']:focus-within .header__row--top,
  [data-transparent-color-scheme='both']:hover .header__row--top,
  [data-transparent-color-scheme='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover .header__row--bottom,
  [data-transparent-color-scheme='bottom']:focus-within .header__row--bottom,
  [data-transparent-color-scheme='both']:hover .header__row--bottom,
  [data-transparent-color-scheme='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-heightened);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-sticky);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-scheme-top-row) 0 var(--top-row-height),
      var(--color-scheme-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-scheme-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different color scheme, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:45) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

    @media screen and (min-width: 750px) {
      display: block;
    }
  }

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:46) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:48) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:50) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:51) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:52) */
@keyframes gpo-spin {
    to { transform: rotate(360deg); }
  }

  .cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }

  html:active-view-transition-type(empty-cart-page) {
    .cart-items-component {
      view-transition-name: cart-page-content;
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:54) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:56) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:57) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:59) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:60) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:predictive-search (INDEX:62) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-hotspots (INDEX:63) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:64) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

    .sticky-add-to-cart__button {
      width: var(--height-buy-buttons);
    }

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:67) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:73) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:75) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:76) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:77) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:78) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:79) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:80) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:81) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:82) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:83) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:84) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:85) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:86) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:87) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:90) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:92) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:96) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:97) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:99) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:102) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:103) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:104) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

    @media screen and (min-width: 750px) {
      flex-shrink: 0;
    }

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:105) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:108) */
image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:112) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-card-gallery (INDEX:115) */
.product-badges {
    display:flex;
  flex-direction:column;
  align-items:flex-end;
  --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));
  position: absolute;
  z-index: var(--layer-flat);
}

.product-badges--bottom-left {
  bottom: calc(var(--badge-inset) + var(--padding-block-start));
  left: calc(var(--badge-inset) + var(--padding-inline-start));
}

.product-badges--top-left {
  top: calc(var(--badge-inset) + var(--padding-block-start));
  left: calc(var(--badge-inset) + var(--padding-inline-start));
}

.product-badges--top-right {
  top: calc(var(--badge-inset) + var(--padding-block-start));
  right: calc(var(--badge-inset) + var(--padding-inline-start));
}

.product-badges__badge {
    width:fit-content;
  --badge-font-size: 11px;
  font-size: var(--badge-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--badge-font-size);
  font-family: var(--badge-font-family);
  font-weight: var(--badge-font-weight);
  text-transform: var(--badge-text-transform);
  border-radius: var(--badge-border-radius);
}

.product-badges__badge + .product-badges__badge{
  margin-top:4px;
}

.product-badges__badge--rectangle {
  padding-block: var(--badge-rectangle-padding-block);
  padding-inline: var(--badge-rectangle-padding-inline);
}

.badge-save{
  background:#BF1C1D;   /* vibrant red */
  color:#ffffff;
  font-size:11px;
  padding:2px 8px;
}

.badge-topdeal{
  background:#7C3AED;   /* vibrant purple */
  color:#ffffff;
  font-size:11px;
  padding:2px 8px;
}

.badge-bestvalue{
  background:#059669;   /* vibrant emerald */
  color:#ffffff;
  font-size:11px;
  padding:2px 8px;
}
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:118) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:123) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

    @media screen and (max-width: 749px) {
      max-width: 100%;
    }
  }

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:124) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:125) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accelerated-checkout (INDEX:126) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:127) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:buy-buttons (INDEX:148) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:comparison-slider (INDEX:151) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:152) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:153) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:155) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:ew-link-tile (INDEX:156) */
/* The wrapper is the grid/rail child. It exists so the overlay badge can be a sibling
     of the tile anchor rather than nested inside it. It adds no box of its own — a
     stretched column flex reproduces exactly what a bare grid child rendered before. */
  .ew-tile-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    scroll-snap-align: start;
  }

  .ew-tile-wrap > .ew-tile {
    flex: 1 1 auto;
  }

  .ew-tile {
    position: relative;
    --_radius: var(--ew-tile-radius, 12px);
    --_gap: var(--ew-tile-gap, 10px);
    --_label: var(--color-foreground);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--_gap);
    color: var(--_label);
    text-decoration: none;
    scroll-snap-align: start;
    min-width: 0;
  }

  /* The placeholder tint. It is the right default for a photographic tile whose image is
     still loading, and exactly wrong for the frame-shape icons, which the reference sits
     BARE on the band — the tint drew a grey plate behind every glyph. The section decides;
     the fallback here is the value this block painted before the setting existed. */
  .ew-tile__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ew-tile-aspect-mobile, var(--ew-tile-aspect, 1));
    overflow: hidden;
    border-radius: var(--_radius);
    background-color: var(
      --ew-tile-media-bg,
      rgb(var(--color-foreground-rgb) / var(--opacity-5-15, 0.06))
    );
  }

  /* Tinted icon (Easysight 2026-10-14): a transparent cut-out PNG used as a MASK over a
     brand-red fill, so the icon renders in the exact theme red whatever colour the file
     was drawn in. The <img> stays in the box (size, alt, CLS) but is not painted. */
  .ew-tile__media--tint {
    background-color: var(--ew-tile-tint, var(--color-accent, #bf1c1d));
    -webkit-mask: var(--ew-tile-mask) center / contain no-repeat;
    mask: var(--ew-tile-mask) center / contain no-repeat;
  }

  .ew-tile__media--tint .ew-tile__image {
    opacity: 0;
  }

  /* The <picture> wrapper is inline by default, so the image's height:100% had nothing to
     resolve against and fell back to the file's own ratio: any tile whose crop differs from
     its mobile file showed a bare strip under the photo. A block box fixes the cover fit. */
  .ew-tile__media > picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .ew-tile__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--ew-tile-fit, cover);
    transform: scale(1);
    transition: transform var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  .ew-tile__text {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 2px;
    /* keeps the tap target at the 44px floor even when the label is one small line */
    min-height: 44px;
    justify-content: center;
    text-align: center;
  }

  .ew-tile__label {
    font-size: var(--ew-tile-label-size, var(--font-size--sm));
    line-height: 1.3;
    font-weight: 500;
  }

  .ew-tile__caption {
    font-size: var(--font-size--xs);
    line-height: 1.3;
    opacity: 0.75;
  }

  /* Imageless tile: a text pill, not an empty frame. */
  .ew-tile--text {
    align-items: center;
    justify-content: center;
    padding-block: 12px;
    padding-inline: 18px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    white-space: nowrap;
  }

  .ew-tile--text .ew-tile__text {
    min-height: 20px;
  }

  @media (hover: hover) {
    .ew-tile--text:not(.ew-tile--static):hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15, 0.06));
    }

    .ew-tile--text:not(.ew-tile--static):hover .ew-tile__label {
      text-decoration: none;
    }
  }

  .ew-tile:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentColor;
    outline-offset: var(--focus-outline-offset, 3px);
    border-radius: var(--_radius);
  }

  /* Overlay badge layer.
     It mirrors the media box exactly (same width, same aspect ratio) so a corner setting
     lands on a corner of the IMAGE, not somewhere beside the label underneath it. The
     layer itself is click-through; only the pill inside takes pointer events. */
  .ew-tile-overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    aspect-ratio: var(--ew-tile-aspect-mobile, var(--ew-tile-aspect, 1));
    display: flex;
    padding: var(--ew-tile-overlay-inset-block, var(--ew-tile-overlay-inset, 10px))
      var(--ew-tile-overlay-inset-inline, var(--ew-tile-overlay-inset, 10px));
    pointer-events: none;
    z-index: 2;
  }

  /* An imageless tile has no media box to hug, so the badge tracks the whole pill. */
  .ew-tile-wrap--text .ew-tile-overlay {
    inset-block: 0;
    aspect-ratio: auto;
  }

  .ew-tile-overlay--top-start {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .ew-tile-overlay--top-end {
    align-items: flex-start;
    justify-content: flex-end;
  }

  .ew-tile-overlay--bottom-start {
    align-items: flex-end;
    justify-content: flex-start;
  }

  .ew-tile-overlay--bottom-end {
    align-items: flex-end;
    justify-content: flex-end;
  }

  .ew-tile-overlay--bottom-center {
    align-items: flex-end;
    justify-content: center;
  }

  .ew-tile__pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px floor: this is a real tap target sitting on top of another one */
    min-height: 44px;
    max-width: 100%;
    padding-block: 8px;
    padding-inline: 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-size: var(--font-size--xs);
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: opacity var(--animation-speed, 0.2s) var(--animation-easing, ease);
  }

  /* The shoppable tag chip. A separate modifier rather than new variables on the text pill,
     so a tile that carries a worded badge is byte-identical to before. Measured on the true
     reference's homepage: a 30x30 #F4F4F4 square at a 6px radius, a 12px #121212 tag glyph
     centred inside it, sitting 15px in from the tile's right edge and 7px up from its
     bottom. The 44px tap floor is kept as an invisible ::after, so the painted chip stays
     30px while the reachable target does not shrink. */
  .ew-tile__pill--chip {
    box-sizing: border-box;
    width: var(--ew-tile-chip-size, 30px);
    height: var(--ew-tile-chip-size, 30px);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ew-tile-chip-radius, 6px);
    background-color: var(--ew-tile-chip-bg, #f4f4f4);
    color: var(--ew-tile-chip-color, #121212);
  }

  .ew-tile__pill-icon {
    display: block;
    width: var(--ew-tile-chip-icon, 12px);
    height: var(--ew-tile-chip-icon, 12px);
  }

  .ew-tile__pill::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  .ew-tile__pill {
    position: relative;
  }

  .ew-tile__pill--static {
    pointer-events: none;
  }

  .ew-tile__pill:focus-visible {
    outline: var(--focus-outline-width, 2px) solid currentColor;
    outline-offset: var(--focus-outline-offset, 3px);
  }

  @media (hover: hover) {
    a.ew-tile__pill:hover {
      opacity: 0.88;
    }
  }

  @media screen and (min-width: 750px) {
    .ew-tile__media {
      aspect-ratio: var(--ew-tile-aspect, 1);
    }

    .ew-tile-overlay {
      aspect-ratio: var(--ew-tile-aspect, 1);
    }

    .ew-tile__pill {
      font-size: var(--font-size--sm);
    }
  }

  @media (hover: hover) {
    .ew-tile:not(.ew-tile--static):hover .ew-tile__image {
      transform: scale(1.04);
    }

    .ew-tile:not(.ew-tile--static):hover .ew-tile__label {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ew-tile__image {
      transition: none;
    }

    .ew-tile:not(.ew-tile--static):hover .ew-tile__image {
      transform: none;
    }

    .ew-tile__pill {
      transition: none;
    }
  }
/* END_BLOCK:ew-link-tile */

/* START_BLOCK:ew-trust-item (INDEX:157) */
/* Every var below falls back to the value this block shipped with, so a trust bar that
     sets none of them renders byte-for-byte as it did before card chrome existed. */
  .ew-trust-item {
    display: flex;
    flex-direction: var(--ew-trust-direction, row);
    align-items: var(--ew-trust-item-align, center);
    gap: var(--ew-trust-item-gap, 10px);
    min-width: 0;
    text-align: var(--ew-trust-text-align, inherit);
    background-color: var(--ew-trust-card-bg, transparent);
    border-radius: var(--ew-trust-card-radius, 0);
    padding-block: var(--ew-trust-card-pad-block, 0);
    padding-inline: var(--ew-trust-card-pad-inline, 0);
  }

  .ew-trust-item__emoji {
    flex: 0 0 auto;
    font-size: var(--ew-trust-emoji-size, 32px);
    line-height: 1;
    font-style: normal;
  }

  .ew-trust-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--ew-trust-icon-size, 24px);
    height: var(--ew-trust-icon-size, 24px);
  }

  .ew-trust-item__glyph {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .ew-trust-item__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .ew-trust-item__title {
    font-size: var(--ew-trust-title-size, var(--font-size--sm));
    line-height: 1.25;
    font-weight: 600;
  }

  .ew-trust-item__subtitle {
    font-size: var(--font-size--xs);
    line-height: 1.25;
    opacity: 0.75;
  }

  .ew-trust-item__body {
    font-size: var(--ew-trust-body-size, var(--font-size--sm));
    line-height: 1.4;
    opacity: 0.85;
    margin-block-start: 6px;
  }
/* END_BLOCK:ew-trust-item */

/* START_BLOCK:ez-azadi-offer (INDEX:158) */
/* The live ez-discount-banner, skinned for the Azadi campaign. Element names, nesting,
     the 750px column-to-row switch, the 40px minimum button height and the is-copied state
     are the live ones, untouched. */
  .ez-offer.azp {
    display: block;
    font-family: var(--font-body--family, 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;

    --az-ground: #01411e;
    --az-ink: #f6f2e7;
    --az-gold: #e3b85c;
  }
  .ez-offer.azp[hidden] {
    display: none;
  }
  .azp .ez-offer__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border-radius: 8px;
    overflow: hidden;
    color: var(--az-ink);
    background:
      linear-gradient(102deg, transparent 15%, rgba(255, 255, 255, 0.034) 45%, transparent 74%),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.017) 0 1px,
        rgba(0, 0, 0, 0.032) 1px 2px,
        transparent 2px 5px
      ),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #054c25 0%, #01411e 54%, #013818 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.055),
      inset 0 -1px 0 rgba(227, 184, 92, 0.28);
  }
  .azp .ez-offer__body::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.13;
  }
  /* the same mark that carries the occasion on the bar, ghosted */
  .azp .ez-offer__body::after {
    content: '';
    position: absolute;
    top: -34px;
    right: -40px;
    width: 132px;
    height: 132px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.095;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.79%203.53A7.5%207.5%200%201%200%2013.79%2016.47A6.5%206.5%200%201%201%2013.79%203.53Z' transform='rotate(-18 10 10)' fill='%23E3B85C'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .azp .ez-offer__text,
  .azp .ez-offer__code {
    position: relative;
    z-index: 1;
  }

  .azp .ez-offer__text {
    font-size: 15.5px;
    line-height: 1.42;
    font-weight: 400;
  }
  .azp .ez-offer__text b,
  .azp .ez-offer__text strong {
    font-weight: 700;
    color: var(--az-gold);
  }
  .azp .ez-offer__text > :first-child {
    margin-block-start: 0;
  }
  .azp .ez-offer__text > :last-child {
    margin-block-end: 0;
  }

  /* a stitched box. the dash pitch is tuned, which border-style: dashed cannot do.
     the 1px transparent border is kept so the box model matches the live block. */
  .azp .ez-offer__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.16);
    background-image:
      repeating-linear-gradient(90deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(90deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(0deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(0deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px);
    background-size:
      100% 1px,
      100% 1px,
      1px 100%,
      1px 100%;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
  }
  .azp .ez-offer__code-label {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(246, 242, 231, 0.76);
  }
  .azp .ez-offer__code-label b,
  .azp .ez-offer__code-label strong {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--az-gold);
    font-variant-numeric: tabular-nums;
  }
  .azp .ez-offer__code-label > :first-child {
    margin-block-start: 0;
  }
  .azp .ez-offer__code-label > :last-child {
    margin-block-end: 0;
  }

  /* flat solid gold, dark green type. no gradient, no bevel, no inset highlight. */
  .azp .ez-offer__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 104px;
    padding-inline: 16px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    background: var(--az-gold);
    color: #0b3b1d;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition:
      transform 150ms cubic-bezier(0.25, 0.85, 0.35, 1),
      background-color 200ms;
  }
  .azp .ez-offer__copy:active {
    transform: scale(0.98);
  }
  @media (hover: hover) {
    .azp .ez-offer__copy:hover {
      background: #efc873;
    }
  }
  /* the live JS swaps the label to a check and adds .is-copied. calm, not celebratory. */
  .azp .ez-offer__copy.is-copied {
    background: rgba(246, 242, 231, 0.07);
    color: var(--az-gold);
    box-shadow: inset 0 0 0 1px rgba(227, 184, 92, 0.55);
    font-size: 15px;
  }

  @media screen and (min-width: 750px) {
    .azp .ez-offer__body {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px;
    }
    .azp .ez-offer__code {
      flex: 0 0 auto;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .azp .ez-offer__copy {
      transition: none;
    }
    .azp .ez-offer__copy:active {
      transform: none;
    }
  }
/* END_BLOCK:ez-azadi-offer */

/* START_BLOCK:ez-browse-tiles (INDEX:160) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-browse-b {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_container: var(--size-container, 1280px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-sm: var(--radius-sm, 4px);
    --_aspect-tile: var(--aspect-tile, 4 / 3);
    /* Deliberately BESPOKE, minted under a PRIVATE name (never under a canon token name —
       the bug-114 class): a 2:3 tall-portrait tile rung. It is OFF the canon aspect ladder
       (nearest canon portrait = --aspect-lifestyle 4/5) and is the owner-locked S9 style-tile
       intent. BANKED as a post-freeze canon note; not written into design_system.md. */
    --_aspect-portrait-tall: 2 / 3;
    /* ON the canon ladder — the 1:1 rung, read through a structural private name so a square
       TILE never has to borrow the circle style's geometric 1:1 allowance. */
    --_aspect-square: var(--aspect-product, 1 / 1);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));

    /* NO padding-block here: the ez-section shell owns the section rhythm (its doc comment,
       "nested blocks carry NO outer spacing"). This line survived the section->block conversion
       and doubled the rhythm to 64/64 on every host — caught on the home migration 2026-07-29. */
    background: var(--_surface);
    color: var(--_text);
    /* [B8] contain any sub-pixel/scroll-snap width leakage — the tile row scrolls INTERNALLY;
       clip (not hidden) never widens the page and is position:sticky-safe. */
    overflow-x: clip;
  }

  .ez-browse__inner {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_pad-x);
  }

  /* ---- S4 heading zone -------------------------------------------------- */
  .ez-browse__head { margin-block-end: var(--_heading-gap); }
  .ez-browse__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ez-browse__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--_gutter);
  }
  .ez-browse__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
  }
  /* ---- Tile row: mobile = native scroll-snap with edge-peek -------------- */
  .ez-browse__grid {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ez-browse__grid::-webkit-scrollbar { display: none; }
  .ez-browse__grid > .ez-browse-tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc((100% - var(--_gutter) - var(--ez-peek, 24px)) / 3);
  }
  .ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
    width: calc((100% - (var(--_gutter) * 3) - var(--ez-peek, 24px)) / 4);
  }

  /* [S4/S9 additive] MOBILE GRID mode — a static N-up grid instead of the snap rail. The
     `[v1.6]` tile-row carve-out (component-contracts C2) makes the snap+peek rail the DEFAULT
     wayfinding grammar and that stays untouched; this mode exists because the home S4 (2x2) and
     S9 (2x3) tile sets are owner-locked as comparison GRIDS on phone — a controlled set the
     buyer reads at once, not a graze row. Snap/peek are dropped wholesale in this mode (a grid
     has nothing to snap to), so no half-transport is left behind. */
  .ez-browse--m-grid .ez-browse__grid {
    display: grid;
    grid-template-columns: repeat(var(--ez-mcols, 2), 1fr);
    row-gap: var(--_gutter);
    overflow: visible;
    scroll-snap-type: none;
  }
  .ez-browse--m-grid .ez-browse__grid > .ez-browse-tile,
  .ez-browse--m-grid.ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
    width: auto;
    scroll-snap-align: none;
  }
  /* 4-up mobile grid: the touch-gap floor is the only gap tight enough to fit four cells on a
     360px phone without the labels colliding. Ported from the live section 2026-07-29. */
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--touch-gap, 8px);
  }
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse__grid > .ez-browse-tile,
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse-tile__link {
    min-width: 0;
  }
  .ez-browse--m-grid.ez-browse--mcols-4 .ez-browse-tile__label {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* ---- C4 image tile ---------------------------------------------------- */
  .ez-browse-tile { list-style: none; }
  .ez-browse-tile__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--_stack-sm);
    color: inherit;
    text-decoration: none;
  }
  /* Press + hover cues ride the ANCHOR only. A tile with no destination renders as a <div>
     (the C4 conditional-wrap pattern) and must carry NO interactive cue — a press-scale on a
     non-navigating tile is a dead affordance (§2.8 all-or-none clickability). */
  a.ez-browse-tile__link:active { transform: scale(var(--_press)); }

  .ez-browse-tile__media {
    width: 100%;
    aspect-ratio: var(--_aspect-selected-m, var(--_aspect-selected-d, var(--_aspect-tile)));
    overflow: hidden;
    border-radius: var(--_radius-md);
    background: var(--_surface);
    border: var(--_hairline) solid var(--_line);
    transition: background-color var(--_dur-base) var(--_ease);
  }
  /* [S4/S9 additive] TILE ASPECT — a BOUNDED choice of canon aspect rungs (§A3 counter-rule:
     constrained choice, never a free numeric primitive). `tile` is the default and reads the
     canon --aspect-tile 4/3, so every pre-existing instance renders byte-identically.
     `portrait` 2:3 is OFF-CANON (nearest canon portrait rung = --aspect-lifestyle 4/5) — it is
     the owner-locked S9 intent; BANKED as a post-freeze canon note, not written into canon.
     Declared BEFORE the circle rule so the circle style still wins at equal specificity. */
     [reconcile 2026-07-29] the chosen rung is now published as a CUSTOM PROPERTY rather than
     applied directly, so a separate MOBILE rung (--mar-*) can override it below 750 while the
     desktop rung (--ar-*) takes over at the 750 seam. Same bounded ladder on both. */
  .ez-browse--ar-square { --_aspect-selected-d: var(--_aspect-square); }
  .ez-browse--ar-tile { --_aspect-selected-d: var(--_aspect-tile); }
  .ez-browse--ar-editorial { --_aspect-selected-d: var(--aspect-editorial, 3 / 2); }
  .ez-browse--ar-lifestyle { --_aspect-selected-d: var(--aspect-lifestyle, 4 / 5); }
  .ez-browse--ar-portrait { --_aspect-selected-d: var(--_aspect-portrait-tall); }
  .ez-browse--mar-square { --_aspect-selected-m: var(--_aspect-square); }
  .ez-browse--mar-tile { --_aspect-selected-m: var(--_aspect-tile); }
  .ez-browse--mar-editorial { --_aspect-selected-m: var(--aspect-editorial, 3 / 2); }
  .ez-browse--mar-lifestyle { --_aspect-selected-m: var(--aspect-lifestyle, 4 / 5); }
  .ez-browse--mar-portrait { --_aspect-selected-m: var(--_aspect-portrait-tall); }
  .ez-browse--style-circle .ez-browse-tile__media {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full, 50%);
  }
  .ez-browse-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ez-browse--style-circle .ez-browse-tile__img { object-fit: contain; }
  .ez-browse-tile__media picture { display: block; width: 100%; height: 100%; }
  .ez-browse-tile__placeholder { width: 100%; height: 100%; }
  .ez-browse-tile__placeholder svg { width: 100%; height: 100%; }

  /* [bug-165] NO cream bed behind tile media on hover. Catalog imagery is a pure-white cutout, so
     a warm lift panel renders the cutout's own white box as a visible rectangle. Canon already
     retired the lift as a card hover cue (§6 C2 v1.5) — the media zoom is the cue. Cutouts sit on
     canvas white, never on a cream panel. */

  .ez-browse-tile__label {
    margin: 0;
    text-align: center;
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
    font-weight: var(--_w-medium);
  }
  /* [C4] Image-tile style: the label is an OVERLAID bounded chip — design_system.md §6 C4
     default (a bounded chip legible over a clean image, NOT a full-image scrim; --radius-sm 4px
     per the §9.3 overlay-label grammar; the whole tile is the link, so the chip is not
     separately interactive). The circle/category style keeps the label BENEATH (the C4
     category / busy-photo fallback — an overlay chip on a round contain-fit icon is not the
     image-tile grammar; the audit notes beneath works for shape/category cuts). */
  .ez-browse--style-tile .ez-browse-tile__label {
    position: absolute;
    inset-block-end: var(--_stack-sm);
    inset-inline-start: var(--_stack-sm);
    padding: 2px var(--space-stack-sm, 8px); /* 2px = chip micro-inset (allowlisted) */
    border-radius: var(--_radius-sm);
    background: var(--_surface);
    color: var(--_text);
    text-align: start;
  }

  /* ---- 750 seam: desktop grid (design_system.md §2.3) ------------------- */
  @media screen and (min-width: 750px) {
    .ez-browse-b {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-browse__heading { font-size: var(--type-h2-size, 1.75rem); }
    /* Bounded desktop width: the grid is inset symmetrically rather than max-width'd, so the
       shell keeps owning the page box. Mobile stays full width. Ported from live 2026-07-29. */
    .ez-browse--desktop-width .ez-browse__grid {
      box-sizing: border-box;
      padding-inline: calc((100% - var(--ez-desktop-width, 100%)) / 2);
    }
    .ez-browse-tile__media { aspect-ratio: var(--_aspect-selected-d, var(--_aspect-tile)); }
    .ez-browse--m-grid.ez-browse--mcols-4.ez-browse--style-tile .ez-browse__grid {
      grid-template-columns: repeat(var(--ez-cols, 4), minmax(0, 1fr));
      gap: var(--_gutter);
    }
    .ez-browse--style-tile .ez-browse__grid {
      display: grid;
      grid-template-columns: repeat(var(--ez-cols, 6), 1fr);
      row-gap: var(--_gutter);
      overflow: visible;
    }
    .ez-browse--style-circle .ez-browse__grid {
      flex-wrap: wrap;
      justify-content: center;
      row-gap: var(--_heading-gap);
      overflow: visible;
    }
    .ez-browse--style-tile .ez-browse__grid > .ez-browse-tile,
    .ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
      width: auto;
    }
    .ez-browse--style-circle .ez-browse__grid > .ez-browse-tile {
      flex: 0 0 calc((100% - (var(--_gutter) * (var(--ez-cols, 6) - 1))) / var(--ez-cols, 6));
    }
  }

  /* [S4/S9 additive] grid-end view-all (the A-2 standalone link as the coverage backstop —
     never a 5th tile). Start-aligned to match the section's head. */
  .ez-browse__foot { display: flex; justify-content: flex-start; }

  @media (prefers-reduced-motion: reduce) {
    a.ez-browse-tile__link:active { transform: none; }
    .ez-browse-b * { transition-duration: 0.01ms !important; }
  }
/* END_BLOCK:ez-browse-tiles */

/* START_BLOCK:ez-comparison-table (INDEX:162) */
/* Design-system tokens -> section-scoped private aliases (theme-foundation.md §A1). */
  .ez-ct-b {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_container: var(--size-container, 1280px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-sm: var(--space-inset-sm, 12px);
    --_radius-md: var(--radius-md, 8px);
    --_icon: var(--size-icon-md, 24px);
    --_hairline: var(--stroke-hairline, 1px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_lift: rgb(var(--color-foreground-rgb, 18 18 18) / 0.05); /* PRIVATE ~5%-ink category-row tint — deliberately NOT the warm --surface-lift step (see [C9] below); un-aliased 2026-07-13 so the token root sheet's --surface-lift cannot hijack it (bug-114 class). */
    /* [C9] the FEATURED (recommended) column reads as a highlighted column CARD — a clearly
       visible warm-neutral tonal step (§3.7 surface-lift), NOT the ~5% --_lift used for category
       rows (too faint to read as "the recommended one"), and NOT a saturated band (§9.2). Falls
       to a concrete warm neutral; the token root sheet's --surface-lift (#f4efe4) wins at :root. */
    --_featured-fill: var(--surface-lift, #f4efe4);
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Mobile reflow = horizontal scroll (grid stays intact) ------------ */
  .ez-ct__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* [P2 — audit block 13] Self-hiding right-edge scroll shadow (local/scroll background technique):
       hints "more columns -> scroll" and disappears once scrolled to the end. The cover layer
       (background-attachment:local) rides with the content and masks the shadow layer (attachment
       fixed to the viewport inline-end) when the end is reached. No left hint needed (first column is
       pinned). No JS; when the table fits (no overflow) the cover sits over the shadow so nothing shows. */
    background:
      linear-gradient(to left, var(--_surface), var(--_surface)) 100% 0 / 24px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.10), rgb(0 0 0 / 0)) 100% 0 / 14px 100% no-repeat;
    background-attachment: local, scroll;
  }

  /* ---- Table ------------------------------------------------------------ */
  .ez-ct__table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: center;
  }
  .ez-ct__corner {
    border: 0;
    background: transparent;
  }
  .ez-ct__colhead {
    padding: var(--_inset-sm);
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--_w-semibold);
    color: var(--_text);
    border-block-end: var(--_hairline) solid var(--_line);
    vertical-align: middle;
  }

  /* Row cells (rendered by ez-comparison-row.liquid) */
  .ez-ct__rowlabel {
    padding: var(--_inset-sm);
    text-align: start;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-medium);
    color: var(--_text);
    border-block-end: var(--_hairline) solid var(--_line);
    white-space: nowrap;
  }
  .ez-ct__cell {
    padding: var(--_inset-sm);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
    color: var(--_muted);
    border-block-end: var(--_hairline) solid var(--_line);
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
  }
  .ez-ct__table tbody tr:last-child .ez-ct__rowlabel,
  .ez-ct__table tbody tr:last-child .ez-ct__cell {
    border-block-end: 0;
  }

  /* [P1 mobile — audit block 13] Sticky first column. The row-label (+ the empty top-left corner,
     so the header row stays aligned above it) pins to the inline-start edge while the value columns
     scroll, so a phone reader never loses which row they are on — the comparison's whole job on the
     primary (mobile) surface. The opaque surface background covers the value cells scrolling
     underneath; a hairline on the inline-end edge separates the pinned column while it is stuck.
     z-index keeps the pinned cells above the scrolling ones. */
  .ez-ct__corner,
  .ez-ct__rowlabel {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
    background: var(--_surface);
    border-inline-end: var(--_hairline) solid var(--_line);
  }

  /* [C9] Featured column = ONE clearly-visible tonal surface-lift step (never a saturated band) */
  .ez-ct__col--featured {
    background: var(--_featured-fill);
  }
  /* Column visibility + the featured tonal step are decided HERE, on the parent, because a
     nested row block cannot read its parent's settings under the shell architecture. */
  .ez-ct-b--cols-1 .ez-ct__cell--c2, .ez-ct-b--cols-1 .ez-ct__cell--c3,
  .ez-ct-b--cols-2 .ez-ct__cell--c3 { display: none; }
  .ez-ct-b--feat-1 .ez-ct__colhead.ez-ct__cell--c1,
  .ez-ct-b--feat-2 .ez-ct__colhead.ez-ct__cell--c2,
  .ez-ct-b--feat-3 .ez-ct__colhead.ez-ct__cell--c3 { }
  .ez-ct-b--feat-1 td.ez-ct__cell--c1,
  .ez-ct-b--feat-2 td.ez-ct__cell--c2,
  .ez-ct-b--feat-3 td.ez-ct__cell--c3,
  .ez-ct__cell--featured {
    background: var(--_featured-fill);
    color: var(--_text);
    font-weight: var(--_w-medium);
  }
  .ez-ct-b--feat-1 .ez-ct__colhead.ez-ct__cell--c1,
  .ez-ct-b--feat-2 .ez-ct__colhead.ez-ct__cell--c2,
  .ez-ct-b--feat-3 .ez-ct__colhead.ez-ct__cell--c3,
  .ez-ct__colhead.ez-ct__col--featured {
    border-start-start-radius: var(--_radius-md);
    border-start-end-radius: var(--_radius-md);
  }
  .ez-ct-b--feat-1 .ez-ct__table tbody tr:last-child td.ez-ct__cell--c1,
  .ez-ct-b--feat-2 .ez-ct__table tbody tr:last-child td.ez-ct__cell--c2,
  .ez-ct-b--feat-3 .ez-ct__table tbody tr:last-child td.ez-ct__cell--c3,
  .ez-ct__table tbody tr:last-child .ez-ct__cell--featured {
    border-end-start-radius: var(--_radius-md);
    border-end-end-radius: var(--_radius-md);
  }

  /* Category-divider row (a full-width sub-heading) */
  .ez-ct__cat {
    padding: var(--_inset-sm);
    text-align: start;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--_muted);
    background: var(--_lift);
    border-block-end: var(--_hairline) solid var(--_line);
  }

  /* Check / cross glyphs (B4 line-art, §3.4) */
  .ez-ct__mark {
    inline-size: var(--_icon);
    block-size: var(--_icon);
    display: inline-block;
    vertical-align: middle;
  }
  .ez-ct__mark--no { opacity: 0.5; }

  /* ---- 750 seam (design_system.md §2.3) --------------------------------- */
  @media screen and (min-width: 750px) {
    .ez-ct-b {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
      --_inset-sm: var(--space-inset-md, 16px);
    }
    .ez-ct__colhead { font-size: var(--type-h3-size, 1.125rem); }
    .ez-ct__rowlabel,
    .ez-ct__cell { font-size: var(--type-body-size, 1rem); }
  }
/* END_BLOCK:ez-comparison-table */

/* START_BLOCK:ez-cta-pair (INDEX:163) */
/* Design-system tokens -> block-scoped private aliases (fallbacks equal ez-tokens :root). */
  .ez-ctapair {
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_touch-gap: var(--touch-gap, 8px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur: var(--motion-duration-fast, 150ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_lift: var(--surface-lift, #f4efe4);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* the touch-gap floor is the minimum between two independent targets */
    gap: max(var(--_touch-gap), var(--_gutter));
  }
  .ez-ctapair--align-center { justify-content: center; }

  .ez-ctapair__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    padding-inline: var(--_inset-lg);
    border: 0;
    border-radius: var(--_radius-md);
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
    text-align: center;
    text-decoration: none;
    transition: transform var(--_dur) var(--_ease), opacity var(--_dur) var(--_ease);
  }
  /* primary — the one pull: a solid filled field carrying the object's mass. */
  .ez-ctapair__btn--primary {
    background: var(--_text);
    color: var(--_surface);
  }
  /* secondary — the SAME object at a lighter fill weight, never an outline. */
  .ez-ctapair__btn--secondary {
    background: var(--_lift);
    color: var(--_text);
  }
  .ez-ctapair__btn:active { transform: scale(var(--_press)); }
  @media (hover: hover) {
    .ez-ctapair__btn:hover { opacity: 0.9; }
  }
  .ez-ctapair__btn:focus-visible {
    outline: var(--stroke-heavy, 2px) solid currentColor;
    outline-offset: 2px;
  }

  /* The width OR (A-1): a single commit may run full-width on mobile. Structurally
     unavailable once a secondary exists — the class is only ever emitted alone. */
  @media screen and (max-width: 749px) {
    .ez-ctapair--m-full { display: block; }
    .ez-ctapair--m-full .ez-ctapair__btn { display: flex; width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-ctapair__btn { transition-duration: 0.01ms; }
    .ez-ctapair__btn:active { transform: none; }
  }
/* END_BLOCK:ez-cta-pair */

/* START_BLOCK:ez-curation-handful (INDEX:164) */
/* The .ez-curation-b shell + head + grid + empty CSS is owned by ez-curation-list.liquid (same ns,
     bundled once). This file adds only the handful-specific hero band + the H1 size bump. */

  /* The old .ez-curation--handful .ez-curation__heading H1 size-bump is GONE with the inline
     heading markup: the H1 rung now comes from ez-heading's own page-title role
     (.ez-head--page-title), which is where a heading's type rung belongs. */

  .ez-curation__hero {
    margin: 0 0 var(--space-heading-gap, 24px);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: var(--surface-fill, #f9f8f6);
    aspect-ratio: var(--aspect-editorial, 3 / 2);
    max-block-size: 46svh;
  }
  .ez-curation__hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_BLOCK:ez-curation-handful */

/* START_BLOCK:ez-curation-list (INDEX:165) */
/* ---------------------------------------------------------------------------
     Design-system tokens resolved ONCE into section-scoped private aliases (the
     theme-foundation §A1 pattern): each reads the canonical N3 token and falls back
     to the provisional value (structure/motion) or the live scheme token (colour
     roles). The :root definition WINS over the fallback, so an N2 retune flows
     through with zero edits here. Components below read only the --_ aliases.
     --------------------------------------------------------------------------- */
  .ez-curation-b {
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_container: var(--size-container, 1280px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_h2-size: var(--type-h2-size, 1.375rem);
    --_h2-line: var(--type-h2-line, 1.2);
    --_eyebrow-size: var(--type-eyebrow-size, 0.75rem);
    --_eyebrow-line: var(--type-eyebrow-line, 1.3);
    --_body-size: var(--type-body-size, 1rem);
    --_body-line: var(--type-body-line, 1.5);
    --_w-semibold: var(--type-weight-semibold, 600);
    /* bespoke colour roles -> live theme scheme token fallback (resolves identically to :root) */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_text-muted: var(--color-text-muted, var(--color-foreground-muted));
  }

  /* ===== Inner only. The section rhythm is the SHELL's (ez-section), never this block's; the
     padding-block that survived the section->block conversion here was stacking a second 32px
     on top of the shell's own and pushing every curation grid 64px off its heading. Same defect
     class as the one caught on ez-browse-tiles during the home migration. ================== */
  .ez-curation-b {
    background: var(--color-surface, var(--color-background));
    color: var(--color-text, var(--color-foreground));
  }
  .ez-curation__inner {
    max-width: var(--size-container, 1280px);
    margin-inline: auto;
    padding-inline: var(--ez-shell-pad-x, 16px);
  }

  /* ===== Head zone (mirrors ez-shell §6 S4 for this ns): eyebrow + heading + space-between view-all row === */
  .ez-curation__head { margin-block-end: var(--space-heading-gap, 24px); }
  .ez-curation__eyebrow {
    margin: 0 0 var(--space-stack-xs, 4px);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
  }
  .ez-curation__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--type-weight-semibold, 600);
  }
  .ez-curation__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-gutter, 12px);
  }

  /* ===== The continue-into GRID (design_system.md §2.5 product-grid role): 2-up -> 3-up @750 -> columns @990.
     Mirrors the ez-product-rail grid-mode values; classes are section-owned here so the transport is correct
     (no bug-158 emitter/selector mismatch -- this file owns both halves). The .ez-card look is inherited from
     the globally-bundled ez-product-card CSS. ============================================================= */
  .ez-curation__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-gutter, 12px);
    row-gap: var(--space-heading-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-curation__grid > .ez-card { width: auto; }

  .ez-curation__empty {
    margin: 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    color: var(--color-text-muted, var(--color-foreground-muted));
  }

  /* ---- 750 seam (design_system.md §2.3): desktop heading-gap/gutter flip at :root; grid -> 3-up ---------- */
  @media screen and (min-width: 750px) {
    .ez-curation__grid { grid-template-columns: repeat(3, 1fr); }
  }
  /* ---- 990 seam: grid -> the configured desktop column count ------------------------------------------- */
  @media screen and (min-width: 990px) {
    .ez-curation__grid { grid-template-columns: repeat(var(--ez-cols, 4), 1fr); }
  }
/* END_BLOCK:ez-curation-list */

/* START_BLOCK:ez-discount-banner (INDEX:167) */
/* design-system tokens -> section-scoped aliases (theme-foundation.md §A1) */
  .ez-offer {
    --_radius-md: var(--radius-md, 8px);
    --_radius-sm: var(--radius-sm, 4px);
    --_inset: var(--space-inset-md, 16px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_control: var(--size-control-sm, 40px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    /* neutral one-step surface-lift (design_system.md §3.7) — never a saturated band.
       Provisional warm off-white fallback (no color-mix; PK Android baseline) until N2
       lands --color-surface-lift. */
    --_lift: var(--color-surface-lift, #f7f6f3);
    --_line: var(--color-line, var(--color-border));

    display: block;
  }
  .ez-offer__body {
    display: flex;
    flex-direction: column;
    gap: var(--_stack-sm);
    padding: var(--_inset);
    border-radius: var(--_radius-md);
    background: var(--_lift);
    color: var(--_text);
  }
  .ez-offer__text {
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    font-weight: var(--_w-semibold);
  }
  .ez-offer__text > :first-child { margin-block-start: 0; }
  .ez-offer__text > :last-child { margin-block-end: 0; }
  .ez-offer__code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_stack-sm);
    padding: var(--_stack-sm) var(--_inset);
    border: var(--_hairline) dashed var(--_line);
    border-radius: var(--_radius-sm);
  }
  .ez-offer__code-label {
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    color: var(--_muted);
  }
  .ez-offer__code-label > :first-child { margin-block-start: 0; }
  .ez-offer__code-label > :last-child { margin-block-end: 0; }
  .ez-offer__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    padding-inline: var(--_inset);
    border: var(--_hairline) solid var(--_text);
    border-radius: var(--_radius-md);
    background: transparent;
    color: var(--_text);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-medium);
    cursor: pointer;
    transition: background-color var(--_dur-base) var(--_ease), color var(--_dur-base) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ez-offer__copy:active { transform: scale(var(--_press)); }
  @media (hover: hover) {
    .ez-offer__copy:hover { background: var(--_text); color: var(--color-background); }
  }
  .ez-offer__copy.is-copied { background: var(--_text); color: var(--color-background); }

  @media screen and (min-width: 750px) {
    .ez-offer__body { flex-direction: row; align-items: center; justify-content: space-between; }
    .ez-offer__code { flex: 0 0 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-offer__copy { transition: none; }
    .ez-offer__copy:active { transform: none; }
  }
/* END_BLOCK:ez-discount-banner */

/* START_BLOCK:ez-divider (INDEX:168) */
.ez-divider {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    border-block-start: var(--stroke-hairline, 1px) solid var(--color-line, var(--color-border));
  }
  /* NO outer margin. The shell's row-gap already holds the hairline off whatever precedes it,
     so it never fuses with the line of text above and never doubles either. The old pair of
     rules (a gap, then a special-case zero after a heading) existed only to work around the
     heading carrying its own margin; with the shell owning the gap, one uniform rule covers
     every neighbour and the special case disappears. */
/* END_BLOCK:ez-divider */

/* START_BLOCK:ez-editorial-band (INDEX:169) */
/* Design-system tokens -> section-scoped private aliases with provisional fallbacks
     (theme-foundation.md §A1). Components below read only the --_ aliases. */
  .ez-eb-b {
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-md: var(--space-stack-md, 12px);
    --_container: var(--size-container, 1280px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_measure: 46ch;
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));

    /* [law 1] bounded, never 100vh. Mobile canvas = 4:5; the cap is the only viewport unit. */
    --_ar: var(--ez-eb-aspect-m, var(--aspect-lifestyle, 4 / 5));
    --_cap: 110svh;

    /* FULL-BLEED: the band spans the viewport regardless of any container it sits inside. */
    display: block;
    position: relative;
    /* [law 2] the section's own box ends at a hard edge — no gradient, no bleed, no shadow. */
    background: transparent;
    color: var(--_text);
  }

  .ez-eb__band {
    position: relative;
    width: 100%;
    aspect-ratio: var(--_ar);
    max-block-size: var(--_cap);
    overflow: hidden;
    /* the DARK. A real dark surface while there is no photography; once an image lands it
       covers this and the dark lives IN the image (the eventual law). */
    background: var(--_surface);
    /* [law 2] hard dark->white exit cut: the band simply STOPS here. Do not add a
       gradient / fade / soft edge to this element — that is the page-is-ending signal. */
  }

  .ez-eb__media, .ez-eb__empty { position: absolute; inset: 0; display: block; }
  .ez-eb__img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---- Type overlay (DOM, never baked into the art) ---------------------- */
  .ez-eb__inner {
    position: absolute;
    inset: 0;
    max-width: var(--_container);
    margin-inline: auto;
    padding: var(--_inset-lg) var(--_pad-x);
    display: flex;
    pointer-events: none; /* nothing here is interactive this pass */
  }
  /* mobile: type at the TOP of the canvas */
  .ez-eb--text-top .ez-eb__inner { align-items: flex-start; justify-content: flex-start; }
  .ez-eb--text-center .ez-eb__inner { align-items: center; justify-content: center; text-align: center; }

  .ez-eb__type { max-width: var(--_measure); }

  .ez-eb__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  /* DISPLAY scale — the editorial headline rung (design_system.md §3.6). The root sheet flips
     --type-display-size 2.125rem -> 3.25rem at the 750 seam, so no per-section desktop step. */
  .ez-eb__heading {
    margin: 0;
    font-size: var(--type-display-size, 2.125rem);
    line-height: var(--type-display-line, 1.05);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-eb__standfirst {
    margin-block-start: var(--_stack-md);
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
  }
  .ez-eb__standfirst > :first-child { margin-block-start: 0; }
  .ez-eb__standfirst > :last-child { margin-block-end: 0; }

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------- */
  @media screen and (min-width: 750px) {
    .ez-eb-b { --_measure: 52ch; }
    /* desktop aspect rungs — bounded choice, never 100vh (law 1) */
    .ez-eb--ar-ultrawide .ez-eb__band { aspect-ratio: 21 / 9; }
    .ez-eb--ar-wide .ez-eb__band { aspect-ratio: 16 / 9; }
    .ez-eb--ar-classic .ez-eb__band { aspect-ratio: 3 / 2; }
    /* desktop: type block UPPER-LEFT */
    .ez-eb--text-top .ez-eb__inner { align-items: flex-start; }
    .ez-eb__inner { padding: var(--space-48, 48px) var(--_pad-x); }
    .ez-eb__standfirst { font-size: var(--type-body-lg-size, 1.125rem); line-height: var(--type-body-lg-line, 1.5); }
  }

  /* [STILLNESS] no entrance choreography, no parallax, no transitions in this section. */
/* END_BLOCK:ez-editorial-band */

/* START_BLOCK:ez-faq (INDEX:171) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-faq-b {
    /* Section rhythm and the 1280 box belong to the shell (S1 custody). What this block keeps
       is the READING MEASURE: it is capped at --_measure (65ch, §S5), not the content column. */
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_inset: var(--space-inset-md, 16px);
    --_measure: var(--size-measure, 65ch);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_dur-exp: var(--motion-expressive, 400ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-regular: var(--type-weight-regular, 400);
    --_q-line: 1.35; /* question leading — between h3-line 1.3 and caption 1.4; owner-accepted since W1; snap-to --type-h3-line a taste call */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_accent: var(--color-accent, #BF1C1D);
    /* accordion card fill + hover/open surface-lift (§3.7 colour-shift, not a motion lift) */
    --_fill: var(--surface-fill, #f9f8f6);
    --_lift: var(--surface-lift, #f4efe4);
  }

  /* Outer rhythm + the 1280 box are the shell's now. What is NOT the shell's is this block's
     own 65ch READING MEASURE (S5 measure cap) — an accordion is read, not scanned, so it stays
     narrower than the content column and centred in it. This constraint used to ride an
     .ez-faq__inner wrapper that the block conversion dropped; it lives on the block root now,
     which is the same box with one less div. */
  .ez-faq-b {
    max-width: var(--_measure);
    margin-inline: auto;
  }

  /* ---- Accordion (design_system.md §6 3.5) [v1.3] SINGLE-OPEN + accented/lifted -------------
     gapped ~8px rounded cards on a neutral fill (hairline dividers superseded — ONE separation);
     a warm §3.7 surface-lift on hover/open; the open item's +/− turns accent (ONE pull). */
  .ez-faq__list { display: flex; flex-direction: column; gap: var(--_stack-sm); }

  .ez-faq__item {
    border-radius: var(--_radius-md);
    background: var(--_fill);
    transition: background-color var(--_dur-base) var(--_ease);
  }
  @media (hover: hover) { .ez-faq__item:hover { background: var(--_lift); } }
  .ez-faq__item.is-open { background: var(--_lift); }

  .ez-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_inset);
    width: 100%;
    min-height: var(--_control);
    padding: var(--_stack-sm) var(--_inset);
    border: 0;
    border-radius: var(--_radius-md);
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--_q-line);
    font-weight: var(--_w-semibold);
    text-align: start;
    cursor: pointer;
  }
  .ez-faq__q:active { transform: scale(var(--_press)); }

  /* plus <-> minus: two bars, the vertical one collapses when open; open item = accent (one pull) */
  .ez-faq__icon {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--_muted);
    transition: color var(--_dur-base) var(--_ease);
  }
  .ez-faq__q[aria-expanded="true"] .ez-faq__icon { color: var(--_accent); }
  .ez-faq__icon::before,
  .ez-faq__icon::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 15px;
    height: 2px;
    border-radius: var(--radius-pill, 999px); /* pill-ends on the 15x2 bar clamp to 1px — value-identical, semantically correct rung */
    background: currentColor;
    translate: -50% -50%;
    transition: opacity var(--_dur-base) var(--_ease), transform var(--_dur-base) var(--_ease);
  }
  .ez-faq__icon::after { transform: rotate(90deg); }
  .ez-faq__q[aria-expanded="true"] .ez-faq__icon::after {
    opacity: 0;
    transform: rotate(0deg);
  }

  .ez-faq__panel {
    overflow: hidden;
    transition: max-height var(--_dur-exp) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  /* collapsed state is applied by ez-faq.js (data-collapsed) so the content
     stays readable if JS never runs (progressive enhancement) */
  .ez-faq__panel[data-collapsed] { max-height: 0; opacity: 0; }

  .ez-faq__answer {
    padding: 0 var(--_inset) var(--_inset);
    max-width: var(--_measure);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
  }
  .ez-faq__answer > :first-child { margin-block-start: 0; }
  .ez-faq__answer > :last-child { margin-block-end: 0; }
  .ez-faq__answer a { color: inherit; text-decoration: underline; }

  @media screen and (min-width: 750px) {
    .ez-faq-b {
      /* [v1.3] 32/32 vertical both breakpoints (supersedes 80) */
      --_section-y: var(--space-section-y, 32px);
      --_heading-gap: var(--space-heading-gap, 32px);
    }
    .ez-faq__q { font-size: var(--type-h3-size, 1.125rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-faq__panel,
    .ez-faq__icon::before,
    .ez-faq__icon::after { transition-duration: 0.01ms !important; }
    .ez-faq__q:active { transform: none; }
  }
/* END_BLOCK:ez-faq */

/* START_BLOCK:ez-heading (INDEX:172) */
/* Design-system tokens -> block-scoped private aliases (fallbacks equal ez-tokens :root). */
  .ez-head {
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_gutter: var(--space-gutter, 12px);
  }

  /* NO outer margin here. The heading->content gap is now the SHELL's row-gap (ez-section:
     --_row-gap, the same --space-heading-gap rung), so this block carries zero outer spacing
     like every other element. Keeping a margin here as well double-spaced every heading
     (owner-reported 2026-07-29: "these elements are having vertical spacing themselves a lot").
     A block that NESTS an ez-head inside itself (ez-media-text) supplies that gap from its own
     internal layout, so nothing here needs to reach outside its own box. */

  .ez-head__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
  }

  /* A nested view-all CENTRES against the full heading stack, whatever that stack holds —
     eyebrow + heading, heading alone, or eyebrow + heading + subtitle. `center` self-centres
     against whatever height is actually there, so no shape needs its own offset and there are
     no magic numbers. (Was `baseline`, which pinned the link to the heading's own baseline and
     left it sitting low under an eyebrow — owner-reported 2026-07-29.) */
  .ez-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_gutter);
  }
  .ez-head__text { min-width: 0; }

  .ez-head__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--type-weight-semibold, 600);
    text-wrap: balance;
  }

  .ez-head__sub {
    margin: var(--_stack-sm) 0 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    color: var(--color-text-muted, var(--color-foreground-muted));
    text-wrap: pretty;
  }

  /* The PAGE-TITLE role takes the H1 type rung (§3.6). Level and size move together here
     ONLY because the page title genuinely is a bigger thing than a section heading; for the
     bounded h2/h3 levels the size still comes from the rung and never from the tag. */
  .ez-head--page-title .ez-head__heading {
    font-size: var(--type-h1-size, 1.75rem);
    line-height: var(--type-h1-line, 1.15);
  }

  /* Left-axis default (S1). Centre is the deliberate rest-beat: the row stacks so a
     "view all" link sits centred beneath the heading rather than pinned to an edge. */
  .ez-head--align-center { text-align: center; }
  .ez-head--align-center .ez-head__row {
    flex-direction: column;
    align-items: center;
    gap: var(--_stack-sm);
  }
/* END_BLOCK:ez-heading */

/* START_BLOCK:ez-image-banner (INDEX:175) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-banner-b {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_on-media: var(--color-on-media, #ffffff);
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */
  ez-image-banner { display: block; }

  /* ---- Track: single = block; carousel = native scroll-snap ------------- */
  .ez-banner__track {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-banner__viewport { position: relative; }
  .ez-banner--carousel .ez-banner__track {
    overflow-y: hidden;
    /* [B7] MANDATORY snap (was proximity): the engine's banner-carousel bundle steps to a slide
       START both ways; mandatory always completes the snap, matching the hero / shoppable. */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }

  .ez-banner__slide {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* mobile: slides-per-view with an edge-peek sliver */
    width: calc((100% - (var(--_gutter) * (var(--ez-spv-m, 1) - 1)) - var(--ez-peek, 0px)) / var(--ez-spv-m, 1));
    border-radius: var(--_radius-md);
    overflow: hidden;
  }

  .ez-banner__media { display: block; position: relative; width: 100%; height: 100%; }
  .ez-banner__link { display: block; width: 100%; height: 100%; }
  .ez-banner__img { display: block; width: 100%; height: 100%; }
  .ez-banner--fit-cover .ez-banner__img { object-fit: cover; }
  .ez-banner--fit-contain .ez-banner__img { object-fit: contain; }

  /* aspect: locked per role so a carousel's cells share ONE ratio (§2.6);
     "natural" keeps the image's own ratio (only sensible for a single banner) */
  .ez-banner--ar-square   .ez-banner__slide { aspect-ratio: 1 / 1; }
  .ez-banner--ar-portrait .ez-banner__slide { aspect-ratio: 4 / 5; }
  .ez-banner--ar-landscape .ez-banner__slide { aspect-ratio: 4 / 3; }
  .ez-banner--ar-classic  .ez-banner__slide { aspect-ratio: 3 / 2; }
  .ez-banner--ar-wide     .ez-banner__slide { aspect-ratio: 16 / 9; }
  .ez-banner--ar-ultrawide .ez-banner__slide { aspect-ratio: 21 / 9; } /* [bug-119] canon banner default crop (design_system.md §2.6 [v1.3]); inert for existing instances */
  .ez-banner--ar-natural .ez-banner__img { height: auto; }

  .ez-banner__placeholder { width: 100%; height: 100%; }
  .ez-banner__placeholder svg { width: 100%; height: 100%; }

  /* ---- Overlay / below text (rendered by ez-image-banner-slide.liquid) --- */
  .ez-banner__content { display: flex; flex-direction: column; gap: var(--_stack-md); }
  .ez-banner--text-overlay .ez-banner__content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    color: var(--_on-media);
    padding: var(--_inset-lg);
    /* localized gradient behind the text ONLY (§8 legibility carve-out; NOT a full scrim) */
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 76%);
  }
  .ez-banner--text-below .ez-banner__content { padding-block-start: var(--_inset); }
  .ez-banner--text-none .ez-banner__content { display: none; }

  .ez-banner--align-center .ez-banner__content { text-align: center; align-items: center; }
  .ez-banner--align-end .ez-banner__content { text-align: end; align-items: flex-end; }

  .ez-banner__eyebrow-slide {
    margin: 0;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .ez-banner__title {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-banner__subtitle {
    margin: 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    max-width: 46ch;
  }
  .ez-banner__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    margin-block-start: var(--_stack-sm);
    padding-inline: var(--_inset-lg);
    border: 0;
    border-radius: var(--_radius-md);
    background: var(--_text);
    color: var(--_surface);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--_dur-fast) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  .ez-banner--align-center .ez-banner__cta { align-self: center; }
  .ez-banner--align-end .ez-banner__cta { align-self: flex-end; }
  .ez-banner--text-overlay .ez-banner__cta { background: var(--_on-media); color: #111111; }
  .ez-banner__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-banner__cta:hover { opacity: 0.9; } }

  /* ---- Controls --------------------------------------------------------- */
  .ez-banner__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-banner__dots { display: flex; align-items: center; gap: var(--_stack-sm); margin-inline: auto; }
  /* Nav chrome (dot button + progress bar + overlay arrow + disabled) -> shared ez-carousel-styles. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    .ez-banner-b {
      /* [v1.3] 32/32 vertical both breakpoints (supersedes 80); desktop sides = 64 (the 1280 box). */
      --_section-y: var(--space-section-y, 32px);
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-banner__title { font-size: var(--type-h1-size, 2.5rem); }
    .ez-banner__slide {
      width: calc((100% - (var(--_gutter) * (var(--ez-spv-d, 1) - 1))) / var(--ez-spv-d, 1));
    }
    .ez-banner__controls { display: none; }
  }

  /* ---- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-banner__track { scroll-behavior: auto; }
    .ez-banner-b * { transition-duration: 0.01ms !important; }
    .ez-banner__cta:active { transform: none; }
  }
/* END_BLOCK:ez-image-banner */

/* START_BLOCK:ez-image-compare (INDEX:176) */
/* Design-system tokens -> section-scoped private aliases (theme-foundation.md §A1). */
  .ez-ic-b {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_inset-sm: var(--space-inset-sm, 12px);
    --_container: var(--size-container, 1280px);
    --_radius-sm: var(--radius-sm, 4px);
    --_radius-md: var(--radius-md, 8px);
    --_handle: 44px;
    --_conn: 2px;
    --_label-pad-y: 6px;   /* L1 badge chip: proportions between rungs by design (chip sits on image) */
    --_label-pad-x: 10px;
    --_label-line: 1.2;    /* chip leading; must NOT couple to --type-h2-line despite the equal value */
    --_handle-gap: 1px;    /* chevron glyph gap inside the 44px handle */
    --_hairline: var(--stroke-hairline, 1px);
    --_stroke-focus: var(--stroke-heavy, 2px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_accent: var(--color-accent, #BF1C1D);
    --_compare-elevation: 0 1px 3px rgb(0 0 0 / 0.18); /* PRIVATE bespoke depth for the divider/handle — deliberately NOT canon --elevation-1 geometry; un-aliased 2026-07-13 (bug-114) so the token root sheet can define canon elevations without hijacking this */
  }
  /* Shell (outer rhythm + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Stage ------------------------------------------------------------ */
  .ez-ic__stage {
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--ez-ic-ratio, 16 / 9);
    overflow: hidden;
    border-radius: var(--_radius-md);
    user-select: none;
    -webkit-user-select: none;
  }
  /* [P0 mobile scroll-trap fix — audit block 5; design_system §2.3 + v1.4 #3] touch-action is
     ORIENTATION-AWARE, not a blanket `none`. A blanket `none` on this full-width block dead-zoned
     the primary mobile gesture: a finger landing here could not scroll the page past it. Now the
     browser owns the CROSS axis (page scroll) while the drag axis drives the divider:
       horizontal slider -> pan-y  (vertical finger drags scroll the page; horizontal drags = divider)
       vertical slider   -> pan-x  (horizontal finger drags scroll the page; vertical drags = divider)
     The JS already uses pointer events (pointercancel releases the drag when the browser takes over
     for a cross-axis pan), so only the axis gate changes; the divider drag stays 1:1. */
  .ez-ic__stage--horizontal { cursor: ew-resize; touch-action: pan-y; }
  .ez-ic__stage--vertical { cursor: ns-resize; touch-action: pan-x; }

  .ez-ic__layer {
    position: absolute;
    inset: 0;
  }
  /* After layer clipped so LEFT = before, RIGHT = after; divider at --pos */
  .ez-ic__stage--horizontal .ez-ic__layer--after {
    clip-path: inset(0 0 0 calc(var(--pos, 50) * 1%));
  }
  .ez-ic__stage--vertical .ez-ic__layer--after {
    clip-path: inset(calc(var(--pos, 50) * 1%) 0 0 0);
  }

  .ez-ic__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: var(--_fit, cover);
    display: block;
    /* [C10a] the divider drag is handled on the stage; the images must neither start a native
       image-drag nor intercept the pointer (the background must stay fixed while dragging). */
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }
  .ez-ic__ph { position: absolute; inset: 0; }
  .ez-ic__ph svg { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Labels = L1 static badge (4px, factual, solid fill on image for legibility) */
  .ez-ic__label {
    position: absolute;
    inset-block-start: var(--_inset-sm);
    padding: var(--_label-pad-y) var(--_label-pad-x);
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--_label-line);
    font-weight: var(--_w-semibold);
    color: var(--_text);
    background: var(--_surface);
    border-radius: var(--_radius-sm);
    box-shadow: var(--_compare-elevation);
    pointer-events: none;
    z-index: 3;
  }
  .ez-ic__label--before { inset-inline-start: var(--_inset-sm); }
  .ez-ic__label--after { inset-inline-end: var(--_inset-sm); }
  .ez-ic__stage--vertical .ez-ic__label--after {
    inset-block-start: auto;
    inset-block-end: var(--_inset-sm);
    inset-inline-start: var(--_inset-sm);
    inset-inline-end: auto;
  }

  /* Divider + handle */
  .ez-ic__divider {
    position: absolute;
    background: var(--_surface);
    box-shadow: var(--_compare-elevation);
    pointer-events: none;
    z-index: 4;
  }
  .ez-ic__stage--horizontal .ez-ic__divider {
    inset-block: 0;
    inset-inline-start: calc(var(--pos, 50) * 1%);
    inline-size: var(--_conn);
    transform: translateX(-50%);
  }
  .ez-ic__stage--vertical .ez-ic__divider {
    inset-inline: 0;
    inset-block-start: calc(var(--pos, 50) * 1%);
    block-size: var(--_conn);
    transform: translateY(-50%);
  }

  .ez-ic__handle {
    position: absolute;
    z-index: 5;
    inline-size: var(--_handle);
    block-size: var(--_handle);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_handle-gap);
    color: var(--_text);
    background: var(--_surface);
    border-radius: var(--radius-full, 50%);
    box-shadow: var(--_compare-elevation);
    pointer-events: none;
  }
  .ez-ic__handle svg { inline-size: 16px; block-size: 16px; }
  .ez-ic__stage--horizontal .ez-ic__handle {
    inset-block-start: 50%;
    inset-inline-start: calc(var(--pos, 50) * 1%);
    transform: translate(-50%, -50%);
  }
  .ez-ic__stage--vertical .ez-ic__handle {
    inset-inline-start: 50%;
    inset-block-start: calc(var(--pos, 50) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* The range is the a11y control: invisible, full-cover, keyboard-focusable.
     pointer-events:none so pointer drag is handled on the stage (ez-image-compare.js);
     Tab focus + arrow keys still operate it. */
  .ez-ic__range {
    position: absolute;
    inset: 0;
    z-index: 6;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
  }
  .ez-ic__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: var(--_handle); block-size: var(--_handle); }
  .ez-ic__range::-moz-range-thumb { border: 0; inline-size: var(--_handle); block-size: var(--_handle); background: transparent; }
  /* Focus-visible surfaces on the handle */
  .ez-ic__range:focus-visible ~ .ez-ic__handle {
    outline: var(--_stroke-focus) solid var(--_accent);
    outline-offset: 2px;
  }

  /* ---- 750 seam (design_system.md §2.3) --------------------------------- */
  @media screen and (min-width: 750px) {
    .ez-ic-b {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
      --_handle: 48px;
    }
    .ez-ic__stage { max-inline-size: 960px; margin-inline: auto; }
  }
/* END_BLOCK:ez-image-compare */

/* START_BLOCK:ez-infinite-banner (INDEX:178) */
/* Design-system tokens -> section-scoped private aliases with provisional fallbacks
     until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-inf-b {
    --_section-y: var(--space-section-y, 32px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-bold: var(--type-weight-bold, 700);
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_on-media: var(--color-on-media, #ffffff);
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  ez-infinite-banner { display: block; }
  .ez-inf__viewport { position: relative; }

  /* ---- Track: single = block; loop = native scroll-snap (JS clones the sets) ---- */
  .ez-inf__track {
    position: relative; /* the slides' offsetParent -> offsetLeft == scroll coordinate (JS wrap math) */
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-inf--loop .ez-inf__track {
    overflow-y: hidden;
    /* mandatory centre-snap: each slide centres; the wrap reposition moves by an exact set-width,
       so it always lands on an equivalent snap point and never fights the snap. */
    scroll-snap-type: x mandatory;
    /* NO scroll-behavior:smooth here (deliberate — do not re-add). Per CSSOM, a direct scrollLeft
       assignment inherits the element's scroll-behavior, so a CSS smooth would make the JS wrap
       reposition (scrollLeft += set-width in ez-infinite-banner.js _normalize) ANIMATE — turning the
       invisible whole-set jump into a VISIBLE boundary slide, the dead-end artifact an infinite loop
       must never show. The two user nav actions (arrows/dots) pass behavior:'smooth' explicitly in
       JS so they stay smooth; the wrap + initial centre + resize stay INSTANT. */
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }

  .ez-inf__slide {
    position: relative;
    flex: 0 0 auto;
    /* [reconcile 2026-07-29] per-viewport slide shape, ported from the LIVE section: the mobile
       rung wins below 750, the desktop rung takes over at the seam. */
    aspect-ratio: var(--_aspect-selected-m, var(--_aspect-selected-d, var(--aspect-tile, 4 / 3)));
    /* centre-snap so a slide rests centred with a PEEK of the previous + next slide on BOTH sides
       (the bidirectional swipe affordance). */
    scroll-snap-align: center;
    width: calc((100% - (2 * var(--ez-peek, 40px)) - (var(--_gutter) * (var(--ez-spv-m, 1) - 1))) / var(--ez-spv-m, 1));
    border-radius: var(--_radius-md);
    overflow: hidden;
  }
  /* a single slide (no loop) is a plain full-width banner: no peek reservation */
  .ez-inf-b:not(.ez-inf--loop) .ez-inf__slide { width: 100%; }

  .ez-inf__media, .ez-inf__link { display: block; position: relative; width: 100%; height: 100%; }
  .ez-inf__img, .ez-inf__video { display: block; width: 100%; height: 100%; }
  .ez-inf--fit-cover .ez-inf__img, .ez-inf--fit-cover .ez-inf__video { object-fit: cover; }
  .ez-inf--fit-contain .ez-inf__img, .ez-inf--fit-contain .ez-inf__video { object-fit: contain; }

  /* aspect: locked per instance so a loop's cells share ONE ratio (§2.6) */
  .ez-inf--ar-square { --_aspect-selected-d: var(--aspect-product, 1 / 1); }
  .ez-inf--ar-portrait { --_aspect-selected-d: var(--aspect-lifestyle, 4 / 5); }
  .ez-inf--ar-landscape { --_aspect-selected-d: var(--aspect-tile, 4 / 3); }
  .ez-inf--ar-classic { --_aspect-selected-d: var(--aspect-editorial, 3 / 2); }
  .ez-inf--ar-wide { --_aspect-selected-d: var(--aspect-video, 16 / 9); }
  .ez-inf--mar-square { --_aspect-selected-m: var(--aspect-product, 1 / 1); }
  .ez-inf--mar-portrait { --_aspect-selected-m: var(--aspect-lifestyle, 4 / 5); }
  .ez-inf--mar-landscape { --_aspect-selected-m: var(--aspect-tile, 4 / 3); }
  .ez-inf--mar-classic { --_aspect-selected-m: var(--aspect-editorial, 3 / 2); }
  .ez-inf--mar-wide { --_aspect-selected-m: var(--aspect-video, 16 / 9); }

  .ez-inf__placeholder { width: 100%; height: 100%; }
  .ez-inf__placeholder svg { width: 100%; height: 100%; }

  /* ---- Overlay / below text (rendered by ez-infinite-banner-slide.liquid) --- */
  .ez-inf__content { display: flex; flex-direction: column; gap: var(--_stack-md); }
  .ez-inf--text-overlay .ez-inf__content {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    color: var(--_on-media);
    padding: var(--_inset-lg);
    /* localized gradient behind the text ONLY (§8 legibility carve-out; NOT a full scrim) */
    background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 76%);
  }
  .ez-inf--text-below .ez-inf__content { padding-block-start: var(--_inset); }
  .ez-inf--text-none .ez-inf__content { display: none; }
  .ez-inf--align-center .ez-inf__content { text-align: center; align-items: center; }
  .ez-inf--align-end .ez-inf__content { text-align: end; align-items: flex-end; }

  .ez-inf__eyebrow-slide {
    margin: 0;
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .ez-inf__title {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-bold);
    text-wrap: balance;
  }
  .ez-inf__subtitle {
    margin: 0;
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    max-width: 46ch;
  }
  .ez-inf__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    margin-block-start: var(--_stack-sm);
    padding-inline: var(--_inset-lg);
    border: 0;
    border-radius: var(--_radius-md);
    background: var(--_text);
    color: var(--_surface);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--_dur-fast) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  /* Placeholder state: a CTA label whose destination does not exist yet renders as PLAIN TEXT,
     deliberately WITHOUT the button box — a button-shaped element that cannot be pressed is the
     dead-affordance the all-or-none clickability rule bars. Label rung, quiet. */
  .ez-inf__cta-static {
    margin: var(--_stack-sm) 0 0;
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
    font-weight: var(--_w-medium);
    opacity: 0.85;
  }
  .ez-inf--align-center .ez-inf__cta { align-self: center; }
  .ez-inf--align-end .ez-inf__cta { align-self: flex-end; }
  .ez-inf--text-overlay .ez-inf__cta { background: var(--_on-media); color: #111111; }
  /* the CTA commits an action -> it DOES press (unlike the nav) */
  .ez-inf__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-inf__cta:hover { opacity: 0.9; } }

  /* ---- Controls: dots only (a curated ~3-slide loop has no "end" -> no progress bar) ---- */
  .ez-inf__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-inf__dots { display: flex; align-items: center; gap: var(--_stack-sm); }
  /* Nav chrome (dot button + overlay arrow + hover) -> shared ez-carousel-styles. The infinite
     arrow is NEVER disabled (no [disabled] rule there) and its dot/arrow transitions are bg-only. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    .ez-inf-b {
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-inf__title { font-size: var(--type-h1-size, 2.5rem); }
    .ez-inf__slide { aspect-ratio: var(--_aspect-selected-d, var(--aspect-tile, 4 / 3)); }
    .ez-inf--loop .ez-inf__slide {
      width: calc((100% - (2 * var(--ez-peek, 40px)) - (var(--_gutter) * (var(--ez-spv-d, 1) - 1))) / var(--ez-spv-d, 1));
    }
    .ez-inf__controls { display: none; }
  }

  /* ---- reduced motion --------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-inf__track { scroll-behavior: auto; }
    .ez-inf-b * { transition-duration: 0.01ms !important; }
    .ez-inf__cta:active { transform: none; }
  }
/* END_BLOCK:ez-infinite-banner */

/* START_BLOCK:ez-lens-tiles (INDEX:180) */
/* Design-system tokens -> private aliases with provisional fallbacks (theme-foundation §A1).
     Components below read only the --_ aliases.

     ⚠️ THE SELECTOR LIST IS LOAD-BEARING — bug-159, and the same class as bug-145. This section
     renders TWO SIBLING SUBTREES: `.ez-lens-b` (the shell) and `<ez-lens-popup class="ez-lens-pop">`,
     which is deliberately HOISTED OUT of the shell so a position:fixed overlay escapes the shell's
     `overflow-x: clip`. A custom property declared on `.ez-lens-b` alone therefore does NOT reach the
     popup — every `var(--_*)` in the popup rules becomes invalid-at-computed-value-time and the
     WHOLE declaration drops, which renders as a completely unstyled sheet (no background, no
     radius, no padding) even though the rules loaded and literal-valued props applied.
     So the alias block declares on BOTH HOSTS in ONE rule — one source, no second copy to drift.
     Only the LAYOUT half below is shell-only. If you ever add a third subtree, add it here too. */
  .ez-lens-b,
  .ez-lens-pop {
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: var(--ez-shell-pad-x, 16px);
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-md: var(--space-stack-md, 12px);
    --_stack-lg: var(--space-stack-lg, 16px);
    --_inset: var(--space-inset-md, 16px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_container: var(--size-container, 1280px);
    --_control: var(--size-control-md, 48px);
    --_touch: var(--touch-target-min, 44px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-lg: var(--radius-lg, 12px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-regular: var(--type-weight-regular, 400);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_fill: var(--surface-fill, #f9f8f6);
    /* peek per surface (component-contracts C2 application guidance): lenses ~12px sliver */
    --_peek: var(--space-stack-md, 12px);
  }

  /* SHELL-ONLY layout. Deliberately NOT on .ez-lens-pop: the popup host must never take the
     section's padding/background, and `overflow-x: clip` on it would clip its own fixed
     children — the exact thing the hoist exists to prevent. */
  .ez-lens-b {
    /* NO padding-block here: the ez-section shell owns the section rhythm (its doc comment,
       "nested blocks carry NO outer spacing"). This line survived the section->block conversion
       and doubled the rhythm to 64/64 on every host — caught on the home migration 2026-07-29. */
    background: var(--_surface);
    color: var(--_text);
    /* the tile row scrolls INTERNALLY; clip never widens the page and is sticky-safe */
    overflow-x: clip;
  }

  .ez-lens__inner {
    max-width: var(--_container);
    margin-inline: auto;
    padding-inline: var(--_pad-x);
  }

  .ez-lens__head { margin-block-end: var(--_heading-gap); }
  .ez-lens__eyebrow {
    margin: 0 0 var(--_stack-xs);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .ez-lens__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
    /* the shipped heading is 8 words and wraps to two lines on every phone width; a greedy wrap
       leaves line 1 at ~97% of the content box and "are for." alone on line 2. Balance evens the
       two lines. It cannot add a line, and the S8->S10 crest has ~300px of spare either way.
       Same treatment several ez-shell siblings already carry on their headings. */
    text-wrap: balance;
  }

  /* ---- Tile row: mobile = native scroll-snap with edge-peek ------------- */
  .ez-lens__row {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ez-lens__row::-webkit-scrollbar { display: none; }

  .ez-lens__cell {
    flex: 0 0 auto;
    list-style: none;
    scroll-snap-align: start;
    /* 2-up with a sliver of the third — the "more, swipe" cue */
    width: calc((100% - var(--_gutter) - var(--_peek)) / 2);
  }

  /* ---- The tile (a BUTTON: it opens an overlay in place, it does not navigate) ---- */
  .ez-lens__tile {
    position: relative;
    display: block;
    width: 100%;
    /* min-height keeps the whole-tile target well over the 44px touch floor at any width */
    min-block-size: var(--_touch);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-lens__tile:active { transform: scale(var(--_press)); }
  .ez-lens__tile:focus-visible {
    outline: var(--stroke-heavy, 2px) solid var(--_text);
    outline-offset: 2px;
  }

  .ez-lens__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ez-lens-tile-aspect-m, var(--aspect-lifestyle, 4 / 5));
    overflow: hidden;
    border-radius: var(--_radius-md);
    background: var(--_fill);
    border: var(--_hairline) solid var(--_line);
  }
  .ez-lens__media picture { display: block; width: 100%; height: 100%; }
  .ez-lens__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* placeholder: a plain neutral field — no illustration, no red, nothing to read */
  .ez-lens__placeholder { display: block; width: 100%; height: 100%; background: var(--_fill); }

  /* the FACE — name + one benefit line, beneath the image, one grammar across all five */
  .ez-lens__face {
    display: block;
    margin-block-start: var(--_stack-sm);
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
  }
  .ez-lens__name { font-weight: var(--_w-semibold); }
  .ez-lens__sep { margin-inline: var(--_stack-xs); opacity: 0.5; }
  .ez-lens__benefit { font-weight: var(--_w-regular); opacity: 0.75; }

  /* ================= THE POPUP (read-only editorial; ZERO input controls) ============= */
  ez-lens-popup { display: block; }
  ez-lens-popup[hidden] { display: none; }

  /* body scroll-lock while the popup is open (overlay non-negotiable 4). position:fixed is the
     only lock that holds on iOS Safari; ez-lens-popup.js preserves + restores the scroll offset. */
  body.ez-lens-locked {
    position: fixed;
    inline-size: 100%;
    overflow: hidden;
  }

  .ez-lens-pop__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 1000);
    background: rgb(0 0 0 / 0.55);
  }
  .ez-lens-pop__panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }
  .ez-lens-pop__panel[hidden] { display: none; }

  .ez-lens-pop__sheet {
    position: relative;
    width: 100%;
    max-width: 640px;
    /* bounded so the sheet never exceeds the viewport; the body scrolls INSIDE it */
    max-block-size: 92svh;
    display: flex;
    flex-direction: column;
    background: var(--_surface);
    color: var(--_text);
    border-start-start-radius: var(--_radius-lg);
    border-start-end-radius: var(--_radius-lg);
    box-shadow: var(--elevation-3, 0 12px 32px rgb(26 26 26 / 0.14));
    overflow: hidden;
  }

  .ez-lens-pop__close {
    position: absolute;
    inset-block-start: var(--_stack-sm);
    inset-inline-end: var(--_stack-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_touch);
    block-size: var(--_touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--_surface);
    color: var(--_text);
    cursor: pointer;
  }
  .ez-lens-pop__close svg { inline-size: var(--size-icon-md, 24px); block-size: var(--size-icon-md, 24px); }
  .ez-lens-pop__close:focus-visible { outline: var(--stroke-heavy, 2px) solid var(--_text); outline-offset: 2px; }

  /* the ONE scrolling region — a bounded sheet with an internal scroll never strands content
     above the scroll origin (the centred-flex-overflow trap) */
  .ez-lens-pop__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  .ez-lens-pop__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ez-lens-popup-aspect-m, var(--aspect-video, 16 / 9));
    overflow: hidden;
    background: var(--_fill);
  }
  .ez-lens-pop__media picture { display: block; width: 100%; height: 100%; }
  .ez-lens-pop__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ez-lens-pop__placeholder { width: 100%; height: 100%; background: var(--_fill); }

  .ez-lens-pop__body { padding: var(--_inset-lg) var(--_inset) var(--_inset-lg); }

  .ez-lens-pop__title {
    margin: 0 0 var(--_stack-md);
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--_w-semibold);
  }
  .ez-lens-pop__taste {
    margin: 0 0 var(--_inset-lg);
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    max-width: var(--size-measure, 65ch);
  }
  .ez-lens-pop__taste > :first-child { margin-block-start: 0; }
  .ez-lens-pop__taste > :last-child { margin-block-end: 0; }

  .ez-lens-pop__facts {
    margin: 0 0 var(--_inset-lg);
    padding: var(--_inset);
    border: var(--_hairline) solid var(--_line);
    border-radius: var(--_radius-md);
    background: var(--_fill);
  }
  .ez-lens-pop__fact + .ez-lens-pop__fact { margin-block-start: var(--_stack-md); }
  .ez-lens-pop__fact dt {
    margin: 0 0 2px; /* label micro-inset (allowlisted) */
    font-size: var(--type-caption-size, 0.75rem);
    line-height: var(--type-caption-line, 1.4);
    font-weight: var(--_w-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--_muted);
  }
  .ez-lens-pop__fact dd {
    margin: 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
  }

  .ez-lens-pop__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_stack-md); }

  /* THE ONE BRAND-RED IN THE SECTION. Nothing else in .ez-lens-b may carry the accent. */
  .ez-lens-pop__shop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--_control);
    padding-inline: var(--_inset-lg);
    border-radius: var(--_radius-md);
    background: var(--color-accent, #BF1C1D);
    color: #ffffff;
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: transform var(--motion-duration-fast, 150ms) var(--_ease), opacity var(--_dur-base) var(--_ease);
  }
  .ez-lens-pop__shop:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-lens-pop__shop:hover { opacity: 0.92; } }
  .ez-lens-pop__shop:focus-visible { outline: var(--stroke-heavy, 2px) solid var(--_text); outline-offset: 2px; }

  /* the deferred second button — present, deliberately DIMMED, does nothing until its page
     is ready. Never rendered as an anchor with no destination. */
  .ez-lens-pop__learn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--_control);
    padding-inline: var(--_inset-lg);
    border: var(--_hairline) solid var(--_line);
    border-radius: var(--_radius-md);
    background: none;
    color: var(--_text);
    font: inherit;
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-medium);
    text-decoration: none;
  }
  .ez-lens-pop__learn--off {
    opacity: var(--opacity-disabled, 0.45);
    cursor: default;
    pointer-events: none;
  }

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------ */
  @media screen and (min-width: 750px) {
    /* both hosts again — a responsive alias flip declared on the shell alone would re-open
       bug-159 the moment a popup rule consumes one of these. */
    .ez-lens-b,
    .ez-lens-pop {
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    .ez-lens__heading { font-size: var(--type-h2-size, 1.75rem); }
    .ez-lens__media { aspect-ratio: var(--ez-lens-tile-aspect-d, var(--aspect-lifestyle, 4 / 5)); }
    .ez-lens-pop__media { aspect-ratio: var(--ez-lens-popup-aspect-d, var(--aspect-video, 16 / 9)); }
    /* five tiles as a static row — nothing to operate on a pointer */
    .ez-lens__row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      overflow: visible;
      scroll-snap-type: none;
    }
    .ez-lens__cell { width: auto; scroll-snap-align: none; }

    /* the sheet becomes a centred dialog rather than a bottom sheet */
    .ez-lens-pop__panel { align-items: center; padding: var(--_inset-lg); }
    .ez-lens-pop__sheet {
      max-block-size: 86svh;
      border-radius: var(--_radius-lg);
    }
    .ez-lens-pop__body { padding: var(--_inset-lg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-lens__tile:active, .ez-lens-pop__shop:active { transform: none; }
    .ez-lens-b * { transition-duration: 0.01ms !important; }
  }
/* END_BLOCK:ez-lens-tiles */

/* START_BLOCK:ez-media-text (INDEX:181) */
/* Design-system tokens -> block-scoped private aliases (fallbacks equal ez-tokens :root). */
  .ez-mt {
    --_gutter: var(--space-gutter, 12px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_radius-surface: var(--radius-surface, 12px);
    --_fill: var(--surface-fill, #f9f8f6);
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    /* the desktop media share; overridden per rung below */
    --_media-share: 50%;

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--_inset-lg);
    align-items: start;
  }

  /* ---- Media ------------------------------------------------------------ */
  .ez-mt__media {
    /* mobile order is FIXED: media over text, always (the C5 re-lay, not a squish) */
    order: 0;
    min-width: 0;
    border-radius: var(--_radius-surface);
    overflow: hidden;
  }
  .ez-mt__img {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Shape rungs. "natural" keeps the asset's own proportions (the honest choice for a
     cut-out product PNG, which a fixed crop would slice). */
  .ez-mt--ratio-editorial .ez-mt__img,
  .ez-mt--ratio-video .ez-mt__img,
  .ez-mt--ratio-lifestyle .ez-mt__img,
  .ez-mt--ratio-square .ez-mt__img { height: 100%; object-fit: cover; }
  .ez-mt--ratio-editorial .ez-mt__media { aspect-ratio: var(--aspect-editorial, 3 / 2); }
  .ez-mt--ratio-video .ez-mt__media { aspect-ratio: var(--aspect-video, 16 / 9); }
  .ez-mt--ratio-lifestyle .ez-mt__media { aspect-ratio: var(--aspect-lifestyle, 4 / 5); }
  .ez-mt--ratio-square .ez-mt__media { aspect-ratio: var(--aspect-product, 1 / 1); }

  .ez-mt__placeholder {
    display: block;
    aspect-ratio: var(--aspect-editorial, 3 / 2);
    background: var(--_fill);
    color: var(--_muted);
  }
  .ez-mt__placeholder-svg { width: 100%; height: 100%; display: block; opacity: 0.35; }

  /* ---- Text column ------------------------------------------------------ */
  /* The nested global elements stack on ONE rhythm here, so a merchant cannot produce a
     ragged column by mixing heading / prose / action blocks in a different order. */
  .ez-mt__text {
    order: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--_inset-lg);
  }
  /* Inside this column the heading zone's own outer gap is the column gap, not its
     section-level margin (which is scoped to a direct child of the shell). */
  .ez-mt__text > .ez-head { margin-block-end: 0; }

  /* ---- 750 seam: the editorial split (design_system.md §2.3) ------------- */
  @media screen and (min-width: 750px) {
    .ez-mt {
      --_gutter: var(--space-gutter, 16px);
      grid-template-columns: var(--_media-share) minmax(0, 1fr);
      gap: var(--_inset-lg);
    }
    .ez-mt--share-40 { --_media-share: 40%; }
    .ez-mt--share-50 { --_media-share: 50%; }
    .ez-mt--share-60 { --_media-share: 60%; }

    /* media on the END side. The DOM order never changes (media first, then text), so the
       reading order a screen reader gets is identical on both sides and on both viewports;
       only the visual placement flips, via `order` inside this desktop query. */
    .ez-mt--media-end { grid-template-columns: minmax(0, 1fr) var(--_media-share); }
    .ez-mt--media-end .ez-mt__media { order: 1; }
    .ez-mt--media-end .ez-mt__text { order: 0; }

    .ez-mt--v-center { align-items: center; }
    .ez-mt--v-start { align-items: start; }
  }
/* END_BLOCK:ez-media-text */

/* START_BLOCK:ez-offer-pdp (INDEX:182) */
.ez-offer-pdp {
    --_price: var(--offer-price, #BF1C1D);
    --_text: var(--offer-text, #1a1a1a);
    --_muted: var(--offer-muted, #555555);
    --_met: var(--offer-met, #10804A);
    --_rule: var(--offer-rule, rgb(26 26 26 / 0.08));
    display: grid;
    inline-size: 100%;
    color: var(--_text);
  }
  .ez-offer-pdp[hidden] { display: none; }
  :where(.ez-offer-pdp) p { margin: 0; }
  .ez-offer-pdp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8, 8px);
  }
  .ez-offer-pdp__ends {
    font-size: var(--type-caption-size, 0.75rem);
    color: var(--_muted);
    white-space: nowrap;
  }
  .ez-offer-pdp__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    margin-block-start: 10px;
    font-variant-numeric: tabular-nums;
  }
  .ez-offer-pdp__net {
    font-size: 28px;
    line-height: 1.05;
    font-weight: var(--type-weight-bold, 700);
    color: var(--_price);
  }
  .ez-offer-pdp__was {
    font-size: 16px;
    font-weight: var(--type-weight-medium, 500);
    color: var(--_muted);
    text-decoration-thickness: 1.5px;
  }
  .ez-offer-pdp__save {
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--type-weight-semibold, 600);
  }
  .ez-offer-pdp--soldout .ez-offer-pdp__price { opacity: var(--opacity-disabled, 0.45); }
  .ez-offer-pdp--soldout .ez-offer-pdp__net { color: var(--_muted); }
  .ez-offer-pdp--soldout .ez-offer-pdp__was { text-decoration: none; }
  .ez-offer-pdp__auto {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-block-start: 6px;
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--type-weight-medium, 500);
  }
  .ez-offer-pdp__check { flex: none; color: var(--_met); }
  .ez-offer-pdp__duo {
    display: flex;
    align-items: center;
    gap: var(--space-8, 8px);
    margin-block-start: 10px;
    padding-block-start: 10px;
    border-block-start: 1px solid var(--_rule);
  }
  .ez-offer-pdp__x2 {
    display: inline-grid;
    place-items: center;
    flex: none;
    min-inline-size: 28px;
    block-size: 22px;
    border: 1.5px solid var(--_text);
    border-radius: 4px;
    font-size: var(--type-caption-size, 0.75rem);
    font-weight: var(--type-weight-bold, 700);
  }
  .ez-offer-pdp__duo-text { display: grid; min-inline-size: 0; }
  .ez-offer-pdp__duo-main {
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: 1.3;
    font-weight: var(--type-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
  }
  .ez-offer-pdp__duo-sub {
    font-size: var(--type-caption-size, 0.75rem);
    font-weight: var(--type-weight-medium, 500);
    color: var(--_muted);
  }
  /* While the card shows, it IS the price: hide the theme price in the same group, and set the
     footer line ("Exclusive Price Available Only Online") in muted caption. No :has -> the theme
     price simply shows above; nothing breaks. */
  .group-block-content:has(> .ez-offer-pdp:not([hidden])) > product-price { display: none; }
  .group-block-content > .ez-offer-pdp:not([hidden]) ~ .text-block {
    margin-block-start: var(--space-8, 8px);
  }
  .group-block-content > .ez-offer-pdp:not([hidden]) ~ .text-block,
  .group-block-content > .ez-offer-pdp:not([hidden]) ~ .text-block > * {
    color: var(--offer-muted, #555555);
    font-size: var(--type-caption-size, 0.75rem);
    font-weight: var(--type-weight-regular, 400);
  }
  @media (min-width: 750px) {
    .ez-offer-pdp__net { font-size: 32px; }
  }
/* END_BLOCK:ez-offer-pdp */

/* START_BLOCK:ez-process-steps (INDEX:183) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-steps-b {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_container: var(--size-container, 1280px);
    --_measure: var(--size-measure, 65ch);
    --_circle: 48px;
    --_icon: var(--size-icon-lg, 28px);
    --_conn: var(--stroke-regular, 1.5px);
    --_hairline: var(--stroke-hairline, 1px);
    --_row-gap: var(--space-32, 32px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-regular: var(--type-weight-regular, 400);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
  }
  /* Shell (outer rhythm + 1280 inner) + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Track: mobile = vertical timeline -------------------------------- */
  .ez-steps__track {
    counter-reset: ez-step;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--_row-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- Step (rendered by ez-step.liquid) -------------------------------- */
  .ez-step {
    counter-increment: ez-step;
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: var(--_circle) 1fr;
    column-gap: var(--_gutter);
    align-items: start;
  }

  /* Connector: mobile = vertical line from this circle down to the next */
  .ez-step:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--_circle) / 2);
    inset-block-start: var(--_circle);
    inset-block-end: calc(-1 * var(--_row-gap));
    inline-size: var(--_conn);
    background: var(--_line);
    transform: translateX(-50%);
    z-index: 0;
  }

  .ez-step__marker {
    position: relative;
    z-index: 1;
    inline-size: var(--_circle);
    block-size: var(--_circle);
    display: grid;
    place-items: center;
    border: var(--_conn) solid var(--_line);
    border-radius: var(--radius-full, 50%);
    background: var(--_surface);
    color: var(--_text);
    overflow: hidden;
  }
  .ez-step__marker--auto::before {
    content: counter(ez-step);
    font-size: var(--type-h3-size, 1.125rem);
    line-height: 1;
    font-weight: var(--_w-semibold);
    font-variant-numeric: tabular-nums;
  }
  .ez-step__num {
    font-size: var(--type-h3-size, 1.125rem);
    line-height: 1;
    font-weight: var(--_w-semibold);
    font-variant-numeric: tabular-nums;
  }
  .ez-step__icon {
    inline-size: var(--_icon);
    block-size: var(--_icon);
    object-fit: contain;
    display: block;
  }

  .ez-step__body {
    padding-block-start: var(--_stack-xs);
  }
  .ez-step__title {
    margin: 0;
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--_w-semibold);
    text-wrap: balance;
  }
  .ez-step__text {
    margin: var(--_stack-xs) 0 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-regular);
    color: var(--_muted);
    max-width: var(--_measure);
  }

  /* ---- 750 seam: horizontal row (design_system.md §2.3) ----------------- */
  @media screen and (min-width: 750px) {
    .ez-steps-b {
      --_section-y: var(--space-section-y, 32px);
      --_pad-x: 64px;
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
      --_circle: 72px;
    }

    .ez-steps__track {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--_gutter);
    }
    .ez-step {
      flex: 1 1 0;
      min-inline-size: 0;
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      row-gap: var(--_stack-sm);
    }
    /* Connector: desktop = horizontal line between circle centers */
    .ez-step:not(:last-child)::before {
      inset-inline-start: 50%;
      inset-inline-end: auto;
      inset-block-start: calc(var(--_circle) / 2);
      inset-block-end: auto;
      inline-size: 100%;
      block-size: var(--_conn);
      transform: translateY(-50%);
    }
    .ez-step__body { padding-block-start: 0; max-inline-size: 24ch; }
  }
/* END_BLOCK:ez-process-steps */

/* START_BLOCK:ez-product-buttons (INDEX:184) */
/* design-system tokens -> section-scoped aliases (theme-foundation.md §A1) */
  .ez-pb {
    --_radius-md: var(--radius-md, 8px);
    --_control: var(--size-control-md, 48px);
    --_gap: var(--space-stack-md, 12px);
    --_inset: var(--space-inset-lg, 24px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    /* CTA colour = the theme's configured button scheme token (no bespoke hex) */
    --_pri-bg: var(--color-primary-button-background, var(--color-foreground));
    --_pri-text: var(--color-primary-button-text, var(--color-background));
    --_pri-bg-hover: var(--color-primary-button-hover-background, var(--color-primary-hover, var(--color-foreground)));
    --_pri-text-hover: var(--color-primary-button-hover-text, var(--color-background));
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));

    display: block;
    width: 100%;
  }
  .ez-pb__row { display: flex; gap: var(--_gap); width: 100%; }

  .ez-pb__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-stack-sm, 8px);
    min-height: var(--_control);
    padding-inline: var(--_inset);
    border-radius: var(--_radius-md);
    font-size: var(--type-body-size, 1rem);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: var(--_hairline) solid transparent;
    transition: background-color var(--_dur-base) var(--_ease), color var(--_dur-base) var(--_ease), border-color var(--_dur-base) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ez-pb__btn:active { transform: scale(var(--_press)); }

  .ez-pb__btn--primary { background: var(--_pri-bg); color: var(--_pri-text); border-color: var(--_pri-bg); }
  .ez-pb__btn--secondary { background: var(--_surface); color: var(--_text); border-color: var(--_text); }
  @media (hover: hover) {
    .ez-pb__btn--primary:hover { background: var(--_pri-bg-hover); color: var(--_pri-text-hover); border-color: var(--_pri-bg-hover); }
    .ez-pb__btn--secondary:hover { background: var(--_text); color: var(--_surface); }
  }

  .ez-pb__btn--soldout {
    width: 100%;
    flex: 1;
    background: var(--_line);
    color: var(--_surface);
    border-color: var(--_line);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
  }

  /* ---- sold-out COLLAPSE choreography (design_system.md §9 DELTA R2) ----
     dual layout collapses to ONE full-width CTA; the data-atc survivor keeps a
     transparent border to reconstruct row height without a magic number. State
     classes are applied by ez-pdp-latency.liquid across original + sticky clone. */
  .ez-pb__row { transition: gap 250ms var(--_ease); }
  .ez-pb__row.ez-collapse { gap: 0; }
  .ez-pb__btn--dual-left { overflow: hidden; white-space: nowrap; transition: opacity 120ms var(--_ease) 130ms, flex-grow 250ms var(--_ease), flex-basis 250ms var(--_ease), padding 250ms var(--_ease), visibility 0s linear 0s; }
  .ez-pb__btn--dual-left.ez-soldout { flex-grow: 0; flex-basis: 0px; min-width: 0; padding-inline: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms var(--_ease), flex-grow 250ms var(--_ease), flex-basis 250ms var(--_ease), padding 250ms var(--_ease), visibility 0s linear 250ms; }
  a.ez-pb__btn--dual-right.ez-soldout { border: var(--_hairline) solid transparent; }

  /* ---- spinner (show/hide + spin live here; latency snippet adds layout) ---- */
  .buy-now-btn { position: relative; }
  .buy-now-btn .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ez-pb-spin 0.7s linear infinite;
    order: -1;
    margin-inline-end: 8px;
    flex: 0 0 auto;
  }
  .buy-now-btn.loading { cursor: not-allowed; pointer-events: none; white-space: nowrap; }
  .buy-now-btn.loading .spinner { display: block; opacity: 0.7; }
  @keyframes ez-pb-spin { to { transform: rotate(360deg); } }

  @media (prefers-reduced-motion: reduce) {
    .ez-pb__row, .ez-pb__btn, .ez-pb__btn--dual-left, .ez-pb__btn--dual-left.ez-soldout, a.ez-pb__btn--dual-right { transition: none; }
    .ez-pb__btn:active { transform: none; }
    .buy-now-btn .spinner { animation: none; }
  }
/* END_BLOCK:ez-product-buttons */

/* START_BLOCK:ez-product-description (INDEX:185) */
/* design-system tokens -> section-scoped aliases (theme-foundation.md §A1) */
  .ez-desc {
    --_radius-md: var(--radius-md, 8px);
    --_measure: var(--size-measure, 65ch);
    --_collapsed: 7.5em; /* ~5 lines of preview before the mobile read-more */
    --_stack-sm: var(--space-stack-sm, 8px);
    --_inset: var(--space-inset-md, 16px);
    --_control: var(--size-control-sm, 40px);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-exp: var(--motion-expressive, 400ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_bg: var(--color-background);
    --_line: var(--color-line, var(--color-border));

    display: block;
  }
  .ez-desc__content { position: relative; overflow: hidden; }
  .ez-desc__prose {
    max-width: var(--_measure);
    margin: 0;
    color: var(--_text);
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
  }
  .ez-desc__prose > :first-child { margin-block-start: 0; }
  .ez-desc__prose > :last-child { margin-block-end: 0; }

  /* white content-fade over the page background — shown only while collapsed (mobile) */
  .ez-desc__fade {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 3.5em;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0), var(--_bg));
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--_dur-exp) var(--_ease);
  }
  .ez-desc__content[data-collapsed="true"] .ez-desc__fade { opacity: 1; }

  /* toggle — quiet control, mobile-only (desktop shows the full body) */
  .ez-desc__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--_stack-sm);
    width: 100%;
    min-height: var(--_control);
    margin-block-start: var(--_stack-sm);
    padding-inline: var(--_inset);
    border: var(--_hairline) solid var(--_line);
    border-radius: var(--_radius-md);
    background: transparent;
    color: var(--_text);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--_w-medium);
    cursor: pointer;
    transition: transform var(--_dur-fast) var(--_ease);
  }
  .ez-desc__toggle:active { transform: scale(var(--_press)); }
  .ez-desc__chevron { width: 18px; height: 18px; transition: transform var(--_dur-exp) var(--_ease); }
  .ez-desc__toggle[aria-expanded="true"] .ez-desc__chevron { transform: rotate(180deg); }
  .ez-desc__toggle-label[hidden] { display: none; }

  @media screen and (max-width: 749px) {
    .ez-desc__toggle { display: inline-flex; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-desc__fade, .ez-desc__chevron, .ez-desc__toggle { transition: none; }
    .ez-desc__toggle:active { transform: none; }
  }
/* END_BLOCK:ez-product-description */

/* START_BLOCK:ez-product-rail (INDEX:186) */
/* ---------------------------------------------------------------------------
     Design-system tokens resolved ONCE into section-scoped private aliases.
     Each reads the canonical N3 token (design_system.md) and falls back to the
     provisional N2-overridable value (structure/motion) or the live theme scheme
     token (bespoke colour roles) until N4 lands the global token layer. The
     global definition WINS over the fallback, so N2's repoint flows through with
     zero edits here. Components below read only the --_ aliases. (theme-foundation §A1)
     --------------------------------------------------------------------------- */
  .ez-pr {
    /* [v1.3] shell VALUES — the 1280-box lock (design_system.md §6 S1): section box = 1280px
       (1152 content + 64 desktop sides), mobile 16 sides, 32/32 vertical BOTH breakpoints, square. */
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    --_inset: var(--space-inset-md, 16px);
    --_stack-xs: var(--space-stack-xs, 4px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-lg: var(--space-stack-lg, 16px);
    --_control: var(--size-control-md, 48px);
    --_radius-md: var(--radius-md, 8px);
    --_radius-sm: var(--radius-sm, 4px);
    --_aspect-product: var(--aspect-product, 1 / 1);
    --_hairline: var(--stroke-hairline, 1px);
    --_press: var(--motion-press-scale, 0.98);
    --_dur-fast: var(--motion-duration-fast, 150ms);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_w-bold: var(--type-weight-bold, 700);
    /* bespoke colour roles -> live theme scheme token fallback */
    --_text: var(--color-text, var(--color-foreground));
    --_surface: var(--color-surface, var(--color-background));
    --_line: var(--color-line, var(--color-border));
    --_lift: var(--surface-lift, #f4efe4);
    /* [v1.5] site-wide card resting look — 12px radius + a 1px LIGHT ink-alpha border + ONE faint resting
       shadow, from the ONE shared --ez-card-* token set (base.css :root; single source of truth, consumed
       by BOTH this rail card and the stock .product-card). A whole-card hover ZOOM (matches the stock card)
       is the desktop cue. Supersedes the v1.4 lift + 2-level shadow AND the interim flat-white card.
       design_system.md v1.5 ledger #1/#2/#3. GLOBAL --ez-card-* tokens live in base.css; the --_ aliases
       here are the structural set. */
    /* brand accent red (pulled from the live theme, == the save-badge red) — used ONLY for the
       animated view-all underline (v1.3 ledger #13: accent-on-a-link-underline is allowed). */
    /* L1 badge family fills pulled from the live theme (ai product block ai_gen_block_8eb9c79 +
       the default collection-page card _product-card-gallery): #BF1C1D save-red (== the brand
       accent -> EXCLUDED, never the accent), #7C3AED top-deal purple, #059669 best-value green.
       The factual badge fills from the family (no border, white text); sold-out stays neutral. */
    --_badge-fill: var(--badge-new-fill, #059669);
    --_badge-soldout: var(--badge-soldout-fill, #f7f7f7);
  }
  /* Shell outer (rhythm + background + [B8] overflow-clip) + the 1280 inner + the S4 head zone
     (eyebrow / heading / space-between head-row) -> shared ez-shell; the overlay-arrow / mobile-dot
     / scroll-progress chrome -> shared ez-carousel-styles. This section owns only the transport
     track + the C2 card + grid mode below. */

  /* ---- Native scroll-snap track (the transport) ------------------------- */
  ez-product-rail { display: block; }
  /* [v1.3] positioned viewport so the desktop arrows overlay ON the rail */
  .ez-pr__viewport { position: relative; }

  .ez-pr__track {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    /* [v1.5] vertical room so neither the swatch selection ring (2px outline + 2px offset) NOR the card's
       faint resting shadow (0 6px 14px, ~20px bottom reach) is clipped by this scroll track (overflow-x:auto
       forbids overflow-y:visible, so we pad). 24px covers the shadow reach + the ring. */
    padding-block: var(--space-24, 24px); /* shadow + ring headroom (exact-rung pick) */
    padding-inline: 0;
    list-style: none;
    overflow-y: hidden;
    /* [v1.3] proximity (not mandatory) so the direction-aware arrow targets hold — mandatory would
       re-snap PREV's right-aligned target back to a start edge. Swipe still snaps on release. The
       snap + smooth stay SECTION-owned (the snap-neutral engine base never writes them). */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* [carousel-peek] direction-aware BIDIRECTIONAL edge-peek: inset each card's snap point by the
       edge-peek so cards 2..N reveal a sliver of the PREVIOUS card on the left (the "you can scroll
       back" cue), while the card-width math (below) keeps the NEXT-card sliver on the right. Card 1
       stays flush — its -peek snap clamps to 0 at scrollLeft 0 — so at the START only the forward peek
       shows, in the MIDDLE both show, at the END only the backward peek shows. Desktop resets to 0. */
    scroll-padding-inline-start: var(--ez-peek, 24px);
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> shared ez-carousel-styles base. */
  }

  .ez-pr__track > .ez-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* [carousel-peek] mobile 2-up leaving room for a peek sliver on BOTH sides (backward + forward),
       so the direction-aware bidirectional peek (scroll-padding above) always reveals the next card in
       whichever direction is still scrollable. */
    width: calc((100% - var(--_gutter) - (var(--ez-peek, 24px) * 2)) / 2);
  }

  /* ---- C2 product card -------------------------------------------------- */
  /* [E2 2026-07-21] These card rules read GLOBAL design-system tokens DIRECTLY (with a
     provisional fallback), NOT the rail-scoped --_ aliases above, so the card is
     surface-independent: it renders correctly on ANY card-bearing surface off-rail
     (search / PDP recs / predictive popup), not only inside .ez-pr. Completes
     the bug-145 in-place repoint (which fixed only the swatch ring) for the whole card.
     The rules stay in this globally-bundled {% stylesheet %} so every surface gets them. */
  /* [v1.5] site-wide card resting look — 12px radius + a 1px LIGHT ink-alpha border + ONE faint resting
     shadow, from the ONE shared --ez-card-* token set (base.css :root). Whole-card hover ZOOM below
     (matches the stock card). design_system.md v1.5 ledger #1/#3; supersedes the v1.4 lift + 2-level
     shadow AND the interim flat-white card. */
  .ez-card {
    list-style: none;
    border: var(--ez-card-border, 1px solid rgb(0 0 0 / 0.10));
    border-radius: var(--ez-card-radius, 12px);
    box-shadow: var(--ez-card-shadow, 0 6px 14px rgb(0 0 0 / 0.06));
    padding: var(--space-stack-sm, 8px);
    /* stacking root for the dead-zone fix: the stretched PDP ::after (z-1), the media (z-2, kept above so
       its hover angle-swap survives) and the swatch row (z-3, above the link so a swatch tap still swaps
       colour) all resolve INSIDE the card; isolate keeps them from leaking out to the rail arrows. */
    position: relative;
    isolation: isolate;
    /* [v1.5] whole-card hover-zoom transition (matches the stock card's --hover-transition-*); reduced-motion kills it. */
    transition: transform var(--hover-transition-duration, 0.25s) var(--hover-transition-timing, ease-out);
  }
  .ez-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  /* [v1.6] dead-zone fix (bug-109): stretch the PDP link across the WHOLE card as an ::after overlay so
     every pixel that isn't an interactive swatch — including the swatch-row GAPS that used to be dead —
     navigates to the PDP. Sits at z-1 (UNDER the media at z-2, so the media hover angle-swap is never
     stolen by the overlay); the swatch buttons are raised above it (below). This replaces the v1.5
     :active press-scale, removed per the owner-final "no press on the card". */
  .ez-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .ez-card__media {
    position: relative;
    /* z-2: above the stretched-link ::after (z-1) so the media is directly clickable AND its hover
       angle-swap still fires (an overlay stealing the pointer would kill .ez-card__media:hover). */
    z-index: 2;
    aspect-ratio: var(--aspect-product, 1 / 1);
    overflow: hidden;
    /* [item 2] image-to-edge: the media breaks OUT of the card's 8px padding on the TOP + SIDES so the
       product image sits flush to the card top + sides; the body/price/swatch layer below keeps the inner
       padding. Radius on the TOP TWO corners only (inner radius = card radius - the 1px border) so the image
       corners align with the card's rounded top; overflow:hidden clips the image to it. */
    margin-block-start: calc(-1 * var(--space-stack-sm, 8px));
    margin-inline: calc(-1 * var(--space-stack-sm, 8px));
    border-radius: calc(var(--ez-card-radius, 12px) - var(--stroke-hairline, 1px)) calc(var(--ez-card-radius, 12px) - var(--stroke-hairline, 1px)) 0 0;
    /* transparent = the white card shows through; the white product image sits flat inside the card. */
    background: transparent;
  }
  .ez-card__img {
    width: 100%;
    height: 100%;
    /* [owner delta] fill the 1:1 media box edge-to-edge ("1:1 all in the container") — cover, not contain.
       The box is already square (.ez-card__media aspect-ratio: --_aspect-product = 1/1); cover makes the
       product image fill it with no letterbox gaps. The product-on-white normalized angles are ~square,
       so nothing meaningful crops off the frame. */
    object-fit: cover;
  }
  .ez-card__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  .ez-card__placeholder { width: 100%; height: 100%; }

  @media (hover: hover) {
    /* [v1.5] whole-card ZOOM on hover (matches the stock collection card's card-hover-effect-scale),
       replacing the killed translateY lift. Calm, zero-spring ease-out, transform-only. */
    .ez-card:hover { transform: scale(var(--hover-scale-amount, 1.03)); }
    /* the 2nd-angle ANGLE SWAP stays, scoped to the media so hovering the title / swatch row never flips
       the image. A single-image SKU just zooms (no swap, no tone-shift — a wash on white re-muddied it). */
    .ez-card__media:hover .ez-card__img--hover { opacity: 1; }
  }

  /* L1 [v1.3] static factual badge — a FILL from the live-theme 3-colour badge family (no border,
     white text, never the accent-red); 4px; max one (Liquid enforces). Sold-out = neutral status. */
  .ez-card__badge {
    position: absolute;
    inset-block-start: var(--space-stack-sm, 8px);
    inset-inline-start: var(--space-stack-sm, 8px);
    padding: 2px var(--space-stack-sm, 8px); /* 2px = badge micro-inset (allowlisted) */
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: var(--badge-new-fill, #059669);
    color: #fff;
    font-size: var(--type-caption-size, 0.75rem);
    font-weight: var(--type-weight-medium, 500);
    letter-spacing: 0.02em;
  }
  .ez-card__badge--sold-out { background: var(--badge-soldout-fill, #f7f7f7); color: var(--color-text, var(--color-foreground)); }

  /* [item 2] title + price LEFT-aligned on every surface (incl. search) — lock start-alignment against any
     inherited centering; the price flex row is already flex-start. */
  .ez-card__body { padding-block-start: var(--space-stack-sm, 8px); text-align: start; }
  /* C2 [v1.3] price > name: the name is small + unbold, the price the bigger, bolder line. */
  .ez-card__title {
    /* [item 2] tighten the title -> price gap: drop the 4px (--_stack-xs) bottom margin so they sit closer;
       the title's own line-height leading keeps a small natural gap to the price. On-ladder (0). */
    margin: 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-h3-line, 1.3); /* card title = the h3 ROLE (canon 3.6); sized body-sm per v1.3 price>name */
    font-weight: var(--type-weight-regular, 400);
    /* two-line clamp keeps every card body the same height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ez-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-stack-sm, 8px);
    font-size: 1.0625rem;
    font-weight: var(--type-weight-bold, 700);
    font-variant-numeric: tabular-nums;
  }
  .ez-card__price-current { font-weight: var(--type-weight-bold, 700); }
  .ez-card__price-current--muted { opacity: 0.65; }
  /* L3 [v1.3] sale is INK-led (the current price is the pull, not a sale-red — visual.md/bench). */
  .ez-card__price-current--sale { color: var(--color-text, var(--color-foreground)); }
  .ez-card__price-was {
    opacity: 0.55;
    text-decoration: line-through;
    font-weight: var(--type-weight-regular, 400);
    font-size: var(--type-body-sm-size, 0.875rem);
  }

  /* C-3 [v1.3] swatches — BIG (30px chip, 44px hit-area) · INTERACTIVE (tap swaps the card hero to
     the variant image) · selection = a RING (outline), never a fill · row sits OUTSIDE the card
     link · density adapts to card width (ez-product-rail.js hides the overflow into "+N"). */
  /* [A3] nowrap: the swatch row is ALWAYS a single line, so it can never reflow its height
     (the wrap<->unwrap jump was the "weird movement"); ez-product-rail.js folds any overflow
     into the "+N" chip (whole swatches only, never a partial). No overflow clip on the row so
     the selection ring is never cut. */
  .ez-card__swatches {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    /* [item B] name / price / swatch read as ONE flush-left column — explicit start-alignment,
       robust against any inherited centering. */
    justify-content: flex-start;
    gap: var(--card-swatch-gap, 8px);
    /* [owner delta] separation price -> swatch row. History: 16px (--_stack-lg) -> 20px (FIX B, "a bit more
       air") -> 12px here (owner: 20 was "going a bit far"; pulled back toward the tight title->price rhythm he
       called "alright"). 12px is the on-ladder rung; the swatch row still reads slightly separated from price.
       The inter-swatch HORIZONTAL gap stays --card-swatch-gap (8px) — unchanged. */
    margin: var(--space-12, 12px) 0 0;
    /* [item B] (1) LEFT-ALIGN the row to the text edge: the chip BODIES already sat at the card
       content-left (== the title/price left edge), but the DEFAULT-selected chip's outward selection
       ring (box-shadow) poked ~4px LEFT of that edge — the visible mis-alignment the owner flagged.
       Shift the row right by that exact ring outer-spread (2px surface gap + the ring width, the same
       expression the ring box-shadow uses) so the selected chip's ring now LANDS on the text edge and
       the three read as one clean column at rest.
       (2) a bit MORE bottom space below the swatches: 8px row pad-bottom ON TOP of the card's 8px
       padding (~16px total) so the swatch row doesn't sit tight to the card's bottom edge. */
    padding: 0 0 var(--space-stack-sm, 8px) calc(2px + var(--card-swatch-ring-width, 2px));
    list-style: none;
    /* [v1.6] dead-zone fix: the row sits ABOVE the stretched PDP ::after (z-3 > z-1) but is itself
       pointer-transparent, so a tap on an empty gap (or the "+N" chip) FALLS THROUGH to the PDP link;
       only the swatch BUTTONS re-enable pointer events (below) — so a swatch tap swaps colour while every
       other pixel of the row navigates. JS delegation still fires: the click bubbles from the button
       (pointer-events:auto) up through this row's listener even though the row is pointer-events:none. */
    position: relative;
    z-index: 3;
    pointer-events: none;
  }
  .ez-card__swatches > li { display: inline-flex; }
  .ez-card__swatches > li[hidden] { display: none; }
  /* [A2] SMALL card-appropriate chip (20px) — near the default collection card's native-small
     size (owner's "fine" reference, fix consistently), clearly below the bench/PDP 30px "big".
     The card keeps a full 44px HIT AREA via the ::before, so touch-accessibility (§6 C-3) holds. */
  .ez-card__swatch {
    position: relative;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: var(--radius-full, 50%);
    border: var(--stroke-hairline, 1px) solid var(--color-line, var(--color-border));
    background: var(--ez-swatch, var(--color-surface, var(--color-background)));
    background-size: cover;
    background-position: center;
    cursor: pointer;
    /* [v1.6] the row is pointer-events:none so its gaps fall through to the PDP link; the BUTTON re-enables
       pointer events so a swatch tap swaps colour. touch-action:manipulation keeps the tap crisp on touch
       (no 300ms delay / double-tap-zoom). */
    pointer-events: auto;
    touch-action: manipulation;
    /* [item 2] selection RING via BOX-SHADOW (a 2px surface-colour gap + a ring), NOT outline — outline-color
       did not animate on select. The two-layer shadow keeps the ring OUTSIDE the chip with a small gap; the
       ring colour fades transparent -> ink and a subtle scale gives tactile feedback. Both animate over .18s.
       [bug-145] the ring reads the CANONICAL --color-surface / --color-text (rooted at ez-tokens :root + per
       scheme), NOT the rail-scoped --_surface / --_text — so it resolves on OFF-RAIL grids (search / collection)
       too; an unresolved var() with no fallback would void the whole box-shadow (computes to none). The fallback
       matches the sheet (--color-surface := --color-background, --color-text := --color-foreground) so resilience
       resolves IDENTICALLY to :root on every scope — never a literal that could lie about the active scheme. */
    box-shadow: 0 0 0 2px var(--color-surface, var(--color-background)), 0 0 0 calc(2px + var(--card-swatch-ring-width, 2px)) transparent;
    /* durations/eases ride the motion ladder (owner's fuzzy ".18s" -> the 150ms fast token, snappy for a
       selection + == the prior swatch transition). Names box-shadow + transform per the locked spec. */
    transition: box-shadow var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)), transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  /* 44px hit-area around the 18px chip (touch floor) without changing the visible size */
  .ez-card__swatch::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 44px;
    height: 44px;
    translate: -50% -50%;
  }
  .ez-card__swatch.is-selected {
    box-shadow: 0 0 0 2px var(--color-surface, var(--color-background)), 0 0 0 calc(2px + var(--card-swatch-ring-width, 2px)) var(--color-text, var(--color-foreground));
    transform: scale(1.08);
  }
  .ez-card__swatch--unavailable { border-style: dashed; opacity: 0.65; }
  .ez-card__swatch-more {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    font-size: var(--type-caption-size, 0.75rem);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
  }
  .ez-card__swatch-more[hidden] { display: none; }

  /* skeleton cells: shown by the recommendations rail until the fetch resolves
     (perceived-speed on patchy PK networks; static, no shimmer -> reduced-motion-safe) */
  .ez-card--skeleton .ez-card__media { background: var(--surface-lift, #f4efe4); }
  .ez-card--skeleton .ez-card__title,
  .ez-card--skeleton .ez-card__price {
    border-radius: var(--radius-sm, 4px);
    background: var(--surface-lift, #f4efe4);
    color: transparent;
  }

  /* ---- Controls — the ROW container + the dots container stay section-owned; the mobile-dot
     BUTTON, the scroll-progress bar/fill and the overlay arrows are shared ez-carousel-styles.
     Dots + progress are the MOBILE controls; arrows are DESKTOP (§2.3 750 seam). ------------- */
  .ez-pr__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--_gutter);
    margin-block-start: var(--_heading-gap);
  }
  .ez-pr__dots {
    display: flex;
    align-items: center;
    gap: var(--_stack-sm);
    margin-inline: auto;
  }

  /* ---- 750 seam: desktop layout (design_system.md §2.3) ----------------- */
  @media screen and (min-width: 750px) {
    .ez-pr {
      /* [v1.3] 32/32 vertical BOTH breakpoints; desktop sides = 64 (the 1280 box). These mirror the
         global ez-tokens :root 750 flips (kept explicit, matching hero/banner). The shell head-size
         (--type-h2-size 1.375->1.75) + pad-x + the arrow reveal auto-flip via the shared layers. */
      --_heading-gap: var(--space-heading-gap, 32px);
      --_gutter: var(--space-gutter, 16px);
    }
    /* [carousel-peek] desktop is arrow-driven + flush (arrows disable at the reachable end to convey
       direction), so reset the mobile bidirectional-peek snap inset to 0 here. */
    .ez-pr__track { scroll-padding-inline-start: 0; }
    .ez-pr__track > .ez-card {
      /* desktop shows the configured column count, no peek */
      width: calc((100% - (var(--_gutter) * (var(--ez-cols, 4) - 1))) / var(--ez-cols, 4));
    }
    .ez-pr__controls { display: none; }
  }

  /* ---- [S7 additive] FREE-SCROLL transport: the row scrolls freely, no snap-to-card.
     The `free_scroll` setting label promises exactly this; the engine's `free` flag only
     governed arrow disable-state, so the CSS half is here. Cells drop their snap targets
     too (a snap-align with no snap-type is inert, but leaving it would lie about the mode).
     Controls chrome is suppressed in Liquid (component-contracts C2: free-scroll carries no
     bullets). ------------------------------------------------------------------------ */
  .ez-pr--free .ez-pr__track {
    scroll-snap-type: none;
    scroll-padding-inline-start: 0;
  }
  .ez-pr--free .ez-pr__track > .ez-card { scroll-snap-align: none; }

  /* ---- Grid layout mode: multi-row static grid (design_system.md §2.5 product-grid role):
     2-up base -> 3-up @750 -> columns_desktop @990. No scroll-snap, no controls. --------- */
  .ez-pr--grid .ez-pr__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--_heading-gap);
    overflow: visible;
    scroll-snap-type: none;
  }
  .ez-pr--grid .ez-pr__track > .ez-card {
    width: auto;
    scroll-snap-align: none;
  }
  @media screen and (min-width: 750px) {
    .ez-pr--grid .ez-pr__track { grid-template-columns: repeat(3, 1fr); }
  }
  @media screen and (min-width: 990px) {
    .ez-pr--grid .ez-pr__track { grid-template-columns: repeat(var(--ez-cols, 4), 1fr); }
  }

  /* ---- reduced motion: kill smooth-scroll + transitions ----------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-pr__track { scroll-behavior: auto; }
    .ez-pr * { transition-duration: 0.01ms !important; }
    /* [v1.5] reduced motion KILLS the whole-card hover zoom (the resting shadow + border persist). */
    .ez-card:hover { transform: none; }
    /* card press-scale stays removed (owner-final: no press on the card) AND the rail nav arrow/dot
       press-scale removed (owner: "no press on the rail"). Only the view-all link presses; guard it. */
  }

  /* Full-bleed rail: the shell has handed this element the whole viewport width, so the
     TRACK re-supplies the side inset itself via scroll-padding + a leading/trailing gutter.
     Without this the first card would sit flush against the screen edge. This is the ONE
     place an element touches horizontal inset, and only because the shell granted the bleed. */
  .ez-pr--bleed .ez-pr__track {
    padding-inline: var(--ez-shell-pad-x, 16px);
    scroll-padding-inline: var(--ez-shell-pad-x, 16px);
  }

  /* CURATED-CARD DISPLAY (the parent/child fix). A hand-picked ez-product block renders itself
     and cannot read this rail's settings -- Shopify does not expose a nested block's settings to
     its parent. So the rail re-applies its display choices from the OUTSIDE: the two pure
     visibility toggles are CSS here, and the three render-time ones (default angle, swatch
     density, new-badge window) ride the data-ez-card-* attributes above for ez-product-rail.js,
     which already owns swatch density and hero swapping. */
  .ez-pr--no-hover .ez-card__img--hover { display: none; }
  .ez-pr--no-swatches [data-ez-card-swatches] { display: none; }
/* END_BLOCK:ez-product-rail */

/* START_BLOCK:ez-prose (INDEX:188) */
/* Design-system tokens -> block-scoped private aliases (fallbacks equal ez-tokens :root). */
  .ez-prose {
    --_measure: var(--size-measure, 65ch);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_stack-lg: var(--space-stack-lg, 16px);
    --_inset-md: var(--space-inset-md, 16px);
    --_accent: var(--color-accent, #BF1C1D);
    --_muted: var(--color-text-muted, var(--color-foreground-muted));

    max-width: var(--_measure);
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.5);
    font-weight: var(--type-weight-regular, 400);
    text-wrap: pretty;
  }

  /* Rich-text children own no outer margin; the block owns one rhythm between them, so a
     merchant cannot produce a ragged stack by pasting a different mix of elements. */
  .ez-prose > * { margin-block: 0; }
  .ez-prose > * + * { margin-block-start: var(--_stack-lg); }

  .ez-prose h2 {
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--type-weight-semibold, 600);
    text-wrap: balance;
  }
  .ez-prose h3,
  .ez-prose h4 {
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
    text-wrap: balance;
  }
  .ez-prose strong { font-weight: var(--type-weight-semibold, 600); }

  /* S6 list grammar: ONE marker grammar per list type, real <ul>/<ol>. */
  .ez-prose ul,
  .ez-prose ol { padding-inline-start: var(--_inset-md); }
  .ez-prose li + li { margin-block-start: var(--_stack-sm); }

  /* A-2 inline link: persistent underline (never hover-only), accent on hover only. */
  .ez-prose a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: var(--stroke-hairline, 1px);
    text-underline-offset: 0.18em;
    transition: color var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  @media (hover: hover) {
    .ez-prose a:hover { color: var(--_accent); }
  }
  /* §7.3 press carve-out: an inline prose link never press-scales. */

  /* ---- Variants (S5) --------------------------------------------------- */
  /* dense (policy / legal): the density IS the credibility. Tighter rung, same measure. */
  .ez-prose--dense {
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
  }
  .ez-prose--dense > * + * { margin-block-start: var(--_stack-sm); }

  /* centred-narrow (rest beat): only honest at a length short enough to read as a shape. */
  .ez-prose--centered {
    max-width: 48ch;
    margin-inline: auto;
    text-align: center;
  }
  .ez-prose--centered ul,
  .ez-prose--centered ol { list-style-position: inside; padding-inline-start: 0; }

  @media (prefers-reduced-motion: reduce) {
    .ez-prose a { transition-duration: 0.01ms; }
  }
/* END_BLOCK:ez-prose */

/* START_BLOCK:ez-sticky-cta (INDEX:191) */
/* design-system tokens -> section-scoped aliases (theme-foundation.md §A1) */
  .ez-sticky {
    --_radius-none: var(--radius-none, 0px);
    --_inset: var(--space-inset-md, 16px);
    --_gutter: var(--space-gutter, 12px);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_surface: var(--color-surface, var(--color-background));
    --_elevation: var(--elevation-1, 0 -2px 8px rgb(0 0 0 / 0.08));

    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky, 800);
    background: var(--_surface);
    border-radius: var(--_radius-none);
    box-shadow: var(--_elevation);
    padding: var(--_gutter) var(--_inset);
    padding-block-end: calc(var(--_gutter) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-sticky.is-visible { transform: translateY(0); }
  .ez-sticky__inner { display: flex; }
  .ez-sticky__clone { flex: 1; display: flex; }
  .ez-sticky__clone > * { flex: 1; }

  @media screen and (max-width: 749px) {
    .ez-sticky { display: block; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-sticky { transition: none; }
  }
/* END_BLOCK:ez-sticky-cta */

/* START_BLOCK:ez-trust-strip (INDEX:193) */
/* Design-system tokens -> section-scoped private aliases with provisional
     fallbacks until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-trust-b {
    /* [v1.3] 1280-box shell: 32/32 vertical both breakpoints (supersedes 48/80), 16/64 sides. */
    --_section-y: var(--space-section-y, 32px);
    --_pad-x: 16px;
    --_heading-gap: var(--space-heading-gap, 24px);
    --_gutter: var(--space-gutter, 12px);
    /* desktop inline-row cluster gap — an ELEMENT gap in this section's custody, NOT the
       shell's section rhythm (--space-section-y). Exact-value 40 rung so the gap holds when
       the token sheet lands (was misusing --space-section-y, whose canon is 32). */
    --_row-gap: var(--space-40, 40px);
    --_stack-xs: var(--space-stack-xs, 4px);
    /* [v1.10] badge vertical padding tightened 16 -> 8 (owner refinement 2026-07-21): the woven
       floor was reading ~65px tall for ~33px of content. --space-stack-sm is the vertical-rhythm
       rung that seats the icon + 2-line lockup snug without cramping. Was --space-inset-md (16). */
    --_pad-y: var(--space-stack-sm, 8px);
    --_container: var(--size-container, 1280px);
    --_icon: var(--size-icon-lg, 28px);
    --_hairline: var(--stroke-hairline, 1px);
    --_w-semibold: var(--type-weight-semibold, 600);
    --_w-medium: var(--type-weight-medium, 500);
    --_w-regular: var(--type-weight-regular, 400);
    --_text-gap: 2px;      /* label<->sub micro-stack, below the 4px floor; --space-2 rung candidate (3rd sighting) */
    --_badge-line: 1.25;   /* two-line lockup leading, tighter than label-line 1.3 so label+sub read as one unit */
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    --_line: var(--color-line, var(--color-border));

    display: block; /* .ez-trust-b sits on the <ez-trust-strip> custom element (inline by default) */
  }
  /* Outer rhythm + 1280 inner + S4 head zone -> shared ez-shell + ez-section-head. */

  /* ---- Row: mobile 2-up, desktop centered inline (LIGHTEST woven floor) -- */
  /* [v1.11] Mobile 2-up: the PAIR is centred as a cluster and each cell is content-width
     (max-content), rather than two equal 1fr columns each centring its own contents. Two 1fr
     columns push the two lockups apart to the column centres, so the icon+text pairs read as
     two separate things; sizing the cells to their content and centring the row keeps them
     reading as one strip. Ported from the live theme 2026-07-29 — the live section carried
     this refinement and the local mirror did not, so the block conversion had inherited the
     older 1fr version. */
  .ez-trust__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: var(--_row-gap);
    row-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- L2 trust-badge (rendered by ez-trust-badge.liquid) — uniform static -- */
  .ez-trust-badge { min-width: 0; list-style: none; }
  /* The unit is an icon column + a text column, so every badge's text starts on the same
     x-offset from its own icon regardless of label length (a flex row with centred content
     lets a long label shift its icon). height:100% makes the two mobile cells equal height. */
  .ez-trust-badge__unit {
    display: grid;
    grid-template-columns: var(--_icon) minmax(0, max-content);
    align-items: center;
    justify-content: start;
    column-gap: var(--_gutter);
    width: 100%;
    height: 100%;
    text-align: start;
    padding-block: var(--_pad-y);
  }

  .ez-trust-badge__icon {
    flex: 0 0 auto;
    width: var(--_icon);
    height: var(--_icon);
    object-fit: contain;
  }
  .ez-trust-badge__icon-ph {
    flex: 0 0 auto;
    width: var(--_icon);
    height: var(--_icon);
    color: var(--_muted);
    opacity: 0.6;
  }
  .ez-trust-badge__icon-ph svg { width: 100%; height: 100%; }

  .ez-trust-badge__text { display: flex; flex-direction: column; gap: var(--_text-gap); min-width: 0; }
  .ez-trust-badge__label {
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--_badge-line);
    font-weight: var(--_w-semibold);
  }
  .ez-trust-badge__sub {
    font-size: var(--type-caption-size, 0.75rem);
    line-height: var(--_badge-line);
    font-weight: var(--_w-regular);
    color: var(--_muted);
  }

  /* ---- 750 seam: desktop centered inline row --------------------------- */
  @media screen and (min-width: 750px) {
    .ez-trust-b { --_section-y: var(--space-section-y, 32px); --_pad-x: 64px; }
    .ez-trust__row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--_row-gap);
    }
    .ez-trust-badge { flex: 0 1 auto; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-trust-b * { transition-duration: 0.01ms !important; }
  }
/* END_BLOCK:ez-trust-strip */

/* START_BLOCK:ez-value-props (INDEX:195) */
/* Design-system tokens -> block-scoped private aliases (fallbacks equal ez-tokens :root). */
  .ez-vprops-grid {
    --_gutter: var(--space-gutter, 12px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_inset-lg: var(--space-inset-lg, 24px);
    --_icon: var(--size-icon-lg, 28px);
    --_radius-md: var(--radius-md, 8px);
    --_muted: var(--color-text-muted, var(--color-foreground-muted));
    /* boxed panel = the STATIC separation role (--surface-fill), NOT --surface-lift (the
       interactive/depth role): a static panel taking lift would fake a tappable affordance
       (design_system.md §3.7). */
    --_fill: var(--surface-fill, #f9f8f6);

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ez-vprops-grid--m-grid { grid-template-columns: repeat(2, 1fr); }

  /* ---- S6 feature-list unit (rendered by ez-value-prop.liquid) ---------- */
  .ez-vprops-grid .ez-vprop {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--_stack-sm);
  }
  /* boxed = ONE neutral surface-fill separation (never a saturated band, never stacked) */
  .ez-vprops-grid--card-boxed .ez-vprop {
    background: var(--_fill);
    border-radius: var(--_radius-md);
    padding: var(--_inset-lg);
  }

  .ez-vprops-grid .ez-vprop__icon {
    width: var(--_icon);
    height: var(--_icon);
    display: block;
    object-fit: contain;
  }
  .ez-vprops-grid .ez-vprop__icon-ph { color: var(--_muted); opacity: 0.6; }
  .ez-vprops-grid .ez-vprop__icon-ph svg { width: var(--_icon); height: var(--_icon); }

  .ez-vprops-grid .ez-vprop__label {
    margin: 0;
    font-size: var(--type-h3-size, 1.125rem);
    line-height: var(--type-h3-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
  }
  .ez-vprops-grid .ez-vprop__text {
    margin: 0;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--type-weight-regular, 400);
    color: var(--_muted);
    max-width: 44ch;
  }

  /* ---- 750 seam: desktop N-up (design_system.md §2.3) ------------------- */
  @media screen and (min-width: 750px) {
    .ez-vprops-grid {
      --_gutter: var(--space-gutter, 16px);
      grid-template-columns: repeat(var(--ez-cols, 3), 1fr);
    }
  }
/* END_BLOCK:ez-value-props */

/* START_BLOCK:ez-video-banner (INDEX:197) */
/* Design-system tokens -> section-scoped private aliases (canon NAME + exact-sheet fallback). */
  .ez-vb-b {
    --_gutter: var(--space-gutter, 12px);
    --_stack-sm: var(--space-stack-sm, 8px);
    --_radius-md: var(--radius-md, 8px);
    --_dur-base: var(--motion-functional, 200ms);
    --_ease: var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_press: var(--motion-press-scale, 0.98);
    --_w-medium: var(--type-weight-medium, 500);
    --_text: var(--color-text, var(--color-foreground));
    --_muted: var(--color-text-muted, var(--color-foreground-muted));

    /* --_private: the §6 C5 edge-peek, pinned to the §2.1 inset rung (inside the 16-24 band).
       Deliberately NOT a merchant setting — a peek width is a design primitive, not content. */
    --_peek: var(--space-inset-md, 16px);
    --_aspect-reel: 9 / 16;   /* the 9:16 REEL form of --aspect-video (design_system.md §2.6) */
  }
  /* Shell (outer rhythm + overflow-clip + 1280 inner) + S4 head zone -> shared ez-shell. */

  ez-video-banner { display: block; }
  .ez-vb__viewport { position: relative; }

  /* ---- Track: native CSS scroll-snap (no slider library) ---------------------------- */
  .ez-vb__track {
    display: flex;
    column-gap: var(--_gutter);
    margin: 0;
    padding: 0;
    list-style: none;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    /* [carousel-peek] direction-aware bidirectional peek, same mechanic as the product rail:
       inset each cell's snap point by the peek so tiles 2..N reveal a sliver of the PREVIOUS
       tile, while the width math below keeps the NEXT-tile sliver on the right. */
    scroll-padding-inline-start: var(--_peek);
    -webkit-overflow-scrolling: touch;
    /* overflow-x:auto + overscroll-behavior-x:contain + scrollbar-hide -> ez-carousel-styles base. */
  }

  .ez-vb__tile {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: calc((100% - (var(--_gutter) * (var(--ez-vb-cols-m, 2) - 1)) - (var(--_peek) * 2)) / var(--ez-vb-cols-m, 2));
  }

  /* [half-peek 2026-07-24] Owner-ruled S3 BIG peek: show `cols + 0.5` tiles so the NEXT tile sits
     50% in view (mobile 1 + 50% of the 2nd; desktop 3 + 50% of the 4th). A layout MODE gated behind
     data-ez-vb-peek="half" (a constrained schema CHOICE, not a raw peek primitive) — the default
     edge-peek path above is untouched, so the preview pages stay byte-for-byte. Flush start; the
     half-tile reveals on the trailing edge. Specificity (0,2,0) wins over the base .ez-vb__tile. */
  .ez-vb-b[data-ez-vb-peek="half"] .ez-vb__track {
    scroll-padding-inline-start: 0;
  }
  .ez-vb-b[data-ez-vb-peek="half"] .ez-vb__tile {
    width: calc((100% - (var(--_gutter) * var(--ez-vb-cols-m, 1))) / (var(--ez-vb-cols-m, 1) + 0.5));
  }

  /* ---- The tile: ONE button, nothing interactive nested inside it (§6 C1) ----------- */
  .ez-vb__opener {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--_text);
    text-align: start;
    cursor: pointer;
    transition: transform var(--_dur-base) var(--_ease);
  }
  .ez-vb__media {
    position: relative;
    display: block;
    /* [additive 2026-07-24] per-instance tile aspect; unset -> the shipped 9:16 reel (byte-for-byte).
       The LIGHTBOX video is a separate 9:16 (snippets/ez-lightbox-styles.liquid) and is NOT touched. */
    aspect-ratio: var(--ez-vb-aspect, var(--_aspect-reel));
    border-radius: var(--_radius-md);
    overflow: hidden;
    background: var(--surface-fill, #f9f8f6);
  }
  .ez-vb__poster,
  .ez-vb__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ez-vb__video {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--_dur-base) var(--_ease);
  }
  /* the preview crossfades in only once it is genuinely PLAYING — never a blank black box */
  .ez-vb__video[data-ez-vb-on] { opacity: 1; }
  .ez-vb__placeholder { display: block; width: 100%; height: 100%; }
  .ez-vb__placeholder svg { width: 100%; height: 100%; }

  /* [2026-07-23 owner ruling] The tile play glyph is GONE — markup and CSS both. It promised
     playback in place while the tap opens a fullscreen overlay, which is an affordance lie
     (§2.8). Nothing replaces it: the tile is a real <button> that presses, it carries a label,
     and the motion is its own cue. Advertising the wrong action is worse than advertising none. */

  .ez-vb__label {
    display: block;
    margin-block-start: var(--_stack-sm);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-medium);
    color: var(--_muted);
  }

  /* the tile COMMITS (it opens the viewer) -> it presses; the carousel NAV never does ([v1.6]) */
  .ez-vb__opener:active { transform: scale(var(--_press)); }

  /* ---- No controls row. [2026-07-23 owner ruling] this row carries NO dots and NO scroll-
     progress bar on either viewport; snap + edge-peek is the whole mobile affordance and the
     desktop OVERLAY arrows (shared ez-carousel-styles, hidden below 750) are the pointer path. */

  /* ---- 750 seam: desktop (design_system.md §2.3) ------------------------------------ */
  @media screen and (min-width: 750px) {
    .ez-vb-b { --_gutter: var(--space-gutter, 16px); }
    /* desktop is arrow-driven + flush, so the mobile peek inset resets (matches the rail) */
    .ez-vb__track { scroll-padding-inline-start: 0; }
    .ez-vb__tile {
      width: calc((100% - (var(--_gutter) * (var(--ez-vb-cols-d, 4) - 1))) / var(--ez-vb-cols-d, 4));
    }
    /* [half-peek 2026-07-24] desktop BIG peek: cols + 0.5 tiles (3 full + 50% of the 4th at cols_d=3) */
    .ez-vb-b[data-ez-vb-peek="half"] .ez-vb__tile {
      width: calc((100% - (var(--_gutter) * var(--ez-vb-cols-d, 3))) / (var(--ez-vb-cols-d, 3) + 0.5));
    }
  }

  /* ---- Reduced motion --------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .ez-vb__track { scroll-behavior: auto; }
    .ez-vb__opener:active { transform: none; }
    .ez-vb__opener,
    .ez-vb__video { transition-duration: 0.01ms; }
  }
/* END_BLOCK:ez-video-banner */

/* START_BLOCK:ez-view-all (INDEX:198) */
/* Inline case: nested in the heading row. flex:0 0 auto keeps it from shrinking. */
  .ez-head__row > .ez-viewall { flex: 0 0 auto; }

  /* Standalone case: a direct child of the section shell, sitting below the content. It needs
     NO margin of its own — the shell's row-gap already sets the distance to the element above.
     Carrying one as well stacked on top of the heading's and produced a 64px gap where 32 was
     intended (owner-reported 2026-07-29). */
/* END_BLOCK:ez-view-all */

/* START_BLOCK:filters (INDEX:200) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

    @media screen and (min-width: 750px) {
      --min-column-width: 50px;
    }
  }

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:203) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:205) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:206) */
.placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:208) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:209) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:211) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:212) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:213) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:price (INDEX:214) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:216) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:218) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:219) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:222) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:224) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:225) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:226) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:229) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:background-media (INDEX:231) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:232) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

  @media screen and (max-width: 900px) {
    .bento-box {
      grid-template-columns: repeat(2, 1fr);
    }

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:233) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

    @media screen and (min-width: 750px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:235) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:236) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-products (INDEX:238) */
.cart-items__price-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  flex-wrap: nowrap;
}

.cart-items__price-row text-component {
  font-size: 16px;
}

.cart-items__compare-price {
  text-decoration: line-through;
  color: #a9a9a9;
  font-size: 14px;
  white-space: nowrap;
}
  .cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:239) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

  .cart-discounts {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

    @media screen and (min-width: 750px) {
      padding-block-start: 0;
    }
  }

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:241) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:243) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:244) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:245) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:246) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:ew-image-overlay (INDEX:248) */
/* The layer covers the media box and never takes a click: the slide/tile anchor under it
     is the link. Mobile-first: words sit at the bottom, centred. */
  .ew-ov {
    --_ov-pad: var(--ew-ov-pad, 16px);
    --_ov-ink: #ffffff;
    --_ov-veil: rgb(0 0 0 / 0.55);
    --_ov-veil-0: rgb(0 0 0 / 0);
    --_ov-shadow: 0 1px 2px rgb(0 0 0 / 0.35);

    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: var(--_ov-pad);
    color: var(--_ov-ink);
    text-align: center;
    pointer-events: none;
  }

  .ew-ov--dark {
    --_ov-ink: var(--color-foreground, #1a1a1a);
    --_ov-veil: rgb(255 255 255 / 0.8);
    --_ov-veil-0: rgb(255 255 255 / 0);
    --_ov-shadow: none;
  }

  /* The veil holds full strength under the words, then fades out above them. */
  .ew-ov--scrim {
    background-image: linear-gradient(
      to top,
      var(--_ov-veil) 0%,
      var(--_ov-veil) 28%,
      var(--_ov-veil-0) 78%
    );
  }

  /* Tiles are small (a 1.5-up phone rail tile is ~225px wide): compact type and a compact
     one-line button, so the words stay in the lower band and off the subject. The button
     keeps the 44px touch floor. Tablet and up restore the larger sizes below. */
  .ew-ov--tile {
    --_ov-pad: var(--ew-ov-pad, 12px);
  }

  .ew-ov--tile .ew-ov__inner {
    gap: 4px;
  }

  .ew-ov--tile .ew-ov__heading {
    font-size: var(--font-size--lg, 1.125rem);
  }

  .ew-ov--tile .ew-ov__sub {
    font-size: var(--font-size--xs, 0.8125rem);
  }

  .ew-ov--tile .button.ew-ov__btn {
    min-height: 44px;
    max-width: 100%;
    padding-block: 8px;
    padding-inline: 14px;
    font-size: var(--font-size--xs, 0.8125rem);
    white-space: nowrap;
  }

  .ew-ov__inner {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 6px;
    max-width: 34rem;
  }

  .ew-ov__heading {
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-weight: var(--type-weight-bold, 700);
    font-size: var(--font-size--xl, 1.25rem);
    line-height: 1.15;
    text-wrap: balance;
    text-shadow: var(--_ov-shadow);
  }

  .ew-ov__sub {
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--sm, 0.875rem);
    line-height: 1.35;
    text-wrap: pretty;
    text-shadow: var(--_ov-shadow);
  }

  .ew-ov__note {
    font-size: var(--font-size--2xs, 0.75rem);
    line-height: 1.3;
    text-wrap: balance;
    opacity: 0.9;
    text-shadow: var(--_ov-shadow);
  }

  /* Call to action over a photo (owner 2026-10-14, second pass): a BLACK, fully rounded
     pill with a white label and no border, identical on every photo, light or dark. The
     theme button's font, case and padding stay. Only these homepage overlay buttons;
     site-wide buttons are untouched. Higher specificity than base.css `.button:hover` on
     purpose: the span hovers with its anchor, below. */
  .ew-ov .button.ew-ov__btn,
  .ew-ov .button.ew-ov__btn:hover {
    --button-color: #ffffff;
    --button-background-color: #000000;
    --button-border-color: transparent;
    --button-border-width: 0px;
    border-radius: 999px;
    margin-block-start: 6px;
    font-size: var(--font-size--sm, 0.875rem);
    transition: background-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)),
      transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }

  /* Hover: a slightly lighter black. */
  @media (hover: hover) {
    a:hover > .ew-ov .button.ew-ov__btn,
    a:hover .ew-ov .button.ew-ov__btn {
      --button-background-color: #2b2b2b;
    }
  }

  a:active .ew-ov .button.ew-ov__btn {
    transform: scale(var(--motion-press-scale, 0.98));
  }

  .ew-ov--hero .ew-ov__heading {
    font-size: var(--font-size--2xl, 1.5rem);
  }

  .ew-ov--hero .ew-ov__sub {
    font-size: var(--font-size--md, 1rem);
  }

  /* Under-the-photo words on mobile: static, ink, no veil. */
  .ew-ov--below-m {
    position: static;
    padding: 10px 4px 0;
    color: var(--color-foreground);
    background-image: none;
    pointer-events: auto;
  }

  .ew-ov--below-m .ew-ov__heading,
  .ew-ov--below-m .ew-ov__sub,
  .ew-ov--below-m .ew-ov__note {
    text-shadow: none;
  }

  @media screen and (min-width: 750px) {
    /* From 750px the same words lift back over the photo, exactly like an overlay tile.
       The tile anchor is the positioned box; with no label under it, it IS the media box. */
    .ew-ov--below-m {
      position: absolute;
      padding: var(--_ov-pad);
      color: var(--_ov-ink);
      border-radius: var(--ew-tile-radius, 12px);
      pointer-events: none;
    }

    .ew-ov--below-m.ew-ov--scrim {
      background-image: linear-gradient(
        to top,
        var(--_ov-veil) 0%,
        var(--_ov-veil) 28%,
        var(--_ov-veil-0) 78%
      );
    }

    .ew-ov--below-m .ew-ov__heading,
    .ew-ov--below-m .ew-ov__sub,
    .ew-ov--below-m .ew-ov__note {
      text-shadow: var(--_ov-shadow);
    }

    .ew-ov--tile .ew-ov__heading {
      font-size: var(--font-size--2xl, 1.5rem);
    }

    .ew-ov--tile .ew-ov__sub {
      font-size: var(--font-size--md, 1rem);
    }

    .ew-ov--tile {
      --_ov-pad: var(--ew-ov-pad, 16px);
    }

    .ew-ov--tile .button.ew-ov__btn {
      padding-block: 10px;
      padding-inline: 18px;
      font-size: var(--font-size--sm, 0.875rem);
    }

    /* Hero on tablet and up: words beside the product, vertically centred, on the side
       the artwork leaves clear; the veil runs from that side. */
    .ew-ov--hero {
      --_ov-pad: var(--ew-ov-pad, clamp(24px, 4vw, 64px));
      justify-content: center;
    }

    .ew-ov--hero .ew-ov__inner {
      max-width: 44%;
    }

    .ew-ov--hero .ew-ov__heading {
      font-size: clamp(1.75rem, 3.2vw, 3rem);
    }

    .ew-ov--hero .ew-ov__sub {
      font-size: clamp(1rem, 1.3vw, 1.25rem);
    }

    .ew-ov--hero.ew-ov--align-start {
      align-items: flex-start;
      text-align: start;
    }

    .ew-ov--hero.ew-ov--align-end {
      align-items: flex-end;
      text-align: end;
    }

    .ew-ov--hero.ew-ov--scrim.ew-ov--align-start {
      background-image: linear-gradient(to right, var(--_ov-veil) 0%, var(--_ov-veil-0) 55%);
    }

    .ew-ov--hero.ew-ov--scrim.ew-ov--align-end {
      background-image: linear-gradient(to left, var(--_ov-veil) 0%, var(--_ov-veil-0) 55%);
    }

    .ew-ov--hero.ew-ov--scrim.ew-ov--align-center {
      background-image: radial-gradient(ellipse at center, var(--_ov-veil) 0%, var(--_ov-veil-0) 70%);
    }

    /* Bottom-placed hero words (artwork that leaves its lower band clear). */
    .ew-ov--hero.ew-ov--v-bottom {
      justify-content: flex-end;
    }

    .ew-ov--hero.ew-ov--scrim.ew-ov--v-bottom {
      background-image: linear-gradient(to top, var(--_ov-veil) 0%, var(--_ov-veil-0) 55%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ew-ov .button.ew-ov__btn {
      transition: none;
    }

    a:active .ew-ov .button.ew-ov__btn {
      transform: none;
    }
  }
/* END_SNIPPET:ew-image-overlay */

/* START_SNIPPET:ez-carousel-styles (INDEX:254) */
/* ===== Snap-neutral transport base (the bits every carousel track shares) ============= */
  .ez-pr__track,
  .ez-hero--carousel .ez-hero__track,
  .ez-banner--carousel .ez-banner__track,
  .ez-shop__track--carousel,
  .ez-vb__track,
  .ez-lb__panels,
  .ez-inf--loop .ez-inf__track {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ez-pr__track::-webkit-scrollbar,
  .ez-hero--carousel .ez-hero__track::-webkit-scrollbar,
  .ez-banner--carousel .ez-banner__track::-webkit-scrollbar,
  .ez-shop__track--carousel::-webkit-scrollbar,
  .ez-vb__track::-webkit-scrollbar,
  .ez-lb__panels::-webkit-scrollbar,
  .ez-inf--loop .ez-inf__track::-webkit-scrollbar { display: none; }

  /* ===== Overlay arrow (chevron on a dark translucent backing) ========================== */
  /* Base — identical across every family except the per-family deltas that follow. */
  .ez-pr__arrow, .ez-hero__arrow, .ez-banner__arrow, .ez-shop__arrow, .ez-vb__arrow, .ez-lb__arrow, .ez-inf__arrow {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--ez-carousel-arrow-size, 48px);
    height: var(--ez-carousel-arrow-size, 48px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--ez-carousel-arrow-bg, rgb(0 0 0 / 0.55));
    color: #fff;
    cursor: pointer;
  }
  .ez-hero__arrow { z-index: 3; } /* per-family delta: hero arrow sits above the overlay content */

  .ez-pr__arrow--prev, .ez-hero__arrow--prev, .ez-banner__arrow--prev, .ez-shop__arrow--prev, .ez-vb__arrow--prev, .ez-lb__arrow--prev, .ez-inf__arrow--prev { inset-inline-start: var(--ez-carousel-arrow-inset, 8px); }
  .ez-pr__arrow--next, .ez-hero__arrow--next, .ez-banner__arrow--next, .ez-shop__arrow--next, .ez-vb__arrow--next, .ez-lb__arrow--next, .ez-inf__arrow--next { inset-inline-end: var(--ez-carousel-arrow-inset, 8px); }

  .ez-pr__arrow svg, .ez-hero__arrow svg, .ez-banner__arrow svg, .ez-shop__arrow svg, .ez-vb__arrow svg, .ez-lb__arrow svg, .ez-inf__arrow svg { width: var(--size-icon-md, 24px); height: var(--size-icon-md, 24px); display: block; }

  /* Transitions — per-family (the rail omits `transform`; the infinite arrow is bg-only). The two
     NEWEST families (video banner + lightbox) join the rail's transform-free group: nav controls
     never press-scale ([v1.6] class rule), so a transform transition would be dead weight. */
  .ez-pr__arrow, .ez-vb__arrow, .ez-lb__arrow { transition: background-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)), opacity var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)); }
  .ez-hero__arrow, .ez-banner__arrow, .ez-shop__arrow { transition: background-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)), opacity var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)), transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)); }
  .ez-inf__arrow { transition: background-color var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)); }

  @media (hover: hover) {
    .ez-pr__arrow:hover, .ez-hero__arrow:hover, .ez-banner__arrow:hover, .ez-shop__arrow:hover, .ez-vb__arrow:hover, .ez-lb__arrow:hover, .ez-inf__arrow:hover { background: var(--ez-carousel-arrow-bg-hover, rgb(0 0 0 / 0.72)); }
  }
  /* Disabled-at-ends — the finite families; the infinite arrow is NEVER disabled (no rule). */
  .ez-pr__arrow[disabled], .ez-hero__arrow[disabled], .ez-banner__arrow[disabled], .ez-shop__arrow[disabled], .ez-vb__arrow[disabled], .ez-lb__arrow[disabled] { opacity: 0; pointer-events: none; }

  /* Desktop reveal (750 seam) — arrows overlay on desktop, touch + peek on mobile. */
  @media screen and (min-width: 750px) {
    .ez-pr__arrow, .ez-hero__arrow, .ez-banner__arrow, .ez-shop__arrow, .ez-vb__arrow, .ez-lb__arrow { display: inline-flex; }
    .ez-inf--loop .ez-inf__arrow { display: inline-flex; }
  }

  /* ===== Mobile position dot (the button; its container row stays section-owned) ========= */
  .ez-pr__dot, .ez-hero__dot, .ez-banner__dot, .ez-shop__dot, .ez-vb__dot, .ez-inf__dot {
    position: relative;
    width: var(--ez-carousel-dot-size, 8px);
    height: var(--ez-carousel-dot-size, 8px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--color-line, var(--color-border));
    cursor: pointer;
  }
  .ez-pr__dot::before, .ez-hero__dot::before, .ez-banner__dot::before, .ez-shop__dot::before, .ez-vb__dot::before, .ez-inf__dot::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--ez-carousel-dot-hit, 18px)); /* invisible 8+18*2 = 44px hit-area */
  }
  .ez-pr__dot.is-active, .ez-hero__dot.is-active, .ez-banner__dot.is-active, .ez-shop__dot.is-active, .ez-vb__dot.is-active, .ez-inf__dot.is-active { background: var(--color-text, var(--color-foreground)); }
  /* Transitions — per-family (the rail + video-banner + infinite dots omit `transform`; nav never press-scales). */
  .ez-pr__dot, .ez-vb__dot, .ez-inf__dot { transition: background-color var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)); }
  .ez-hero__dot, .ez-banner__dot, .ez-shop__dot { transition: background-color var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)), transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1)); }

  /* ===== Scroll-progress bar (rail + banner; the shoppable bar conforms here — bug-120) ==== */
  /* The rail/banner progress is a full-width flex bar; the shoppable one was a 96px width-animated
     bar (bug-120: animating `width` violates §7.3). All three now use the ONE scaleX fill mechanic
     (engine writes `transform: scaleX(pct)`), so the shoppable delta is the E1 expected change. */
  .ez-pr__progress, .ez-banner__progress, .ez-vb__progress {
    flex: 1 1 auto;
    height: var(--ez-carousel-progress-height, 3px);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-line, var(--color-border));
    overflow: hidden;
  }
  .ez-shop__progress {
    width: 96px;
    height: var(--ez-carousel-progress-height, 3px);
    border-radius: var(--radius-full, 50%);
    background: var(--color-line, var(--color-border));
    overflow: hidden;
  }
  .ez-pr__progress-fill, .ez-banner__progress-fill, .ez-vb__progress-fill, .ez-shop__progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: var(--color-text, var(--color-foreground));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }

  /* ===== Reduced motion — neutralise the shared chrome transitions ======================= */
  @media (prefers-reduced-motion: reduce) {
    .ez-pr__arrow, .ez-hero__arrow, .ez-banner__arrow, .ez-shop__arrow, .ez-vb__arrow, .ez-lb__arrow, .ez-inf__arrow,
    .ez-pr__dot, .ez-hero__dot, .ez-banner__dot, .ez-shop__dot, .ez-vb__dot, .ez-inf__dot,
    .ez-pr__progress-fill, .ez-banner__progress-fill, .ez-vb__progress-fill, .ez-shop__progress-fill { transition-duration: 0.01ms !important; }
  }
/* END_SNIPPET:ez-carousel-styles */

/* START_SNIPPET:ez-cart-memory (INDEX:255) */
/* Azadi cart-rescue popup (15-17 Aug) — the campaign's FOURTH surface.
     Designed 2026-08-11 by easysight-visual-designer. Direction A, "the cloth".
     The three explored directions sit under exploration/ and must not be built from.

     WHAT THIS REPLACES
     -------------------------------------------------------------------------
     This file is a drop-in replacement for the ENTIRE stylesheet block in
     business/storefront/snippets/ez-cart-memory.liquid. Nothing else in that file
     changes, and ez-cart-memory.js is NOT touched: every class name, every element,
     every data-attribute and the whole nesting order below are the ones the live
     script already emits. See markup.html for the contract.

     The placeholder skin's STRUCTURE is kept in full — the private custom-property
     block, the scroll-lock class, the focus-visible ring, the 750 seam, the
     reduced-motion block and the entrance keyframes are all the ones already there.
     What changed is the SKIN: the panel became the campaign cloth, so every colour
     that used to resolve to a theme token now resolves to a campaign value.

     THE EXEMPTION, STATED PLAINLY
     -------------------------------------------------------------------------
     The visual skin sits OUTSIDE design_system.md under the owner's 2026-08-10
     standing permission for sale surfaces. VISUALS ONLY. Placement and structure
     still bind and are held exactly: every spacing, radius, touch-target, control
     height, motion duration and easing below is consumed from a real token with the
     live value as fallback, exactly as the placeholder consumed them. The permission
     is not canon; do not write it into design_system.md.

     3.1 OVERLAY GRAMMAR — the instructed deviation is unchanged.
     Bottom-sheet on mobile, centred panel from 750 up. ESC closes, backdrop closes,
     body scroll-locks while open, focus returns on close. It deliberately does NOT
     focus-trap and the markup carries no aria-modal, per the owner's build order.

     NO new font request (Bricolage 400/700 are already loaded, plus the OS mono
     stack for the code). No raster imagery. Pure CSS and two inline SVG crescents.
     ~4KB. */

  .ezcm {
    /* ---- structure, consumed by pointer. Unchanged from the placeholder. ---- */
    --_gutter:       var(--space-gutter, 12px);
    --_inset:        var(--space-inset-md, 16px);
    --_inset-lg:     var(--space-inset-lg, 24px);
    --_stack-xs:     var(--space-stack-xs, 4px);
    --_stack-sm:     var(--space-stack-sm, 8px);
    --_stack-md:     var(--space-stack-md, 12px);
    --_stack-lg:     var(--space-stack-lg, 16px);
    --_touch:        var(--touch-target-min, 44px);
    --_control:      var(--size-control-md, 48px);
    --_icon:         var(--size-icon-md, 24px);
    --_radius-md:    var(--radius-md, 8px);
    --_radius-lg:    var(--radius-lg, 12px);
    --_radius-full:  var(--radius-full, 50%);
    --_hairline:     var(--stroke-hairline, 1px);
    --_dur-fast:     var(--motion-duration-fast, 150ms);
    --_dur-base:     var(--motion-functional, 200ms);
    --_dur-exp:      var(--motion-expressive, 400ms);
    --_ease:         var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_ease-in:      var(--motion-ease-entrance, cubic-bezier(0, 0, 0.2, 1));
    --_press:        var(--motion-press-scale, 0.98);
    --_h2-size:      var(--type-h2-size, 1.375rem);
    --_h2-line:      var(--type-h2-line, 1.2);
    --_body-size:    var(--type-body-size, 1rem);
    --_body-line:    var(--type-body-line, 1.5);
    --_label-size:   var(--type-label-size, 0.8125rem);
    --_label-line:   var(--type-label-line, 1.3);
    --_w-semibold:   var(--type-weight-semibold, 600);

    /* --_private: no root token. Ink = rgb(26 26 26), the same ink the elevation
       shadows use; alpha held at 0.70 to match the lightbox + curation popup
       (owner's "so the user doesn't feel blocked"). Unchanged from the placeholder,
       including its N2-confirmation status. A green scrim was considered and
       rejected: the scrim belongs to the page, not to the campaign. */
    --_scrim: rgb(26 26 26 / 0.70);
    --_panel-max: min(440px, calc(100vw - (var(--_inset) * 2)));

    /* ---- the campaign skin. The three values that carry the whole family. ----
       Identical to the sale bar and the product-page offer block, to the hex.
       To retire the campaign, delete this block and the .ezcm--az rules below;
       nothing structural depends on them. */
    --az-ground:  #01411e;   /* deep flag green — the cloth field   */
    --az-ink:     #f6f2e7;   /* warm cream — every piece of type. NEVER pure white */
    --az-gold:    #e3b85c;   /* the accent, and the action          */
    --az-gold-lift: #efc873; /* gold on hover, same as the offer block's copy button */
    --az-deep:    #0b3b1d;   /* the type that sits ON gold          */

    --_shadow-3:  0 12px 32px rgb(26 26 26 / 0.34);

    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    color: var(--az-ink);
    font-family: var(--font-body--family, 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
  }

  .ezcm__backdrop { position: absolute; inset: 0; background: var(--_scrim); }

  /* The wrap CENTRES (or bottom-anchors) the panel; its own empty area is a close
     target, so the visible surround behaves as the backdrop under it does. */
  .ezcm__wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: ezcm-in var(--_dur-exp) var(--_ease-in) both;
  }
  @keyframes ezcm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

  /* ===== the panel = the cloth ==============================================
     The same four-layer field as the bar and the offer block, unchanged: a soft
     diagonal sheen, a vertical warp, a horizontal weft, and the green body under
     them. It is a weave you feel, not one you notice.
     The gold line on the top edge is the cloth's SELVEDGE. On a bottom sheet the
     top edge is the only edge the shopper sees, and the panel is dark-on-dark
     against the scrim, so this hairline is what gives the panel a crisp edge
     instead of reading as a hole cut in the page. It is not decoration. */
  .ezcm__panel {
    position: relative;
    inline-size: 100%;
    max-inline-size: 100%;
    overflow: hidden;
    padding: var(--_inset-lg) var(--_inset-lg) calc(var(--_inset-lg) + env(safe-area-inset-bottom, 0px));
    border-start-start-radius: var(--_radius-lg);
    border-start-end-radius: var(--_radius-lg);
    color: var(--az-ink);
    background:
      linear-gradient(102deg, transparent 15%, rgba(255, 255, 255, 0.034) 45%, transparent 74%),
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.017) 0 1px,
        rgba(0, 0, 0, 0.032) 1px 2px,
        transparent 2px 5px
      ),
      repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, #054c25 0%, #01411e 54%, #013818 100%);
    box-shadow:
      var(--_shadow-3),
      inset 0 1px 0 rgba(227, 184, 92, 0.55);
  }

  /* the cloth's tooth */
  .ezcm__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    mix-blend-mode: overlay;
    opacity: 0.13;
  }

  /* the same mark that carries the occasion on the bar, ghosted. It sits behind
     the close button on purpose: it is atmosphere, not a thing to look at. */
  .ezcm__panel::after {
    content: '';
    position: absolute;
    top: -46px;
    right: -42px;
    width: 158px;
    height: 158px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.075;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.79%203.53A7.5%207.5%200%201%200%2013.79%2016.47A6.5%206.5%200%201%201%2013.79%203.53Z' transform='rotate(-18 10 10)' fill='%23E3B85C'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* everything the shopper reads sits above the two atmosphere layers */
  .ezcm__eyebrow,
  .ezcm__title,
  .ezcm__body,
  .ezcm__meta,
  .ezcm__code,
  .ezcm__cta,
  .ezcm__err,
  .ezcm__dismiss { position: relative; z-index: 1; }

  /* ===== the quiet exits ==================================================== */
  .ezcm__close {
    position: absolute;
    inset-block-start: var(--_stack-sm);
    inset-inline-end: var(--_stack-sm);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_touch);
    height: var(--_touch);
    padding: 0;
    border: 0;
    border-radius: var(--_radius-full);
    background: transparent;
    color: rgba(246, 242, 231, 0.66);
    cursor: pointer;
    transition: color var(--_dur-fast) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ezcm__close svg { width: var(--_icon); height: var(--_icon); display: block; }
  .ezcm__close:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ezcm__close:hover { color: var(--az-ink); } }

  /* ===== the lockup ==========================================================
     Crescent then the eyebrow, in gold mono. This is the bar's identity lockup at
     popup scale, and it is the first thing the eye lands on, so a shopper who saw
     the bar recognises the surface before reading a word of it.
     The crescent is a decorative background-image, so it is invisible to assistive
     tech with no aria plumbing needed. */
  .ezcm__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 var(--_stack-md);
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 10.5px;
    line-height: 12px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--az-gold);
  }
  .ezcm__eyebrow::before {
    content: '';
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M13.79%203.53A7.5%207.5%200%201%200%2013.79%2016.47A6.5%206.5%200%201%201%2013.79%203.53Z' transform='rotate(-18 10 10)' fill='%23E3B85C'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* ===== the fact, then the offer =========================================== */
  .ezcm__title {
    margin: 0 0 var(--_stack-md);
    padding-inline-end: var(--_touch);
    font-size: var(--_h2-size);
    line-height: var(--_h2-line);
    font-weight: var(--_w-semibold);
    letter-spacing: -0.004em;
    color: var(--az-ink);
    text-wrap: balance;
  }
  .ezcm__body {
    margin: 0 0 var(--_stack-lg);
    font-size: var(--_body-size);
    line-height: var(--_body-line);
    color: rgba(246, 242, 231, 0.80);
  }

  /* ===== the code, as a token ================================================
     A stitched box, the same one the product-page offer block carries, at the same
     dash pitch. It is left on the panel's own left axis rather than centred: one
     alignment logic, and a centred coupon is the promo tell this surface is trying
     not to be. The code is NOT an instruction here — the action applies it — so
     this reads as a small stamped token that belongs to this shopper.
     Drawn with background-image, not border-style: dashed, because a CSS dashed
     border gives no control over dash length and the pitch is the point. The 1px
     transparent border is kept so the box model matches the offer block's. */
  .ezcm__code {
    width: fit-content;
    margin: 0 auto 0 0;
    padding: 10px 16px;
    border: var(--_hairline) solid transparent;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.18);
    background-image:
      repeating-linear-gradient(90deg, rgba(227, 184, 92, 0.52) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(90deg, rgba(227, 184, 92, 0.52) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(0deg, rgba(227, 184, 92, 0.52) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(0deg, rgba(227, 184, 92, 0.52) 0 5px, transparent 5px 10px);
    background-size:
      100% 1px,
      100% 1px,
      1px 100%,
      1px 100%;
    background-position:
      0 0,
      0 100%,
      0 0,
      100% 0;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    text-align: start;
  }
  /* The code sits beside the end date on one row. The date is a FACT with no urgency dressing —
     mono, muted, tabular, the same register as the dates on the announcement bar. It is not a
     countdown and must never become one. */
  .ezcm__meta {
    display: flex;
    align-items: center;
    gap: var(--_stack-md);
    flex-wrap: wrap;
  }
  .ezcm__meta .ezcm__code { margin: 0; }
  .ezcm__ends {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 11.5px;
    line-height: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(246, 242, 231, 0.62);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ezcm__code span {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'DejaVu Sans Mono',
      'Liberation Mono', monospace;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
    color: var(--az-gold);
  }

  /* ===== the action =========================================================
     Flat solid gold, dark green type. No gradient, no bevel, no inset highlight —
     the same button material as the offer block's copy button, at full width.
     Gold is deliberate here and it is the whole argument of the design: a green
     button is a site control, a gold one is something handed over. The offer
     figure lives IN this label, so the number and the gold and the action are one
     object. It gets a 24px break above it so the offer is read before it. */
  .ezcm__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_control);
    margin-block-start: var(--_inset-lg);
    padding-inline: var(--_inset-lg);
    border: 0;
    border-radius: var(--_radius-md);
    background: var(--az-gold);
    color: var(--az-deep);
    font-size: var(--_label-size);
    line-height: var(--_label-line);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    animation: ezcm-act var(--_dur-base) var(--_ease) 240ms both;
    transition: background-color var(--_dur-base) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  /* It is a <button>, not an <a>: it POSTs the code onto the cart in place, the same one-tap apply
     the 14 Aug cart bar shipped and browser-ops verified. So it needs the three properties a real
     button does not inherit from the theme. */
  .ezcm__cta {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
  }
  .ezcm__cta[aria-busy='true'] { opacity: 0.72; cursor: default; }
  .ezcm__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ezcm__cta:hover { background: var(--az-gold-lift); } }

  /* The honest failure line. It names the threshold rather than guessing at a cause — Shopify
     returns a bare applicable:true/false with no reason code. Cream-warm red so it reads as
     information on this ground, not as an error state. */
  .ezcm__err {
    margin: var(--_stack-md) 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: #f7d9d9;
  }
  .ezcm__err[hidden] { display: none; }
  /* The action settles a beat after the panel, so the reading order is enforced by
     the surface itself: occasion, fact, offer, then the thing to do. It is fully
     visible before the panel finishes arriving, so it is never tapped-through. */
  @keyframes ezcm-act { from { opacity: 0; } to { opacity: 1; } }

  /* ===== the quiet dismiss ===================================================
     No underline at rest: an underlined second link competes with the action and
     makes the panel read as a choice between two offers. It is a full-width 44px
     target sitting directly under the action, and it is the third of four ways out
     (X, backdrop, ESC, this). Underline appears on hover and on focus. */
  .ezcm__dismiss {
    /* flex-centred, not display:block. A block button lays its label on the FIRST
       line of a 44px box, which drops ~30px of dead air under it and makes the
       panel bottom-heavy. Found by rendering. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--_touch);
    margin-block-start: var(--_stack-sm);
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(246, 242, 231, 0.66);
    font-family: inherit;
    font-size: var(--_label-size);
    line-height: var(--_label-line);
    cursor: pointer;
    text-decoration: none;
    text-underline-offset: 3px;
    transition: color var(--_dur-fast) var(--_ease);
  }
  @media (hover: hover) {
    .ezcm__dismiss:hover { color: var(--az-ink); text-decoration: underline; }
  }

  /* Focus ring in cream, because the theme's ink ring is invisible on this ground. */
  .ezcm__close:focus-visible,
  .ezcm__cta:focus-visible,
  .ezcm__dismiss:focus-visible {
    outline: 2px solid var(--az-ink);
    outline-offset: 2px;
    border-radius: var(--_radius-md);
  }
  .ezcm__cta:focus-visible { outline-color: var(--az-ink); }

  /* Body scroll-lock while open (3.1 non-negotiable). Class on <html>; the script
     removes it on close, on any throw, and on pagehide, so the page can never be
     left frozen. Unchanged. */
  .ezcm-locked,
  .ezcm-locked body { overflow: hidden; }

  /* ===== 750 seam — desktop (design_system.md §2.3) ==========================
     A centred panel, all corners. The selvedge becomes a full hairline ring at the
     bar's own alpha, because a floating panel has four visible edges, not one. */
  @media screen and (min-width: 750px) {
    .ezcm { --_gutter: var(--space-gutter, 16px); }
    .ezcm__wrap { align-items: center; padding: var(--_inset); }
    .ezcm__panel {
      inline-size: var(--_panel-max);
      padding: var(--_inset-lg);
      border-radius: var(--_radius-lg);
      box-shadow:
        var(--_shadow-3),
        inset 0 0 0 1px rgba(227, 184, 92, 0.34);
    }
    @keyframes ezcm-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
  }

  /* ===== Reduced motion (§7.2) ============================================== */
  @media (prefers-reduced-motion: reduce) {
    .ezcm__wrap { animation: none; }
    .ezcm__cta { animation: none; }
    .ezcm__close:active,
    .ezcm__cta:active { transform: none; }
    .ezcm__close,
    .ezcm__cta,
    .ezcm__dismiss { transition-duration: 0.01ms; }
  }

  /* ===== The in-cart one-tap bar (15 Aug) ====================================
     The campaign's fifth surface, sitting directly above the theme's discount
     disclosure on /cart. Same cloth as the popup above and as the announcement
     bar -- the three campaign values are repeated here rather than inherited,
     because this element is not a descendant of .ezcm and the campaign is meant
     to be deletable in one block per surface.

     Same standing exemption as the popup: VISUALS ONLY (owner, 2026-08-10, sale
     surfaces). Structure still binds -- every spacing, radius, control height,
     touch target, duration and easing below is consumed from a real token with
     the live value as fallback, the 750 seam is the canonical one, hover is
     inside @media (hover:hover), press is a transform, and reduced motion is
     honoured. */
  .ezcmbar {
    --_inset:       var(--space-inset-md, 16px);
    --_stack-sm:    var(--space-stack-sm, 8px);
    --_stack-md:    var(--space-stack-md, 12px);
    --_touch:       var(--touch-target-min, 44px);
    --_radius-md:   var(--radius-md, 8px);
    --_radius-sm:   var(--radius-sm, 4px);
    --_dur-fast:    var(--motion-duration-fast, 150ms);
    --_dur-base:    var(--motion-functional, 200ms);
    --_ease:        var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_press:       var(--motion-press-scale, 0.98);
    --_body-size:   var(--type-body-size, 1rem);
    --_body-line:   var(--type-body-line, 1.5);
    --_w-semibold:  var(--type-weight-semibold, 600);

    --az-ground:    #01411e;
    --az-ink:       #f6f2e7;
    --az-gold:      #e3b85c;
    --az-gold-lift: #efc873;
    --az-deep:      #0b3b1d;

    display: block;
    margin-block: var(--_stack-md) var(--_stack-sm);
    border-radius: var(--_radius-md);
    background: var(--az-ground);
    color: var(--az-ink);
    font-family: var(--font-body--family, 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif);
    -webkit-font-smoothing: antialiased;
  }

  .ezcmbar__in {
    display: flex;
    flex-direction: column;
    gap: var(--_stack-md);
    padding: var(--_inset);
  }

  .ezcmbar__text {
    margin: 0;
    font-size: var(--_body-size);
    line-height: var(--_body-line);
  }

  .ezcmbar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--_stack-md);
  }

  /* the stitched code box -- the campaign's own chip, same dash pitch the 14 Aug
     bar used. border-style: dashed cannot set the pitch, hence the gradients. */
  .ezcmbar__chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--_touch);
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--_radius-sm);
    background-color: rgba(0, 0, 0, 0.16);
    background-image:
      repeating-linear-gradient(90deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(90deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(0deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px),
      repeating-linear-gradient(0deg, rgba(227, 184, 92, 0.6) 0 5px, transparent 5px 10px);
    background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-origin: border-box;
    background-clip: border-box;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Roboto Mono',
      'DejaVu Sans Mono', 'Liberation Mono', monospace;
    font-size: 13.5px;
    letter-spacing: 0.1em;
    color: var(--az-gold);
    font-variant-numeric: tabular-nums;
  }

  .ezcmbar__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--_touch);
    min-width: 116px;
    padding-inline: 18px;
    border: 0;
    border-radius: var(--_radius-md);
    cursor: pointer;
    background: var(--az-gold);
    color: var(--az-deep);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--_w-semibold);
    transition:
      transform var(--_dur-fast) var(--_ease),
      background-color var(--_dur-base) var(--_ease);
  }

  .ezcmbar__go:active { transform: scale(var(--_press)); }

  .ezcmbar__go:focus-visible {
    outline: 2px solid var(--az-ink);
    outline-offset: 2px;
  }

  .ezcmbar__go[aria-busy='true'] { opacity: 0.72; cursor: default; }

  @media (hover: hover) {
    .ezcmbar__go:hover { background: var(--az-gold-lift); }
  }

  .ezcmbar__err {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #f7d9d9;
  }

  .ezcmbar__err[hidden] { display: none; }

  @media screen and (min-width: 750px) {
    .ezcmbar__in {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .ezcmbar__text { flex: 1 1 auto; }
    .ezcmbar__err { flex: 1 0 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ezcmbar__go { transition-duration: 0.01ms; }
    .ezcmbar__go:active { transform: none; }
  }
/* END_SNIPPET:ez-cart-memory */

/* START_SNIPPET:ez-curation-popup-styles (INDEX:257) */
/* ===== Token aliases (canon NAME + exact-sheet fallback; bespoke values stay --_private) =====
     Self-contained on the .ezcp root (bug-159): the popup host lives outside the section shell, so
     these cannot be inherited from .ez-cur -- they are resolved here. The :root sheet still WINS over
     each fallback, so an N2 retune flows through with zero edits. */
  .ezcp {
    --_gutter:       var(--space-gutter, 12px);
    --_inset:        var(--space-inset-md, 16px);
    --_inset-lg:     var(--space-inset-lg, 24px);
    --_stack-xs:     var(--space-stack-xs, 4px);
    --_stack-sm:     var(--space-stack-sm, 8px);
    --_stack-md:     var(--space-stack-md, 12px);
    --_heading-gap:  var(--space-heading-gap, 24px);
    --_control:      var(--size-control-md, 48px);
    --_icon:         var(--size-icon-md, 24px);
    --_touch:        var(--touch-target-min, 44px);
    --_radius-md:    var(--radius-md, 8px);
    --_radius-lg:    var(--radius-lg, 12px);
    --_radius-full:  var(--radius-full, 50%);
    --_hairline:     var(--stroke-hairline, 1px);
    --_dur-fast:     var(--motion-duration-fast, 150ms);
    --_dur-base:     var(--motion-functional, 200ms);
    --_dur-exp:      var(--motion-expressive, 400ms);
    --_ease:         var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_ease-in:      var(--motion-ease-entrance, cubic-bezier(0, 0, 0.2, 1));
    --_press:        var(--motion-press-scale, 0.98);
    --_h2-size:      var(--type-h2-size, 1.375rem);
    --_h2-line:      var(--type-h2-line, 1.2);
    --_body-size:    var(--type-body-size, 1rem);
    --_body-line:    var(--type-body-line, 1.5);
    --_body-sm-size: var(--type-body-sm-size, 0.875rem);
    --_body-sm-line: var(--type-body-sm-line, 1.45);
    --_label-size:   var(--type-label-size, 0.8125rem);
    --_label-line:   var(--type-label-line, 1.3);
    --_w-semibold:   var(--type-weight-semibold, 600);
    --_text:         var(--color-text, var(--color-foreground));
    --_text-muted:   var(--color-text-muted, var(--color-foreground-muted));
    --_surface:      var(--color-surface, var(--color-background));
    --_line:         var(--color-line, var(--color-border));
    --_shadow-3:     var(--elevation-3, 0 12px 32px rgb(26 26 26 / 0.14));

    /* --_private: values with no root token (documented, never hidden under a canon name) */
    --_scrim: rgb(26 26 26 / 0.70);   /* translucent, page reads through (owner ruling; = lightbox) */
    --_hero-aspect: var(--ezcp-hero-aspect, var(--aspect-lifestyle, 4 / 5));
    --_hero-max: 40svh;              /* cap the hero so the grid below is always reachable on a phone */
    --_panel-max: min(760px, calc(100vw - (var(--_inset) * 2)));
    --_panel-h: 88svh;               /* the modal is smaller than the viewport (page reads around it) */
  }

  /* ===== Overlay shell ===================================================================== */
  ez-curation-popup { display: block; }
  ez-curation-popup[hidden] { display: none; }

  .ezcp {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    color: var(--_text);
  }
  .ezcp__backdrop {
    position: absolute;
    inset: 0;
    background: var(--_scrim);
  }
  /* The dialog CENTRES the panel; its own empty area is a close target (the JS closes on any click
     that is not inside the panel), so the visible surround behaves as the backdrop under it does. */
  .ezcp__dialog {
    position: absolute;
    inset: 0;
    z-index: 2;                       /* local-stacking band (design_system.md §2.4 [v1.6]) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--_inset);
    animation: ezcp-in var(--_dur-exp) var(--_ease-in) both;
  }
  @keyframes ezcp-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ===== Track — a centring box, NOT a scroller. Exactly one panel lives here. ============= */
  .ezcp__track {
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }

  /* ===== Panel — the white content modal ================================================== */
  .ezcp__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: var(--_panel-max);
    max-block-size: var(--_panel-h);
    background: var(--_surface);
    border-radius: var(--_radius-lg);
    box-shadow: var(--_shadow-3);
    overflow: hidden;      /* clip the hero's top corners to the panel radius */
  }

  /* The scroll region holds hero + body; the close button sits above it, always reachable. */
  .ezcp__scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ===== Close — top-right, over the hero ================================================== */
  .ezcp__close {
    position: absolute;
    inset-block-start: var(--_stack-sm);
    inset-inline-end: var(--_stack-sm);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_touch);
    height: var(--_touch);
    padding: 0;
    border: 0;
    border-radius: var(--_radius-full);
    background: rgb(26 26 26 / 0.55);
    color: #ffffff;
    cursor: pointer;
    transition: background-color var(--_dur-fast) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ezcp__close svg { width: var(--_icon); height: var(--_icon); display: block; }
  .ezcp__close:active { transform: scale(var(--_press)); }
  @media (hover: hover) {
    .ezcp__close:hover { background: rgb(26 26 26 / 0.72); }
  }

  /* ===== Hero — the STATIC curation image (no video) ====================================== */
  .ezcp__hero {
    position: relative;
    margin: 0;
    aspect-ratio: var(--_hero-aspect);
    max-block-size: var(--_hero-max);
    background: var(--surface-fill, #f9f8f6);
    overflow: hidden;
  }
  .ezcp__hero-img,
  .ezcp__hero .placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===== Body — title, optional intro, product grid, see-all ============================== */
  .ezcp__body {
    display: flex;
    flex-direction: column;
    gap: var(--_stack-md);
    padding: var(--_inset-lg) var(--_inset);
  }
  .ezcp__title {
    margin: 0;
    font-size: var(--_h2-size);
    line-height: var(--_h2-line);
    font-weight: var(--_w-semibold);
    color: var(--_text);
    text-wrap: balance;
  }
  .ezcp__intro {
    margin: 0;
    max-width: var(--size-measure, 65ch);
    font-size: var(--_body-sm-size);
    line-height: var(--_body-sm-line);
    color: var(--_text-muted);
  }

  /* Product grid — the shared C2 ez-card grammar (bug-143: not a stock grid). 2-up -> 3-up @750.
     The .ez-card look is inherited from the globally-bundled ez-product-card CSS. */
  .ezcp__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--_gutter);
    row-gap: var(--_heading-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ezcp__grid > .ez-card { width: auto; }

  /* See-all — the path to the list page. A real <a>, the panel's single primary pull. */
  .ezcp__seeall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: var(--_stack-xs);
    min-height: var(--_touch);
    padding-inline: var(--_inset-lg);
    border: var(--_hairline) solid var(--_text);
    border-radius: var(--_radius-md);
    background: var(--_text);
    color: var(--_surface);
    font-size: var(--_label-size);
    line-height: var(--_label-line);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: opacity var(--_dur-base) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ezcp__seeall:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ezcp__seeall:hover { opacity: 0.9; } }
  .ezcp__seeall svg { width: 1em; height: 1em; display: block; }

  .ezcp__empty {
    margin: 0;
    font-size: var(--_body-sm-size);
    line-height: var(--_body-sm-line);
    color: var(--_text-muted);
  }

  /* ===== 750 seam — desktop (design_system.md §2.3) ======================================= */
  @media screen and (min-width: 750px) {
    .ezcp {
      --_gutter: var(--space-gutter, 16px);
      --_hero-max: 46svh;
    }
    .ezcp__grid { grid-template-columns: repeat(3, 1fr); }
    .ezcp__body { padding: var(--_inset-lg); }
  }

  /* ===== Reduced motion — instant open (§7.2 / §6 3.3) ==================================== */
  @media (prefers-reduced-motion: reduce) {
    .ezcp__dialog { animation: none; }
    .ezcp__close:active,
    .ezcp__seeall:active { transform: none; }
    .ezcp__close,
    .ezcp__seeall { transition-duration: 0.01ms; }
  }
/* END_SNIPPET:ez-curation-popup-styles */

/* START_SNIPPET:ez-lightbox-styles (INDEX:261) */
/* ===== Token aliases (canon NAME + exact-sheet fallback; bespoke values stay --_private) ==== */
  .ez-lb {
    --_gutter:      var(--space-gutter, 12px);
    --_inset:       var(--space-inset-md, 16px);
    --_inset-lg:    var(--space-inset-lg, 24px);
    --_stack-xs:    var(--space-stack-xs, 4px);
    --_stack-sm:    var(--space-stack-sm, 8px);
    --_stack-md:    var(--space-stack-md, 12px);
    --_control:     var(--size-control-md, 48px);
    --_icon:        var(--size-icon-md, 24px);
    --_touch:       var(--touch-target-min, 44px);
    --_radius-md:   var(--radius-md, 8px);
    --_radius-lg:   var(--radius-lg, 12px);
    --_radius-full: var(--radius-full, 50%);
    --_hairline:    var(--stroke-hairline, 1px);
    --_dur-fast:    var(--motion-duration-fast, 150ms);
    --_dur-base:    var(--motion-functional, 200ms);
    --_dur-exp:     var(--motion-expressive, 400ms);
    --_ease:        var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
    --_ease-in:     var(--motion-ease-entrance, cubic-bezier(0, 0, 0.2, 1));
    --_press:       var(--motion-press-scale, 0.98);
    --_w-semibold:  var(--type-weight-semibold, 600);
    --_text:        var(--color-text, var(--color-foreground));
    --_surface:     var(--color-surface, var(--color-background));

    /* --_private: values with no root token (documented, never hidden under a canon name) */
    --_scrim: rgb(26 26 26 / 0.70);     /* v3: translucent, page reads through (owner ruling) */
    --_on-scrim: #ffffff;
    --_aspect-reel: 9 / 16;             /* the 9:16 REEL form of --aspect-video (§2.6) */
    --_stage-h: 88svh;                  /* the owner's "90% 85% something like that" */
    --_progress-h: 3px;                 /* thin: it INDICATES, it is not a control */
    --_card-w: 186px;                   /* horizontal cell — wide + SHALLOW so the video keeps height */
    --_card-img: 56px;
    --_veil-h: 88px;
  }

  /* ===== Overlay shell ===================================================================== */
  ez-lightbox { display: block; }
  ez-lightbox[hidden] { display: none; }

  .ez-lb {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 1100);
    color: var(--_on-scrim);
  }
  .ez-lb__backdrop {
    position: absolute;
    inset: 0;
    background: var(--_scrim);
  }
  /* The dialog CENTRES the stage, and its own empty area is a close target (the JS closes on any
     click that is not inside the stage), so the whole surround behaves as the backdrop does. */
  .ez-lb__dialog {
    position: absolute;
    inset: 0;
    z-index: 2;                       /* local-stacking band (design_system.md §2.4 [v1.6]) */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ez-lb-in var(--_dur-exp) var(--_ease-in) both;
  }
  @keyframes ez-lb-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ===== Track — a centring box, NOT a scroller. Exactly one panel lives here. ============= */
  .ez-lb__track {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
  }
  .ez-lb__panel { display: block; }

  /* ===== Stage — the 9:16 video at ~88% viewport height, centred on BOTH viewports ========= */
  .ez-lb__stage {
    position: relative;
    block-size: var(--_stage-h);
    aspect-ratio: var(--_aspect-reel);
    max-inline-size: calc(100vw - (var(--_inset) * 2));
    border-radius: var(--_radius-lg);
    overflow: hidden;
    background: rgb(0 0 0 / 0.35);
  }
  .ez-lb__frame { position: absolute; inset: 0; }
  .ez-lb__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* the box IS 9:16 now, so this crops nothing */
  }
  /* A panel with no playable media renders the placeholder, never an empty box. */
  .ez-lb__placeholder { display: block; width: 100%; height: 100%; }
  .ez-lb__placeholder svg { width: 100%; height: 100%; object-fit: cover; }

  /* ===== Progress INDICATOR — top edge, thin, not interactive ============================== */
  /* Supersedes the v2 drag scrubber (owner, on new information: the clips are short and loop, so
     there is nothing to seek to). scaleX, never width — §7.3 bars animating layout properties. */
  .ez-lb__progress {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 4;
    block-size: var(--_progress-h);
    background: rgb(255 255 255 / 0.24);
    pointer-events: none;
  }
  .ez-lb__progress-fill {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--_on-scrim);
  }

  /* ===== Play / pause — the ONLY control, and it is the whole frame with a centred glyph ==== */
  .ez-lb__tap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--_on-scrim);
    cursor: pointer;
  }
  .ez-lb__tap-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_control);
    height: var(--_control);
    border-radius: var(--_radius-full);
    background: rgb(0 0 0 / 0.55);
    opacity: 0;
    transition: opacity var(--_dur-base) var(--_ease);
  }
  .ez-lb__tap-glyph svg { width: var(--_icon); height: var(--_icon); display: block; }
  /* Visible when PAUSED (the state that needs an affordance) and whenever the control is
     keyboard-focused, so the only control is never invisible to a keyboard user. */
  .ez-lb__panel.is-paused .ez-lb__tap-glyph,
  .ez-lb__tap:focus-visible .ez-lb__tap-glyph { opacity: 1; }
  .ez-lb__tap [data-ez-lb-when="playing"] { display: block; }
  .ez-lb__tap [data-ez-lb-when="paused"] { display: none; }
  .ez-lb__panel.is-paused .ez-lb__tap [data-ez-lb-when="playing"] { display: none; }
  .ez-lb__panel.is-paused .ez-lb__tap [data-ez-lb-when="paused"] { display: block; }

  /* ===== Corner controls — close (top-right) + optional sound (top-left) =================== */
  .ez-lb__close,
  .ez-lb__mute {
    position: absolute;
    inset-block-start: var(--_stack-sm);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_touch);
    height: var(--_touch);
    padding: 0;
    border: 0;
    border-radius: var(--_radius-full);
    background: rgb(0 0 0 / 0.55);
    color: var(--_on-scrim);
    cursor: pointer;
    transition: background-color var(--_dur-fast) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ez-lb__close { inset-inline-end: var(--_stack-sm); }
  .ez-lb__mute { inset-inline-start: var(--_stack-sm); }
  .ez-lb__close svg,
  .ez-lb__mute svg { width: var(--_icon); height: var(--_icon); display: block; }
  .ez-lb__close:active,
  .ez-lb__mute:active { transform: scale(var(--_press)); }
  @media (hover: hover) {
    .ez-lb__close:hover,
    .ez-lb__mute:hover { background: rgb(0 0 0 / 0.72); }
  }
  .ez-lb__mute [data-ez-lb-when="muted"] { display: block; }
  .ez-lb__mute [data-ez-lb-when="unmuted"] { display: none; }
  .ez-lb__panel.is-unmuted .ez-lb__mute [data-ez-lb-when="muted"] { display: none; }
  .ez-lb__panel.is-unmuted .ez-lb__mute [data-ez-lb-when="unmuted"] { display: block; }

  /* ===== Bottom overlay — caption · [one CTA] · the product strip ========================== */
  /* Sits at the bottom of the 9:16 frame, where a vertical clip carries least subject matter. */
  .ez-lb__overlay {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: var(--_stack-sm);
    padding-block-end: var(--_stack-sm);
    max-height: 60%;
  }
  /* read veil so white text stays legible over an arbitrary frame */
  .ez-lb__overlay::before {
    content: "";
    position: absolute;
    inset-block-start: calc(-1 * var(--_veil-h));
    inset-inline: 0;
    inset-block-end: 0;
    background: linear-gradient(to top, rgb(26 26 26 / 0.72), rgb(26 26 26 / 0));
    pointer-events: none;
  }
  .ez-lb__caption,
  .ez-lb__ctas,
  .ez-lb__products { position: relative; }

  .ez-lb__caption {
    margin: 0;
    padding-inline: var(--_inset);
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: var(--type-body-sm-line, 1.45);
    font-weight: var(--_w-semibold);
    color: var(--_on-scrim);
    text-wrap: balance;
  }

  /* CTA row — schema-OFF by default (the product cards ARE the action). One primary, no
     secondary: a second commitment stacked over the first is what one-primary-per-surface bars. */
  .ez-lb__ctas {
    display: flex;
    padding-inline: var(--_inset);
  }
  .ez-lb__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: var(--_control);
    padding-inline: var(--_inset-lg);
    border: var(--_hairline) solid transparent;
    border-radius: var(--_radius-md);
    background: var(--_surface);
    color: var(--_text);
    font-size: var(--type-label-size, 0.8125rem);
    line-height: var(--type-label-line, 1.3);
    font-weight: var(--_w-semibold);
    text-decoration: none;
    transition: opacity var(--_dur-base) var(--_ease), transform var(--_dur-fast) var(--_ease);
  }
  .ez-lb__cta:active { transform: scale(var(--_press)); }
  @media (hover: hover) { .ez-lb__cta:hover { opacity: 0.9; } }

  /* ===== Product strip — TRANSPARENT track, OPAQUE horizontal cards ======================== */
  .ez-lb__products {
    display: flex;
    gap: var(--_stack-sm);
    margin: 0;
    /* block padding gives the C2 hover-zoom room so it is not clipped by the scroller */
    padding: var(--_stack-xs) var(--_inset);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* FREE-SCROLL (no snap, no bullets) — §6 Carousel C2: a free-scroll variant carries none.
       This strip's horizontal scroll is also WHY the panel itself has no horizontal transport:
       two horizontal gestures stacked on one surface fight each other. */
  }
  .ez-lb__products::-webkit-scrollbar { display: none; }

  /* The HORIZONTAL C2 variant: image left, name + price right. Same grammar (product on white,
     title, price), re-laid to cost as little HEIGHT as possible so the video stays the focus.
     The card supplies its own white here because the track is transparent. */
  .ez-lb__products > .ez-card {
    flex: 0 0 auto;
    width: var(--_card-w);
    background: var(--_surface);
    color: var(--_text);
  }
  .ez-lb__products > .ez-card .ez-card__link {
    display: flex;
    align-items: center;
    gap: var(--_stack-sm);
  }
  .ez-lb__products > .ez-card .ez-card__media {
    flex: 0 0 var(--_card-img);
    width: var(--_card-img);
    /* the vertical card's image-to-edge negative margins are a STACKED-layout device; side by
       side they would pull the image out of the card, so they reset and the radius closes up. */
    margin: 0;
    border-radius: calc(var(--_radius-md) - var(--_hairline));
  }
  .ez-lb__products > .ez-card .ez-card__body { min-width: 0; }
  .ez-lb__products > .ez-card .ez-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ez-lb__products > .ez-card .ez-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--_stack-xs) var(--_stack-sm);
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }
  .ez-lb__products > .ez-card .ez-card__price-current {
    display: block;
    max-width: 100%;
    white-space: nowrap;
  }
  .ez-lb__products > .ez-card .ez-card__price-was {
    display: block;
    max-width: 100%;
    white-space: nowrap;
  }

  /* ===== 750 seam — desktop (design_system.md §2.3) ========================================= */
  @media screen and (min-width: 750px) {
    .ez-lb {
      --_gutter: var(--space-gutter, 16px);
      --_card-w: 208px;
      --_card-img: 64px;
    }
  }

  /* ===== Reduced motion — instant open (§7.2 / §6 3.3) ===================================== */
  @media (prefers-reduced-motion: reduce) {
    .ez-lb__dialog { animation: none; }
    .ez-lb__close:active,
    .ez-lb__mute:active,
    .ez-lb__cta:active { transform: none; }
    .ez-lb__tap-glyph,
    .ez-lb__close,
    .ez-lb__mute,
    .ez-lb__cta { transition-duration: 0.01ms; }
  }
/* END_SNIPPET:ez-lightbox-styles */

/* START_SNIPPET:ez-new-badge (INDEX:262) */
/* Small red "NEW" corner tag. Top-left of the card image, sized to sit clear of the
     product itself. Never overlaps a sold-out badge: each card's Liquid renders this
     ONLY when the product is available, and the sold-out badge only when it is not. */
  .ez-new-badge {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 3;
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: #d32027;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
  }

  /* Small chrome-context cards (header search dropdown, predictive search, cart drawer)
     stay clean — no badge in a 48px thumbnail. */
  .predictive-search-results__card .ez-new-badge,
  .header .ez-new-badge,
  .header-drawer .ez-new-badge,
  .cart-drawer .ez-new-badge,
  .cart-items .ez-new-badge {
    display: none;
  }
/* END_SNIPPET:ez-new-badge */

/* START_SNIPPET:ez-offer-pair-rail (INDEX:265) */
.ez-pair-rail {
    --_text: var(--offer-text, #1a1a1a);
    --_muted: var(--offer-muted, #555555);
    --_rule: var(--offer-rule, rgb(26 26 26 / 0.08));
    --_gap: var(--space-12, 12px);
    --_radius: var(--radius-md, 8px);
    --_tile: 128px;
    margin-block: var(--space-16, 16px);
    color: var(--_text);
  }
  /* The cart grid column sizes to content; without this the rail's tile row stretches it past a phone screen. */
  .cart-page__items:has(.ez-pair-rail) { min-width: 0; }
  .ez-pair-rail__heading {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: var(--type-weight-bold, 700);
  }
  .ez-pair-rail__list {
    position: relative; /* keeps the tiles' visually-hidden text inside the scroller */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--_tile);
    gap: var(--_gap);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .ez-pair-rail__list::-webkit-scrollbar { display: none; }
  .ez-pair-rail__cell { scroll-snap-align: start; min-inline-size: 0; }
  .ez-pair-rail__tile {
    display: grid;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    min-block-size: var(--touch-target-min, 44px);
    border-radius: var(--_radius);
    transition: transform var(--motion-duration-fast, 150ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  .ez-pair-rail__tile:active { transform: scale(var(--motion-press-scale, 0.98)); }
  .ez-pair-rail__tile:focus-visible { outline: 2px solid var(--_text); outline-offset: 2px; }
  .ez-pair-rail__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    margin-block-end: 4px;
    border: 1px solid var(--_rule);
    border-radius: var(--_radius);
    overflow: hidden;
    background: var(--offer-on-ink, #ffffff);
  }
  .ez-pair-rail__media .ez-offer-tag {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-start: 6px;
    z-index: 1;
  }
  .ez-pair-rail__img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .ez-pair-rail__name {
    font-size: var(--type-label-size, 0.8125rem);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ez-pair-rail__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
  }
  .ez-pair-rail__now {
    font-size: var(--type-body-sm-size, 0.875rem);
    font-weight: var(--type-weight-bold, 700);
  }
  .ez-pair-rail__was { font-size: var(--type-caption-size, 0.75rem); color: var(--_muted); }
  @media (min-width: 750px) {
    .ez-pair-rail { --_tile: 160px; }
  }
/* END_SNIPPET:ez-offer-pair-rail */

/* START_SNIPPET:ez-offer-progress (INDEX:266) */
.ez-offer-panel {
    --_bg: var(--offer-panel, #f4efe4);
    --_text: var(--offer-text, #1a1a1a);
    --_muted: var(--offer-muted, #555555);
    --_eye: var(--offer-eyelet, #BF1C1D);
    --_track: var(--offer-track, rgb(26 26 26 / 0.10));
    --_rule: var(--offer-rule, rgb(26 26 26 / 0.08));
    --_met: var(--offer-met, #10804A);
    max-inline-size: 640px;
    margin-block-end: var(--space-16, 16px);
    padding: 14px 14px 12px;
    border-radius: var(--radius-lg, 12px);
    background: var(--_bg);
    color: var(--_text);
  }
  :where(.ez-offer-panel) p { margin: 0; }
  .ez-offer-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8, 8px);
  }
  .ez-offer-panel__ends {
    font-size: var(--type-caption-size, 0.75rem);
    color: var(--_muted);
    white-space: nowrap;
  }
  .ez-offer-panel__tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4, 4px);
    row-gap: var(--space-4, 4px);
    margin-block-start: var(--space-12, 12px);
  }
  .ez-offer-panel__step {
    display: block;
    block-size: 6px;
    border-radius: 999px;
    background: var(--_track);
  }
  .ez-offer-panel__step--on { background: var(--_eye); }
  .ez-offer-panel__label {
    font-size: var(--type-caption-size, 0.75rem);
    color: var(--_muted);
  }
  .ez-offer-panel__label b { color: var(--_text); font-weight: var(--type-weight-semibold, 600); }
  .ez-offer-panel__msg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-block-start: 10px;
    font-size: var(--type-body-sm-size, 0.875rem);
    line-height: 1.35;
    font-weight: var(--type-weight-semibold, 600);
  }
  .ez-offer-panel__check { flex: none; margin-block-start: 1px; color: var(--_met); }
  .ez-offer-panel__dl {
    margin-block-start: var(--space-12, 12px);
    padding-block-start: 10px;
    border-block-start: 1px solid var(--_rule);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--type-weight-medium, 500);
  }
  .ez-offer-panel__dl--solo { border-block-start: 0; padding-block-start: 0; }
  .ez-offer-panel__dl-text--met { display: flex; align-items: center; gap: 6px; }
  .ez-offer-panel__track {
    display: block;
    block-size: 4px;
    margin-block-start: var(--space-8, 8px);
    border-radius: 999px;
    background: var(--_track);
    overflow: hidden;
  }
  .ez-offer-panel__fill {
    display: block;
    block-size: 100%;
    border-radius: 999px;
    background: var(--_eye);
    transform: scaleX(var(--ez-fill, 0));
    transform-origin: left center;
    transition: transform var(--motion-duration-expressive, 400ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
/* END_SNIPPET:ez-offer-progress */

/* START_SNIPPET:ez-offer-tag (INDEX:267) */
.ez-offer-tag {
    --_fill: var(--offer-ink, #242833);
    --_ink: var(--offer-on-ink, #ffffff);
    --_eye: var(--offer-eyelet, #BF1C1D);
    --_h: 22px;
    --_notch: 7px;
    --_dot: 5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    block-size: var(--_h);
    padding-inline: 13px 9px;
    background: var(--_fill);
    color: var(--_ink);
    font-size: 12px;
    line-height: 1;
    font-weight: var(--type-weight-bold, 700);
    letter-spacing: 0.01em;
    white-space: nowrap;
    clip-path: polygon(var(--_notch) 0, 100% 0, 100% 100%, var(--_notch) 100%, 0 50%);
    border-radius: 0 3px 3px 0;
  }
  .ez-offer-tag::before {
    content: '';
    flex: none;
    inline-size: var(--_dot);
    block-size: var(--_dot);
    margin-inline-start: -3px;
    border-radius: 50%;
    background: var(--_eye);
  }
  .ez-offer-tag--s {
    --_h: 18px;
    --_notch: 6px;
    --_dot: 4px;
    gap: 5px;
    padding-inline: 11px 7px;
    font-size: 11px;
  }
  .ez-offer-tag--inv {
    --_fill: var(--offer-on-ink, #ffffff);
    --_ink: var(--offer-ink, #242833);
  }
/* END_SNIPPET:ez-offer-tag */

/* START_SNIPPET:ez-shell (INDEX:271) */
/* ===== Shell outer — the section rhythm band (§6 S1) ================================== */
  .ez-product-rail, .ez-hero, .ez-banner, .ez-shop, .ez-inf, .ez-vb,
  .ez-vprops, .ez-steps, .ez-faq, .ez-trust, .ez-ct, .ez-ic {
    padding-block: var(--space-section-y, 32px);
    background: var(--color-surface, var(--color-background));
    color: var(--color-text, var(--color-foreground));
  }
  /* [B8] contain sub-pixel / scroll-snap width leakage — clip never widens the page, sticky-safe.
     The transport sections + the horizontal-scroll comparison table clip; the static grids don't.
     NOTE: a fixed OVERLAY (the video banner's lightbox) must be rendered OUTSIDE its section's
     clipping wrapper — ez-video-banner.liquid emits <ez-lightbox> as a sibling of .ez-vb. */
  .ez-product-rail, .ez-banner, .ez-shop, .ez-inf, .ez-vb, .ez-ct { overflow-x: clip; }
  .ez-hero { position: relative; } /* hero positions its overlay content instead of clipping */

  /* ===== Shell inner — the 1280 content box (1152 + 64 sides desktop / 16 mobile) ======== */
  .ez-pr__inner, .ez-banner__inner, .ez-shop__inner, .ez-inf__inner, .ez-vb__inner,
  .ez-vprops__inner, .ez-steps__inner, .ez-trust__inner, .ez-ct__inner, .ez-ic__inner {
    max-width: var(--size-container, 1280px);
    margin-inline: auto;
    padding-inline: var(--ez-shell-pad-x, 16px);
  }
  /* ez-faq keeps its own inner (65ch reading measure, NOT the 1280 container) — the S5 measure cap. */
  .ez-shop__inner { display: block; }

  /* ===== Head zone — eyebrow + heading (§6 S4); hero excluded (partial) ================== */
  .ez-pr__head, .ez-banner__head, .ez-shop__head, .ez-inf__head, .ez-vb__head,
  .ez-vprops__head, .ez-steps__head, .ez-faq__head, .ez-trust__head, .ez-ct__head, .ez-ic__head { margin-block-end: var(--space-heading-gap, 24px); }
  /* [D6] the content sections centre their head; the carousel heads stay left (space-between row). */
  .ez-vprops__head, .ez-steps__head, .ez-faq__head, .ez-trust__head, .ez-ct__head, .ez-ic__head { text-align: center; }

  /* eyebrow — base grammar (the trust strip has no eyebrow; hero's is a slide eyebrow, excluded) */
  .ez-pr__eyebrow, .ez-banner__eyebrow, .ez-shop__eyebrow, .ez-inf__eyebrow, .ez-vb__eyebrow,
  .ez-vprops__eyebrow, .ez-steps__eyebrow, .ez-faq__eyebrow, .ez-ct__eyebrow, .ez-ic__eyebrow {
    margin: 0 0 var(--space-stack-xs, 4px);
    font-size: var(--type-eyebrow-size, 0.75rem);
    line-height: var(--type-eyebrow-line, 1.3);
    font-weight: var(--type-weight-semibold, 600);
    text-transform: uppercase;
  }
  .ez-pr__eyebrow, .ez-banner__eyebrow, .ez-inf__eyebrow, .ez-vb__eyebrow,
  .ez-vprops__eyebrow, .ez-steps__eyebrow, .ez-faq__eyebrow, .ez-ct__eyebrow, .ez-ic__eyebrow { letter-spacing: 0.06em; opacity: 0.7; }
  .ez-shop__eyebrow { letter-spacing: 0.08em; color: var(--color-text-muted, var(--color-foreground-muted)); }

  /* heading — base grammar (--type-h2-size flips 1.375rem -> 1.75rem at the 750 root seam) */
  .ez-pr__heading, .ez-banner__heading, .ez-shop__heading, .ez-inf__heading, .ez-vb__heading,
  .ez-vprops__heading, .ez-steps__heading, .ez-faq__heading, .ez-trust__heading, .ez-ct__heading, .ez-ic__heading {
    margin: 0;
    font-size: var(--type-h2-size, 1.375rem);
    line-height: var(--type-h2-line, 1.2);
    font-weight: var(--type-weight-semibold, 600);
  }
  .ez-shop__heading, .ez-vprops__heading, .ez-steps__heading, .ez-ct__heading, .ez-ic__heading { text-wrap: balance; }

  /* The view-all CENTRES against the full heading stack (eyebrow + heading), not against the
     heading's own baseline — same rule and same reason as the ez-heading block, kept in step so
     the two head paths cannot diverge (owner ruling 2026-07-29). */
  .ez-pr__head-row, .ez-banner__head-row, .ez-inf__head-row, .ez-vb__head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-gutter, 12px);
  }
  .ez-pr__head-text, .ez-banner__head-text, .ez-inf__head-text, .ez-vb__head-text { min-width: 0; }
/* END_SNIPPET:ez-shell */

/* START_SNIPPET:ez-standalone-link (INDEX:272) */
/* Standalone nav-link (design_system.md §6 A-2 / v1.3 #13). Label stays BLACK (inherits the
     section text colour, so it stays legible on any colour scheme); a brand-accent underline
     slides in from the left. Look values are design-system token NAMES with a provisional
     fallback until N4 lands the global token layer (theme-foundation.md §A1). */
  .ez-standalone-link {
    position: relative;
    /* flex:0 0 auto keeps the link from shrinking when it sits in a flex heading-row;
       it is inert when the link is a plain block child (e.g. the FAQ more-link). */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-stack-xs, 4px);
    font-size: var(--type-label-size, 0.8125rem);
    font-weight: var(--type-weight-medium, 500);
    color: inherit;
    text-decoration: none;
  }
  .ez-standalone-link__chevron { width: 1em; height: 1em; }

  .ez-standalone-link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -2px;
    height: 2px;
    background: var(--color-accent, #BF1C1D);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--motion-functional, 200ms) var(--motion-ease-standard, cubic-bezier(0.25, 0.85, 0.35, 1));
  }
  @media (hover: hover) {
    .ez-standalone-link:hover::after { transform: scaleX(1); }
  }
  /* [v1.4] MOBILE PARITY (design_system.md v1.4 #3 HARD RULE): the sliding underline is
     hover-only -> DEAD on touch. On a touch device (no hover) the accent underline is
     PERSISTENT so the affordance still reads; on any device the pressed/active state shows it.
     Never a desktop-only affordance left dead on mobile. */
  @media (hover: none) {
    .ez-standalone-link::after { transform: scaleX(1); }
  }
  .ez-standalone-link:active::after { transform: scaleX(1); }
  .ez-standalone-link:active { transform: scale(var(--motion-press-scale, 0.98)); }

  /* "spaced": a top margin for a link that sits below a content block (FAQ more-link) instead
     of inline in a heading row. Matches the sections' provisional heading-gap (24 / 32 seam). */
  .ez-standalone-link--spaced { margin-block-start: var(--space-heading-gap, 24px); }
  @media screen and (min-width: 750px) {
    .ez-standalone-link--spaced { margin-block-start: var(--space-heading-gap, 32px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .ez-standalone-link::after { transition-duration: 0.01ms !important; }
    .ez-standalone-link:active { transform: none; }
  }
/* END_SNIPPET:ez-standalone-link */

/* START_SNIPPET:filter-remove-buttons (INDEX:275) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form (INDEX:279) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form */

/* START_SNIPPET:grid-density-controls (INDEX:280) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:281) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:282) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:283) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:288) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:291) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  /* Small-inline icon mode (Tier 2 visual prominence).
     Allowlisted to specific image-bearing filters (currently: custom.size).
     Renders as a stacked list of rows. Row order: [checkbox-indicator] [icon] [label-text]
     so checkboxes column-align across all rows regardless of icon width variance.
     Does NOT inherit big-tile grid rules above. */
  .facets__inputs-wrapper .facets__inputs-list--images-inline {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .facets__inputs-list--images-inline .facets__inputs-list-item {
    width: 100%;
  }

  /* Inline-icon row layout. DOM order: input -> label (label contains
     checkmark-icon, image-wrapper, label-text). The native checkbox <input>
     stays display:none-equivalent per the .checkbox snippet's default CSS;
     the visible checkbox indicator is the .icon-checkmark inside the <label>.
     Layout target: [checkmark-indicator] [icon] [label-text] in one row,
     checkmark column-aligned across rows so all rows line up.
  */
  .facets__image-inline-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    cursor: pointer;
  }

  .facets__image-wrapper--inline {
    width: 24px;
    height: 24px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .facets__image-wrapper--inline img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
  }

  .facets__image-inline-label .checkbox__label-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Capitalize Style filter labels (custom.style values are stored lowercase:
     bold/classic/vintage/minimal). Scoped by data-filter-param-name so other
     filters render their labels untouched. */
  .facets__item[data-filter-param-name='filter-p-m-custom-style'] .checkbox__label-text,
  .facets__item[data-filter-param-name='filter-p-m-custom-style'] .facets__pill-label {
    text-transform: capitalize;
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(4, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(4, 1fr);

    @media screen and (min-width: 750px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper:not(.facets__image-wrapper--inline) {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper:not(.facets__image-wrapper--inline) img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:292) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:293) */
.media-block {
    overflow: hidden;
    position: relative;

    @media screen and (min-width: 750px) {
      min-height: var(--media-height);
    }
  }

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:299) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:300) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:301) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-products-list (INDEX:307) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  /* Item 4: the popup product card is now ez-product-card, which owns its own border + hover-zoom +
     2nd-image swap. Neutralise the legacy resource-card wrapper's POINTER hover/active treatment so its
     tint can't bleed through the card's transparent interior or double up the motion. Id-scoped so it
     wins over the wrapper rule regardless of CSS bundle order. The keyboard-selection outline
     (:is([aria-selected].keyboard-focus, :focus-visible) in predictive-search.liquid) is left intact. */
  #predictive-search-products .predictive-search-results__card--product:hover,
  #predictive-search-products .predictive-search-results__card--product:active {
    background-color: transparent;
    padding: 0;
    margin: 0;
    transform: none;
  }

  /* Item 4 (spacing parity): render-parity of the popup PRODUCT GRID with the ez grid card
     (design_system.md §6 S2 / ez-product-rail--grid). The stock products grid
     (predictive-search-resource-carousel.liquid) laid these cards out 2-up -> 4-up with a uniform
     stock --gap-md (0.9rem); inside the ~66dvw modal the 4-up rendered cards NARROWER than a real
     rail/grid card, so the SHARED card's fixed 8px inset + type read at a different PROPORTION, and the
     inter-card gaps didn't match. The card INTERNALS (padding, image-to-edge + top-2 radius, title/price
     spacing) are the same globally-bundled .ez-card CSS and already apply here — only the grid container
     was off. Re-spec it to the ez grid: 2-up -> 3-up (wider cards, the real-card proportion) with the ez
     column gutter (--space-gutter 12/16) + row rhythm (--space-heading-gap 24/32). Id-scoped so it wins
     over the snippet's .predictive-search-results__wrapper-products rule regardless of CSS bundle order;
     the container query keys on .predictive-search-results__inner (container-type:inline-size) — the
     correct axis for a dvw-sized modal (same 550px boundary the stock grid already uses). */
  #predictive-search-products .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-gutter, 12px);
    row-gap: var(--space-heading-gap, 24px);
  }
  @container (min-width: 550px) {
    #predictive-search-products .predictive-search-results__wrapper-products {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:308) */
.predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:price-filter (INDEX:309) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card (INDEX:311) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }

  /* [v1.5] site-wide card resting look — 12px radius, a 1px LIGHT ink-alpha border, and ONE faint resting
     shadow, from the ONE shared --ez-card-* token set (base.css :root; single source of truth, consumed by
     BOTH this stock card and the ez rail .ez-card). overflow:clip makes the product image clip to the 12px
     corner (the media-corner-overflow fix). Specificity (0,2,0) cleanly beats the block's .border-style
     class (0,1,0); the inline border-override render only sets --border-* custom PROPS (not the border
     longhands), so it never fights this. design_system.md v1.5 ledger #1. NOTE: the whole-card hover ZOOM is
     the base.css theme setting .card-hover-effect-scale (settings_data card_hover_effect:"scale", already
     on) — it stays, and the ez rail card now matches it. */
  .product-card .product-card__content {
    border: var(--ez-card-border, 1px solid rgb(0 0 0 / 0.10));
    border-radius: var(--ez-card-radius, 12px);
    box-shadow: var(--ez-card-shadow, 0 6px 14px rgb(0 0 0 / 0.06));
    overflow: clip;
  }
  /* the small chrome-context cards (cart-drawer / header / predictive-search) stay FLAT on their own
     surfaces — no border, shadow, rounded corner, or clip. Placed AFTER the rule above; equal (0,2,0)
     specificity, later wins. */
  .predictive-search-results__card .product-card__content,
  .header .product-card__content,
  .header-drawer .product-card__content {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
  }

  /* [v1.4] TASK 3 — swatch-tap independence on the stretched-link card. The whole card is a
     position:absolute inset:0 anchor (.product-card__link) overlaying everything; explicitly raise
     the interactive swatch controls ABOVE it so a swatch TAP always changes the colour (never gets
     swallowed by the card's navigate-to-PDP), while the non-swatch card area still navigates.
     touch-action:manipulation makes the tap crisp on mobile (no 300ms delay / double-tap-zoom). */
  .product-card swatches-variant-picker-component {
    position: relative;
    z-index: 2;
  }
  .product-card .variant-option__swatch label,
  .product-card .variant-option__swatch input {
    touch-action: manipulation;
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:312) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

    @media screen and (min-width: 750px) {
      display: grid;
    }
  }

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:314) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:315) */
.dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  .dialog-zoomed-gallery__dialog {
    view-transition-name: zoom-dialog-ui;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:316) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:317) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:318) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal */

/* START_SNIPPET:quick-add (INDEX:319) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:320) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:321) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image .image-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search-modal (INDEX:325) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    will-change: transform, opacity;
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  /* v1.3 focus-model v2 (design_system.md §6 B-1/B-2): HOVER = light neutral fill;
     FOCUS = the wrapper border darkens to ink on a white interior, NO outline ring. */
  @media (hover: hover) {
    .predictive-search-form__header-inner:hover,
    .predictive-search-form__header:hover {
      background-color: var(--color-input-hover-background);
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline: none;
    border-color: var(--color-foreground);
    background-color: var(--color-background);
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    background-color: var(--color-background);
    /* v1.3 focus-model v2: the wrapper border darkens to ink on focus (the one indicator, no ring). */
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-foreground) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  .search-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:326) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:327) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:329) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:331) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-controls (INDEX:333) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:335) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:336) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media screen and (min-width: 750px) {
      gap: 0;
    }
  }

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:344) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:354) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:355) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:356) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:357) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */