/** Shopify CDN: Minification failed

Line 29681:18 Expected identifier but found whitespace
Line 29681:20 Unexpected "{"
Line 29681:30 Expected ":"
Line 29681:66 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:article-editorial-mab (INDEX:2) */
/* When body_images are set the prose and its images render as alternating split bands. The outer
     wrapper carries the section's vertical rhythm; each nested band carries none of its own. */
  .article-editorial-splits {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-beats);
  }

  .journal-tags {
    padding-inline: var(--page-margin);
  }

  .journal-tags__row {
    max-width: var(--content-max-w, 780px);
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mab-gap-eyebrow);
    padding-block: var(--mab-gap-block);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  /* A tag is a pill, per the brand charter — 999px, unlike a button's 8px, because it labels rather
     than acts. The register is the label register: Courier Prime 400, uppercase. */
  /* Shape, type and states come from `mab-chip`. What is left here is nothing — kept as a hook
     for anything this row needs that a filter row does not. */

  /* A BODY IMAGE OPENS PAST THE READING COLUMN — the article's one structural interruption.

     The event page interrupts its prose with split bands drawn from a gallery field. An article has
     no gallery: it has a featured image, which the lead already spent, and whatever the museum typed
     into the body. So the interruption here is a change of MEASURE rather than a band. The prose
     keeps the reading measure and the picture takes the section measure — 780px against 1100px at
     1440, a 160px opening on each side — so the column visibly widens for the picture and closes
     again for the paragraph after it.

     The picture does not move. Hoisting body images into a grid was rejected because they sit beside
     their own passage — Alraune's photograph after Alraune's method — and everything here is one CSS
     rule, so the pairing the museum authored survives untouched. Nothing is added to the body and
     nothing has to be authored.

     WHY `cqi` AND NOT `vw`. The plate needs the width of the padded content area, and from inside a
     780px column a percentage cannot see it. `100vw` can, and includes the scrollbar, which is a few
     pixels of horizontal overflow on every desktop. `container-type: inline-size` on the section's
     own padded wrapper makes `100cqi` exactly that area, so the plate is capped by the space that
     actually exists: 1100 at 1440, 910 at 990, and the full column at 768 and below, where there is
     no spare width and the device correctly does nothing.

     Articles with no body images render an uninterrupted column, which is the same way the event
     page degrades when an entry has no photographs. The selector is `img` and not `p:has(> img)`
     because the museum's images are also typed inside `<em>` and inside an `<h2>`.

     Scoped to the article template on purpose. A section's stylesheet block compiles into styles.css
     whatever renders it, and `editorial-content-mab` is also the institutional pages and the event
     description: an unscoped rule here would restyle every inline image on the store from a file
     about articles. */
  .template-article .editorial-content-mab {
    container-type: inline-size;
  }

  /* `max-inline-size: none` releases Heritage's `img { max-width: 100% }`, which is the reading
     column here and silently clamped the plate back to 780 — the negative margin still applied, so
     the picture came out column-width and shifted 160px left. Releasing it means the width is forced
     rather than capped by the file: every body image on this store today is 2048px or wider, so
     nothing is upscaled today, and a narrower file uploaded later would be stretched. That is a
     file to replace, not a rule to weaken — the same call event-pivot makes about a small scan. */
  .template-article .editorial-content-mab__body.rte img {
    --journal-plate-w: min(var(--mab-measure-section), 100cqi);
    display: block;
    inline-size: var(--journal-plate-w);
    max-inline-size: none;
    block-size: auto;
    margin-inline: calc(50% - var(--journal-plate-w) / 2);
    margin-block: var(--mab-gap-beats);
    border-radius: var(--mab-radius-base);
  }
/* END_SECTION:article-editorial-mab */

/* START_SECTION:bundle-builder-fix-mab (INDEX:4) */
/*
   * MW Bundle Builder — Mobile sticky bar (light DOM, inline-style overrides)
   * .OfferCart-MobileCartButton--mobileCartButton is rendered outside the shadow root,
   * so standard CSS with !important beats the MW inline styles.
   */

  /* Bar container */
  .OfferCart-MobileCartButton--mobileCartButton {
    background: var(--mab-ivory) !important;
    border-top: 1px solid rgb(var(--mab-ink-rgb) / 0.12) !important;
    padding: 1rem 1.25rem !important;
  }

  /* "My bundle (X/5)" label — Rubik 500, editorial weight */
  .OfferCart-MobileCartButton--mobileCartButton > span {
    font-family: var(--font-heading--family, 'Space Grotesk', sans-serif) !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: rgb(var(--mab-ink-rgb) / 1) !important;
  }

  /* "View" → ghost CTA: Courier Prime 400, uppercase, ghost border, 8px radius */
  .OfferCart-MobileCartButton--mobileCartButton .Button {
    font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
    font-size: var(--mab-size-micro) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--mab-tracking-cta) !important;
    text-decoration: none !important;
    color: rgb(var(--mab-ink-rgb) / 1) !important;
    padding: 0.625rem 1.25rem !important;
    border: 1px solid rgb(var(--mab-ink-rgb) / 0.3) !important;
    border-radius: var(--mab-radius-base) !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4em !important;
  }

  /* Directional arrow appended via ::after — no JS, no HTML change needed */
  .OfferCart-MobileCartButton--mobileCartButton .Button::after {
    content: '→';
    font-family: inherit;
    transition: transform 0.25s var(--mab-easing-bounce);
  }

  .OfferCart-MobileCartButton--mobileCartButton .Button:hover {
    background: rgb(var(--mab-ink-rgb) / 0.04) !important;
    border-color: rgb(var(--mab-ink-rgb) / 0.55) !important;
  }

  .OfferCart-MobileCartButton--mobileCartButton .Button:hover::after {
    transform: translateX(3px);
  }
/* END_SECTION:bundle-builder-fix-mab */

/* START_SECTION:collection-carousel-mab (INDEX:7) */
/* ===== Collection Carousel — Section Layout ===== */

  /* ===== Carousel slide sizing ===== */

  /* Mobile peek: expose next card edge */
  .collection-carousel-mab__carousel {
    --gutter-slide-width: 5%;
  }

  .collection-carousel-mab__carousel slideshow-slides {
    gap: 1.5rem;
  }

  .collection-carousel-mab__slide {
    width: auto;
    flex: 0 0 85%;
    scroll-snap-align: center;
  }

  @media (min-width: 750px) {
    .collection-carousel-mab__slide {
      flex: 0 0 calc((100% - 1.5rem) / 2);
      max-width: none;
      scroll-snap-align: start;
    }
  }

  @media (min-width: 990px) {
    .collection-carousel-mab__slide {
      flex: 0 0 calc((100% - 1.5rem * (var(--collection-columns-desktop, 3) - 1)) / var(--collection-columns-desktop, 3));
    }
  }

  /* ===== Collection Card — Editorial Overlay ===== */
  .collection-card-mab {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .collection-card-mab .collection-card-mab__media {
    /* Dark ground for the card face. Remove this and the caption text has no
       CSS background — the image overlay is not a background-color property. */
    background-color: var(--mab-ink);
    position: relative;
    border-radius: var(--mab-radius-lg);
    overflow: hidden;
  }

  .collection-card-mab__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Atmospheric placeholder when no collection image.
     Uses brand-tinted gradients for an editorial feel. */
  .collection-card-mab__placeholder {
    width: 100%;
    height: 100%;
    background:
      linear-gradient(
        165deg,
        rgb(var(--mab-green-rgb) / 0.12) 0%,
        rgb(var(--mab-green-rgb) / 0.22) 40%,
        rgb(var(--mab-ink-rgb) / 0.30) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.08) 100%
      );
  }

  /* Per-card tint variation for visual rhythm */
  .collection-carousel-mab__slide:nth-child(2) .collection-card-mab__placeholder {
    background:
      linear-gradient(
        155deg,
        rgb(var(--mab-copper-rgb) / 0.10) 0%,
        rgb(var(--mab-green-rgb) / 0.18) 50%,
        rgb(var(--mab-ink-rgb) / 0.28) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.07) 100%
      );
  }

  .collection-carousel-mab__slide:nth-child(3) .collection-card-mab__placeholder {
    background:
      linear-gradient(
        170deg,
        rgb(var(--mab-ink-rgb) / 0.08) 0%,
        rgb(var(--mab-green-rgb) / 0.20) 45%,
        rgb(var(--mab-ink-rgb) / 0.32) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.02) 0%,
        rgb(var(--color-foreground-rgb) / 0.08) 100%
      );
  }

  .collection-carousel-mab__slide:nth-child(4) .collection-card-mab__placeholder {
    background:
      linear-gradient(
        150deg,
        rgb(var(--mab-green-rgb) / 0.14) 0%,
        rgb(var(--mab-copper-rgb) / 0.12) 40%,
        rgb(var(--mab-ink-rgb) / 0.26) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.07) 100%
      );
  }

  .collection-carousel-mab__slide:nth-child(5) .collection-card-mab__placeholder {
    background:
      linear-gradient(
        160deg,
        rgb(var(--mab-copper-rgb) / 0.14) 0%,
        rgb(var(--mab-green-rgb) / 0.15) 50%,
        rgb(var(--mab-ink-rgb) / 0.30) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.02) 0%,
        rgb(var(--color-foreground-rgb) / 0.09) 100%
      );
  }

  /* The card's single scrim: it carries the caption's text and answers the hover. Spanning the
     whole card lets the fade run its full height, so there is no edge where the weight stops.
     The stops hold the text band near --mab-overlay-medium, which is the contrast the ivory
     caption needs on a pale photograph. */
  .collection-card-mab__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      var(--mab-overlay-strong) 0%,
      var(--mab-overlay-medium) 34%,
      var(--mab-overlay-dim) 58%,
      var(--mab-overlay-faint) 78%,
      rgb(0 0 0 / 0) 100%
    );
    transition: background var(--mab-duration-base) ease;
    pointer-events: none;
  }

  .collection-card-mab:hover .collection-card-mab__overlay {
    background: linear-gradient(
      to top,
      var(--mab-overlay-strong) 0%,
      var(--mab-overlay-medium) 45%,
      var(--mab-overlay-dim) 68%,
      var(--mab-overlay-faint) 85%,
      rgb(0 0 0 / 0) 100%
    );
  }

  /* Caption at the bottom of the image. The scrim behind it belongs to the card's overlay. */
  .collection-card-mab__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1.25rem;
    text-align: center;
  }

  /* Product count preheader — triple-class specificity (0,3,0) to beat
     global body.mab-theme .mab-preheader (0,2,0) which forces opacity: 0.65.
     On dark scrim overlay we need full opacity and light color. */
  .collection-card-mab .collection-card-mab__caption .collection-card-mab__count {
    display: block;
    color: rgb(var(--mab-ivory-rgb) / 0.75);
    opacity: 1;
    text-shadow: var(--mab-shadow-text-sm);
    margin-block-end: 0.375rem;
    font-size: var(--mab-size-micro);
    letter-spacing: 0.14em;
  }

  /* Collection name — triple-class specificity (0,3,0) to beat
     global body.mab-theme .mab-card-title (0,2,0) which forces
     color: rgb(var(--color-foreground-rgb)) → dark ink on dark scrim. */
  .collection-card-mab .collection-card-mab__caption .collection-card-mab__name {
    color: var(--mab-ivory);
    text-shadow: var(--mab-shadow-text-md);
    margin-block-end: 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  /* Arrow indicator */
  .collection-card-mab__arrow {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-size: 1rem;
    color: rgb(var(--mab-ivory-rgb) / 0.45);
    transition: color var(--mab-duration-medium) ease, transform var(--mab-duration-medium) var(--mab-easing-bounce);
  }

  .collection-card-mab:hover .collection-card-mab__arrow {
    color: rgb(var(--mab-ivory-rgb) / 0.85);
    transform: translateX(4px);
  }

  /* ===== Scroll reveal — staggered per card ===== */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .collection-carousel-mab__slide {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce),
                  transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    /* Stagger each card for a cascading reveal */
    [data-scroll-reveal] .collection-carousel-mab__slide:nth-child(1) {
      transition-delay: 0.12s;
    }
    [data-scroll-reveal] .collection-carousel-mab__slide:nth-child(2) {
      transition-delay: 0.22s;
    }
    [data-scroll-reveal] .collection-carousel-mab__slide:nth-child(3) {
      transition-delay: 0.32s;
    }
    [data-scroll-reveal] .collection-carousel-mab__slide:nth-child(4) {
      transition-delay: 0.42s;
    }
    [data-scroll-reveal] .collection-carousel-mab__slide:nth-child(5) {
      transition-delay: 0.52s;
    }

    [data-scroll-reveal].is-visible .collection-carousel-mab__slide {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:collection-carousel-mab */

/* START_SECTION:collection-links (INDEX:8) */
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:collection-seo-text-mab (INDEX:10) */
/* ── Layout ── */
  .collection-seo-text-mab {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-inline: var(--page-margin);
  }

  .collection-seo-text-mab__inner {
    max-width: 760px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ── Editorial opener: leaf signature ── */
  .collection-seo-text-mab__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: 2.5rem;
  }

  .collection-seo-text-mab__leaf {
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.4;
  }

  .collection-seo-text-mab__leaf svg {
    display: block;
    height: 28px;
    width: auto;
    margin-inline: auto;
  }

  /* ── Body ── */
  .collection-seo-text-mab__body {
    width: 100%;
    text-align: left;
    color: rgb(var(--color-foreground-rgb) / 0.82);
    font-family: var(--font-body--family);
    line-height: 1.8;
    font-size: 0.9375rem;
  }

  .collection-seo-text-mab__body p {
    margin: 0 0 1.25em;
  }

  .collection-seo-text-mab__body p:last-child {
    margin-bottom: 0;
  }

  /* H2 — real section heading: Space Grotesk 500, confident, centered.
     Acts as the section's title (like an essay chapter heading). */
  .collection-seo-text-mab__body h2 {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--color-foreground-heading);
    text-align: center;
    margin: 0 0 2.25rem;
  }

  .collection-seo-text-mab__body h2:not(:first-child) {
    margin-top: 3.25rem;
  }

  /* H3 — sub-section marker using the .mab-preheader-line pattern
     (matches tasting-guide beats): Courier Prime uppercase with 120px
     accent line on the right. */
  .collection-seo-text-mab__body h3 {
    font-family: var(--font-preheader--family);
    font-weight: 400;
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: var(--mab-tracking-label);
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.75);
    margin: 2.75rem 0 1.125rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .collection-seo-text-mab__body h3::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 2px;
    background: currentColor;
    opacity: 0.85;
  }

  /* ── "Further reading" block: link-only paragraphs ──
     Targets <p> that contain only a single <a>. Styled as compact
     Courier Prime CTAs. A separator is drawn before the first of a series. */
  .collection-seo-text-mab__body p:has(> a:only-child) {
    font-family: var(--font-preheader--family);
    font-size: 0.8125rem;
    line-height: 1.5;
    letter-spacing: var(--mab-tracking-body);
    text-transform: uppercase;
    margin: 0.4em 0;
  }

  .collection-seo-text-mab__body p:has(> a:only-child) a {
    text-underline-offset: 5px;
  }

  .collection-seo-text-mab__body > :not(p:has(> a:only-child)) + p:has(> a:only-child) {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Numbered list with Courier Prime counters */
  .collection-seo-text-mab__body ol {
    counter-reset: seo-step;
    list-style: none;
    padding-inline-start: 0;
    margin: 0 0 1.25em;
  }

  .collection-seo-text-mab__body ol li {
    counter-increment: seo-step;
    padding-inline-start: 2.5rem;
    position: relative;
    margin-bottom: 1.25em;
  }

  .collection-seo-text-mab__body ol li::before {
    content: counter(seo-step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--font-preheader--family);
    color: rgb(var(--color-foreground-rgb) / 0.35);
    font-size: 0.8rem;
    line-height: 1.8;
    top: 0;
  }

  /* Unordered list with em-dash markers */
  .collection-seo-text-mab__body ul {
    list-style: none;
    padding-inline-start: 0;
    margin: 0 0 1.25em;
  }

  .collection-seo-text-mab__body ul li {
    padding-inline-start: 1.5rem;
    position: relative;
    margin-bottom: 0.5em;
  }

  .collection-seo-text-mab__body ul li::before {
    content: '—';
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--font-preheader--family);
    color: rgb(var(--color-foreground-rgb) / 0.35);
    font-size: 0.85rem;
    line-height: 1.8;
  }

  /* HR separator */
  .collection-seo-text-mab__body hr {
    border: none;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    margin: 2.25rem 0;
  }

  /* Refined link treatment */
  .collection-seo-text-mab__body a {
    color: var(--color-foreground-heading);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.3);
    transition: text-decoration-color var(--mab-duration-fast) ease,
                color var(--mab-duration-fast) ease;
  }

  .collection-seo-text-mab__body a:hover {
    text-decoration-color: var(--color-primary-button-background);
    color: var(--color-foreground-heading);
  }

  /* ── Placeholder (design mode) ── */
  .collection-seo-text-mab__placeholder {
    padding: 2rem;
    background: rgb(var(--color-foreground-rgb) / 0.04);
    border-radius: var(--mab-radius-base);
    text-align: left;
    max-width: 100%;
    opacity: 0.7;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  /* ── Scroll-reveal animation (staggered for editorial entrance) ── */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .collection-seo-text-mab__reveal {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity var(--mab-duration-reveal) ease-out,
                  transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .collection-seo-text-mab__reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Mobile tuning ── */
  @media screen and (max-width: 749px) {
    .collection-seo-text-mab__header {
      margin-block-end: var(--mab-gap-block);
    }

    .collection-seo-text-mab__body {
      font-size: 0.875rem;
      line-height: 1.75;
    }

    .collection-seo-text-mab__body h2 {
      margin-bottom: 1.75rem;
    }

    .collection-seo-text-mab__body h3 {
      margin-top: 2.25rem;
    }

    .collection-seo-text-mab__body h3::after {
      max-width: 80px;
    }
  }
/* END_SECTION:collection-seo-text-mab */

/* START_SECTION:contact-form-band-mab (INDEX:12) */
.contact-form-band-mab {
    padding-inline: var(--page-margin);
  }

  /* The form sits in the same content column as every page-width band, and takes its own
     width inside it from the block's width settings. */
  .contact-form-band-mab__inner {
    display: flex;
    justify-content: center;
    max-width: var(--page-content-width);
    margin-inline: auto;
  }
/* END_SECTION:contact-form-band-mab */

/* START_SECTION:distiller-carousel-mab (INDEX:14) */
/* ===== Carousel slide sizing ===== */

  /* Mobile peek: expose next card edge */
  .distiller-carousel-mab__carousel {
    --gutter-slide-width: 5%;
  }

  .distiller-carousel-mab__carousel slideshow-slides {
    gap: 1.5rem;
  }

  .distiller-carousel-mab__slide {
    width: auto;
    flex: 0 0 85%;
    scroll-snap-align: center;
  }

  @media (min-width: 750px) {
    .distiller-carousel-mab__slide {
      flex: 0 0 calc((100% - 1.5rem) / 2);
      max-width: none;
      scroll-snap-align: start;
    }
  }

  @media (min-width: 990px) {
    .distiller-carousel-mab__slide {
      flex: 0 0 calc((100% - 1.5rem * (var(--distiller-columns-desktop, 4) - 1)) / var(--distiller-columns-desktop, 4));
    }
  }

  /* 5-col override at ≥1920px — matches distillers-list-mab responsive grid */
  @media (min-width: 1920px) {
    .distiller-carousel-mab__slide {
      flex: 0 0 calc((100% - 1.5rem * 4) / 5);
    }
  }

  /* ===== Distiller Card — Editorial Overlay ===== */
  .distiller-card-mab {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .distiller-card-mab .distiller-card-mab__media {
    /* Dark ground for the card face. Remove this and the caption text has no
       CSS background — the image overlay is not a background-color property. */
    background-color: var(--mab-ink);
    position: relative;
    border-radius: var(--mab-radius-lg);
    overflow: hidden;
  }

  .distiller-card-mab__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Atmospheric placeholder when no cover image.
     Uses brand-tinted gradients for an editorial feel. */
  .distiller-card-mab__placeholder {
    width: 100%;
    height: 100%;
    background:
      linear-gradient(
        165deg,
        rgb(var(--mab-green-rgb) / 0.12) 0%,
        rgb(var(--mab-green-rgb) / 0.22) 40%,
        rgb(var(--mab-ink-rgb) / 0.30) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.08) 100%
      );
  }

  /* Per-card tint variation for visual rhythm */
  .distiller-carousel-mab__slide:nth-child(2) .distiller-card-mab__placeholder {
    background:
      linear-gradient(
        155deg,
        rgb(var(--mab-copper-rgb) / 0.10) 0%,
        rgb(var(--mab-green-rgb) / 0.18) 50%,
        rgb(var(--mab-ink-rgb) / 0.28) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.07) 100%
      );
  }

  .distiller-carousel-mab__slide:nth-child(3) .distiller-card-mab__placeholder {
    background:
      linear-gradient(
        170deg,
        rgb(var(--mab-ink-rgb) / 0.08) 0%,
        rgb(var(--mab-green-rgb) / 0.20) 45%,
        rgb(var(--mab-ink-rgb) / 0.32) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.02) 0%,
        rgb(var(--color-foreground-rgb) / 0.08) 100%
      );
  }

  .distiller-carousel-mab__slide:nth-child(4) .distiller-card-mab__placeholder {
    background:
      linear-gradient(
        150deg,
        rgb(var(--mab-green-rgb) / 0.14) 0%,
        rgb(var(--mab-copper-rgb) / 0.12) 40%,
        rgb(var(--mab-ink-rgb) / 0.26) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.07) 100%
      );
  }

  /* Gradient scrim overlay for text readability */
  .distiller-card-mab__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      var(--mab-overlay-medium) 0%,
      var(--mab-overlay-light) 45%,
      rgb(0 0 0 / 0) 70%
    );
    transition: background var(--mab-duration-base) ease;
    pointer-events: none;
  }

  .distiller-card-mab:hover .distiller-card-mab__overlay {
    background: linear-gradient(
      to top,
      var(--mab-overlay-strong) 0%,
      var(--mab-overlay-dim) 45%,
      var(--mab-overlay-faint) 70%
    );
  }

  /* Caption positioned at bottom of image */
  .distiller-card-mab__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    text-align: center;
  }

  /* Region — ivory 75%, Courier Prime (triple-class specificity 0,3,0) */
  .distiller-card-mab .distiller-card-mab__caption .distiller-card-mab__region {
    display: block;
    color: rgb(var(--mab-ivory-rgb) / 0.75);
    opacity: 1;
    text-shadow: var(--mab-shadow-text-sm);
    margin-block-end: 0.375rem;
    font-size: var(--mab-size-micro);
    letter-spacing: 0.14em;
  }

  /* Name — ivory var(--mab-ivory), Space Grotesk 500 (triple-class specificity 0,3,0) */
  .distiller-card-mab .distiller-card-mab__caption .distiller-card-mab__name {
    color: var(--mab-ivory);
    text-shadow: var(--mab-shadow-text-md);
    margin-block-end: 0;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  /* Spring arrow */
  .distiller-card-mab__arrow {
    display: inline-block;
    margin-block-start: 0.5rem;
    font-size: 1rem;
    color: rgb(var(--mab-ivory-rgb) / 0.45);
    transition: color var(--mab-duration-medium) ease, transform var(--mab-duration-medium) var(--mab-easing-bounce);
  }

  .distiller-card-mab:hover .distiller-card-mab__arrow {
    color: rgb(var(--mab-ivory-rgb) / 0.85);
    transform: translateX(4px);
  }

  /* ===== CTA footer ===== */
  .distiller-carousel-mab__footer {
    display: flex;
    justify-content: center;
    margin-block-start: 2.5rem;
  }

  /* Ghost CTA style → .mab-cta-ghost in mab-base.css */
  .distiller-carousel-mab__cta:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.4);
    outline-offset: 3px;
  }

  /* ===== Scroll reveal — per-card stagger ===== */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .distiller-carousel-mab__slide {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce),
                  transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .distiller-carousel-mab__slide:nth-child(1) { transition-delay: 0.12s; }
    [data-scroll-reveal] .distiller-carousel-mab__slide:nth-child(2) { transition-delay: 0.22s; }
    [data-scroll-reveal] .distiller-carousel-mab__slide:nth-child(3) { transition-delay: 0.32s; }
    [data-scroll-reveal] .distiller-carousel-mab__slide:nth-child(4) { transition-delay: 0.42s; }
    [data-scroll-reveal] .distiller-carousel-mab__slide:nth-child(5) { transition-delay: 0.52s; }

    [data-scroll-reveal].is-visible .distiller-carousel-mab__slide {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:distiller-carousel-mab */

/* START_SECTION:distiller-gallery-mab (INDEX:15) */
.distiller-gallery {
    overflow: hidden;
  }

  .distiller-gallery__header {
    padding-inline: var(--page-margin);
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    margin-block-end: 1.5rem;
  }

  /* Base typography via .mab-section-title utility */

  /* Peek mode — slides narrower than viewport with adjacent slide edges visible */
  .distiller-gallery--with-peek .distiller-gallery__slideshow {
    --gutter-slide-width: 5%;
  }

  @media screen and (min-width: 750px) {
    .distiller-gallery--with-peek .distiller-gallery__slideshow {
      --gutter-slide-width: 7.5%;
    }
  }

  .distiller-gallery__slideshow slideshow-slides {
    gap: var(--dg-gap, 16px);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .distiller-gallery--with-peek .distiller-gallery__slideshow slideshow-slide {
    flex: 0 0 90%;
    scroll-snap-align: center;
  }

  @media screen and (min-width: 750px) {
    .distiller-gallery--with-peek .distiller-gallery__slideshow slideshow-slide {
      flex: 0 0 85%;
    }
  }

  /* Full-width mode */
  .distiller-gallery--full-width .distiller-gallery__slideshow slideshow-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Clone elements for infinite scroll — match real slide sizing */
  .distiller-gallery--with-peek .distiller-gallery__clone {
    flex: 0 0 90%;
    scroll-snap-align: center;
  }

  @media screen and (min-width: 750px) {
    .distiller-gallery--with-peek .distiller-gallery__clone {
      flex: 0 0 85%;
    }
  }

  .distiller-gallery--full-width .distiller-gallery__clone {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Image container */
  .distiller-gallery__image-container {
    width: 100%;
    overflow: hidden;
    border-radius: 0;
  }

  .distiller-gallery__image-container--cinematic { max-height: 600px; }

  .distiller-gallery--with-peek .distiller-gallery__image-container {
    border-radius: var(--mab-radius-base);
  }

  .distiller-gallery__image-container--landscape { aspect-ratio: var(--mab-ratio-wide); }
  .distiller-gallery__image-container--cinematic { aspect-ratio: var(--mab-ratio-cinematic); }

  .distiller-gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .distiller-gallery__caption {
    font-family: var(--font-accent--family);
    font-weight: 400;
    font-size: 0.75rem;
    text-align: center;
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.6;
    margin: 0.75rem 0 0;
  }

  .distiller-gallery__image--placeholder {
    width: 100%;
    height: 100%;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .distiller-gallery__image--placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .distiller-gallery__placeholder {
    padding: 2rem;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
    margin-inline: var(--page-margin);
  }

  @media (prefers-reduced-motion: reduce) {
    .distiller-gallery__slideshow slideshow-slides {
      scroll-behavior: auto;
    }
  }

  /* Scroll-reveal entrance */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .distiller-gallery__header,
    [data-scroll-reveal] .distiller-gallery__slideshow {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce), transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .distiller-gallery__slideshow {
      transition-delay: 0.1s;
    }

    [data-scroll-reveal].is-visible .distiller-gallery__header,
    [data-scroll-reveal].is-visible .distiller-gallery__slideshow {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:distiller-gallery-mab */

/* START_SECTION:distiller-hero-mab (INDEX:16) */
/* ===== Editorial hero ===== */
  .distiller-hero--editorial {
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--product-card-media-background), rgb(var(--color-foreground-rgb)) 18%) 0%,
      var(--product-card-media-background) 45%,
      rgb(var(--color-background-rgb)) 100%
    );
    display: flex;
    justify-content: center;
    padding-inline: var(--page-margin);
  }

  @media screen and (max-width: 749px) {
    .distiller-hero--editorial { padding-block-start: max(calc(var(--header-height, 56px) + 2rem), 5rem); }
  }

  .distiller-hero__editorial-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    width: 100%;
    gap: 0;
  }

  .distiller-hero--align-left .distiller-hero__editorial-inner {
    align-items: flex-start;
    text-align: left;
  }

  .distiller-hero__editorial-logo {
    margin-block-end: 1.5rem;
  }

  .distiller-hero__logo-image {
    max-width: 180px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  @media screen and (min-width: 750px) {
    .distiller-hero__logo-image {
      max-width: 240px;
      max-height: 100px;
    }
  }

  .distiller-hero__editorial-title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin: 0;
    color: rgb(var(--color-foreground-heading-rgb));
    margin-block-end: 1.25rem;
  }

  /* Base typography via .mab-preheader utility */
  .distiller-hero__editorial-location {
    margin-block-end: 0.75rem;
  }

  .distiller-hero__editorial-tagline {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.7;
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.85;
    max-width: 680px;
    margin: 0;
  }

  /* Editorial staggered entrance */
  @media (prefers-reduced-motion: no-preference) {
    .distiller-hero__reveal {
      animation: distiller-hero-reveal 0.8s var(--mab-easing-bounce) backwards;
      animation-delay: var(--reveal-delay, 0s);
    }
  }

  @keyframes distiller-hero-reveal {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:distiller-hero-mab */

/* START_SECTION:distiller-products-mab (INDEX:17) */
.distiller-products-mab {
    padding-inline: var(--page-margin);
  }

  /* Center cards when count ≤ desktop columns — desktop only.
     On mobile/tablet cards overflow regardless, centering clips the start. */
  @media (min-width: 990px) {
    .distiller-products-mab__carousel--centered slideshow-slides {
      justify-content: center;
    }
  }

  /* Carousel slide sizing — mirrors featured-products-mab */
  .distiller-products-mab__carousel slideshow-slides {
    gap: 1.25rem;
    align-items: stretch;
  }

  .distiller-products-mab__slide {
    width: auto;
    flex: 0 0 calc(100% - 2 * var(--page-margin, 1.5rem) - 2rem);
    max-width: none;
    scroll-snap-align: start;
    display: flex;
  }

  @media (min-width: 750px) {
    .distiller-products-mab__slide {
      flex: 0 0 calc((100% - 1.25rem) / 2);
    }
  }

  @media (min-width: 990px) {
    .distiller-products-mab__slide {
      flex: 0 0 calc(
        (100% - 1.25rem * (var(--featured-columns-desktop, 4) - 1)) / var(--featured-columns-desktop, 4)
      );
    }
  }

  /* Scroll reveal — staggered per card */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .distiller-products-mab__slide {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce),
                  transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(1) { transition-delay: 0.1s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(2) { transition-delay: 0.2s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(3) { transition-delay: 0.3s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(4) { transition-delay: 0.4s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(5) { transition-delay: 0.5s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(6) { transition-delay: 0.6s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(7) { transition-delay: 0.7s; }
    [data-scroll-reveal] .distiller-products-mab__slide:nth-child(8) { transition-delay: 0.8s; }

    [data-scroll-reveal].is-visible .distiller-products-mab__slide {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .distiller-products-mab__placeholder {
    padding: 2rem;
    background: rgba(var(--color-foreground-rgb), 0.05);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }

  .distiller-products-mab__placeholder p {
    margin: 0.5rem 0;
  }

  .distiller-products-mab__placeholder code {
    background: rgba(var(--color-foreground-rgb), 0.1);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
  }
/* END_SECTION:distiller-products-mab */

/* START_SECTION:distiller-signature-mab (INDEX:18) */
.distiller-signature {
    text-align: center;
    padding-inline: var(--page-margin);
  }

  .distiller-signature__inner {
    max-width: 650px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .distiller-signature__icon {
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.4;
    margin-block-end: 1.25rem;
  }

  .distiller-signature__heading {
    font-family: var(--font-heading--family);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: var(--font-heading--weight);
    color: rgb(var(--color-foreground-rgb));
    margin: 0 0 1.25rem;
  }

  .distiller-signature__quote {
    margin: 0;
    padding: 0;
  }

  /* metafield_tag outputs <span> for multi_line_text_field, <p> for rich_text */
  .distiller-signature__quote p,
  .distiller-signature__quote span {
    font-family: var(--font-body--family);
    font-size: clamp(1rem, 2vw, 1.0625rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.8;
    color: rgb(var(--color-foreground-rgb) / 0.85);
    margin: 0;
  }

  /* Base typography via .mab-preheader utility */
  .distiller-signature__attribution {
    display: block;
    margin-block-start: 1.25rem;
    font-style: normal;
    letter-spacing: 0.05em;
    opacity: 1;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  .distiller-signature__cta {
    margin-block-start: 1.5rem;
  }

  /* Scroll-reveal animation */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .distiller-signature__reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .distiller-signature__reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:distiller-signature-mab */

/* START_SECTION:distiller-story-mab (INDEX:19) */
.distiller-story {
    padding-inline: var(--page-margin);
  }

  .distiller-story__container {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ds-row-gap, 64px);
  }

  .distiller-story__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
  }

  /* TWO COLUMNS ONLY FROM 990px, not 750.
     Split at 750 the pair would be too narrow: a photograph too small to read beside prose at
     that reading measure. The image's sizes attribute moves with it; left at 750 the browser
     would fetch a half-column image for a full-width slot through the whole tablet range. The
     text max-widths below deliberately stay at 750: in one full-width column they are what
     holds the reading measure. */
  @media screen and (min-width: 990px) {
    .distiller-story__row {
      grid-template-columns: 1fr 1fr;
      gap: var(--ds-col-gap, 48px);
    }

    .distiller-story__row--image-left .distiller-story__image-wrap {
      order: -1;
    }
  }

  /* Text column */
  .distiller-story__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media screen and (min-width: 750px) {
    .distiller-story__text--narrow { max-width: 440px; }
    .distiller-story__text--medium { max-width: 520px; }
    .distiller-story__text--wide { max-width: 600px; }
  }

  /* Base typography via .mab-preheader-line and .mab-body-text utilities */

  .distiller-story__body h2,
  .distiller-story__body h3,
  .distiller-story__body h4 {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    margin-block: 1.5em 0.5em;
  }

  .distiller-story__body h2:first-child,
  .distiller-story__body h3:first-child,
  .distiller-story__body h4:first-child {
    margin-block-start: 0;
  }

  /* Image column */
  .distiller-story__image-wrap {
    width: 100%;
  }

  .distiller-story__image-container {
    overflow: hidden;
    border-radius: var(--ds-image-radius, var(--mab-radius-base));
    box-shadow: var(--mab-shadow-card);
  }

  .distiller-story__image-container--mild-portrait { aspect-ratio: var(--mab-ratio-mild-portrait); }
  .distiller-story__image-container--portrait { aspect-ratio: var(--mab-ratio-portrait); }
  .distiller-story__image-container--square { aspect-ratio: var(--mab-ratio-square); }
  .distiller-story__image-container--landscape { aspect-ratio: var(--mab-ratio-landscape); }

  .distiller-story__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .distiller-story__image--placeholder {
    width: 100%;
    height: 100%;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .distiller-story__image--placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Scroll-reveal animations — staggered text then image */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .distiller-story__text,
    [data-scroll-reveal] .distiller-story__image-wrap {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce), transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .distiller-story__image-wrap {
      transition-delay: 0.15s;
    }

    [data-scroll-reveal].is-visible .distiller-story__text,
    [data-scroll-reveal].is-visible .distiller-story__image-wrap {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .distiller-story__placeholder {
    padding: 2rem;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }

  /* No-image row: full-width single column, 2-col typographic text on desktop */
  .distiller-story__row--no-image {
    grid-template-columns: 1fr;
  }

  .distiller-story__row--no-image .distiller-story__text {
    max-width: none;
  }

  @media screen and (min-width: 990px) {
    .distiller-story__row--no-image .distiller-story__body {
      columns: 2;
      column-gap: 2.5rem;
      column-fill: balance;
    }
  }
/* END_SECTION:distiller-story-mab */

/* START_SECTION:distillers-list-mab (INDEX:20) */
/* ── Container alignment (matches Heritage --page-margin from body.page-width-*) */
  .distillers-list-mab {
    padding-inline: var(--page-margin);
  }

  .distillers-list-mab .page-width {
    max-width: var(--normal-page-width);
    margin-inline: auto;
  }

  /* ── Header ─────────────────────────────────────────────────────────────── */
  .distillers-list-mab__header {
    max-width: 860px;
    margin-block-end: 0;
  }

  /* Hero-scale H1 for a page title (larger than section subheadings) */
  .distillers-list-mab__header .mab-section-title {
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  /* Intro: editorial 2-3 lines — tighter than long-form body, Rubik 500 weight */
  .distillers-list-mab__intro {
    max-width: 780px;
    font-weight: var(--font-body--weight);
    line-height: 1.6;
  }

  /* ── Header scroll-reveal stagger ────────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .mab-preheader,
    [data-scroll-reveal] .mab-preheader-line,
    [data-scroll-reveal] .distillers-list-mab__header .mab-section-title,
    [data-scroll-reveal] .distillers-list-mab__intro,
    [data-scroll-reveal] .distillers-list-mab__counter {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.55s var(--mab-easing-bounce),
                  transform 0.55s var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .mab-preheader,
    [data-scroll-reveal].is-visible .mab-preheader-line,
    [data-scroll-reveal].is-visible .distillers-list-mab__header .mab-section-title,
    [data-scroll-reveal].is-visible .distillers-list-mab__intro,
    [data-scroll-reveal].is-visible .distillers-list-mab__counter {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Counter as a stat: number stands out, label in preheader weight */
  .distillers-list-mab__counter {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    opacity: 1;
  }

  .distillers-list-mab__counter-number {
    font-family: var(--font-heading--family);
    font-weight: var(--font-body--weight);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.22;
  }

  .distillers-list-mab__counter-label {
    font-family: var(--font-preheader--family);
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-label);
    opacity: 0.65;
  }

  /* ── Separator ───────────────────────────────────────────────────────────── */
  .distillers-list-mab__separator {
    border: none;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    margin-block: 1.5rem 1.75rem;
  }

  /* ── Filter pills ────────────────────────────────────────────────────────── */
  .distillers-list-mab__filter-bar {
    display: block;
    margin-block-end: var(--mab-gap-block);
  }

  .distillers-list-mab__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  @media screen and (max-width: 749px) {
    .distillers-list-mab__pills {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-block-end: 0.25rem;
    }
  }

  /* Shape, type, states and transitions come from `body.mab-theme .mab-chip` (0,2,1).
     Only what mab-chip does not own is declared here. */
  .distillers-list-mab__pill {
    white-space: nowrap;
  }

  /* ── Grid ────────────────────────────────────────────────────────────────── */
  .distillers-list-mab__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  @media screen and (max-width: 749px) {
    .distillers-list-mab__grid { grid-template-columns: 1fr; }
  }

  @media screen and (min-width: 750px) and (max-width: 1399px) {
    .distillers-list-mab__grid { grid-template-columns: repeat(3, 1fr); }
  }

  @media (min-width: 1400px) {
    .distillers-list-mab__grid {
      grid-template-columns: repeat(var(--distillers-columns-desktop, 4), 1fr);
    }
  }

  /* 5-col override at ≥1920px — intentionally ignores --distillers-columns-desktop
     because the extra viewport width justifies one more column regardless of setting */
  @media (min-width: 1920px) {
    .distillers-list-mab__grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  /* ── Placeholder gradient variations for cards without cover image ───────── */
  /* Base is in distiller-carousel-mab.liquid (Absinthe Green tint).          */
  /* Add per-item angle/tint variety so a full grid of placeholders has rhythm */
  .distillers-list-mab__item:nth-child(4n+2) .distiller-card-mab__placeholder {
    background:
      linear-gradient(
        155deg,
        rgb(var(--mab-copper-rgb) / 0.10) 0%,
        rgb(var(--mab-green-rgb) / 0.18) 50%,
        rgb(var(--mab-ink-rgb) / 0.28) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.07) 100%
      );
  }

  .distillers-list-mab__item:nth-child(4n+3) .distiller-card-mab__placeholder {
    background:
      linear-gradient(
        170deg,
        rgb(var(--mab-ink-rgb) / 0.08) 0%,
        rgb(var(--mab-green-rgb) / 0.20) 45%,
        rgb(var(--mab-ink-rgb) / 0.32) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.02) 0%,
        rgb(var(--color-foreground-rgb) / 0.08) 100%
      );
  }

  .distillers-list-mab__item:nth-child(4n+4) .distiller-card-mab__placeholder {
    background:
      linear-gradient(
        150deg,
        rgb(var(--mab-green-rgb) / 0.14) 0%,
        rgb(var(--mab-copper-rgb) / 0.12) 40%,
        rgb(var(--mab-ink-rgb) / 0.26) 100%
      ),
      linear-gradient(
        to bottom,
        rgb(var(--color-foreground-rgb) / 0.03) 0%,
        rgb(var(--color-foreground-rgb) / 0.07) 100%
      );
  }

  /* ── Filter visibility ───────────────────────────────────────────────────── */
  .distillers-list-mab__item.is-hidden {
    display: none;
  }

  /* ── Scroll reveal: stagger first 4 items ────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .distillers-list-mab__item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce),
                  transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: 0.1s;
    }

    [data-scroll-reveal] .distillers-list-mab__item:nth-child(1) { transition-delay: 0.10s; }
    [data-scroll-reveal] .distillers-list-mab__item:nth-child(2) { transition-delay: 0.18s; }
    [data-scroll-reveal] .distillers-list-mab__item:nth-child(3) { transition-delay: 0.26s; }
    [data-scroll-reveal] .distillers-list-mab__item:nth-child(4) { transition-delay: 0.34s; }
    [data-scroll-reveal] .distillers-list-mab__item:nth-child(5) { transition-delay: 0.42s; }

    [data-scroll-reveal].is-visible .distillers-list-mab__item {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:distillers-list-mab */

/* START_SECTION:event-detail-mab (INDEX:23) */
/* THE OPENING PIVOT.

     The wrapper carries the ground, not the band inside it. Heritage forces every `.section` in a
     `.shopify-section` transparent so it can paint an absolutely positioned sibling instead, and a
     band nested in another section has no sibling of its own to paint — its would cover the whole
     article. So the colour sits one level out, on an element no Heritage rule addresses, and the
     band renders transparent over it. This is what `nested: true` on media-band-mab means. */
  /* THE FRAME IS THE FILE'S OWN SHAPE, WHICH IS WHY THERE IS NO HEIGHT SETTING HERE.

     A fixed band height crops whatever does not match it, and an event's lead photograph is as
     likely to be a poster or a face as a building. With the cell carrying the file's aspect the
     shared object-fit: cover has nothing left to cut, and the band's height is whatever the column
     width makes it.

     The width ceiling is the file's own width, so a small scan is never stretched across the
     column; it aligns to the bleeding edge, because a plane that leaves a gap against the text is
     the orphaned image this band exists to remove, and pushed outward it at least stays a plane.

     (0,3,0) because the shared rule it replaces is `body.mab-theme .mab-media-content__media` at
     (0,2,0) and states min-height twice, once per breakpoint. A single-class override would tie and
     be decided by file order. */
  /* NO ASPECT RATIO, so the media fills the band's height.

     The row is a grid and its default alignment is stretch, so the media would rise to the full
     height on its own. A frame ratio would cancel that: it derives the block size from the inline
     size, and a definite block size cancels stretch. Stretch instead lets the height come from the
     copy and the shared component's own floor, never from the file, so a portrait and a banner
     produce the same band. The floor is `min-height: var(--media-height, 480px)` at 750px and
     280px below it, both the museum page's exhibition band values.

     NO CEILING EITHER, and that is what makes the fill a guarantee rather than a tuning. A ceiling
     caps the media while the row keeps the copy's height, so any copy taller than the cap brings
     the shortfall straight back. With neither bound, the row is the copy's height and the media is
     the row's, so the two are equal at every length. What stops a runaway band is therefore how
     much copy enters it, which is `band_target_words`, and no longer a bound on the picture.

     A FLOOR, because a page whose copy is only a couple of lines would otherwise collapse the
     band with it, cropping the picture severely. 280px is the shared component's own small-band
     height, so it is the site's number and not one chosen here. The thin copy behind such a page
     stays a content problem; the floor only stops it disfiguring the layout.

     The floor is its own token and not `var(--media-height-mobile, 280px)`, because the shared
     component's height variables are defined to `auto` on this page — a var() fallback only fires
     for an undefined variable, so that read would resolve to `auto` and the floor would silently
     do nothing. */
  body.mab-theme .event-pivot .mab-media-content__media {
    aspect-ratio: var(--event-pivot-ratio);
    inline-size: min(100%, var(--event-pivot-natural-width));
    justify-self: end;
  }

  /* THE SIDE-BY-SIDE BAND TURNS THE SHAPE INTO A FLOOR IT CAN EXCEED.
     A ratio is a height, and a definite height cancels the stretch that fills the green — that is
     why the picture fell short whenever the copy ran taller than the frame, 32px on the 2024 banner.
     Removing the shape outright is the opposite mistake: on the Pernod page the 4:3 photograph is
     what makes the band 536px tall in the first place, and without it the band collapsed to 280.

     So the shape stays, as a minimum rather than a size. The spacer contributes the height the
     photograph would have had — percentage padding resolves against the inline size, so
     100%/aspect is exactly that height — and being intrinsic rather than definite it leaves the
     stretch intact. The row is then the taller of the copy and that floor, and the media rises to
     the row either way. Below 750px the band stacks, and there the ratio is the only height the box
     has, since the picture inside it is positioned absolutely and contributes none. */
  @media screen and (min-width: 750px) {
    body.mab-theme .event-pivot .mab-media-content__media {
      aspect-ratio: auto;
    }

    body.mab-theme .event-pivot .mab-media-content__media::before {
      content: '';
      display: block;
      padding-block-start: calc(100% * 1000 / var(--event-pivot-aspect));
    }
  }

  /* Cover, not contain: the merchant's call, and it holds — the band reads as a full plane rather
     than a picture floating in green, and letterboxing a poster inside a coloured frame looks like
     a mistake where a crop looks like a choice. The cost is real: a portrait meeting the 33.75rem
     ceiling loses height off the top and bottom, so a file whose subject sits at an edge will lose
     it. That is a content problem to fix at the source, not a reason to letterbox everything. */
  body.mab-theme .event-pivot .mab-media-content__media img {
    object-fit: cover;
  }

  /* The lede reads in the page's own measure and the page's own lead weight — the register it had
     in the reading column, kept when it moved onto the green so that a reader meets one line length
     and one weight for the article's opening wherever it sits.

     The weight selector is compound because `.rte :is(p, li, blockquote)` sets the longform weight
     at (0,2,2), and anything shorter loses to it silently. */
  /* AIR UNDER THE BAND'S HEADING. `mab-media-content__name` carries `margin: 0` and the content
     column is a flex column with no gap, so the heading sat directly on the first sentence — and
     with `line-height: 1.15` a heading that wraps has its own two lines tighter than the gap to
     the copy, which reads as one block of text rather than a title and a paragraph.

     Scoped to .event-pivot rather than fixed in the component, because the museum page renders the
     same band and its spacing has not been looked at. If it wants the same air, the rule belongs
     in mab-base.css on the utility and this override goes away. */
  body.mab-theme .event-pivot .media-band__name {
    margin-block-end: var(--mab-gap-text);
  }

  body.mab-theme .event-pivot .media-band__description {
    max-width: var(--mab-measure-intro);
  }

  /* NO WEIGHT ON THE GREEN. The band's copy used the article's lead-in weight, on the reasoning
     that a reader should meet one weight for the article's opening wherever it sits. The site
     disagrees and the site wins: `mab-media-content__description` — the museum page's own green
     exhibition band — sets 400, and no green zone in this theme carries a heavier body. On a dark
     ground a heavier face reads as shouting rather than as emphasis. */
  body.mab-theme .event-pivot .media-band__description p {
    font-weight: var(--font-longform--weight);
  }

  /* NOT FIXED HERE, ON PURPOSE: on a phone the band's copy stops 32px from the right edge while it
     starts 16px from the left, because Heritage's own rule adds one page margin to the inline end
     of a media-right band on top of the grid's margin column. Reaching it costs a (0,5,1) selector —
     past the (0,4,0) ceiling this project sets — or an edit to the component the museum page also
     renders. Neither is worth 16px of rag on copy that has no hard right edge to align to. */

  /* THE ARTICLE — one section, internal rhythm.
     The outer padding comes from the section's own settings, applied on this wrapper. Every
     chapter inside gives up the band padding it would otherwise carry, and the space between
     two chapters is one gap rather than two paddings. */
  /* Flex column with a gap rather than sibling margins: a band emits an absolutely positioned
     .section-background as its first sibling, which is out of flow here and so takes no gap —
     an adjacent-sibling margin rule was silently skipping every band that followed one. */
  .event-article {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-beats);
    padding-inline: var(--page-margin);
    max-width: var(--page-width);
    margin-inline: auto;
  }

  @media screen and (max-width: 749px) {
    /* 3rem between chapters reads as deliberate breathing room on a 1200px canvas; on a 390px
       phone it uses 50px (~6% of viewport height) between every chapter pair and makes a
       five-chapter article feel like seven separate slabs. --mab-gap-block (2rem) keeps the
       chapters clearly separated without the slab effect. */
    .event-article {
      gap: var(--mab-gap-block);
    }
  }

  /* A band emits its own .section-background, absolutely positioned and painting the whole
     section. The wrapper already carries one of the same colour, so the nested ones repaint
     the same pixels — and being children, they were taking the sibling gap and pushing the
     bands apart by a value nobody wrote. */
  .event-article > .section-background {
    display: none;
  }

  /* A chapter band keeps its geometry and loses its outer padding: the article owns that now.
     (0,2,0) beats .spacing-style's own (0,1,0), which reads the inline custom properties this
     caller no longer sets. The inline padding goes too — the wrapper already applies it, and
     applying it twice would inset every band by two page margins. */
  body.mab-theme [data-section-type='event-chapter'] {
    padding-block: 0;
    padding-inline: 0;
  }

  /* TWO WIDTHS ON THIS PAGE, AND THE DIFFERENCE IS A ROLE.

     Running copy gets a reading measure — the same one the opening's summary takes, so a reader
     meets one line length whether the paragraph sits in the column or beside a picture. Media
     gets the content width. The reading column used to run to 780px and the band's text column to
     the half-band, which was two line lengths for the same kind of text; the measure resolves at
     630px in Rubik, so a band's copy is unchanged to the eye and the column narrows to meet it.

     Nothing is centred. Every block starts on the page's own left edge, the title's included. */
  /* The measure is centred, not flush left. Left-flush it left 719px of unexplained ground to its
     right on every prose block while the split bands beside it ran the full 1349 — three right
     edges in one article, and nothing to say which was which. Centred, the article has one axis:
     wide band, narrow column, wide band, narrow column, all symmetrical about the same spine, so
     the alternation reads as rhythm instead of as a column that failed to fill its row. */
  /* `inline-size` and not `max-width`, because the article is a column flex container: an auto
     margin on the cross axis cancels the default stretch, so a chapter with `max-width` alone is
     sized to its own content and centred. A short chapter then sits inboard of a long one and the
     article shows two left edges. A definite cross size puts every chapter on the same spine. */
  .event-article__prose {
    inline-size: min(100%, var(--mab-measure-intro));
    margin-inline: auto;
  }

  /* A chapter opens on its heading and never carries a second one: rich-text-nodes-mab cuts the
     document at every h2, so the heading is always the block's first child. The air above it is
     therefore the article's own gap, and the borrowed component's rule-above-a-heading device has
     nothing to part — it was a separator drawn where there was already a gap.

     What is kept is the lead-in: the paragraph after a heading in the brand's intro weight. */
  /* ONE HEADING RUNG FOR THE ARTICLE, AND IT IS THE SECTION-TITLE RUNG.

     A chapter heading sat at 22px over a 20px body, which is not a hierarchy — the two sizes were
     close enough to read as one. It takes mab-section-title's rung, the step the theme already has
     above the body: 32px against 16px at 1440, 24px against 16px on a phone. That is also where a
     band's heading already was before this page capped it down to match the reading column, so the
     cap is gone and the two heading families are one rung again, and the page's h1 stays two rungs
     clear of both. */
  .event-article__prose h2 {
    margin-block: 0 var(--mab-gap-text);
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--mab-size-section);
    line-height: var(--mab-leading-heading);
    letter-spacing: -0.01em;
  }

  /* THE LEAD REGISTER — the article's opening passage, and the paragraph that lands under a
     heading, in --font-body--weight. That is the brand's intro weight and the one the opening's
     summary reads in; running copy stays on --font-longform--weight, which is what .rte sets.

     The selectors are compound because that .rte rule is `body.mab-theme .rte :is(p, li,
     blockquote)` at (0,2,2), and a single-class override loses to it — silently. A band chapter's
     heading is rendered by museum-split-mab outside the body, so there is no adjacent sibling to
     key on and its first paragraph is addressed directly.

     :not(:only-of-type) is what keeps the lead-in a lead-in. Four of the five entries with a
     description write one paragraph per heading, so without it the whole article set in the intro
     weight and the register stopped meaning anything: a paragraph that is all the copy there is
     leads into nothing, and is running copy.

     `:first-of-type` on the lede branch matters for the same reason and was missing. That branch
     addresses the chapter directly rather than through an adjacent heading, so `--lede p` took
     EVERY paragraph in it: on the thirteen entries that have a description and no image — where no
     pivot band consumes chapter 0, so it renders as prose and carries the class — the whole first
     chapter set in the intro weight, 190 words of it on the Neuchâtel-accent talk. Invisible until
     the legacy descriptions landed, because before that no entry reached this branch with more
     than one paragraph. */
  body.mab-theme .event-article .event-article__prose--lede p:first-of-type:not(:only-of-type),
  body.mab-theme .event-article .event-article__prose h2 + p:not(:only-of-type),
  body.mab-theme .event-article .event-article__chapter > p:first-child:not(:only-of-type) {
    font-weight: var(--font-body--weight);
  }

  /* The chapter's own class, passed to the split as `body_class`, so this page sets the measure
     its prose reads at without writing a rule against `.mab-split__body` — which eleven other
     bands share. */
  body.mab-theme .event-article__chapter {
    max-width: var(--mab-measure-intro);
  }

  /* ─────────────────────────────────────────────────────────────────────────────
     LISTS — THE TREATMENT THE THEME ALREADY SETTLED, NOT A NEW ONE

     The museum types a plain bullet list in the Shopify rich-text editor, so nothing marks it up
     and nothing may depend on a class Liquid could add.

     The values below are copied, not chosen. `collection-seo-text-mab`, `article-editorial-mab` and
     `.shopify-policy__body` all declare the same treatment: an em dash in the preheader face at
     0.35 ink and 0.85rem, and `decimal-leading-zero` counters for an ordered list. A reader who has
     seen a collection page or a policy page has already met this marker, and a fourth drawing would
     teach them they had changed site by changing page.

     0.35 ink keeps the marker receded, which is what a marker is for — raising it makes the
     marker something to look at instead.
     ───────────────────────────────────────────────────────────────────────────── */
  body.mab-theme .event-article__prose ul,
  body.mab-theme .event-pivot .media-band__description ul {
    list-style: none;
    padding-inline-start: 0;
    margin: 0 0 var(--mab-gap-text);
  }

  body.mab-theme .event-article__prose ul li,
  body.mab-theme .event-pivot .media-band__description ul li {
    padding-inline-start: var(--mab-indent-marker);
    position: relative;
    margin-block-end: var(--mab-gap-eyebrow);
  }

  body.mab-theme .event-article__prose ul li::before,
  body.mab-theme .event-pivot .media-band__description ul li::before {
    content: '—';
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--font-preheader--family);
    color: rgb(var(--color-foreground-rgb) / var(--mab-opacity-marker));
    font-size: var(--mab-size-label);
    line-height: var(--mab-leading-longform);
  }

  body.mab-theme .event-article__prose ol,
  body.mab-theme .event-pivot .media-band__description ol {
    list-style: none;
    counter-reset: event-step;
    padding-inline-start: 0;
    margin: 0 0 var(--mab-gap-text);
  }

  body.mab-theme .event-article__prose ol li,
  body.mab-theme .event-pivot .media-band__description ol li {
    counter-increment: event-step;
    padding-inline-start: var(--mab-indent-counter);
    position: relative;
    margin-block-end: var(--mab-gap-text);
  }

  body.mab-theme .event-article__prose ol li::before,
  body.mab-theme .event-pivot .media-band__description ol li::before {
    content: counter(event-step, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-family: var(--font-preheader--family);
    color: rgb(var(--color-foreground-rgb) / var(--mab-opacity-marker));
    font-size: var(--mab-size-label);
    line-height: var(--mab-leading-longform);
  }

  /* PLATES — the gallery images no chapter took, so nothing the museum uploaded goes unseen
     and no picture appears twice on the page. */
  /* auto-fit rather than a fixed count: the leftovers are however many the chapters did not
     take, and a single closing photograph reading full width is an editorial ending, not a
     third of a row waiting for two more.

     The grid takes the content width, not the reading measure. Capped at the measure it had room
     for one 17.5rem track and produced a second of zero width, so a seven-photograph gallery —
     the whole of what one exhibition has to show — came out as a single stacked column. */
  .event-plates__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: var(--mab-gap-text);
    /* Each plate is as tall as its own file makes it, so a row of portraits and a row of
       landscapes both come out uncropped rather than sharing one height. */
    align-items: start;

    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The lead image's three ceilings, and this is why they are one mechanism rather than two: a
     plate and a lead photograph are the same object at two sizes. A fixed 3:2 frame took about two
     fifths of the height off every one of the seven portrait photographs one exhibition has to
     show, and auto-fit gave a single leftover plate the whole content width, upscaling a 1199px
     file to 1349. The track, the file's own width and the height an uncropped image may stand at
     replace both. */
  .event-plates__item {
    aspect-ratio: var(--event-plate-ratio);
    inline-size: min(
      100%,
      var(--event-plate-natural-width),
      calc(var(--mab-media-natural-height) * var(--event-plate-aspect) / 1000)
    );
    /* Centred, not start-aligned. auto-fit collapses the empty tracks, so a lone closing plate
       inherits the whole content width while the ceilings above keep it at its file width — at
       `start` it hung off the left of a track nearly twice its size, 610px of nothing beside it,
       on a page where every other block is centred on one spine. A plate that fills its track
       does not move. */
    justify-self: center;
  }

  /* ONE OR TWO PLATES PACK TOGETHER INSTEAD OF SPREADING ACROSS THE ROW.
     auto-fit gives two plates half the content width each, and the ceilings above keep a plate at
     its file's width — so a small file centred in a wide track leaves a large gap beside its
     neighbour, reading as two stamps adrift rather than a pair. Packed and centred they sit at the
     declared gap instead.

     Only at one or two, which is what the absence of a third child tests. From three plates up the
     tracks are narrow enough that the files fill them, and the grid's aligned rows are what a
     gallery should be. */
  .event-plates__grid:not(:has(> :nth-child(3))) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .event-plates__image {
    display: block;
  }

  /* The reveal editorial-content-mab__reveal used to supply. The attribute sits on the prose block
     itself rather than on a wrapper, so the wrapper is gone; the global fallback in mab-base.css
     matches the element carrying the attribute as well as its descendants, so a script failure
     cannot leave a chapter invisible. */
  @media (prefers-reduced-motion: no-preference) {
    .event-article__prose[data-scroll-reveal] {
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    .event-article__prose[data-scroll-reveal].is-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:event-detail-mab */

/* START_SECTION:event-opening-mab (INDEX:25) */
/* The band is a child, not the section's own ground, so the section returns to cream once the
     band's content ends — the image below, when there is one, sits on that cream, not on the band.
     Its colour and its text register come from the contrast override rendered above, which is how
     every other surface in this theme is coloured; nothing here declares either.

     The inset is symmetric and it is one token.

     Below 750px it steps down to the smaller rung, the same step the article makes between its own
     blocks and for the same reason: a beat is breathing room on a wide canvas and a sixth of the
     viewport on a phone. */
  .event-opening__band {
    padding-block: var(--mab-gap-block);
  }

  @media screen and (min-width: 750px) {
    .event-opening__band {
      padding-block: var(--mab-gap-beats);
    }
  }

  .event-opening__container {
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  /* THE TRAIL BELONGS TO THIS BAND, WHICH IS WHY ITS RULE LIVES HERE.

     It is a locator, not a section, and it was reading as a section: a strip of near-empty cream
     between the header and the band, carrying eleven-point uppercase across the full content width.
     The ground comes from the template, which gives it the band's own colour so the two are one
     field with no strip between them.

     It is NOT capped to a reading measure. A measure in `ch` is font-relative by design, so
     --mab-measure-intro's 62ch resolved to 446px against the trail's monospace Courier Prime where
     it gives about 630px against Rubik body copy — and 446px truncated a 38-character title on a
     1440px screen with a thousand pixels to spare. A measure keeps running copy readable; a
     breadcrumb is one line of navigation, and the snippet's own one-line-with-ellipsis rules already
     handle a trail too long for its line. */

  .event-opening__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mab-gap-block);
  }

  @media screen and (min-width: 750px) {
    .event-opening__head {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: var(--mab-gap-split);
      /* The columns hold unrelated content of unrelated length: a summary of two lines or six,
         beside a facts list of three rows or five. Aligning their ends makes the shorter one start
         late, and on an event with no description that puts empty ground where the title belongs —
         the first thing on the page. Start alignment is deliberate; do not align to `end`. */
      align-items: start;
    }
    .event-opening__facts {
      padding-inline-start: var(--mab-gap-block);
      border-inline-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
    }
  }

  /* Neither colour nor vertical rhythm is declared for the three elements of the story column.
     The colour is each utility's own, keyed to --color-foreground-rgb, which the band's contrast
     override redefines — so the register follows the ground instead of being restated per element;
     an override here would need a compound selector to outrank the utilities at all, which is how
     the previous ivory set came to be, and every one of them had to be revisited when the ground
     changed. The rhythm is mab-text-stack's, the theme's own eyebrow-heading-body stack.

     Only the summary's measure is set here, and it is the measure every run of copy on this page
     shares. */
  .event-opening__summary {
    max-width: var(--mab-measure-intro);
  }
/* END_SECTION:event-opening-mab */

/* START_SECTION:events-list-mab (INDEX:26) */
/* ===== Events list ===== */

  .events-list {
    padding-inline: var(--page-margin);
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--mab-gap-block, 2rem));
  }

  .events-list__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
  }

  .events-list__intro {
    max-width: var(--mab-measure-intro);
  }

  /* Section sub-heading (Upcoming / Past events) */
  .events-list__section-heading {
    margin-block-end: var(--mab-gap-text);
    color: rgb(var(--mab-ink-rgb) / var(--mab-preheader-alpha));
  }

  /* Empty upcoming state */
  .events-list__empty {
    padding-block: var(--mab-gap-text);
    opacity: 0.7;
  }

  /* Rows: stack with generous gap */
  .events-list__rows {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-text);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* ---- On view now: the feature band ---- */

  /* The feature band sits inside the list's container, so it gives up the outer padding a
     top-level band would carry — the list already applies it. (0,2,0) beats .spacing-style. */
  body.mab-theme [data-section-type='event-feature'] {
    padding-block: 0;
    padding-inline: 0;
  }

  /* A second repaint of the colour the list already carries, and absolutely positioned over it. */
  .events-list__feature .section-background {
    display: none;
  }

  /* The run of dates, which for an exhibition on view is the fact that decides whether the
     visitor can still come.

     It stays in the brand's label register — Courier Prime at the label rung — because a run of
     dates is a datum, and the charter assigns data to that face. The prominence comes from
     isolation and contrast: its own line, full ink where a preheader sits at 55%, and air on both
     sides. body.mab-theme carries the specificity needed to beat the utilities. */
  body.mab-theme .events-list__feature .mab-split__subheading {
    margin: 0;
    font-family: var(--font-preheader--family);
    font-weight: var(--font-preheader--weight);
    font-size: var(--mab-size-label);
    letter-spacing: var(--mab-tracking-label);
    text-transform: uppercase;
    color: var(--color-foreground);
  }

  /* ---- On view now: the band, or the standing note ----
     Both drawings are in the markup; one class on the region says which is on. The band's own
     <h2> goes down with it: mab-preheader-line prolongs the word into a rule across what it
     opens, and with the band down it opens nothing. body.mab-theme reaches past the utility's
     own display. */
  .events-list__onview--collapsed .events-list__feature {
    display: none;
  }

  body.mab-theme .events-list__onview--collapsed .events-list__section-heading {
    display: none;
  }

  .events-list__onview-strip {
    display: none;
    margin: 0;
    line-height: var(--mab-leading-compact);
  }

  .events-list__onview--collapsed .events-list__onview-strip {
    display: block;
  }

  /* A stamp of three lines, and a sentence once there is width for one. On a phone the note takes
     three lines whichever way it is set, and as a sentence the separators come to rest at the
     edges — an em dash closing one line, a middot opening the next. Stacked, the line break does
     the separating and no glyph is needed. */
  .events-list__onview-strip-label,
  .events-list__onview-strip-item,
  .events-list__onview-strip-dates {
    display: block;
  }

  @media screen and (min-width: 750px) {
    .events-list__onview-strip-label,
    .events-list__onview-strip-item,
    .events-list__onview-strip-dates {
      display: inline;
    }

    /* The separators are drawn, not written: the note is one sentence of flowing text, and a glyph
       that belongs to the layout has no business being a word inside it. Each carries its own
       spacing — a breaking space before it, a non-breaking one after — so a separator never ends a
       line and never starts one alone. */
    .events-list__onview-strip-item::before {
      content: ' \2014\00a0';
    }

    .events-list__onview-strip-dates::before {
      content: '\00b7\00a0';
    }

    /* A run of dates is one fact, so it breaks with the line rather than inside it. */
    .events-list__onview-strip-dates {
      white-space: nowrap;
    }
  }

  /* The link is a title inside a sentence, so it cannot take the box a chip takes without turning
     the note back into a row. A transparent overlay centred on the ink carries the touch target
     instead, which leaves the line its own height.

     inline-block is what makes the overlay possible: an inline that wraps mid-title becomes two
     fragments, and an absolute box positioned against a fragmented inline lands nowhere. As one
     box the title also stops breaking mid-phrase, and it takes the next line whole instead.

     The title takes the full ink the rest of the note steps back from. mab-subtle-link__anchor
     inherits its colour, which here is the label's, so the exhibition's name would arrive at the
     same tone as the words framing it, told apart only by the faint rule under it. Full ink makes
     it the subject of the line as well as its link. */
  body.mab-theme .events-list__onview-strip .events-list__onview-strip-link {
    position: relative;
    display: inline-block;
    max-inline-size: 100%;
    color: var(--color-foreground);
  }

  body.mab-theme .events-list__onview-strip .events-list__onview-strip-link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: var(--mab-height-cta-min);
    transform: translateY(-50%);
  }

  /* ---- Filter chips ---- */

  /* Chips and their readout on one line. The count is pushed to the end by its own margin
     rather than by space-between, so it stays at the right when the chips wrap past it.
     The chips are also the anchor the script scrolls to when a filter leaves its own results off
     the screen, so they carry the same clearance under the header as the section itself. */
  .events-list__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--mab-gap-text);
    row-gap: var(--mab-gap-eyebrow);
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--mab-gap-block));
  }

  .events-list__count {
    margin: 0;
    margin-inline-start: auto;
    white-space: nowrap;
  }

  .events-list__chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--mab-gap-eyebrow);
  }

  /* Shape, type and states come from `mab-chip`, which took this rule's own values. */







  /* ---- Mobile chip strip ----
     At widths below 750px the six chips total ~1040px; wrapping spends ~120px and three
     visual lines before any content reaches the visitor. A single scrollable row costs one
     line and reveals the rest with a swipe — the standard mobile chip-bar pattern.
     The filter is re-stacked as a column so the count line sits below the strip. */
  @media screen and (max-width: 749px) {
    .events-list__filter {
      flex-direction: column;
      align-items: stretch;
      gap: var(--mab-gap-eyebrow);
      /* nowrap is the fix, not a tidy-up. `flex-wrap: wrap` is inherited from the desktop rule
         above, where the chips and their count share a row. Turned into a COLUMN it becomes a
         wrapping column container, and such a container stretches each item to the cross size of
         its own flex line — which a column line takes from its widest item's max-content width,
         not from the container, so the filter would grow wider than its own box and the page
         would scroll sideways. A column of two items has nothing to wrap. */
      flex-wrap: nowrap;
    }

    .events-list__chips {
      overflow-x: auto;
      flex-wrap: nowrap;
      /* scrollbar-width: none hides the thin scroll indicator on Firefox without requiring a
         Webkit selector. -webkit-overflow-scrolling is a legacy iOS hint for momentum scroll. */
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .events-list__chips::-webkit-scrollbar {
      display: none;
    }

    /* WCAG 2.2 SC 2.5.5 AAA: 44px minimum touch target.
       Chips at ~25px height are barely at the 24px AA floor; min-block-size lifts each chip
       to the AAA target without widening the surrounding layout. */
    .events-list__chip {
      flex-shrink: 0;
      min-block-size: var(--mab-height-cta-min);
    }

    .events-list__count {
      margin-inline-start: 0;
    }
  }

  /* ---- Archive <details> ---- */

  .events-list__archive {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding-block-start: var(--mab-gap-text);
  }

  .events-list__archive-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--mab-gap-eyebrow);
    list-style: none;
    user-select: none;
    color: rgb(var(--mab-ink-rgb) / var(--mab-preheader-alpha));
    margin-block-end: 0;
  }

  /* mab-preheader-line on the element supplies type (Courier Prime, uppercase, letter-spacing)
     and the ::after accent rule. flex:1 lets it fill the summary's row, leaving only the
     chevron on the right. margin:0 resets the browser h2 default. */
  .events-list__archive-heading {
    margin: 0;
    flex: 1;
  }

  /* Remove default triangle marker in Safari */
  .events-list__archive-summary::-webkit-details-marker {
    display: none;
  }

  .events-list__archive-count {
    opacity: 0.6;
  }

  /* Chevron indicator */
  .events-list__archive-chevron {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-inline-end: 1.5px solid currentcolor;
    border-block-end: 1.5px solid currentcolor;
    transform: rotate(45deg);
    transition: transform var(--mab-duration-fast);
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .events-list__archive[open] .events-list__archive-chevron {
    transform: rotate(-135deg);
  }

  .events-list__archive > ul {
    margin-block-start: var(--mab-gap-text);
  }

  /* ---- Design mode placeholder ---- */
  .events-list__placeholder {
    padding: var(--mab-gap-block) var(--page-margin);
    text-align: center;
  }

  /* ---- Scroll-reveal motion ---- */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .events-list__header,
    [data-scroll-reveal] .events-list__filter,
    [data-scroll-reveal] .events-list__section-heading,
    [data-scroll-reveal] .events-list__empty {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .events-list__filter {
      transition-delay: 0.1s;
    }

    [data-scroll-reveal] .events-list__section-heading {
      transition-delay: 0.12s;
    }

    [data-scroll-reveal].is-visible .events-list__header,
    [data-scroll-reveal].is-visible .events-list__filter,
    [data-scroll-reveal].is-visible .events-list__section-heading,
    [data-scroll-reveal].is-visible .events-list__empty {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:events-list-mab */

/* START_SECTION:featured-product (INDEX:29) */
.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:featured-products-mab (INDEX:30) */
/* ===== Featured Products — Section Layout ===== */
  .featured-products-mab {
    padding-inline: var(--page-margin);
  }

  /* Footer: CTA centered below carousel */
  .featured-products-mab__footer {
    display: flex;
    justify-content: center;
    margin-block-start: 2.5rem;
  }

  /* Ghost CTA style → .mab-cta-ghost in mab-base.css */
  .featured-products-mab__cta:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.4);
    outline-offset: 3px;
  }

  /* ===== Carousel slide sizing ===== */
  .featured-products-mab__carousel slideshow-slides {
    gap: 1.25rem;
    align-items: stretch; /* Equal-height slides for price alignment */
  }

  /* Override slideshow-slide base styles for multi-card carousel */
  .featured-products-mab__slide {
    width: auto;
    flex: 0 0 calc(100% - 2 * var(--page-margin, 1.5rem) - 2rem);
    max-width: none;
    scroll-snap-align: start;
    display: flex; /* Stretch card to full slide height */
  }

  @media (min-width: 750px) {
    .featured-products-mab__slide {
      flex: 0 0 calc((100% - 1.25rem) / 2);
      max-width: none;
    }
  }

  @media (min-width: 990px) {
    .featured-products-mab__slide {
      flex: 0 0 calc((100% - 1.25rem * (var(--featured-columns-desktop, 4) - 1)) / var(--featured-columns-desktop, 4));
    }
  }

  /* ===== Enriched Product Card ===== */
  .product-card-enriched-mab {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
  }


  .product-card-enriched-mab__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      135deg,
      rgb(var(--color-foreground-rgb) / 0.03) 0%,
      rgb(var(--color-foreground-rgb) / 0.06) 100%
    );
  }

  .product-card-enriched-mab__placeholder-svg {
    width: 64px;
    height: 64px;
    opacity: 0.15;
  }

  /* ===== Discover hover overlay — solid semi-transparent (no blur: anti-brand) ===== */
  .product-card-enriched-mab__discover {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1rem;
    background: rgb(var(--mab-ivory-rgb) / 0.88);
    font-family: var(--font-preheader--family);
    font-weight: 400;
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-label);
    color: var(--mab-ink);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--mab-duration-medium) var(--mab-easing-bounce),
                transform var(--mab-duration-medium) var(--mab-easing-bounce);
    pointer-events: none;
    border-radius: 0 0 12px 12px;
  }

  .product-card-enriched-mab__discover-arrow {
    display: inline-block;
    transition: transform var(--mab-duration-medium) var(--mab-easing-bounce);
  }

  .product-card-enriched-mab:hover .product-card-enriched-mab__discover {
    opacity: 1;
    transform: translateY(0);
  }

  .product-card-enriched-mab:hover .product-card-enriched-mab__discover-arrow {
    transform: translateX(4px);
  }

  /* Hide discover overlay on touch devices */
  @media (hover: none) {
    .product-card-enriched-mab__discover {
      display: none;
    }
  }

  /* ===== Scroll reveal — staggered per card ===== */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .featured-products-mab__slide {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce),
                  transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    /* Stagger each card for a cascading reveal */
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(1) { transition-delay: 0.1s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(2) { transition-delay: 0.2s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(3) { transition-delay: 0.3s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(4) { transition-delay: 0.4s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(5) { transition-delay: 0.5s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(6) { transition-delay: 0.6s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(7) { transition-delay: 0.7s; }
    [data-scroll-reveal] .featured-products-mab__slide:nth-child(8) { transition-delay: 0.8s; }

    [data-scroll-reveal].is-visible .featured-products-mab__slide {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:featured-products-mab */

/* START_SECTION:footer-utilities (INDEX:31) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, 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,
  .utilities button {
    color: var(--color-utilities, 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:32) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

  .footer-content .menu__heading__default {
    font-weight: var(--font-heading--weight);
  }

  @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-mab (INDEX:33) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  /* Heritage sets `background: transparent` on every .section outside a .header-section, at
     specificity (0,3,0), and leaves the ground to a separate .section-background layer painted at
     z-index -2. That layer is not painted on every template — /pages/contact renders ivory text on
     the page's cream — so the band paints its own instead. Matching (0,4,0) is what it takes to
     outrank the theme's rule; the project's ceiling is (0,4,0). */
  .shopify-section:not(.header-section) .announcement-bar.section {
    background: var(--announcement-bar-ground, var(--color-background));
  }

  /* Both grounds are released, the band's own and the separate layer Heritage paints, so the strip
     shows what is behind it.

     WHAT BREAKS IF YOU CHANGE THIS: the text is ivory and its legibility then belongs to whatever
     the template puts underneath. On the homepage that is the hero's photograph under its scrim,
     measured; a template that puts a light ground here would need its own text colour. */
  .announcement-bar--over-hero {
    --announcement-bar-ground: transparent;
  }

  .section-background--over-hero {
    background: transparent;
  }

  .announcement-bar__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* Desktop overrides this to start on the logo's axis; centred is right for the single
       message a narrow screen shows. */
    gap: 0.25rem 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .announcement-bar__item {
    font-family: var(--font-preheader--family);
    font-weight: 400;
    /* Courier Prime's capitals are 58% of its em, where most faces sit near 70% — so an 11px
       all-caps line was read at a cap height of 6.38px, under the ~7px where letterform
       recognition holds up. 0.78rem brings that to 7.24px. The band still has room: two facts
       come to 514px in a 1349px column.

       And the tracking comes DOWN, not up. Wide spacing suits a two-word label, but across a
       sentence it pulls the letters apart and the eye spells instead of recognising words.
       --mab-tracking-body is the secondary-text register, which is what this line is. */
    font-size: 0.78rem;
    letter-spacing: var(--mab-tracking-body);
    line-height: var(--mab-leading-compact);
    text-transform: uppercase;
    text-align: center;
    position: relative;
    /* Set by eye, at 0.78rem. The metrics say the ink is already centred — 0.13px from the band's
       axis, 16.73px of air above against 16.46px below — and it still reads high, so it comes down
       a pixel. Chosen, not derived.

       Tied to this size. At 11px the same line needed +1.7px for the opposite reason (all-caps
       leaves the line box's reserved descent unused); carrying that figure to 0.78rem put the text
       1.82px low. Re-measure this offset if the size changes — do not carry it. */
    top: 2px;
  }

  /* Narrow screens have room for one fact at a time, so the facts take turns — in CSS, with no
     component and no script. The gated item is not in the cycle: a visitor abroad needs it in
     view, not on a timer. */
  @media screen and (max-width: 749px) {
    .announcement-bar__list {
      display: grid;
      grid-template-areas: 'band' 'gated';
    }

    .announcement-bar__item:not(.announcement-bar__item--gated) {
      grid-area: band;
    }

    /* Only a band with more than one turning item gets the animation. With one, the keyframes are
       never emitted, and an opacity of 0 with no animation to lift it would leave the band blank. */
    .announcement-bar__list--cycling .announcement-bar__item:not(.announcement-bar__item--gated) {
      opacity: 0;
      animation: mab-band-cycle calc(var(--mab-band-speed, 5s) * var(--mab-band-count, 1)) infinite;
      animation-delay: calc(var(--mab-band-speed, 5s) * var(--mab-band-index, 0));
    }

    /* C3: its own row, not the cycling cell. Sharing that cell put a permanently visible fact on
       top of the ones fading through it. Hidden, the row collapses to nothing. */
    .announcement-bar__item--gated {
      grid-area: gated;
    }
  }

  /* A single fact does not need to fade, and neither does a visitor who asked for less motion. */
  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__item:not(.announcement-bar__item--gated) {
      animation: none;
      opacity: 1;
    }

    @media screen and (max-width: 749px) {
      .announcement-bar__item:not(.announcement-bar__item--lead):not(.announcement-bar__item--gated) {
        display: none;
      }
    }
  }

  /* Heritage styles this class as `position: absolute; inset: 0` — in its carousel the link was an
     invisible surface laid over the whole slide. Here the text lives inside the link, so leaving it
     out of flow gives its item no height at all and the message never appears. The item selector
     raises specificity above the theme's own rule. */
  .announcement-bar__item .announcement-bar__link {
    position: static;
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.4);
    padding-block-end: 0.1em;
  }

  .announcement-bar__item .announcement-bar__link:hover {
    border-block-end-color: currentcolor;
  }

  @media screen and (min-width: 750px) {
    /* The header menu is centred on the same axis a centred band would take, and both are set in
       spaced capitals at a similar size — two lines that read as one register. Starting the band on
       the logo's axis separates the service line from the navigation, and gives it an alignment to
       belong to rather than a symmetry that answers nothing. */
    .announcement-bar__list {
      justify-content: flex-start;
    }

    /* A middot, not a rule. Courier Prime is monospaced and set here in tracked capitals, so its
       own letter spacing is wide enough that plain space does not read as a break — the two facts
       run together. A vertical rule would part them, but that mark belongs to toolbars. The middot
       is the separator of colophons and imprints: it divides without drawing a line. */
    .announcement-bar__item:not([hidden]) + .announcement-bar__item:not([hidden])::before {
      content: '·';
      position: absolute;
      inset-inline-start: -1.25rem;
      top: 50%;
      /* inset-inline-start places the glyph's BOX at the gap's centre, not the glyph. Courier Prime
         is monospaced: the middot's 1.65px of ink sits centred inside a 7.48px advance, so the mark
         landed 3.74px right of centre. translateX(-50%) pulls the box back by half its width, which
         is exactly that — but only once letter-spacing is off, since tracking is added after the
         glyph and would make the box wider than the advance it needs to halve. */
      letter-spacing: 0;
      transform: translate(-50%, -50%);
      opacity: 0.55;
    }
  }
/* END_SECTION:header-announcements-mab */

/* START_SECTION:header-announcements (INDEX:34) */
.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-mab (INDEX:35) */
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__list-item > .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 transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* 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:hover),
    &:has(header-menu[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-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='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-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='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-menu-drawer);
  }

  /* 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-menu-drawer);
  }

  .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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-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 background color, 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 section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* 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(--border-bottom-color, 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);
      border-bottom-color: var(--border-bottom-color-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);
    border-bottom-color: var(--border-bottom-color-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;
    }
  }

  /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. */
  body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: calc(var(--header-group-height) * -1);
  }

  body:has(#header-component[transparent]) #header-group > .header-section {
    z-index: var(--layer-menu-drawer);
  }

  /* All other header group content should be beneath the floating header,
  but above the rest of the page content */
  body:has(#header-component[transparent]) #header-group > *:not(.header-section) {
    z-index: calc(var(--layer-menu-drawer) - 1);
  }

  /* 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);
  }

  /* 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;
    border-radius: 0;
  }

  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-foreground-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(.language-selector--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-mab */

/* START_SECTION:header (INDEX:36) */
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__list-item > .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 transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

    /* Swap the cart bubble in transparent state only when using the default
       style. Custom bubble colors apply unchanged across header states. */
    &[data-bubble-style='default']:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(
        :has(header-menu[aria-expanded='true'])
      )
      .header__row {
      --cart-bubble-background: var(--color-transparent-text, var(--cart-bubble-background-fallback));
      --cart-bubble-text: var(--color-transparent-text-contrast, var(--cart-bubble-text-fallback));
    }

    /* 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:hover),
    &:has(header-menu[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-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='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-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='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-menu-drawer);
  }

  /* 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-menu-drawer);
  }

  .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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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-background-top-row) 0 var(--top-row-height),
      var(--color-background-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, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='top']:hover,
  [data-transparent-background='top']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, swap underlay to merchant's chosen color at full opacity */
  [data-transparent-background='bottom']:hover,
  [data-transparent-background='bottom']:focus-within,
  [data-transparent-background='both']:hover,
  [data-transparent-background='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-background-bottom-row: var(--color-background);
    }
  }

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-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 background color, 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 section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* 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(--border-bottom-color, 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);
      border-bottom-color: var(--border-bottom-color-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);
    border-bottom-color: var(--border-bottom-color-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;
    }
  }

  /* Transparent header layout. Keep this in sync with snippets/section.liquid's first-section height compensation. */
  body:has(#header-component[transparent]) .content-for-layout > .shopify-section:first-child {
    margin-top: calc(var(--header-group-height) * -1);
  }

  body:has(#header-component[transparent]) #header-group > .header-section {
    z-index: var(--layer-menu-drawer);
  }

  /* All other header group content should be beneath the floating header,
  but above the rest of the page content */
  body:has(#header-component[transparent]) #header-group > *:not(.header-section) {
    z-index: calc(var(--layer-menu-drawer) - 1);
  }

  /* 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);
  }

  /* 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;
    border-radius: 0;
  }

  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-foreground-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(.language-selector--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-carousel-mab (INDEX:37) */
.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 var(--mab-duration-base) 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 var(--mab-duration-base) 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;
      }
    }
  }

  .hero-carousel-mab {
    .slide__image-container picture.slide__image,
    .slide__image-container picture.slide__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
    }

    .hero-carousel__heading {
      font-family: var(--font-heading--family);
      font-weight: var(--font-heading--weight);
      font-size: clamp(2.5rem, 5vw, 4.25rem);
      line-height: var(--line-height--display-tight);
      letter-spacing: var(--letter-spacing--display-tight);
      color: var(--color-foreground-heading);
      text-wrap: balance;
      width: fit-content;
      max-width: min(100%, var(--max-width--display-narrow));
      margin: 0;
    }

    .hero-carousel__content-row {
      display: flex;
      align-items: center;
      gap: clamp(24px, 5vw, 72px);
    }

    .hero-carousel__content-row--with-product {
      justify-content: space-between;
    }

    .hero-carousel__text {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-width: 0;
    }

    .hero-carousel__product {
      flex: 0 0 auto;
      width: clamp(200px, 20vw, 300px);
      align-self: flex-end;
      translate: 0 4px;
    }

    .hero-carousel__product-media {
      border-radius: var(--mab-radius-base);
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
      background: rgb(var(--mab-ivory-rgb) / 0.1);
      padding: clamp(12px, 1.4vw, 18px);
      backdrop-filter: blur(6px) saturate(115%);
      -webkit-backdrop-filter: blur(6px) saturate(115%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-carousel__product-image {
      display: block;
      width: 100%;
      height: auto;
    }

    .hero-carousel__product-card .resource-card {
      opacity: 1;
      animation: none;
      border: 0;
      background: none;
      padding: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .hero-carousel__product-card
    .resource-card[data-resource-type='product']
    .resource-card__media {
      background-color: rgb(var(--color-background-rgb) / 0.7);
      background-color: color-mix(in srgb, var(--product-card-media-background) 70%, transparent);
    }

    .hero-carousel__body {
      --width: 100%;
      --max-width: var(--max-width--body-narrow);
    }

    @media screen and (max-width: 749px) {
      .hero-carousel__content-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .hero-carousel__product {
        width: min(64%, 260px);
        align-self: center;
        translate: 0 0;
      }
    }
  }
/* END_SECTION:hero-carousel-mab */

/* START_SECTION:hero (INDEX:38) */
.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:homepage-authority-mab (INDEX:39) */
/* ═══════════════════════════════════════════════════════════════
     Image position override (section-specific: focal point on desktop/mobile)
     ═══════════════════════════════════════════════════════════════ */

  .homepage-authority-mab__image {
    object-position: center;
  }

  @media screen and (max-width: 749px) {
    .homepage-authority-mab__image { object-position: center top; }
  }

  /* ═══════════════════════════════════════════════════════════════
     Description override (line-height 1.8 vs shared 1.7, body-weight, extra top margin)
     ═══════════════════════════════════════════════════════════════ */

  .homepage-authority-mab__description {
    margin-block-start: 0.5rem;
    font-weight: var(--font-body--weight);
    line-height: 1.8;
  }

  /* ═══════════════════════════════════════════════════════════════
     CTA Button
     ═══════════════════════════════════════════════════════════════ */

  .homepage-authority-mab__cta {
    margin-block-start: 1.5rem;
  }

  /* ═══════════════════════════════════════════════════════════════
     Press mention
     ═══════════════════════════════════════════════════════════════ */

  /* A quieter register than the CTA above it: the lead-in sits at preheader weight and the
     title carries the only underline in the band, so the line reads as a citation rather than
     as a second call to action competing with the button. */
  .homepage-authority-mab__press {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-block: 1.25rem 0;
  }

  .homepage-authority-mab__press-link {
    font-family: var(--font-body--family);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.35);
    transition: text-decoration-color var(--mab-duration-fast) ease;
  }

  .homepage-authority-mab__press-link:hover,
  .homepage-authority-mab__press-link:focus-visible {
    text-decoration-color: var(--color-foreground);
  }

  /* ═══════════════════════════════════════════════════════════════
     Scroll Reveal Animation
     ═══════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .homepage-authority-mab__media {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity var(--mab-duration-bounce) ease-out, transform var(--mab-duration-bounce) ease-out;
    }
    [data-scroll-reveal].is-visible .homepage-authority-mab__media {
      opacity: 1;
      transform: translateY(0);
    }

    [data-scroll-reveal] .homepage-authority-mab__label,
    [data-scroll-reveal] .homepage-authority-mab__name,
    [data-scroll-reveal] .homepage-authority-mab__description,
    [data-scroll-reveal] .homepage-authority-mab__cta,
    [data-scroll-reveal] .homepage-authority-mab__press {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }
    [data-scroll-reveal].is-visible .homepage-authority-mab__label,
    [data-scroll-reveal].is-visible .homepage-authority-mab__name,
    [data-scroll-reveal].is-visible .homepage-authority-mab__description,
    [data-scroll-reveal].is-visible .homepage-authority-mab__cta,
    [data-scroll-reveal].is-visible .homepage-authority-mab__press {
      opacity: 1;
      transform: translateY(0);
    }
    [data-scroll-reveal] .homepage-authority-mab__label { --reveal-delay: 0.1s; }
    [data-scroll-reveal] .homepage-authority-mab__name { --reveal-delay: 0.2s; }
    [data-scroll-reveal] .homepage-authority-mab__description { --reveal-delay: 0.3s; }
    [data-scroll-reveal] .homepage-authority-mab__cta { --reveal-delay: 0.4s; }
    [data-scroll-reveal] .homepage-authority-mab__press { --reveal-delay: 0.5s; }
  }
/* END_SECTION:homepage-authority-mab */

/* START_SECTION:homepage-editorial-mab (INDEX:41) */
.homepage-editorial-mab {
    text-align: center;
    padding-inline: var(--page-margin);
  }

  .homepage-editorial-mab__inner {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Header */
  .homepage-editorial-mab__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: 3rem;
  }

  .homepage-editorial-mab__icon {
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.4;
    margin-block-end: 1.25rem;
  }

  .homepage-editorial-mab__icon svg {
    display: block;
    width: 40px;
    height: auto;
    margin-inline: auto;
  }

  .homepage-editorial-mab__separator {
    width: 32px;
    height: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.3);
    margin-block: 0.25rem;
  }

  .homepage-editorial-mab__header .mab-section-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    margin-block: 1.25rem;
  }

  /* Hero paragraph */
  .homepage-editorial-mab__hero {
    max-width: 780px;
    margin-inline: auto;
    margin-block-end: 2.5rem;
  }

  .homepage-editorial-mab__hero-text {
    font-size: clamp(1.125rem, 2.2vw, 1.25rem);
    font-weight: var(--font-body--weight);
    line-height: 1.85;
    text-align: left;
    color: rgb(var(--color-foreground-rgb) / 0.85);
  }

  .homepage-editorial-mab__hero-text p {
    margin: 0;
  }

  /* Drop cap via explicit span (more reliable cross-browser than ::first-letter) */
  .homepage-editorial-mab__drop-cap {
    font-family: var(--font-heading--family);
    font-size: 3.25em;
    font-weight: var(--font-body--weight);
    float: left;
    line-height: 0.8;
    margin-right: 0.12em;
    margin-top: 0.05em;
    color: rgb(var(--color-foreground-rgb) / 0.8);
  }


  /* 2-column text layout */
  .homepage-editorial-mab__columns {
    max-width: var(--mab-measure-section);
    width: 100%;
    margin-block-end: var(--mab-gap-block);
  }

  .homepage-editorial-mab__columns-text {
    text-align: left;
    color: rgb(var(--color-foreground-rgb) / 0.85);
    font-size: 1rem;
    line-height: 1.75;
  }

  .homepage-editorial-mab__columns-text p {
    margin: 0 0 1em;
  }

  .homepage-editorial-mab__columns-text p:last-child {
    margin-bottom: 0;
  }

  /* One paragraph per column. A flowed multicol breaks a paragraph wherever its own balancing
     falls, which puts the break mid-sentence. The second rule drops the stacked layout's
     paragraph margins, because the grid gap owns the spacing between columns and rows. */
  @media screen and (min-width: 990px) {
    .homepage-editorial-mab__columns-text {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--mab-gap-beats);
    }

    .homepage-editorial-mab__columns-text p {
      margin: 0;
    }
  }

  /* CTA */
  .homepage-editorial-mab__cta {
    margin-block-start: 2.5rem;
  }

  /* Placeholder */
  .homepage-editorial-mab__placeholder {
    padding: 2rem;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    opacity: 0.7;
    max-width: 600px;
  }

  /* Scroll-reveal animation */
  @media (prefers-reduced-motion: no-preference) {
    /* Header: wrapper fades in so children's own opacity (icon, preheader) is preserved */
    [data-scroll-reveal] .homepage-editorial-mab__header {
      opacity: 0;
      transition: opacity 0.4s ease-out;
    }
    [data-scroll-reveal].is-visible .homepage-editorial-mab__header {
      opacity: 1;
    }
    [data-scroll-reveal] .homepage-editorial-mab__header .homepage-editorial-mab__reveal {
      transform: translateY(12px);
      transition: transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }
    [data-scroll-reveal].is-visible .homepage-editorial-mab__header .homepage-editorial-mab__reveal {
      transform: translateY(0);
    }

    /* Body elements: opacity + translate */
    [data-scroll-reveal] .homepage-editorial-mab__hero,
    [data-scroll-reveal] .homepage-editorial-mab__columns,
    [data-scroll-reveal] .homepage-editorial-mab__cta,
    [data-scroll-reveal] .homepage-editorial-mab__placeholder {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }
    [data-scroll-reveal].is-visible .homepage-editorial-mab__hero,
    [data-scroll-reveal].is-visible .homepage-editorial-mab__columns,
    [data-scroll-reveal].is-visible .homepage-editorial-mab__cta,
    [data-scroll-reveal].is-visible .homepage-editorial-mab__placeholder {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .homepage-editorial-mab__drop-cap {
      float: none;
      display: inline;
      font-size: 2em;
      line-height: 1;
      margin-right: 0.15em;
    }
  }
/* END_SECTION:homepage-editorial-mab */

/* START_SECTION:homepage-pillars-mab (INDEX:43) */
.homepage-pillars-mab {
    padding-inline: var(--page-margin);
  }

  .homepage-pillars-mab__inner {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    text-align: center;
  }

  /* Header */
  .homepage-pillars-mab__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-block-end: 2.5rem;
  }

  .homepage-pillars-mab__subtitle {
    margin: 0;
    margin-block-start: 0.25rem;
    max-width: 540px;
    opacity: 0.8;
  }

  @media (max-width: 749px) {
    .homepage-pillars-mab__subtitle { max-width: 100%; }
  }

  /* Separator */
  .homepage-pillars-mab__separator {
    width: 32px;
    height: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.3);
    margin: 1.5rem auto;
  }

  @media screen and (max-width: 749px) {
    .homepage-pillars-mab__separator { margin-block: 0.75rem; }
    .homepage-pillars-mab__header { margin-block-end: 1.5rem; }
  }

  /* Grid — mobile: single column */
  .homepage-pillars-mab__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media screen and (min-width: 750px) {
    .homepage-pillars-mab__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
    }
  }

  /* Desktop: 4 columns with vertical separators */
  @media screen and (min-width: 990px) {
    .homepage-pillars-mab__grid {
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }

    .homepage-pillars-mab__pillar {
      padding-inline: 2rem;
    }

    .homepage-pillars-mab__pillar:first-child {
      padding-inline-start: 0;
    }

    .homepage-pillars-mab__pillar:last-child {
      padding-inline-end: 0;
    }

    /* The rule between the columns is the row's only structure once the pictograms are off, so it
       takes the house hairline rather than a fainter value of its own. */
    .homepage-pillars-mab__pillar:not(:last-child) {
      border-right: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
    }
  }

  /* Pillar */
  .homepage-pillars-mab__pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
  }

  /* Tablet 2-col: add row separator between the two rows */
  @media (min-width: 750px) and (max-width: 989px) {
    .homepage-pillars-mab__pillar:nth-child(-n+2) {
      border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
      padding-block-end: 2.5rem;
      margin-block-end: 0.5rem;
    }
  }

  /* Icon */
  .homepage-pillars-mab__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
  }

  .homepage-pillars-mab__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Pillar heading */
  .homepage-pillars-mab__pillar-heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 0;
  }

  /* Pillar body text */
  .homepage-pillars-mab__pillar-text {
    margin: 0;
    opacity: 0.8;
    font-size: 0.9375rem;
    max-width: 28ch;
  }

  /* Design mode placeholder */
  .homepage-pillars-mab__placeholder {
    padding: 2rem;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    opacity: 0.7;
  }

  /* Scroll-reveal animations */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .homepage-pillars-mab__reveal {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .homepage-pillars-mab__reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:homepage-pillars-mab */

/* START_SECTION:journal-lead-mab (INDEX:44) */
/* Provenance, set apart from the summary it follows rather than reading as its last sentence.
     The flex gap is what spaces the ' · ' between the date and the author, so journal-dateline-mab
     needs no CSS of its own. */
  .journal-lead__dateline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mab-gap-eyebrow);
    margin-block-start: var(--mab-gap-text);
    margin-block-end: 0;
  }

  /* The dateline keeps the preheader face inside the copy column's `.rte`, which otherwise sets
     the long-form family on every paragraph it holds. Face only — size, tracking, case and colour
     come from `.mab-preheader`. Three classes and one element is the least specificity that wins,
     and the wrapper scope keeps it off every other `.rte` on the store. */
  .journal-lead-mab-wrapper .rte p.journal-lead__dateline {
    font-family: var(--font-preheader--family);
  }
/* END_SECTION:journal-lead-mab */

/* START_SECTION:journal-list-mab (INDEX:45) */
.journal-list {
    padding-inline: var(--page-margin);
  }

  .journal-list__inner {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
  }

  /* Five destinations that each deserve a URL, so a rail of links and not a select. It scrolls
     rather than wrapping on a phone: five uppercase labels stacked into three rows read as a menu,
     and the rail is meant to read as one line of the page. */
  .journal-list__rail {
    display: flex;
    gap: var(--mab-gap-eyebrow);
    overflow-x: auto;
    padding-block-end: var(--mab-gap-eyebrow);
    scrollbar-width: none;
  }

  .journal-list__rail::-webkit-scrollbar {
    display: none;
  }

  /* Register and active state come from `.mab-chip`. Only the strip behaviour is local — a chip in
     a scrolling rail must not shrink. */
  .journal-list__rail-link {
    flex: 0 0 auto;
  }

  /* Article rows list: the same vertical-stack with a text gap that events-list__rows uses. */
  .journal-list__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-text);
  }

  .journal-list__empty {
    color: rgb(var(--color-foreground-rgb) / 0.7);
  }

  /* Below thirteen articles pagination-controls emits nothing, and a wrapper carrying a rule and
     two rem of padding around nothing is a stripe under the rows. */
  .journal-list__pagination {
    display: none;
  }

  .journal-list__pagination:has(.pagination) {
    display: flex;
    justify-content: center;
    padding-block-start: var(--mab-gap-block);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  /* ---- Archive <details> fold ---- */

  /* mab-preheader-line on the heading supplies Courier Prime, uppercase, letter-spacing and the
     accent rule. flex:1 lets it fill the summary row, leaving only the chevron on the right.
     margin:0 resets the browser h2 default. */
  .journal-list__archive {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding-block-start: var(--mab-gap-text);
  }

  .journal-list__archive-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--mab-gap-eyebrow);
    list-style: none;
    user-select: none;
    color: rgb(var(--mab-ink-rgb) / var(--mab-preheader-alpha));
    margin-block-end: 0;
  }

  .journal-list__archive-heading {
    margin: 0;
    flex: 1;
  }

  .journal-list__archive-summary::-webkit-details-marker {
    display: none;
  }

  .journal-list__archive-count {
    opacity: 0.6;
  }

  .journal-list__archive-chevron {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-inline-end: 1.5px solid currentcolor;
    border-block-end: 1.5px solid currentcolor;
    transform: rotate(45deg);
    transition: transform var(--mab-duration-fast);
    margin-inline-start: auto;
    flex-shrink: 0;
  }

  .journal-list__archive[open] .journal-list__archive-chevron {
    transform: rotate(-135deg);
  }

  .journal-list__archive > ol {
    margin-block-start: var(--mab-gap-text);
  }

  @media screen and (min-width: 990px) {
    .journal-list__inner {
      gap: var(--mab-gap-beats);
    }
  }

  /* ===== Closing band: agenda bridge + subscribe CTA (Journal only) ===== */

  /* Sage ground — a third beat distinct from the hero's Parchment Cream (#fcfaf5)
     and the list's Warm Linen (#f0eee9). Uses --mab-sage, not a literal, so a
     token rename stays in one file. */
  .journal-list__closing {
    background-color: var(--mab-sage);
    padding-block: var(--mab-gap-beats);
  }

  /* Column: bridge card first, subscribe CTA centred below.

     SAME MEASURE AS THE ROWS ABOVE, NOT page-width.
     The rows sit in .journal-list__inner at --mab-measure-section (1100px); page-width is the page
     container (1429px at a 1440 viewport), so the closing band ran 329px wider than the cards it
     closes. /pages/agenda is this family's reference and there the bridge and the rows measure the
     same 1349px — the alignment is the rule, and the measure is whatever the page's own list uses. */
  .journal-list__closing-inner {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mab-gap-block);
  }
/* END_SECTION:journal-list-mab */

/* START_SECTION:layered-slideshow (INDEX:47) */
.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-404-mab (INDEX:49) */
.main-404-mab__description {
    color: rgb(var(--color-foreground-rgb) / 0.85);
    font-family: var(--font-body--family);
    font-weight: 400;
    line-height: 1.75;
    font-size: 1rem;
    text-align: center;
    margin-block-end: 0;
  }
/* END_SECTION:main-404-mab */

/* START_SECTION:main-blog-post (INDEX:51) */
.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:52) */
/**
   * 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);
    background-color: var(--color-background);
  }

  /**
   * 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:53) */
.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);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection-mab (INDEX:55) */
.main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  /* F05: Minimum touch target for filter toggle button (44px, WCAG 2.2 SC 2.5.5 AAA) */
  .facets-toggle__button {
    min-height: var(--minimum-touch-target, 44px);
  }

  /* ─── MAB Filter Drawer — Brand Treatment ────────────────────────────────── */

  /* Step 1 — Bottom sheet position & slide-up animation (mobile only)

     The panel is the <dialog class="theme-drawer__dialog"> that theme-drawer
     owns; `.facets--drawer` is the facets-form-component nested inside it.
     Panel geometry therefore has to target the dialog, scoped by the facets
     form it contains so the cart and menu drawers are untouched and so the
     rules outrank theme-drawer's own `.theme-drawer__dialog[open]`. */
  @media screen and (max-width: 749px) {
    theme-drawer:has(.facets--drawer) .theme-drawer__dialog {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 80svh;
      inset: auto 0 0 0;
      border-radius: 20px 20px 0 0;
      border-left: none;
      border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    }

    /* Drag handle — decorative pill at top of sheet */
    theme-drawer:has(.facets--drawer) .theme-drawer__dialog::before {
      content: '';
      display: block;
      width: 36px;
      height: 3px;
      border-radius: 2px;
      background: rgb(var(--color-foreground-rgb) / 0.15);
      margin: 10px auto 4px;
      flex-shrink: 0;
    }

    /* theme-drawer animates `right` for a side drawer. Reuse its own opening
       and closing classes and swap only the keyframes, so the sheet slides up
       and down on the theme's timing instead of in from the edge. */
    theme-drawer:has(.facets--drawer) .theme-drawer__dialog--opening {
      animation: mab-facets-sheet-in var(--animation-speed) var(--animation-timing-fade-in);
    }

    theme-drawer:has(.facets--drawer) .theme-drawer__dialog--closing {
      animation: mab-facets-sheet-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
    }

    @keyframes mab-facets-sheet-in {
      from {
        translate: 0 100%;
      }
    }

    @keyframes mab-facets-sheet-out {
      to {
        translate: 0 100%;
      }
    }
  }

  /* Step 1b — Desktop side drawer: anchor to the left edge (≥750px)

     Heritage's theme-drawer is a right-hand drawer: `.theme-drawer__dialog` sits
     at `right: calc(-1 * width)`, `[open]` pulls it to `right: 0`, and
     `drawer-slide-in`/`-out` animate the `right` property.

     develop's facets drawer renders on the LEFT. Its class list says
     `dialog-drawer--right`, but that class is a misnomer: it only sets
     `--start-x: -100%` on `move-and-fade`, and the panel itself is placed by
     `.drawer { left: 0 }`, with `.facets--drawer { border-right: … }` putting
     the edge on the content-facing side — the rendered side, not the class
     name, is what this targets.

     Re-anchor to the left and re-point the animation at `left`: theme-drawer's
     own keyframes drive `right`, which is inert once `right: auto`. Only
     `animation-name` is overridden, so theme-drawer keeps its duration, timing
     and the closing `forwards` fill.

     Everything is scoped through `theme-drawer:has(.facets--drawer)` so the
     cart drawer and the header menu drawer keep their native right-hand
     behaviour. `:has()` also supplies the specificity that beats theme-drawer's
     own `.theme-drawer__dialog[open]` without `!important`. */
  @media screen and (min-width: 750px) {
    theme-drawer:has(.facets--drawer) .theme-drawer__dialog {
      right: auto;
      left: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));

      /* The drawer edge faces the page, so the border moves with the panel —
         left-anchored, a border-left would sit against the viewport edge. */
      border-left: none;
      border-right: var(--style-border-drawer);
    }

    theme-drawer:has(.facets--drawer) .theme-drawer__dialog[open] {
      left: 0;
    }

    theme-drawer:has(.facets--drawer) .theme-drawer__dialog--opening {
      animation-name: mab-facets-drawer-in;
    }

    theme-drawer:has(.facets--drawer) .theme-drawer__dialog--closing {
      animation-name: mab-facets-drawer-out;
    }

    @keyframes mab-facets-drawer-in {
      from {
        left: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
      }
    }

    @keyframes mab-facets-drawer-out {
      to {
        left: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
      }
    }
  }

  /* Step 1c — no squeeze to mirror.
     mab-base.css neutralises the drawer squeeze and floats the panel over the
     content, so there is no left-hand gutter for this step to open. */

  /* Steps 2–5 — MAB brand treatment: applies to all viewports
     (mobile bottom sheet + desktop side drawer via "More filters" overflow) */

  /* Step 2 — Header typography & close button */

  /* "Filter" title → Courier Prime preheader, not h4 */
  .facets--drawer .theme-drawer__title {
    font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
    font-size: var(--mab-size-micro) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--mab-tracking-cta) !important;
  }

  /* Active filter count badge */
  .facets--drawer .theme-drawer__badge {
    font-family: var(--font-preheader--family) !important;
    font-size: 0.625rem !important;
    background: var(--color-primary-button-background) !important;
    color: var(--color-primary-button-text) !important;
  }

  /* .theme-drawer__badge sets `display: flex`, which beats the [hidden]
     attribute the block renders when no filter is active — without this the
     header reads "FILTER 0". */
  .facets--drawer .theme-drawer__badge[hidden] {
    display: none !important;
  }

  /* Header separator */
  .facets--drawer .theme-drawer__header {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / 0.08) !important;
    padding-block: 0.75rem !important;
  }

  /* Close button — no circle, just × at reduced opacity */
  .facets--drawer .theme-drawer__close-button {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0.45 !important;
    transition: opacity var(--mab-duration-fast) ease !important;
  }

  .facets--drawer .theme-drawer__close-button:hover {
    opacity: 0.8 !important;
  }

  /* Step 3 — Filter group labels & separators */

  /* Group label → Space Grotesk 500, refined air */
  .facets--drawer .facets__summary .facets__label {
    font-family: var(--font-heading--family, 'Space Grotesk', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: var(--font-body--weight) !important;
    letter-spacing: 0.025em !important;
  }

  /* Subtle hover state on accordion summaries */
  .facets--drawer .facets__summary:hover {
    background: rgb(var(--color-foreground-rgb) / 0.04) !important;
  }

  /* Group separators — ultra-subtle */
  .facets--drawer .facets__item + .facets__item {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.06) !important;
  }

  /* Filter item label — Rubik 400 */
  .facets--drawer .facets__inputs-list-item label {
    font-family: var(--font-body--family, 'Rubik', sans-serif) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
  }

  /* Step 4 — Custom checkboxes (foreground fill + background checkmark) */

  /* Replace browser default */
  .facets--drawer .facets__inputs-list-item input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border-radius: var(--mab-radius-sm) !important;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.25) !important;
    background: transparent !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
  }

  /* Checked: foreground fill + background-colored checkmark */
  .facets--drawer .facets__inputs-list-item input[type="checkbox"]:checked {
    background: var(--color-foreground) !important;
    border-color: var(--color-foreground) !important;
  }

  .facets--drawer .facets__inputs-list-item input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 1px !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid var(--color-background) !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
    display: block !important;
  }

  /* Hover — subtle foreground tint */
  .facets--drawer .facets__inputs-list-item input[type="checkbox"]:hover:not(:checked) {
    border-color: rgb(var(--color-foreground-rgb) / 0.55) !important;
    background: rgb(var(--color-foreground-rgb) / 0.04) !important;
  }

  /* Step 5 — Actions bar: fix pill shapes + Courier Prime (Heritage layout unchanged) */

  /* The actions bar is a sibling of .facets--drawer inside the dialog, so it
     has to be addressed on its own class rather than as a descendant. */
  .facets__drawer-actions {
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.08) !important;
    padding: 0.875rem 1rem !important;
  }

  /* "SEE N ITEMS" — fix pill → 8px radius, Courier Prime */
  .facets__drawer-actions .facets__see-results {
    border-radius: var(--style-border-radius-buttons-primary, var(--mab-radius-base)) !important;
    font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
    font-size: var(--mab-size-micro) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--mab-tracking-body) !important;
    padding-block: 0.875rem !important;
  }

  /* "CLEAR ALL" — fix pill → 8px radius, Courier Prime */
  .facets__drawer-actions .facets__clear-all {
    border-radius: var(--style-border-radius-buttons-primary, var(--mab-radius-base)) !important;
    font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
    font-size: var(--mab-size-micro) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: var(--mab-tracking-body) !important;
    padding-block: 0.875rem !important;
  }

  /* ─── Desktop Horizontal Filter Bar — MAB Brand Treatment ───────────────── */

  @media screen and (min-width: 750px) {
    /* Pill label → Courier Prime 400 uppercase. PRICE may appear in More at
       standard desktop widths — accepted. What matters: no layout shift on
       filter interaction (badge reservation below keeps pill widths stable). */
    .facets--horizontal .facets__label {
      font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
      font-size: 0.8125rem !important;
      font-weight: 400 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.06em !important;
      transition: text-decoration-color var(--mab-duration-fast) ease !important;
    }

    /* Badge anchor: summary needs position:relative so the absolute badge
       is scoped to each pill individually, not the bar container. */
    .facets--horizontal .facets__panel .facets__summary {
      position: relative !important;
    }

    /* Status: OUT of flex flow via position:absolute — zero pill width impact.
       Notification-badge position: centered on the pill's top-right corner.
       Clears label text (label is centered, badge is at top) and caret (centered-right).
       At rest (no badge): invisible empty box. */
    .facets--horizontal .facets__panel .facets__status {
      position: absolute !important;
      top: -6px !important;
      right: 1px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 16px !important;
      height: 16px !important;
      padding: 0 !important;
      pointer-events: none !important;
    }

    /* Hide text content in status (selected value labels) */
    .facets--horizontal .facets__panel .facets__status span:not(.bubble) {
      display: none !important;
    }

    /* Count badge — pill shape (MAB badge convention: 999px radius),
       1px Absinthe Orange stroke, transparent fill, Courier Prime numeral.
       Hard-coded 16×16 + line-height:1: identical rendered size for "1", "2", "3"… */
    .facets--horizontal .facets__panel .facets__status .bubble {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 16px !important;
      min-width: 0 !important;
      max-width: 16px !important;
      height: 16px !important;
      box-sizing: border-box !important;
      padding: 0 !important;
      line-height: 1 !important;
      font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
      font-size: 0.5625rem !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      color: var(--color-primary-button-background) !important;
      background: transparent !important;
      border: 1px solid var(--color-primary-button-background) !important;
      border-radius: 999px !important;
    }

    /* Hide Sort bubble — Sort always has an active value, the count adds no info. */
    .facets--horizontal .facets__summary:not(.facets__panel .facets__summary) .bubble {
      display: none !important;
    }

    /* "1" badge via ::after on the absolute-positioned status.
       Identical sizing to .bubble: 16×16px, 999px radius, same font/color.
       Fires only when exactly 1 checkbox is checked (no Heritage bubble yet). */
    .facets--horizontal .facets__panel:has(input[type="checkbox"]:checked):not(:has(.bubble))
      .facets__status:not(.facets__status--swatches)::after {
      content: '1' !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 16px !important;
      height: 16px !important;
      box-sizing: border-box !important;
      padding: 0 !important;
      line-height: 1 !important;
      font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
      font-size: 0.5625rem !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      color: var(--color-primary-button-background) !important;
      background: transparent !important;
      border: 1px solid var(--color-primary-button-background) !important;
      border-radius: 999px !important;
    }

    /* Dropdown panel: 8px radius + foreground-tinted shadow */
    .facets--horizontal .facets__panel-content {
      border-radius: var(--style-border-radius-buttons-primary, var(--mab-radius-base)) !important;
      box-shadow: 0px 4px 24px rgb(var(--color-foreground-rgb) / 0.08),
                  0px 1px 4px rgb(var(--color-foreground-rgb) / 0.04) !important;
    }

    /* Custom checkboxes in dropdown: ink-black stamp */
    .facets--horizontal .checkbox__input {
      appearance: none !important;
      -webkit-appearance: none !important;
      width: 16px !important;
      height: 16px !important;
      min-width: 16px !important;
      border-radius: var(--mab-radius-sm) !important;
      border: 1px solid rgb(var(--color-foreground-rgb) / 0.25) !important;
      background: transparent !important;
      cursor: pointer !important;
      position: relative !important;
      flex-shrink: 0 !important;
      transition: border-color 0.15s ease, background 0.15s ease !important;
    }

    /* Checked: foreground fill + background checkmark */
    .facets--horizontal .checkbox__input:checked {
      background: var(--color-foreground) !important;
      border-color: var(--color-foreground) !important;
    }

    .facets--horizontal .checkbox__input:checked::after {
      content: '' !important;
      position: absolute !important;
      left: 4px !important;
      top: 1px !important;
      width: 5px !important;
      height: 9px !important;
      border: 2px solid var(--color-background) !important;
      border-top: none !important;
      border-left: none !important;
      transform: rotate(45deg) !important;
      display: block !important;
    }

    /* Hover — subtle foreground tint */
    .facets--horizontal .checkbox__input:hover:not(:checked) {
      border-color: rgb(var(--color-foreground-rgb) / 0.55) !important;
      background: rgb(var(--color-foreground-rgb) / 0.04) !important;
    }

    /* Option labels → Rubik 400 (not 500) */
    .facets--horizontal .checkbox__label {
      font-family: var(--font-body--family, 'Rubik', sans-serif) !important;
      font-size: 0.875rem !important;
      font-weight: 400 !important;
    }

    /* ── Product count ("N items") → Courier Prime preheader treatment */
    .products-count-wrapper span {
      font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
      font-size: var(--mab-size-micro) !important;
      font-weight: 400 !important;
      text-transform: uppercase !important;
      letter-spacing: var(--mab-tracking-body) !important;
    }

    /* ── CLEAR ALL inline bar → Courier Prime

       Heritage renders this control under either `facets__clear-all` or
       `facets__clear-all-link` (plus `--horizontal` in the filter bar).
       Both class names are listed so the rule matches whichever one is
       current. */
    .facets--horizontal .facets__clear-all,
    .facets--horizontal .facets__clear-all-link {
      font-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
      font-size: 0.75rem !important;
      font-weight: 400 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.06em !important;
    }

    /* ── Per-facet-group "Clear" → Courier Prime.
       Restores the same Courier Prime treatment that `body.mab-theme
       .button-secondary` (Courier Prime 400, --mab-tracking-cta) applies
       elsewhere, rather than restyling this control from scratch. */
    /* No `!important` needed: this is (0,2,0) and the declarations it has to
       beat all come from `.button-unstyled` at (0,1,0) — `font-family:
       var(--font-paragraph--family)` and `border-radius: 0`. */
    .facets--horizontal .clear-filter {
      font-family: var(--font-preheader--family, 'Courier Prime', monospace);
      font-weight: 400;
      letter-spacing: var(--mab-tracking-cta);
      border-radius: var(--style-border-radius-buttons-primary, 8px);
    }

    /* ── "More" overflow button — font via CSS custom properties into shadow DOM.
       overflow-list.css uses var(--font-paragraph-family/size/text-transform) on .button.
       Do NOT use ::part(more) with display/height — it breaks the ResizeObserver
       measurement that the overflow-list JS relies on for [hidden] toggling. */
    overflow-list.facets__overflow-list {
      --font-paragraph-family: var(--font-preheader--family, 'Courier Prime', monospace) !important;
      --font-paragraph-size: 0.8125rem !important;
      --text-transform: uppercase !important;
    }

    /* ── "More" vertical alignment fix.
       li[part="more"] inherits line-height ~19.6px from the shadow DOM host,
       but the button is only 14px → baseline alignment leaves the text 1.2px
       below bar center (visible at HiDPI). line-height:1 collapses the line-box
       to match the button height, keeping it centered. Safe: no display/height. */
    overflow-list.facets__overflow-list::part(more) {
      line-height: 1 !important;
    }

    /* ── Sort: hide current-value label ("Best selling") on desktop.
       Heritage's desktop:hidden class is overridden by .facets__status { display: flex }.
       .mab-theme + element selector gives specificity (0,0,2,1) to beat Heritage's (0,0,1,0). */
    .mab-theme .facets--horizontal sorting-filter-component .facets__status {
      display: none !important;
    }

    /* ── Pill hover: editorial underline */
    .facets--horizontal .facets__summary:hover .facets__label {
      text-decoration: underline !important;
      text-decoration-color: currentColor !important;
      text-underline-offset: 3px !important;
      text-decoration-thickness: 1px !important;
    }

    /* ── Active pill: orange underline when group has checked inputs */
    .facets--horizontal .facets__panel:has(input[type="checkbox"]:checked) > .facets__summary .facets__label {
      text-decoration: underline !important;
      text-decoration-color: var(--color-primary-button-background) !important;
      text-underline-offset: 3px !important;
      text-decoration-thickness: 1.5px !important;
    }

    /* ── Price range active: underline when range differs from min/max.
       Heritage renders .hide-when-empty empty at rest; non-empty when a range is set. */
    .facets--horizontal .facets__panel:has(.hide-when-empty:not(:empty)) > .facets__summary .facets__label {
      text-decoration: underline !important;
      text-decoration-color: var(--color-primary-button-background) !important;
      text-underline-offset: 3px !important;
      text-decoration-thickness: 1.5px !important;
    }

    /* Price: underline only — range ≠ count, no badge needed. */
  }

  /* ── Accessibility: focus-visible on custom checkboxes (both drawer + desktop dropdown)
     Restores what appearance:none removed — 2px orange ring, keyboard-navigable */
  .facets--drawer .facets__inputs-list-item input[type="checkbox"]:focus-visible,
  .facets--horizontal .checkbox__input:focus-visible {
    outline: 2px solid var(--color-primary-button-background) !important;
    outline-offset: 2px !important;
  }
/* END_SECTION:main-collection-mab */

/* START_SECTION:marquee (INDEX:59) */
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:60) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 990px) {
        /* 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: 990px) {
        --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: 990px) {
        --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: 990px) {
        --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: 990px) {
        --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: 990px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 990px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 990px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 990px) {
        --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: 990px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 990px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 990px) {
      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: 990px) {
      --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: 990px) {
        padding-block: var(--page-margin);
      }
    }

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 990px) {
        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:museum-hero-mab (INDEX:62) */
/* ===== Museum Hero ===== */

  .museum-hero {
    padding-inline: var(--page-margin);
  }

  /* The container sits on the header's axis in both variants; without an image the text column
     keeps its short measure inside it. */
  .museum-hero__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
  }

  .museum-hero:not(.museum-hero--with-image) .museum-hero__body {
    max-width: 800px;
  }

  /* With image: two columns on desktop */

  .museum-hero--with-image .museum-hero__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mab-gap-col-mobile);
  }

  @media screen and (min-width: 990px) {
    .museum-hero--with-image .museum-hero__container {
      grid-template-columns: 1fr 1fr;
      gap: var(--mab-gap-split-wide);
      align-items: center;
    }
  }

  /* Eyebrow: mab-preheader provides all typography. Add block margin only. */
  /* mab-preheader-line is display:flex, so the stack's own gap handles the spacing. */
  .museum-hero__eyebrow {
    margin-block-end: 0;
  }

  /* Intro: mab-body-text provides all typography. Add block margin only. */
  .museum-hero__intro {
    margin-block-start: 0;
    max-width: var(--mab-measure-intro);
  }

  /* Stat figure: optional editorial number + caption */
  .museum-hero__figure {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-block-start: 1.75rem;
  }

  /* Stat value: Space Grotesk 500 at editorial scale.
     Courier Prime is reserved for preheaders, tags, labels and CTAs;
     a large display figure is none of those (brand rule). */
  .museum-hero__stat-value {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: var(--mab-size-figure);
    line-height: var(--mab-leading-figure);
    letter-spacing: -0.02em;
    color: rgb(var(--color-foreground-heading-rgb));
  }

  /* Stat caption: mab-data-label provides the register — it names a value rather than
     opening a section, which is the distinction mab-base.css draws. Margin only here. */
  .museum-hero__stat-label {
    display: block;
    margin-block-start: 0.25rem;
  }

  /* Spacing above the hero visit CTA. */
  .museum-hero__cta-wrapper {
    margin-block-start: 1.75rem;
  }

  /* Credential line: the component supplies the typography and the link colour. */
  .museum-hero__credential {
    margin-block-start: 1rem;
  }

  /* The figure links out when a source is set; it keeps the text colour so it
     reads as a figure rather than as a link. */
  .museum-hero__stat-link {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    color: inherit;
    text-decoration: none;
  }

  .museum-hero__stat-link:hover .museum-hero__stat-label {
    color: var(--mab-orange-text);
  }

  /* Media: rounded container, image fills the cell. Positioned so the figure can sit
     in its foot rather than lengthening the text column beside it. */
  .museum-hero__media {
    position: relative;
    border-radius: var(--mab-radius-lg);
    overflow: hidden;
  }

  /* Veil under the figure. Computed, not guessed: the bottom fifth of the museum
     photograph reaches L=0.884 on the pale parquet, and ivory over
     --mab-overlay-strong scores 7.4:1 against that worst pixel — 5.5:1 for the label at
     --mab-opacity-label. Both clear AA for their size, and they clear it for any
     photograph, not only this one. */
  .museum-hero__media::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 55%;
    background-image: linear-gradient(
      180deg,
      transparent 0%,
      var(--mab-overlay-light) 45%,
      var(--mab-overlay-strong) 100%
    );
    pointer-events: none;
  }

  /* The figure on the image: ivory, anchored to the foot, above the veil. */
  .museum-hero__figure--on-media {
    position: absolute;
    inset-block-end: var(--mab-gap-text);
    inset-inline-start: var(--mab-gap-text);
    inset-inline-end: var(--mab-gap-text);
    z-index: 1;
    margin-block-start: 0;
    color: rgb(var(--mab-ivory-rgb));
  }

  .museum-hero__figure--on-media .museum-hero__stat-value {
    color: inherit;
  }

  .museum-hero__figure--on-media .museum-hero__stat-link:hover .museum-hero__stat-label {
    color: inherit;
    opacity: 1;
  }

  .museum-hero__image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  @media screen and (min-width: 990px) {
    .museum-hero__image {
      min-height: 420px;
      object-position: center;
    }
  }

  /* Staggered scroll-reveal entrance.
     Values match distiller-hero-mab: translateY(24px) and --mab-easing-bounce.
     Duration follows the mab-base.css pattern: opacity on --mab-duration-reveal,
     transform on --mab-duration-bounce (longer, snappier). */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .museum-hero__eyebrow,
    [data-scroll-reveal] .museum-hero__title,
    [data-scroll-reveal] .museum-hero__intro,
    [data-scroll-reveal] .museum-hero__figure,
    [data-scroll-reveal] .museum-hero__cta-wrapper,
    [data-scroll-reveal] .museum-hero__media {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .museum-hero__eyebrow,
    [data-scroll-reveal].is-visible .museum-hero__title,
    [data-scroll-reveal].is-visible .museum-hero__intro,
    [data-scroll-reveal].is-visible .museum-hero__figure,
    [data-scroll-reveal].is-visible .museum-hero__cta-wrapper,
    [data-scroll-reveal].is-visible .museum-hero__media {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:museum-hero-mab */

/* START_SECTION:page-bands-mab (INDEX:64) */
/* ===== Page bands ===== */

  /* .page-bands__band carries a band's ground for the two components that do not paint their
     own — the bridge, which is a panel, and the exhibition, whose root is a Heritage `.section`
     and therefore forced transparent. It needs no rules of its own: the `color-custom-*` class
     beside it is what paints. */

  /* A band whose component is a bare panel — the shop bridge — needs the page's own measure.
     This reproduces Heritage's centre column: min(page width, viewport) less a margin either
     side, which is what `.section--page-width` gives a block rendered inside a generic section. */
  .page-bands__inset {
    box-sizing: border-box;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);
  }

  /* The form takes its own width from the block's settings and is centred in the column. */
  .page-bands__enquiry {
    display: flex;
    justify-content: center;
  }
/* END_SECTION:page-bands-mab */

/* START_SECTION:password-footer-mab (INDEX:65) */
.password-footer-mab {
    display: flex;
    justify-content: center;
    padding-block: var(--padding-xl, 2rem);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .password-footer-mab__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
/* END_SECTION:password-footer-mab */

/* START_SECTION:password-footer (INDEX:66) */
.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-foreground);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password-mab (INDEX:67) */
/* ── Section wrapper: cooperate with Heritage .section-password ── */
  .section-password {
    flex-grow: 1;
    display: flex;
    min-height: 100svh;
  }

  .password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* ── Root ── */
  .password-mab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    background-color: var(--color-background);
    color: var(--color-foreground);
    overflow: hidden;
    padding-inline: var(--page-margin, 1.5rem);
    padding-block: 5rem 3rem;
  }

  /* ── Grain texture (CSS only, no external asset) ── */
  .password-mab__grain {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      radial-gradient(ellipse 60% 50% at 75% 15%, rgb(var(--mab-orange-rgb) / 0.06) 0%, transparent 70%),
      radial-gradient(ellipse 50% 40% at 20% 85%, rgb(217 230 239 / 0.05) 0%, transparent 65%),
      repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0px, transparent 1px,
        rgb(var(--mab-ivory-rgb) / 0.012) 1px, rgb(var(--mab-ivory-rgb) / 0.012) 2px
      );
  }

  /* ── Inner composition ── */
  .password-mab__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 540px;
    width: 100%;
  }

  /* ── SVG logo ── */
  .password-mab__logo-wrap {
    margin-block-end: var(--mab-gap-block);
  }

  .password-mab__logo-wrap svg {
    height: 64px;
    width: auto;
    display: block;
  }

  /* ── Preheader ── */
  .password-mab__preheader {
    margin: 0 0 1rem;
  }

  /* ── Separator lines ── */
  .password-mab__separator {
    width: 3rem;
    height: 1px;
    background-color: currentColor;
    opacity: 0.25;
    margin-block: 0.5rem;
  }

  /* ── Leaf icon ── */
  .password-mab__leaf {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
    margin-block: 0.25rem;
  }

  /* ── Heading: Space Grotesk 500, fluid ── */
  .password-mab__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(2rem, 6vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-block: 1.5rem 0.875rem;
  }

  /* ── Body text: Rubik 400, ivory attenuated ── */
  .password-mab__body {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    line-height: 1.7;
    color: rgb(var(--color-foreground-rgb) / 0.78);
    margin-block: 0 2rem;
    max-width: 420px;
  }

  /* ── Newsletter signup ── */
  .password-mab__signup-wrap {
    width: 100%;
    max-width: 420px;
  }

  .password-mab__field-group {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
  }

  .password-mab__email-input {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem;
    background-color: rgb(var(--color-foreground-rgb) / 0.08);
    color: var(--color-foreground);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.3);
    border-radius: var(--mab-radius-base);
    font-family: var(--font-body--family);
    font-size: 0.9375rem;
    transition: border-color var(--mab-duration-fast) ease, background-color var(--mab-duration-fast) ease;
  }

  .password-mab__email-input::placeholder {
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  .password-mab__email-input:focus {
    border-color: rgb(var(--color-foreground-rgb) / 0.6);
    background-color: rgb(var(--color-foreground-rgb) / 0.12);
    outline: none;
  }

  /* Subscribe button: .button (orange) + Courier Prime override */
  .password-mab__signup-btn {
    font-family: var(--font-preheader--family);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-cta);
    white-space: nowrap;
  }

  /* Form messages */
  .password-mab__msg {
    margin-block-start: 0.75rem;
    font-family: var(--font-preheader--family);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .password-mab__msg--success {
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  .password-mab__msg--error {
    color: var(--color-primary);
  }


  /* ══════════════════════════════════════════════
     Override Heritage dialog → parchment card style
     Scoped to body.mab-theme for higher specificity
     (0,2,0 vs Heritage's 0,1,0) to reliably win.
     ══════════════════════════════════════════════ */
  body.mab-theme .password-dialog {
    /* Explicit centering: inset:0 + margin:auto mirrors the UA showModal() behavior.
       Necessary because our [open] override would otherwise land at the DOM static
       position (bottom-right) by resetting top/left to auto. */
    inset: 0;
    margin: auto;
    max-width: min(420px, calc(100vw - 2rem));
    width: fit-content;
    height: fit-content;
    max-height: calc(100svh - 2rem);
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-radius: var(--mab-radius-base);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    padding: 0;
    box-shadow: 0 24px 60px rgb(var(--color-foreground-rgb) / 0.12);
    transition: opacity var(--mab-duration-fast) ease, display var(--mab-duration-fast) allow-discrete, overlay var(--mab-duration-fast) allow-discrete;
  }

  /* Backdrop: ink black 72%, no blur — identical to external-link-modal-mab.
     display: block required to override Heritage's ::backdrop { display: none } */
  body.mab-theme .password-dialog::backdrop {
    display: block;
    background: rgb(var(--color-foreground-rgb) / 0.72);
  }

  body.mab-theme .password-dialog[open] {
    opacity: 1;
  }

  /* Entry animation — aligns with external-link-modal-mab pattern */
  @keyframes password-dialog-in {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
  }

  body.mab-theme .password-dialog[open] .password-dialog__content {
    animation: password-dialog-in var(--mab-duration-base) ease forwards;
  }

  /* Dialog content */
  body.mab-theme .password-dialog__content {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    height: auto;
    justify-content: flex-start;
  }

  /* Dialog title: Space Grotesk 500 */
  body.mab-theme .password-dialog__title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: 1.375rem;
    color: var(--color-foreground-heading);
    margin: 0;
    text-align: center;
  }

  /* Input group: stack vertically like contact-form-mab */
  body.mab-theme .password-dialog .email-signup__input-group {
    flex-direction: column;
    width: 100%;
  }

  /* Password input: theme input bg, Courier Prime stamp placeholder */
  body.mab-theme .password-dialog input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    font-family: var(--font-body--family);
    font-size: 1rem;
    transition: border-color var(--animation-speed-slow) ease;
  }

  body.mab-theme .password-dialog input[type="password"]::placeholder {
    font-family: var(--font-preheader--family);
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-label);
    color: var(--color-input-text);
    opacity: 0.45;
  }

  body.mab-theme .password-dialog input[type="password"]:focus {
    border-color: rgb(var(--color-foreground-rgb) / 0.45);
    outline: none;
  }

  /* Submit: ghost-prominent — mirrors contact-form-mab, not orange .button */
  body.mab-theme .password-dialog .password-dialog__submit-button {
    background-color: transparent;
    color: var(--color-foreground);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.5);
    border-radius: var(--style-border-radius-buttons-secondary);
    font-family: var(--font-preheader--family);
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-cta);
    padding: 0.875rem 1.75rem;
    width: 100%;
    box-shadow: none;
    cursor: pointer;
    transition: border-color var(--animation-speed-slow) ease, background-color var(--animation-speed-slow) ease;
  }

  body.mab-theme .password-dialog .password-dialog__submit-button:hover {
    background-color: rgb(var(--color-foreground-rgb) / 0.05);
    border-color: rgb(var(--color-foreground-rgb) / 0.8);
    color: var(--color-foreground);
  }

  /* ── Mobile ── */
  @media screen and (max-width: 749px) {
    .password-mab {
      justify-content: flex-start;
      padding-block-start: max(4rem, env(safe-area-inset-top));
    }

    .password-mab__field-group {
      flex-direction: column;
    }

    .password-mab__signup-btn {
      width: 100%;
    }

    body.mab-theme .password-dialog {
      max-width: calc(100vw - 1.5rem);
      inset: 0;
      margin: auto;
    }

    body.mab-theme .password-dialog__content {
      padding: 2.5rem 1.5rem 2rem;
    }
  }
/* END_SECTION:password-mab */

/* START_SECTION:password (INDEX:68) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:product-booking-mab (INDEX:72) */
.product-booking {
    scroll-margin-block-start: var(--header-height, 100px);
  }

  /* The band louches: water added to absinthe clouds it, so the surface lightens toward the foot,
     where the decision is taken. One gesture, drawn from the drink itself. */
  .product-booking {
    background-image: linear-gradient(
      to bottom,
      transparent 58%,
      rgb(var(--color-foreground-rgb) / 0.09)
    );
  }

  /* spacing-style emits the padding variables; the class of the same name is what consumes them.
     Without it the band declared its padding and rendered flush. */
  .product-booking__body {
    display: grid;
    gap: var(--mab-gap-split);
  }

  .product-booking__group {
    display: flex;
    align-items: center;
    gap: var(--mab-gap-eyebrow);
    flex-wrap: wrap;
    margin-block-start: var(--mab-gap-split);
    padding-block-start: var(--mab-gap-col-mobile);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }
/* END_SECTION:product-booking-mab */

/* START_SECTION:product-distiller-mab (INDEX:73) */
/* ═══════════════════════════════════════════════════════════════
     Distiller CTA + placeholder states
     ═══════════════════════════════════════════════════════════════ */

  .product-distiller-mab__cta {
    align-self: flex-start;
    margin-block-start: 0.5rem;
  }

  .product-distiller-mab__cta--placeholder {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ═══════════════════════════════════════════════════════════════
     Pictos - Refined, minimal, premium feel
     ═══════════════════════════════════════════════════════════════ */

  .product-distiller-mab__pictos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 3vw, 2rem);
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-distiller-mab__pictos {
      margin-block-start: 2rem;
      padding-block-start: 1.5rem;
    }
  }

  /* Layout: Center by default for balanced wrapping */
  .product-distiller-mab__pictos--spread,
  .product-distiller-mab__pictos--center {
    justify-content: center;
  }

  /* Large desktop: align with header column */
  @media screen and (min-width: 990px) {
    .product-distiller-mab__pictos--spread,
    .product-distiller-mab__pictos--center {
      justify-content: flex-start;
    }
  }

  .product-distiller-mab__pictos--placeholder {
    opacity: 0.4;
    justify-content: center;
  }

  .product-distiller-mab__picto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .product-distiller-mab__picto-icon {
    width: var(--picto-size, 32px);
    height: var(--picto-size, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
  }

  .product-distiller-mab__picto-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-distiller-mab__picto-svg {
    width: 100%;
    height: 100%;
    color: currentColor;
  }

  .product-distiller-mab__picto-icon .placeholder-svg {
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }

  .product-distiller-mab__picto-value {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.4;
    max-width: 14ch; /* Enough for 2 lines, no truncation */
  }

  @media screen and (min-width: 750px) {
    .product-distiller-mab__picto-value {
      font-size: 0.75rem;
    }
  }
/* END_SECTION:product-distiller-mab */

/* START_SECTION:product-editorial-mab (INDEX:74) */
/* ═══════════════════════════════════════════════════════════════
     Pictos - Emotional attributes
     ═══════════════════════════════════════════════════════════════ */

  .product-editorial-mab__pictos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(0.75rem, 3vw, 2rem);
    margin-block-start: 1.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-editorial-mab__pictos {
      margin-block-start: 2rem;
      padding-block-start: 1.5rem;
    }
  }

  .product-editorial-mab__pictos--spread,
  .product-editorial-mab__pictos--center {
    justify-content: center;
  }

  @media screen and (min-width: 990px) {
    .product-editorial-mab__pictos--spread,
    .product-editorial-mab__pictos--center {
      justify-content: flex-start;
    }
  }

  .product-editorial-mab__pictos--placeholder {
    opacity: 0.4;
    justify-content: center;
  }

  .product-editorial-mab__picto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  /* Placed image, not a surface: this band narrates. Same two properties museum-split-mab uses,
     scoped here so product-distiller-mab and homepage-authority-mab keep their bleed. */
  .product-editorial-mab__media {
    border-radius: var(--mab-radius-base);
    box-shadow: var(--mab-shadow-card);
  }

  .product-editorial-mab__picto-icon {
    width: var(--picto-size, 32px);
    height: var(--picto-size, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
  }

  .product-editorial-mab__picto-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-editorial-mab__picto-svg {
    width: 100%;
    height: 100%;
    color: currentColor;
  }

  .product-editorial-mab__picto-value {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    line-height: 1.4;
    max-width: 14ch;
  }

  @media screen and (min-width: 750px) {
    .product-editorial-mab__picto-value {
      font-size: 0.75rem;
    }
  }

  /* ═══════════════════════════════════════════════════════════════
     Scroll Reveal Animation
     ═══════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .product-editorial-mab__label,
    [data-scroll-reveal] .product-editorial-mab__name,
    [data-scroll-reveal] .product-editorial-mab__description,
    [data-scroll-reveal] .product-editorial-mab__pictos {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }
    [data-scroll-reveal].is-visible .product-editorial-mab__label,
    [data-scroll-reveal].is-visible .product-editorial-mab__name,
    [data-scroll-reveal].is-visible .product-editorial-mab__description,
    [data-scroll-reveal].is-visible .product-editorial-mab__pictos {
      opacity: 1;
      transform: translateY(0);
    }
    [data-scroll-reveal] .product-editorial-mab__label { --reveal-delay: 0s; }
    [data-scroll-reveal] .product-editorial-mab__name { --reveal-delay: 0.1s; }
    [data-scroll-reveal] .product-editorial-mab__description { --reveal-delay: 0.2s; }
    [data-scroll-reveal] .product-editorial-mab__pictos { --reveal-delay: 0.3s; }
  }
/* END_SECTION:product-editorial-mab */

/* START_SECTION:product-hotspots (INDEX:75) */
/* 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));
    }

    /* transition-behavior only applies once the dialog's dimensions are known */
    &[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 {
    .quick-add {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button.add-to-cart-button {
      width: calc(var(--button-size-md) - 4px);
      position: relative;
      transform: translateX(2px);
      justify-self: flex-end;
      height: fit-content;
      border: none;
      color: var(--quick-add-foreground, var(--color-foreground));
      background-color: var(--quick-add-background, var(--color-background));
      pointer-events: all;
      opacity: 1;
      overflow: hidden;
      outline: 2px solid transparent;

      @media (prefers-reduced-motion: no-preference) {
        transition: width var(--animation-speed) var(--ease-out-cubic),
          outline-color var(--animation-speed) var(--ease-out-cubic) var(--animation-speed-slow),
          transform var(--animation-speed) var(--ease-out-cubic);
      }

      &:is(:hover, :active) {
        outline-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
      }

      &:focus-visible {
        outline-color: currentcolor;
        transition-delay: 0s;
      }
    }

    .quick-add__button.add-to-cart-button[data-added='true'] {
      color: transparent;
    }
  }

  @media screen and (min-width: 750px) {
    .hotspot-dialog {
      .quick-add__button:is(:hover, :focus-visible) {
        width: max-content;
        transform: translateX(0);
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information-mab (INDEX:76) */
.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;
    }
  }

  .sticky-add-to-cart__bar {
    background: rgb(var(--color-background-1-rgb) / 0.96);
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: var(--mab-duration-base);
      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 */
  }

  /* MAB: distiller name above title — Courier Prime 400 caps, subdued */
  .sticky-add-to-cart__distiller {
    display: block;
    font-family: var(--font-preheader--family);
    font-size: var(--mab-size-micro);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgb(var(--color-foreground-rgb) / 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.1em;
  }

  /* MAB: Space Grotesk 500 uppercase — matches .product-card-enriched-mab__title */
  .sticky-add-to-cart__title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight, 500);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__meta {
    margin-top: 0.15em;
  }

  /* MAB: region / activity meta / variant — Rubik 400, 45% opacity */
  .sticky-add-to-cart__region,
  .sticky-add-to-cart__activity-meta,
  .sticky-add-to-cart__variant-text {
    display: block;
    font-family: var(--font-body--family);
    font-size: var(--mab-size-micro);
    font-weight: 400;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* MAB: price wrapper — mab-price classes handle typography */
  .sticky-add-to-cart__price {
    flex-shrink: 0;
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* The thumbnail and the button both read --height-buy-buttons, so one variable brings the bar to the height
     the rest of the page's calls to action stand at. The typeface comes with it: .button reads the accent
     role, which on this store resolves to a generic mono rather than the brand's face. */
  .sticky-add-to-cart[data-compact-cta] {
    --height-buy-buttons: var(--mab-height-cta);
  }

  .sticky-add-to-cart[data-compact-cta] .sticky-add-to-cart__button {
    padding-block: var(--mab-cta-pad-block);
    font-family: var(--font-preheader--family);
  }

  /* 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;
      }

      .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);
    }

    /* Hide region and activity meta on mobile — limited space */
    .sticky-add-to-cart__region,
    .sticky-add-to-cart__activity-meta {
      display: none;
    }

    .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 */
    .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-text {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information-mab */

/* START_SECTION:product-information (INDEX:77) */
.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);
    line-height: var(--font-paragraph--line-height);
    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:product-recommendations-mab (INDEX:79) */
.product-recommendations-mab__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  @media screen and (max-width: 989px) {
    .product-recommendations-mab__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media screen and (max-width: 749px) {
    .product-recommendations-mab__grid {
      /* Switch from grid to horizontal scroll carousel on mobile */
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 12px;
      /* Bleed to page edges for full-width carousel feel */
      margin-inline: calc(-1 * var(--page-margin, 16px));
      /* padding-inline-start is unreliable in overflow-x containers —
         use margin on first/last items instead for correct alignment */
      padding-inline: 0 var(--page-margin, 16px);
      /* Prevent outer page from scrolling while carousel scrolls */
      overscroll-behavior-x: contain;
      /* Offset snap start so first card snaps at x=16 (aligned with heading), not x=0 */
      scroll-padding-inline-start: var(--page-margin, 16px);
    }

    .product-recommendations-mab__grid::-webkit-scrollbar {
      display: none;
    }

    .product-recommendations-mab__item {
      flex: 0 0 70%; /* ~1.2 cards visible → peek of next card */
      max-width: 260px; /* cap for large phones in landscape */
      min-width: 0;     /* prevent card content blowout */
      scroll-snap-align: start;
    }

    /* Align first card with page heading — margin is reliable, padding-inline-start is not */
    .product-recommendations-mab__item:first-child {
      margin-inline-start: var(--page-margin, 16px);
    }

    /* Disable inner product-image carousel: the grid becomes a horizontal
       scroll carousel on mobile, so swiping must navigate between products,
       not between images within a single card. */
    .product-recommendations-mab__grid .card-gallery slideshow-slides {
      overflow: hidden;
      scroll-snap-type: none;
    }

    .product-recommendations-mab__grid .card-gallery slideshow-arrows,
    .product-recommendations-mab__grid .card-gallery slideshow-controls {
      display: none;
    }
  }

  .product-recommendations-mab__item {
    display: flex;
    flex-direction: column;
    min-width: 0; /* global safety for grid/flex contexts */
  }

  .product-recommendations-mab__skeleton {
    aspect-ratio: var(--mab-ratio-portrait);
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: var(--mab-radius-sm);
  }
/* END_SECTION:product-recommendations-mab */

/* START_SECTION:product-story-mab (INDEX:81) */
.product-story-mab {
    --ps-green: 54 76 44;
    --ps-ivory: 255 253 246;
    --ps-linen: 240 238 233;
    --ps-ink: 31 25 21;
  }

  /* Full-width neutral background */
  .product-story-mab__content {
    grid-column: 1 / -1;
    background: rgb(var(--ps-linen));
    color: rgb(var(--ps-ink));
    padding: 3rem var(--page-margin) 2.5rem;
  }

  /* Constrain inner elements */
  .product-story-mab__header,
  .product-story-mab__hero,
  .product-story-mab__beats-grid,
  .product-story-mab__image-break--standalone {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
  }

  /* Section Header */
  .product-story-mab__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-block-end: var(--mab-gap-block);
  }

  /* Base typography via .mab-section-title utility */
  .product-story-mab__header-title {
    color: rgb(var(--ps-ink));
  }

  /* Hero — first beat, editorial drop cap */
  .product-story-mab__hero {
    max-width: 780px;
    margin-inline: auto;
    margin-block-end: 2.5rem;
  }

  /* Beats Grid — replaces fixed duo layout */
  .product-story-mab__beats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--mab-measure-section);
    margin-inline: auto;
  }

  /* TWO COLUMNS ONLY FROM 990px, not 750.
     Split at 750 the beats would be too narrow to read beside prose at that reading measure.
     Every PDP renders this section. */
  @media (min-width: 990px) {
    .product-story-mab__beats-grid {
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
    }

    /* Orphan beat spans full width, constrained for premium feel */
    .product-story-mab__beats-grid > .product-story-mab__beat--orphan {
      grid-column: 1 / -1;
      max-width: 65%;
    }
  }

  /* Image break spans full width inside grid */
  .product-story-mab__beats-grid > .product-story-mab__image-break {
    grid-column: 1 / -1;
  }

  /* Image Break — sizing/rounding via .mab-image-break utility (mab-base.css) */
  .product-story-mab__image-break--standalone {
    margin-block: 2.5rem;
  }

  /* Beat — base typography via .mab-preheader-line utility */
  .product-story-mab__beat-title {
    margin-block-end: 1rem;
    color: rgb(var(--ps-ink));
  }

  .product-story-mab__beat-text {
    font-family: var(--font-body--family);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    margin: 0;
    color: rgb(var(--ps-ink) / 0.85);
  }

  /* Hero Text — editorial intro */
  .product-story-mab__beat-text--hero {
    font-size: clamp(1.125rem, 2.2vw, 1.25rem);
    line-height: 1.85;
  }

  .product-story-mab__drop-cap {
    font-family: var(--font-heading--family);
    font-size: 3.25em;
    font-weight: var(--font-heading--weight);
    float: left;
    line-height: 0.8;
    margin-right: 0.12em;
    margin-top: 0.05em;
    color: rgb(var(--ps-green));
  }

  /* Signature Block (Green accent) */
  .product-story-mab__signature {
    grid-column: 1 / -1;
    background: rgb(var(--ps-green));
    color: rgb(var(--ps-ivory));
    /* Painting a ground here leaves the section's scheme describing the one
       outside it, and the shared label utilities read the scheme rather than
       what they sit on. Restating the foreground is what carries them over:
       without it a preheader inside this block writes in the page's ink. */
    --color-foreground-rgb: var(--ps-ivory);
    padding: 3rem var(--page-margin);
  }

  .product-story-mab__signature-inner {
    max-width: 650px;
    margin-inline: auto;
    text-align: center;
  }

  .product-story-mab__signature-icon {
    margin-block-end: 1rem;
    opacity: 0.4;
  }

  .product-story-mab__signature-icon svg {
    width: 40px;
    height: 40px;
    margin-inline: auto;
  }

  .product-story-mab__signature-title {
    font-family: var(--font-heading--family);
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: var(--font-heading--weight);
    color: rgb(var(--ps-ivory));
    margin: 0 0 1.25rem;
  }

  .product-story-mab__signature-quote {
    margin: 0;
    padding: 0;
  }

  .product-story-mab__signature-quote p {
    font-family: var(--font-body--family);
    font-size: clamp(1rem, 2vw, 1.0625rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.8;
    color: rgb(var(--ps-ivory) / 0.85);
    margin: 0;
  }

  /* Base typography via .mab-preheader utility */
  .product-story-mab__signature-attribution {
    margin-block-start: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: none;
    opacity: 1;
    color: rgb(var(--ps-ivory) / 0.5);
  }

  /* Design mode placeholder */
  .product-story-mab__placeholder {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
    padding: 2rem 1rem;
    opacity: 0.6;
  }

  .product-story-mab__placeholder p {
    font-family: var(--font-body--family);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 0.5rem;
    color: rgb(var(--ps-ink) / 0.7);
  }

  /* Animations */
  @media (prefers-reduced-motion: no-preference) {
    .product-story-mab__content,
    .product-story-mab__signature {
      opacity: 0;
      transform: translateY(16px);
      animation: psReveal var(--mab-duration-reveal) ease-out forwards;
    }

    .product-story-mab__signature {
      animation-delay: 0.15s;
    }

    @keyframes psReveal {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  /* Responsive */
  @media (max-width: 749px) {
    .product-story-mab__content {
      padding: 2.5rem var(--page-margin) 2rem;
    }

    .product-story-mab__hero {
      margin-block-end: var(--mab-gap-block);
      padding-block-end: 2rem;
    }

    .product-story-mab__drop-cap {
      font-size: 2.75em;
    }

    .product-story-mab__signature {
      padding: 2.5rem var(--page-margin);
    }
  }
/* END_SECTION:product-story-mab */

/* START_SECTION:product-storytelling-mab (INDEX:82) */
.product-storytelling__media {
    grid-area: media;
    position: relative;
    min-height: var(--media-height-mobile, 300px);
    overflow: hidden;
  }

  @media screen and (min-width: 990px) {
    .product-storytelling__media {
      min-height: var(--media-height, 500px);
    }
  }

  .product-storytelling__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
  }

  .product-storytelling__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-secondary, #f5f5f5);
  }

  .product-storytelling__image-placeholder .placeholder-svg {
    max-width: 50%;
    max-height: 50%;
    opacity: 0.5;
  }

  .product-storytelling__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    min-height: 100%;
  }

  .product-storytelling__content .group-block-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  .product-storytelling__title {
    margin-block-end: var(--page-margin);
  }

  .product-storytelling__items {
    display: flex;
    flex-direction: column;
  }

  .product-storytelling__item {
    margin: 0;
    padding-block: 0.75rem;
  }

  .product-storytelling__item:first-child {
    padding-top: 0;
  }

  .product-storytelling__item-divider {
    display: none;
  }

  .product-storytelling__item-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .product-storytelling__item-row {
      flex-direction: row;
      gap: 1.5rem;
      align-items: baseline;
    }

    .product-storytelling__item-label {
      flex: 0 0 auto;
      min-width: 160px;
    }
  }

  .product-storytelling__item-label .h6 {
    margin: 0;
    font-family: var(--font-preheader--family);
    font-weight: 400;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-body);
    opacity: 0.8;
    line-height: 1.6;
  }

  .product-storytelling__item-content {
    flex: 1;
    line-height: 1.6;
  }

  .product-storytelling__item-content p:last-child {
    margin-block-end: 0;
  }

  /* ═══════════════════════════════════════════════════════════════
     Placeholder
     ═══════════════════════════════════════════════════════════════ */

  .product-storytelling__placeholder {
    padding: var(--page-margin);
    background: var(--color-background-secondary, #f5f5f5);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }
/* END_SECTION:product-storytelling-mab */

/* START_SECTION:product-technical-specs-mab (INDEX:83) */
/* No width or inline padding of its own. The wrapper carries `section section--page-width`, and that class
     pair is the site's convention: .section is a three-column grid whose middle track is
     min(--page-width - 2 * --page-margin, 100% - 2 * --page-margin), so content is centred and capped exactly
     as every other section is. Declaring display: block here made that grid inert, and a padding-inline in its
     place let the panel run to 40px of the screen edge on a wide display while its neighbours stopped at 240.

     Block padding comes from the section's own setting, applied by the spacing-style class on the wrapper —
     declaring it here as well would double it, and the editor's value would stay inert. */

  .product-technical-specs__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Reading measure, applied to the content and never to the grid element above it. The page-width scale in
     the theme only widens past the standard, so a section meant to read tighter than its neighbours narrows
     here instead — which is also what breaks a run of sections all landing on the same two lines. */
  .product-technical-specs--measure-tight .product-technical-specs__content {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    width: 100%;
  }

  /* Alignment belongs to the header's own variant, not to the title — two sources would contradict. */
  body.mab-theme .product-technical-specs .mab-section-title {
    margin: 0 0 var(--mab-gap-block);
  }

  .product-technical-specs__list {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* One column until 1024. `columns: 2` flows the list across both columns, so a
     spec can be split at the column break and neighbouring specs sit close enough
     to read as one run of text. Below 1024 there is not enough width for two
     readable columns, and one column reads spec after spec. */
  @media screen and (min-width: 1024px) {
    .product-technical-specs__list {
      columns: 2;
      column-gap: var(--mab-gap-split);
    }
  }

  /* Panels: each fact reads as a caption under its label, the way a museum labels a vitrine. Dotted
     leaders belong to a price list — with sentences they stretch across the page and become the
     loudest thing in the section while carrying no information. */
  .product-technical-specs {
    scroll-margin-block-start: var(--header-height, 100px);
  }


  /* The header spans the content column so its variant decides the alignment: --left anchors to the column's
     left edge, --center centres itself through its own max-width and auto margins. Left as a shrink-wrapped
     box it would inherit the column's centring, and --left would then only align text inside a centred box. */
  .product-technical-specs__header {
    align-self: stretch;
    margin-block-end: 0;
  }

  /* The gutter is the one the split sections on this page use, so a panel's edge falls on the same line as
     the picture above it — mab-beats-grid's own 3rem left the first column 5px short of it. Scoped here
     rather than changed in the shared grid, which four existing page templates consume. */
  body.mab-theme .product-technical-specs--panels .product-technical-specs__list {
    gap: var(--mab-gap-split);
  }

  .product-technical-specs--panels .product-technical-specs__list {
    padding-block-start: var(--mab-gap-text);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  }

  @media screen and (min-width: 750px) {
    .product-technical-specs--panels .product-technical-specs__list {
      columns: initial;
    }
  }

  /* A lone last row takes the full width, the way a lone last beat does. */
  @media screen and (min-width: 750px) {
    .product-technical-specs--panels .product-spec-row:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  .product-technical-specs--panels .product-spec-row {
    padding-block-end: 0;
  }

  .product-technical-specs--panels .product-spec-row__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mab-gap-eyebrow);
  }

  .product-technical-specs--panels .product-spec-row__dots {
    display: none;
  }

  .product-technical-specs--panels .product-spec-row__value {
    text-align: left;
    max-width: var(--mab-measure-copy);
  }

  .product-technical-specs--single {
    margin-inline: 0;
  }

  .product-technical-specs--single .product-technical-specs__content {
    align-items: stretch;
  }

  body.mab-theme .product-technical-specs--single .mab-section-title {
    text-align: left;
  }

  @media screen and (min-width: 750px) {
    .product-technical-specs--single .product-technical-specs__list {
      columns: 1;
    }
  }

  .product-technical-specs--single .product-spec-row__value {
    text-align: left;
    max-width: var(--mab-measure-copy);
  }

  .product-technical-specs__placeholder {
    padding: var(--page-margin);
    background: var(--color-background-secondary, #f5f5f5);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }
/* END_SECTION:product-technical-specs-mab */

/* START_SECTION:quick-order-list (INDEX:84) */
.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:ritual-mab (INDEX:85) */
.ritual {
    padding-inline: var(--page-margin);

    /* The moment's grid fractions. The image column is the NARROWER of the two on
       purpose: a portrait photograph becomes a moment by standing tall and narrow with
       space beside it, not by growing wide. Widening it only multiplies its height
       further against the rows around it, so a ratio much past 2fr/3fr starts reading
       as a mistake rather than as emphasis. */
    --ritual-moment-image-fr: 2fr;
    --ritual-moment-text-fr: 3fr;
  }

  /* The gestures band draws through museum-split-mab, which paints the page margin itself, so
     the section root drops its own and the header takes it back. Without this the band's two
     columns start one page margin further in than every other band on the page.

     WHAT BREAKS IF YOU CHANGE THIS: both rules are single-class, so the modifier has to stay
     after `.ritual` in source order to win. */
  .ritual--band {
    padding-inline: 0;
  }

  .ritual--band .ritual__header {
    padding-inline: var(--page-margin);
  }

  /* Container */
  .ritual__container {
    max-width: var(--mab-measure-section);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ritual-row-gap, 64px);
  }

  /* Step label: sits above the heading and takes the gap the heading would
     otherwise open against the text stack.
     Renders either a step number (numbered sequence) or a facet label
     (named facet, when numbering is off) — never both at once. */
  .ritual__step-label {
    margin-block-end: var(--mab-gap-eyebrow);
  }

  /* Row */
  .ritual__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: center;
  }

  /* TWO COLUMNS ONLY FROM 990px, not 750.
     Split at 750 the pair would be too narrow: a photograph too small to read beside prose at
     that reading measure. The image's sizes attribute and the stacked state's
     aspect ratios below move with it. */
  @media screen and (min-width: 990px) {
    .ritual__row {
      grid-template-columns: 1fr 1fr;
      gap: var(--ritual-col-gap, 48px);
    }

    .ritual__row--image-left .ritual__image-wrap {
      order: -1;
    }

    /* Moment treatment: dominant image, text in retreat.
       image-left: image-wrap has order:-1, so it fills the first grid track.
       image-right: text is first in HTML, image second — inverse fr assignment. */
    .ritual__row--moment.ritual__row--image-left {
      grid-template-columns: var(--ritual-moment-image-fr) var(--ritual-moment-text-fr);
    }

    .ritual__row--moment.ritual__row--image-right {
      grid-template-columns: var(--ritual-moment-text-fr) var(--ritual-moment-image-fr);
    }
  }

  /* Text column */
  .ritual__text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .ritual__text--narrow { max-width: 440px; }
  .ritual__text--medium { max-width: 520px; }
  .ritual__text--wide { max-width: 600px; }

  /* Image column */
  .ritual__image-wrap {
    width: 100%;
  }

  .ritual__image-container {
    overflow: hidden;
    border-radius: var(--ritual-image-radius, var(--mab-radius-base));
    box-shadow: var(--mab-shadow-card);
  }

  .ritual__image-container--mild-portrait { aspect-ratio: var(--mab-ratio-mild-portrait); }
  .ritual__image-container--portrait { aspect-ratio: var(--mab-ratio-portrait); }
  .ritual__image-container--square { aspect-ratio: var(--mab-ratio-square); }
  .ritual__image-container--classic { aspect-ratio: var(--mab-ratio-classic); }
  .ritual__image-container--landscape { aspect-ratio: var(--mab-ratio-landscape); }
  .ritual__image-container--wide { aspect-ratio: var(--mab-ratio-wide); }
  /* Natural has no token: the ratio is the file's own, so the container states none. */
  .ritual__image-container--natural { aspect-ratio: auto; }

  /* Moment: deep portrait — shows the full height of the louche photograph
     without cropping. Uses the brand token --mab-ratio-portrait-deep (2/3). */
  .ritual__image-container--moment {
    aspect-ratio: var(--mab-ratio-portrait-deep);
  }

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

  .ritual__image--placeholder {
    width: 100%;
    height: 100%;
    background: rgb(var(--color-foreground-rgb) / 0.04);
  }

  .ritual__image--placeholder svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* CTA */
  .ritual__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--mab-gap-text);
    margin-block-start: 2.5rem;
  }

  /* ===== Gestures list =====
     The lightened drawing of the steps: headings alone, one per row, ruled off from each other
     so the four read as a ceremony's running order rather than four tiles. It runs down the text
     column of a museum-split-mab band, with the band's photograph beside it.

     WHAT BREAKS IF YOU CHANGE THIS: the list reaches the band as `body_html` with
     `body_register: 'facts'`, which drops `.rte` from the split's body wrapper. The theme's
     prose counter in mab-base.css is gated on that class, so it does not reach this markup and
     these rules need no specificity to escape it. Send the list as prose instead and the
     counter draws a second, leading-zero number beside the one already in the markup. */
  .ritual__steps {
    margin: 0;
  }


  /* Number in the one-character marker gutter — the index prints a bare digit, not the
     leading-zero pair the theme's prose counters set, so it takes the narrower of the two rungs
     and stays attached to the title rather than floating in a channel. Title beside it on the
     same baseline. The row's height is its cell padding, the figure every table of facts uses. */
  .ritual__step {
    display: grid;
    grid-template-columns: var(--mab-indent-marker) 1fr;
    align-items: baseline;
    margin: 0;
    padding-block: var(--mab-cell-pad-block);
    padding-inline: 0;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  /* The last rule closes the set, so the list reads as a bounded run and not as four items
     trailing off. */
  .ritual__step:last-child {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  /* mab-preheader supplies the index's face and its step back from the body colour;
     mab-editorial-card-title supplies the title's face, weight, size and colour. */

  /* Gestures band: step number and title run together from the text column's left
     edge, aligning with the action buttons below the list. The marker-column grid
     that separates index from title leaves the title at --mab-indent-marker (1.5rem),
     misaligned with the buttons at 0; flex collapses that column.
     WHAT BREAKS: removing this rule re-introduces the 1.5rem indent on every title
     in the gestures band, visually separating the list from the buttons below it. */
  .ritual--band .ritual__step {
    display: flex;
    gap: var(--mab-gap-eyebrow);
  }

  /* Ghost CTA style → .mab-cta-ghost in mab-base.css */

  /* Placeholder (Theme Editor only) */
  .ritual__placeholder {
    padding: 2rem;
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
    max-width: var(--mab-measure-section);
    margin-inline: auto;
  }

  /* Stacked: reduce row gap and constrain image aspect ratios to prevent excessive height. This
     follows the grid to 990 — a full-width image at 4/3 is a third taller than at 16/9, and the
     whole point of stacking the row was not to make it taller. */
  @media screen and (max-width: 989px) {
    .ritual__container { gap: 2.5rem; }
    .ritual__image-container--landscape { aspect-ratio: var(--mab-ratio-wide); }
    .ritual__image-container--portrait { aspect-ratio: var(--mab-ratio-portrait); }
  }

  /* Scroll-reveal animations */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .ritual__text,
    [data-scroll-reveal] .ritual__image-wrap {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity var(--mab-duration-bounce) var(--mab-easing-bounce), transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .ritual__image-wrap {
      transition-delay: 0.15s;
    }

    [data-scroll-reveal].is-visible .ritual__text,
    [data-scroll-reveal].is-visible .ritual__image-wrap {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SECTION:ritual-mab */

/* START_SECTION:section-separator-mab (INDEX:91) */
.section-separator-mab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
  }

  .section-separator-mab__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.65;
    user-select: none;
  }

  .section-separator-mab__ornament svg {
    display: block;
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .section-separator-mab__ornament {
      opacity: 0;
      transform: scale(0.75);
      transition: opacity 0.8s ease, transform 0.8s var(--mab-easing-bounce);
    }

    [data-scroll-reveal].is-visible .section-separator-mab__ornament {
      opacity: 0.65;
      transform: scale(1);
    }
  }
/* END_SECTION:section-separator-mab */

/* START_SECTION:slideshow (INDEX:93) */
.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 */

/* START_SECTION:trust-subscribe-mab (INDEX:94) */
/* ===== Testimonials ===== */
  .trust-subscribe-mab__testimonials {
    position: relative;
  }

  .trust-subscribe-mab__testimonials-inner {
    text-align: center;
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--page-margin, 16px);
  }

  .trust-subscribe-mab__preheader {
    margin-block-end: var(--mab-gap-block);
  }

  /* Quote mark */
  .trust-subscribe-mab__quote-mark {
    font-family: var(--font-heading--family);
    font-size: clamp(3rem, 6vw, 4.5rem);
    line-height: 1;
    opacity: 0.12;
    margin-block-end: -0.5rem;
    user-select: none;
  }

  /* Quote text — heading font with italic for editorial feel */
  .trust-subscribe-mab__quote {
    font-family: var(--font-heading--family);
    font-weight: var(--font-body--weight);
    font-style: italic;
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    max-width: 700px;
    margin-inline: auto;
  }

  .trust-subscribe-mab__quote p {
    margin: 0;
  }

  /* Attribution */
  .trust-subscribe-mab__attribution {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1.5rem;
  }

  /* Stars */
  .trust-subscribe-mab__stars {
    display: flex;
    gap: 2px;
    justify-content: center;
  }

  .trust-subscribe-mab__star {
    display: block;
  }

  .trust-subscribe-mab__star--empty {
    opacity: 0.3;
  }

  /* Author */
  .trust-subscribe-mab__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-style: normal;
  }

  .trust-subscribe-mab__author-name {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.9375rem;
  }

  .trust-subscribe-mab__author-role {
    margin-block-start: 0.125rem;
  }

  /* Slide content */
  .trust-subscribe-mab__slide-content,
  .trust-subscribe-mab__single {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1.5rem;
  }

  /* Slideshow overrides for testimonial context */
  .trust-subscribe-mab__slideshow {
    --slideshow-align-items: center;
  }

  .trust-subscribe-mab__carousel slideshow-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .trust-subscribe-mab__carousel slideshow-controls {
    margin-block-start: 1.5rem;
  }

  /* ===== Newsletter ===== */
  .trust-subscribe-mab__newsletter {
    padding-block: 2.5rem;
    overflow: hidden;
  }

  /* Background image mode */
  .trust-subscribe-mab__newsletter--has-image {
    position: relative;
  }

  .trust-subscribe-mab__newsletter-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .trust-subscribe-mab__newsletter-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .trust-subscribe-mab__newsletter-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(var(--color-background-rgb), 0.72);
  }

  .trust-subscribe-mab__newsletter--has-image .trust-subscribe-mab__newsletter-inner {
    position: relative;
    z-index: 2;
  }

  .trust-subscribe-mab__newsletter-inner {
    text-align: center;
    max-width: 600px;
    margin-inline: auto;
    padding-inline: var(--page-margin, 16px);
  }

  .trust-subscribe-mab__newsletter-preheader {
    margin-block-end: 0.75rem;
  }

  .trust-subscribe-mab__newsletter-title {
    margin-block-end: 0.75rem;
  }

  .trust-subscribe-mab__newsletter-body {
    margin-block-end: 1.5rem;
  }

  /* CTA button */
  .trust-subscribe-mab__cta-wrapper {
    display: flex;
    justify-content: center;
  }

  /* Ghost CTA style → .mab-cta-ghost + .mab-cta-ghost--prominent in mab-base.css */

  /* ===== Scroll reveal animations ===== */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .trust-subscribe-mab__preheader,
    [data-scroll-reveal] .trust-subscribe-mab__carousel,
    [data-scroll-reveal] .trust-subscribe-mab__single,
    [data-scroll-reveal] .trust-subscribe-mab__newsletter-preheader,
    [data-scroll-reveal] .trust-subscribe-mab__newsletter-title,
    [data-scroll-reveal] .trust-subscribe-mab__newsletter-body,
    [data-scroll-reveal] .trust-subscribe-mab__cta-wrapper {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .trust-subscribe-mab__preheader,
    [data-scroll-reveal].is-visible .trust-subscribe-mab__carousel,
    [data-scroll-reveal].is-visible .trust-subscribe-mab__single,
    [data-scroll-reveal].is-visible .trust-subscribe-mab__newsletter-preheader,
    [data-scroll-reveal].is-visible .trust-subscribe-mab__newsletter-title,
    [data-scroll-reveal].is-visible .trust-subscribe-mab__newsletter-body,
    [data-scroll-reveal].is-visible .trust-subscribe-mab__cta-wrapper {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ===== Mobile adjustments ===== */
  @media (max-width: 749px) {
    /* Remove horizontal padding from slides since testimonials-inner now provides it */
    .trust-subscribe-mab__slide-content,
    .trust-subscribe-mab__single { padding: 0.5rem 0; }

    /* Left-align newsletter text on mobile for readability */
    .trust-subscribe-mab__newsletter-inner { text-align: start; }
    .trust-subscribe-mab__cta-wrapper { justify-content: flex-start; }
  }
/* END_SECTION:trust-subscribe-mab */

/* START_SECTION:visit-access-mab (INDEX:95) */
/* ===== Visit access ===== */

  /* A menu link targets this band directly, so its heading has to clear the sticky header.
     The id sits on the split's own wrapper, which is why the rule is written for it here. */
  .visit-access-wrapper .mab-split {
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--mab-gap-block, 2rem));
  }

  .visit-access__group + .visit-access__group {
    margin-block-start: var(--mab-gap-text);
  }

  .visit-access__label {
    margin-block-end: var(--mab-gap-eyebrow);
  }

  .visit-access__value {
    margin: 0;
    font-size: var(--mab-size-body-sm);
    line-height: var(--mab-leading-body);
  }

  /* A floor, not a size: WCAG 2.2 asks 44x44 of a touch target, and mab-cta-ghost's own
     padding produces 39px. The same local guarantee event-facts-mab and event-row-mab make,
     because the shared component does not make it. */
  .visit-access-wrapper .mab-split__cta {
    min-block-size: var(--mab-height-cta-min);
  }

  /* A phone number and an address are one tap on a phone, so they carry the same floor. */
  .visit-access__link {
    display: inline-block;
    min-block-size: var(--mab-height-cta-min);
    color: currentColor;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  @media screen and (min-width: 750px) {
    .visit-access__link {
      min-block-size: 0;
    }
  }
/* END_SECTION:visit-access-mab */

/* START_SECTION:visit-essentials-mab (INDEX:96) */
/* ===== Visit essentials ===== */

  /* A menu link targets this band directly. Without this the sticky header covers the
     heading the browser has just scrolled to. */
  .visit-essentials {
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--mab-gap-block, 2rem));
    padding-inline: var(--page-margin);
  }

  .visit-essentials__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mab-gap-block);
  }

  /* ---- Today's state ----
     The one line on this band that answers a question rather than naming a category, so it is set
     as information and not as another label: body face, sentence case, with a dot standing in for
     the word "open". Seven stacked uppercase labels above a price is what made the band unreadable
     once already, and this was one of them. */
  .visit-essentials__state {
    max-width: var(--page-content-width);
    margin-inline: auto;
    margin-block: 0 var(--mab-gap-text);
    display: flex;
    align-items: baseline;
    gap: var(--mab-gap-eyebrow);
    font-family: var(--font-body--family);
    font-size: var(--mab-size-body-sm);
  }

  .visit-essentials__state::before {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--mab-green);
    transform: translateY(-0.1em);
  }

  /* Left empty by the server and filled in by the section's script, if at all. An empty line must
     not open a gap or show a dot, so both arrive with the text. */
  .visit-essentials__state:empty {
    display: none;
  }

  /* Two columns from tablet. Prices are first in DOM order, so the phone meets the price
     before the schedule and no CSS reordering is needed. */
  @media screen and (min-width: 750px) {
    .visit-essentials__container {
      grid-template-columns: 1fr 1fr;
      gap: var(--mab-gap-split);
      align-items: start;
    }

    /* One column left, so the band gives it a reading measure instead of a half-width track
       with a dead half beside it. */
    .visit-essentials__container--single {
      grid-template-columns: minmax(0, var(--mab-measure-copy));
    }
  }

  /* A grid item's automatic minimum size is its content's min-content width, so the column
     holding the tariff table refuses to shrink below the table and widens the layout viewport
     instead — the scroll region never engages and the page itself scrolls sideways. Setting
     min-width: 0 is what lets overflow-x on the region do its job instead. */
  .visit-essentials__column {
    min-width: 0;
  }

  /* The tariff panel's two grounds. Both have to be opaque — the panel's first column is
     sticky, and a translucent ground would let the scrolled cells show through it — and only
     the band knows what colour it is sitting on, which is why they are set here and read by
     the snippet. The header's is the band mixed a few percent toward the text colour, so it
     steps away from the panel whichever background the editor picks. */
  .visit-essentials__column--prices {
    --visit-tariffs-surface: var(--color-background);
    --visit-tariffs-head: color-mix(in srgb, rgb(var(--color-foreground-rgb)) 4%, var(--color-background));
  }

  /* A label and its value are one glance. Across the band's full desktop width the two ends of a
     row sit far enough apart to read as two separate columns, so the rows take a reading measure
     like the note that qualifies them rather than the whole track. */
  .visit-essentials__column .mab-fact-list {
    max-width: var(--mab-measure-copy);
  }

  /* The gap under a column heading, set on what follows rather than on the heading:
     .mab-section-title carries `margin: 0` at a specificity this file cannot reach from a
     single class, so a margin-block-end on the h2 never applies. */
  .visit-essentials__column > h2 + * {
    margin-block-start: var(--mab-gap-text);
  }

  .visit-essentials__placeholder {
    padding: var(--mab-gap-block) var(--page-margin);
    text-align: center;
    opacity: 0.7;
  }
/* END_SECTION:visit-essentials-mab */

/* CSS from block stylesheet tags */
/* START_BLOCK:_blog-post-card (INDEX:99) */
.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--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .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;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:100) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:101) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:102) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .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:103) */
.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:104) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    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:106) */
.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:107) */
.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:108) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:109) */
.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 {
    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      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);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: 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;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:110) */
.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;
    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 .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:113) */
.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:115) */
.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:119) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .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__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @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;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:120) */
.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:122) */
.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:125) */
.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:126) */
.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:127) */
.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;

    &[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:128) */
.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;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  .menu-list__disclosure {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% - var(--gap-xs));
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--padding-3xs);
    padding-block: var(--padding-sm);
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    outline-offset: 0.1em;

    /* Hidden control must not intercept pointer events; hover-open is driven by
       the list item itself. */
    pointer-events: none;

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
    transform: rotate(180deg);
  }

  .menu-list__link-title {
    padding-inline: var(--gap-sm);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::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:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link {
    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 {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    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.background-matches-parent,
    .overflow-menu.background-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);

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    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: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

  /* 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;

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      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;
    }

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[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;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:131) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  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:135) */
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-mab (INDEX:137) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    gap: var(--padding-2xs, 4px);
  }

  .product-badges--custom {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
    align-items: flex-end;
  }

  .product-badges--native {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
    align-items: flex-start;
  }

  .product-badges__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
/* END_BLOCK:_product-card-gallery-mab */

/* START_BLOCK:_product-details (INDEX:142) */
/* 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:_product-media-gallery-mab (INDEX:146) */
.product-media-gallery-mab {
    position: relative;
  }

  /* Heritage marks the gallery `sticky-content` unconditionally, and this
     wrapper was neutralising it: a sticky box travels inside its parent, and a
     wrapper sized to its own content leaves nowhere to travel. Filling the grid
     row gives the native behaviour back the distance the product column runs
     past the gallery, which is exactly the emptiness that used to sit under it. */
  @media screen and (min-width: 990px) {
    .product-media-gallery-mab {
      height: 100%;
    }
  }

  .product-media-gallery-mab .product-badges--pdp {
    --badge-inset: var(--padding-md, 16px);
    position: absolute;
    z-index: var(--layer-raised, 10);
  }

  .product-media-gallery-mab .product-badges--pdp.product-badges--custom {
    top: var(--badge-inset);
    right: var(--badge-inset);
  }

  .product-media-gallery-mab .product-badges--pdp.product-badges--native {
    top: var(--badge-inset);
    left: var(--badge-inset);
  }
/* END_BLOCK:_product-media-gallery-mab */

/* START_BLOCK:_search-input (INDEX:148) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-md);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-lg) + var(--padding-sm));
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    font-size: 0.95rem;

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-sm) + var(--icon-size-lg) + var(--padding-sm));
    }
  }

  .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:149) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .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;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:150) */
.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:breadcrumb-mab (INDEX:154) */
/* The trail sits close under the header, so it needs air beneath it or it reads as part of the
     header rather than as the first thing on the page. */
  .breadcrumb-mab-block {
    margin-block-end: var(--mab-gap-text);
  }
/* END_BLOCK:breadcrumb-mab */

/* START_BLOCK:comparison-slider (INDEX:159) */
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);
    color: var(--handle-color, var(--color-foreground));
    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-mab (INDEX:160) */
.contact-form__caption {
    margin-block-end: var(--margin-4xl);
  }

  /* The submit button sits at the inline end of the form's column.

     WHAT BREAKS IF YOU CHANGE THIS: the ancestor is load-bearing. Every stylesheet block in the
     theme is compiled into one file, so `button.mab-cta-ghost` on its own reaches every ghost
     button in the theme and drags it to the end of whatever lays it out. The appearance reset a
     native button needs lives on the component, in mab-base.css. */
  .contact-form__form button.mab-cta-ghost {
    align-self: flex-end;
  }

  /* P01 — Placeholder stamp aesthetic: Courier Prime uppercase, softened opacity */
  .contact-form__input::placeholder {
    font-family: var(--font-preheader--family);
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-label);
    color: var(--color-input-text);
    opacity: 0.45;
  }

  /* P02 — Smooth focus transition, suppress default outline */
  .contact-form__input {
    transition: border-color var(--mab-duration-fast) ease;
  }

  .contact-form__input:focus {
    outline: none;
    border-color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  /* The submit fills the column on narrow screens, so the tap target spans it. */
  @media screen and (max-width: 749px) {
    .contact-form__form button.mab-cta-ghost {
      align-self: stretch;
      width: 100%;
      justify-content: center;
    }
  }
/* END_BLOCK:contact-form-mab */

/* START_BLOCK:contact-form-submit-button (INDEX:161) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:162) */
.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:cta-bundle-scroll-mab (INDEX:163) */
.cta-bundle-scroll {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    padding-block-start: 12px;
  }

  .cta-bundle-scroll__separator {
    width: 100%;
    border: none;
    border-top: 1px solid rgb(var(--color-foreground-rgb) / 0.20);
    margin: 0;
  }

  .cta-bundle-scroll__link {
    font-family: var(--button-font-family-primary);
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 1rem 2rem;
    border: 1px solid var(--mab-green);
    border-radius: var(--mab-radius-base);
    background: var(--mab-green);
    color: var(--mab-ivory);
    text-decoration: none;
    transition: background var(--mab-duration-fast) ease, border-color var(--mab-duration-fast) ease;
  }
  .cta-bundle-scroll__link:hover,
  .cta-bundle-scroll__link:focus-visible {
    background: var(--mab-ink);
    border-color: var(--mab-ink);
  }
/* END_BLOCK:cta-bundle-scroll-mab */

/* START_BLOCK:disclosures (INDEX:165) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:166) */
.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 {
    color: var(--color, inherit);
    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);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      width: 100%;
    }
  }

  .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__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .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;
      min-width: 44px;
      min-height: 44px;
    }

    &.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 {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-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:featured-collection (INDEX:167) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:168) */
.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;
  }

  .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%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .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__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-subdued);
    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 - 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(--theme-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(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    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(--theme-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 .theme-drawer__title {
    --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;
    }
  }

  /* 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);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:170) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:172) */
.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:header-menu-mab (INDEX:174) */
.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;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  .menu-list__disclosure {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% - var(--gap-xs));
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--padding-3xs);
    padding-block: var(--padding-sm);
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    outline-offset: 0.1em;

    /* Hidden control must not intercept pointer events; hover-open is driven by
       the list item itself. */
    pointer-events: none;

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
    transform: rotate(180deg);
  }

  .menu-list__link-title {
    padding-inline: var(--gap-sm);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::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:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link {
    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 {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    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.background-matches-parent,
    .overflow-menu.background-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);

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    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: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

  /* 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;

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      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;
    }

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[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: var(--mab-ratio-wide);
    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: var(--mab-ratio-wide);
    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;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:header-menu-mab */

/* START_BLOCK:icon (INDEX:175) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:176) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .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:178) */
.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:181) */
.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);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:184) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:185) */
.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:187) */
.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:188) */
.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:product-attribute-icons-mab (INDEX:191) */
.product-attribute-icons {
    width: 100%;
  }

  .product-attribute-icons__list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--list-gap, 16px);
    padding-block: 4px;
  }

  .product-attribute-icons__separator {
    display: none; /* Hidden by default - use block settings to show */
  }

  .product-attribute-icons__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--item-gap, 8px);
    flex: 1 1 0;
    min-width: 60px;
  }

  .product-attribute-icons__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-width, 32px);
    height: var(--icon-width, 32px);
    flex-shrink: 0;
  }

  .product-attribute-icons__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-attribute-icons__label {
    margin: 0;
    text-align: center;
    font-family: var(--font-body--family);
    font-weight: var(--label-font-weight, 500);
    font-size: var(--label-font-size, var(--mab-size-micro));
    text-transform: var(--label-text-transform, uppercase);
    letter-spacing: 0.04em;
    line-height: 1.4;
    /* Allow wrapping, max 3 lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
  }

  .product-attribute-icons__placeholder {
    padding: var(--page-margin, 1rem);
    background: var(--color-background-secondary, #f5f5f5);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }

  /* Responsive: tighter on mobile */
  @media screen and (max-width: 749px) {
    .product-attribute-icons__list {
      gap: var(--list-gap, 12px);
    }

    .product-attribute-icons__label {
      font-size: 0.625rem;
    }
  }
/* END_BLOCK:product-attribute-icons-mab */

/* START_BLOCK:product-attribute-rows-mab (INDEX:192) */
.product-attribute-rows {
    width: 100%;
  }

  .product-attribute-rows__list {
    margin: 0;
    padding: 0;
  }

  .product-attribute-rows__row {
    margin: 0;
    padding-block: calc(var(--row-gap, 12px) / 2);
  }

  .product-attribute-rows__row:first-child {
    padding-top: 0;
  }

  /* Mobile-first: stacked layout without dots */
  .product-attribute-rows__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
  }

  .product-attribute-rows__label {
    flex: 1 0 100%;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--font-preheader--family);
    font-weight: var(--label-font-weight, 400);
    font-size: var(--label-font-size, 0.8125rem);
    text-transform: var(--label-text-transform, uppercase);
    letter-spacing: var(--mab-tracking-body);
    color: currentColor;
    opacity: var(--label-opacity, 0.8);
  }

  .product-attribute-rows__dots {
    flex: 1;
    border-bottom: 1px dotted currentColor;
    opacity: var(--dots-opacity, 0.25);
    min-width: 2rem;
    margin-bottom: 0.2em;
    display: none;
  }

  .product-attribute-rows__value {
    /* min-width: 0 removes the flex automatic minimum size, so the value can
       shrink below its longest word; overflow-wrap then breaks long unbroken
       strings (URLs) rather than letting them spill out of the column. */
    flex: 1 0 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: var(--value-font-weight, 500);
    font-size: var(--value-font-size, 0.875rem);
    line-height: 1.5;
    text-align: left;
  }

  /* Desktop: inline layout with dot leaders */
  @media screen and (min-width: 750px) {
    .product-attribute-rows__content {
      /* Stay wrappable: a value too long for the leader line drops to its own
         line instead of overflowing into the adjacent media column. */
      column-gap: var(--row-gap, 12px);
      row-gap: 0;
    }

    .product-attribute-rows__label {
      flex: 0 1 auto;
    }

    .product-attribute-rows__dots {
      display: block;
    }

    .product-attribute-rows__value {
      flex: 0 1 auto;
      text-align: right;
    }
  }

  .product-attribute-rows__placeholder {
    padding: var(--page-margin, 1rem);
    background: var(--color-background-secondary, #f5f5f5);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }
/* END_BLOCK:product-attribute-rows-mab */

/* START_BLOCK:product-custom-property (INDEX:196) */
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-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:199) */
.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:200) */
.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:purchase-reassurance-mab (INDEX:202) */
.purchase-reassurance-mab .product-assurances {
    grid-template-columns: repeat(auto-fit, minmax(var(--mab-measure-assurance-compact), 1fr));
    gap: var(--mab-gap-eyebrow) var(--mab-gap-text);
  }

  /* No rule over each fact here. The row further down needs one to separate four equal facts in a
     band of their own; two facts tucked under a filled button are already bounded by it, and a
     line drawn a few pixels below that mass reads as the button's underline. */
  .purchase-reassurance-mab .product-assurances__item {
    padding-block-start: 0;
    border-block-start: none;
  }

  .purchase-reassurance-mab .product-assurances__value {
    margin-block-start: 0;
  }

  /* Postage leads: it is the one figure here that changes what the purchase costs. It is its own
     list, so the pair below starts on the next line rather than sharing a track with it. The gap
     goes with it when the country swap hides its only row, or an empty list keeps spacing the
     block for a fact no longer shown. */
  .purchase-reassurance-mab .product-assurances:first-child:has(.product-assurances__item:not([hidden])) {
    margin-block-end: var(--mab-gap-eyebrow);
  }
/* END_BLOCK:purchase-reassurance-mab */

/* START_BLOCK:review (INDEX:204) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .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:206) */
.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:207) */
/* 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 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:208) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:211) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:212) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:213) */
.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);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:activities-band-mab (INDEX:214) */
/* ===== Activities list ===== */

  /* A menu link may target a band directly. Without this the sticky header covers the heading the
     browser has just scrolled to, and the visitor lands on a band that looks like it has no title. */
  .activities-list {
    scroll-margin-block-start: calc(var(--header-height, 0px) + var(--mab-gap-block, 2rem));
  }

  .activities-list {
    padding-inline: var(--page-margin);
  }

  .activities-list__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
  }

  /* Header: mab-text-stack supplies the vertical rhythm, mab-preheader-line and
     mab-section-title the type. Only the space before the grid is local. */
  .activities-list__header {
    margin-block-end: var(--mab-gap-block);
  }

  /* Intro: mab-body-text supplies the type. A reading measure keeps it off the full band. */
  .activities-list__intro {
    max-width: var(--mab-measure-intro);
  }

  /* List reset. Grid columns are driven by --mab-card-grid-columns and
     --mab-card-grid-columns-wide set inline, via the mab-card-grid utility. */
  .activities-list__grid {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Design mode only: a handle that resolves to nothing. Dashed so it cannot be mistaken
     for a card. */
  .activities-list__item {
    min-inline-size: 0;
  }

  .activities-list__item--missing {
    border: 1px dashed rgb(var(--color-foreground-rgb) / 0.4);
    border-radius: var(--mab-radius-base);
    padding: var(--mab-gap-text);
  }

  .activities-list__placeholder {
    padding: var(--mab-gap-block) var(--page-margin);
    text-align: center;
  }

  /* ---- Scroll-reveal motion ----
     House split-duration pattern, as museum-hero-mab and museum-split-mab use. */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .activities-list__header,
    [data-scroll-reveal] .activities-list__grid {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .activities-list__grid {
      transition-delay: 0.15s;
    }

    [data-scroll-reveal].is-visible .activities-list__header,
    [data-scroll-reveal].is-visible .activities-list__grid {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:activities-band-mab */

/* START_SNIPPET:activity-card-mab (INDEX:215) */
/* ===== Activity card ===== */

  /* Card surface: ivory fill, thin border, rounded corners.
     Same pattern as .museum-card — a surface that visually lifts the card off its band.
     overflow:hidden clips the image at the card's rounded top corners, so the image
     inherits square corners via --mab-card-media-radius: 0. The utility
     (body.mab-theme .mab-card-media, specificity 0,2,1) reads that variable, so a class
     selector override on the media element would lose the specificity fight — the variable
     on the shell sidesteps it entirely.
     position:relative is the anchor for the CTA ::after full-card overlay (a11y: single tab stop).
     The shadow appears on hover to confirm the card is interactive; it is suppressed
     on cards without an image (--has-image modifier). */
  .activity-card {
    --mab-card-media-radius: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: var(--mab-radius-lg);
    overflow: hidden;
    background: var(--mab-ivory);
  }

  /* The hover: hovering anywhere on the card moves its image, nothing else. Amplitude, timing and
     the reduced-motion guard live with .mab-card-media in mab-base.css. */
  .activity-card--has-image:hover .activity-card__media img {
    transform: scale(var(--mab-card-zoom));
  }

  /* .mab-card-media supplies position, overflow, radius, background and img fill.
     The radius is driven by --mab-card-media-radius set on .activity-card above.
     Only aspect-ratio needs an override here. */
  .activity-card .activity-card__media {
    aspect-ratio: var(--activity-card-ratio, 4 / 3);
  }

  /* .mab-card-media img supplies width/height/object-fit.
     display:block alone prevents the 4px baseline gap below an inline image. */
  .activity-card__image {
    display: block;
  }

  /* Body: flex column so meta → title → description → CTA stack in order. The departure left
     the body for the media, so what remains is what it is and what it costs.
     Full padding on all sides because the card now carries an ivory surface. */
  .activity-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-eyebrow);
    flex: 1;
    padding: var(--mab-gap-text);
  }

  /* Data block: the wrapper survives the departure's move to the media because a second fact
     line (languages, group size) is the next thing the museum will want here, and the tight
     internal gap is what makes such a pair read as one unit rather than two stacked labels. */
  .activity-card__data {
    display: flex;
    flex-direction: column;
    gap: calc(var(--mab-gap-eyebrow) / 4);
  }

  /* ---- Departure stamp ----
     The departure is a scheduled time, and a museum states a departure on a ticket. So it sits on
     the photograph as a stamp rather than as a third text line in the body: the visitor reads
     when, over the picture of what, and the body keeps only what it is and what it costs.

     It also settles a measurement problem. In the body the line shared a 296px text column with
     the card's padding; on the media it has the full 336px, so a longer recurrence than today's
     survives without wrapping.

     The ground is the ink token at 0.72 — the opacity the brand already uses for a dialog
     backdrop. Ivory on that ground measures 6.5:1 over a white photograph, the worst case, and
     better over any darker one, so the stamp stays legible whatever picture the museum supplies. */
  .activity-card__stamp {
    position: absolute;
    inset-block-end: var(--mab-gap-eyebrow);
    inset-inline-start: var(--mab-gap-eyebrow);
    max-inline-size: calc(100% - (2 * var(--mab-gap-eyebrow)));
    margin: 0;
    padding: 0.35em 0.7em;
    font-family: var(--font-preheader--family);
    font-weight: var(--font-preheader--weight);
    font-size: var(--mab-size-cta);
    letter-spacing: var(--mab-tracking-label);
    text-transform: uppercase;
    color: var(--mab-ivory);
    background: rgb(var(--mab-ink-rgb) / 0.72);
    border: 1px solid rgb(var(--mab-ivory-rgb) / 0.32);
    border-radius: var(--mab-radius-base);
  }

  /* On the design-mode placeholder there is no photograph to sit on, so the stamp takes the
     ink-on-light reading instead of ivory-on-dark. */
  .activity-card__stamp--on-surface {
    color: var(--mab-orange-text);
    background: rgb(var(--mab-ivory-rgb) / 0.9);
    border-color: rgb(var(--mab-ink-rgb) / 0.12);
  }

  /* Meta line: duration + cheapest paid tier in one row. nowrap is the intent and is enforced here;
     the value is kept short at render time (two parts at most), so ellipsis is a safety net
     only and should never trigger at any column width the grid produces. */
  .activity-card__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Single tab stop: the CTA anchor is the card's only interactive element. Its ::after
     pseudo-element expands to cover the whole card (via position:absolute on a positioned
     .activity-card). The title is plain text, not a second link — two stops to the same
     destination would halve the keyboard efficiency and read twice to a screen reader.
     The CTA text is still the visible affordance; the ::after is transparent and inert
     visually, only extending the click target. */
  .activity-card .activity-card__cta::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* Description: .mab-editorial-card-text supplies the type and reads "in full, with no line clamp".
     The two-line clamp is local to this card so all cards in a row hit the same visual height
     regardless of copy length. flex:1 pushes the CTA to the foot of the card. */
  .activity-card__description {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The card may be narrower than its button's label in a long locale; the label then ends in an
     ellipsis rather than widening the card past its grid track. */
  .activity-card {
    min-inline-size: 0;
  }

  .activity-card__cta {
    margin-block-start: var(--mab-gap-eyebrow);
    max-inline-size: 100%;
  }

  .activity-card__cta .mab-cta__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* END_SNIPPET:activity-card-mab */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:216) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

  .add-to-cart-button[data-added='true'] {
    color: transparent;

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:background-media (INDEX:218) */
.background-image-container {
    overflow: hidden;
    position: absolute;
    inset: 0;
    opacity: var(--image-opacity);
  }

  .background-image-container img,
  .background-image-container svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .background-image-fit img,
  .background-image-fit svg {
    object-fit: contain;
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:220) */
.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:221) */
.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:breadcrumb-mab (INDEX:223) */
.breadcrumb-mab__list {
    display: flex;
    flex-wrap: nowrap;
    /* The list takes the full line so the current page has slack to claim before it truncates.
       Without it the flex container shrinks to its content and the ellipsis engages on a desktop
       with a thousand pixels to spare. */
    inline-size: 100%;
    /* Last resort: the ancestors are flex: 0 0 auto so a trail with more crumbs than this page has
       cannot shrink its way out. Clipping the list keeps it from pushing the viewport wider. */
    overflow: hidden;
    align-items: baseline;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The ancestors keep their full text; only the current page yields. No media query: the rules
     bite solely when the trail is wider than the line, so a desktop where it fits is untouched. */
  .breadcrumb-mab__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .breadcrumb-mab__item[aria-current='page'] {
    flex: 0 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.55;
  }

  .breadcrumb-mab__item + .breadcrumb-mab__item::before {
    content: '\203A';
    margin-inline-end: 0.5em;
    opacity: 0.5;
  }

  .breadcrumb-mab__link {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumb-mab__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  /* The whole trail shows at every width, the current page included.

     Hiding the last crumb below 750px would leave a phone with, say, "Home > The Museum" and no
     indication of where the reader actually was, while the JSON-LD still declares every
     position — the visible trail and the machine-readable one disagreeing, which is the thing
     this snippet exists to prevent.

     The trail holds ONE line and the current page truncates when it will not fit. A breadcrumb is
     a locator, not a control strip: its last item is not even a link, so a horizontal scroll would
     ask for a gesture to reach text nobody can act on, and a second line costs a phone the vertical
     room the heading needs. Truncating loses nothing where it bites hardest — on an event page the
     current crumb IS the h1 rendered a few lines below at display size. What a breadcrumb
     communicates is the shape of the path, and Home > Agenda > this-page survives the ellipsis
     whole.

     `min-inline-size: 0` is load-bearing: a flex item will not shrink below its content width
     without it, so the ellipsis never engages and the line overflows instead. */
/* END_SNIPPET:breadcrumb-mab */

/* START_SNIPPET:buy-buttons-styles (INDEX:227) */
.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, .product-form-text__error) {
    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, .product-form-text__error) {
    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-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);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .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);
    padding-inline: var(--theme-drawer-padding);
    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__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, var(--color-foreground));
    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: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .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;
  }

  .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;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery-mab (INDEX:228) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size;
    container-name: card-gallery-container;
  }

  /* On a card too narrow to hold it, the quick-add button would cover the image
     rather than sit in its corner. Heritage suppresses it below 70px; the fork
     had dropped the rule. */
  @container card-gallery-container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .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);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }
  }

  [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-mab */

/* START_SNIPPET:card-gallery (INDEX:229) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .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: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @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;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:card-hover-effect-styles (INDEX:230) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */

/* START_SNIPPET:cart-bubble (INDEX:231) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:232) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:233) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .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);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-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 rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-free-shipping-mab (INDEX:234) */
/* A band, not a box.

     The zone has to be seen — it is the one place in the cart that argues for adding something, and
     as plain text it disappeared. But a filled rectangle with an 8px radius, inset in the column, is
     exactly how this theme draws a form field, and a shopper read a disabled input among their
     totals.

     What separates the two is the edge. A band that runs the full width of the drawer, with no
     radius, cannot be a field — and it echoes the service strip already sitting at the top of every
     page, so the vocabulary is one the site has established. The 24px negative margin cancels the
     drawer's own padding to reach both edges.

     An orange keyline on the leading edge carries the accent. It holds no text, so it is not bound
     by a contrast ratio — Absinthe Orange on this ground measures 2.7:1, which rules the colour out
     for the figure but not for a rule. */
  .cart-free-shipping {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.4em;
    padding: 0.75rem 0.875rem;
    background: var(--mab-sage);
    border-inline-start: 3px solid var(--mab-orange);
    color: var(--color-foreground);
    /* One height in both states. The incentive state is the taller of the two — it carries the
       figure at 1rem against 0.8125rem of text — so without a floor the band shrank by 28px the
       moment the threshold was met, and the whole totals column jumped. The figure's line box plus
       the block's own padding is what sets the floor; content taller than that (a wrapped sentence
       on the narrow cart page) still grows past it.

       1.25rem, not 1rem: the figure's line box measures 20px rather than the 16px its font-size
       suggests, because baseline alignment in the flex row adds to it. */
    min-height: calc(1.25rem + 1.5rem);
    align-content: center;
  }

  /* Full bleed only inside the drawer, whose summary carries the inline padding this cancels. The
     cart page has none, and the same negative margin there hung the band past the totals on both
     sides.

     The padding is read from the drawer's own variable rather than restated. It does not hold one
     value across breakpoints, and a literal that disagrees with it makes the band wider than the
     drawer it bleeds into. */
  cart-drawer-component .cart-free-shipping {
    margin-inline: calc(-1 * var(--cart-drawer-summary-padding));
    padding-inline: var(--cart-drawer-summary-padding);
  }

  /* The cart page gives the band 320px where the drawer gives 431, and the sentence wrapped there —
     which broke the one thing the two states had to share, their height. Tighter inline padding and
     a hair less tracking buy the 9px it was short by, so both contexts hold one line and one
     height. */
  .cart-page__summary .cart-free-shipping {
    padding-inline: 0.5rem;
    /* The last 2.7px. Two gaps at 0.4em cost 11px here; 0.25em gives back what the line was short
       by without the words touching. */
    column-gap: 0.25em;
  }

  .cart-page__summary .cart-free-shipping__prefix,
  .cart-page__summary .cart-free-shipping__caption {
    letter-spacing: -0.005em;
  }

  /* One sentence, one colour: prefix and caption are halves of the same clause. They step back
     together so the figure comes forward — the only contrast the line needs. */
  .cart-free-shipping__prefix,
  .cart-free-shipping__caption {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: var(--mab-leading-compact);
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  /* The figure keeps the label face — a number belongs to that register, and the contrast between
     the two faces marks it out without needing to be larger still. */
  .cart-free-shipping__amount {
    font-family: var(--font-preheader--family);
    font-weight: 400;
    font-size: 1rem;
    line-height: var(--mab-leading-figure);
    letter-spacing: var(--mab-tracking-body);
  }

  /* Orange asks for something; once the threshold is met there is nothing to ask. The keyline turns
     green with the text — the same mark now confirming instead of prompting. */
  .cart-free-shipping--reached {
    color: var(--mab-green);
    border-inline-start-color: var(--mab-green);
  }

  .cart-free-shipping--reached .cart-free-shipping__amount {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: normal;
  }
/* END_SNIPPET:cart-free-shipping-mab */

/* START_SNIPPET:cart-items-component (INDEX:235) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    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);
    }
  }

  ::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;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products-mab (INDEX:236) */
.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-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-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-child {
    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-2xs);
  }

  /* MAB: bundle list — refined secondary list style */
  .cart-items__bundle {
    font-size: var(--cart-font-size--sm);
    color: rgb(var(--color-foreground-rgb) / 0.6);
    padding-block-start: var(--margin-xs);
    margin-block-start: var(--margin-2xs);
    border-block-start: 1px solid rgb(var(--color-border-rgb) / 0.35);
  }

  .cart-items__bundle li {
    line-height: 1.5;
  }

  .cart-items__bundle li::before {
    content: "–\00a0";
    opacity: 0.5;
  }

  .cart-items__bundle-qty {
    font-family: var(--font-preheader--family);
    font-size: var(--mab-size-micro);
    letter-spacing: 0.04em;
    opacity: 0.8;
  }

  /* MAB: narrow layout — bundle list spans full width, price absolute at top-right */
  @container cart-items (max-width: 719px) {
    .cart-items__table-row:has(.cart-items__bundle) {
      position: relative;
    }

    .cart-items__table-row:has(.cart-items__bundle) .cart-items__details {
      grid-column: 2 / -1;
    }

    .cart-items__table-row:has(.cart-items__bundle) .cart-items__price {
      position: absolute;
      top: 0;
      right: 0;
      min-height: unset;
      white-space: nowrap;
    }

    /* Indent title to not overlap with absolute price */
    .cart-items__table-row:has(.cart-items__bundle) .cart-items__details > p:first-child {
      padding-inline-end: calc(var(--cart-item-price-width) + var(--gap-md));
    }
  }

  .cart-items__details * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__details .cart-items__title,
  .cart-drawer .cart-items__details .cart-items__title {
    font-size: var(--product-card-title-font-size);
    color: var(--color-foreground);
    font-family: var(--product-card-title-font-family);
    font-style: var(--product-card-title-font-style);
    font-weight: var(--product-card-title-font-weight);
    line-height: var(--product-card-title-line-height);
    letter-spacing: var(--product-card-title-letter-spacing);
    text-transform: var(--product-title-case, var(--product-card-title-text-transform));
  }

  .cart-items__variant {
    display: inline-block;
  }

  .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(--cart-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(--cart-font-size--md);
  }

  .cart-items__price-unit {
    font-size: var(--cart-font-size--xs);
  }

  .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(--cart-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-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;
      justify-content: center;
    }
  }

  .cart__original-total-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__original-total-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__original-total-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__original-total-container,
  .cart__original-total-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--cart-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%;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  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);
  }

  .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(--cart-font-size--2xs);
    font-weight: var(--font-body--weight);
  }

  .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(--cart-font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-note .svg-wrapper {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
    margin: 0;
  }

  .cart-note .icon-plus {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
  }

  /* 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__properties dt,
  .cart-items__properties dd {
    display: inline;
  }
/* END_SNIPPET:cart-products-mab */

/* START_SNIPPET:cart-products (INDEX:237) */
.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-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    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-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .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.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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 > * + *,
  .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-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .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);
    margin-inline: auto;
    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-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__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-button-block-size: var(--height-buy-buttons);
    --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:238) */
/* The marks join the band of fine print above the button — the tax note is their neighbour, not
     the button — so the space above them is small and the space below them is the CTA block's own.

     align-self: stretch is not decoration. `.cart-summary__inner` is a column flex with
     `align-items: center`, so a child that does not stretch is centred rather than left-aligned
     inside a box that is itself centred. Stretching puts the box on the axis, and the list's own
     flex-start puts the marks at its start. */
  .cart__payment-marks {
    align-self: stretch;
    margin-block-start: var(--mab-gap-eyebrow);
  }

  .cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .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-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 rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    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-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:cart-typography-styles (INDEX:239) */
.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);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:240) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:241) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:244) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    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__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* 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 .resource-image__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%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:245) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--full-width),
  .collection-wrapper:has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns:
        minmax(var(--page-margin), 1fr) repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        minmax(var(--page-margin), 1fr);
    }
  }

  .collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
    @media screen and (min-width: 750px) {
      grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
    }
  }

  .collection-wrapper:has(.facets-block-wrapper--vertical:not(#filters-drawer)):has(.collection-wrapper--full-width) {
    @media screen and (min-width: 750px) {
      grid-column: 1 / -1;
      grid-template-columns: 0fr repeat(var(--centered-column-number), minmax(0, 1fr)) 0fr;
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='default']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  :is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
    [product-grid-view='mobile-single']
    .product-grid__card {
    @media screen and (max-width: 749px) {
      padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
      padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
    }
  }

  /* Make product media go edge-to-edge by using negative margins */
  :is(.collection-wrapper--full-width) .card-gallery,
  :is(.collection-wrapper--full-width-on-mobile) .card-gallery {
    @media screen and (max-width: 749px) {
      margin-inline-start: calc(-1 * max(var(--padding-xs), var(--padding-inline-start)));
      margin-inline-end: calc(-1 * max(var(--padding-xs), var(--padding-inline-end)));
    }
  }

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:249) */
.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;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:250) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:dialog-styles (INDEX:251) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */

/* START_SNIPPET:divider (INDEX:253) */
.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:256) */
.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:257) */
.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-column-mab (INDEX:258) */
.editorial-content-mab {
    padding-inline: var(--page-margin);
    text-align: center;
  }

  .editorial-content-mab__inner {
    max-width: var(--content-max-w, 780px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ── Header ── */
  .editorial-content-mab__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-end: 3rem;
    width: 100%;
  }

  .editorial-content-mab__title {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-block: 1.25rem;
    color: var(--color-foreground-heading);
  }

  .editorial-content-mab__leaf {
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.35;
    margin-block-end: 1rem;
  }

  .editorial-content-mab__leaf svg {
    display: block;
    height: 36px;
    width: auto;
    margin-inline: auto;
  }

  .editorial-content-mab__rule {
    width: 32px;
    height: 1px;
    background: rgb(var(--color-foreground-rgb) / 0.25);
    margin-block: 0.2rem;
  }

  /* ── Body ── */
  .editorial-content-mab__body {
    width: 100%;
    text-align: left;
    color: rgb(var(--color-foreground-rgb) / 0.85);
    font-family: var(--font-body--family);
    line-height: 1.75;
    font-size: 1rem;
    margin-block-end: 1rem;
  }

  .editorial-content-mab__body p {
    margin: 0 0 1.2em;
  }

  .editorial-content-mab__body p:last-child {
    margin-bottom: 0;
  }

  /* Drop cap */
  .editorial-content-mab__drop-cap {
    font-family: var(--font-heading--family);
    font-weight: var(--font-body--weight);
    font-size: 3.25em;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    margin-top: 0.05em;
    color: var(--color-foreground-heading);
  }

  /* ── Beats ── */
  /* The beats are a grid, and the gap between them is the grid's. Extracting this column into a
     snippet left the container with only width and alignment, so the beats stacked touching each
     other and never paired into two columns. */
  .editorial-content-mab__beats {
    width: 100%;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mab-gap-col-mobile);
  }

  /* TWO COLUMNS ONLY FROM 990px, not 750.
     Split at 750 the beats would be too narrow to read beside prose at the reading measure a
     column wants. 990 is the theme's own desktop breakpoint. */
  @media (min-width: 990px) {
    .editorial-content-mab__beats {
      grid-template-columns: 1fr 1fr;
      gap: var(--mab-gap-beats);
    }

    /* An image, a section label and a beat marked wide each take the whole row. */
    .editorial-content-mab__beats .editorial-content-mab__image-block,
    .editorial-content-mab__beats .editorial-content-mab__section-label,
    .editorial-content-mab__beats .mab-beat--wide {
      grid-column: 1 / -1;
    }

    .editorial-content-mab__beats .mab-beat--wide {
      max-width: 65%;
    }
  }

  /* A beat's paragraph reads in the long-form register. Without this it inherited the store
     default, which is smaller, tighter and heavier than the prose the beats replace. */
  .editorial-content-mab__beats .mab-beat p {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.85);
    font-family: var(--font-body--family);
    font-weight: var(--font-longform--weight);
    line-height: var(--mab-leading-longform);
    font-size: 1rem;
  }

  .editorial-content-mab__beats .mab-preheader-line {
    margin-block-end: 0.75rem;
  }

  /* NUMBERED STEPS — the number sits ABOVE the beat's label, and the gap belongs to the container.
     Given to each beat as a two-column grid instead, the number's column is `auto` and so is sized
     by whatever the beat's first child happens to be: a beat with a label and no number puts the
     label there, and the body keeps the remainder. */
  [data-numbered-steps].editorial-content-mab__beats {
    gap: 3.5rem var(--mab-gap-beats);
  }

  .mab-beat__step-num {
    display: block;
    font-family: var(--font-preheader--family);
    font-size: 2.5rem;
    font-weight: 400;
    line-height: var(--mab-leading-figure);
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground-rgb) / 0.15);
    margin-block-end: 0.75rem;
  }

  /* The stacked state's own rules, so they follow the grid to 990: below it the beats are one
     column, and a single column needs the larger gap to separate them and the smaller step number
     to stay in proportion to a beat that is now full width. */
  @media (max-width: 989px) {
    [data-numbered-steps].editorial-content-mab__beats {
      gap: 2.5rem;
    }

    .mab-beat__step-num {
      font-size: 2rem;
    }
  }

  /* Image break */
  .editorial-content-mab__image-block {
    width: 100%;
    margin-block: 2rem;
  }

  /* The beats path still renders this figure, so its own spacing belongs here. It was declared in
     editorial-content-mab and went with the article's move to split bands — which left the two
     photographs on the live /pages/botanicals flush against the prose at margin 0. */
  .editorial-content-mab__image-break {
    margin-block: 0.5rem;
  }

  .editorial-content-mab__image-break__label {
    font-family: var(--font-preheader--family);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--color-foreground-rgb) / 0.5);
    text-align: center;
    margin-block-end: 0.75rem;
  }

  .editorial-content-mab__image-break img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--mab-radius-base);
  }

  /* Section heading (wide beat with no body) */
  .editorial-content-mab__section-label {
    font-family: var(--font-accent--family);
    font-size: var(--mab-size-micro);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.55;
    margin-block: 2.5rem 1rem;
    width: 100%;
    text-align: left;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
    padding-block-end: 0.5rem;
  }

  /* ── CTA ── */
  .editorial-content-mab__cta {
    margin-block-start: 2.5rem;
  }

  /* ── Placeholder (design-mode only) ── */
  .editorial-content-mab__placeholder {
    padding: var(--mab-gap-block);
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
    width: 100%;
  }

  /* ── Scroll-reveal ── */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .editorial-content-mab__reveal {
      opacity: 0;
      transform: translateY(16px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .editorial-content-mab__reveal {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── FAQ accordion (structured layout with body_html) ── */
  .faq-accordion__item {
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* The row, and then the mark. Both were lost when this column came out of
     editorial-content-mab: without the flex row the mark has nowhere to sit, and without the
     mark an accordion does not read as one — the reader has no sign that a question opens. */
  .faq-accordion__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font-family: var(--font-body--family);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-foreground-heading);
    text-align: left;
    cursor: pointer;
    padding-block: 1rem;
    list-style: none;
  }

  .faq-accordion__question::-webkit-details-marker {
    display: none;
  }

  .faq-accordion__question::after {
    content: '+';
    font-family: var(--font-preheader--family);
    font-size: 1.2rem;
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / 0.45);
    line-height: 1;
  }

  .faq-accordion__item[open] .faq-accordion__question::after {
    content: '\2212';
  }

  .faq-accordion__answer {
    padding-bottom: 1.25rem;
  }

  /* ── Article reading rhythm — four automatic devices ───────────────────────
   * The reading rhythm rests on the text alone, because text is the only
   * thing every event has. Images, where they exist, are an addition and
   * never the structure. Each device fires on a signal the museum already
   * produces naturally — no authoring convention is needed.
   *
   * 1. Pull-quote   p[data-pull-quote]           a paragraph that is one <em>
   * 2. Lead-in      h2 + p (not a pull-quote)    first paragraph after a heading
   * 3. Air + rule   .rte h2                      visual landing for each section
   * 4. Bold runs    <strong>                      stay as-is; no rule needed
   *
   * Minimal case (no italic, no bold, one heading or none): devices 1, 2, 4
   * are silent. Device 3 adds breathing room only when an h2 is present.
   * Plain prose columns render without disruption.
   * ──────────────────────────────────────────────────────────────────────── */

  /* 3. Air + rule above each heading — section heading with visual landing.
     Also corrects the hierarchy inversion: Heritage's global h2 was 48px,
     exceeding the event page's h1 (32px). mab-size-prose-heading caps it.
     Applies to the snippet's own body and the inlined Band 2 in
     event-detail-mab.liquid, which share the same class. */
  .editorial-content-mab__body.rte h2 {
    font-size: var(--mab-size-prose-heading);
    margin-block: 3rem 0.75rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.15);
  }

  /* 1. Pull-quote: a paragraph whose whole content is one <em>, marked
     `data-pull-quote` by the Liquid above.
     The museum writes leads and reflective closing lines this way — no new
     convention needed. Larger and quieter: frames the narrative without
     competing with headings. No quotation marks — the brand does not shout. */
  .editorial-content-mab__body.rte p[data-pull-quote] {
    font-size: var(--mab-size-megamenu-heading);   /* 1.25rem — above body, below heading */
    color: rgb(var(--color-foreground-rgb) / 0.55);
    margin-block: 2.5rem;
    line-height: var(--mab-leading-body);           /* 1.6 */
  }

  /* 2. Lead-in: the first paragraph following a section heading.
     Brand intro-paragraph weight (Rubik 500) applied automatically.
     Pull-quotes that immediately follow a heading are excluded — they already
     receive the treatment above. */
  .editorial-content-mab__body.rte h2 + p:not([data-pull-quote]) {
    font-weight: 500;
  }

  /* h2 section separators above accordion groups */
  [data-faq-accordion] h2 {
    margin-top: 3rem;
  }

  [data-faq-accordion] h2:first-child {
    margin-top: 0;
  }
/* END_SNIPPET:editorial-column-mab */

/* START_SNIPPET:editorial-product-grid (INDEX:259) */
.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,
    .product-media__image {
      height: 100%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      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:event-editions-mab (INDEX:261) */
.event-editions {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
  }

  .event-editions__heading {
    margin: 0;
  }

  /* The column and its gap come from .mab-text-stack, which already declares exactly those three
     and the same token. Only the list reset is local — a <ul> needs it and the utility, being for
     any stack, does not carry it. The agenda's own .events-list__rows still restates the three; it
     should adopt the utility too, which is a tidy for that section rather than for this one. */
  .event-editions__rows {
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* END_SNIPPET:event-editions-mab */

/* START_SNIPPET:event-facts-mab (INDEX:262) */
/* A two-column grid rather than a flex stack: the label and its value belong to one row, and a
     grid keeps them together when a value wraps. */
  /* The grid gap is the TIGHT one, because it falls between a label and the value it names —
     mab-base.css states the rule: an eyebrow sits tight to the heading it labels, everything else
     gets air. The air is the value's own bottom margin, so each label/value pair reads as one
     group and the three groups separate. Reversing the two makes six near-equidistant lines. */
  .event-facts {
    display: grid;
    gap: var(--mab-gap-eyebrow);
    margin: 0 0 var(--mab-gap-block);
  }

  /* mab-data-label is the register: the small uppercase word that names a value read beside it.
     It was written out here by hand, as a fourth copy of a utility that exists precisely for a
     fact in a hero — at a size no token carried and a tracking that did not match the others. */
  .event-facts__label {
    margin: 0;
  }

  .event-facts__value {
    font-family: var(--font-body--family);
    font-weight: 500;
    font-size: var(--mab-size-body-sm);
    line-height: var(--mab-leading-compact);
    margin: 0 0 var(--mab-gap-text);
  }

  .event-facts__value:last-of-type {
    margin-block-end: 0;
  }

  /* A floor, not a size: WCAG 2.2 AAA asks 44x44 for a touch target, and this is the one place
     the block guarantees it whatever CTA register the branch above chose. */
  .event-facts__cta {
    min-block-size: var(--mab-height-cta-min);
  }
/* END_SNIPPET:event-facts-mab */

/* START_SNIPPET:event-row-mab (INDEX:264) */
/* ===== Event row (event-row-mab) ===== */

  /* The row: a surface card, cream background, thin border, generous radius.
     position:relative anchors the CTA ::after full-row overlay (single tab stop) — declared
     here, not inline, so it cannot be overridden without !important.
     overflow:hidden clips the image at the row's rounded corners on mobile. */
  .event-row {
    position: relative;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: var(--mab-radius-lg);
    background: var(--mab-cream);
    list-style: none;
    overflow: hidden;
  }

  /* Inner: stamp | body at all widths (horizontal, not stacked).
     flex-wrap: wrap lets the image strip take flex-basis:100% and appear above both on mobile.
     On desktop the image is a fixed-width sidebar, so flex-wrap is set to nowrap there. */
  .event-row__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
  }

  @media screen and (min-width: 750px) {
    /* stamp | image | body. The image is a sidebar here; flex-wrap:nowrap keeps all three on
       one line. DOM order is stamp, body, image — visual order comes from the order properties
       so screen readers and phones meet words before the picture. */
    .event-row__inner {
      flex-wrap: nowrap;
    }
    .event-row__date-stamp { order: 0; }
    .event-row__media      { order: 1; }
    .event-row__body       { order: 2; }
  }

  /* The action cell. Its right padding is the row's inner margin, so the CTA's right edge is
     the same distance from the row's edge whatever else the row contains; its bottom padding
     matches the content column's, so the two boxes end together. */
  .event-row__action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: var(--mab-gap-text);
    /* The copy stops well before the button: the content column's own inline padding plus this
       one, so the two columns read as two columns rather than as a wrapped line. */
    padding-inline-start: var(--mab-gap-block);
  }

  /* An empty track has nothing to say on a phone, where the row is a column. */
  .event-row__action:empty {
    display: none;
  }

  @media screen and (min-width: 990px) {
    /* The reserved track. min rather than fixed: an unusually long label in one locale takes
       the width it needs from that row's copy instead of being clipped. It is reserved only where
       the action is a column — below 990 it sits under the copy and needs no width of its own. */
    .event-row__action {
      min-inline-size: var(--mab-list-action-w);
    }
    .event-row__action:empty {
      display: block;
    }
  }

  @media screen and (max-width: 989px) {
    .event-row__action {
      padding-block-start: 0;
      padding-inline-start: var(--mab-gap-text);
    }
  }

  /* ---- FEATURE PLATE ---- */

  /* An exhibition running now is a state, not a date, so it is set apart rather than
     ranked: a tonal ground instead of cream, a wider photograph, a title one rung up.
     The caller decides which rows get it; the row only knows how to look like one. */
  .event-row--feature {
    background: var(--mab-sage);
    border-color: rgb(var(--color-foreground-rgb) / 0.12);
  }

  .event-row--feature .event-row__title {
    font-size: var(--mab-size-prose-heading);
  }

  /* A third line: the plate has the height for it, and two lines cut the exhibition's
     summary mid-sentence. */
  .event-row--feature .event-row__summary {
    -webkit-line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .event-row--feature.event-row--has-image .event-row__media {
      width: 300px;
    }
  }

  @media screen and (min-width: 990px) {
    .event-row--feature.event-row--has-image .event-row__media {
      width: 380px;
    }
  }

  /* ---- DATE STAMP ---- */

  /* The ticket-stub corner: Courier Prime 400, ink colour, strong size contrast between day
     number and month abbreviation. Sits in a narrow column at all widths with a right border.
     Mobile padding is compact (eyebrow block, text inline) so the card height is driven by the
     text column rather than the stamp's outer margin. */
  .event-row__date-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* --mab-gap-eyebrow (0.5rem) top/bottom, --mab-gap-text (1.25rem) left/right.
       Keeps the stamp narrow while giving the day number breathing room inline. */
    padding: var(--mab-gap-eyebrow) var(--mab-gap-text);
    background: rgb(var(--mab-ink-rgb) / 0.03);
    border-inline-end: 1px solid rgb(var(--color-foreground-rgb) / 0.06);
    font-family: var(--font-preheader--family);
    font-weight: var(--font-preheader--weight);
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-label);
    color: rgb(var(--mab-ink-rgb) / 0.9);
    flex-shrink: 0;
  }

  @media screen and (min-width: 750px) {
    .event-row__date-stamp {
      /* Restore uniform padding at tablet; explicit min/max-width keeps the stamp a consistent
         ticket-stub column width whether the day is one or two digits. */
      padding: var(--mab-gap-text);
      min-width: 5.5rem;
      max-width: 7rem;
    }
  }

  /* Range: two date-lines separated by an en dash, stacked vertically. */
  .event-row__date-range {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
  }

  .event-row__range-sep {
    font-size: var(--mab-size-body-sm);
    opacity: 0.5;
    line-height: 1;
  }

  /* One date-line: day on top (large), month below (smaller), optional year below that. */
  .event-row__date-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
  }

  /* Day: the headline of the ticket. Large via size — no weight change (brand forbids 700). */
  .event-row__day {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: var(--mab-leading-figure);
    color: var(--mab-ink);
  }

  /* Month: secondary line, smaller and dimmed. */
  .event-row__month {
    font-size: var(--mab-size-label);
    color: rgb(var(--mab-ink-rgb) / 0.65);
  }

  /* Year: shown only when the date is not in the current year, or when a cross-year range
     makes the end year necessary for disambiguation. Same scale as month but further dimmed. */
  .event-row__year {
    font-size: var(--mab-size-label);
    color: rgb(var(--mab-ink-rgb) / 0.45);
  }

  /* ---- CONTENT ---- */

  /* The words and their action. align-items:flex-end on the row axis puts the action's box
     bottom on the text's box bottom, whatever height the stamp or the photograph give the
     row. min-width:0 lets the text column shrink instead of overflowing. */
  .event-row__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  /* Declared here rather than in the row's own media query above: both selectors are (0,1,0),
     so the later one wins, and the base rule above is the later one. */
  /* THE ACTION SITS BESIDE THE COPY FROM 990px, not 750.
     Beside it at 750, the action's reserved track is rigid and the copy pays for it: in a 675px row
     the title was left 79 pixels and wrapped over four lines. Below 990 the action drops under the
     copy, which then takes the body's full width. The image stays a sidebar from 750 — moving that
     too would make it full-width and the row three times taller, on a list already 9495px long. */
  @media screen and (min-width: 990px) {
    .event-row__body {
      flex-direction: row;
      align-items: flex-end;
    }
  }

  .event-row__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mab-gap-eyebrow);
    flex: 1;
    padding: var(--mab-gap-text);
    min-width: 0; /* prevents flex child from overflowing */
  }

  /* Meta line: type · location. .mab-preheader — not .mab-preheader-line: the utility block
     in mab-base.css reserves the line for what OPENS a band, and a row is an object inside
     one. The line was prolonging each row's meta toward the middle of the row. */
  /* Wraps rather than truncates: the pill at the end of the line is a fact a visitor
     came for, and an ellipsis would be free to eat it. */
  .event-row__meta {
    margin: 0;
    color: rgb(var(--mab-ink-rgb) / var(--mab-preheader-alpha));
  }

  /* Title: mab-editorial-card-title supplies the type treatment. */
  .event-row__title {
    margin: 0;
  }

  /* The title IS the row's control. It carries no underline at rest — a list of underlined
     titles reads as a directory — and gains one on hover or keyboard focus, which is also
     the only response a text-only archive row has. */
  .event-row__link {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--mab-duration-fast) ease;
  }

  .event-row:hover .event-row__link,
  .event-row__link:focus-visible {
    text-decoration: underline;
  }

  /* Summary: mab-editorial-card-text supplies the type. Two-line clamp keeps rows
     consistent when copies differ in length. */
  .event-row__summary {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The title anchor's ::after covers the full row (anchored by position:relative on
     .event-row in the rule above), so a click anywhere reaches the event's page. */
  .event-row .event-row__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* Stacks over the full-row overlay so a bookable row offers two real destinations: the
     page from anywhere, the product from the button. Its bottom edge lands on the copy's
     bottom edge — a line drawn under the last sentence runs under the button too — which the
     action cell's matching bottom padding gives it, with no offset of its own. */
  .event-row .event-row__cta {
    position: relative;
    z-index: 1;
  }

  /* WCAG 2.2 SC 2.5.5 AAA: 44px minimum touch target on mobile. min-block-size lifts the hit area to the
     token without changing the visual padding at desktop (the rule is scoped to mobile via
     max-width). */
  @media screen and (max-width: 749px) {
    .event-row .event-row__cta {
      min-block-size: var(--mab-height-cta-min);
      display: inline-flex;
      align-items: center;
    }
  }

  /* ---- IMAGE (optional) ---- */

  /* A row without a photograph never receives the event-row--has-image class, so this base
     display:none is what keeps the empty media box out of the flow. */
  .event-row__media {
    display: none;
  }

  /* Upcoming rows with a photograph: show as a full-width cinematic strip at the TOP of the
     card on mobile. flex-basis:100% takes the full inner width; order:-1 floats the strip
     above the stamp+body pair in the flex wrapping context. The 3:2 aspect-ratio gives it a
     defined height while mab-card-media's img rules (width:100%; height:100%; object-fit:cover)
     fill it. --mab-card-media-radius:0 because the card's overflow:hidden already clips the
     top corners — a redundant radius would round the bottom edge where the stamp's border is. */
  .event-row--has-image .event-row__media {
    display: block;
    flex-basis: 100%;
    order: -1;
    aspect-ratio: var(--mab-media-scene-ratio-mobile);
    --mab-card-media-radius: 0;
  }

  @media screen and (min-width: 750px) {
    /* Desktop: the image becomes a fixed-width sidebar between stamp and body.
       Reset the mobile flex overrides so it sits inline. The photograph is taken out of flow
       (position:absolute; inset:0) so it cannot drive the row's height — the row's height
       comes from the text column and the image crops to fill it. No aspect-ratio here: a fixed
       ratio or a height floor would push the CTA below the summary's last line. */
    .event-row--has-image .event-row__media {
      flex-basis: auto;
      order: 1;
      aspect-ratio: auto;
      width: 260px;
    }

    .event-row--has-image .event-row__media img {
      position: absolute;
      inset: 0;
    }
  }

  .event-row__image {
    display: block;
  }

  /* Hover: hovering the row zooms the image. */
  .event-row--has-image:hover .event-row__media img {
    transform: scale(var(--mab-card-zoom));
  }

  /* ---- Scroll-reveal motion ---- */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .event-row {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .event-row {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:event-row-mab */

/* START_SNIPPET:external-link-modal-mab (INDEX:265) */
/* ── Native <dialog> reset ── */
  .external-link-modal-mab {
    border: none;
    padding: 0;
    background: transparent;
    max-width: calc(100% - 3rem);
    width: 420px;
    overflow: visible;
  }

  /* Dark overlay backdrop — editorial, no blur */
  .external-link-modal-mab::backdrop {
    background: rgb(var(--color-foreground-rgb) / 0.72);
  }

  /* ── Panel ── */
  .external-link-modal-mab__panel {
    background: var(--color-background);
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.1);
    border-radius: var(--mab-radius-base);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 24px 60px rgb(var(--color-foreground-rgb) / 0.12);
    animation: modal-panel-in var(--mab-duration-base) ease forwards;
  }

  @keyframes modal-panel-in {
    from { opacity: 0; transform: scale(0.97) translateY(4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
  }

  /* ── Label ── */
  .external-link-modal-mab__label {
    font-family: var(--font-preheader--family);
    font-size: var(--mab-size-micro);
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-label);
    margin: 0 0 1.25rem;
    color: rgb(var(--color-foreground-rgb) / 0.45);
  }

  /* ── Leaf icon ── */
  .external-link-modal-mab__icon {
    color: rgb(var(--color-foreground-rgb));
    opacity: 0.2;
    margin-block: 0 1.25rem;
  }

  .external-link-modal-mab__icon svg {
    display: block;
    height: 28px;
    width: auto;
    margin-inline: auto;
  }

  /* ── Message ── */
  .external-link-modal-mab__message {
    margin: 0 0 2rem;
    font-family: var(--font-body--family);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-foreground);
  }

  .external-link-modal-mab__message strong {
    font-weight: var(--font-body--weight);
  }

  /* ── Actions ── */
  .external-link-modal-mab__actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
  }
/* END_SNIPPET:external-link-modal-mab */

/* START_SNIPPET:filter-remove-buttons (INDEX:266) */
/* 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:fly-to-cart-styles (INDEX:267) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:273) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    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 {
    position: absolute;
    inset: 0;
    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;
    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) {
      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-styles */

/* START_SNIPPET:grid-density-controls (INDEX:275) */
.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-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-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:276) */
.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:277) */
.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 {
    /* develop renders this sheet as snippets/account-actions.liquid, a MAB-only
       file that exists in no Heritage baseline, where the Orders and Profile
       items are `.button-secondary`: Courier Prime 400, 14px, uppercase.
       The hosted component's shadow root CSS cannot be
       reached, so the -font-body-* trio is the only lever: the sheet's body type
       carries the label font rather than the paragraph font, which is what those
       items were. Headings keep --font-heading--*. Letter-spacing has no
       variable and stays the component's. */
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-heading-transform: none;
    --shopify-account-font-body: var(--font-preheader--family);
    --shopify-account-font-body-weight: var(--font-preheader--weight);
    --shopify-account-font-body-transform: uppercase;
    --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-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  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;
    }
  }

  .header-actions__cart-icon .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-bubble.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;
    }
  }

  .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:278) */
.icon-caret--forward svg {
    transform: rotate(-90deg);
  }

  .icon-caret--backward svg {
    transform: rotate(90deg);
  }

  .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);
    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-overlay);
    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;
  }

  /* Submenu header with a centered, clickable title flanked by the back and
     close controls. */
  .menu-drawer__nav-buttons--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-drawer__title {
    justify-self: center;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
  }

  .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;
  }

  /* Match the menu links' focus style: a rectangular outline in the current color.
     These buttons sit flush against the drawer edges, so inset the outline to keep
     it from being clipped. */
  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    border-radius: 0;
    outline-offset: calc(var(--padding-2xs) * -1);
  }

  /* Safari < 16.4 draws the close focus ring via a pseudo-element; keep it
     rectangular there too. */
  .menu-drawer__close-button:focus-visible::after {
    border-radius: 0;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__back-button {
    width: fit-content;
    padding: var(--padding-lg);
    justify-self: start;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__close-button {
    justify-self: end;
  }

  .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);
  }

  .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);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:hero-carousel-slide-mab (INDEX:280) */
/* ── Hero Carousel MAB — slide content overlay ─────────────────────────── */

  /* Disable Heritage slide-reveal animation — handled per element below */
  .hero-carousel-mab__overlay {
    animation: none;
    opacity: 1;
  }

  /* Overlay: flex container, vertically centered on all viewports */
  .hero-carousel-mab__overlay {
    display: flex;
    align-items: center;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 6vw, 4rem);
  }

  /* Text block */
  .hero-carousel-mab__text {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  /* Label — Courier Prime via .mab-preheader */
  .hero-carousel-mab__label {
    color: rgb(var(--mab-ivory-rgb) / 0.85);
    margin: 0;
  }

  /* Heading — Space Grotesk 500, fluid scale, max 2 lines */
  .hero-carousel-mab__heading {
    font-family: var(--font-heading--family);
    font-weight: var(--font-heading--weight);
    font-size: clamp(2.5rem, 7vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--mab-ivory);
    margin: 0;
    text-wrap: balance;
  }

  /* Body — Rubik 400 */
  .hero-carousel-mab__body {
    font-family: var(--font-body--family);
    font-weight: 400;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.65;
    color: rgb(var(--mab-ivory-rgb) / 0.75);
    margin: 0;
    max-width: 440px;
  }

  .hero-carousel-mab__body p {
    margin: 0;
  }

  /* CTA wrapper */
  .hero-carousel-mab__cta-wrap {
    margin-block-start: 0.25rem;
  }

  /* Arrow micro-interaction */
  .hero-carousel-mab__cta-arrow {
    display: inline-block;
    transition: transform var(--mab-duration-fast) ease;
  }

  .hero-carousel-mab__cta:hover .hero-carousel-mab__cta-arrow,
  .hero-carousel-mab__cta:focus-visible .hero-carousel-mab__cta-arrow {
    transform: translateX(4px);
  }

  /* ── Staggered entry animation ─────────────────────────────────────────── */

  @keyframes hero-slide-in {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__label,
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__heading,
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__body,
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__cta-wrap {
      animation: hero-slide-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .hero-carousel-mab__text.is-entering .hero-carousel-mab__label    { animation-delay: 0s;    }
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__heading  { animation-delay: 0.1s;  }
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__body     { animation-delay: var(--mab-duration-fast);  }
    .hero-carousel-mab__text.is-entering .hero-carousel-mab__cta-wrap { animation-delay: var(--mab-duration-base);  }
  }

  /* ── Product spotlight — premium frosted-glass frame ───────────────────── */

  /* Hidden on mobile: hero breathes without competition */
  .hero-carousel-mab__product-spot {
    display: none;
  }

  @media screen and (min-width: 750px) {
    /* Show product spot on desktop */
    .hero-carousel-mab__product-spot {
      display: block;
      flex: 0 0 auto;
      width: clamp(150px, 14vw, 210px);
    }

    /* Overlay becomes row when product present */
    .hero-carousel-mab__overlay--with-product {
      align-items: center;
      justify-content: space-between;
      padding-inline-end: clamp(2rem, 5vw, 4rem);
      gap: clamp(2rem, 4vw, 5rem);
    }

    /* Tighten text max-width to leave room for product frame */
    .hero-carousel-mab__overlay--with-product .hero-carousel-mab__text {
      max-width: 480px;
    }
  }

  /* Frosted-glass frame */
  .hero-carousel-mab__product-frame {
    display: block;
    overflow: hidden;
    border-radius: var(--mab-radius-base);
    border: 1px solid rgb(var(--mab-ivory-rgb) / 0.15);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    text-decoration: none;
    transition: border-color var(--mab-duration-base) ease, transform var(--mab-duration-base) ease;
  }

  a.hero-carousel-mab__product-frame:hover {
    border-color: rgb(var(--mab-ivory-rgb) / 0.32);
    transform: scale(1.025);
  }

  /* Portrait image */
  .hero-carousel-mab__product-img {
    display: block;
    width: 100%;
    aspect-ratio: var(--mab-ratio-portrait);
    object-fit: cover;
    object-position: center top;
  }

  /* Info strip: vendor + product name */
  .hero-carousel-mab__product-info {
    padding: 0.625rem 0.875rem 0.75rem;
    border-top: 1px solid rgb(var(--mab-ivory-rgb) / 0.12);
    background: rgb(var(--mab-ink-rgb) / 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  /* Vendor — Courier Prime 400 stamp */
  .hero-carousel-mab__product-vendor {
    font-family: var(--font-preheader--family);
    font-weight: 400;
    font-size: 0.5625rem;
    letter-spacing: var(--mab-tracking-label);
    text-transform: uppercase;
    color: rgb(var(--mab-ivory-rgb) / 0.5);
    display: block;
  }

  /* Region — Courier Prime, slightly brighter than vendor */
  .hero-carousel-mab__product-region {
    font-family: var(--font-preheader--family);
    font-weight: 400;
    font-size: 0.5625rem;
    letter-spacing: var(--mab-tracking-body);
    text-transform: uppercase;
    color: rgb(var(--mab-ivory-rgb) / 0.65);
    display: block;
  }

  /* Product name — Rubik 500 */
  .hero-carousel-mab__product-name {
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    font-size: 0.8125rem;
    line-height: 1.35;
    color: rgb(var(--mab-ivory-rgb) / 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Product spot animation: slides in from right, triggered by sibling .is-entering */
  @keyframes hero-product-in {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero-carousel-mab__text.is-entering ~ .hero-carousel-mab__product-spot {
      animation: hero-product-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-delay: 0.45s;
    }
  }
/* END_SNIPPET:hero-carousel-slide-mab */

/* START_SNIPPET:hero-door-mab (INDEX:281) */
/* ===== Hero door ===== */

  /* A cell of the hero grid, not a card: no shell, no radius, no shadow. The rules that divide
     the doors from each other and from the copy above belong to the grid in hero-doors-mab. */
  /* The inline padding comes from the grid through --hero-door-pad-*, because the row is a
     bled register and only the grid knows where its edges are. Custom properties rather than
     selectors: the two stylesheets compile into one sheet and a padding declared here would
     race the grid's at equal specificity. */
  .hero-door {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mab-gap-eyebrow);
    padding-block: var(--mab-gap-text);
    padding-inline: var(--hero-door-pad-start, 0) var(--hero-door-pad-end, 0);
  }

  @media screen and (min-width: 750px) {
    .hero-door {
      padding-block: var(--mab-gap-block);
    }
  }

  /* mab-preheader supplies the eyebrow's face and its alpha, keyed to the band's foreground, so
     the ivory comes from the ground rather than from a colour declared here.

     The door heading is the second rank on the page, under the hero's own h1, so it takes the
     section face rather than the lead face the h1 carries. It carries no utility, so its colour
     is declared. */
  .hero-door__heading {
    font-size: var(--mab-size-section);
    line-height: var(--mab-leading-heading);
    color: var(--mab-ivory);
    margin: 0;
    transition: color var(--mab-duration-base) var(--mab-easing-bounce);
  }

  /* mab-body-text supplies the face, the colour and the 0.9 opacity. */
  .hero-door__body {
    max-width: var(--mab-measure-copy);
    margin: 0;
  }

  /* On a phone the label, the heading and the CTA state the whole proposition, and dropping the
     sentence is what keeps both doors above the fold.

     WHAT BREAKS IF YOU CHANGE THIS: restoring it puts the second door's CTA about 100px below the
     fold at 390x844, so the visitor sees a door cut in half rather than two doors. */
  @media screen and (max-width: 749px) {
    .hero-door__body {
      display: none;
    }
  }

  .hero-door__cta {
    margin-block-start: var(--mab-gap-eyebrow);
    --mab-cta-on-dark-color: var(--hero-door-accent);
    --mab-cta-on-dark-border: var(--hero-door-accent);
  }

  /* The accent fills behind the label on hover, at the alpha a wash uses rather than a button's. */
  .hero-door--linked:hover .hero-door__cta,
  .hero-door--linked:focus-within .hero-door__cta {
    background-color: rgb(var(--hero-door-accent-rgb) / 0.12);
  }

  /* A ground faint enough to separate the cell from its neighbour without reading as a card. It
     is drawn by a layer that reaches past the cell's leading edge to the page margin, because the
     cell has no inline-start padding: its copy sits on the same vertical line as the hero's
     heading, and moving the copy inward to clear the ground would break that line. */
  .hero-door--washed::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--mab-ivory-rgb) / 0.04);
    z-index: -1;
    pointer-events: none;
  }

  /* The wash separates two cells standing side by side. Stacked, they are separated by the rule
     above each one, so the wash has nothing left to do — and it lightens the very ground the copy
     needs dark. */
  @media screen and (max-width: 749px) {
    .hero-door--washed::before {
      background: transparent;
    }

    /* The label is Courier Prime at 12px in the door's accent, and the shop's accent is Absinthe
       Orange at relative luminance 0.287 — so 4.5:1 needs the ground behind it at or below 0.025,
       which no scrim that leaves the photograph visible can reach. A ground of its own inside the
       existing contour carries it: measured 4.71:1 at the worst pixel against 2.19:1 without.

       WHAT BREAKS IF YOU CHANGE THIS: the figure is photograph-dependent, and the merchant can
       replace the photograph. Re-measure the composited pixels under both doors' labels after any
       change to the hero image, and read `--mab-overlay-*` as the other half of the sum. */
    .hero-door__cta {
      background-color: rgb(var(--mab-ink-rgb) / 0.6);
    }
  }

  /* The cell is the hit area. The overlay sits above the copy and below nothing else, so the
     whole door is one target; remove it and the door becomes a box with a small link in it. */
  .hero-door--linked .hero-door__cta::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* The rule grows from the leading edge under the door being pointed at — the page's one
     non-decorative hover gesture. Focus is included because the anchor covering the cell is what
     receives it, and the cell is what has to answer. */
  .hero-door--linked::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 0;
    block-size: var(--mab-rule-weight);
    background: var(--hero-door-accent);
    transition: inline-size var(--mab-duration-base) var(--mab-easing-bounce);
  }

  .hero-door--linked:hover::after,
  .hero-door--linked:focus-within::after {
    inline-size: 100%;
  }

  .hero-door--linked:hover .hero-door__heading,
  .hero-door--linked:focus-within .hero-door__heading {
    color: var(--hero-door-accent);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-door--linked::after,
    .hero-door__heading {
      transition: none;
    }
  }
/* END_SNIPPET:hero-door-mab */

/* START_SNIPPET:hero-doors-mab (INDEX:282) */
/* ===== Hero doors band ===== */

  /* isolation keeps the ground's stacking to this band, so an absolutely-positioned layer here
     cannot slide under or over a neighbouring section. */
  .hero-doors {
    position: relative;
    isolation: isolate;
    padding-inline: var(--page-margin);
  }

  /* The photograph. Behind everything, and decorative: the band's meaning is its words, so the
     image carries an empty alt and no role in the accessible name. */
  .hero-doors__ground {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
  }

  /* `<picture>` has to carry the ground's whole box, because the image's `height: 100%` resolves
     against it. Left at its automatic height it takes the file's own aspect ratio, the image stops
     short of the band's foot and the ink ground shows through as a black strip — 125px at
     1200 x 854. The wrapper only exists when a mobile image is configured, which is why a band
     without one never showed this.

     WHAT BREAKS IF YOU CHANGE THIS: `object-fit: cover` below needs a definite height to crop
     against. Remove this and the crop silently becomes a letterbox. */
  .hero-doors__ground picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* The photograph settles from --mab-hero-settle-scale to 1 once, on arrival, and holds. The
     ground clips the overscan.

     WHAT BREAKS IF YOU CHANGE THIS: the scrim below has to hold at both ends of the settle, not
     just at rest. A larger start scale brings a lit region of the interior under the eyebrow;
     check the contrast at scale 1 and at the start scale before raising it. */
  .hero-doors__ground img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: mab-hero-zoom-out var(--mab-duration-hero-settle) ease-out forwards;
    transform: scale(var(--mab-hero-settle-scale));
  }

  /* The scrim, drawn along the two axes the copy runs on rather than flat across the picture: the
     inline gradient darkens the leading edge where the heading and both doors' copy sit and
     releases the trailing edge where the photograph's subject is, and the block gradient covers
     the header chrome at the top and the doors' strip at the bottom while leaving the middle open.

     The block gradient closes on the doors' register rather than easing into it. The doors begin
     at 70% of the ground, and the inline gradient has released to 0.115 by the trailing door's
     column — so that door's copy stands on the block gradient alone. At the old 0.28 there, its
     16px body measured 3.40:1; at 0.55 it measures 6.23:1. The trailing edge stays open above
     70%, where the photograph's subject is.

     WHAT BREAKS IF YOU CHANGE THIS: every text run in the band is ivory on what these two
     gradients leave. The eyebrow at 12px and the door copy at 16px are the tight ones — measure
     the composited ground under each run, at both ends of the photograph's settle, before
     lowering any stop. Measure the trailing door's body specifically: it is the one run that
     stands on a single gradient, and it is the first to fail. */
  .hero-doors__ground::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        var(--mab-overlay-strong) 0%,
        var(--mab-overlay-medium) 30%,
        var(--mab-overlay-light) 62%,
        transparent 82%
      ),
      linear-gradient(
        180deg,
        var(--mab-overlay-medium) 0%,
        var(--mab-overlay-light) 18%,
        transparent 40%,
        var(--mab-overlay-dim) 62%,
        var(--mab-overlay-medium) 76%,
        var(--mab-overlay-strong) 100%
      );
  }

  /* Below the tablet breakpoint the copy spans the full width, so there is no trailing edge to
     release: the scrim goes vertical only and the picture shows through the band between the copy
     and the doors.

     WHAT BREAKS IF YOU CHANGE THIS: with the inline gradient in play at this width the intro
     scores 3.43:1, under the 4.5 a 16px run needs. */
  /* Mobile stacks the doors, so they occupy the band's lower two fifths rather than one strip at
     its foot, and the scrim's open middle has to end before they begin. The doors' grid starts at
     60% of the ground; the trough therefore closes at 48% and the ramp is already climbing when
     the first door's label arrives.

     WHAT BREAKS IF YOU CHANGE THIS: the trough was at 62%, which put its lightest point exactly
     under the upper door's copy — label 3.57:1, heading 2.73:1, call to action 2.19:1, all under
     floor. Measured minimum alphas there are 0.45, 0.38 and 0.77; these stops deliver 0.47, 0.52
     and 0.57, and the call to action makes up its shortfall with a ground of its own. Move a stop
     and re-measure the composited pixels under all three runs of the upper door. */
  @media screen and (max-width: 749px) {
    .hero-doors__ground::after {
      background: linear-gradient(
        180deg,
        var(--mab-overlay-strong) 0%,
        var(--mab-overlay-medium) 34%,
        var(--mab-overlay-dim) 48%,
        var(--mab-overlay-medium) 66%,
        var(--mab-overlay-strong) 100%
      );
    }
  }

  /* THE LOUCHE. Sage clouding into copper, off-centre — the clouding absinthe performs when
     water hits it. Sits over the photograph and under the copy, and holds still: the band's one
     motion is the photograph settling.

     The radials are designed to read on any ground, which is why the band still has depth with no
     photograph behind it. */
  .hero-doors__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(
        115% 85% at 80% 32%,
        rgb(var(--mab-sage-rgb) / 0.55),
        rgb(var(--mab-copper-rgb) / 0.16) 32%,
        transparent 60%
      ),
      radial-gradient(80% 70% at 84% 42%, rgb(var(--mab-ivory-rgb) / 0.4), transparent 52%);
    opacity: 0.34;
  }

  /* The settle is decorative and runs on arrival, so reduced motion gets the framing it ends on. */
  @media (prefers-reduced-motion: reduce) {
    .hero-doors__ground img {
      animation: none;
      transform: none;
    }
  }

  /* THE BAND SITS UNDER A TRANSPARENT HEADER, so its first line has to clear it.

     The chrome's height is the same expression `header-actions` uses: the header group, plus the
     header's own height when the header is transparent. A transparent header is absolutely
     positioned, so its section wrapper measures zero and `--header-group-height` counts only the
     announcement bar — which is why the header's height is added back, and why the boolean is
     what keeps the sum correct when the header is not transparent and the group already includes
     it. All three come from `header-mab`, which declares them on `body`, and `theme.liquid`
     measures the two heights before first paint whenever the header is transparent — which it is
     wherever this band is used, so no consumer opt-in is needed here.

     Plus the wide split rung for air. Its clamp ceiling matches the air the design reference
     gives its own hero, and its gentler ramp is what suits a transparent header taller than that
     reference's: less padding reaches the same optical result. It also falls to its floor on a
     phone, where the header collapses and vertical space is the scarce thing, so a flat value
     would be wrong at the narrow end.

     The whole thing follows the header at every width: the announcement bar wraps on a narrow
     screen and the row collapses on a phone.

     WHAT BREAKS IF YOU CHANGE THIS: the padding belongs to the container, not to the band root.
     The root paints the ink ground, and that ground is meant to run up behind the header; moving
     the padding onto it would push the colour down and leave a strip of page background above.
     The band's own `padding-block-start` setting is 0 for the same reason — two sources of top
     space here would stack. */
  .hero-doors__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
    padding-block-start: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean)) +
        var(--mab-gap-split-wide)
    );
  }

  /* mab-lead-title and mab-preheader-line supply the typography. The heading is capped at the
     lead measure so it wraps into a block rather than running the container's full width. */
  .hero-doors__heading {
    max-width: var(--mab-measure-lead);
    text-wrap: balance;
  }

  /* mab-intro-text supplies the face, the weight and the colour; only the measure is this band's. */
  .hero-doors__intro {
    max-width: var(--mab-measure-intro);
  }

  /* The doors are two cells of one plane, divided by hairlines rather than separated into
     panels: the band is one ground, and the rules are what say there are two ways in.
     Mobile stacks them, so the divider becomes the rule above each cell. */
  /* The doors are a bled register under an inset copy block: the row escapes the container by one
     page margin, so its rule, the cells' grounds and the divider between them share one geometry,
     and each cell takes that margin back as inline padding — which puts its copy on the same
     vertical line as the heading above.

     The escape is taken from the container, not the viewport. `50% - 50vw` reaches the glass on a
     wide screen and overshoots by half a scrollbar, which is a horizontal scrollbar on the whole
     page; the container's own edge cannot overshoot anything. Above the width where the container
     clamps, the bleed is one page margin rather than the full band. */
  .hero-doors__grid {
    display: grid;
    grid-template-columns: 1fr;
    margin-block-start: var(--mab-gap-split-wide);
    margin-inline: calc(-1 * var(--page-margin));
    border-block-start: 1px solid rgb(var(--mab-ivory-rgb) / var(--mab-hairline-alpha));
    --hero-door-pad-start: var(--page-margin);
    --hero-door-pad-end: var(--page-margin);
  }

  .hero-doors__grid > * + * {
    border-block-start: 1px solid rgb(var(--mab-ivory-rgb) / var(--mab-hairline-alpha));
  }

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

    /* Side by side the divider is vertical, so the stacked rule between cells is released and
       the same hairline is drawn on the inline edge instead.

       The padding turns asymmetric here: a cell takes the page margin on the side facing the page
       edge and the column gap on the side facing the divider. */
    .hero-doors__grid > :first-child {
      --hero-door-pad-end: var(--mab-gap-columns);
    }

    .hero-doors__grid > * + * {
      border-block-start: 0;
      border-inline-start: 1px solid rgb(var(--mab-ivory-rgb) / var(--mab-hairline-alpha));
      --hero-door-pad-start: var(--mab-gap-columns);
    }
  }
/* END_SNIPPET:hero-doors-mab */

/* START_SNIPPET:journal-related-mab (INDEX:295) */
.journal-related {
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-beats);
  }

  /* The shopping register spans the viewport: it cancels the band's inline padding and applies it
     again as its own, so its ground reaches the edges while its content stays on the measure. */
  .journal-related__register {
    margin-inline: calc(-1 * var(--page-margin));
    padding-inline: var(--page-margin);
    padding-block: var(--jr-shop-pad-start, var(--mab-gap-block)) var(--jr-shop-pad-end, var(--mab-gap-block));
  }

  .journal-related__inner {
    width: 100%;
    max-width: var(--mab-measure-section);
    margin-inline: auto;
  }

  /* Products stacked above the reading register. */
  .journal-related__aside {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
  }

  /* Product rows list: no list-style, stacks vertically, gap between rows */
  .journal-related__products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
  }

  /* A hairline, then the reading groups: stacked on a phone, side by side from 750px. */
  .journal-related__reading {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
    padding-block-start: var(--mab-gap-block);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  @media screen and (min-width: 750px) {
    .journal-related__reading {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--mab-gap-text) var(--mab-gap-columns);
      align-items: flex-start;
    }
  }

  /* Label above its links on a phone, beside them from 750px in a fixed label column. */
  .journal-related__reading-group {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-eyebrow);
  }

  @media screen and (min-width: 750px) {
    .journal-related__reading-group {
      display: grid;
      grid-template-columns: minmax(0, 14ch) minmax(0, 1fr);
      column-gap: var(--mab-gap-columns);
      align-items: baseline;
    }
  }

  .journal-related__reading-subhead,
  .journal-related__shop-subhead {
    margin: 0;
  }

  /* One link per line, left-aligned. */
  .journal-related__reading-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mab-gap-block);
  }

  .journal-related__reading-links > * {
    margin: 0;
  }

  /* Label, then the cards, then the remainder. */
  .journal-related__shop {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-eyebrow);
  }

  /* The remainder sits a block below the cards. */
  .journal-related__shop .journal-related__reading-links {
    margin-block-start: var(--mab-gap-block);
  }

  /* One card to a row, two from 750px, three from 990px. Fewer cards than columns keep the same
     card width. */
  .journal-related__shop-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mab-gap-columns);
  }

  @media screen and (min-width: 750px) {
    .journal-related__shop-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 990px) {
    .journal-related__shop-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .journal-related__aside {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity var(--mab-duration-reveal) ease-out, transform var(--mab-duration-reveal) ease-out;
    }

    [data-scroll-reveal].is-visible .journal-related__aside {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:journal-related-mab */

/* START_SNIPPET:journal-row-mab (INDEX:296) */
/* ===== Journal row (journal-row-mab) ===== */

  /* The row: cream surface, thin border, generous radius. position:relative anchors the title
     anchor's ::after (single tab stop). overflow:hidden clips the image at the rounded corners
     on mobile, where the image is a full-width strip above the body. */
  .journal-row {
    position: relative;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: var(--mab-radius-lg);
    background: var(--mab-cream);
    list-style: none;
    overflow: hidden;
  }

  /* Inner: flex row that wraps on mobile so the image strip floats above the body via order:-1.
     At 750px+ flex-wrap:nowrap keeps image and body on one line; order resets restore the visual
     order (image left, body right) while DOM order (body first) keeps screen readers and phones
     on the words before the picture. */
  .journal-row__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
  }

  @media screen and (min-width: 750px) {
    .journal-row__inner {
      flex-wrap: nowrap;
    }

    .journal-row__media { order: 0; }
    .journal-row__body  { order: 1; }
  }

  /* Body: stacks content and action vertically by default. At 990px they sit beside each other
     on the row axis — not 750, because a 675px body with a 13rem reserved action track leaves
     the title only 79px (four wrapped lines). */
  .journal-row__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  @media screen and (min-width: 990px) {
    .journal-row__body {
      flex-direction: row;
      align-items: flex-end;
    }
  }

  /* Content column: category, title, teaser, dateline. */
  .journal-row__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mab-gap-eyebrow);
    flex: 1;
    padding: var(--mab-gap-text);
    min-width: 0;
  }

  /* Category: orange accent, the card's one colour signal. Not .mab-preheader-line — that
     register opens a band. This labels an object inside a band. */
  .journal-row__category {
    margin: 0;
    color: var(--mab-orange-text);
  }

  /* Title: mab-editorial-card-title supplies Space Grotesk 500. */
  .journal-row__title {
    margin: 0;
  }

  /* No underline at rest: a list of underlined titles reads as a directory. Underline appears on
     hover or keyboard focus, which is also the only visual response from the row's hover zone. */
  .journal-row__link {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--mab-duration-fast) ease;
  }

  .journal-row:hover .journal-row__link,
  .journal-row__link:focus-visible {
    text-decoration: underline;
  }

  /* The title anchor's ::after covers the full row — one tab stop per article. */
  .journal-row .journal-row__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* Two-line clamp keeps rows consistent when excerpts differ in length. */
  .journal-row__teaser {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Dateline: provenance, not an offer. Ruled off below the teaser. */
  .journal-row__date {
    margin: 0;
    padding-block-start: var(--mab-gap-eyebrow);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  /* Action cell. Sits at the body's inline end, bottom-aligned to the content column. */
  .journal-row__action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: var(--mab-gap-text);
    padding-inline-start: var(--mab-gap-block);
  }

  .journal-row__action:empty {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .journal-row__action {
      padding-block-start: 0;
      padding-inline-start: var(--mab-gap-text);
    }
  }

  @media screen and (min-width: 990px) {
    .journal-row__action {
      min-inline-size: var(--mab-list-action-w);
    }

    .journal-row__action:empty {
      display: block;
    }
  }

  /* CTA stacks over the full-row overlay so the button is a real click target. */
  .journal-row .journal-row__cta {
    position: relative;
    z-index: 1;
  }

  /* WCAG 2.2 SC 2.5.5 AAA: 44px minimum touch target on mobile. */
  @media screen and (max-width: 749px) {
    .journal-row .journal-row__cta {
      min-block-size: var(--mab-height-cta-min);
      display: inline-flex;
      align-items: center;
    }
  }

  /* ---- FEATURE VARIANT ---- */

  /* Sage ground and a stronger border set the editor's pick apart from the regular list. */
  .journal-row--feature {
    background: var(--mab-sage);
    border-color: rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Title one rung up: the feature earns a reading-column sub-heading size. */
  .journal-row--feature .journal-row__title {
    font-size: var(--mab-size-prose-heading);
  }

  /* Three-line clamp on the feature: more height means more summary. */
  .journal-row--feature .journal-row__teaser {
    -webkit-line-clamp: 3;
  }

  /* ---- IMAGE COLUMN ---- */

  /* Hidden by default: no image means no media column. The body expands to fill the gap,
     flagging the missing photograph rather than silently absorbing it. */
  .journal-row__media {
    display: none;
  }

  /* Full-width cinematic strip above the body on mobile. flex-basis:100% takes the full inner
     width; order:-1 floats the strip above the body in the flex wrapping context. The 3:2 ratio
     gives the strip a defined height; mab-card-media fills it. --mab-card-media-radius:0 because
     overflow:hidden on .journal-row already clips the top corners of the strip. */
  .journal-row--has-image .journal-row__media {
    display: block;
    flex-basis: 100%;
    order: -1;
    aspect-ratio: var(--mab-media-scene-ratio-mobile);
    --mab-card-media-radius: 0;
  }

  @media screen and (min-width: 750px) {
    /* Desktop: fixed-width sidebar. The image is absolutely placed inside mab-card-media so it
       fills its column height without driving the row's overall height (that is set by the text
       column). Reset mobile flex overrides to sit inline. */
    .journal-row--has-image .journal-row__media {
      flex-basis: auto;
      order: 0;
      aspect-ratio: auto;
      width: 220px;
    }

    .journal-row--has-image .journal-row__media img {
      position: absolute;
      inset: 0;
    }

    .journal-row--feature.journal-row--has-image .journal-row__media {
      width: 300px;
    }
  }

  @media screen and (min-width: 990px) {
    .journal-row--has-image .journal-row__media {
      width: 260px;
    }

    .journal-row--feature.journal-row--has-image .journal-row__media {
      width: 380px;
    }
  }

  .journal-row__image {
    display: block;
  }

  /* Row-level hover zooms the image. The transition lives on mab-card-media img in mab-base.css. */
  .journal-row--has-image:hover .journal-row__media img {
    transform: scale(var(--mab-card-zoom));
  }

  /* ---- SCROLL REVEAL ---- */

  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .journal-row {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .journal-row {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:journal-row-mab */

/* START_SNIPPET:journal-series-mab (INDEX:297) */
.journal-series {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-eyebrow);
  }

  .journal-series__heading {
    margin: 0;
  }

  /* The gap clears a wrapped title's line box, so two items never read as one. */
  .journal-series__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-block);
  }

  .journal-series__item {
    margin: 0;
  }
/* END_SNIPPET:journal-series-mab */

/* START_SNIPPET:jumbo-text (INDEX:298) */
.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:301) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .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: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .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:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .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);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper 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:303) */
/* 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-foreground);
    --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-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-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: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .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--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-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:mab-cta (INDEX:305) */
/* A CTA is as wide as its label, never as wide as its container. Flex and grid
     parents stretch their children by default, so it declines that here rather
     than every caller remembering to. */
  .mab-cta,
  .mab-cta--paired {
    align-self: flex-start;
    justify-self: start;
  }

  /* Keeps the label and its arrow together inside a grid-laid-out button. */
  .mab-cta__label {
    display: inline;
    white-space: nowrap;
  }

  /* A ghost CTA is inline-flex, not a grid, so nothing splits a wrapped label from its
     arrow — the non-breaking space before the arrow already holds them together. Held to
     one line a long label overruns the column instead of wrapping inside it. */
  .mab-cta-ghost .mab-cta__label {
    white-space: normal;
  }
/* END_SNIPPET:mab-cta */

/* START_SNIPPET:map-embed-mab (INDEX:308) */
/* ===== Map embed ===== */

  /* deferred-media already fills its container and establishes the positioning context.
     This centres the control inside it. */
  .map-embed-mab {
    display: grid;
    place-items: center;
  }

  /* The waiting picture lies behind the control and fills the frame. `deferred-media img`
     supplies its height, its crop, and the fade that hides it once the map is loaded. */
  .map-embed-mab__image {
    position: absolute;
    inset: 0;
    inline-size: 100%;
  }

  /* The prominent ghost variant rather than the plain one: its border alpha is what keeps the
     control's boundary separable from the tonal plane behind it, on a light ground and on a dark
     one. min-block-size is a floor and not a size — the touch target this theme states once as
     --mab-height-cta-min. position: relative puts the control over the waiting picture. */
  .map-embed-mab__button {
    position: relative;
    min-block-size: var(--mab-height-cta-min);
  }

  /* The ghost class is transparent; here the button sits on a photograph and needs its own
     ground. Three classes beat body.mab-theme button.mab-cta-ghost (0,2,1). The hover rule
     rises to (0,4,0) — :hover counts as a class — to beat the ghost hover at (0,3,1). */
  .map-embed-mab .map-embed-mab__button.mab-cta-ghost {
    background: var(--mab-ivory);
    color: rgb(var(--mab-ink-rgb));
  }

  .map-embed-mab .map-embed-mab__button.mab-cta-ghost:hover {
    background-color: rgb(var(--mab-ivory-rgb) / 0.92);
  }

  /* The control is spent once the map is in the document: media.js marks it, and the map covers
     it.

     WHAT BREAKS IF YOU CHANGE THIS: without visibility the button keeps its place in the tab
     order, and a keyboard visitor lands on an invisible control underneath the map. The zero
     duration with a delay is what lets the fade finish before it leaves. */
  .map-embed-mab__button.deferred-media__playing {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--mab-duration-base) ease,
      visibility 0s linear var(--mab-duration-base);
  }

  /* The map takes the frame its column already defines. `deferred-media iframe` supplies the
     size and removes the border; this lifts it out of the grid flow so it covers the waiting
     picture instead of stacking beneath it. */
  .map-embed-mab__frame {
    position: absolute;
    inset: 0;
  }
/* END_SNIPPET:map-embed-mab */

/* START_SNIPPET:map-preview-mab (INDEX:309) */
.map-preview-mab {
  padding-inline: var(--page-margin);
}

.map-preview-mab__inner {
  max-width: var(--content-max-w, 780px);
  margin-inline: auto;
}

/* Section-specific overrides for .mab-preheader */
body.mab-theme .map-preview-mab .mab-preheader {
  font-size: var(--mab-size-micro);
  color: rgb(var(--color-foreground-rgb) / 0.4);
  text-align: center;
  margin: 0 0 1.25rem;
}

.map-preview-mab__figure {
  margin: 0;
}

.map-preview-mab__link {
  display: block;
  border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
  border-radius: var(--mab-radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 16px rgb(var(--color-foreground-rgb) / 0.06);
  transition: box-shadow var(--mab-duration-medium) ease, transform var(--mab-duration-medium) ease;
}

.map-preview-mab__link:hover,
.map-preview-mab__link:focus-visible {
  box-shadow: 0 6px 28px rgb(var(--color-foreground-rgb) / 0.11);
  transform: translateY(-2px);
}

.map-preview-mab__link img {
  display: block;
  width: 100%;
  height: auto;
}

.map-preview-mab__cta-group {
  margin-block-start: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.map-preview-mab__placeholder {
  padding: 3rem;
  border: 1px dashed rgb(var(--color-foreground-rgb) / 0.2);
  border-radius: var(--mab-radius-sm);
  text-align: center;
  color: rgb(var(--color-foreground-rgb) / 0.5);
  font-family: var(--font-preheader--family);
  font-size: 0.75rem;
}
/* END_SNIPPET:map-preview-mab */

/* START_SNIPPET:media-band-mab (INDEX:311) */
/* mab-media-content supplies the media box, the type and the placeholder image. Only these two
     are local — anything else here would be a second declaration of a shared rule. */
  .media-band__cta {
    margin-block-start: var(--mab-gap-text);
  }

  .media-band__placeholder {
    padding: var(--mab-gap-block) var(--page-margin);
    text-align: center;
  }
/* END_SNIPPET:media-band-mab */

/* START_SNIPPET:media (INDEX:312) */
.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__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .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:museum-bridge-mab (INDEX:319) */
/* ===== Museum Bridge ===== */

  /* Insert shell: Ivory surface with a dashed border on the host band.
     The dashed border separates the insert from the surrounding band.
     Mobile and tablet: stack content above action.
     Desktop (990px+): side-by-side, content flex:1, action aligned center. */
  .museum-bridge {
    display: flex;
    flex-direction: column;
    gap: var(--mab-gap-col-mobile);
    align-items: flex-start;
    width: 100%;
    background: var(--mab-ivory);
    border: 1px dashed rgb(var(--color-foreground-rgb) / 0.5);
    border-radius: var(--mab-radius-lg);
    padding: var(--mab-gap-text) var(--mab-gap-col-mobile);

    /* The card is always ivory, so its foreground must always be ink — regardless of the host
       section's colour scheme. On a dark band (e.g. Absinthe Green) the contrast-override sets
       --color-foreground to ivory, which would make text invisible on the ivory card.
       Redefining the foreground tokens here keeps heading, body and border in agreement on every
       band colour, matching the same override used for .museum-card.

       `color` is declared as well as the tokens, and that line is the load-bearing one: a token
       only reaches an element that reads it. The heading and the CTA read it; the body copy has no
       class of its own and only inherits, so on a dark band it kept the section's ivory and
       rendered ivory on ivory. */
    --color-foreground: var(--mab-ink);
    --color-foreground-rgb: var(--mab-ink-rgb);
    --color-foreground-heading: var(--mab-ink);
    --color-foreground-heading-rgb: var(--mab-ink-rgb);
    color: rgb(var(--color-foreground-rgb));
  }

  /* THE ACTION SITS BESIDE THE COPY FROM 990px, not 750.
     The action cell cannot shrink, and with two CTAs its max-content width is 406px. Beside it at
     750 the copy was left 192 pixels — 27 characters a line, and a heading that wrapped over two.
     Below 990 the bridge stacks, which is the shape it already had below 750. */
  @media screen and (min-width: 990px) {
    .museum-bridge {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 2.5rem;
    }
  }

  /* Text column: eyebrow → heading → body.
     flex:1 lets the text fill the available width in row mode.
     max-width 52ch keeps the bridge copy narrow — a bridge, not a banner.
     No additional gap override; the column gap handles the stacking. */
  .museum-bridge__content {
    display: flex;
    flex-direction: column;

    flex: 1;
    max-width: var(--mab-measure-copy);
  }

  /* Eyebrow: orange here, because this strip belongs to the shop rather than to
     the editorial page around it. Uses the text-safe orange, which is the brand
     accent darkened enough to read at label size. */
  .museum-bridge .museum-bridge__content .museum-bridge__eyebrow {
    color: var(--mab-orange-text);
    margin-block-end: 0;
  }

  /* Heading: the insert is a functional strip on an editorial page, so its
     heading sits at the small title size rather than the section size.
     Three classes are needed to outrank the utility this element also carries. */
  .museum-bridge .museum-bridge__content .museum-bridge__heading {
    font-size: var(--mab-size-title-sm);
    line-height: var(--mab-leading-heading);
  }

  /* Body: mab-body-text provides font, size, line-height, opacity, p margins.
     Single sentence, no section-level override needed. */

  /* Action: CTA wrapper.
     flex-shrink:0 keeps the button from being squeezed in row mode.
     .button provides all CTA styling — no re-declaration needed. */
  .museum-bridge__action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mab-gap-text);
    flex-shrink: 0;
  }

  /* ---- Scroll-reveal motion ----
     House split-duration pattern (mab-base.css, followed by museum-hero-mab):
       distance  24px                  (translateY(24px))
       easing    var(--mab-easing-bounce)     — both properties
       opacity   var(--mab-duration-reveal)   — shorter fade-in
       transform var(--mab-duration-bounce)   — longer, snappier settle

     Per-element stagger via --reveal-delay on each child div in Liquid:
       .museum-bridge__content: 0.1s
       .museum-bridge__action:  0.25s

     The data-scroll-reveal ancestor and the IntersectionObserver script belong to
     whoever draws the band — the bridge does not register them. */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .museum-bridge__content,
    [data-scroll-reveal] .museum-bridge__action {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .museum-bridge__content,
    [data-scroll-reveal].is-visible .museum-bridge__action {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:museum-bridge-mab */

/* START_SNIPPET:museum-card-mab (INDEX:320) */
/* ===== Museum card ===== */
  /* The card is the flex container for media + body.
     Border and radius live here; overflow:hidden means child media needs no own radius. */
  .museum-card {
    /* The shell rounds and clips, so the media must not round: rounded bottom corners on the
       image leave two wedges of the ivory surface showing where it meets the body. */
    --mab-card-media-radius: 0;

    /* A shell that paints its own surface must own its foreground too. The card is ivory whatever
       the band behind it, while the utilities colour their text from the section's colour scheme —
       so on the green groups band the title and description resolved to ivory and the whole card
       read as blank. Redefining the variables rather than each rule keeps title, description,
       border and CTA in agreement, and makes the card safe on any future band. */
    --color-foreground: var(--mab-ink);
    --color-foreground-rgb: var(--mab-ink-rgb);
    --color-foreground-heading: var(--mab-ink);
    --color-foreground-heading-rgb: var(--mab-ink-rgb);

    display: flex;
    flex-direction: column;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.08);
    border-radius: var(--mab-radius-lg);
    overflow: hidden;
    /* Ivory card surface — the brand's warm near-white fill. */
    background: var(--mab-ivory);
  }

  /* ---- Media ----
     .mab-card-media supplies position, overflow, radius, background and image fill.
     Its radius comes from --mab-card-media-radius, set to 0 on the shell above.
     One override here: every card image keeps the same crop and height.

     The crop is the scale's own card ratio rather than a taller one of this family's. A grid card
     is narrow, so a taller crop makes the picture outweigh the words under it and the tile reads
     as a stock tile instead of an editorial card. The feature layout overrides this with
     --mab-ratio-card-feature, which is the wider crop a lead tile takes.

     WHAT BREAKS IF YOU CHANGE THIS: a taller ratio here grows every grid card on the homepage's
     experiences band and on the museum content pages at once, and none of them says so locally. */
  .museum-card .museum-card__media {
    aspect-ratio: var(--mab-ratio-card-media);
  }

  /* The hover: hovering anywhere on the card moves its image. The transition, the amplitude and
     the reduced-motion guard all live with .mab-card-media in mab-base.css — this line only says
     that the whole card is the trigger, which CSS cannot infer from the media element. */
  .museum-card--has-image:hover .museum-card__media img {
    transform: scale(var(--mab-card-zoom));
  }

  /* ---- Mark plate ----
     A card whose media is a logo rather than a photograph. Every change here follows from the
     file being somebody else's asset, which may be neither cropped nor distorted: the plate is
     a fixed height rather than a ratio, the mark is contained inside it with clear space, and
     --mab-card-zoom goes to 1 so the shared hover in mab-base.css scales it by nothing.

     A height and not a ratio because a row of marks is not one geometry family — a square
     stacked lockup and a 6:1 wordmark both have to sit in the same row. A ratio sizes the plate
     from the card's width and cramps one end of that range; a height contains every proportion
     and puts each card's copy on the same baseline as its neighbours', which is what lets the
     row be read in one pass.

     WHAT BREAKS IF YOU CHANGE THIS: raise the zoom above 1 and every mark is shown enlarged and
     bleeding past its clear space; drop the contain override and the shared
     `body.mab-theme .mab-card-media img` rule at (0,2,2) crops each mark to the plate. */
  .museum-card.museum-card--mark {
    --mab-card-zoom: 1;
    /* The plate takes the card's own surface, so the mark reads as printed on the card rather
       than as sitting in a panel of the band's colour, which is what .mab-card-media inherits. */
    --product-card-media-background: var(--mab-ivory);
  }

  /* Two classes and one class, so (0,2,0) — enough to release the (0,2,0) frame above it, which
     it follows in source order. */
  .museum-card--mark .museum-card__media {
    aspect-ratio: auto;
    block-size: var(--mab-height-mark-plate);
    padding: var(--mab-gap-text);
  }

  /* Three classes and one element, because the rule this has to beat —
     `body.mab-theme .mab-card-media img` in mab-base.css — is (0,2,2), and the obvious
     `.museum-card--mark .museum-card__media img` is only (0,2,1) and silently loses. */
  .museum-card.museum-card--mark .museum-card__media img {
    object-fit: contain;
  }

  /* Placeholder (design-mode only) */
  .museum-card__media--placeholder {
    background: rgb(var(--color-foreground-rgb) / 0.05);
  }

  .museum-card__placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- Body ----
     Flex column: meta → title → description → CTA (CTA pushed to bottom by margin-block-start: auto). */
  .museum-card__body {
    padding: 1.375rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    flex: 1;
  }

  /* Meta line: mab-preheader supplies the typography. It is inline by default,
     so this puts the line on its own row. */
  .museum-card__meta {
    display: block;
  }

  /* Title and body: the editorial card utilities supply all typography, and the
     copy is shown in full rather than clamped. No override needed. */

  /* Pushed to the bottom of the card body so a row of cards lines its CTAs up.
     Its width is the component's own business.

     The height floor is not: mab-cta-ghost's own padding produces 39px, under the 44x44
     WCAG 2.2 asks of a touch target, and a card CTA is a tap target on every phone. The
     same local guarantee event-facts-mab and event-row-mab make. */
  .museum-card__cta {
    margin-block-start: auto;
    min-block-size: var(--mab-height-cta-min);
  }

  /* ---- Scroll-reveal motion ----
     House pattern: opacity over --mab-duration-reveal, transform over --mab-duration-bounce,
     both on --mab-easing-bounce, translateY(24px). The stagger arrives as --reveal-delay from
     the caller, which is the only party that knows the tile's position in its run. The
     data-scroll-reveal ancestor and its observer belong to whoever draws the band. */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .museum-card {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .museum-card {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:museum-card-mab */

/* START_SNIPPET:museum-cards-band-mab (INDEX:321) */
/* ===== Museum cards band ===== */

  .museum-cards {
    padding-inline: var(--page-margin);
  }

  .museum-cards__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  /* Band header: flex column with gap.
     mab-preheader-line and mab-lead-title provide all typography — no overrides. */
  .museum-cards__header {
    max-width: var(--mab-measure-header);
  }

  /* The way out of the band, centred under the grid. `mab-cta` declines to be stretched by a
     flex parent, so the centring is declared here rather than on the anchor. */
  .museum-cards__footer {
    display: flex;
    justify-content: center;
  }

  /* Maps --mc-columns (inherited from the band root) into the utility's column property.
     Gap overrides keep the museum's current values, which differ from the utility defaults. */
  .museum-cards__grid {
    --mab-card-grid-columns: var(--mc-columns, 3);
    --mab-card-grid-gap-mobile: 1.25rem;
    --mab-card-grid-gap-tablet: 1.5rem;
  }

  @media screen and (min-width: 750px) {
    /* When the card count is odd the last card sits alone on its row. Centre it
       and hold it to one column's width so it matches the cards above. */
    .museum-cards__grid > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
      max-width: calc((100% - 1.5rem) / 2);
      justify-self: center;
    }
  }

  /* A band showing one thing gives it the whole width rather than leaving the next column empty.
     The count is not the merchant's to choose here — the museum band draws an exhibition and the
     next dated event, so a week with nothing coming leaves one card where the grid expects two.

     The test counts cards, not children: a feature band puts its footer inside the grid, so the
     single card is never an only-child, and the footer would otherwise stand in the empty column
     at a fraction of the card's height — which is exactly what the gap was. */
  .museum-cards__grid:has(> article:only-of-type) {
    grid-template-columns: 1fr;
  }

  @media screen and (min-width: 990px) {
    /* The single-card rule outranks the utility's column count; it is restated here
       at specificity (0,2,0) to beat the utility's (0,1,0) inside the same breakpoint. */
    .museum-cards__grid:has(> article:only-of-type) {
      grid-template-columns: 1fr;
    }

    /* Desktop runs the full column count, so the tablet centring is released.
       A band of two columns with an odd number of cards gets the plain trailing
       card back — that is the pre-existing behaviour, not something this rule
       should silently reinterpret. */
    .museum-cards__grid > :last-child:nth-child(odd) {
      grid-column: auto;
      max-width: none;
      justify-self: stretch;
    }
  }

  /* ---- Feature layout ----
     The band leads with its first tile. The footer is a grid child here, not the grid's sibling,
     so the CTA can take the foot of the narrow track; the plain layout keeps it outside.

     Mobile and tablet: one full-width row per child, the lead tile included — two uneven tracks
     inside 990px would leave the narrow one too cramped to hold a card.
     Desktop: two tracks from --mab-grid-feature over two rows. The lead fills the wide track for
     both rows; the tile after it takes the narrow track's 1fr row and stretches to the lead's
     height; the footer takes the auto row beneath it. With no second tile the narrow track's
     first row is empty and the CTA stays at the foot of it.

     The footer keeps its hairline and its start alignment at every width, so the stacked order
     on a phone reads as the same three blocks.

     WHAT BREAKS IF YOU CHANGE THIS: the trailing-card centring above is at (0,3,0) and matches
     the footer whenever the child count is odd. The two rules that answer it carry a fourth
     compound — (0,4,0) for the tablet release, (0,3,0) plus later source order for the desktop
     placement. Drop a class or a pseudo-class from either and the CTA row is centred at half a
     column's width. */
  .museum-cards--feature .museum-cards__footer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--mab-gap-eyebrow);
    padding-block-start: var(--mab-gap-text);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

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

    .museum-cards--feature .museum-cards__grid > :last-child:nth-child(odd) {
      grid-column: auto;
      max-width: none;
      justify-self: stretch;
    }
  }

  @media screen and (min-width: 990px) {
    .museum-cards--feature .museum-cards__grid {
      grid-template-columns: var(--mab-grid-feature);
      grid-template-rows: 1fr auto;
    }

    .museum-cards--feature .museum-cards__grid > :first-child {
      grid-column: 1;
      grid-row: 1 / -1;
    }

    .museum-cards--feature .museum-cards__grid > .museum-cards__footer {
      grid-column: 2;
      grid-row: -2 / -1;
    }

    /* With nothing in the narrow track, the two-track layout leaves its first row empty and
       stands the footer beside a card several times its height. The band falls back to one
       track: the card takes the width, the footer sits under it.

       Matched at (0,4,0) plus source order, because the three rules above place children by
       position and would otherwise keep sending the footer to a column that no longer exists. */
    .museum-cards--feature .museum-cards__grid:has(> article:only-of-type) {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }

    .museum-cards--feature .museum-cards__grid:has(> article:only-of-type) > :first-child,
    .museum-cards--feature .museum-cards__grid:has(> article:only-of-type) > .museum-cards__footer {
      grid-column: 1;
      grid-row: auto;
    }
  }

  /* ---- Feature card media ----
     The lead tile is ~714px wide at a 1200px container, so 4/3 produces a 535px image — taller
     than any tile in the plain grid it anchors. --mab-ratio-card-feature (16/9) is the correct
     ratio for a card in a feature position; its token comment names this exact case.
     Applies to all tiles in the feature layout so the lead and aside share one visual register.
     WHAT BREAKS: removing this reverts every tile to the card's own 4/3 default — the lead
     image grows to ~535px at a 1200px container (~25% taller than the 16/9 crop). */
  .museum-cards--feature .museum-card .museum-card__media {
    aspect-ratio: var(--mab-ratio-card-feature);
  }

  /* ---- Tile stagger ----
     A tile's position in the grid is the band's knowledge, not the tile's, and CSS reads it
     natively. A caller that counts its own run writes --reveal-delay inline and that wins; a
     caller whose tiles are theme blocks cannot count, because block.index is nil inside a
     content_for blocks tag, and these rules answer for it. Position 1 needs no rule: the
     transition falls back to 0s. The set is closed at the section's max_blocks of 12. */
  .museum-cards__grid > :nth-child(2)  { --reveal-delay: calc(var(--mab-stagger-step) * 1); }
  .museum-cards__grid > :nth-child(3)  { --reveal-delay: calc(var(--mab-stagger-step) * 2); }
  .museum-cards__grid > :nth-child(4)  { --reveal-delay: calc(var(--mab-stagger-step) * 3); }
  .museum-cards__grid > :nth-child(5)  { --reveal-delay: calc(var(--mab-stagger-step) * 4); }
  .museum-cards__grid > :nth-child(6)  { --reveal-delay: calc(var(--mab-stagger-step) * 5); }
  .museum-cards__grid > :nth-child(7)  { --reveal-delay: calc(var(--mab-stagger-step) * 6); }
  .museum-cards__grid > :nth-child(8)  { --reveal-delay: calc(var(--mab-stagger-step) * 7); }
  .museum-cards__grid > :nth-child(9)  { --reveal-delay: calc(var(--mab-stagger-step) * 8); }
  .museum-cards__grid > :nth-child(10) { --reveal-delay: calc(var(--mab-stagger-step) * 9); }
  .museum-cards__grid > :nth-child(11) { --reveal-delay: calc(var(--mab-stagger-step) * 10); }
  .museum-cards__grid > :nth-child(12) { --reveal-delay: calc(var(--mab-stagger-step) * 11); }

  /* ---- Scroll-reveal motion ----
     House split-duration pattern: opacity over --mab-duration-reveal, transform over
     --mab-duration-bounce, both on --mab-easing-bounce, translateY(24px). The tiles carry
     their own copy of this rule beside their own markup, staggered by --reveal-delay. */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .museum-cards__preheader,
    [data-scroll-reveal] .museum-cards__heading {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .museum-cards__preheader,
    [data-scroll-reveal].is-visible .museum-cards__heading {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:museum-cards-band-mab */

/* START_SNIPPET:museum-split-mab (INDEX:322) */
/* ===== Museum split ===== */

  .mab-split {
    padding-inline: var(--page-margin);
  }

  .mab-split__container {
    max-width: var(--page-content-width);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mab-gap-col-mobile);
    align-items: center;
  }

  /* TWO COLUMNS ONLY FROM 990px, not 750.
     Split at 750 the pair would be too narrow: a photograph too small to read, and prose at
     about 35 characters a line against the 55 to 62 a reading column wants. The band would stay
     side by side through the whole tablet range and read worse there than stacked. 990 is the
     theme's own desktop breakpoint, so the band now changes shape where everything else does. */
  @media screen and (min-width: 990px) {
    .mab-split__container {
      grid-template-columns: 1fr 1fr;
      gap: var(--mab-gap-split);
    }

    /* An uncropped image sizes its own column, so the space left over does not
       pile up between the two columns. */
    .mab-split--media-natural .mab-split__container {
      grid-template-columns: 1fr auto;
    }

    .mab-split--media-natural.mab-split--image-left .mab-split__container {
      grid-template-columns: auto 1fr;
    }

    /* Compact text: both columns take their intrinsic width and the pair is centred, so the
       band's leftover width falls in the outer margins instead of stretching the text away from
       the image. This is the answer when the file is narrower than a split column — the theme's
       band is about 1400px, so a 567px photograph put in a fractional column would be upscaled
       around 1.4x, which is visible. Narrowing the text costs no pixel of quality. */
    .mab-split--compact-text.mab-split--media-natural .mab-split__container,
    .mab-split--compact-text.mab-split--media-natural.mab-split--image-left .mab-split__container {
      grid-template-columns: auto auto;
      justify-content: center;
    }

    .mab-split--compact-text .mab-split__text {
      max-width: var(--mab-measure-copy);
    }

    /* The mirror of the natural-media case above: here the TEXT sizes its own column, so the
       width left over goes to the photograph instead of piling up between the two. A ruled list
       and the buttons below it then end on one line, because both fill the same track and neither
       names a width.

       Shrinking the text inside a 1fr track was tried and is worse: the copy retracts to the left
       and the leftover opens as a gap in the middle, so the band reads as two separate objects.
       And a declared measure cannot do it at all — `--mab-measure-copy` is `52ch`, `ch` resolves
       against the font of whichever element reads it, so one token gives a list and a button row
       two different widths and the narrower one wraps the buttons.

       WHAT BREAKS IF YOU CHANGE THIS: an `auto` track never exceeds the space available, so the
       stacked layout below 990px is untouched. Drop the spread and the buttons end wherever their
       labels end, which moves with every translation. */
    .mab-split--text-content .mab-split__container {
      grid-template-columns: auto 1fr;
      max-width: var(--mab-split-content-max);
    }

    .mab-split--text-content.mab-split--image-left .mab-split__container {
      grid-template-columns: 1fr auto;
      max-width: var(--mab-split-content-max);
    }

    .mab-split--text-content .mab-split__actions {
      justify-content: space-between;
    }

    /* Image-left: move media before text in visual order without altering DOM order.
       Text is first in DOM for keyboard/screen-reader order on mobile; CSS order
       flips it on desktop when the editor picks "Left". */
    .mab-split--image-left .mab-split__media,
    .mab-split--image-left .mab-split__figure {
      order: -1;
    }
  }

  /* Text column: mab-text-stack supplies the vertical rhythm. */

  /* Heading: mab-section-title supplies font, size, line-height and colour.
     The cap keeps the heading wrapping into a short block instead of one long line. */
  .mab-split__heading {
    max-width: var(--mab-measure-head);
  }

  /* Body: mab-body-text provides font-family/size/line-height/opacity/p-margins.
     No component-level override — the utility is sufficient. */

  /* The register rule: one hairline along the top edge, for a band that shares its ground with
     the band above and needs to be told apart from it. */
  .mab-band-hairline {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  /* A ranked subheading stacks the same three utilities .product-card-enriched-mab__info stacks.

     WHAT BREAKS IF YOU CHANGE THIS: mab-card-region carries a -0.375rem block-start pull on every
     surface, not only inside a card, so this gap has to clear it. The card's 0.5rem is the figure
     tuned against that pull; a smaller one resolves to a negative gap. */
  .mab-split__subheading--ranked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Two calls to action stand side by side and wrap onto a second line rather than shrinking.
     The row exists only when a second CTA was passed; a single CTA is a direct child of the text
     column and reaches its own margin from mab-text-stack, which a wrapper here would absorb. */
  .mab-split__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mab-gap-text);
  }

  /* Captioned media: the figure takes the media column, so the rules that place the picture in
     the grid have to reach it too, and the caption sits under the picture rather than inside the
     rounded, clipped media box. */
  .mab-split__figure {
    margin: 0;
  }

  .mab-split__caption {
    margin-block-start: var(--mab-gap-eyebrow);
    font-family: var(--font-preheader--family);
    font-weight: var(--font-preheader--weight);
    font-size: var(--mab-size-label);
    line-height: var(--mab-leading-body);
    color: rgb(var(--color-foreground-rgb) / var(--mab-preheader-alpha));
  }

  /* Image column */
  .mab-split__media {
    width: 100%;
    overflow: hidden;
    border-radius: var(--mab-split-image-radius, var(--mab-radius-base));
    box-shadow: var(--mab-shadow-card);
  }

  /* Aspect-ratio variants — the editor picks the shape of the image column. */
  .mab-split__media--mild-portrait { aspect-ratio: var(--mab-ratio-mild-portrait); }
  .mab-split__media--portrait      { aspect-ratio: var(--mab-ratio-portrait); }
  .mab-split__media--square        { aspect-ratio: var(--mab-ratio-square); }
  .mab-split__media--classic       { aspect-ratio: var(--mab-ratio-classic); }
  .mab-split__media--landscape     { aspect-ratio: var(--mab-ratio-landscape); }
  .mab-split__media--wide          { aspect-ratio: var(--mab-ratio-wide); }

  /* Natural: the image keeps the proportion of the file and is limited by height
     instead of being cropped to a box. It sits against the outer edge of its
     column, so the space it leaves falls between the two columns. */
  .mab-split__media--natural {
    aspect-ratio: auto;
    width: auto;
    overflow: visible;
  }

  /* THE PLATE. Three layers under a cut-out subject, none of them moving.

     The panel is lit rather than filled: a pale bloom where the subject stands, so the ground
     reads as a surface catching light instead of a rectangle of colour.

     Over it, the louche — the opalescent clouding absinthe performs when water hits it, sage
     falling through copper to nothing, placed low and off-centre where the liquid sits in the
     glass. It is the one phenomenon this brand owns, and here it is a fixed bloom: the hero holds
     the page's only motion.

     WHAT BREAKS IF YOU CHANGE THIS: the panel clips the emblem, so the overflow is load-bearing,
     and the isolation is what keeps the leaf behind the photograph rather than over it. */
  .mab-split__media--grounded {
    position: relative;
    isolation: isolate;
    border-radius: var(--mab-split-image-radius, var(--mab-radius-base));
    background:
      radial-gradient(
        86% 64% at 50% 22%,
        rgb(var(--mab-ivory-rgb) / 0.16),
        transparent 66%
      ),
      linear-gradient(
        152deg,
        color-mix(in srgb, var(--mab-split-media-ground) 78%, white),
        var(--mab-split-media-ground) 58%,
        color-mix(in srgb, var(--mab-split-media-ground) 82%, black)
      );
  }

  /* The plate clips the engraving; the subject is deliberately not inside it, so the bottle can
     stand past the top edge. That breakout is the band's one structural gesture — remove it and
     the composition is a product in a box. */
  .mab-split__plate {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
  }

  /* The leaf runs off three edges, so what is read is a fragment of a botanical plate rather than
     a whole leaf placed behind the subject. */
  .mab-split__emblem {
    position: absolute;
    inset-block-start: -34%;
    inset-inline-end: -40%;
    inline-size: 148%;
    block-size: auto;
    color: rgb(var(--mab-ivory-rgb) / 0.10);
    rotate: -14deg;
  }

  /* The subject stands taller than its plate and casts from its own silhouette, which is what
     stops a cut-out reading as pasted onto the page. */
  .mab-split__media--grounded .mab-split__image {
    position: relative;
    margin-block-start: -12%;
    inline-size: 108%;
    max-inline-size: none;
    margin-inline-start: -4%;
    filter: drop-shadow(var(--mab-shadow-silhouette));
  }

  @media (prefers-reduced-transparency: reduce) {
    .mab-split__media--grounded {
      background: var(--mab-split-media-ground);
    }
  }

  .mab-split__media--natural .mab-split__image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--mab-media-natural-height);
    object-fit: contain;
    border-radius: var(--mab-split-image-radius, var(--mab-radius-base));
  }

  @media screen and (min-width: 990px) {
    .mab-split--image-right .mab-split__media--natural,
    .mab-split--image-right.mab-split--media-natural .mab-split__figure { justify-self: end; }

    .mab-split--image-left .mab-split__media--natural,
    .mab-split--image-left.mab-split--media-natural .mab-split__figure { justify-self: start; }
  }

  .mab-split__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Tonal plane: adapts to whichever band colour scheme owns the section. */
  .mab-split__media--placeholder {
    background-color: rgb(var(--color-foreground-rgb) / 0.08);
  }

  /* Scroll-reveal: stagger text then image for a left-to-right reading feel */
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .mab-split__text,
    [data-scroll-reveal] .mab-split__media,
    [data-scroll-reveal] .mab-split__caption {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
    }

    [data-scroll-reveal] .mab-split__media,
    [data-scroll-reveal] .mab-split__caption {
      transition-delay: 0.15s;
    }

    [data-scroll-reveal].is-visible .mab-split__text,
    [data-scroll-reveal].is-visible .mab-split__media,
    [data-scroll-reveal].is-visible .mab-split__caption {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Design-mode placeholder: no coloured band, just a minimal indicator */
  .mab-split__placeholder-wrapper {
    padding-inline: var(--page-margin);
  }

  .mab-split__placeholder {
    padding: var(--mab-gap-block);
    background: rgb(var(--color-foreground-rgb) / 0.05);
    border-radius: var(--mab-radius-base);
    text-align: center;
    opacity: 0.7;
  }
/* END_SNIPPET:museum-split-mab */

/* START_SNIPPET:overlay (INDEX:325) */
.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:326) */
.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;
    isolation: isolate;
  }

  .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:327) */
.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:payment-marks-mab (INDEX:328) */
.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;
  }

  /* Height is a variable so a caller can make the row quieter without a second class. */
  .payment-icons__item svg {
    height: var(--mark-height, 1.5rem);
    width: auto;
  }

  /* The marks ship as coloured chips, and the card networks require them unaltered — a silhouette is
     both a brand violation and, since each SVG carries its own background, an unreadable white block.
     Desaturating keeps every shape legible while the row stops competing with its surroundings. */
  .payment-icons--monochrome .payment-icons__item svg {
    filter: grayscale(1);
    opacity: 0.9;
  }
/* END_SNIPPET:payment-marks-mab */

/* START_SNIPPET:payment-terms-styles (INDEX:329) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:330) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

    @media screen and (max-width: 749px) {
      padding: var(--padding-xs) var(--padding-md);
    }
  }

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:plp-promo-card-mab (INDEX:331) */
.product-grid__item--promo {
    display: flex;
    border: none;
  }

  ul[product-grid-view='zoom-out'] .product-grid__item--promo {
    display: none;
  }

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

  /* Tablet full-width: no sibling cards in the same row → give explicit height via aspect-ratio */
  @media screen and (min-width: 500px) and (max-width: 749px) {
    .product-grid__item--promo {
      aspect-ratio: var(--mab-ratio-wide);
    }
  }

  @media screen and (min-width: 750px) {
    .product-grid__item--promo {
      grid-column: span 2;
    }
  }

  .plp-promo-card {
    --plp-promo-border: rgb(var(--color-border-rgb) / var(--product-card-border-opacity, 0.4));
    --plp-promo-text-color: var(--color-background);
    --plp-promo-label-border: rgb(var(--color-background-rgb) / 0.7);
    --plp-promo-label-bg: rgb(var(--color-shadow-rgb) / 0.5);
    --plp-promo-overlay-strong: rgb(var(--color-shadow-rgb) / 0.65);
    --plp-promo-overlay-soft: rgb(var(--color-shadow-rgb) / 0.35);
    --plp-promo-content-inset: clamp(22px, 2.6vw, 38px);
    --plp-promo-content-inset-mobile: clamp(16px, 4vw, 24px);
    --plp-promo-content-max: clamp(200px, 44%, 460px);
    --plp-promo-content-max-mobile: min(92%, 360px);

    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: var(--product-card-border-width, 0px) solid var(--plp-promo-border);
    border-radius: var(--product-corner-radius);
    overflow: hidden;
    background: var(--product-card-media-background);
    color: var(--plp-promo-text-color);
    isolation: isolate;
  }

  .plp-promo-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .plp-promo-card__media {
    position: relative;
    flex: 0 0 auto;
    background: var(--product-card-media-background);
    overflow: hidden;
    height: 100%;
  }

  .plp-promo-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      var(--plp-promo-overlay-strong) 0%,
      var(--plp-promo-overlay-soft) 38%,
      rgb(var(--color-shadow-rgb) / 0) 72%
    );
    pointer-events: none;
  }

  .plp-promo-card__media img {
    --promo-img-margin: clamp(12px, 2vw, 24px);
    position: absolute; /* Out of flow — does not contribute to grid row sizing */
    top: var(--promo-img-margin);
    left: var(--promo-img-margin);
    width: calc(100% - 2 * var(--promo-img-margin));   /* img replaced element: must be explicit */
    height: calc(100% - 2 * var(--promo-img-margin));  /* inset alone does not constrain replaced elements */
    object-fit: contain;
    display: block;
    transform: scale(1);
    transition: transform var(--mab-duration-bounce) ease;
  }

  .plp-promo-card__content {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 20px);
    inset: 50% auto auto var(--plp-promo-content-inset);
    max-width: var(--plp-promo-content-max);
    transition: transform 0.45s ease;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .plp-promo-card--no-link .plp-promo-card__content {
    pointer-events: auto;
  }

  .plp-promo-card--tone-dark {
    --plp-promo-text-color: var(--color-foreground);
    --plp-promo-label-border: rgb(var(--color-foreground-rgb) / 0.55);
    --plp-promo-label-bg: rgb(var(--color-background-rgb) / 0.75);
    --plp-promo-overlay-strong: rgb(var(--color-background-rgb) / 0.75);
    --plp-promo-overlay-soft: rgb(var(--color-background-rgb) / 0.4);
  }

  .plp-promo-card--tone-accent {
    --plp-promo-text-color: var(--color-primary);
    --plp-promo-label-border: rgb(var(--color-primary-rgb) / 0.7);
    --plp-promo-label-bg: rgb(var(--color-primary-rgb) / 0.16);
  }

  body.mab-theme .plp-promo-card .plp-promo-card__label.hero-carousel__label {
    color: inherit;
    border-color: var(--plp-promo-label-border);
    background: var(--plp-promo-label-bg);
    font-family: var(--font-preheader--family);
    font-weight: 400;
  }

  body.mab-theme .plp-promo-card .plp-promo-card__label.hero-carousel__label p {
    margin: 0;
  }

  .plp-promo-card .hero-carousel__heading {
    color: inherit;
    font-size: clamp(1.35rem, 2.4vw, 2.2rem);
    line-height: var(--line-height--display-tight);
    letter-spacing: var(--letter-spacing--display-tight);
    margin: 0;
  }

  .plp-promo-card .hero-carousel__body {
    color: inherit;
  }

  .plp-promo-card .hero-carousel__body p {
    margin: 0;
  }

  .plp-promo-card__cta {
    font-family: var(--font-preheader--family);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--mab-tracking-body);
    align-self: flex-start;
    pointer-events: auto;
    position: relative;
    z-index: 3;
  }

  .plp-promo-card:hover .plp-promo-card__media img,
  .plp-promo-card:focus-within .plp-promo-card__media img {
    transform: scale(1.045);
  }

  .plp-promo-card:hover .plp-promo-card__content,
  .plp-promo-card:focus-within .plp-promo-card__content {
    transform: translateY(calc(-50% - 2px));
  }

  @media screen and (max-width: 749px) {
    .plp-promo-card__content {
      inset: 50% auto auto var(--plp-promo-content-inset-mobile);
      gap: 16px;
      max-width: var(--plp-promo-content-max-mobile);
    }
  }
/* END_SNIPPET:plp-promo-card-mab */

/* START_SNIPPET:predictive-search-styles (INDEX:335) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .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__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .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: var(--color-foreground-subdued);
  }

  .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__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,
  .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;
  }

  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);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .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;
  }

  /* Resource carousel styles */
  .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-styles */

/* START_SNIPPET:price-filter (INDEX:336) */
/* 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 {
    color: var(--color-foreground-muted);
    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:price-styles (INDEX:337) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* 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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */

/* START_SNIPPET:product-assurances-mab (INDEX:339) */
.product-assurances {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--mab-measure-assurance), 1fr));
    gap: var(--mab-gap-text) var(--mab-gap-split);
    margin: 0;
  }

  /* A rule above each fact rather than between them: the facts carry equal weight, and a divider
     that only appears between siblings makes the first one read as a heading for the rest. */
  /* Revealed, this is the one fact that applies to the visitor reading it, so it takes the head of
     the row instead of surfacing in the gap the replaced items leave behind. */
  .product-assurances__item[data-requires-outside-ch] {
    order: -1;
  }

  .product-assurances__item {
    padding-block-start: var(--mab-gap-text);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--mab-hairline-alpha));
  }

  .product-assurances__value {
    margin: var(--mab-gap-eyebrow) 0 0;
    font-size: var(--mab-size-body-sm);
    line-height: var(--mab-leading-compact);
    font-weight: var(--font-longform--weight);
  }

  .product-assurances__link {
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid rgb(var(--color-foreground-rgb) / 0.4);
  }

  .product-assurances__link:hover {
    border-block-end-color: currentcolor;
  }
/* END_SNIPPET:product-assurances-mab */

/* START_SNIPPET:product-attribution-mab (INDEX:340) */
/* Maker, name and place are one thing — who made this and what it is. The group they sit in
     spaces its children for a list of separate items, which set the maker three times further from
     the name than the place is. Closing it to the same step makes the three read as one block. */
  .product-attribution-mab__maker {
    display: block;
    margin-block-end: calc(var(--mab-gap-eyebrow) * -1);
  }

  /* No rule under the name at rest. A label set in the preheader face, uppercase and tracked, is
     already distinct from everything around it; underlining it as well marks the same thing twice
     and turns a house's name into a form control. The affordance waits for the pointer, as it does
     on a mega menu heading. */
  a.product-attribution-mab__maker {
    text-decoration: none;
    transition: opacity 0.2s ease;
  }

  a.product-attribution-mab__maker:hover {
    text-decoration-line: underline;
    text-underline-offset: 0.25em;
    text-decoration-color: rgb(var(--color-foreground-rgb) / 0.35);
  }

  /* The card holds this line right under the name — two pixels, from a negative margin against its
     own gap — so the place reads as part of the title rather than as the next thing down. The
     product page has a larger gap to cancel and a larger title to sit under. */
  .product-attribution-mab__region {
    margin: 0;
    margin-block-start: calc(var(--mab-gap-eyebrow) * -1);
    /* The card sets the region in long-form weight, a fact rather than a name. Inheriting here
       would take the heavier menu weight and make it read as a second title. */
    font-weight: var(--font-longform--weight);
    font-size: var(--mab-size-body-sm);
    line-height: var(--mab-leading-compact);
    color: rgb(var(--color-foreground-rgb) / 0.45);
    text-wrap: pretty;
    /* And the identity block ends here. What follows — price, sizes, the button — is a different
       proposition, so the step down to it has to read as a break rather than as the next line.
       Proximity only groups when the gap between groups clearly beats the gap inside one. */
    margin-block-end: var(--mab-gap-eyebrow);
  }

  /* Where it was made, then how — one sentence, two facts, told in that order. The separator
     belongs to the pair, so it is drawn only when a place precedes the origin.
     WHAT BREAKS IF YOU CHANGE THIS: without the sibling combinator, a product that carries an
     origin and no distiller opens its line with a stray dot — accessories, books and posters. */
  .product-attribution-mab__place + .product-attribution-mab__origin::before {
    content: ' · ';
  }
/* END_SNIPPET:product-attribution-mab */

/* START_SNIPPET:product-badges-styles (INDEX:342) */
.product-badges {
    --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 {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    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--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card-gallery-zoom-details-styles (INDEX:344) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:345) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:350) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

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

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .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 {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      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:351) */
.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-container-styles (INDEX:352) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-mab (INDEX:353) */
.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 {
      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;
        }
      }
    }
  }

  /* ------------------------------------------------------------------ */
  /* Zoom dialog background.                                             */
  /* The dialog is its own view-transition group and clears its background */
  /* while a transition runs, so on open its only snapshot is taken under  */
  /* that clearing rule and comes out transparent — nothing paints the     */
  /* background until the transition ends. This declares opaque parchment  */
  /* across the viewport so nothing shows through in that gap.             */
  /* Shopify compiles every stylesheet block in the theme into one global  */
  /* sheet, this snippet's native twin included, and that twin never       */
  /* renders. Its rules key on the native class name, so the fork's own    */
  /* -mab class matches nothing there and this is the only rule that       */
  /* applies.                                                              */
  /* ------------------------------------------------------------------ */
  .dialog-zoomed-gallery-mab__dialog {
    background-color: var(--color-background);
  }

  .dialog-zoomed-gallery__close-button {
    color: var(--mab-ivory);
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  @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 {
    height: 100vh;
  }

  /* ------------------------------------------------------------------ */
  /* Zoom dialog thumbnails.                                             */
  /* Heritage's native snippet's stylesheet tag is subset to that file's  */
  /* render tree; this fork is rendered instead, so the rules have to     */
  /* live here.                                                           */
  /* The `.dialog--closed` slide-out is load bearing: zoom-dialog.js     */
  /* awaits `onAnimationEnd(thumbnails)` before starting the closing view */
  /* transition. With no animation to await, that promise settles on the  */
  /* next microtask and the dialog chrome is cut away instantly.         */
  /* ------------------------------------------------------------------ */
  .dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &: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 var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  /* ------------------------------------------------------------------ */
  /* Zoom open/close view transitions.                                   */
  /* zoom-dialog.js names the snapshots `gallery-item-open` on open and  */
  /* `gallery-item-close` on close. Untuned, the UA cross-fades both     */
  /* snapshots while morphing the group, which reads as a jump on close  */
  /* because the closing snapshot is the full-screen image.              */
  /* ------------------------------------------------------------------ */
  ::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-mab */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:354) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:355) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &: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 var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @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);
  }

  /* 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;
  }

  .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;
  }

  :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;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:357) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:product-row-mab (INDEX:358) */
/* ===== Product row (product-row-mab) ===== */

  /* The row sits ON the band, with no surface of its own: giving it one would read as the same
     kind of object as the bridge below it, collapsing the distinction the two-band tail exists to
     make. One panel in the band, and it is the bridge: that is what gives the bridge the rank
     its role asks for.

     No overflow:hidden either, so the media carries its own radius rather than borrowing the row's
     clip. position:relative still anchors the title anchor's ::after, which is the row's single
     tab stop. */
  .product-row {
    position: relative;
    list-style: none;
  }

  /* Inner: flex row that wraps on mobile so the image strip floats above the body via order:-1.
     At 750px+ flex-wrap:nowrap keeps image and body on one line; order properties restore the
     visual order (image left, body right) while DOM order (body first) keeps screen readers and
     phones on the words before the picture. */
  .product-row__inner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
  }

  @media screen and (min-width: 750px) {
    .product-row__inner {
      flex-wrap: nowrap;
    }

    .product-row__media { order: 0; }
    .product-row__body  { order: 1; }
  }

  /* Body: stacks content and action vertically by default. At 990px they sit beside each other
     on the row axis — not 750, because a narrow body with a reserved action track leaves the
     title too few pixels. Vertically centred against the portrait image so content does not
     float to the top of a tall gap (the product image is 4:5, ~475px at desktop).

     flex-grow/shrink separated from flex-basis so the mobile image rule can set flex-basis:100%
     without a shorthand re-setting it back to 0. flex: 1 shorthand = flex: 1 1 0, and any later
     flex-basis rule is overridden by that shorthand. */
  .product-row__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0;
  }

  /* Mobile + image: body must wrap to its own line below the media strip.
     With flex-wrap:wrap and media at flex-basis:100%, the body's flex-basis:0 fits in the 0px
     remaining on line 1 and never wraps. Setting flex-basis:100% here forces a line break. */
  .product-row--has-image .product-row__body {
    flex-basis: 100%;
  }

  @media screen and (min-width: 750px) {
    /* At sidebar layout, nowrap is active — body reverts to flex: 1 behavior. */
    .product-row--has-image .product-row__body {
      flex-basis: 0;
    }
  }

  @media screen and (min-width: 990px) {
    .product-row__body {
      flex-direction: row;
      align-items: center;
    }
  }

  /* Content column: label, title, meta (price · caption). */
  .product-row__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mab-gap-eyebrow);
    flex: 1;
    padding: var(--mab-gap-text);
    min-width: 0;
  }

  /* Label: "From the shop" — the muted ink the .mab-preheader utility supplies, deliberately.

     A rule setting the orange accent here would lose at (0,1,0) to `body.mab-theme
     .mab-preheader` at (0,2,1), which composites ink at 65% — and that is for the better: orange
     on this cream ground measures 2.94:1, failing AA even for large text, while the muted ink
     measures 5.30:1 and passes. The commercial signal is carried by the filled CTA and the price,
     not by tinting a label past legibility. */
  .product-row__label {
    margin: 0;
  }

  /* Title: mab-editorial-card-title supplies Space Grotesk 500. */
  .product-row__title {
    margin: 0;
  }

  /* No underline at rest. Underline on hover/focus — the only visual response from the row. */
  .product-row__link {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-color var(--mab-duration-fast) ease;
  }

  .product-row:hover .product-row__link,
  .product-row__link:focus-visible {
    text-decoration: underline;
  }

  /* The title anchor's ::after covers the full row — one tab stop per product. */
  .product-row .product-row__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* Meta line: price and optional caption. Courier Prime 400 via mab-preheader. */
  .product-row__meta {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.75);
  }

  /* Description: curated short_description (127/136 products), falling back to body_html.
     Hidden at mobile — the row is already 640px; an extra block of prose on a 390px screen
     adds height without adding navigation value. At tablet+ it fills the space that the
     portrait image creates (375px at 750, 475px at 990+). Clamped hard so a 420-char entry
     renders the same row height as a 250-char one: the image drives the row, never the text. */
  .product-row__desc {
    margin: 0;
    color: rgb(var(--color-foreground-rgb) / 0.8);
    font-weight: 400; /* theme body is Rubik 500; descriptions are long-form copy, Rubik 400 */
  }

  @media screen and (max-width: 749px) {
    .product-row__desc { display: none; }
  }

  @media screen and (min-width: 750px) {
    .product-row__desc {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      -webkit-line-clamp: 4;
    }
  }

  @media screen and (min-width: 990px) {
    .product-row__desc { -webkit-line-clamp: 6; }
  }

  /* Action cell: sits at the body's inline end, bottom-aligned. */
  .product-row__action {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    padding: var(--mab-gap-text);
    padding-inline-start: var(--mab-gap-block);
  }

  .product-row__action:empty {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .product-row__action {
      padding-block-start: 0;
      padding-inline-start: var(--mab-gap-text);
    }
  }

  @media screen and (min-width: 990px) {
    .product-row__action {
      min-inline-size: var(--mab-list-action-w);
    }

    .product-row__action:empty {
      display: block;
    }
  }

  /* CTA stacks over the full-row overlay so the button is a real click target. */
  .product-row .product-row__cta {
    position: relative;
    z-index: 1;
  }

  /* WCAG 2.2 SC 2.5.5 AAA: 44px minimum touch target on mobile. */
  @media screen and (max-width: 749px) {
    .product-row .product-row__cta {
      min-block-size: var(--mab-height-cta-min);
      display: inline-flex;
      align-items: center;
    }
  }

  /* ---- IMAGE COLUMN ---- */

  /* Hidden by default: no image means no media column. The body expands to fill the gap. */
  .product-row__media {
    display: none;
  }

  /* THE FRAME IS 165px WIDE, WHICH AT 4:5 MAKES IT ~206px TALL.

     4:5 matches the PLP card's own media box shape, so a bottle is never squashed into a
     landscape crop. Narrower than the PLP card on purpose: this is an article, the product is
     ancillary, and it is not the thing the page puts forward.

     Product photography is portrait. The row is the third member of the event-row / journal-row
     family (horizontal, image left, words right) but its image RATIO belongs to the content type,
     not to the family — editorial photography is landscape, product photography is 4:5.
     The aspect-ratio is set via inline style (--row-media-ratio / aspect-ratio on the element).

     The media carries --mab-radius-lg itself: the row no longer paints a surface and no longer
     clips, so a radius borrowed from the row's overflow would have left the photograph square.
     align-self:flex-start prevents the flex line from stretching the media beyond the row body
     height on mobile; at 750px+ it is reset so the sidebar can grow with the text column. */
  .product-row--has-image .product-row__media {
    display: block;
    flex-basis: 100%;
    order: -1;
    align-self: flex-start;
    --mab-card-media-radius: var(--mab-radius-lg);
  }

  /* Mobile: body.mab-theme .mab-card-media img sets height:100% at (0,2,1). This rule at (0,2,1)
     is compiled into styles.css after mab-base.css, so it wins the cascade.
     position:static + height:auto lets the img set its own dimensions via aspect-ratio; the
     container wraps around it. object-fit:cover is set so an odd source crops to 4:5 cleanly. */
  .product-row--has-image .product-row__media img {
    position: static;
    height: auto;
    aspect-ratio: var(--row-media-ratio, 4 / 5);
    object-fit: cover;
  }

  @media screen and (min-width: 750px) {
    /* Portrait sidebar at tablet. 240px is a floor — the PLP card is only 153px wide at 750px
       (4 columns in the collection grid), which is too narrow for a sole-item sidebar. The floor
       keeps the image legible beside the text column. align-self: stretch lets the sidebar fill
       the row's full height driven by the text column or the 4:5 box, whichever is taller. */
    .product-row--has-image .product-row__media {
      flex-basis: auto;
      order: 0;
      width: 165px;
      align-self: stretch;
    }

    .product-row--has-image .product-row__media img {
      position: absolute;
      inset: 0;
      height: 100%;
      width: 100%;
      aspect-ratio: auto;
    }
  }

  @media screen and (min-width: 990px) {
    /* Match the PLP card's grid column width at 990px viewport (213px). */
    .product-row--has-image .product-row__media {
      width: 165px;
    }
  }

  @media screen and (min-width: 1200px) {
    /* Match the PLP card's grid column width at 1440px viewport (326px). At 1200px+ the
       content area begins to approach 1100px, so 326px lands at the same proportion as the PLP
       thumbnail. The 4:5 ratio makes the box 326×408, matching the PLP card's media box exactly. */
    .product-row--has-image .product-row__media {
      width: 165px;
    }
  }

  .product-row__image {
    display: block;
  }

  /* ---- SCROLL REVEAL ---- */

  @media (prefers-reduced-motion: no-preference) {
    [data-scroll-reveal] .product-row {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity var(--mab-duration-reveal) var(--mab-easing-bounce),
        transform var(--mab-duration-bounce) var(--mab-easing-bounce);
      transition-delay: var(--reveal-delay, 0s);
    }

    [data-scroll-reveal].is-visible .product-row {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:product-row-mab */

/* START_SNIPPET:product-spec-row-mab (INDEX:359) */
.product-spec-row {
    margin: 0;
    padding-block: 0 0.75rem;
    break-inside: avoid;
  }

  .product-spec-row__content {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
  }

  /* The register comes from .mab-data-label; only the row's own layout belongs here.
     Shrinkable with min-width: 0 so a long label wraps rather than forcing the row
     wider than its column — the row sits in a multi-column track. */
  .product-spec-row__label {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    color: currentColor;
  }

  .product-spec-row__dots {
    flex: 1;
    border-bottom: 1px dotted currentColor;
    opacity: 0.25;
    min-width: 2rem;
    margin-bottom: 0.2em;
  }

  .product-spec-row__value {
    /* min-width: 0 removes the flex automatic minimum size, so the value can shrink
       below its longest word; overflow-wrap then breaks an unbroken string such as a
       URL instead of letting it spill over the column. */
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    margin: 0;
    font-family: var(--font-body--family);
    font-weight: var(--font-longform--weight);
    font-size: 0.875rem;
    line-height: var(--mab-leading-compact);
    text-align: right;
  }

  /* Mobile: stack layout without dots */
  @media screen and (max-width: 749px) {
    .product-spec-row__content {
      flex-wrap: wrap;
      gap: 0.25rem;
    }

    .product-spec-row__label {
      flex: 1 0 100%;
    }

    .product-spec-row__dots {
      display: none;
    }

    .product-spec-row__value {
      flex: 1 0 100%;
      text-align: left;
    }
  }
/* END_SNIPPET:product-spec-row-mab */

/* START_SNIPPET:quantity-selector-styles (INDEX:362) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:363) */
.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-styles (INDEX:365) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @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
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) 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,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::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-styles */

/* START_SNIPPET:quick-add-styles (INDEX:367) */
/* 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));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    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;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  /* :is(a, button) so the bundle variant of this button - an <a> that links to the PDP,
     see quick-add-bundle-mab - picks up the same geometry. Narrowing this to
     `button.quick-add__button` would silently drop the anchor out of every rule below
     (position, width, overflow, display gating), leaving it rendering as a plain in-flow
     .button. :is() takes the specificity of its most specific argument, so this
     stays at 0 1 1 and the cascade around it is unchanged. */
  :is(a, button).quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, 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);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &: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: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
    /* With the label collapsed to zero (below), the icon is the only item with a size, so
       let it absorb whatever slack the content box has. That keeps it optically centred
       whether or not the skin in use keeps the 2px border. Inert while the label is
       expanded, because `width: max-content` on the button leaves no free space. */
    flex-grow: 1;
  }

  /* Collapsed (icon-only) label.

     The label is hidden by pinning the button to --quick-add-collapsed-width and letting
     `overflow: hidden` clip it: with the 2px border on each side, a 36px border-box button
     has a 32px content box, which is exactly --quick-add-icon-width, so the label begins at
     the clip edge. That is an unstated dependency on the border - the MAB skin sets
     `border: none`, which hands those 4px back to the content box and lets a sliver of the
     first glyph show next to the icon on mobile, where the button never expands.

     Collapsing the label itself is independent of the border. The text stays in the
     accessibility tree - it is clipped, not `display: none`. */
  .quick-add__button-label {
    inline-size: 0;
    /* Beats the automatic minimum size, which `white-space: nowrap` on the button would
       otherwise resolve to the label's max-content width. */
    min-inline-size: 0;
    overflow: hidden;
  }

  @media screen and (min-width: 750px) {
    /* Same trigger as the button's width expansion, so box and label grow together. */
    .quick-add__button:is(:hover, :focus-visible) .quick-add__button-label {
      inline-size: max-content;
    }
  }

  .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;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    :is(a, button).quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button-label {
      transition-property: inline-size;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:371) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .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,
    .compare-at-price {
      font-family: var(--font-accent--family);
      font-weight: var(--font-accent--weight);
      letter-spacing: normal;
      text-transform: none;
    }

    .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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='product'] .resource-card__title {
    font-family: var(--product-card-title-font-family);
    font-style: var(--product-card-title-font-style);
    font-weight: var(--product-card-title-font-weight);
    line-height: var(--product-card-title-line-height);
    letter-spacing: var(--product-card-title-letter-spacing);
    text-transform: var(--product-card-title-text-transform);
  }

  .resource-card[data-resource-type='product'] .resource-card__media {
    position: relative;
    background-color: var(--product-card-media-background);
    border-radius: var(--resource-card-corner-radius);
    overflow: hidden;
  }

  /* MAB Badge positioning for resource cards - use !important to override product-card-gallery styles */
  .resource-card .resource-card__media .product-badges {
    --badge-inset: var(--padding-xs, 8px);
    position: absolute !important;
    z-index: var(--layer-flat, 1);
  }

  .resource-card .resource-card__media .product-badges--custom {
    top: var(--badge-inset) !important;
    right: var(--badge-inset) !important;
    left: auto !important;
  }

  .resource-card .resource-card__media .product-badges--native {
    top: var(--badge-inset) !important;
    left: var(--badge-inset) !important;
    right: auto !important;
  }

  .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-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-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }

  /* Re-enable card lift in mega menu (Heritage disables it for all .header .resource-card) */
  @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
    .card-hover-effect-lift .header .resource-card:hover,
    .card-hover-effect-lift .header-drawer .resource-card:hover {
      transform: translateY(calc(-1 * var(--hover-lift-amount)));
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:372) */
.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);
  }

  .collection-card__image {
    background-color: var(--product-card-media-background);
    border-radius: var(--collection-card-media-radius);
    overflow: hidden;
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:373) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* 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 */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:374) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:380) */
/* 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: {{ settings.predictive_search_modal_width }}dvw;

    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);
    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;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .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;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !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;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.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-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-foreground-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:381) */
.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:383) */
.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)
    )
    #MainContent
    > .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:389) */
.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:391) */
.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-arrows (INDEX:392) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:393) */
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;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:395) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

    @media screen and (min-width: 750px) {
      min-height: var(--slide-min-height-desktop);
    }
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:397) */
.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:summary-icon-styles (INDEX:403) */
details[open] > summary .icon-animated > svg {
    transform: rotate(180deg);
  }

  summary .svg-wrapper {
    margin-inline-start: auto;
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Shared plus/minus icon animations */
  summary .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  details[open] > summary .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  details[open] > summary .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }
/* END_SNIPPET:summary-icon-styles */

/* START_SNIPPET:swatch-styles (INDEX:404) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-block-styles (INDEX:408) */
.text-block {
    width: var(--width, 100%);
  }

  .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);
  }

  .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. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .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);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:409) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

  @keyframes text-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:410) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [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, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:412) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

  @keyframes drawer-slide-in {
    from {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

  @keyframes drawer-slide-out {
    to {
      right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    }
  }

  /* Backdrop (modal mode only, < 990px). Mirrors the shared dialog-styles
     contract: the scrim owns a brightness ramp on open and an opacity fade on
     close, so it never snaps off while the panel is still sliding out.
     Opacity/brightness are cross-fades, not movement, so no reduced-motion
     guard is needed here — the panel slide keeps its own timing. */
  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
    backdrop-filter: brightness(1);
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  }

  /* An animation, not a transition: the ::backdrop has no previous computed
     style when showModal() creates it, so a transition would not run. The
     `forwards` fill keeps the darkened state for as long as the dialog is open. */
  .theme-drawer__dialog[open]::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* theme-drawer.js keeps the dialog [open] until the slide-out animation ends,
     so this opacity change transitions in parallel with drawer-slide-out
     instead of being cut short by dialog.close(). */
  .theme-drawer__dialog--closing::backdrop {
    opacity: 0;
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:425) */
/* 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-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .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);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .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;
    background-color: var(--color-variant-background);
    color: inherit;
    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;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-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);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .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;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-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;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:426) */
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);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .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-background-styles (INDEX:427) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:428) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:visit-hours-mab (INDEX:431) */
/* ===== Visit hours ===== */

  /* Names which season follows, in the register the prices column uses for "Rates 2026" and
     "Supplements", so both columns of the band label their groups the same way. */
  .visit-hours__set {
    margin-block: var(--mab-gap-text) var(--mab-gap-eyebrow);
  }

  .visit-hours__set:first-of-type {
    margin-block-start: 0;
  }

  /* The rows themselves are .mab-fact-list, shared with the prices column. Nothing local. */

  /* Today's open/closed line is not here: it answers a question about the museum rather than about
     the schedule, so the band renders it at its own head. See visit-essentials-mab. */

  /* ---- The notes ----
     Conditions on the schedule, not the schedule: a reading measure, a step back in tone, and
     real space above so they do not stand at the weight of the times. */
  .visit-hours__note {
    margin-block-start: var(--mab-gap-block);
    max-width: var(--mab-measure-copy);
  }

  /* The size is set on the paragraphs, not on the container: .mab-body-text is
     `body.mab-theme .mab-body-text` at (0,2,1) and sets 16px, so a container rule at (0,1,0)
     would lose and the small print would render LARGER than the prices it qualifies — 16px
     against 13px. A declaration on the paragraph beats an inherited value whatever the
     container's specificity.

     --mab-size-label rather than --mab-size-body-sm: body-sm only matches the size of the row
     LABELS, leaving it larger than the times themselves — 14.4px of prose above a 13px figure.
     A note qualifies a value, so it sits a rung below it.

     The tone has to be a colour on the paragraph for the same reason. The container carried
     `opacity: var(--mab-opacity-label)` and it never applied: .mab-body-text sits on that very
     element at (0,2,1) with its own `opacity: 0.9` and wins, so the small print rendered at
     12.57:1 against the figures' 16.66:1 — a step nobody could see. The 0.9 still multiplies what
     is set here, which is what puts the note below the label's 0.8 without a third token. */
  .visit-hours__note p {
    font-size: var(--mab-size-label);
    line-height: var(--mab-leading-body);
    color: rgb(var(--color-foreground-rgb) / var(--mab-opacity-label));
  }

  .visit-hours__note + .visit-hours__note {
    margin-block-start: var(--mab-gap-text);
  }
/* END_SNIPPET:visit-hours-mab */

/* START_SNIPPET:visit-tariffs-mab (INDEX:433) */
/* ===== Visit tariffs ===== */

  /* Names which set of facts follows — "Rates 2026", "Supplements" — in the register the seasons
     use in the hours column, so both columns of the band label their groups the same way. It
     labels an object inside a band, which is .mab-preheader's job. */
  .visit-tariffs__set {
    margin-block: var(--mab-gap-text) var(--mab-gap-eyebrow);
  }

  .visit-tariffs__set:first-child {
    margin-block-start: 0;
  }

  /* ---- The matrix, for two or three formulas ---- */

  /* min-width: 0 lets the panel shrink inside its grid column so overflow-x can engage; the
     frame clips the scrolled content at the rounded corners. */
  .visit-tariffs__scroll {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
    border-radius: var(--mab-radius-lg);
    background-color: var(--visit-tariffs-surface, transparent);
  }

  .visit-tariffs__scroll:focus-visible {
    outline: 2px solid rgb(var(--color-foreground-rgb) / 0.6);
    outline-offset: 2px;
  }

  .visit-tariffs__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body--family);
    font-size: var(--mab-size-body-sm);
    line-height: var(--mab-leading-compact);
    text-align: start;
  }

  .visit-tariffs__table th,
  .visit-tariffs__table td {
    padding: var(--mab-cell-padding);
    text-align: start;
    vertical-align: baseline;
  }

  /* Rules between rows, none under the last: the panel's own frame closes the table. */
  .visit-tariffs__table tbody th,
  .visit-tariffs__table tbody td {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* Opaque via color-mix rather than an alpha, because the first cell is sticky and translucency
     would let the scrolled cells show through it. */
  .visit-tariffs__table thead th {
    font-family: var(--font-preheader--family);
    font-weight: var(--font-preheader--weight);
    font-size: var(--mab-size-label);
    letter-spacing: var(--mab-tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: rgb(var(--color-foreground-rgb) / var(--mab-preheader-alpha));
    background-color: var(--visit-tariffs-head, transparent);
  }

  /* Qualified by the table class to reach (0,2,0): the `th, td` rule above sets text-align on
     `.visit-tariffs__table td`, also (0,2,0) but earlier, so a bare `.visit-tariffs__price` at
     (0,1,0) lost and every price stayed left. */
  .visit-tariffs__table .visit-tariffs__price-head,
  .visit-tariffs__table .visit-tariffs__price {
    text-align: end;
    font-family: var(--font-preheader--family);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 4.5rem;
  }

  /* The price cell keeps the table's own size — shrinking it to --mab-size-label, one rung
     below the audience naming it, would make the figure the smallest thing in its own row. The
     projection's .tbl gives its .num cells no size of their own either; the mono face and the
     right edge are what set them apart. */

  .visit-tariffs__row-head,
  .visit-tariffs__table thead th:first-child,
  .visit-tariffs__group-head {
    position: sticky;
    inset-inline-start: 0;
  }

  /* A floor on the audience column, so the table scrolls rather than crushing it: with three
     price columns each holding their own minimum, the first column was squeezed until
     "students, AVS/AI, Val-de-Travers residents" wrapped to five lines and doubled the row's
     height. Scrolling is what this panel is built to do; wrapping a label to five lines is not. */
  .visit-tariffs__row-head {
    min-width: 9rem;
    font-family: var(--font-body--family);
    font-weight: var(--font-body--weight);
    background-color: var(--visit-tariffs-surface, transparent);
  }

  /* Three classes to reach (0,3,0): .mab-data-label is `body.mab-theme .mab-data-label` at
     (0,2,1), and a (0,2,0) override loses to it silently — which left a long condition set in
     uppercase mono as the widest thing in the table, reading as a second heading. */
  .visit-tariffs__table .visit-tariffs__row-head .visit-tariffs__qualifier {
    display: block;
    margin-block-start: 0.125rem;
    font-family: var(--font-body--family);
    font-size: var(--mab-size-label);
    text-transform: none;
    letter-spacing: normal;
  }

  .visit-tariffs__group-head {
    padding-block: var(--mab-cell-pad-block);
    background-color: var(--visit-tariffs-head, transparent);
    text-transform: uppercase;
  }

  .visit-tariffs__group > tr:first-child th {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / 0.12);
  }

  /* ---- The conditions ----
     Small print, and set as such: the prices answer the visitor's question and these qualify the
     answer, so they take a reading measure, a step back in tone and real space above rather than
     standing at the same weight as the figures. */
  /* The mark sits above the baseline and a rung quieter than the label it follows, so it reads as a
     reference rather than as part of the measure. */
  .visit-tariffs__mark {
    font-size: 0.85em;
    vertical-align: super;
    line-height: 0;
    color: rgb(var(--color-foreground-rgb) / var(--mab-opacity-marker));
    padding-inline-start: 0.15em;
  }

  /* Leading the footnote rather than trailing a label, so the space it needs is on the other side. */
  .visit-tariffs__mark--leading {
    padding-inline: 0 0.4em;
  }

  /* The footnote takes the small-print register the conditions below it use, and sits directly under
     the table rather than after them: it explains a column head, so it belongs beside the table it
     annotates and not among the terms of sale. */
  .visit-tariffs__footnote {
    margin-block: var(--mab-gap-eyebrow) 0;
    font-size: var(--mab-size-label);
    line-height: var(--mab-leading-compact);
    color: rgb(var(--color-foreground-rgb) / 0.65);
  }

  .visit-tariffs__note {
    margin-block-start: var(--mab-gap-block);
    max-width: var(--mab-measure-copy);
  }

  /* The size is set on the paragraphs, not on the container: .mab-body-text is
     `body.mab-theme .mab-body-text` at (0,2,1) and sets 16px, so a container rule at (0,1,0)
     would lose and the small print would render LARGER than the prices it qualifies — 16px
     against 13px. A declaration on the paragraph beats an inherited value whatever the
     container's specificity.

     --mab-size-label rather than --mab-size-body-sm: body-sm only matches the size of the row
     LABELS, leaving three paragraphs of conditions standing larger than every price on the band.
     A note qualifies a value, so it sits a rung below it.

     The tone has to be a colour on the paragraph for the same reason. The container carried
     `opacity: var(--mab-opacity-label)` and it never applied: .mab-body-text sits on that very
     element at (0,2,1) with its own `opacity: 0.9` and wins, so the small print rendered at
     12.57:1 against the figures' 16.66:1 — a step nobody could see. The 0.9 still multiplies what
     is set here, which is what puts the note below the label's 0.8 without a third token. */
  .visit-tariffs__note p {
    font-size: var(--mab-size-label);
    line-height: var(--mab-leading-body);
    color: rgb(var(--color-foreground-rgb) / var(--mab-opacity-label));
  }
/* END_SNIPPET:visit-tariffs-mab */

/* START_SNIPPET:volume-pricing-info (INDEX:434) */
.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-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-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */