/** Shopify CDN: Minification failed

Line 11079:5 Cannot use type selector "-label" directly after nesting selector "&"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0) */
.announcement-bar {
    --announcement-bar-slide-height: auto;
    --announcement-bar-transition-duration: 0.45s;
    display: block;
    width: 100%;
  }

  .announcement-bar[hidden] {
    display: none;
  }

  .announcement-bar__layout {
    align-items: center;
    column-gap: var(--spacing-15);
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) 1.4rem;
    min-height: 4rem;
    padding-inline: var(--page-margin);
  }

  .announcement-bar__viewport {
    grid-column: 2;
    display: block;
    min-width: 0;
    overflow: hidden;
    position: relative;
  }

  .announcement-bar__slides {
    min-height: var(--announcement-bar-slide-height, auto);
    position: relative;
  }

  .announcement-bar__slide {
    align-items: center;
    display: flex;
    font-family: var(--family-primary);
    font-weight: 700;
    font-size: var(--preheader-size);
    letter-spacing: var(--preheader-letter-spacing);
    inline-size: 100%;
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: translate3d(0, 100%, 0);
    transition: transform var(--announcement-bar-transition-duration) ease,
      opacity var(--announcement-bar-transition-duration) ease;
  }

  .announcement-bar__slide[data-state='active'] {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .announcement-bar__slide:first-child:not([data-state]) {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .announcement-bar__slide[data-state='exit'] {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
  }

  .announcement-bar__close {
    align-self: center;
    color: inherit;
    flex: 0 0 auto;
  }

  .announcement-bar__close svg {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__slide {
      transition: none;
    }
  }

  @media screen and (max-width: 749px) {
    .announcement-bar__layout {
      column-gap: var(--spacing-08);
      min-height: 3.5rem;
      padding-inline: var(--page-margin-mobile, var(--page-margin));
    }

    .announcement-bar__slide {
      text-align: start;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article (INDEX:1) */
.article-page {
    --article-width: min(89.2rem, calc(100% - (var(--page-margin) * 2)));
    --article-flow: 2.4rem;
    --article-ink: #373737;

    @media screen and (min-width: 750px) {
      --article-flow: 4rem;
    }
  }

  /* ── Header ─────────────────────────────────────────────── */
  .article-page__header {
    display: grid;
    justify-items: center;
    gap: var(--spacing-20);
    width: var(--article-width);
    margin-inline: auto;
    padding-block-end: var(--spacing-42);
    text-align: center;

    @media screen and (min-width: 750px) {
      gap: 3rem;
      padding-block-end: 4.4rem;
    }
  }

  .article-page__date {
    color: #1d1d1d;
    font-weight: var(--body-medium-weight);
  }

  .article-page__title {
    color: var(--article-ink);
    text-wrap: balance;
  }

  .article-page__excerpt {
    color: #474747;
    text-wrap: pretty;
  }

  /* ── Banner ─────────────────────────────────────────────── */
  .article-page__banner {
    aspect-ratio: 4 / 3;
    background: var(--color-media-placeholder);

    @media screen and (min-width: 750px) {
      aspect-ratio: 1440 / 690;
    }
  }

  .article-page__banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Body ───────────────────────────────────────────────── */
  .article-page__content,
  .article-page__comments {
    width: var(--article-width);
    margin-inline: auto;
  }

  .article-page__content {
    padding-block-start: 2rem;
    color: var(--article-ink);
    font-size: var(--body-size);
    font-weight: var(--body-medium-weight);
    line-height: normal;
  }

  /* One rhythm for the whole body, the mockup's 40px; the rich-text 1em margins would
     stack on top of it. */
  .article-page__content > * {
    margin-block: 0;
  }

  .article-page__content > * + * {
    margin-block-start: var(--article-flow);
  }

  .article-page__content h2 {
    color: var(--color-foreground);
    text-wrap: balance;
  }

  /* The mockup's "sous titre": body-large bold, not a serif heading. */
  .article-page__content h3,
  .article-page__content h4 {
    color: var(--color-foreground);
    font-family: var(--font-body-family);
    font-size: var(--body-large-size);
    font-style: normal;
    font-weight: var(--body-bold-weight);
    line-height: normal;
  }

  .article-page__content h2 + :is(h3, h4) {
    margin-block-start: var(--spacing-20);
  }

  /* A paragraph right under an h2 sits a little closer than the 4rem flow. */
  .article-page__content h2 + p {
    @media screen and (min-width: 750px) {
      margin-block-start: 3rem;
    }
  }

  .article-page__content :is(p, li, td) strong {
    color: var(--color-foreground);
  }

  .article-page__content a {
    color: var(--color-accent);
    font-weight: inherit;
    text-decoration-line: underline;
    text-underline-position: from-font;
  }

  /* ── Table ──────────────────────────────────────────────── */
  /* The admin editor ships a bare <table>: a rounded white card with a hairline frame, the
     dark green header row, light rules between rows, and the editor's `<br><em>…</em>` under
     a row label as a small pale green pill. Below 750px it scrolls inside itself instead of
     widening the page — there is no wrapper to add, the HTML is not ours. */
  .article-page__content table {
    --article-table-rule: color-mix(in oklab, var(--color-foreground) 10%, transparent);

    display: block;
    overflow-x: auto;
    border: 1px solid var(--article-table-rule);
    border-radius: 1rem;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-accent--white);
    font-size: var(--body-small-size);
    line-height: 1.35;

    @media screen and (min-width: 750px) {
      display: table;
      width: 100%;
      overflow: hidden;
    }
  }

  .article-page__content th,
  .article-page__content td {
    min-width: 16rem;
    padding: var(--spacing-12) var(--spacing-15);
    text-align: start;
    vertical-align: middle;

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

  .article-page__content th {
    background: var(--color-accent--dark-green);
    color: var(--color-accent--off-white);
    font-size: 1.2rem;
    font-weight: var(--body-bold-weight);
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .article-page__content td {
    color: var(--color-foreground);
    font-weight: var(--body-medium-weight);
  }

  .article-page__content tr + tr td,
  .article-page__content tbody tr:first-child td {
    border-block-start: 1px solid var(--article-table-rule);
  }

  .article-page__content thead + tbody tr:first-child td {
    border-block-start: 0;
  }

  .article-page__content td:first-child {
    font-weight: var(--body-bold-weight);
  }

  /* "Confirmé" / "Avis médical"… */
  .article-page__content td em {
    display: inline-block;
    margin-block-start: var(--spacing-04);
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    background: var(--color-accent--yellow);
    color: var(--color-accent--dark-green);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--body-bold-weight);
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
  }

  /* ── FAQ ────────────────────────────────────────────────── */
  /* Same look as `blocks/_faq-question.liquid`, built on the editor's bare
     <details><summary>: the chevron is a mask on `summary::after`, since the body
     HTML is never touched. */
  .article-page__content details {
    border-block-start: 1px solid var(--color-border);
  }

  .article-page__content details + details {
    margin-block-start: 0;
  }

  .article-page__content details:not(:has(+ details)) {
    border-block-end: 1px solid var(--color-border);
  }

  .article-page__content summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-20);
    padding-block: var(--spacing-20);
    color: var(--color-foreground);
    font-size: var(--body-large-size);
    font-weight: var(--body-bold-weight);
    line-height: normal;
    text-wrap: pretty;
    list-style: none;
    cursor: pointer;

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

  .article-page__content summary::-webkit-details-marker {
    display: none;
  }

  .article-page__content summary::after {
    content: '';
    flex-shrink: 0;
    inline-size: 1.1rem;
    block-size: 0.7rem;
    background-color: currentcolor;
    mask: var(--article-chevron) center / contain no-repeat;
    transition: rotate 0.2s ease;
  }

  .article-page__content details[open] summary::after {
    rotate: 180deg;
  }

  .article-page__content summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
  }

  .article-page__content details::details-content {
    block-size: 0;
    content-visibility: hidden;
    interpolate-size: allow-keywords;
    overflow: hidden;
    transition:
      block-size 0.25s ease,
      content-visibility 0.25s ease allow-discrete;
  }

  .article-page__content details[open]::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .article-page__content details > :not(summary) {
    margin-block: 0;
    padding-block-end: var(--spacing-20);
    padding-inline-end: var(--spacing-42);
    text-wrap: pretty;

    @media screen and (min-width: 750px) {
      padding-block-end: 2.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .article-page__content summary::after,
    .article-page__content details::details-content {
      transition: none;
    }
  }

  .article-page__comments {
    padding-block-start: var(--article-flow);
  }
/* END_SECTION:article */

/* START_SECTION:big-noka-logo (INDEX:2) */
.big-noka-logo {
    padding-block-start: var(--section-padding-block-start-mobile);
    padding-block-end: var(--section-padding-block-end-mobile);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: 2rem;
  }

  @media screen and (min-width: 750px) {
    .big-noka-logo {
      padding-block-start: var(--section-padding-block-start-desktop);
      padding-block-end: var(--section-padding-block-end-desktop);
    }
  }
/* END_SECTION:big-noka-logo */

/* START_SECTION:blog (INDEX:3) */
.blog-page__inner {
    display: block;
  }

  .blog-page__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.9rem;
    padding-block: 6rem 8rem;
    text-align: center;

    @media screen and (max-width: 749px) {
      padding-block: 3.4rem 5rem;
    }
  }

  .blog-page__title {
    margin: 0;
  }

  .blog-page__description {
    max-width: 61.2rem;
    text-align: center;
  }

  /* The shared listing ladder — see "Card Grids And Card Sliders Go 4-Up From 1700px" — except the
     row gap, which follows the blog mockup (60px) rather than the listings' double column gap. */
  .blog-page__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1.5rem;
    grid-row-gap: 6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 0.2s ease;

    @media screen and (max-width: 1089px) {
      grid-template-columns: repeat(2, 1fr);
    }

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

    @media screen and (min-width: 1700px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* `recipe-list.js` waits out this fade (`FADE_MS`) before swapping the cards on a filter change. */
  .blog-page__grid[aria-busy='true'] {
    opacity: 0;
  }

  .blog-page__item,
  .blog-page__item > * {
    min-width: 0;
  }

  .blog-page__more {
    display: flex;
    margin: 6rem auto 0;
  }

  .blog-page__more[hidden] {
    display: none;
  }

  .blog-page__empty {
    margin: 0;
    padding-block: 4rem;
    text-align: center;
  }
/* END_SECTION:blog */

/* START_SECTION:bundle-product-card (INDEX:4) */
.bundle-card__image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  /* The Figma lays a flat 20% black over the photo so the cream title stays legible. */
  .bundle-card .ugc-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgb(0 0 0 / 20%);
    pointer-events: none;
  }

  /* Above the scrim, under the title and the product panel (both `z-index: 1`, later in the DOM). */
  .bundle-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
  }

  .bundle-card__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  .bundle-card .ugc-card__handle {
    margin: 0;
    pointer-events: none;
  }
/* END_SECTION:bundle-product-card */

/* START_SECTION:cart-drawer (INDEX:6) */
.cart-drawer {
    --cart-drawer-skeleton-base: color-mix(in oklab, var(--color-foreground) 8%, #fff);
    --cart-drawer-skeleton-highlight: color-mix(in oklab, var(--color-foreground) 14%, #fff);
    --cart-drawer-skeleton-image: linear-gradient(
      90deg,
      var(--cart-drawer-skeleton-base) 0%,
      var(--cart-drawer-skeleton-highlight) 50%,
      var(--cart-drawer-skeleton-base) 100%
    );
  }

  @keyframes cart-drawer-skeleton-shimmer {
    from {
      background-position: 200% 0;
    }

    to {
      background-position: -200% 0;
    }
  }

  .cart-drawer__dialog {
    @media (min-width: 750px) {
      width: min(48.5rem, calc(100vw - 2.4rem));
    }
  }

  /* Two classes on purpose: `.dialog-header` in `component-dialog.css` sets its own
     `padding-block-end`, and that file's load order relative to the aggregated
     section stylesheets is not guaranteed. */
  .cart-drawer__dialog .cart-drawer__header {
    gap: 2.8rem;
    padding-block-end: var(--spacing-10);

    @media screen and (max-width: 749px) {
      gap: var(--spacing-20);
    }
  }

  .cart-drawer__header-top {
    align-items: center;
    justify-content: space-between;

    & .icon-button {
      display: flex;
      place-items: center;
      justify-content: flex-end;
    }
  }

  /* A <p>, not a heading: the drawer sits in every page's markup and a heading
     here would outrank the page's own <h1>. The italic is what the <h2> used to
     carry — the heading face ships italic only. */
  .cart-drawer__title {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    margin: 0;
    font-style: italic;
  }

  .cart-drawer__count-badge {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    position: relative;
    margin-top: -2rem;
  }

  .cart-drawer__count-badge.chip--display {
    gap: 0;
  }

  .cart-drawer__count-badge.chip--display::after {
    min-width: 100%;
    width: 100%;
    height: 100%;
  }

  .cart-drawer__count-value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: #fff;
    font-family: var(--family-primary);
    z-index: 1;
    font-style: normal;
  }

  .cart-drawer__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-12);
    margin: 0;
    font-size: var(--body-size);
    font-weight: 700;
  }

  .cart-drawer__recommendations {
    padding-inline: var(--drawer-padding-inline);
    padding-block-start: var(--drawer-padding-block);
    padding-block-end: 3.8rem;
    margin-right: calc(var(--drawer-padding-inline) * -1);
    overflow: hidden;
    opacity: 1;
    max-height: 48rem;
    translate: 0 0;
    visibility: visible;
    transition: opacity 220ms ease, max-height 220ms ease, padding-block 220ms ease, translate 220ms ease,
      visibility 0s linear 0s;

    @media screen and (max-width: 749px) {
      padding-block-start: var(--spacing-20);
      padding-block-end: var(--spacing-20);
    }
  }

  .dialog-footer[hidden] {
    display: none;
  }

  .cart-drawer__recommendations[data-state='closed'] {
    padding-block-start: 0;
    padding-block-end: 0;
    opacity: 0;
    max-height: 0;
    translate: 0 1rem;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, max-height 220ms ease, padding-block 220ms ease, translate 220ms ease,
      visibility 0s linear 220ms;
  }

  .cart-drawer__recommendations .cart-recommendations {
    margin-top: 0;
  }

  .cart-drawer__dialog .dialog-content {
    min-height: 0;
    overflow-y: auto;
    padding-block-start: 2.6rem;
  }

  .cart-item--loading .cart-item__image {
    overflow: hidden;
    background-image: var(--cart-drawer-skeleton-image);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: cart-drawer-skeleton-shimmer 1.35s ease-in-out infinite;
    border-radius: 0.4rem;
  }

  .cart-item--loading .cart-item__image img {
    opacity: 0.2;
  }

  /* The stale amount stays in the flow, only turned transparent, so the shimmer
     takes its exact width and the row never shifts while the cart recalculates. */
  .cart-item--loading .cart-item__price,
  .cart-item--loading .cart-item__compare-price,
  .cart-drawer[aria-busy='true'] .cart-drawer__subtotal [data-cart-total] {
    color: transparent;
    text-decoration-color: transparent;
    background-image: var(--cart-drawer-skeleton-image);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    animation: cart-drawer-skeleton-shimmer 1.35s ease-in-out infinite;
  }

  /* Keyed on the drawer, not on the button's own `aria-disabled`, because this
     selector then lives outside the morphed footer region and holds even if a
     morph lands mid-request. No `pointer-events: none`: `cart-drawer.js` swallows
     the activation, which lets the not-allowed cursor actually show and covers
     keyboard activation the same way. */
  .cart-drawer[aria-busy='true'] .cart-drawer__checkout-button {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* The shimmer is decoration on top of the real signals — `aria-busy` on the row
     and the greyed-out CTA — so it can drop to a flat placeholder. */
  @media (prefers-reduced-motion: reduce) {
    .cart-item--loading .cart-item__image,
    .cart-item--loading .cart-item__price,
    .cart-item--loading .cart-item__compare-price,
    .cart-drawer[aria-busy='true'] .cart-drawer__subtotal [data-cart-total] {
      animation: none;
    }
  }

  .cart-drawer__checkout-message {
    text-align: center;
    font-size: 1.2rem;
  }

  .cart-drawer__checkout-button[type='submit']:hover,
  .cart-drawer__checkout-button[type='submit']:focus-visible {
    opacity: 1;
    background: var(--color-primary-button-background-hover);
    color: var(--color-primary-button-text-hover);
    border-color: var(--color-primary-button-border-hover);
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:collection (INDEX:7) */
.collection-page__header {
    --gap: 1.9rem;
    padding-block: 0 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--gap);

    @media screen and (max-width: 749px) {
      padding-block: 0 5rem;
    }
  }

  & .collection-page__description {
    max-width: 61.2rem;
    text-align: center;
  }

  & .collection-product__item > product-card {
    background-color: #fff;
  }

  & .collection-product__item,
  & .collection-product__item > * {
    min-width: 0;
  }

  & .collection-product__item--pad {
    display: flex;
  }

  & .collection-product__item--pad > * {
    flex: 1 1 auto;
  }

  /* Mirrors `.collection-page__products` below: same column counts, same gutters,
     so the resource-less /collections/ page reads as the same grid. */
  .collection-page__list {
    --grid-gap: 1.5rem;
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-row-gap: calc(var(--grid-gap) * 2);
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 1089px) {
      grid-template-columns: repeat(2, 1fr);
    }

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

    @media screen and (min-width: 1700px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .collection-page__list-item {
    min-width: 0;
  }

  .collection-page__list-link {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--color-foreground);
    text-decoration: none;
  }

  /* The push pads portrait ratio and the recipe card radius. */
  .collection-page__list-media-wrapper {
    position: relative;
    aspect-ratio: 326 / 467;
    border-radius: 0.6rem;
    overflow: hidden;
  }

  .collection-page__list-media {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .collection-page__list-media--placeholder {
    background: color-mix(in oklab, var(--color-foreground) 4%, var(--color-background));
  }

  @media (hover: hover) {
    .collection-page__list-link:hover .collection-page__list-media {
      transform: scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .collection-page__list-media {
      transition: none;
    }
  }

  .collection-page__list-title {
    margin: 0;
    font-size: var(--card-title-size);
  }

  .collection-page__products {
    --grid-gap: 1.5rem;
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-row-gap: calc(var(--grid-gap) * 2);
    grid-template-columns: repeat(3, 1fr);

    @media screen and (max-width: 1089px) {
      grid-template-columns: repeat(2, 1fr);
    }

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

    /*
     * A pad lands every 6th cell, which closes a row at 2 and 3 columns but not at 4. Pin it to
     * the last column there and let `dense` backfill the cells it skips, so it still closes its
     * row next to the card it measures its height from.
     */
    @media screen and (min-width: 1700px) {
      grid-template-columns: repeat(4, 1fr);
      grid-auto-flow: row dense;

      & > .collection-product__item--pad {
        grid-column: -2 / -1;
      }
    }
  }
/* END_SECTION:collection */

/* START_SECTION:contact-form (INDEX:8) */
.contact-form-section__inner {
    inline-size: 100%;
    max-inline-size: 66.9rem;
    margin-inline: auto;
    color: var(--color-foreground);
  }

  .contact-form-section__header {
    display: grid;
    gap: var(--spacing-15);
    text-align: center;
  }

  .contact-form-section__title {
    text-wrap: pretty;
  }

  .contact-form-section__description {
    font-weight: var(--body-medium-weight);
  }

  .contact-form {
    display: block;
    margin-block-start: var(--spacing-50);
  }

  .contact-form__fields {
    display: grid;
    gap: var(--spacing-24);
  }

  .contact-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-15);
  }

  .contact-form__message {
    margin-block-end: var(--spacing-20);
    padding: var(--spacing-15) var(--spacing-20);
    border-radius: 0.4rem;
    text-align: center;
  }

  .contact-form__message--success {
    background: color-mix(in oklab, var(--color-foreground) 10%, transparent);
  }

  .contact-form__message--error {
    background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
    border: 1px solid var(--color-foreground);
  }

  /* Same field treatment as the footer newsletter input, which is the design
     reference here. The border-radius is stated because
     `--style-border-radius-inputs` is not defined in the theme, so the var() in
     snippets/input.liquid is invalid at computed-value time and resolves to 0. */
  .contact-form .input,
  .contact-form .select,
  .contact-form .textarea {
    inline-size: 100%;
    min-block-size: 5rem;
    border-color: color-mix(in oklab, currentColor 72%, transparent);
    border-radius: 0.4rem;
    padding-inline: 1.1rem;
    font-size: var(--body-size);
    line-height: normal;
  }

  .contact-form .input::placeholder,
  .contact-form .textarea::placeholder {
    font-size: var(--body-size);
  }

  .contact-form .select {
    padding-inline-end: var(--spacing-42);
  }

  .contact-form .textarea {
    min-block-size: 24.6rem;
    padding-block: var(--spacing-15);
    resize: vertical;
  }

  .contact-form__submit {
    margin-block-start: var(--spacing-42);
    text-align: center;
  }

  .contact-form__submit-button {
    min-inline-size: 20.9rem;
  }

  @media screen and (min-width: 750px) {
    .contact-form-section__title {
      /* Figma Heading/h3 is 30px; the theme's --h3-font-size drops to 2.2rem here. */
      font-size: 3rem;
    }

    .contact-form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:contact-form */

/* START_SECTION:cookie-banner (INDEX:9) */
/* Shopify's own banner is injected by `content_for_header`, outside the theme's
     control. Turning it off in Admin > Settings > Customer privacy is the real
     fix — this only stops the storefront showing two banners until that is done,
     and it lives in a section stylesheet (inlined in the head) so the Shopify
     banner never gets a frame to paint in. Both generations of its markup use
     the `shopify-pc__` id prefix: `banner` for the bar, `prefs` for its modal. */
  [id^='shopify-pc__banner'],
  [id^='shopify-pc__prefs'] {
    display: none !important;
  }

  /* The host is a layout-neutral wrapper: the card is fixed and the dialog lives
     in the top layer, and the element itself must never take space. It also has
     to stay displayed even while the card is hidden, so the footer trigger can
     still open the preferences dialog. */
  cookie-banner {
    display: contents;
  }

  .cookie-banner__card {
    position: fixed;
    z-index: 40;
    inset-block-end: 0;
    inline-size: min(90rem, calc(100vw - (var(--page-margin) * 2)));
    display: grid;
    gap: var(--spacing-20);
    padding: var(--spacing-22);
    border: 1px solid var(--color-border);
    background: var(--color-background);
    color: var(--color-foreground);
    box-shadow: 0 1.2rem 3.2rem color-mix(in oklab, var(--color-primary) 12%, transparent);
    opacity: 0;
    translate: 0 1.2rem;
    transition: opacity 0.28s ease, translate 0.28s ease;
  }

  .cookie-banner__card[hidden] {
    display: none;
  }

  cookie-banner[data-visible] .cookie-banner__card {
    opacity: 1;
    translate: 0 0;
  }

  cookie-banner[data-position='left'] .cookie-banner__card {
    inset-inline-start: var(--page-margin);
  }

  cookie-banner[data-position='right'] .cookie-banner__card {
    inset-inline-end: var(--page-margin);
  }

  cookie-banner[data-position='center'] .cookie-banner__card {
    inset-inline: 0;
    margin-inline: auto;
  }

  .cookie-banner__body {
    display: grid;
    gap: var(--spacing-08);
  }

  .cookie-banner__title {
    margin: 0;
    font-family: var(--font-body-family);
    font-size: var(--body-large-size);
    font-weight: var(--body-bold-weight, 700);
    line-height: var(--line-normal);
    font-style: normal;
  }

  .cookie-banner__text {
    margin: 0;
    font-size: var(--body-small-size);
    line-height: var(--line-normal);
    text-wrap: pretty;
  }

  .cookie-banner__policy {
    color: inherit;
    margin-inline-start: 0.4em;
    text-underline-offset: 0.3rem;
  }

  /* `align-items: center` is what keeps the link from being stretched to the
     5.5rem height of the real buttons next to it — a grid item defaults to
     `stretch`, and `.button-link` has no height of its own to resist it. */
  .cookie-banner__actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: var(--spacing-10);
  }

  .cookie-banner__customize {
    justify-self: start;
    font-size: var(--body-small-size);
    color: inherit;
  }

  /* Colonne 2 laissée vide : le refus repart en 3, l'acceptation suit en 4. */
  .cookie-banner__customize + .cookie-banner__action {
    grid-column: 3;
  }

  @media screen and (max-width: 749px) {
    .cookie-banner__card {
      inset-inline: var(--page-margin);
      inline-size: auto;
      padding: var(--spacing-20);
    }

    cookie-banner[data-position='center'] .cookie-banner__card {
      margin-inline: 0;
    }

    /* Three columns inside a full-width card leave the two CTA labels wrapping
       onto two lines, so the link takes its own row here. */
    .cookie-banner__actions {
      grid-template-columns: 1fr 1fr;
    }

    .cookie-banner__customize {
      grid-column: 1 / -1;
      grid-row: 2;
      justify-self: center;
    }

    .cookie-banner__customize + .cookie-banner__action {
      grid-column: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cookie-banner__card {
      transition: none;
    }
  }

  /* Preferences dialog. The size overrides are written as `dialog.cookie-preferences`
     so they beat `.dialog-shell` whatever order the async dialog stylesheet and the
     section bundle happen to load in. */
  dialog.cookie-preferences {
    /* `* { margin: 0 }` in base.css kills the UA's `margin: auto`, which is what
       centers a modal dialog — the drawer shells and the localization dialog
       re-declare their own margins for the same reason. */
    margin: auto;
    inline-size: min(56rem, calc(100vw - (var(--page-margin) * 2)));
    max-block-size: min(72rem, calc(100dvh - (var(--page-margin) * 2)));
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  /* `display: grid` above is an author rule, and author rules beat the UA's
     `dialog:not([open]) { display: none }` — without this the closed dialog
     paints in the page flow on every page of the store. */
  dialog.cookie-preferences:not([open]) {
    display: none;
  }

  .cookie-preferences__layout {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-block-size: 0;
    padding: var(--spacing-22);
    gap: var(--spacing-15);
  }

  .cookie-preferences__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-20);
  }

  .cookie-preferences__title {
    margin: 0;
  }

  .cookie-preferences__close {
    color: inherit;
    place-items: center;
  }

  .cookie-preferences__intro {
    margin: 0;
    font-size: var(--body-small-size);
    line-height: var(--line-normal);
    color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
    text-wrap: pretty;
  }

  /* `min-height: 0` on the `1fr` row is what makes it scroll instead of growing
     past the dialog, and the mask is the shared scroll hint DialogComponent
     publishes on the component. */
  .cookie-preferences__list {
    margin: 0;
    padding: 0;
    list-style: none;
    min-block-size: 0;
    overflow-y: auto;
    mask-image: var(--dialog-scroll-mask, none);
  }

  .cookie-preferences__footer {
    display: grid;
    gap: var(--spacing-15);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--spacing-20);
  }

  .cookie-preferences__policy {
    justify-self: start;
    font-size: var(--body-small-size);
    color: inherit;
  }

  .cookie-preferences__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-10);
  }

  @media screen and (max-width: 749px) {
    .cookie-preferences__actions {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:cookie-banner */

/* START_SECTION:faq (INDEX:10) */
.faq__inner {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 90rem;
  }

  .faq__title {
    color: var(--color-foreground);
    margin-block-end: 3rem;
    text-wrap: pretty;
  }

  .faq__empty {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .faq__title {
      margin-block-end: 4rem;
    }
  }
/* END_SECTION:faq */

/* START_SECTION:footer-policies (INDEX:11) */
.footer-policies {
    padding-block: var(--section-padding-block-start-mobile) var(--section-padding-block-end-mobile);
    --gap-col: 3.4rem;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background-color: color-mix(in oklab, var(--color-foreground) 20%, transparent);
      width: 100%;
      height: 1px;
    }
  }

  .footer-policies__inner {
    display: grid;
    gap: 2rem;
    place-items: center;
  }


  .footer-policies__copyright {
    margin: 0;
    font-size: var(--legal-size);
    text-transform: uppercase;
    font-weight: 500;

    & a {
      color: inherit;
      text-decoration: none;
       &:hover {
        text-decoration: underline;
      }
    }
  }

  .footer-policies__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-col);
    align-items: center;
    @media screen and (max-width: 1199px) {
      justify-content: center;
      --gap-col: 2.1rem;
    }
  }


  .footer-policies__nav-list {
    display: flex;
    gap: var(--gap-col);
    list-style: none;
    margin: 0;
    padding: 0;

    @media screen and (max-width: 749px) {
      flex-wrap: wrap;
      justify-content: center;
    }
  }

  .footer-policies__nav-item {
    min-width: 0;
  }

  .footer-policies__nav-link--button {
    color: inherit;
    font-family: inherit;
    letter-spacing: inherit;
    line-height: inherit;
  }

  .footer-policies__nav-link {
    position: relative;
    text-decoration: none;
    transition: color 0.1s ease-in-out;
    font-size: var(--legal-size);
    text-transform: uppercase;
    font-weight: 500;

     &:hover,
     &:focus-visible {
      color: color-mix(in oklab, var(--color-accent) 100%, transparent);
    }
  }

  .footer-policies__localization {
  @media screen and (max-width: 749px) {
    display: none;
  }
}

.footer-policies__localization-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0;
  text-align: start;
  font-weight: 500;
}

.footer-policies__localization-trigger-value {
  align-items: center;
  display: inline-flex;
  font-size: var(--legal-size);
  font-weight: 700;
  line-height: 1.2;
}

.footer-policies__localization-icon {
  block-size: 1.2rem;
  flex-shrink: 0;
  inline-size: 0.4rem;
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}

.footer-policies__localization-trigger[aria-expanded='true'] .footer-policies__localization-icon {
  transform: rotate(180deg);
}

.footer-policies__payments {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-policies__payment-item {
  align-items: center;
  display: inline-flex;
}

.footer-policies__payment-item svg {
  block-size: 2rem;
  inline-size: auto;
}

@media screen and (max-width: 749px) {}

@media screen and (min-width: 1200px) {
  .footer-policies {
    padding-block: var(--section-padding-block-start-desktop) var(--section-padding-block-end-desktop);
  }

  .footer-policies__inner {
    align-items: center;
    column-gap: var(--gap-col);
    grid-template-columns: minmax(0, 1fr) minmax(20rem, auto) auto;
  }

  .footer-policies__nav {
    justify-self: center;
    width: 100%;
  }


}

@media (prefers-reduced-motion: reduce) {
  .footer-policies__localization-icon,
  .footer-policies__nav-link {
    transition: none;
  }
}
/* END_SECTION:footer-policies */

/* START_SECTION:footer (INDEX:12) */
.footer-section {
    padding-block: var(--section-padding-block-start-mobile) var(--section-padding-block-end-mobile);
  }

  .footer-section__inner {
    display: grid;
    grid-gap: 5.6rem;
    min-width: 0;

    @media screen and (max-width: 1199px) {
      --footer-column-gap-desktop: 4.8rem;
      --footer-menu-gap-desktop: 4.8rem;
    }
  }

  .footer-section__newsletter-column {
    max-width: 62rem;
  }

  .footer-section__heading {
    margin: 0;
  }

  .footer-section__description {
    margin-top: 1.7rem;
    max-width: 57rem;
  }

  .footer-section__newsletter-form {
    margin-top: 2.3rem;
    max-width: 63.9rem;
  }

  .footer-section__newsletter-form .input__wrapper > .input {
    border-color: color-mix(in oklab, currentColor 72%, transparent);
    min-height: 5rem;
    border-radius: 0.4rem;
    padding-inline: 1.1rem 1.7rem;
  }

  .footer-section__newsletter-form .input::placeholder,
  .footer-section__newsletter-form .input--email {
    font-size: var(--body-size);
    line-height: normal;
  }

  .footer-section__newsletter-form .input__button {
    color: inherit;
    width: 7.2rem;
  }

  .footer-section__newsletter-form .input__button:hover {
    background: transparent;
    color: inherit;
  }

  .footer-section__newsletter-form .input__button svg {
    block-size: 1.5rem;
    inline-size: 1.2rem;
  }

  .footer-section__message {
    margin-top: 1.2rem;
  }

  .footer-section__social-list {
    align-items: center;
    display: flex;
    gap: 1.6rem;
    list-style: none;
    margin: 3.3rem 0 0;
    padding: 0;

    @media screen and (max-width: 1089px) {
      gap: 1.2rem;
      margin-block-start: 2.5rem;
    }
  }

  .footer-section__social-link {
    color: inherit;
    display: flex;
    transition: color 0.1s ease-in-out;

     &:hover {
      color: color-mix(in oklab, var(--color-accent) 100%, transparent);
    }
  }

  .footer-section__social-link svg {
    block-size: 3rem;
    inline-size: 3rem;

    @media screen and (max-width: 1089px) {
      block-size: 2.5rem;
      inline-size: 2.5rem;
    }
  }

  .footer-section__menus {
    display: grid;
    gap: 0;
  }


  @media screen and (max-width: 1089px) {
    .footer-section__menus > :not(:first-child) {
      border-top: 1px solid color-mix(in oklab, currentColor 65%, transparent);
    }
    .footer-section__menu-block:last-child {
      border-bottom: 1px solid color-mix(in oklab, currentColor 65%, transparent);
    }
  }


  .footer-section__menu-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 1.6rem;
    justify-content: space-between;
    list-style: none;
    padding-block: 2.45rem;

    @media screen and (max-width: 749px) {
      padding-block: 2.3rem;
    }
  }

  .footer-section__menu-summary::-webkit-details-marker {
    display: none;
  }

  .footer-section__menu-title {
    font-family: var(--font-body-family);
    font-size: var(--nav-size);
    font-style: normal;
    font-weight: 700;
    letter-spacing: var(--nav-letter-spacing);
    line-height: 1.15;
    text-transform: uppercase;
  }

  .footer-section__menu-icon {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
  }

  .footer-section__menu-icon svg {
    block-size: 1.2rem;
    inline-size: 0.9rem;
  }

  .footer-section__menu-block[open] .footer-section__menu-icon {
    transform: rotate(-90deg);
  }

  .footer-section__menu-block[open] .footer-section__menu-summary {
    padding-bottom: 2rem;
  }

  .footer-section__menu-block::details-content {
    block-size: 0;
    content-visibility: hidden;
    interpolate-size: allow-keywords;
    overflow: hidden;
    transition: block-size 0.25s ease
    , content-visibility 0.25s ease allow-discrete;
  }

  .footer-section__menu-block[open]::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .footer-section__menu-nav {
    padding-bottom: 2.3rem;

    @media screen and (max-width: 1089px) {
      padding-bottom: 3rem;
    }
  }

  .footer-section__menu-list {
    display: grid;
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-section__menu-list a {
    color: inherit;
    position: relative;
    text-decoration: none;
    transition: color 0.1s ease-in-out;

     &:hover {
      color: color-mix(in oklab, var(--color-accent) 100%, transparent);
    }
  }

  .footer-section__menu-list a::before {
    bottom: 0;
    content: '';
    height: 0.8rem;
    left: -1.5rem;
    margin-block: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateX(-10px) scale(0.8);
    transition: all 0.1s ease-in-out;
    visibility: hidden;
    width: 0.8rem;
    background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
  }

  .footer-section__menu-list a:hover::before,
  .footer-section__menu-list a:focus-visible::before {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
  }

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

.footer-section__localization-trigger {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  gap: 1.6rem;
  justify-content: space-between;
  min-height: 0;
  padding-block: 2.45rem;
  text-align: start;
  width: 100%;

  @media screen and (max-width: 749px) {
    padding-block: 2.3rem;
  }
}

.footer-section__localization-trigger-value {
  align-items: center;
  display: inline-flex;
  font-family: var(--font-body-family);
  font-size: var(--nav-size);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--nav-letter-spacing);
  line-height: 1.15;
  text-transform: uppercase;
}

.footer-section__localization-icon {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.footer-section__localization-icon svg {
  block-size: 1.2rem;
  inline-size: 0.9rem;
}

.footer-section__localization-trigger[aria-expanded='true'] .footer-section__localization-icon {
  transform: rotate(180deg);
}

@media screen and (min-width: 1090px) {
  .footer-section {
    padding-block: var(--section-padding-block-start-desktop) var(--section-padding-block-end-desktop);
  }

  .footer-section__inner {
    align-items: start;
    column-gap: var(--footer-column-gap-desktop);
    grid-template-columns: minmax(0, var(--footer-newsletter-width-desktop)) minmax(0, 1fr);
  }

  /* The columns top-align with each other, so a shorter menu keeps its title on the line of its
     neighbours'; the group as a whole is what centers against the newsletter column. */
  .footer-section__menus {
    align-items: flex-start;
    align-self: center;
    column-gap: var(--footer-menu-gap-desktop);
    display: flex;
    flex-wrap: nowrap;

    @media screen and (min-width: 1500px) {
      justify-content: flex-end;
      padding-right: 8rem;
      --footer-menu-gap-desktop: 14.3rem;
    }
  }


  .footer-section__menu-block {
    border: 0;
    flex: 0 1 18rem;
    min-width: 0;
  }

  .footer-section__menu-summary {
    cursor: default;
    pointer-events: none;
    padding: 0;
  }

  .footer-section__menu-icon {
    display: none;
  }

  .footer-section__menu-nav {
    padding-bottom: 0;
    padding-top: 2.3rem;
  }

  .footer-section__menu-block::details-content,
  .footer-section__menu-block[open]::details-content {
    block-size: auto;
    content-visibility: visible;
    overflow: visible;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-section__menu-icon,
  .footer-section__localization-icon,
  .footer-section__menu-block::details-content {
    transition: none;
  }
}
/* END_SECTION:footer */

/* START_SECTION:gift-card (INDEX:13) */
.gift-card {
    min-height: 100vh;
    padding-block: var(--spacing-50);
  }

  @media screen and (min-width: 750px) {
    .gift-card {
      display: grid;
      gap: var(--spacing-15);
      grid-template-areas: '. content . media';
      grid-template-columns: auto minmax(auto, 43rem) auto 45%;
      min-height: 0;
    }
  }

  .gift-card__media {
    display: none;
    grid-area: media;
  }

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

  .gift-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-22);
    grid-area: content;
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .gift-card__content {
      gap: var(--spacing-22);
      height: auto;
      padding-block: var(--spacing-15);
    }
  }

  .gift-card__logo {
    display: flex;
    justify-content: center;
  }

  .gift-card__logo svg {
    display: block;
    height: auto;
    max-height: 2.7rem;
    width: auto;
  }

  @media screen and (min-width: 750px) {
    .gift-card__logo svg {
      max-height: 4rem;
    }
  }

  .gift-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-22);
    justify-content: center;
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .gift-card__text {
      gap: var(--spacing-22);
    }
  }

  .gift-card__title {
    font-weight: 700;
    text-transform: uppercase;
  }

  .gift-card__remain {
    font-weight: 700;
    text-transform: uppercase;
  }

  .gift-card__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
  }

  .gift-card__code {
    align-items: center;
    background: linear-gradient(0deg, #e7e7e7 0%, #f3f3f3 100%);
    column-gap: var(--spacing-22);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--spacing-15);
    row-gap: var(--spacing-06);
  }

  .gift-card__code-text {
    font-family: var(--font-heading-family);
    font-weight: 500;
  }

  .gift-card__copy:not(.success):not(.error) {
    text-decoration: underline;
  }

  .gift-card__copy.success,
  .gift-card__copy.error {
    cursor: default;
  }

  .gift-card__buttons a {
    width: 100%;
  }

  .gift-card__wallet {
    display: flex;
    justify-content: center;
  }

  .gift-card__bottom {
    text-align: center;
  }
/* END_SECTION:gift-card */

/* START_SECTION:header (INDEX:14) */
.site-loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--spacing-20);
    background: var(--color-accent--off-white, #f6f4f1);
    opacity: 1;
    visibility: visible;
    transition: opacity 320ms ease, visibility 0s linear 320ms;
    /* Filet de securite : si le JS ne retire jamais le loader, il s'efface
       quand meme plutot que de masquer tout le site. Au-dela du `load` le plus
       lent qu'on accepte d'attendre derriere un ecran plein. */
    animation: site-loader-failsafe 0s linear 5s forwards;
  }

  @keyframes site-loader-failsafe {
    to {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
  }

  .site-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .site-loader__inner {
    display: grid;
    place-items: center;
    animation: site-loader-pulse 1400ms ease-in-out infinite;
  }

  @keyframes site-loader-pulse {
    0%,
    100% {
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }
  }

  .site-loader__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-loader {
      transition: none;
    }

    .site-loader__inner {
      animation: none;
    }
  }

  .header {
    /* Shared easing for every header open/close motion, so the overlay, the
       panels and their children all decelerate on the same curve. */
    --menu-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --menu-ease-out: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }

  .header__inner {
    position: relative;
    z-index: 6;
    align-items: center;
    display: grid;
    gap: var(--spacing-15);
    grid-template-areas: 'logo actions menu';
    grid-template-columns: 1fr auto auto;
    padding-block: var(--spacing-20);
  }

  @media screen and (min-width: 990px) {
    .header__inner {
      grid-template-areas: 'logo menu actions';
      grid-template-columns: 1fr auto 1fr;
    }
  }

  .header__menu {
    grid-area: menu;

    & .header__menu-list {
      display: flex;
      align-items: center;
      list-style: none;
      gap: var(--spacing-42);
      padding: 0;
    }

    & a,
    & button {
      all: unset;
      font-family: var(--family-primary);
      font-size: var(--nav-size);
      letter-spacing: var(--nav-letter-spacing);
      line-height: var(--nav-line-height);
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      font-weight: 700;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        opacity: 0;
        visibility: hidden;
        width: 0.8rem;
        height: 0.8rem;
        background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
        bottom: -0.9rem;
        left: 0;
        right: 0;
        margin-inline: auto;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
        transform: translateY(10px) scale(0.8);
      }

      &.item--active,
      &:hover {
        &::after {
          opacity: 1;
          visibility: visible;
          transform: translateY(0) scale(1);
          /* No delay on the way in, or the first half of the fade is invisible */
          transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear;
        }
      }
    }
  }

  .header__logo {
    grid-area: logo;
    width: auto;
    display: flex;

    @media screen and (max-width: 989px) {
      & svg {
        max-width: 13.2rem;
      }
    }
  }

  .header__logo-link,
  .header__logo-static {
    position: relative;
    display: flex;
  }

  /* The player draws the animation's whole 758x220 canvas, sized and offset so its
     wordmark box (104 50.2 505.6 117.1) lands exactly on the static logo. The seal is
     taller than the wordmark, and Safari clips an svg to its own box whatever its
     `overflow`, so the svg itself has to be big enough to hold it. */
  .header__logo-player {
    position: absolute;
    top: 0;
    left: calc(-104 / 505.6 * 100%);
    width: calc(758 / 505.6 * 100%);
    /* A vertical margin resolves against the width, so the offset scales with the
       logo exactly — the link's height rounds to whole pixels and would not. */
    margin-top: calc(-50.2 / 505.6 * 100%);
    display: none;
    pointer-events: none;

    & svg {
      display: block;
      width: 100%;
    }

    /* Lottie bakes its fill in as an attribute; the logo follows the header color. */
    & path {
      fill: currentColor;
    }
  }

  /* Desktop, set by header-logo.js: the slot keeps the wordmark's size in the
     grid while the link floats above the page. */
  .header__logo[data-floating] {
    width: 14.1rem;
    aspect-ratio: 141 / 33;
    transition: color 220ms ease-out;

    & .header__logo-link {
      position: fixed;
      top: var(--header-logo-top, 0);
      left: var(--header-logo-left, 0);
      width: 14.1rem;
    }
  }

  .header__logo[data-floating][data-animation-ready] {
    & .header__logo-static {
      visibility: hidden;
    }

    & .header__logo-player {
      display: block;
    }
  }

  /* Detached from the header, the logo is always the brand green — the hero's
     white would vanish on the first light section. */
  sticky-header:not(.at-top) .header__logo[data-floating] {
    color: var(--color-accent--dark-green);
  }

  /* The seal is round but the link is still the wordmark's box: only the
     painted shape takes clicks, so the page under the empty corners stays usable. */
  .header__logo[data-floating][data-logo-state='seal'] .header__logo-link {
    pointer-events: none;

    & path {
      pointer-events: auto;
    }
  }

  .header__actions {
    align-items: center;
    display: flex;
    gap: var(--spacing-15);
    grid-area: actions;
  }

  @media screen and (min-width: 990px) {
    .header__actions {
      justify-content: flex-end;
      gap: var(--spacing-20);
    }
  }

  .header__actions .header-action-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    text-decoration: none;
  }

  .header__actions .header-action-link svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
  }

  @media screen and (max-width: 989px) {
    .header__actions .header-action-link.--hide-mobile {
      display: none;
    }
  }

  .header__actions .cart-trigger [data-cart-count] {
    position: absolute;
    top: -0.8rem;
    right: -0.8rem;
    transform: none;
    display: grid;
    place-items: center;
    display: flex;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    color: var(--color-background);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background-image: url("data:image/svg+xml, %3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88766 0.0674454C6.7095 -0.152087 7.5483 0.179965 8.01239 0.835959C8.47844 0.182892 9.31719 -0.146272 10.1374 0.0752119C10.9586 0.296703 11.5186 1.00408 11.5917 1.80446C12.3232 1.46947 13.2173 1.60445 13.8176 2.20841C14.416 2.81042 14.5468 3.70092 14.2115 4.42944C15.0096 4.50653 15.7134 5.06756 15.9326 5.88779C16.1521 6.70955 15.8201 7.54816 15.1643 8.0123C15.8172 8.47838 16.1463 9.31711 15.9248 10.1373C15.7033 10.9585 14.9956 11.5186 14.1955 11.5917C14.5305 12.3232 14.3956 13.2172 13.7916 13.8176C13.1897 14.416 12.2992 14.5467 11.5707 14.2114C11.4936 15.0096 10.9326 15.7133 10.1124 15.9326C9.29051 16.1521 8.45171 15.82 7.98762 15.164C7.52157 15.8171 6.68282 16.1459 5.8626 15.9248C5.0411 15.7033 4.48136 14.9956 4.40817 14.1955C3.67676 14.5305 2.78273 14.3955 2.18238 13.7916C1.58397 13.1896 1.45321 12.2991 1.78852 11.5706C0.990416 11.4935 0.286646 10.9324 0.0674439 10.1122C-0.152083 9.29035 0.179961 8.45153 0.83594 7.98743C0.182898 7.52137 -0.145941 6.68259 0.0752102 5.86236C0.296694 5.04118 1.00439 4.48146 1.80442 4.40827C1.46946 3.67684 1.60445 2.7828 2.20836 2.18243C2.81035 1.584 3.70084 1.45324 4.42934 1.78856C4.50642 0.99044 5.06745 0.286656 5.88766 0.0674454Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
  }

  .mega-menu-pad__media::before,
  .mobile-menu-pad__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent);
    transform: translateX(-100%);
    animation: menu-pad-shimmer 1.4s ease-in-out infinite;
  }

  .mega-menu-pad__asset,
  .mobile-menu-pad__asset {
    position: relative;
    background-color: transparent;
  }

  @keyframes menu-pad-shimmer {
    to {
      transform: translateX(100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mega-menu-pad__media::before,
    .mobile-menu-pad__media::before {
      animation: none;
    }
  }

  /*
   ==============================
   Mega menu — desktop only
   ==============================
*/

  .mega-menu {
    display: none;
  }

  .edito-menu {
    display: none;
  }

  .header__overlay {
    display: none;
  }

  @media screen and (min-width: 990px) {
    /* Stands in for ::backdrop: both desktop menus use a non-modal dialog.show() */
    .header__overlay {
      display: block;
      position: fixed;
      inset-block: var(--header-height, 0px) 0;
      inset-inline: 0;
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      /* Same tint as `dialog::backdrop` (component-dialog.css), which it stands in for */
      background: color-mix(in oklab, var(--color-primary) 33%, transparent);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      transition: opacity 160ms var(--menu-ease-out, ease-in), visibility 0s linear 160ms;
      /* Keeps the blurred backdrop on its own cached layer instead of forcing a
         full-viewport re-blur on every frame of the opacity fade. */
      will-change: opacity;
    }

    /* At the top of the page the announcement bar is still visible above the header */
    sticky-header.at-top .header__overlay {
      inset-block-start: var(--header-group-height, 0px);
    }

    /* Fades in with the panel, and out as soon as the panel starts closing */
    .header:has(.mega-menu[open]:not(.dialog-closing)) .header__overlay,
    .header:has(.edito-menu[open]:not(.dialog-closing)) .header__overlay {
      opacity: 1;
      visibility: visible;
      transition: opacity 220ms var(--menu-ease, ease-out), visibility 0s linear;
    }

    @media (prefers-reduced-motion: reduce) {
      .header__overlay,
      .header:has(.mega-menu[open]:not(.dialog-closing)) .header__overlay,
      .header:has(.edito-menu[open]:not(.dialog-closing)) .header__overlay {
        transition: none;
      }
    }

    .mega-menu {
      all: unset;
      display: none;
      position: absolute;
      inset-inline: 0;
      top: 100%;
      /* The page is scroll-locked while a menu is open, so a menu taller than a
         short window scrolls on its own instead of being cut off. */
      max-height: calc(100dvh - var(--header-group-height, 0px));
      background: var(--color-background);
      color: var(--color-foreground);
      z-index: 10;
      overflow: hidden auto;
      overscroll-behavior: contain;
    }

    .mega-menu[open] {
      display: block;
      animation: mega-menu-in 220ms var(--menu-ease, ease-out) both;
      box-shadow: 3px 7px 7px rgba(0, 0, 0, 0.1);
    }

    .mega-menu.dialog-closing {
      animation: mega-menu-out 160ms var(--menu-ease-out, ease-in) both;
    }

    /*
      Opacity plus a short translate: the panel is absolutely positioned, so a
      pure fade pops in at full height and reads as a cut. Both properties are
      compositor-only, so the slide costs nothing on top of the fade.
    */
    @keyframes mega-menu-in {
      from {
        opacity: 0;
        translate: 0 -0.8rem;
      }
      to {
        opacity: 1;
        translate: 0 0;
      }
    }

    @keyframes mega-menu-out {
      from {
        opacity: 1;
        translate: 0 0;
      }
      to {
        opacity: 0;
        translate: 0 -0.6rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mega-menu[open] {
        animation: none;
      }
      .mega-menu.dialog-closing {
        animation: none;
      }
    }

    .mega-menu__inner {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: var(--spacing-15);
      padding-inline: var(--page-margin);
      padding-block: var(--spacing-15);
      max-width: var(--page-width);
      margin-inline: auto;
    }

    /* Col 1 — nav list */
    .mega-menu__col--nav {
      min-width: 18rem;
      display: flex;
    }

    .mega-menu__nav-list {
      display: grid;
      gap: var(--spacing-12);
      align-content: flex-start;
      list-style: none;
      margin: 0;
      padding: 0;
      padding-block-start: 9rem;
    }

    .mega-menu__nav-button {
      all: unset;
      cursor: pointer;
      display: block;
      width: 100%;
      font-family: var(--font-heading-family);
      /* 4.5rem only fits from ~1400px; below that the four columns squeeze it into the links. */
      font-size: clamp(3rem, 3.2vw, var(--nav-title-size));
      letter-spacing: var(--nav-letter-spacing);
      line-height: normal;
      color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
      transition: color 0.2s ease-in-out;
    }

    .mega-menu__nav-button:hover,
    .mega-menu__nav-button:focus-visible,
    .mega-menu__nav-button[aria-expanded='true'] {
      color: var(--color-foreground);
    }

    .mega-menu__nav-button:focus-visible {
      outline: var(--focus-ring, 2px solid currentColor);
      outline-offset: 2px;
    }

    /* Col 2 — linklist */
    .mega-menu__panel {
      display: contents;
    }

    .mega-menu__panel[hidden] {
      display: none;
    }

    .mega-menu__links {
      align-content: flex-start;
      padding-block-start: 9rem;
    }

    .mega-menu__links-list {
      display: grid;
      gap: 0;
      list-style: none;
      margin: 0;
      padding: 0;
      align-content: flex-start;
    }

    .mega-menu__links-link {
      color: var(--color-foreground);
      font-family: var(--family-primary);
      font-size: var(--nav-sub-size);
      line-height: var(--nav-sub-line-height);
      font-weight: 500;
      text-decoration: none;
      transition: color 0.2s ease-in-out;
    }

    .mega-menu__links-link:hover {
      color: var(--color-accent);
    }

    /* Col 3–4 — pads */
    .mega-menu__pad {
      position: relative;
    }

    .mega-menu-pad {
      display: grid;
      grid-gap: var(--spacing-15);
      text-decoration: none;
      color: inherit;
      position: relative;
      overflow: hidden;
    }

    .mega-menu-pad__media {
      height: 100%;
      overflow: hidden;
      width: 100%;
      display: flex;
      background-color: var(--color-media-placeholder);
      position: relative;
      border-radius: var(--media-radius);
    }

    .mega-menu-pad__title {
      display: inline-flex;
      justify-content: center;
      font-size: var(--card-title-size);
      font-weight: var(--card-title-weight);
      letter-spacing: 0;
      position: relative;

      & span {
        position: relative;
      }

      & span::before {
        content: '';
        position: absolute;
        opacity: 0;
        visibility: hidden;
        width: 0.8rem;
        height: 0.8rem;
        background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
        bottom: 0;
        top: 0;
        left: -2rem;
        margin-block: auto;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 0.3s;
        transform: translateX(-10px) scale(0.8);
      }
    }

    .mega-menu-pad__asset {
      display: block;
      height: 100%;
      object-fit: cover;
      width: 100%;
      transition: transform 0.2s ease-in-out;
    }

    .mega-menu-pad {
      &:hover {
        & .mega-menu-pad__asset {
          transform: scale(1.012);
          /* Scoped to hover: a standing `will-change` here promoted every pad
             image in every panel to its own layer for the whole page life. */
          will-change: transform;
        }

        & .mega-menu-pad__title span::before {
          opacity: 1;
          visibility: visible;
          transform: translateX(0) scale(1);
          /* No delay on the way in, or the first half of the fade is invisible */
          transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear;
        }
      }
    }

    .mega-menu-pad--placeholder {
      min-height: 12rem;
      background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
      display: flex;
      align-items: flex-end;
      padding: var(--spacing-12);
    }

    /* Panel enter animation */
    @keyframes mega-panel-item-enter {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    /*
      The wave: links, then pad 1, then pad 2. Two modes, set by
      header-menu-dialog.js, and the difference is only how much room the wave
      has to breathe.

      - `open`: the panel revealed together with the dialog. The shell is running
        its own 220ms fade underneath, so the wave is tightened to land close to
        it — a long stagger here makes the menu settle in two visible phases.
      - `switch`: a hover or click switch inside an already-open menu. The wave is
        the whole animation, nothing else is moving, so it gets the full spread.

      Do not shorten this into a flat fade to calm down a fast pointer sweep
      across the nav list. The flicker that looks like it comes from restarting
      the wave came from the truncation bug in `#openMegaItem` instead: an
      `animationend` listener fired by the first child cleared `data-entering`
      while children 2 and 3 were still inside their delay, snapping them from
      `opacity: 0` to their end state mid-wave.
    */
    .mega-menu__panel[data-entering] > * {
      animation: mega-panel-item-enter 300ms var(--menu-ease, ease-out) both;
    }

    .mega-menu__panel[data-entering='switch'] > *:nth-child(2) {
      animation-delay: 80ms;
    }

    .mega-menu__panel[data-entering='switch'] > *:nth-child(3) {
      animation-delay: 160ms;
    }

    .mega-menu__panel[data-entering='open'] > * {
      animation-duration: 240ms;
    }

    .mega-menu__panel[data-entering='open'] > *:nth-child(2) {
      animation-delay: 60ms;
    }

    .mega-menu__panel[data-entering='open'] > *:nth-child(3) {
      animation-delay: 120ms;
    }

    /*
      The leave, on a switch only. Without it the outgoing panel went straight to
      `hidden`, so the links column read as a hard text swap and the wave arrived
      onto an empty grid. Kept flat and much shorter than the enter: the two
      panels cannot overlap (see `#openMegaItem`), so this delays the new content
      by its full duration and any more would feel like the menu hesitating.

      Declared after the enter rules on purpose — a panel switched away from
      while still entering carries both attributes, and the leave has to win.
    */
    @keyframes mega-panel-item-leave {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

    .mega-menu__panel[data-leaving] > * {
      animation: mega-panel-item-leave 120ms var(--menu-ease-out, ease-in) both;
    }

    @media (prefers-reduced-motion: reduce) {
      .mega-menu__panel[data-entering] > *,
      .mega-menu__panel[data-leaving] > * {
        animation: none;
      }
    }

    /* Design mode helpers */
    .mega-menu__empty,
    .mega-menu__placeholder,
    .mega-menu__nav-placeholder {
      font-family: var(--family-primary);
      font-size: var(--nav-sub-size, 1.6rem);
      color: color-mix(in oklab, var(--color-foreground) 45%, transparent);
      padding-block: var(--spacing-08);
    }

    /*
   ==============================
   Editorial menu — desktop only
   ==============================
*/

    .edito-menu {
      all: unset;
      display: none;
      position: absolute;
      inset-inline: 0;
      top: 100%;
      /* The page is scroll-locked while a menu is open, so a menu taller than a
         short window scrolls on its own instead of being cut off. */
      max-height: calc(100dvh - var(--header-group-height, 0px));
      background: var(--color-background);
      color: var(--color-foreground);
      z-index: 10;
      overflow: hidden auto;
      overscroll-behavior: contain;
    }

    .edito-menu[open] {
      display: block;
      animation: mega-menu-in 220ms ease-out both;
      box-shadow: 3px 7px 7px rgba(0, 0, 0, 0.1);
    }

    .edito-menu.dialog-closing {
      animation: mega-menu-out 180ms ease-in both;
    }

    @media (prefers-reduced-motion: reduce) {
      .edito-menu[open],
      .edito-menu.dialog-closing {
        animation: none;
      }
    }

    .edito-menu__inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--product-card-gap);
      padding-inline: var(--page-margin);
      padding-block: var(--spacing-15);
      max-width: var(--page-width);
      margin-inline: auto;
    }

    .edito-menu__pad {
      position: relative;
    }

    .edito-menu__chips {
      padding-inline: var(--page-margin);
      padding-block: var(--spacing-20);
      max-width: var(--page-width);
      margin-inline: auto;
    }
  }

  /*
   ==============================
   Mobile header
   ==============================
*/

  @media screen and (min-width: 990px) {
    .header__actions .header__burger {
      display: none;
    }
  }

  @media screen and (max-width: 989px) {
    .header__inner {
      grid-template-areas: 'logo actions';
      grid-template-columns: 1fr auto;
    }

    .header__menu {
      display: none;
    }

    .header__burger svg {
      width: 22px;
      height: 18px;
      flex-shrink: 0;
      display: block;
    }

    /*
   ==============================
   Mobile menu dialog
   ==============================
*/

    .mobile-menu {
      border: none;
      padding: 0;
      margin: 0;
      max-width: 100vw;
      max-height: 100vh;
      width: 100vw;
      min-height: 100vh;
      height: 100vh;
      inset-block: 0;
      inset-inline: auto 0;
      background: var(--color-background);
      color: var(--color-foreground);
      overflow: hidden;
    }

    .mobile-menu::backdrop {
      background: color-mix(in oklab, var(--color-primary) 80%, transparent);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }

    .mobile-menu[open] {
      display: flex;
      flex-direction: column;
    }

    .mobile-menu.dialog-opening {
      animation: mobile-menu-slide-in 300ms ease-out both;
    }

    .mobile-menu.dialog-closing {
      animation: mobile-menu-slide-out 250ms ease-in both;
    }

    .mobile-menu.dialog-opening::backdrop {
      animation: mobile-menu-backdrop-in 300ms ease-out both;
    }

    .mobile-menu.dialog-closing::backdrop {
      animation: mobile-menu-backdrop-out 250ms ease-in both;
    }

    @keyframes mobile-menu-slide-in {
      from {
        translate: 100% 0;
      }
      to {
        translate: 0 0;
      }
    }

    @keyframes mobile-menu-slide-out {
      from {
        translate: 0 0;
      }
      to {
        translate: 100% 0;
      }
    }

    @keyframes mobile-menu-backdrop-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes mobile-menu-backdrop-out {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mobile-menu.dialog-opening,
      .mobile-menu.dialog-closing {
        animation: none;
      }

      .mobile-menu__layer {
        transition: none;
      }
    }

    /* ---- Body (layers container) ---- */

    .mobile-menu__body {
      flex: 1;
      min-height: 0;
      position: relative;
      overflow: hidden;
    }

    .mobile-menu__layer {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      background: var(--color-background);
      transition: translate 150ms ease-out;
    }

    .mobile-menu__layer--shop,
    .mobile-menu__layer--edito {
      translate: 100% 0;
    }

    .mobile-menu__layer--shop.is-open,
    .mobile-menu__layer--edito.is-open {
      translate: 0 0;
    }

    /* ---- Persistent header (logo + close) ---- */

    .mobile-menu__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-20);
      flex-shrink: 0;
    }

    .mobile-menu__logo a {
      display: flex;
      line-height: 1;
    }

    .mobile-menu__logo svg {
      width: auto;
      height: 3.2rem;
    }

    /* ---- Sub-layer header (back + title + dot) ---- */

    .mobile-menu__layer-header {
      display: flex;
      align-items: center;
      gap: var(--spacing-15);
      padding: var(--spacing-12) var(--spacing-20) var(--spacing-15);
      flex-shrink: 0;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: var(--spacing-20);
        bottom: 0;
        background-color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
        width: calc(100% - var(--spacing-42));
        height: 1px;
      }
    }

    .mobile-menu__back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      color: inherit;
      cursor: pointer;
    }

    .mobile-menu__back svg {
      width: 8px;
      height: 12px;
      transform: rotate(180deg);
      display: block;
    }

    .mobile-menu__layer-title {
      font-family: var(--family-primary);
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1;
      text-transform: uppercase;
    }

    .mobile-menu__layer-dot {
      background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
      width: 0.8rem;
      height: 0.8rem;
      align-self: flex-start;
      margin-left: -1rem;
    }

    /* ---- Main nav items ---- */

    .mobile-menu__nav {
      padding: 5rem 0 var(--spacing-20);
      flex: 1;
    }

    .mobile-menu__nav-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 3.8rem;
    }

    .mobile-menu__nav-item {
      display: flex;
    }

    .mobile-menu__nav-button {
      all: unset;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: var(--spacing-20);
      width: 100%;
      font-family: var(--family-primary);
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: var(--nav-letter-spacing);
      line-height: var(--nav-line-height);
      text-transform: uppercase;
      cursor: pointer;
    }

    .mobile-menu__nav-link {
      display: flex;
      align-items: center;
      padding-inline: var(--spacing-20);
      width: 100%;
      font-family: var(--family-primary);
      font-size: 1.4rem;
      font-weight: 700;
      letter-spacing: var(--nav-letter-spacing);
      line-height: var(--nav-line-height);
      text-transform: uppercase;
      text-decoration: none;
      color: inherit;
    }

    .mobile-menu__nav-button svg {
      width: 0.8rem;
      height: 1rem;
      flex-shrink: 0;
      color: var(--color-foreground);
    }

    /* ---- Bottom links ---- */

    .mobile-menu__bottom {
      padding: var(--spacing-20) var(--spacing-20) 8.6rem;
      margin-top: auto;
      flex-shrink: 0;
    }

    .mobile-menu__bottom-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-12);
    }

    .mobile-menu__bottom-link {
      font-family: var(--family-primary);
      font-size: 1.6rem;
      font-weight: 500;
      line-height: 1.4;
      text-decoration: none;
      color: var(--color-foreground);
    }

    /* ---- Sub-layer body ---- */

    .mobile-menu__layer-body {
      flex: 1;
      min-height: 0;
      padding: 3rem var(--spacing-20);
      overflow-y: auto;
    }

    /* ---- Shop layer nav ---- */

    .mobile-menu__shop-nav {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .mobile-menu__shop-item {
      display: block;
    }

    .mobile-menu__shop-nav-button {
      all: unset;
      display: block;
      width: 100%;
      font-family: var(--font-heading-family);
      font-size: 3rem;
      font-style: italic;
      font-weight: 500;
      line-height: 1.2;
      color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
      cursor: pointer;
      padding-block: var(--spacing-10);
      transition: color 0.2s ease-in-out;
    }

    .mobile-menu__shop-nav-button[aria-expanded='true'] {
      color: var(--color-foreground);
    }

    .mobile-menu__shop-nav-link {
      display: block;
      width: 100%;
      font-family: var(--font-heading-family);
      font-size: 2.8rem;
      font-style: italic;
      font-weight: 500;
      line-height: 1.2;
      color: color-mix(in oklab, var(--color-foreground) 30%, transparent);
      text-decoration: none;
      padding-block: var(--spacing-08);
      transition: color 0.2s ease-in-out;
    }

    .mobile-menu__shop-nav-link:hover,
    .mobile-menu__shop-nav-link:focus-visible {
      color: var(--color-foreground);
    }

    /* ---- Shop panel (links + pads) ---- */

    .mobile-menu__shop-panel[hidden] {
      display: none;
    }

    .mobile-menu__shop-pads[hidden] {
      display: none;
    }

    .mobile-menu__shop-links {
      list-style: none;
      margin: 0;
      padding: 0;
      padding-block: 0 var(--spacing-15);
      display: flex;
      flex-direction: column;
    }

    .mobile-menu__shop-link {
      display: block;
      font-family: var(--family-primary);
      font-size: 1.6rem;
      font-weight: 500;
      color: var(--color-foreground);
      text-decoration: none;
      padding-block: var(--spacing-08);
      line-height: 1.4;
    }

    .mobile-menu__shop-pads {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-15);
      padding-block-start: 3.7rem;
      padding-block-end: 6.4rem;
    }

    /* ---- Edito grid ---- */

    .mobile-menu__edito-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-15);
    }

    /* ---- Root layer pads ---- */

    .mobile-menu__root-pads {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-15);
      padding-block: var(--spacing-20);
      padding-block-end: 5rem;
      padding-inline: var(--spacing-20);
    }

    /* ---- Shared pad component (mobile) ---- */

    .mobile-menu-pad {
      display: grid;
      gap: var(--spacing-08);
      text-decoration: none;
      color: inherit;
    }

    .mobile-menu-pad__media {
      width: 100%;
      overflow: hidden;
      background-color: var(--color-media-placeholder);
      position: relative;
      border-radius: var(--media-radius);
      display: flex;
    }

    .mobile-menu-pad__asset {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mobile-menu-pad__title {
      margin: 0;
      font-family: var(--family-primary);
      font-size: 1.6rem;
      font-weight: 700;
      text-align: center;
      color: var(--color-foreground);
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:15) */
.hero {
    width: 100%;
  }

  .hero__panels {
    display: grid;
    width: 100%;
  }

  .hero--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__panels > * {
    min-width: 0;
  }

  @media screen and (max-width: 749px) {
    .hero--split {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .hero[data-hero-overlay] {
    margin-block-start: calc(-1 * var(--header-height, 0px));
  }
/* END_SECTION:hero */

/* START_SECTION:highlights (INDEX:16) */
.highlights__inner {
    width: min(calc(100vw - (var(--page-margin) * 2)), var(--content-max-width));
    margin-inline: auto;
  }

  .highlights__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 2.7rem;
    align-items: center;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    list-style: none;
    inline-size: calc(100% + var(--page-margin) * 2);
    margin: 0;
    margin-inline: calc(var(--page-margin) * -1);
    padding: 0;
    padding-inline: var(--page-margin);
    scroll-padding-inline: var(--page-margin);
    scroll-snap-type: inline mandatory;
  }

  .highlights__list::-webkit-scrollbar {
    display: none;
  }

  .highlights__item {
    min-width: 0;
    scroll-snap-align: start;
  }

  .highlights__text {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-foreground);
    font-weight: 500;
    white-space: nowrap;
  }

  .highlights__text::before {
    content: '';
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0394 0.12646C12.5803 -0.285162 14.1531 0.337434 15.0232 1.56742C15.8971 0.342922 17.4697 -0.274259 19.0076 0.141022C20.5473 0.556318 21.5973 1.88265 21.7345 3.38336C23.106 2.75526 24.7824 3.00835 25.9081 4.14077C27.0301 5.26953 27.2753 6.93923 26.6465 8.30521C28.143 8.44975 29.4626 9.50168 29.8736 11.0396C30.2851 12.5804 29.6626 14.1528 28.433 15.0231C29.6572 15.897 30.2742 17.4696 29.859 19.0074C29.4437 20.5471 28.1167 21.5973 26.6166 21.7345C27.2446 23.1059 26.9917 24.7822 25.8593 25.9079C24.7306 27.03 23.0609 27.2752 21.695 26.6465C21.5505 28.1429 20.4985 29.4625 18.9607 29.8735C17.4197 30.2852 15.847 29.6626 14.9768 28.4326C14.1029 29.6571 12.5303 30.2736 10.9924 29.859C9.45206 29.4437 8.40255 28.1167 8.26532 26.6166C6.89392 27.2447 5.21763 26.9916 4.09196 25.8592C2.96994 24.7305 2.72477 23.0608 3.35347 21.6948C1.85703 21.5503 0.537462 20.4983 0.126457 18.9604C-0.285156 17.4194 0.337427 15.8466 1.56739 14.9764C0.342934 14.1026 -0.27364 12.5299 0.141019 10.9919C0.556301 9.45221 1.88323 8.40274 3.38329 8.26551C2.75523 6.89408 3.00834 5.21775 4.14068 4.09206C5.26941 2.97 6.93908 2.72483 8.30502 3.35354C8.44954 1.85708 9.50146 0.537479 11.0394 0.12646Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: contain;
  }

  @media screen and (min-width: 750px) {
    .highlights__list {
      grid-template-columns: repeat(4, max-content);
      justify-content: center;
      gap: 11.5rem;
      inline-size: 100%;
      margin-inline: 0;
      padding-inline: 0;
    }
  }
/* END_SECTION:highlights */

/* START_SECTION:interactive-banner (INDEX:17) */
/*
   * Figma: 1440×796 frame, copy in `--crème` over the media, tab labels in Instrument Serif
   * italic 45/52 — which is the theme's own `.h2-alternate`. Everything here resolves to an
   * existing token; the only literal lengths are the design's own insets.
   */
  /* Mobile keeps the overlay of the desktop composition — portrait media, copy in `--crème` on
     top — and drops the product push entirely (the maquette has none). The frame is a
     one-cell grid rather than a fixed box: an `aspect-ratio` element's automatic minimum size
     is content-based, so a long description makes the banner taller instead of spilling out. */
  .interactive-banner__frame {
    display: grid;
    position: relative;
    aspect-ratio: 9 / 16;
  }

  /* `position: relative` is load-bearing: the media and the scrim are absolutely positioned, so
     they paint above any in-flow sibling. Without it the lede and the description sit *behind*
     the scrim. */
  .interactive-banner__content {
    grid-area: 1 / 1;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-block: 6rem 8rem;
    padding-inline: var(--page-margin);
    color: var(--color-accent--off-white);
  }

  /* Rows are assigned explicitly: the product zone is `display: none` on mobile, so it is not a
     grid item and the copy would slide up into the middle row instead of sitting at the bottom. */
  .interactive-banner__head {
    grid-row: 1;
    align-self: start;
  }

  .interactive-banner__copy-zone {
    grid-row: 3;
    align-self: end;
  }

  /* Products are desktop-only: the mobile maquette shows the media, the tabs and the copy. */
  .interactive-banner__products-zone {
    display: none;
  }

  /*
   * No `overflow` clip and no `isolation` on the media box: a video inside an extra clip or
   * stacking context is the documented cause of empty-painting videos in this theme. The
   * layers are absolutely positioned, so there is nothing to clip anyway.
   */
  .interactive-banner__media {
    grid-area: 1 / 1;
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
  }

  /* `data-active` is the no-JS baseline: Liquid ships the first layer active, and the
     component only moves that state. */
  .interactive-banner__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .interactive-banner__layer[data-active='true'] {
    opacity: 1;
  }

  .interactive-banner__media-item,
  .interactive-banner__media-item picture {
    display: block;
    position: absolute;
    inset: 0;
  }

  .interactive-banner__asset {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .interactive-banner__asset--placeholder {
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  .interactive-banner__scrim {
    position: absolute;
    inset: 0;
    background: var(--interactive-banner-scrim, transparent);
  }

  .interactive-banner__head {
    display: grid;
    gap: 4rem;
    color: inherit;
  }

  /* 30px Urbanist Medium on mobile — `--fp-size` is 2.2rem there, so the maquette's size is
     written out and the token takes over from 750px up. */
  .interactive-banner__lede {
    font-family: var(--font-body-family);
    font-size: 3rem;
    font-weight: var(--fp-weight);
    line-height: var(--line-normal);
  }

  .interactive-banner__tabs {
    --interactive-banner-pastille: 2.4rem;

    list-style: none;
    margin: 0;
    padding-inline-start: 0;
    counter-reset: interactive-banner-tab;
    display: grid;
    gap: var(--spacing-20);
    justify-items: start;
  }

  .interactive-banner__tab-item {
    position: relative;
    counter-increment: interactive-banner-tab;
    padding-inline-start: calc(var(--interactive-banner-pastille) + 1.6rem);
  }

  /*
   * Two pseudo-elements rather than one: the flower is a `mask-image`, and a mask clips the
   * pseudo's text along with its background, so the number cannot live in the same box. Keeping
   * the flower a mask is what lets it read `--color-accent--yellow` instead of freezing the
   * Figma hex inside the data URI the way the `ol` markers in base.css have to.
   * The path is the one `.chip--display` uses, at the same 30px the design calls for.
   */
  .interactive-banner__tab-item::before,
  .interactive-banner__tab-item::after {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: var(--interactive-banner-pastille);
    block-size: var(--interactive-banner-pastille);
  }

  .interactive-banner__tab-item::before {
    content: '';
    background-color: var(--color-accent--yellow);
    mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0394 0.12646C12.5803 -0.285162 14.1531 0.337434 15.0232 1.56742C15.8971 0.342922 17.4697 -0.274259 19.0076 0.141022C20.5473 0.556318 21.5973 1.88265 21.7345 3.38336C23.106 2.75526 24.7824 3.00835 25.9081 4.14077C27.0301 5.26953 27.2753 6.93923 26.6465 8.30521C28.143 8.44975 29.4626 9.50168 29.8736 11.0396C30.2851 12.5804 29.6626 14.1528 28.433 15.0231C29.6572 15.897 30.2742 17.4696 29.859 19.0074C29.4437 20.5471 28.1167 21.5973 26.6166 21.7345C27.2446 23.1059 26.9917 24.7822 25.8593 25.9079C24.7306 27.03 23.0609 27.2752 21.695 26.6465C21.5505 28.1429 20.4985 29.4625 18.9607 29.8735C17.4197 30.2852 15.847 29.6626 14.9768 28.4326C14.1029 29.6571 12.5303 30.2736 10.9924 29.859C9.45206 29.4437 8.40255 28.1167 8.26532 26.6166C6.89392 27.2447 5.21763 26.9916 4.09196 25.8592C2.96994 24.7305 2.72477 23.0608 3.35347 21.6948C1.85703 21.5503 0.537462 20.4983 0.126457 18.9604C-0.285156 17.4194 0.337427 15.8466 1.56739 14.9764C0.342934 14.1026 -0.27364 12.5299 0.141019 10.9919C0.556301 9.45221 1.88323 8.40274 3.38329 8.26551C2.75523 6.89408 3.00834 5.21775 4.14068 4.09206C5.26941 2.97 6.93908 2.72483 8.30502 3.35354C8.44954 1.85708 9.50146 0.537479 11.0394 0.12646Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat;
    mask-size: contain;
  }

  .interactive-banner__tab-item::after {
    content: counter(interactive-banner-tab);
    display: grid;
    place-items: center;
    font-family: var(--font-body-family);
    font-size: var(--body-large-size);
    font-weight: var(--body-bold-weight);
    line-height: 1;
    color: var(--color-accent);
  }

  /* 30/37, the maquette's size. `.h2-alternate` carries the family and the italic, but its
     token is 4.5rem below 750px and 3rem above — the reverse of what this banner needs, so the
     size is pinned here rather than left to the breakpoint. */
  .interactive-banner__tab {
    font-size: 3rem;
    line-height: 3.7rem;
    color: inherit;
    text-align: start;
    opacity: 0.5;
    transition: opacity 0.25s ease;
  }

  .interactive-banner__tab[aria-pressed='true'] {
    opacity: 1;
  }

  /* Behind a fine pointer only: a coarse one latches `:hover` after a tap, and two tabs would
     read as active at once. */
  @media (hover: hover) and (pointer: fine) {
    .interactive-banner__tab:hover {
      opacity: 1;
    }
  }

  .interactive-banner__copy-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    color: inherit;
  }

  /* Every panel of a zone shares one cell, so the zone is as tall as its tallest tab and the
     cross-fade has something to fade between. `hidden` would kill the transition; `visibility`
     keeps the inactive panel out of the way once it has faded. */
  .interactive-banner__copy,
  .interactive-banner__products {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .interactive-banner__copy[data-active='true'],
  .interactive-banner__products[data-active='true'] {
    opacity: 1;
    visibility: visible;
  }

  .interactive-banner__copy {
    font-weight: var(--body-medium-weight);
  }

  .interactive-banner__products {
    /* The card is sized off its media: square, so the closed card is the same box whatever the
       asset, and the unfolded one is that same box plus a fixed panel — the height never moves
       between the two states. */
    --interactive-banner-card-media: 7rem;
    --interactive-banner-card-panel: 22.2rem;

    list-style: none;
    margin: 0;
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    padding-inline: var(--page-margin);
  }

  .interactive-banner__products::-webkit-scrollbar {
    display: none;
  }

  .interactive-banner__product {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: var(--spacing-08);
    border-radius: var(--spacing-04);
    background: var(--color-accent--off-white);
    color: var(--color-accent--dark-green);
    transition: padding-inline-end 0.24s ease-out;
  }

  /* The image link duplicates the title link's destination, so it is hidden from assistive
     tech rather than announced twice. */
  .interactive-banner__product-media {
    display: block;
    flex: 0 0 auto;
    inline-size: var(--interactive-banner-card-media);
    aspect-ratio: 1 / 1;
    border-radius: var(--spacing-04);
    overflow: hidden;
  }

  /* `contain`, not `cover`: the source is a packshot on white, and a square crop of a portrait
     one would cut the top and bottom off the tin. */
  .interactive-banner__product-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* A **fixed** track, not `minmax(0, 1fr)`: the unfold animates this box's `max-inline-size`,
     and a flexible track would follow it down — the price would re-wrap onto two lines on the
     way out and the card would grow taller mid-transition. Pinning the track means the content
     is only ever clipped, never reflowed. */
  .interactive-banner__product-content {
    display: grid;
    grid-template-columns: var(--interactive-banner-card-panel);
    gap: var(--spacing-04);
    margin-inline-start: var(--spacing-10);
  }

  .interactive-banner__product-title {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
    line-height: normal;
    color: inherit;
    text-decoration: none;
  }

  .interactive-banner__product-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-08);
    margin-block-start: 0.5rem;
  }

  .interactive-banner__product-price,
  .interactive-banner__product-price .price,
  .interactive-banner__product-price .compare-at-price {
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: normal;
  }

  .interactive-banner__empty {
    padding-inline: var(--page-margin);
    color: color-mix(in oklab, var(--color-foreground) 60%, var(--color-background));
  }

  @media screen and (max-width: 749px) {
    .interactive-banner__media-item--desktop {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .interactive-banner__media-item--mobile {
      display: none;
    }

    /* Merchant-set viewport height rather than the design's 1440 × 796 ratio: the media is
       `object-fit: cover`, so the frame owns its height and the asset follows. */
    .interactive-banner__frame {
      display: block;
      aspect-ratio: auto;
      block-size: var(--interactive-banner-height, 90dvh);
    }

    /* Figma insets: 107 left, 99.5 top, the copy column ending 161 from the right edge, the
       product row 30 further in than the lede. The two bottom zones are aligned on their
       bottom edge rather than on their respective Figma tops (615 vs 634, an optical nudge),
       which holds up when a tab's copy runs longer. */
    .interactive-banner__content {
      position: absolute;
      inset: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      padding: 10rem 16.1rem 7.9rem 10.7rem;
    }

    .interactive-banner__head {
      grid-column: 1;
      grid-row: 1;
    }

    .interactive-banner__lede {
      font-size: var(--fp-size);
      max-inline-size: 76.7rem;
    }

    .interactive-banner__tabs {
      --interactive-banner-pastille: 3rem;

      gap: var(--spacing-20);
    }

    .interactive-banner__tab-item {
      padding-inline-start: 6rem;
    }

    .interactive-banner__products-zone {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-column: 1;
      grid-row: 3;
      margin-inline-start: 3rem;
    }

    .interactive-banner__copy-zone {
      grid-column: 2;
      grid-row: 3;
      inline-size: 33.5rem;
    }

    .interactive-banner__products {
      padding-inline: 0;
    }
  }

  /*
   * The unfold. `blocks/ugc.liquid` keeps its panel in the grid at all times and only fades it,
   * which is invisible when the card overlays a large video — here three cards sit side by side
   * and the reserved space would push them apart. A fixed `max-inline-size` is animated instead
   * of a `0fr` track: the panel width is fixed, and this interpolates everywhere.
   * Gated on a fine pointer, so a touch device keeps the panel open and scrolls the row.
   */
  @media screen and (min-width: 750px) and (hover: hover) and (pointer: fine) {
    .interactive-banner__product-content {
      max-inline-size: 0;
      margin-inline-start: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-inline-size 0.24s ease-out, margin-inline-start 0.24s ease-out, opacity 0.24s ease-out;
    }

    .interactive-banner__product:hover,
    .interactive-banner__product:focus-within {
      padding-inline-end: 1.8rem;
    }

    .interactive-banner__product:hover .interactive-banner__product-content,
    .interactive-banner__product:focus-within .interactive-banner__product-content {
      max-inline-size: var(--interactive-banner-card-panel);
      margin-inline-start: var(--spacing-10);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .interactive-banner__layer,
    .interactive-banner__copy,
    .interactive-banner__products,
    .interactive-banner__product,
    .interactive-banner__product-content,
    .interactive-banner__tab {
      transition: none;
    }
  }
/* END_SECTION:interactive-banner */

/* START_SECTION:introduction (INDEX:18) */
.introduction {
    inline-size: 100%;
  }

  /* Pull the banner under the header. `--header-height` is published on :root by
     assets/sticky-header.js and excludes the announcement bar. Same rule as
     sections/hero.liquid. */
  .introduction[data-hero-overlay] {
    margin-block-start: calc(-1 * var(--header-height, 0px));
  }

  .introduction__banner {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    inline-size: 100%;
    min-block-size: 28rem;
    padding-block: var(--spacing-20);
    overflow: hidden;
  }

  /* The header covers the top `--header-height` of the banner, so centring over the
     whole box would sit the title low. Padding the covered strip out centres the
     content in the band that is actually visible — which is where Figma puts it. */
  .introduction[data-hero-overlay] .introduction__banner {
    padding-block-start: calc(var(--header-height, 0px) + var(--spacing-20));
  }

  .introduction__media {
    position: absolute;
    inset: 0;
  }

  .introduction__media-item {
    position: absolute;
    inset: 0;
  }

  .introduction__media-item picture {
    display: block;
    block-size: 100%;
  }

  .introduction__image,
  .introduction__video,
  .introduction__placeholder-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .introduction__content {
    position: relative;
    inline-size: var(--content-width);
    text-align: center;
    color: var(--color-foreground);
  }

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

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

    .introduction__banner {
      min-block-size: 40rem;
    }
  }
/* END_SECTION:introduction */

/* START_SECTION:japan-map (INDEX:19) */
/* ==========================================================================
     Japan map — animated section
     Every dial is a custom property on :root. No animation library: the whole
     thing is CSS transitions + @keyframes reacting to [data-active] on the
     <japan-map> element. The JS only flips that attribute.
     ========================================================================== */

  :root {
    /* ── Timing ── */
    --anim-duration-fast: 240ms;
    --anim-duration-base: 480ms;
    --anim-duration-slow: 900ms;
    --anim-duration-draw: 1600ms;
    --anim-stagger: 90ms;
    --anim-delay-enter: 120ms;
    --anim-ease: cubic-bezier(0.67, 0.22, 0.32, 0.86);

    /* ── Palette ── */
    --japan-map-bg: #869b5d;
    --japan-map-ink: #f6f4f1;
    --japan-map-accent: #869b5d;

    /* ── Stage ──
       Ratio (width / height) of the design frame. 1460/810 = 1.80247 on
       desktop; the portrait overrides at the bottom swap it. Every formula
       that needs the stage geometry reads it. */
    --stage-ratio: 1.80247;

    /* ── Text column, in % of the stage ── */
    --text-left: 9.79%;
    --text-top: 12.84%;
    --text-w: 52.1rem;

    /* ── Video box, in % of the stage ── */
    --video-left: 42.19%;
    --video-top: -24.32%;
    --video-w: 69.73%;
    --video-h: 146.17%;
    --video-opacity: 0.1;
    --video-tint: 0.5;
    --video-fade-x: 55%;
    --video-fade-y: 10%;

    /* ── Map at rest (dezoomed) ──
       left / top place the map box in the stage, a negative top lets it bleed
       past the frame. --map-box-w is its width as a fraction of the stage
       width, and is the size dial. */
    --map-box-left: 37.74%;
    --map-box-top: -32.96%;
    --map-box-w: 0.5644;

    /* ── Zoom ── */
    --zoom-focus-x: 58%;
    --zoom-focus-y: 50%;
    --map-zoom-scale: 2.4;

    /* ── Map artwork ── */
    /* Line weight in SVG units, applied as-is. The zoomed value is smaller
       because the whole SVG is already scaled up by --map-zoom-scale. */
    --border-width: 1;
    --border-width-zoom: 0.6;
    --border-opacity: 0.37;
    --prefecture-opacity: 0.09;
    --region-opacity-idle: 0.25;
    --region-opacity-active: 0.65;
    --region-opacity-dimmed: 0.09;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --anim-duration-fast: 0.01ms;
      --anim-duration-base: 0.01ms;
      --anim-duration-slow: 0.01ms;
      --anim-duration-draw: 0.01ms;
      --anim-stagger: 0ms;
      --anim-delay-enter: 0ms;
    }
  }

  /* ── Portrait layout (tablets, phones) ──
     The desktop composition is a landscape frame cropped to cover the
     viewport; on a portrait screen that crop would eat the text column
     entirely. Only tokens change — same markup, same component. A phone held
     in landscape stays on the desktop composition, which fits it fine. */
  @media (max-aspect-ratio: 1 / 1), (max-width: 700px) {
    .japan-map__root {
      --stage-ratio: 0.75;
      --text-left: 7%;
      --text-top: 6%;
      --text-w: 62%;
      --map-box-left: 22%;
      --map-box-top: 40%;
      --map-box-w: 0.6;
      /* Low enough that an open panel never covers the zoomed region */
      --zoom-focus-x: 55%;
      --zoom-focus-y: 74%;
      --map-zoom-scale: 2;
      --video-left: 0%;
      --video-top: 0%;
      --video-w: 100%;
      --video-h: 100%;
      --video-fade-x: 12%;
      --video-fade-y: 12%;
    }
  }

  /* ── Phones — validated down to 320px ── */
  @media (max-width: 520px) {
    .japan-map__root {
      --stage-ratio: 0.5;
      --text-left: 7%;
      --text-top: 5%;
      --text-w: 86%;
      --map-box-left: 15%;
      --map-box-top: 15%;
      --map-box-w: 1.15;
      /* Low enough that a long open panel never reaches the zoomed region */
      --zoom-focus-x: 55%;
      --zoom-focus-y: 82%;
      /* The box is already 1.15x wide here, so this scale is on top of that:
         effective on-screen zoom is ~1.9. */
      --map-zoom-scale: 3;
    }
  }

  /* ── Root & stage ─────────────────────────────────────────────── */
  .japan-map__root {
    /* 1 at rest, --map-zoom-scale when a region is open. Everything that has
       to compensate for the zoom (line width, marker size) divides by this. */
    --map-zoom-current: 1;
    --border-width-current: var(--border-width);
    /* Derived, and declared HERE rather than on :root on purpose: a custom
       property resolves its var()s with the values of the element it is
       declared on, so on :root it would freeze the desktop --map-box-w /
       --stage-ratio and ignore the media query overrides above. */
    --map-box-h: calc(var(--map-box-w) * 1.25209 * var(--stage-ratio));

    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    aspect-ratio: var(--stage-ratio);
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background-color: var(--japan-map-bg);
    color: var(--japan-map-ink);
    opacity: 0;
    transition: opacity var(--anim-duration-base) var(--anim-ease);
  }

  .japan-map__root.is-entered {
    opacity: 1;
  }

  .japan-map__root:not([data-active='none']) {
    --map-zoom-current: var(--map-zoom-scale);
    --border-width-current: var(--border-width-zoom);
  }

  /* Keeps the design ratio and covers the section, like object-fit: cover, so
     the % layout below stays exact instead of being stretched when the
     viewport is taller than the ratio. The section crops the overflow. */
  .japan-map__stage {
    position: relative;
    width: max(100%, calc(var(--stage-ratio) * 100vh));
    width: max(100%, calc(var(--stage-ratio) * 100svh));
    aspect-ratio: var(--stage-ratio);
    /* Clips like the Figma frame: the video and the map are meant to bleed
       past the frame, not past the section. */
    overflow: hidden;
  }

  /* ── Video background ─────────────────────────────────────────── */
  .japan-map__video {
    position: absolute;
    left: var(--video-left);
    top: var(--video-top);
    width: var(--video-w);
    height: var(--video-h);
    opacity: var(--video-opacity);
    pointer-events: none;
    /* Feathers the edges to transparent so the footage melts into the flat
       green instead of being cut off by the element box. */
    --japan-map-fade-x: linear-gradient(
      to right,
      transparent 0%,
      #000 var(--video-fade-x),
      #000 calc(100% - var(--video-fade-x)),
      transparent 100%
    );
    --japan-map-fade-y: linear-gradient(
      to bottom,
      transparent 0%,
      #000 var(--video-fade-y),
      #000 calc(100% - var(--video-fade-y)),
      transparent 100%
    );
    -webkit-mask-image: var(--japan-map-fade-x), var(--japan-map-fade-y);
    mask-image: var(--japan-map-fade-x), var(--japan-map-fade-y);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .japan-map__video-media,
  .japan-map__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Flat green multiply tint, so --video-opacity is the single dial for how
     present the footage is. */
  .japan-map__video-tint {
    position: absolute;
    inset: 0;
    background-color: var(--japan-map-bg);
    mix-blend-mode: multiply;
    opacity: var(--video-tint);
    pointer-events: none;
  }

  /* ── Map box & zoom ───────────────────────────────────────────── */
  .japan-map__box {
    position: absolute;
    left: var(--map-box-left);
    top: var(--map-box-top);
    width: calc(var(--map-box-w) * 100%);
    aspect-ratio: 800.28 / 1002.02;
  }

  /* No `will-change: transform` here on purpose: it promotes the map to its
     own compositor layer, which Chrome rasterises once at scale 1 and then
     stretches — the zoomed map comes out blurry, and stays blurry after the
     transition ends. */
  .japan-map__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    transform: translate(0%, 0%) scale(1);
    transition: transform var(--anim-duration-slow) var(--anim-ease);
  }

  /* The active region (--region-x / --region-y, published by the component)
     is brought onto the --zoom-focus-* point of the stage. translate() is a %
     of the map box itself, hence the division by --map-box-w / --map-box-h. */
  .japan-map__root:not([data-active='none']) .japan-map__inner {
    transform: translate(
        calc((var(--zoom-focus-x) - var(--map-box-left)) / var(--map-box-w) - var(--map-zoom-scale) * var(--region-x)),
        calc((var(--zoom-focus-y) - var(--map-box-top)) / var(--map-box-h) - var(--map-zoom-scale) * var(--region-y))
      )
      scale(var(--map-zoom-scale));
  }

  .japan-map__svg,
  .japan-map__svg svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* ── Artwork ──────────────────────────────────────────────────── */
  .japan-map__prefectures {
    fill: currentcolor;
    opacity: 0;
  }

  .japan-map__root.is-entered .japan-map__prefectures {
    animation: japan-map-prefectures var(--anim-duration-base) var(--anim-ease)
      calc(var(--anim-delay-enter) + var(--anim-duration-draw)) forwards;
  }

  @keyframes japan-map-prefectures {
    to {
      opacity: var(--prefecture-opacity);
    }
  }

  .japan-map__region {
    fill: currentcolor;
    opacity: var(--region-opacity-idle);
    transition: opacity var(--anim-duration-base) var(--anim-ease);
  }

  .japan-map__root:not([data-active='none']) .japan-map__region {
    opacity: var(--region-opacity-dimmed);
  }

  .japan-map__root[data-active='nagasaki'] .japan-map__region[data-region='nagasaki'],
  .japan-map__root[data-active='kagoshima'] .japan-map__region[data-region='kagoshima'],
  .japan-map__root[data-active='yame'] .japan-map__region[data-region='yame'] {
    opacity: var(--region-opacity-active);
  }

  /* stroke-*, dasharray and dashoffset included, are inherited properties, so
     the draw is animated on the <g> — one animated element instead of 298,
     which is what keeps the draw smooth and lets it reach its end state on a
     mid-range machine.

     The stroke width is divided by the zoom factor rather than using
     `vector-effect: non-scaling-stroke`: that vector-effect makes Chrome
     compute the dash pattern in device space, which breaks the pathLength="1"
     normalisation and leaves paths half-drawn. */
  .japan-map__borders {
    stroke: currentcolor;
    stroke-width: var(--border-width-current);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: var(--border-opacity);
    transition: stroke-width var(--anim-duration-slow) var(--anim-ease);
  }

  .japan-map__root.is-entered .japan-map__borders {
    animation: japan-map-draw var(--anim-duration-draw) var(--anim-ease) var(--anim-delay-enter) forwards;
  }

  @keyframes japan-map-draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* ── Markers ──────────────────────────────────────────────────── */
  .japan-map__marker-anchor {
    position: absolute;
    left: var(--marker-x);
    top: var(--marker-y);
    /* Counter-scale keeps the pill at a constant on-screen size while the map
       is zoomed. */
    transform: translate(-50%, -50%) scale(calc(1 / var(--map-zoom-current)));
    transform-origin: center;
    transition: transform var(--anim-duration-slow) var(--anim-ease), opacity var(--anim-duration-base) var(--anim-ease);
  }

  /* Nagasaki and Yame sit ~45 km apart, so their pills meet once the map is small:
     the open, hovered or focused one is drawn on top. */
  .japan-map__marker-anchor:has([aria-expanded='true']),
  .japan-map__marker-anchor:hover,
  .japan-map__marker-anchor:focus-within {
    z-index: 1;
  }

  .japan-map__marker {
    display: flex;
    align-items: center;
    /* No `gap` here: a flex gap is reserved even when the label is collapsed to
       0, which pushes the dot off the pill's centre — and the pill is what is
       centred on the map point, so the dot would no longer sit on its region.
       The gap lives on the label instead and collapses with it. */
    padding: 5px 12px;
    border: 0;
    border-radius: 10px;
    background-color: var(--japan-map-ink);
    color: var(--japan-map-accent);
    cursor: pointer;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.6);
  }

  .japan-map__root.is-entered .japan-map__marker {
    /* Markers land once the map has finished drawing */
    animation: japan-map-marker var(--anim-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1)
      calc(var(--anim-delay-enter) + var(--anim-duration-draw) + var(--anim-stagger) * var(--marker-index, 0)) forwards;
  }

  @keyframes japan-map-marker {
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .japan-map__marker-dot {
    flex: none;
    width: 12px;
    height: 13px;
    color: var(--japan-map-bg);

    @media screen and (max-width: 1023px) {
      width: 8px;
      height: 9px;
    }
  }

  .japan-map__marker-label {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    font-size: 13px;
    color: var(--japan-map-accent);
    font-weight: 500;
    line-height: normal;
    transition: opacity var(--anim-duration-base) var(--anim-ease), max-width var(--anim-duration-base) var(--anim-ease),
      margin-left var(--anim-duration-base) var(--anim-ease);

    @media screen and (max-width: 1023px) {
      font-size: 11px;
      line-height: 1;
    }
  }

  .japan-map__marker[aria-expanded='true'] .japan-map__marker-label {
    max-width: 120px;
    margin-left: 5px;
    opacity: 1;
  }

  /* ── Text column ──────────────────────────────────────────────── */
  .japan-map__text {
    position: absolute;
    left: var(--text-left);
    top: var(--text-top);
    max-width: var(--text-w);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .japan-map__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .japan-map__heading {
    margin: 0;
    font-size: clamp(32px, 3.56vw, 52px);
    font-style: italic;
    font-weight: 400;
    line-height: 1.05;
  }

  .japan-map__lede {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.9;
  }

  .japan-map__entry {
    opacity: 0;
    transform: translateY(12px);
  }

  .japan-map__root.is-entered .japan-map__entry {
    animation: japan-map-entry var(--anim-duration-base) var(--anim-ease) var(--entry-delay, var(--anim-delay-enter))
      forwards;
  }

  .japan-map__heading {
    --entry-delay: calc(var(--anim-delay-enter) + var(--anim-duration-draw) * 0.3);
  }

  .japan-map__lede {
    --entry-delay: calc(var(--anim-delay-enter) + var(--anim-duration-draw) * 0.3 + var(--anim-stagger));
  }

  .japan-map__accordion {
    --entry-delay: calc(var(--anim-delay-enter) + var(--anim-duration-draw) * 0.3 + var(--anim-stagger) * 2);
  }

  @keyframes japan-map-entry {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── Accordion ────────────────────────────────────────────────── */
  .japan-map__accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .japan-map__accordion-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .japan-map__accordion-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }

  .japan-map__chevron {
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform var(--anim-duration-fast) var(--anim-ease);
  }

  .japan-map__accordion-trigger[aria-expanded='true'] .japan-map__chevron {
    transform: rotate(180deg);
  }

  /* grid-template-rows animates cleanly; height: auto does not. */
  .japan-map__accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--anim-duration-base) var(--anim-ease),
      opacity var(--anim-duration-base) var(--anim-ease);
  }

  .japan-map__accordion-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .japan-map__accordion-inner {
    overflow: hidden;
  }

  .japan-map__accordion-text {
    margin: 0;
    padding-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    opacity: 0.85;
  }

  /* The phone pill below 1024px: once the map is small, Nagasaki and Yame
     (~45 km apart) sit close enough for the full-size pills to overlap. */
  @media (max-width: 1023px) {
    .japan-map__marker {
      padding: 2px 5px;
      border-radius: 6px;
    }
  }

  /* ── Phone-only marker rules ──────────────────────────────────── */
  @media (max-width: 520px) {
    /* No room for the other pill next to an open panel on a phone */
    .japan-map__marker-anchor.is-dimmed {
      opacity: 0;
      pointer-events: none;
    }
  }

  /* Before the component upgrades, show the section rather than a blank box */
  .japan-map__root:not(:defined) {
    opacity: 1;
  }
/* END_SECTION:japan-map */

/* START_SECTION:media-with-text (INDEX:20) */
.media-with-text__layout {
    /* The two gaps arrive as separate inline vars on the section; this is the one
       place that picks between them, so every use site below stays a plain
       `var(--media-with-text-gap)`. */
    --media-with-text-gap: var(--media-with-text-gap-mobile, 3rem);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
  }

  .media-with-text__media {
    position: relative;
    background: color-mix(in oklab, var(--color-background) 88%, var(--color-foreground));
  }

  /* The ratio must only *reserve* height, never cap it. Declared on the box it
     resolves to a definite block-size, and a definite block-size beats grid
     stretch alignment — the media then stays short whenever the copy makes the
     row taller, which is the bug this replaces. A flow spacer contributes the
     same height to row sizing while leaving the box's own block-size `auto`, so
     stretch still applies and the media covers the full row. */
  .media-with-text__media::before {
    content: "";
    display: block;
    aspect-ratio: var(--media-with-text-ratio-mobile);
  }

  .media-with-text__media-item,
  .media-with-text__media-item picture {
    display: block;
    position: absolute;
    inset: 0;
  }

  .media-with-text__asset {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .media-with-text__content {
    display: grid;
    align-content: center;
    padding-block: var(--media-with-text-content-padding-block-mobile, var(--spacing-42));
    padding-inline: var(--spacing-20);
  }

  .media-with-text__blocks {
    display: grid;
    gap: var(--media-with-text-gap);
  }

  /* Accordions read as one continuous list: they carry their own top rule, so the
     block gap between two adjacent ones is cancelled and the run gets a closing
     rule of its own. */
  .media-with-text__blocks > .faq-question + .faq-question {
    margin-block-start: calc(-1 * var(--media-with-text-gap));
  }

  .media-with-text__blocks > .faq-question:not(:has(+ .faq-question)) {
    border-block-end: 1px solid var(--color-border);
  }

  @media screen and (max-width: 749px) {
    .media-with-text__media-item--desktop {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    .media-with-text__media-item--mobile {
      display: none;
    }

    .media-with-text__layout {
      --media-with-text-gap: var(--media-with-text-gap-desktop, 4rem);

      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-with-text__media::before {
      aspect-ratio: var(--media-with-text-ratio-desktop);
    }

    .media-with-text__layout[data-media-position="right"] .media-with-text__media {
      order: 1;
    }

    .media-with-text__content {
      padding-block: var(--spacing-65);
      padding-inline: var(--spacing-45);
    }

    /* Editorial lists breathe in the copy column, where the row is tall enough to
       afford it. Overrides the 0.35em `li + li` rhythm of base.css. */
    .media-with-text__blocks :is(ul, ol) > li + li {
      margin-block-start: 2.2rem;
    }
  }

  /* 9rem is the Figma value, measured at 1440. Applied earlier it leaves the copy
     column too narrow, so it waits for the width that was designed for it. */
  @media screen and (min-width: 1440px) {
    .media-with-text__content {
      padding-inline: var(--spacing-90);
    }
  }
/* END_SECTION:media-with-text */

/* START_SECTION:pad-with-text (INDEX:22) */
/* The section bleeds to the screen edges for its background; the content sits in
     a container of its own, narrower than the shared one (106.9rem = the Figma
     44rem media + 12.9rem gap + 50rem copy at 1440). */
  .pad-with-text {
    padding-inline: var(--page-margin);
  }

  /* Container mode needs no padding override: the shared grid insets the panel by
     one page margin, and this padding then keeps the content off its rounded
     edges — the same inset the full-bleed mode applies against the screen. */

  .pad-with-text__layout {
    display: grid;
    justify-items: center;
    gap: 4rem;
    max-inline-size: 106.9rem;
    margin-inline: auto;
  }

  .pad-with-text__media {
    position: relative;
    inline-size: min(25rem, 100%);
    overflow: hidden;
    background: color-mix(in oklab, var(--color-background) 88%, var(--color-foreground));
  }

  /* Same reasoning as media-with-text: the ratio only reserves height through a
     flow spacer, so the media box keeps an `auto` block-size and still stretches
     to the full row when the copy is taller. */
  .pad-with-text__media::before {
    content: "";
    display: block;
    aspect-ratio: var(--pad-with-text-ratio-mobile, 2 / 3);
  }

  .pad-with-text__media-item,
  .pad-with-text__media-item picture {
    display: block;
    position: absolute;
    inset: 0;
  }

  .pad-with-text__asset {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .pad-with-text__content {
    display: grid;
    inline-size: min(32rem, 100%);
    gap: var(--pad-with-text-blocks-gap-mobile, 4rem);
  }

  @media screen and (min-width: 750px) {
    /* 44:50 is the Figma column ratio, and 8.96vw is its 129px gap at 1440 — both
       shrink together below the 106.9rem cap so the two caps are only ever hit at
       the designed width. */
    .pad-with-text__layout {
      grid-template-columns: 44fr 50fr;
      align-items: center;
      gap: clamp(4rem, 8.96vw, 12.9rem);
    }

    /* The copy column is the wider of the two, so the sides swap by reordering the
       tracks, not by `order` alone — that would hand the media the 50fr track. */
    .pad-with-text__layout[data-media-position="right"] {
      grid-template-columns: 50fr 44fr;
    }

    .pad-with-text__layout[data-media-position="right"] .pad-with-text__media {
      order: 1;
    }

    .pad-with-text__media,
    .pad-with-text__content {
      inline-size: 100%;
    }

    .pad-with-text__media::before {
      aspect-ratio: var(--pad-with-text-ratio-desktop, 2 / 3);
    }

    .pad-with-text__content {
      gap: var(--pad-with-text-blocks-gap-desktop, 4rem);
    }
  }
/* END_SECTION:pad-with-text */

/* START_SECTION:page-faq (INDEX:23) */
.page-faq__inner {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: 90rem;
  }

  .page-faq__title {
    color: var(--color-foreground);
    text-align: center;
    text-wrap: pretty;
  }

  .page-faq__intro {
    color: var(--color-foreground);
    font-weight: var(--body-medium-weight);
    margin-block: var(--spacing-20) var(--spacing-42);
    text-align: center;
    text-wrap: pretty;
  }

  .page-faq__categories {
    display: block;
  }

  .page-faq__panels {
    margin-block-start: var(--spacing-65);
  }

  .page-faq__panel + .page-faq__panel:not([hidden]) {
    margin-block-start: var(--spacing-65);
  }

  .page-faq__empty {
    color: var(--color-foreground);
  }
/* END_SECTION:page-faq */

/* START_SECTION:popin-richtext (INDEX:25) */
.popin-richtext {
    display: flex;
    justify-content: center;
    text-align: center;

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

  .popin-richtext__inner {
    position: relative;
    outline: none;

    &:is(:hover, :focus-within) .popin-richtext__content {
      opacity: 1;
      visibility: visible;
    }

    &:focus-visible .popin-richtext__title {
      outline: var(--focus-ring);
      outline-offset: 2px;
    }

    &[tabindex] {
      cursor: pointer;
    }
  }

  /* Centred above the title. */
  .popin-richtext__content {
    --bg: #fff;
    position: absolute;
    inset-block-end: calc(100% + var(--spacing-08));
    inset-inline: 0;
    margin-inline: auto;
    width: max-content;
    max-width: min(20.6rem, 100%);
    padding: var(--spacing-08);
    border-radius: var(--spacing-08);
    background-color: var(--bg);
    display: flex;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 500;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* Desktop: centred on the asterisked word rather than on the whole title. Without anchor
     positioning (or without an asterisk) it simply stays centred on the title. */
  @supports (anchor-name: --a) {
    @media screen and (min-width: 750px) {
      .popin-richtext__inner:has(.popin-richtext__anchor) .popin-richtext__content {
        inset-inline: anchor(center) auto;
        margin-inline: 0;
        translate: -50% 0;
      }
    }
  }

  .popin-richtext__title {
    color: inherit;
    max-width: 100%;
    text-wrap: pretty;
  }
/* END_SECTION:popin-richtext */

/* START_SECTION:product-comparator (INDEX:27) */
/* Declared rather than defaulted at each `var()`: the gap sits under a division bar below, and
     an unresolved custom property there would invalidate the whole track size and drop the grid
     back to `auto` — which fits every column on screen and silently kills the slider. The
     section's inline style overrides this on the same element. */
  .product-comparator {
    --comparator-gap: var(--spacing-15);
    --comparator-header-gap: var(--spacing-42);
    /* An anchor jump lands under the sticky header otherwise. */
    scroll-margin-block-start: var(--header-height, 0px);
  }

  .product-comparator__header {
    width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
    margin-block-end: var(--comparator-header-gap);
  }

  .product-comparator__empty {
    color: var(--color-foreground);
    text-align: center;
  }

  .product-comparator__slider {
    display: block;
  }

  /* The row tracks are declared once here and handed down through `grid-template-rows: subgrid`
     on every `.comparator-column`, which is what keeps the separators on one line across the
     comparator when a value wraps in one column but not its neighbour. Track 1 is the product
     card, the rest are comparison rows; a track no column fills is an `auto` track with no item
     in it, so it collapses to zero — which is why the count can be a constant rather than the
     tallest column measured in Liquid (`section.blocks` cannot report a theme block's children).
     How many columns fit is a property of the viewport alone, never of how many products the
     merchant added: two products lay out against the same slots and the row simply ends early,
     so a card keeps its drawn proportion instead of stretching to fill.
     ponytail: 24 tracks = 23 comparison rows per column. Raise the constant if a comparator
     ever needs more. */
  .product-comparator__columns {
    /* Both Figma frames fall out of the fraction exactly: 393 - 2 * 2rem of page margin is two
       16.9rem columns and one gap, 1440 - 2 * 4.5rem is four 32.6rem columns and three. What the
       fraction does not cover overflows, and that overflow is the slider.

       The track must stay a bare length. `minmax(0, <length>)` only *caps* a track — the base
       size stays 0 and the grid hands out the space it actually has, so the columns shrink to
       fit, nothing ever overflows and the slider silently never engages. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--comparator-gap)) / 2);
    grid-template-rows: repeat(24, auto);
    /* Past 1500 the page margin doubles and four capped columns no longer fill the row. `safe`
       centres them while they fit and reverts to `start` when they do not — plain `center` would
       push the first column off the start edge, where no scroll position can reach it. */
    justify-content: safe center;
    column-gap: var(--comparator-gap);
    row-gap: 0;
    padding-inline: var(--page-margin);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--page-margin);
    scrollbar-width: none;
  }

  .product-comparator__columns::-webkit-scrollbar {
    display: none;
  }

  @media screen and (max-width: 749px) {
    .product-comparator__columns {
      mask-image: none !important;
    }
  }

  /* `min(32.6rem, …)` caps the column at the drawn desktop card, so a three-up row just under
     1300 cannot blow it up past its size. The two-up band above is deliberately uncapped: cap it
     and a third column fits in the leftover space, which is the opposite of a two-up band. */
  @media screen and (min-width: 1089px) {
    .product-comparator__columns {
      grid-auto-columns: min(32.6rem, calc((100% - (2 * var(--comparator-gap))) / 3));
    }
  }

  @media screen and (min-width: 1300px) {
    .product-comparator__columns {
      grid-auto-columns: min(32.6rem, calc((100% - (3 * var(--comparator-gap))) / 4));
    }
  }

  .product-comparator__nav {
    display: flex;
    justify-content: center;
    gap: 2.7rem;
    margin-block-start: var(--spacing-42);
  }

  /* An author `display` beats the UA sheet's `[hidden]` rule whatever the specificity, so the
     attribute the component toggles needs its own declaration to mean anything. */
  .product-comparator__nav[hidden] {
    display: none;
  }

  /* Dimmed rather than hidden: the pair is centred, so removing one would slide the other
     off-centre every time you reach an end. */
  .product-comparator__nav-button::before {
    content: none;
  }

  .product-comparator__nav-button[disabled] {
    opacity: 0.25;
    cursor: default;
  }
/* END_SECTION:product-comparator */

/* START_SECTION:product (INDEX:28) */
.product-page {
    --product-page-mobile-gap: 4rem;
    --product-page-column-gap: var(--spacing-42);

    @media screen and (max-width: 749px) {
      margin-top: var(--header-group-height);
    }
  }

  .product-page__grid {
    display: grid;
    grid-gap: var(--product-page-mobile-gap);
  }

  .product-page__column {
    display: block;
    min-width: 0;
  }

  .product-page__grid + .product-media {
    margin-block-start: var(--spacing-20);
  }

  .product-page__column--left {
    display: grid;
  }

  /* No top margin below 990px: the left column already sits under the form's gap there. */
  .product-page__description {
    font-size: var(--body-size);
    margin-block-end: 3rem;

    & > ul,
    & > ol {
      margin-top: 2.6rem;
      list-style: none;
      padding-left: 0;
      font-weight: 700;

      & li {
        margin-top: 1rem;
      }
    }
  }

  .product-page__description > :first-child,
  .product-page__layer-content > :first-child {
    margin-block-start: 0;
  }

  .product-page__description > :last-child,
  .product-page__layer-content > :last-child {
    margin-block-end: 0;
  }

  .product-page__layer {
    display: block;
  }

  .product-page__layer-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-block: var(--spacing-20);
    border-block-start: 1px solid var(--color-border);
    color: inherit;
    font-family: var(--font-body-family);
    font-size: var(--body-size);
    line-height: var(--line-normal);
    letter-spacing: 0;
    font-weight: 700;
    text-align: start;
  }

  drawer-trigger.product-page__layer:last-of-type .product-page__layer-button {
    border-block-end: 1px solid var(--color-border);
  }

  .product-page__layer-spec + .product-page__layer-spec {
    margin-block-start: var(--spacing-22);
  }

  /* metafield_tag wraps rich_text_field output in its own div, so reach through it. */
  .product-page__layer-spec-content > :first-child,
  .product-page__layer-spec-content > .metafield-rich_text_field > :first-child {
    margin-block-start: 0;
  }

  .product-page__layer-spec-content > :last-child,
  .product-page__layer-spec-content > .metafield-rich_text_field > :last-child {
    margin-block-end: 0;
  }

  .product-page__layer-chevron {
    flex-shrink: 0;
  }

  .product-page__form-shell,
  .product-page__form {
    display: block;
  }

  .product-page__form {
    display: grid;
    grid-gap: 1.7rem;
  }

  .product-page__summary {
    display: grid;
  }

  /*
   * The badges render twice: above the title below 990px, in the left column from 990px.
   * Doubled class on the hidden copy so it outranks the snippet's own `.product-badges`
   * `display: flex` — see "Hiding One Breakpoint's Variant" in .docs/css-patterns.md.
   */
  .product-page__summary .product-badges {
    gap: 0.5rem;
    margin-block-end: var(--spacing-15);
  }

  .product-page__column--left.product-page__column--left .product-badges {
    display: none;
  }

  .product-page__title {
    margin: 0;
    color: var(--color-foreground);
    font-size: var(--h2-font-size);
    font-weight: 400;
  }

  .product-page__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
    margin-block-end: var(--spacing-15);
    margin-block-start: var(--spacing-04);
  }

  .product-page__pricing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-20);
    flex-wrap: wrap;
  }

  .product-page__price {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-10);
    font-size: var(--body-large-size);
    font-weight: 600;
  }

  .product-page__variants {
    margin-top: 2.1rem;
  }

  /*
   * 3.8rem from the pricing row and to the CTA in the Figma: the form's 1.7rem gap plus this.
   * Below, the Recharge app block sits between list and CTA even when it renders nothing, and
   * its row adds a second 1.7rem gap — hence the 0.4rem.
   */
  .product-page__bundle-contents {
    display: grid;
    gap: var(--spacing-10);
    margin-block: 2.1rem 0.4rem;
    font-size: var(--body-size);

    & ul {
      display: grid;
      gap: var(--spacing-10);
      font-weight: var(--body-medium-weight);
    }

    & li {
      margin: 0;
    }

    & p {
      margin: 0;
      font-weight: 700;
    }
  }

  .product-page__submit {
    width: 100%;
    justify-content: center;
  }

  /*
   * Recharge Subscription Widget 2.0 renders in a shadow root, so it is restyled through the
   * `part` attributes it exposes — the variant pills above are the reference. Rules from the
   * page win over the widget's own `:host` / internal rules, which is what lifts its
   * `max-width: 44rem` and its default card look.
   */
  .product-page__form .recharge-subscription-widget {
    display: block;
  }

  .product-page__form recharge-subscription-widget {
    max-width: none;
  }

  .product-page__form recharge-subscription-widget::part(rc-content-wrap) {
    font-size: var(--button-small-size);
    line-height: 1.2;
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option) {
    background-color: #fff;
    border: 0.2rem solid transparent;
    border-radius: 0.4rem;
    margin-block-end: var(--spacing-10);
    transition: border-color 0.2s ease;
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option):hover,
  .product-page__form recharge-subscription-widget::part(rc-purchase-option__selected) {
    border-color: var(--color-foreground);
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__label) {
    box-sizing: border-box;
    min-block-size: 4.4rem;
    padding: var(--spacing-08) var(--spacing-15);
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__selector) {
    font-size: 1em;
    font-weight: 600;
    padding: 0;
  }

  /*
   * Prices stay stacked (the widget's own layout) on mobile, so the title keeps its width, and
   * never wrap mid-amount. The subscription card gets a little top room there so the discount
   * badge clears the struck-through price. From 750px they sit on one line instead.
   */
  .product-page__form recharge-subscription-widget::part(rc-purchase-option__prices) {
    margin-inline-start: var(--spacing-10);
    white-space: nowrap;
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__subscription) {
    padding-block-start: 0.4rem;
  }

  @media screen and (min-width: 750px) {
    .product-page__form recharge-subscription-widget::part(rc-purchase-option__prices) {
      flex-direction: row;
      align-items: baseline;
      gap: var(--spacing-06);
    }

    .product-page__form recharge-subscription-widget::part(rc-purchase-option__subscription) {
      padding-block-start: 0;
    }
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__price),
  .product-page__form recharge-subscription-widget::part(rc-purchase-option__discounted-price) {
    font-weight: 600;
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__original-price) {
    font-size: var(--body-small-size);
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__badge) {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    inset-block-start: -1rem;
    inset-inline-end: var(--spacing-15);
  }

  .product-page__form recharge-subscription-widget::part(rc-purchase-option__sub-container) {
    padding: 0 var(--spacing-15) var(--spacing-15);
    gap: var(--spacing-10);
  }

  /*
   * The widget masks each bullet with `--rc-widget-bullet-icon-image`, read on the <li>, so
   * redefining it on the list part swaps the check icon for the theme's `ul` flower
   * (`base.css`), tinted with the scheme accent like every other list marker. The flower is
   * re-laid on the widget's 24-unit box, whose `mask-size: 140%` and offset are tuned for its
   * own icon. The icon box sits at `top: 0.25em` with a `1em` height, so it is centred on the
   * first line only at `line-height: 1.5` — keep the two together.
   */
  .product-page__form recharge-subscription-widget::part(rc-benefits__list) {
    --rc-widget-bullet-icon-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(6.34 6.34) scale(1.3)' d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z'/%3E%3C/svg%3E");
    --rc-widget-bullet-icon-image-color: var(--color-accent, #869b5d);
    font-size: var(--body-small-size);
    line-height: 1.5;
  }

  .product-page__form recharge-subscription-widget::part(rc-plans__label) {
    font-weight: 500;
  }

  .product-page__form recharge-subscription-widget::part(rc-plans-select) {
    font: inherit;
    font-size: var(--body-size);
    color: var(--color-foreground);
    border: 0.1rem solid var(--color-foreground);
    border-radius: 0.4rem;
  }

  /* Below 990px the media column is the `product-media` carousel instead, which
     carries every media including this one. */
  .product-page__media-stage {
    display: none;
    position: relative;
    width: 100%;
  }

  /* Every media of the product is rendered as a layer; `product-media-stage.js`
     keeps the one matching the selected variant as the only visible one. */
  .product-page__media-layer {
    display: block;
  }

  .product-page__media-layer[hidden] {
    display: none;
  }

  .product-page__deferred-media,
  .product-page__media-poster {
    display: block;
    width: 100%;
  }

  .product-page__media-poster {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .product-page__media-asset,
  .product-page__media-stage video,
  .product-page__media-stage model-viewer,
  .product-page__media-stage iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  @media screen and (min-width: 990px) {
    .product-page {
      --product-page-column-gap: 5.8rem;
    }

    .product-page__grid {
      align-items: center;
      grid-gap: var(--product-page-column-gap);
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
      padding-inline: var(--product-page-column-gap);
    }

    /* Markup order is media, right, left (mobile order, <h1> first); the
       desktop tracks read left, media, right. */
    .product-page__column--left,
    .product-page__column--media,
    .product-page__column--right {
      grid-row: 1;
    }

    .product-page__column--left {
      grid-column: 1;
    }

    .product-page__column--media {
      grid-column: 2;
    }

    .product-page__column--right {
      grid-column: 3;
    }

    .product-page__summary.product-page__summary .product-badges {
      display: none;
    }

    .product-page__description {
      margin-block-start: 2.6rem;
    }

    .product-page__column--left.product-page__column--left .product-badges {
      display: flex;
      gap: 0.5rem;
    }

    .product-page__media-stage {
      display: block;
    }
  }
/* END_SECTION:product */

/* START_SECTION:products-with-text (INDEX:29) */
.products-with-text__inner {
    display: flex;
    flex-direction: column;
    gap: var(--products-with-text-content-gap-mobile, var(--spacing-20));
  }

  .products-with-text__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--products-with-text-header-gap, var(--spacing-20));
  }

  /* Below the desktop row the groups simply stack, each one full width with its own tiles
     side by side — the mobile design, where even a single-tile group keeps a full-width
     description. */
  .products-with-text__groups {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--products-with-text-groups-gap-mobile, 3rem);
  }

  .products-with-text__empty {
    color: var(--color-foreground);
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .products-with-text__inner {
      gap: var(--products-with-text-content-gap-desktop, 3rem);
    }
  }

  /* The desktop composition: every product on one line, the group boundary read only as a
     wider gap. The three row tracks are declared here and handed down through subgrid by
     `_product-group` and `_product-tile`, so medias, titles and descriptions stay aligned
     across groups. `minmax(0, max-content)` lets a group shrink under pressure rather than
     overflow the container when a merchant adds more products than the design carries. */
  @media screen and (min-width: 990px) {
    .products-with-text__groups {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, max-content);
      grid-template-rows: auto auto auto;
      justify-content: center;
      column-gap: var(--products-with-text-groups-gap-desktop, 6rem);
      row-gap: 0;
    }
  }
/* END_SECTION:products-with-text */

/* START_SECTION:push-articles (INDEX:30) */
.push-articles__header,
  .push-articles__grid {
    width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
  }

  .push-articles__header {
    margin-block-end: var(--push-articles-title-gap, var(--spacing-42));
  }

  .push-articles__title {
    color: inherit;
    max-width: 100%;
    text-wrap: pretty;
  }

  .push-articles__title > * {
    margin: 0;
  }

  /* Two columns on small screens; from 990px four fixed tracks that `auto-fit` collapses when
     fewer articles come, so `justify-content: center` centres three and a full row of four
     simply starts at the left edge. */
  .push-articles__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem var(--push-articles-gap, var(--spacing-15));
    padding: 0;
    list-style: none;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(auto-fit, calc((100% - (var(--push-articles-gap, var(--spacing-15)) * 3)) / 4));
      justify-content: center;
    }

    /* Below 1440px a short row spreads over the full width, like `push-products`. */
    @media screen and (min-width: 990px) and (max-width: 1439px) {
      grid-template-columns: repeat(var(--push-articles-fill, 4), minmax(0, 1fr));
    }
  }

  .push-articles__item,
  .push-articles__item > * {
    min-width: 0;
  }
/* END_SECTION:push-articles */

/* START_SECTION:push-pads (INDEX:31) */
.push-pads__header,
  .push-pads__grid-wrap {
    width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
  }

  .push-pads__header {
    margin-block-end: var(--spacing-20);
  }

  .push-pads__title {
    color: inherit;
    margin: 0;
    max-width: 100%;
    text-wrap: pretty;
  }

  .push-pads__title > * {
    margin: 0;
  }

  .push-pads__grid {
    display: grid;
    gap: var(--push-pads-gap);
    grid-template-columns: repeat(var(--push-pads-columns-mobile), minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .push-pads__grid-item,
  .push-pads__slide {
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .push-pads__header {
      margin-block-end: var(--spacing-50);
    }

    .push-pads__grid {
      grid-template-columns: repeat(var(--push-pads-columns-desktop), minmax(0, 1fr));
    }
  }

  .push-pads__slider-wrap {
    width: 100%;
  }

  .push-pads__slider {
    --push-pads-visible-slides: 1;
    --push-pads-inline-padding: var(--page-margin);
    /* Mobile : on rétrécit la slide d'une marge de page de chaque côté pour laisser dépasser
       les bouts des slides voisines. À partir de 750px le peek vient du nombre de slides. */
    --push-pads-slide-trim: calc(var(--push-pads-inline-padding) * 2);

    display: block;
    position: relative;

    @media screen and (min-width: 750px) {
      --push-pads-visible-slides: var(--push-pads-visible-slides-md, 2.5);
      --push-pads-slide-trim: 0px;
    }

    @media screen and (min-width: 1090px) {
      --push-pads-visible-slides: var(--push-pads-visible-slides-lg, 3.15);
    }

    @media screen and (min-width: 1500px) {
      --push-pads-visible-slides: var(--push-pads-visible-slides-xl, 3.5);
    }

    @media screen and (min-width: 1920px) {
      --push-pads-visible-slides: var(--push-pads-visible-slides-wide);
    }
  }

  .push-pads__viewport {
    overflow: hidden;
  }

  .push-pads__slider-container {
    display: flex;
    align-items: stretch;
    gap: var(--push-pads-gap);
    padding-inline: var(--push-pads-inline-padding);
  }

  .push-pads__slide {
    /* Le 100% est déjà la content-box du container (padding-inline exclu) : le redéduire hors
       du peek mobile rétrécissait les slides et décalait le centrage d'Embla. */
    flex: 0 0
      calc(
        (
            100% - var(--push-pads-slide-trim) -
              ((var(--push-pads-visible-slides) - 1) * var(--push-pads-gap))
          ) / var(--push-pads-visible-slides)
      );
  }

  /* Embla reads the end gap from the last slide's margin, never from the container's
     padding-inline-end — without this the last snap sits flush against the edge. */
  .push-pads__slide:last-child {
    margin-inline-end: var(--push-pads-inline-padding);
  }

  /* The buttons stretch to the slider's height so their hover scrim runs edge to
     edge; the disc inside is centred and keeps its own size. The inset is what the
     arrows' own padding used to provide. */
  .push-pads__navigation {
    --slider-arrow-inset: var(--spacing-10);
    align-items: stretch;
    display: flex;
    inset: 0;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    padding-inline: var(--spacing-10);
  }
/* END_SECTION:push-pads */

/* START_SECTION:push-products (INDEX:32) */
.push-products__header,
  .push-products__grid-wrap {
    width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
  }

  .push-products__header {
    margin-block-end: var(--push-products-title-gap, var(--spacing-20));
  }

  .push-products__title {
    color: inherit;
    margin: 0;
    max-width: 100%;
    text-wrap: pretty;
  }

  .push-products__title > * {
    margin: 0;
  }

  .push-products__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--push-products-gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .push-products__grid {
      /* auto-fit so unfilled columns collapse and justify-content has free space to distribute */
      grid-template-columns: repeat(
        auto-fit,
        minmax(
          0,
          calc(
            (100% - (var(--push-products-gap) * var(--push-products-grid-gaps, 2))) /
              var(--push-products-grid-columns, 3)
          )
        )
      );
      justify-content: var(--push-products-grid-align, start);
      max-inline-size: var(--push-products-grid-max-width, none);
      margin-inline: auto;
    }
  }

  /* Below 1440px a short row (three products in four columns) would keep quarter-width cards
     and squeeze their title and tags: it spreads over the full width instead, one track per
     product. From 1440px the row keeps the column width and its alignment. A lone product never
     spreads: it keeps the column width, aligned like the wider row. */
  @media screen and (min-width: 750px) and (max-width: 1439px) {
    .push-products__grid:has(> :nth-child(2)) {
      grid-template-columns: repeat(
        var(--push-products-grid-fill, 3),
        calc((100% - (var(--push-products-gap) * (var(--push-products-grid-fill, 3) - 1))) / var(--push-products-grid-fill, 3))
      );
    }
  }

  .push-products__placeholder-media {
    aspect-ratio: var(--product-image-ratio);
    overflow: clip;
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
  }

  .push-products__placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  .push-products__placeholder-title {
    display: block;
    margin-block-start: var(--spacing-12);
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
  }

  .push-products__slider-wrap {
    width: 100%;
  }

  .push-products__slider {
    --push-products-visible-slides: 1;
    --push-products-inline-padding: var(--page-margin);
    /* Mobile : on rétrécit la slide d'une marge de page de chaque côté pour laisser dépasser
       les bouts des slides voisines. À partir de 990px le peek vient du nombre de slides. */
    --push-products-slide-trim: calc(var(--push-products-inline-padding) * 2);

    position: relative;
    display: block;

    @media screen and (min-width: 990px) {
      --push-products-visible-slides: var(--push-products-visible-slides-md, 2.5);
      --push-products-slide-trim: 0px;
    }

    @media screen and (min-width: 1090px) {
      --push-products-visible-slides: var(--push-products-visible-slides-lg, 3.15);
    }

    @media screen and (min-width: 1500px) {
      --push-products-visible-slides: var(--push-products-visible-slides-xl, 3.5);
    }

    @media screen and (min-width: 1700px) {
      --push-products-visible-slides: var(--push-products-visible-slides-xxl, 4.15);
    }

    @media screen and (min-width: 1920px) {
      --push-products-visible-slides: var(--push-products-visible-slides-wide);
    }
  }

  .push-products__viewport {
    overflow: hidden;
  }

  .push-products__slider-container {
    display: flex;
    align-items: stretch;
    gap: var(--push-products-gap);
    padding-inline: var(--push-products-inline-padding);
  }

  .push-products__slide {
    border-radius: var(--media-radius);
    /* Le 100% est déjà la content-box du container (padding-inline exclu) : le redéduire hors
       du peek mobile rétrécissait les slides et décalait le centrage d'Embla. */
    flex: 0 0
      calc(
        (
            100% - var(--push-products-slide-trim) -
              ((var(--push-products-visible-slides) - 1) * var(--push-products-gap))
          ) / var(--push-products-visible-slides)
      );
    min-width: 0;
  }

  /* Embla reads the end gap from the last slide's margin, never from the container's
     padding-inline-end — without this the last snap sits flush against the edge. */
  .push-products__slide:last-child {
    margin-inline-end: var(--push-products-inline-padding);
  }

  /* The buttons stretch to the slider's height so their hover scrim runs edge to
     edge; the disc inside is centred and keeps its own size. The inset is what the
     arrows' own padding used to provide. */
  .push-products__navigation {
    --slider-arrow-inset: var(--spacing-10);
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-inline: var(--spacing-10);
  }
/* END_SECTION:push-products */

/* START_SECTION:push-recipes (INDEX:33) */
.push-recipes__header,
  .push-recipes__grid-wrap {
    width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
  }

  .push-recipes__header {
    margin-block-end: var(--push-recipes-title-gap, var(--spacing-20));
  }

  .push-recipes__title {
    color: inherit;
    margin: 0;
    max-width: 100%;
    text-wrap: pretty;
  }

  .push-recipes__title > * {
    margin: 0;
  }

  .push-recipes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--push-recipes-gap);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .push-recipes__grid {
      /* auto-fit so unfilled columns collapse and justify-content has free space to distribute */
      grid-template-columns: repeat(
        auto-fit,
        minmax(
          0,
          calc(
            (100% - (var(--push-recipes-gap) * var(--push-recipes-grid-gaps, 2))) /
              var(--push-recipes-grid-columns, 3)
          )
        )
      );
      justify-content: var(--push-recipes-grid-align, start);
      max-inline-size: var(--push-recipes-grid-max-width, none);
      margin-inline: auto;
    }
  }

  .push-recipes__placeholder-media {
    /* Same portrait ratio and radius as `snippets/recipe-card.liquid`. */
    aspect-ratio: 326 / 467;
    border-radius: 0.6rem;
    overflow: clip;
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
  }

  .push-recipes__placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  .push-recipes__slider-wrap {
    width: 100%;
  }

  .push-recipes__slider {
    --push-recipes-visible-slides: 1;
    --push-recipes-inline-padding: var(--page-margin);
    /* Mobile : on rétrécit la slide d'une marge de page de chaque côté pour laisser dépasser
       les bouts des slides voisines. À partir de 990px le peek vient du nombre de slides. */
    --push-recipes-slide-trim: calc(var(--push-recipes-inline-padding) * 2);

    position: relative;
    display: block;

    @media screen and (min-width: 990px) {
      --push-recipes-visible-slides: var(--push-recipes-visible-slides-md, 2.5);
      --push-recipes-slide-trim: 0px;
    }

    @media screen and (min-width: 1090px) {
      --push-recipes-visible-slides: var(--push-recipes-visible-slides-lg, 3.15);
    }

    @media screen and (min-width: 1500px) {
      --push-recipes-visible-slides: var(--push-recipes-visible-slides-xl, 3.5);
    }

    @media screen and (min-width: 1700px) {
      --push-recipes-visible-slides: var(--push-recipes-visible-slides-xxl, 4.15);
    }

    @media screen and (min-width: 1920px) {
      --push-recipes-visible-slides: var(--push-recipes-visible-slides-wide);
    }
  }

  .push-recipes__viewport {
    overflow: hidden;
  }

  .push-recipes__slider-container {
    display: flex;
    align-items: stretch;
    gap: var(--push-recipes-gap);
    padding-inline: var(--push-recipes-inline-padding);
  }

  .push-recipes__slide {
    /* Le 100% est déjà la content-box du container (padding-inline exclu). */
    flex: 0 0
      calc(
        (
            100% - var(--push-recipes-slide-trim) -
              ((var(--push-recipes-visible-slides) - 1) * var(--push-recipes-gap))
          ) / var(--push-recipes-visible-slides)
      );
    min-width: 0;
  }

  /* Embla reads the end gap from the last slide's margin, never from the container's
     padding-inline-end — without this the last snap sits flush against the edge. */
  .push-recipes__slide:last-child {
    margin-inline-end: var(--push-recipes-inline-padding);
  }

  /* The buttons stretch to the slider's height so their hover scrim runs edge to
     edge; the disc inside is centred and keeps its own size. The inset is what the
     arrows' own padding used to provide. */
  .push-recipes__navigation {
    --slider-arrow-inset: var(--spacing-10);
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-inline: var(--spacing-10);
  }
/* END_SECTION:push-recipes */

/* START_SECTION:quote-with-images (INDEX:34) */
.quote-with-images {
    /*
     * Une seule longueur unitaire pilote toute la composition : rayons d'orbite,
     * dimensions des médias, hauteur de scène. CSS ne sait pas produire un ratio
     * sans unité à partir de 100vw, donc on passe par une longueur que tout
     * multiplie. Elle vaut 1px à la largeur de la maquette du breakpoint — 393px
     * en mobile, 1440px en desktop — donc la géométrie Figma au pixel. Le plafond
     * à 1px est ce qui applique la contrainte de taille maximale des médias : une
     * fois la largeur de maquette atteinte, la composition ne grandit plus, elle
     * se centre.
     */
    --qwi-u: clamp(0.81px, 100vw / 393, 1px);

    /* Dimensions Figma de la maquette courante, en unités de --qwi-u. */
    --qwi-media-w: 105;
    --qwi-media-h: 150;
    --qwi-stage-h: 780;

    /*
     * Course totale de la rotation. La maquette Figma est le point de DÉPART, pas
     * le milieu : à progress 0 les médias sont exactement à leur position dessinée,
     * et ils ne tournent que vers l'avant. Remonter la page les y ramène sans
     * jamais aller au-delà.
     *
     * Course réduite en mobile : la maquette y colle les médias aux bords (20px),
     * donc chaque degré les pousse hors de l'écran bien plus vite qu'en desktop.
     *
     * ponytail: même à 15deg le média en haut à droite sort d'environ 37px sur la
     * droite en fin de course (233px du centre pour 196px de demi-écran) — il est
     * rogné par l'overflow de la section, jamais de scroll horizontal. Le supprimer
     * demanderait une course d'à peine 5deg, soit plus de mouvement du tout.
     * Si ça gêne sur device : rapprocher les rayons mobiles plutôt que baisser la
     * course, ou figer l'orbite sous 750px.
     */
    --qwi-sweep: 15deg;

    /*
     * Contient le débordement vertical de l'orbite et tout risque de scroll
     * horizontal. `clip` plutôt que `hidden` : `hidden` créerait un conteneur de
     * défilement dont personne n'a besoin ici. Le rognage se fait au bord du
     * padding, donc le padding de la section reste de la surface visible.
     */
    overflow: clip;
  }

  .quote-with-images__stage {
    position: relative;
    display: grid;
    place-items: center;

    /*
     * La hauteur de la frame Figma. Sur mobile le contenu est plus haut que ça,
     * et c'est lui qui prend la main — le minimum ne mord plus.
     *
     * ponytail: en desktop l'enveloppe du balayage monte à 600px au-dessus de l'axe
     * et 566px en dessous, contre 460px de demi-scène plus 90px de padding par
     * défaut : les médias extérieurs sont rognés d'au plus 50px en haut et 16px en
     * bas, en fin de course seulement. En mobile rien ne dépasse verticalement.
     * Aux deux breakpoints, progress 0 rend la maquette entièrement dans le cadre —
     * le rognage n'existe qu'en mouvement.
     * Pour le supprimer en desktop : paddings par défaut à var(--spacing-244).
     */
    min-block-size: calc(var(--qwi-stage-h) * var(--qwi-u));

    /* La section est full-bleed, donc elle porte elle-même la gouttière de page. */
    padding-inline: var(--page-margin);
  }

  /* ------------------------------------------------
     Contenu
     ------------------------------------------------ */

  .quote-with-images__content {
    position: relative;

    /*
     * Au-dessus des médias. La maquette mobile les range dans les bandes libres
     * au-dessus et en dessous du texte, donc au repos ils ne le croisent pas ;
     * l'empilement ne sert qu'en cours de rotation.
     */
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    text-align: center;
  }

  .quote-with-images__mark {
    /* Aucun token typographique du thème ne monte à cette taille : le guillemet est
       un ornement, pas un niveau de titre. `line-height: .5` reproduit la boîte de
       50px que Figma donne à un glyphe de 100px. */
    font-family: var(--font-heading-family);
    font-size: 10rem;
    font-style: italic;
    line-height: 0.5;
    color: var(--color-accent);
    margin-block-end: var(--spacing-10);
  }

  .quote-with-images__quote {
    inline-size: min(78rem, 100%);
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: 2.2rem;
    font-style: italic;
    line-height: var(--h2-alternate-line-height);
    color: var(--color-foreground);
    text-wrap: balance;
  }

  .quote-with-images__quote > :last-child {
    margin-block-end: 0;
  }

  .quote-with-images__flower {
    --qwi-flower-size: 4rem;

    display: block;
    margin-block-start: var(--spacing-65);
    color: var(--color-accent);
  }

  /* L'asset ship en width="48" height="48" — la taille desktop. Ces attributs de
     présentation perdent face au CSS, ce qui laisse le breakpoint décider. Les deux
     axes sont posés parce que le viewBox est carré. */
  .quote-with-images__flower svg {
    display: block;
    inline-size: var(--qwi-flower-size);
    block-size: var(--qwi-flower-size);
  }

  /* La classe `body-small` porte déjà font-weight 500 et line-height 1, soit la spec
     Figma — il ne reste que la taille, qui change de token selon le breakpoint. */
  .quote-with-images__author {
    margin-block-start: var(--spacing-15);
    font-size: var(--body-mini-size);
    color: var(--color-foreground);
  }

  /* ------------------------------------------------
     Orbite
     ------------------------------------------------ */

  .quote-with-images__orbit {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* Un point de taille nulle, exactement sur l'axe de rotation. */
  .quote-with-images__anchor {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;

    /* Les deux jeux de coordonnées arrivent en inline style ; c'est le seul endroit
       qui choisit, pour que tout le reste reste un var(--qwi-r) / var(--qwi-a0). */
    --qwi-r: var(--qwi-r-mobile);
    --qwi-a0: var(--qwi-a0-mobile);
  }

  /*
   * Deux boîtes de taille nulle empilées sur l'ancre, toutes deux pivotant autour
   * d'elle. Le bras est la seule chose animée de la paire ; le rayon est statique.
   */
  .quote-with-images__arm,
  .quote-with-images__spoke {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    transform-origin: 0 0;
  }

  /* Sans JS la variable n'existe pas, le calc retombe sur 0, et la section rend la
     composition Figma. Le repli est le design, il n'y a pas de seconde règle. */
  .quote-with-images__arm {
    rotate: calc(var(--qwi-progress, 0) * var(--qwi-sweep));
  }

  /* Pose le média sur son point d'orbite : on pivote de l'angle de repos, puis on
     s'éloigne du rayon. */
  .quote-with-images__spoke {
    transform: rotate(var(--qwi-a0)) translateX(calc(var(--qwi-r) * var(--qwi-u)));
  }

  /*
   * Le décalage d'une demi-boîte s'applique dans le repère déjà pivoté du rayon,
   * donc le centre du média coïncide avec le point d'orbite quelle que soit la
   * rotation. La contre-rotation statique annule celle du rayon : le média reste
   * droit, il ne tourne jamais sur lui-même.
   */
  .quote-with-images__media {
    position: absolute;
    inset-block-start: calc(var(--qwi-media-h) * var(--qwi-u) / -2);
    inset-inline-start: calc(var(--qwi-media-w) * var(--qwi-u) / -2);
    inline-size: calc(var(--qwi-media-w) * var(--qwi-u));
    block-size: calc(var(--qwi-media-h) * var(--qwi-u));
    overflow: clip;
    transform-origin: center;
    transform: rotate(calc(var(--qwi-a0) * -1));

    /*
     * L'exact opposé de la rotation du bras, sur la même variable : les deux
     * valeurs sont calculées dans la même passe de style, donc il n'existe aucune
     * frame où le média pourrait pencher. C'est ce qui le fait orbiter sans jamais
     * tourner sur lui-même.
     */
    rotate: calc(var(--qwi-progress, 0) * var(--qwi-sweep) * -1);
  }

  .quote-with-images__asset {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .quote-with-images__asset--placeholder {
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  /* ------------------------------------------------
     Desktop
     ------------------------------------------------ */

  @media screen and (min-width: 750px) {
    /* Bascule vers la maquette desktop : autre cadre de référence, autres
       dimensions de média, autre course. */
    .quote-with-images {
      /*
       * Plancher, et pas un simple min() : l'orbite est dimensionnée en unités
       * Figma et rétrécit donc avec l'écran, alors que la typo est sur des tokens
       * fixes qui ne rétrécissent pas. Sans plancher, l'orbite se resserre autour
       * d'un texte resté grand et les médias viennent sur la citation dans la
       * bande 750-900px. La maquette desktop tient à 2px près à 1440 (le bord bas
       * du média 1 est à y=350, le contenu commence à y=352), donc il n'y a aucune
       * marge à gratter là-dessus.
       *
       * Contrepartie assumée : à 750px les médias dépassent d'environ 85px sur les
       * côtés et sont rognés par l'overflow de la section — le même compromis qu'en
       * mobile.
       */
      --qwi-u: clamp(0.62px, 100vw / 1440, 1px);
      --qwi-sweep: 35deg;
      --qwi-media-w: 208;
      --qwi-media-h: 298;
      --qwi-stage-h: 920;
    }

    .quote-with-images__anchor {
      --qwi-r: var(--qwi-r-desktop);
      --qwi-a0: var(--qwi-a0-desktop);
    }

    .quote-with-images__quote {
      /* Le seul token du thème qui vaut 3rem en desktop, soit la valeur Figma au
         pixel. Le mode mobile de la même variable Figma vaut 22, ce que la valeur
         de base plus haut rend déjà exactement. */
      font-size: var(--h2-alternate-font-size);
    }

    .quote-with-images__flower {
      --qwi-flower-size: 4.8rem;
    }

    .quote-with-images__author {
      margin-block-start: var(--spacing-20);
      font-size: var(--body-small-size);
    }
  }
/* END_SECTION:quote-with-images */

/* START_SECTION:recipe-content (INDEX:35) */
/* The design scopes the whole page to a 1106px content box (549 image + 120
     gutter + 437 text), well inside the theme's 174rem container, so the section
     caps itself. `inline-size: 100%` is required: `.section__inner` is not used
     here and a grid child would otherwise shrink-to-fit. */
  .recipe-content__inner {
    inline-size: 100%;
    max-inline-size: 110.6rem;
    margin-inline: auto;
    display: grid;
    row-gap: 3rem;
  }

  .recipe-content__media {
    position: relative;
  }

  .recipe-content__image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 326 / 467;
    object-fit: cover;
    border-radius: 0.6rem;
  }

  /* Same pill geometry as `.product-badges__badge`, inverted onto the off-white
     ground the design uses over the photo. Copied rather than shared because
     `snippets/product-badges.liquid` is hard-wired to a `product`. */
  .recipe-content__pills {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-start: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-08);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .recipe-content__pill {
    font-size: var(--nav-size);
    line-height: var(--nav-line-height);
    letter-spacing: var(--nav-letter-spacing, 0);
    text-transform: uppercase;
    font-weight: var(--nav-weight);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: 10rem;
    background: var(--color-accent--off-white);
    color: var(--color-accent--dark-green);
    white-space: nowrap;
  }

  .recipe-content__header {
    display: grid;
    gap: 1.5rem;
  }

  .recipe-content__title {
    margin: 0;
    color: var(--color-foreground);
  }

  .recipe-content__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-12);
  }

  .recipe-content__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
  }

  .recipe-content__description {
    margin-block-start: 3rem;
    font-weight: var(--body-medium-weight);
  }

  .recipe-content__parts {
    margin-block-start: 4rem;
    display: grid;
    gap: 3.8rem;
  }

  .recipe-content__part {
    display: grid;
    gap: 2.3rem;
  }

  /* The yellow label of `.product-page__layer-title`, restated locally: that
     class lives in `component-dialog.css`, which is loaded async with the
     `media="print"` trick, so borrowing it outside a dialog means a FOUC. */
  .recipe-content__label {
    display: inline-block;
    margin: 0;
    /* The global `h1..h6` rule hands every heading the serif heading family;
       this label is a body-font pill, so it takes it back. */
    font-family: var(--font-body-family);
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: var(--line-normal);
    letter-spacing: 0;
    text-align: center;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: 0.4rem;
    background-color: var(--color-accent--yellow);
    color: var(--color-accent--brown);
  }

  /* `.body-medium` on the element carries the 15px step; only the design's 500
     weight and the `normal` line height are left to state. Without a size class
     these blocks inherited `html { font-size: 62.5% }` and rendered at 10px. */
  .recipe-content__rte {
    font-weight: var(--body-medium-weight);
    line-height: var(--line-normal);
  }

  /* `metafield_tag` interposes its own div, so every flow reset has to reach
     through it — same rule as `.product-page__layer-spec-content`. */
  .recipe-content__description > :first-child,
  .recipe-content__description > .metafield-rich_text_field > :first-child,
  .recipe-content__rte > :first-child,
  .recipe-content__rte > .metafield-rich_text_field > :first-child {
    margin-block-start: 0;
  }

  .recipe-content__description > :last-child,
  .recipe-content__description > .metafield-rich_text_field > :last-child,
  .recipe-content__rte > :last-child,
  .recipe-content__rte > .metafield-rich_text_field > :last-child {
    margin-block-end: 0;
  }

  /* Both rich texts alternate a bold paragraph ("Pour la glace :") with a list,
     flat at the root, so the `metafield_tag` wrapper is the flow container and
     `<list> + p` carries the extra step up to the design's 23px between groups. */
  .recipe-content__part .metafield-rich_text_field {
    display: flex;
    flex-direction: column;
  }

  /* The wrapper owns the rhythm through its `gap`, so the global rich-text
     `margin-block: 0 1em` must not stack on top of it. */
  .recipe-content__part :is(p, ul, ol) {
    margin-block: 0;
  }

  /* Item spacing is a margin, not a `gap` on the list: turning an `<ol>` into a
     flex container is what would cost the preparation steps their numbers. */
  .recipe-content__part--ingredients .metafield-rich_text_field {
    gap: 1rem;
  }

  .recipe-content__part--ingredients li + li {
    margin-block-start: 1rem;
  }

  .recipe-content__part--ingredients ul + p {
    margin-block-start: 1.3rem;
  }

  .recipe-content__part--preparation .metafield-rich_text_field {
    gap: 1.8rem;
  }

  .recipe-content__part--preparation li + li {
    margin-block-start: 1.8rem;
  }

  .recipe-content__part--preparation ol + p {
    margin-block-start: 0.5rem;
  }

  @media screen and (min-width: 990px) {
    .recipe-content__inner {
      grid-template-columns: minmax(0, 54.9fr) minmax(0, 43.7fr);
      column-gap: 6rem;
      align-items: start;
    }

    /* The text column runs about twice the height of the image, so the photo
       follows the read. `--header-height` is published by
       `assets/sticky-header.js`; nothing in the ancestor chain clips. */
    .recipe-content__media {
      position: sticky;
      inset-block-start: calc(var(--header-height, 0px) + 2rem);
    }
  }

  @media screen and (min-width: 1200px) {
    .recipe-content__inner {
      column-gap: 12rem;
    }
  }
/* END_SECTION:recipe-content */

/* START_SECTION:recipe-reviews (INDEX:36) */
/* Loox ships the widget's own styling; the section only owns the page rhythm
     and the max width the app's `loox-inject` block applies to its other
     widgets (`.loox-reviews-default { max-width: 1200px }`). */
  .recipe-reviews .loox-widget {
    inline-size: 100%;
    max-inline-size: 120rem;
    margin-inline: auto;
  }

  .recipe-reviews__notice {
    margin: 0;
    font-size: var(--body-size);
  }
/* END_SECTION:recipe-reviews */

/* START_SECTION:recipes-listing (INDEX:37) */
.recipes-listing__inner {
    display: block;
  }

  .recipes-listing__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.9rem;
    padding-block: 6rem 8rem;
    text-align: center;

    @media screen and (max-width: 749px) {
      padding-block: 3.4rem 5rem;
    }
  }

  .recipes-listing__title {
    margin: 0;
  }

  .recipes-listing__description {
    max-width: 61.2rem;
    text-align: center;
  }

  .recipes-listing__grid {
    --grid-gap: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: var(--grid-gap);
    grid-row-gap: calc(var(--grid-gap) * 2);
    margin: 0;
    padding: 0;
    list-style: none;

    @media screen and (max-width: 1089px) {
      grid-template-columns: repeat(2, 1fr);
    }

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

    @media screen and (min-width: 1700px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* `recipe-list.js` waits out this fade (`FADE_MS`) before swapping the cards on a filter change. */
  .recipes-listing__grid {
    transition: opacity 0.2s ease;
  }

  .recipes-listing__grid[aria-busy='true'] {
    opacity: 0;
  }

  .recipes-listing__item,
  .recipes-listing__item > * {
    min-width: 0;
  }

  .recipes-listing__more {
    display: flex;
    margin: 6rem auto 0;
  }

  .recipes-listing__more[hidden] {
    display: none;
  }

  .recipes-listing__empty {
    margin: 0;
    padding-block: 4rem;
    text-align: center;
  }
/* END_SECTION:recipes-listing */

/* START_SECTION:reinsurance-brand (INDEX:38) */
.reinsurance-brand__component {
    display: block;
  }

  .reinsurance-brand__inner {
    width: min(128rem, calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
  }

  .reinsurance-brand__desktop {
    display: none;
  }

  .reinsurance-brand__mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20);
    @media screen and (max-width: 989px) {
      padding-inline: 1.7rem;
    }
  }

  .reinsurance-brand__mobile-item {
    border: 0;
  }

  .reinsurance-brand__mobile-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--spacing-08);
    justify-content: space-between;
    list-style: none;
  }

  .reinsurance-brand__mobile-summary::-webkit-details-marker {
    display: none;
  }

  .reinsurance-brand__mobile-title,
  .reinsurance-brand__desktop-trigger {
    font-family: var(--font-heading-family);
    font-size: var(--h1-font-size);
    font-style: var(--h1-font-style);
    font-weight: 400;
    letter-spacing: var(--h1-letter-spacing);
    line-height: var(--h1-line-height);

    @media screen and (max-width: 1199px) {
      font-size: var(--h2-font-size);
    }
  }

  .reinsurance-brand__mobile-icon {
    block-size: 1.6rem;
    flex: 0 0 1.6rem;
    inline-size: 1.6rem;
    position: relative;
  }

  .reinsurance-brand__mobile-icon::before,
  .reinsurance-brand__mobile-icon::after {
    background: currentColor;
    content: '';
    inset: 50% auto auto 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease
    , opacity 0.2s ease;
  }

  .reinsurance-brand__mobile-icon::before {
    block-size: 0.1rem;
    inline-size: 100%;
  }

  .reinsurance-brand__mobile-icon::after {
    block-size: 100%;
    inline-size: 0.1rem;
  }

  .reinsurance-brand__mobile-item[open] .reinsurance-brand__mobile-icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
  }

  .reinsurance-brand__mobile-item::details-content {
    block-size: 0;
    content-visibility: hidden;
    interpolate-size: allow-keywords;
    overflow: hidden;
    transition: block-size 0.3s ease
    , content-visibility 0.3s ease allow-discrete;
  }

  .reinsurance-brand__mobile-item[open]::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .reinsurance-brand__mobile-content {
    display: grid;
    grid-template-columns: minmax(13.8rem, 13.8rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--spacing-20);
    padding-block-start: var(--spacing-20);
    padding-block-end: var(--spacing-15);
  }

  .reinsurance-brand__mobile-description,
  .reinsurance-brand__desktop-description {
    color: color-mix(in oklab, currentColor 82%, transparent);
    font-size: var(--body-size);
  }

  .reinsurance-brand__desktop-description,
  .reinsurance-brand__mobile-description {
    p {
      margin: 0;
    }
  }

  .reinsurance-brand__desktop-media,
  .reinsurance-brand__mobile-media,
  .reinsurance-brand__video-wrap {
    display: flex;
    inline-size: 100%;
  }

  .reinsurance-brand__mobile-description {
    display: flex;
    height: 100%;
    align-items: center;
  }

  .reinsurance-brand__media-image,
  .reinsurance-brand__media-video {
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    border-radius: var(--media-radius);
  }

  .reinsurance-brand__media-video {
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  @media screen and (min-width: 990px) {
    .reinsurance-brand__desktop {
      align-items: start;
      column-gap: var(--spacing-65);
      display: grid;
      grid-template-columns: 20.8rem minmax(0, 1fr) 20.8rem;
    }

    .reinsurance-brand__mobile {
      display: none;
    }

    .reinsurance-brand__desktop-stage {
      display: grid;
      align-content: start;
      min-block-size: 1px;
    }

    .reinsurance-brand__desktop-stage--left .reinsurance-brand__desktop-pad:first-of-type,
    .reinsurance-brand__desktop-stage--right .reinsurance-brand__desktop-pad:first-of-type {
      margin-top: -3.4rem;
    }

    .reinsurance-brand__desktop-list {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-12);
      min-inline-size: 0;
    }

    .reinsurance-brand__desktop-trigger {
      appearance: none;
      background: transparent;
      border: 0;
      color: inherit;
      cursor: pointer;
      display: block;
      inline-size: 100%;
      padding: 0;
      text-align: center;
      text-wrap: balance;
      transition: opacity 0.45s ease;
    }

    .reinsurance-brand__desktop-trigger:focus-visible {
      outline: var(--focus-ring);
      outline-offset: 0.4rem;
    }

    .reinsurance-brand__desktop-pad {
      display: grid;
      gap: var(--spacing-15);
      grid-area: 1 / 1;
      opacity: 0;
      pointer-events: none;
      transform: translateY(1rem);
      transition: opacity 0.45s ease
      , transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)
      , visibility 0.45s ease;
      visibility: hidden;
    }

    .reinsurance-brand__desktop-pad[data-active='true'] {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      visibility: visible;
    }

    .reinsurance-brand__component[data-has-active='true'] .reinsurance-brand__desktop-trigger[data-active='false'] {
      opacity: 0.2;
    }

    .reinsurance-brand__component[data-has-active='true'] .reinsurance-brand__desktop-trigger[data-active='true'] {
      opacity: 1;
    }
  }

  @media (hover: hover) and (min-width: 990px) {
    .reinsurance-brand__desktop-trigger:hover {
      opacity: 1;
    }
  }
/* END_SECTION:reinsurance-brand */

/* START_SECTION:reinsurance (INDEX:39) */
/* Full-bleed variant: the section spans the grid, so the track needs its own
     content-width wrapper to line back up with the rest of the page. */
  .reinsurance--full-width .reinsurance__slider {
    display: block;
    inline-size: var(--content-width);
    margin-inline: auto;
  }

  .reinsurance--top-border {
    border-block-start: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
  }

  .reinsurance__viewport {
    overflow: hidden;
  }

  .reinsurance__list {
    display: flex;
  }

  .reinsurance__item {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    gap: var(--spacing-15);
    min-width: 0;
    text-align: center;
  }

  .reinsurance__title {
    color: var(--color-foreground);
    font-family: var(--font-body-family);
    font-size: var(--nav-size);
    font-weight: var(--nav-weight);
    line-height: var(--nav-line-height);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .reinsurance__text {
    color: var(--color-foreground);
    font-family: var(--font-body-family);
    font-size: var(--body-small-size);
    font-weight: var(--body-weight);
    line-height: var(--body-small-line-height);
    letter-spacing: 0;
    text-wrap: pretty;
  }

  .reinsurance__dots {
    display: flex;
    justify-content: center;
    margin-block-start: calc(3rem - var(--spacing-10));
  }

  .reinsurance__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 24 x 24px around a 4px dot: the WCAG 2.5.8 minimum touch target. */
    padding: var(--spacing-10);
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .reinsurance__dot::after {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: color-mix(in oklab, var(--color-foreground) 25%, transparent);
  }

  .reinsurance__dot--active::after {
    background: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .reinsurance__viewport {
      overflow: visible;
    }

    .reinsurance__list {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, max-content);
      justify-content: space-between;
      gap: var(--spacing-20);
    }

    .reinsurance__item {
      flex: initial;
      max-width: 26rem;
      text-align: left;
    }

    .reinsurance__dots {
      display: none;
    }
  }
/* END_SECTION:reinsurance */

/* START_SECTION:richtext (INDEX:40) */
.richtext-section__inner {
    width: min(calc(100vw - (var(--page-margin) * 2)), var(--content-max-width));
    margin-inline: auto;
  }

  .richtext-section__blocks {
    display: grid;
    gap: var(--spacing-22);
  }
/* END_SECTION:richtext */

/* START_SECTION:scroll-banner (INDEX:41) */
.scroll-banner {
    --scroll-banner-step-gap: var(--spacing-20);
    --scroll-banner-step-opacity: 0.34;
    --scroll-banner-fade: 600ms;
    --scroll-banner-content-gap: var(--spacing-50);
  }

  .scroll-banner__track {
    display: block;
  }

  /*
   * `relative`: the absolutely positioned media layers resolve against it. `min-block-size`, so a
   * long list on a short viewport grows the banner instead of being clipped.
   */
  .scroll-banner__pin {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    place-items: center;
  }

  .scroll-banner__media {
    position: absolute;
    inset: 0;
  }

  .scroll-banner__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--scroll-banner-fade) ease;
  }

  .scroll-banner__layer[data-active='true'] {
    opacity: 1;
  }

  .scroll-banner__layer > picture {
    display: block;
    block-size: 100%;
  }

  /*
   * No border-radius + overflow clip and no isolation on the frame: a video inside an extra
   * clip or stacking context is the documented cause of empty-painting videos in this theme.
   */
  .scroll-banner__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .scroll-banner__asset--placeholder {
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  .scroll-banner__scrim {
    position: absolute;
    inset: 0;
    background: var(--scroll-banner-scrim, transparent);
  }

  .scroll-banner__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--scroll-banner-content-gap);
    width: 100%;
    text-align: center;
    color: var(--color-foreground);
    padding-inline: var(--page-margin);
    padding-block: var(--spacing-45);
  }

  .scroll-banner__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-15);
  }

  .scroll-banner__description {
    max-width: 64rem;
  }

  .scroll-banner__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--scroll-banner-step-gap);
  }

  /* The Figma "bloc anim fp" set: Urbanist, 22px mobile / 32px desktop, weight 500. */
  .scroll-banner__step-button {
    font-family: var(--family-primary);
    font-size: var(--fp-size);
    font-weight: var(--fp-weight);
    line-height: normal;
    letter-spacing: 0;
    color: inherit;
    opacity: var(--scroll-banner-step-opacity);
    transition: opacity 240ms ease;
  }

  .scroll-banner__step-button[aria-pressed='true'] {
    opacity: 1;
  }

  .scroll-banner__step-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 0.4rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .scroll-banner__step-button:hover {
      opacity: 1;
    }
  }

  .scroll-banner--empty {
    padding-block: var(--spacing-45);
  }

  @media screen and (min-width: 750px) {
    .scroll-banner {
      --scroll-banner-step-gap: var(--spacing-22);
      --scroll-banner-content-gap: var(--spacing-65);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .scroll-banner__layer,
    .scroll-banner__step-button {
      transition: none;
    }
  }
/* END_SECTION:scroll-banner */

/* START_SECTION:search-layer-results (INDEX:42) */
.search-layer-results {
    padding-block-end: var(--spacing-45);
  }

  .search-layer-results__title {
    margin: 0 0 var(--spacing-20);
  }

  .search-layer-results__actions {
    display: flex;
    justify-content: center;
    margin-block-start: var(--spacing-45);
  }

  .search-layer-results__empty {
    margin: 0;
  }
/* END_SECTION:search-layer-results */

/* START_SECTION:search-layer (INDEX:43) */
.search-layer {
    display: block;
  }

  /*
    How far down the viewport the layer starts. The panel deliberately covers the
    header; the only thing it leaves visible is the announcement bar, and only
    while that bar is on screen — which is exactly what `at-top` means.

    The bar's own height is published nowhere, but it is the difference between
    the two heights `sticky-header.js` writes on `:root`, and that resolves to
    `0px` on its own when there is no announcement bar at all.

    Declared on the dialog *and* on its `::backdrop`, because whether a backdrop
    inherits from its originating element or from the root is a recent change and
    not worth betting the layout on.
  */
  .search-layer__dialog,
  .search-layer__dialog::backdrop {
    --search-layer-offset: 0px;
  }

  sticky-header.at-top .search-layer__dialog,
  sticky-header.at-top .search-layer__dialog::backdrop {
    --search-layer-offset: calc(var(--header-group-height, 0px) - var(--header-height, 0px));
  }

  /* No z-index: a modal dialog is in the top layer, above every stacking context */
  .search-layer__dialog {
    all: unset;
    display: none;
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--search-layer-offset);
    background: var(--color-background);
    color: var(--color-foreground);
    /* Height follows the content, capped at what is left under the bar.
       `svh`, not `dvh`: a collapsing mobile URL bar must not resize the panel. */
    max-block-size: calc(100svh - var(--search-layer-offset));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .search-layer__dialog::backdrop {
    inset-block-start: var(--search-layer-offset);
  }

  .search-layer__dialog[open] {
    display: block;
    animation: search-layer-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .search-layer__dialog.dialog-closing {
    animation: search-layer-out 160ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
  }

  /*
    The shared backdrop fade is written for the 300/250ms drawers. Its animation
    hangs off `.dialog-opening` / `.dialog-closing`, and both classes are dropped
    as soon as the *dialog's own* animation ends — so on this shorter panel the
    backdrop would be cut mid-fade and snap. Keep the shared keyframes, match the
    durations.
  */
  .search-layer__dialog.dialog-opening::backdrop {
    animation-duration: 220ms;
  }

  .search-layer__dialog.dialog-closing::backdrop {
    animation-duration: 160ms;
  }

  /* Same motion as the header menus, so the two read as one system: a fade alone
     reads as a cut, and the translate is compositor-only so it costs nothing. */
  @keyframes search-layer-in {
    from {
      opacity: 0;
      translate: 0 -0.8rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  @keyframes search-layer-out {
    from {
      opacity: 1;
      translate: 0 0;
    }
    to {
      opacity: 0;
      translate: 0 -0.6rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .search-layer__dialog[open],
    .search-layer__dialog.dialog-closing {
      animation: none;
    }
  }

  .search-layer__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-margin);

    @media screen and (min-width: 1500px) {
      --page-width: 150rem;
    }
  }

  .search-layer__form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--search-layer-close-gap, 6rem);
    padding-block: 5.7rem;

    /* Below this the 6rem gap costs the field more room than the button is worth. */
    @media screen and (max-width: 749px) {
      --search-layer-close-gap: var(--spacing-20);
    }
  }

  /* Shrinks rather than holding its width: the button and the gap now share this
     row, and a field pinned to 100% would push them off a narrow screen. */
  .search-layer__field {
    flex: 0 1 66.8rem;
    min-width: 0;
  }

  .search-layer__field .input__icon {
    width: 1.6rem;
    height: 1.4rem;
  }

  /* A bare glyph rather than the accent pastille the reset carries elsewhere: it
     sits inside the field, where a filled circle would compete with the input's
     own border for the eye. */
  .search-layer__field .input__reset {
    width: 1.2rem;
    height: 1.2rem;
    background-color: transparent;
    border-radius: 0;
    color: var(--color-foreground);
  }

  .search-layer__close {
    flex-shrink: 0;
    color: var(--color-accent--dark-green);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 0.3rem;
  }

  @media (hover: hover) and (pointer: fine) {
    .search-layer__close:hover {
      opacity: 0.7;
    }
  }

  /*
    One of the two lists at a time: the query result replaces the default one.

    Driven by the state attribute alone, never by `:empty`. A slot hidden because
    it is still empty is hidden at the exact moment the slider inside it is being
    upgraded, and Embla would measure a zero-width viewport.
  */
  .search-layer[data-search-state='results'] .search-layer__products {
    display: none;
  }

  .search-layer[data-search-state='idle'] .search-layer__results {
    display: none;
  }

  /* The previous list stays in place while the next query is in flight, so
     typing never flashes an empty panel. */
  .search-layer[data-search-loading='true'] .search-layer__products,
  .search-layer[data-search-loading='true'] .search-layer__results {
    opacity: 0.5;
  }

  .search-layer__products,
  .search-layer__results {
    transition: opacity 150ms ease;
  }

  .search-layer__products {
    padding-block-end: var(--spacing-45);
  }

  .search-layer__heading {
    margin: 0 0 var(--spacing-20);
  }
/* END_SECTION:search-layer */

/* START_SECTION:search (INDEX:44) */
.search-page__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.9rem;
    padding-block-end: 8rem;
    text-align: center;

    @media screen and (max-width: 749px) {
      padding-block-end: 5rem;
    }
  }

  .search-page__title {
    margin: 0;
  }

  .search-page__description {
    max-width: 61.2rem;
  }

  /* The field keeps the layer's 66.8rem, so the two searches look like one
     control that moved rather than two different ones. */
  .search-page__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-12);
    width: min(66.8rem, 100%);
    margin-block-start: 1.2rem;
  }

  .search-page__field {
    flex: 1 1 28rem;
    min-width: 0;
  }

  .search-page__field .input__icon {
    width: 1.6rem;
    height: 1.4rem;
  }

  .search-page__submit {
    flex: 0 0 auto;
  }

  .search-page__count,
  .search-page__empty-heading {
    margin: 0 0 var(--spacing-22);
  }

  .search-page__empty-message {
    margin: 0 0 var(--spacing-45);
    text-align: center;
  }

  /* Identical to `.collection-page__products`. */
  .search-page__grid {
    --grid-gap: 1.5rem;
    display: grid;
    grid-column-gap: var(--grid-gap);
    grid-row-gap: calc(var(--grid-gap) * 2);
    grid-template-columns: repeat(3, 1fr);

    @media screen and (max-width: 1089px) {
      grid-template-columns: repeat(2, 1fr);
    }

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

    @media screen and (min-width: 1700px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .search-page__item,
  .search-page__item > * {
    min-width: 0;
  }

  .search-page__item > product-card {
    background-color: #fff;
  }

  .search-page__grid + .pagination {
    margin-block-start: var(--spacing-65);
  }
/* END_SECTION:search */

/* START_SECTION:ugc (INDEX:45) */
.ugc {
    --ugc-gap: 7.8rem;
    --ugc-content-width: 44rem;
    --ugc-visible-slides: 1.22;
    --ugc-slide-gap: var(--spacing-15);
    --ugc-inline-end-bleed: calc((100vw - min(calc(100vw - (var(--page-margin) * 2)), var(--content-max-width))) / 2);

    overflow-x: clip;
  }

  .ugc__inner {
    width: min(calc(100vw - (var(--page-margin) * 2)), var(--content-max-width));
    margin-inline: auto;
  }

  .ugc__layout {
    display: grid;
    gap: var(--spacing-42);
  }

  .ugc__content {
    display: grid;
    gap: var(--spacing-10);
  }

  .ugc__title h2 {
    @media screen and (max-width: 749px) {
      align-self: flex-start;
    }
  }

  .ugc__slider {
    position: relative;
    display: block;
    inline-size: calc(100% + var(--ugc-inline-end-bleed));

    @media screen and (min-width: 750px) {
      --ugc-visible-slides: 1.8;
    }

    @media screen and (min-width: 990px) {
      --ugc-visible-slides: 2.1;
    }

    @media screen and (min-width: 1200px) and (max-width: 1299px) {
      --ugc-visible-slides: 1.8;
    }

    @media screen and (min-width: 1300px) {
      --ugc-visible-slides: 2.2;
    }

    @media screen and (min-width: 1650px) {
      --ugc-visible-slides: 2.5;
    }
  }

  .ugc__viewport {
    overflow: hidden;
    padding-inline-end: var(--ugc-inline-end-bleed);
  }

  @media screen and (max-width: 749px) {
    .ugc__slider {
      inline-size: calc(100% + var(--page-margin) * 2);
      margin-inline-start: calc(var(--page-margin) * -1);
    }

    .ugc__viewport {
      padding-inline-start: var(--page-margin);
    }
  }

  .ugc__slider-container {
    display: flex;
    align-items: stretch;
    gap: var(--ugc-slide-gap);
  }

  .ugc__slide {
    flex: 0 0 calc((100% - ((var(--ugc-visible-slides) - 1) * var(--ugc-slide-gap))) / var(--ugc-visible-slides));
    min-width: 0;
  }

  /* The buttons stretch to the slider's height so their hover scrim runs edge to
     edge; the disc inside is centred and keeps its own size. The inset is what the
     arrows' own padding used to provide. */
  .ugc__navigation {
    --slider-arrow-inset: 3.4rem;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    pointer-events: none;
    padding-inline: 3.4rem;

    @media screen and (max-width: 989px) {
      --slider-arrow-inset: 1.7rem;
      padding-inline: 1.7rem;
    }
  }

  @media screen and (min-width: 1200px) {
    .ugc__layout {
      grid-template-columns: minmax(0, var(--ugc-content-width)) minmax(0, 1fr);
      gap: var(--ugc-gap);
      align-items: center;
    }
  }

  @media screen and (max-width: 1399px) {
    .ugc__layout {
      gap: 3rem;
    }
    
  }
/* END_SECTION:ugc */

/* START_SECTION:visuals-in-columns (INDEX:46) */
/* Declared rather than defaulted at each `var()`: the gap sits under a division bar in the
     desktop track size, and an unresolved custom property there invalidates the whole track. The
     section's inline style overrides this on the same element. */
  .visuals-in-columns {
    --visuals-in-columns-gap: var(--spacing-15);
    --visuals-in-columns-header-gap: var(--spacing-20);
    --visuals-in-columns-content-gap: 3rem;
  }

  /* The section is full width so the columns can bleed into a scroller on mobile; the copy above
     them still has to sit on the standard content edges. */
  .visuals-in-columns__header,
  .visuals-in-columns__empty {
    width: min(calc(var(--page-width) - (var(--page-margin) * 2)), calc(100vw - (var(--page-margin) * 2)));
    margin-inline: auto;
  }

  .visuals-in-columns__header {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    align-items: center;
    gap: var(--visuals-in-columns-header-gap);
    margin-block-end: var(--visuals-in-columns-content-gap);
  }

  .visuals-in-columns__empty {
    color: var(--color-foreground);
    text-align: center;
  }

  .visuals-in-columns__slider {
    position: relative;
    display: block;
  }

  /* Three columns, always: the count is the design, not a setting. Below 750px they no longer fit
     and the row becomes a swipeable scroller showing one card and a peek of its neighbours — the
     mobile design. `safe center` centres them while they fit and reverts to `start` when they do
     not, where plain `center` would push the first column past the start edge, unreachable. The
     cards snap on their centre (`scroll-snap-align: center`), matching the Embla sliders; the
     scroll bounds clamp the first and last the way Embla's `trimSnaps` does. */
  .visuals-in-columns__columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(25.4rem, 75%);
    justify-content: safe center;
    column-gap: var(--visuals-in-columns-gap);
    padding-inline: var(--page-margin);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .visuals-in-columns__columns::-webkit-scrollbar {
    display: none;
  }

  /* Overlaid on the scroller rather than parked under it, and only ever shown while the row
     overflows — which is the mobile range alone, so the component's own `hidden` toggle does the
     job of a media query. Same arrow treatment as `push-products` and `push-pads`: a full-height
     hit area at each edge that reveals a gradient scrim on hover, the glyph centred in it — white
     rather than the accent, and carrying the scroll affordance on its own, since this scroller
     deliberately skips the theme's `scroll-hint` edge fade. */
  /* The buttons stretch to the slider's height so their hover scrim runs edge to
     edge; the disc inside is centred and keeps its own size. The inset is what the
     arrows' own padding used to provide. */
  .visuals-in-columns__nav {
    --slider-arrow-inset: var(--spacing-10);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    pointer-events: none;
    padding-inline: var(--spacing-10);
  }

  /* An author `display` beats the UA sheet's `[hidden]` rule whatever the specificity, so the
     attribute the component toggles needs its own declaration to mean anything. */
  .visuals-in-columns__nav[hidden] {
    display: none;
  }

  /* 32.6rem is the drawn card; the fraction takes over on the narrow half of the range so three
     columns and two gaps always fit the content width rather than overflowing into a scroller. */
  @media screen and (min-width: 750px) {
    .visuals-in-columns__columns {
      grid-auto-columns: min(32.6rem, calc((100% - (2 * var(--visuals-in-columns-gap))) / 3));
    }
  }
/* END_SECTION:visuals-in-columns */

/* CSS from block stylesheet tags */
/* START_BLOCK:_comparator-product (INDEX:47) */
/* Every column spans the whole row stack the section declared and subgrids onto it, which is
     what keeps the separators on one line across the comparator. Trailing tracks no column
     fills collapse to zero on their own. */
  .comparator-column {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: 0;
    min-inline-size: 0;
    scroll-snap-align: start;
  }

  /* Everything below is scoped to `.comparator-column` on purpose: `product-card` is tuned for
     the 385-440px and the one-card-per-row it gets everywhere else, and touching the card itself
     would change every collection page. Here it is 168-492px wide and sits in a row track shared
     with every other column, which is what each of these rules answers for.

     The media carries no ratio of its own (`height: auto`, `object-fit: contain`), so a tin, a
     pouch and a jar each give their card a different height; the shared track takes the tallest
     and the rest are stretched around a floating photo. Pinning the viewport to the drawn box
     makes every column the same shape and lets the image scale with the column. */
  .comparator-column .product-card__viewport {
    /* 326x468 desktop, 169x243 mobile — the same box in both Figma frames, and taller than the
       theme's `--product-image-ratio` (5/6), which is why it is spelled out rather than reused. */
    aspect-ratio: 169 / 243;
  }

  .comparator-column .product-card__image {
    block-size: 100%;
  }

  /* `media--radius` rounds the whole card. Below 1089 the info drops under the media inside that
     same card, so the card's bottom corners sit under the tags and the media's are square. The
     white box is the viewport's own background, so the viewport is what gets the radius; it
     already clips, and holds an <img> only — no video for the radius + clip pitfall to bite. */
  .comparator-column :is(.product-card__viewport, .product-card__hover-media img) {
    border-radius: var(--media-radius);
  }

  /* The overlay's own padding is `calc(var(--spacing-22) + 0.5rem)`, which eats 5.4rem of a
     column this narrow. 20px is what the Figma card carries anyway. */
  .comparator-column .product-card--standard .product-card__info {
    padding-block: var(--spacing-20);
    padding-inline: var(--spacing-20);
  }

  /* The title is a flex item, so `min-width: auto` floors it at min-content — one long unbreakable
     product name is then wider than the column and `product-card`'s `overflow: hidden` clips it
     instead of wrapping. The tag row is a `flex` with no `wrap`, so a second tag runs off the
     same edge. */
  .comparator-column .product-card__title {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .comparator-column .product-card__tags {
    flex-wrap: wrap;
  }

  /* The price lives in the column's own "Prix" row, which can span tins and refills. The mode
     class is needed to outrank `.product-card--standard .product-card__price`, loaded later. */
  .comparator-column .product-card--standard .product-card__price {
    display: none;
  }

  /* The mobile Figma draws the card differently: title and tags under the media rather than
     over it. The overrides below do it without rebuilding the card and without touching
     `standard` mode, which every collection grid also renders. */
  @media screen and (max-width: 1088px) {
    /* At this width a title wraps to two lines for one product and not the next, and the tag row
       wraps for three tags and not two — so the cards are 319 to 367 tall and the shared row track
       takes the tallest. That 48px of slack has to land somewhere, and the two candidates are
       under the price or after the photo.

       It goes after the photo. The rows below the card are ruled lines, so a gap that varies by
       column right above the first one reads as a broken rule; the same variation under a photo
       reads as breathing room. `1fr` on the implicit row is what collects it, which only works
       with the explicit `1fr` in row 2 turned off — otherwise the two share the slack and half of
       it inflates the media box. Rows 1-4 hold no free space either way, so the quick-add button
       and the pagination dots do not move. */
    .comparator-column > product-card {
      grid-template-rows: auto auto auto auto;
      grid-auto-rows: 1fr;
    }

    /* `product-card` puts the media and all of its overlays on `1 / -1`, and `-1` is the last
       *explicit* line — so the first implicit row clears every one of them with no other
       placement touched. `end` is what puts every column's price the same distance above its
       first comparison row. */
    .comparator-column .product-card--standard .product-card__info {
      position: static;
      grid-row: -1 / auto;
      align-self: end;
      padding-inline: 0;
      padding-block: var(--spacing-12) 0;
    }

    /* The info drops under the media here, so the badge leaves the info flow to stay on the
       photo, top-right like the desktop title row puts it. `product-card` is already
       `position: relative`. On desktop the title row's own `space-between` + `wrap-reverse`
       already pins it right and lifts it above a title too long to share the line. */
    .comparator-column .product-card .product-badges {
      position: absolute;
      inset-block-start: var(--spacing-15);
      inset-inline-end: var(--spacing-15);
    }
  }

  .comparator-column__placeholder-media {
    aspect-ratio: 169 / 243;
    overflow: clip;
    background: color-mix(in oklab, var(--color-foreground) 6%, var(--color-background));
  }

  .comparator-column__placeholder-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  .comparator-column__placeholder-title {
    display: block;
    margin-block-start: var(--spacing-12);
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
  }
/* END_BLOCK:_comparator-product */

/* START_BLOCK:_comparator-row (INDEX:48) */
/* Margins rather than a row gap: a column shares its tracks with every other column through
     subgrid, and a grid gap is one value for every gutter it spans. */
  .comparator-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    padding-block-start: 1.8rem;
    min-inline-size: 0;
    color: var(--color-foreground);
  }

  /* The rule sits between two rows, never above the lead sentence — which follows the card,
     not another row, so the adjacent sibling selector is the whole condition. */
  .comparator-row + .comparator-row {
    margin-block-start: 1.8rem;
    border-block-start: 1px solid var(--color-border);
  }

  /* Figma: the heading carries the weight and the accent, the value under it is small print. */
  .comparator-row__label {
    font-size: var(--body-size);
    font-weight: 700;
    line-height: var(--line-normal);
    color: var(--color-accent);
  }

  .comparator-row__value {
    font-size: var(--body-mini-size);
    font-weight: 500;
    line-height: var(--line-normal);
    text-wrap: pretty;
  }

  /* The lead sentence has no heading, so it keeps body size to stay readable on its own. */
  .comparator-row--lead .comparator-row__value {
    font-size: var(--body-size);
  }

  .comparator-row__value > * {
    margin: 0;
  }

  .comparator-row__value > * + * {
    margin-block-start: var(--spacing-04);
  }

  /* `<strong>` carries the accent colour, not extra weight — that is how a merchant marks the
     green opening words of the lead sentence, which the design keeps at the medium weight.
     `!important` for the same reason `base.css` needs it on `h1..h6 strong`: the colour-scheme
     reset in `snippets/color-schemes.liquid` matches unclassed inline elements at (0,2,1), and
     richtext output carries no class to opt out with. */
  .comparator-row__value :is(strong, b) {
    font-weight: inherit;
    color: var(--color-accent) !important;
  }
/* END_BLOCK:_comparator-row */

/* START_BLOCK:_faq-category (INDEX:49) */
.faq-category {
    display: grid;
    gap: var(--spacing-22);
  }

  .faq-category__title {
    color: var(--color-foreground);
    text-wrap: pretty;
  }

  .faq-category__items {
    display: grid;
  }
/* END_BLOCK:_faq-category */

/* START_BLOCK:_faq-question (INDEX:50) */
.faq-question {
    border-block-start: 1px solid var(--color-border);
  }

  .faq-question__summary {
    align-items: center;
    color: var(--color-foreground);
    cursor: pointer;
    display: flex;
    gap: var(--spacing-20);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--spacing-20);
  }

  .faq-question__summary::-webkit-details-marker {
    display: none;
  }

  .faq-question__summary:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
  }

  .faq-question__label {
    font-family: var(--font-body-family);
    font-size: var(--body-large-size);
    font-weight: var(--body-bold-weight);
    letter-spacing: 0;
    line-height: normal;
    text-wrap: pretty;
  }

  .faq-question__icon {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    transition: rotate 0.2s ease;
  }

  .faq-question__icon svg {
    block-size: 0.7rem;
    display: block;
    inline-size: 1.1rem;
  }

  .faq-question[open] .faq-question__icon {
    rotate: 180deg;
  }

  .faq-question::details-content {
    block-size: 0;
    content-visibility: hidden;
    interpolate-size: allow-keywords;
    overflow: hidden;
    transition:
      block-size 0.25s ease,
      content-visibility 0.25s ease allow-discrete;
  }

  .faq-question[open]::details-content {
    block-size: auto;
    content-visibility: visible;
  }

  .faq-question__answer-inner {
    color: var(--color-foreground);
    padding-block-end: var(--spacing-20);
    padding-inline-end: var(--spacing-42);
    text-wrap: pretty;
  }

  @media screen and (min-width: 750px) {
    .faq-question__summary {
      padding-block: 2.5rem;
    }

    .faq-question__answer-inner {
      padding-block-end: 2.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-question__icon,
    .faq-question::details-content {
      transition: none;
    }
  }
/* END_BLOCK:_faq-question */

/* START_BLOCK:_hero-logo (INDEX:51) */
/* The player overlays the static wordmark and takes over once Lottie is ready. It draws
     the whole 758x220 canvas, offset so its wordmark box (104 50.2 505.6 117.1) lands on
     the static logo: Safari clips an svg to its own box, so the seal must fit inside it. */
  .hero-logo {
    position: relative;
    display: grid;
    inline-size: min(100%, var(--hero-logo-width));
    margin-inline: auto;
  }

  .hero-logo > * {
    grid-area: 1 / 1;
  }

  .hero-logo svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .hero-logo path {
    fill: currentColor;
  }

  .hero-logo__player {
    position: absolute;
    top: 0;
    left: calc(-104 / 505.6 * 100%);
    width: calc(758 / 505.6 * 100%);
    /* A vertical margin resolves against the width, so the offset scales with the
       logo exactly — the box's height rounds to whole pixels and would not. */
    margin-top: calc(-50.2 / 505.6 * 100%);
    visibility: hidden;
  }

  .hero-logo[data-ready] .hero-logo__player {
    visibility: visible;
  }

  .hero-logo[data-ready] .hero-logo__static {
    visibility: hidden;
  }
/* END_BLOCK:_hero-logo */

/* START_BLOCK:_hero-newsletter (INDEX:52) */
.hero-newsletter {
    inline-size: min(100%, 48rem);
    margin-inline: auto;
    text-align: center;
  }

  .hero-newsletter .input__wrapper > .input {
    background: transparent;
    border-color: color-mix(in oklab, currentColor 72%, transparent);
    border-radius: 0.4rem;
    color: inherit;
    font-size: var(--body-size);
    line-height: normal;
    min-height: 5rem;
    padding-inline: 1.1rem 1.7rem;
  }

  .hero-newsletter .input::placeholder {
    color: color-mix(in oklab, currentColor 72%, transparent);
  }

  .hero-newsletter .input__button,
  .hero-newsletter .input__button:hover {
    background: transparent;
    color: inherit;
    width: 7.2rem;
  }

  .hero-newsletter .input__button svg {
    block-size: 1.5rem;
    inline-size: 1.2rem;
  }

  .hero-newsletter__message {
    margin-top: 1.2rem;
  }

  .hero-newsletter__message p {
    margin: 0;
  }
/* END_BLOCK:_hero-newsletter */

/* START_BLOCK:_hero-panel (INDEX:53) */
.hero-panel {
    position: relative;
    display: grid;
    aspect-ratio: var(--hero-panel-desktop-aspect-ratio);
    min-height: var(--hero-panel-desktop-min-height, 0);
    overflow: hidden;
    background: color-mix(in oklab, var(--color-background) 82%, var(--color-foreground));
    isolation: isolate;
  }

  .hero-panel--desktop-viewport {
    aspect-ratio: auto;
    min-height: var(--hero-panel-desktop-min-height);
  }

  .hero-panel--linked {
    color: inherit;
    text-decoration: none;
  }

  .hero-panel__media,
  .hero-panel__overlay,
  .hero-panel__content {
    grid-area: 1 / 1;
  }

  .hero-panel__media {
    position: relative;
    min-height: 100%;
  }

  .hero-panel__media-item,
  .hero-panel__media-placeholder {
    position: absolute;
    inset: 0;
  }

  .hero-panel__media-item--mobile {
    display: none;
  }

  .hero-panel__media-item--desktop {
    display: block;
  }

  .hero-panel__media-item picture,
  .hero-panel__media-item img,
  .hero-panel__media-item video,
  .hero-panel__media-placeholder {
    width: 100%;
    height: 100%;
  }

  .hero-panel__media-item img,
  .hero-panel__media-item video,
  .hero-panel__media-placeholder {
    object-fit: cover;
  }

  .hero-panel__media-placeholder {
    background: linear-gradient(135deg, rgb(255 255 255 / 0.06), transparent),
      color-mix(in oklab, var(--color-background) 88%, var(--color-foreground));
  }

  .hero-panel__placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    fill: color-mix(in oklab, var(--color-foreground) 18%, transparent);
  }

  .hero-panel__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-panel-overlay-color);
    opacity: var(--hero-panel-overlay-opacity);
    pointer-events: none;
    z-index: 1;
  }

  .hero-panel__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: var(--hero-panel-content-vertical);
    justify-content: var(--hero-panel-content-horizontal);
    padding-block: 5rem;
    padding-inline: 4.5rem;
    min-width: 0;
  }

  .hero-panel__content-body {
    display: grid;
    gap: var(--hero-panel-content-gap);
    width: min(100%, var(--hero-panel-content-max-width));
    text-align: var(--hero-panel-text-alignment);
  }

  .hero-panel__content-body > * {
    min-width: 0;
  }

  .hero-panel__content-body--horizontal {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--hero-panel-content-vertical);
    justify-content: var(--hero-panel-content-horizontal);
    width: 100%;
    max-width: none;
  }

  @media screen and (max-width: 749px) {
    .hero-panel {
      aspect-ratio: var(--hero-panel-mobile-aspect-ratio);
      min-height: var(--hero-panel-mobile-min-height, 0);
    }

    .hero-panel--mobile-viewport {
      aspect-ratio: auto;
      min-height: var(--hero-panel-mobile-min-height);
    }

    .hero-panel__content {
      align-items: var(--hero-panel-mobile-content-vertical);
      justify-content: var(--hero-panel-mobile-content-horizontal);
    }

    .hero-panel__media-item--mobile {
      display: block;
    }

    .hero-panel__media-item--desktop {
      display: none;
    }

    .hero-panel__content-body--horizontal {
      display: grid;
      width: min(100%, var(--hero-panel-content-max-width));
    }

    .hero-panel__content-body {
      text-align: var(--hero-panel-mobile-text-alignment);
    }

    .hero-panel--mobile-fill-content .hero-panel__content {
      align-items: stretch;
      justify-content: var(--hero-panel-mobile-content-horizontal);
    }

    .hero-panel--mobile-fill-content .hero-panel__content-body {
      display: flex;
      flex-direction: column;
      align-items: var(--hero-panel-mobile-content-items-horizontal);
      justify-content: space-between;
      min-height: 100%;
      width: 100%;
      max-width: none;
    }
  }
/* END_BLOCK:_hero-panel */

/* START_BLOCK:_hero-push-info (INDEX:54) */
/* Desktop only: the pad is hidden below 750px, so its media is never fetched
     there — an image inside a display: none subtree is not requested. */
  .hero-push-info {
    position: absolute;
    inset-block-end: 3.7rem;
    inset-inline-end: var(--spacing-45);
    display: none;
    align-items: center;
    gap: var(--spacing-10);
    max-inline-size: calc(100% - (var(--spacing-45) * 2));
    padding: var(--spacing-08);
    background: var(--color-background);
    color: var(--color-foreground);
    border-radius: 0.6rem;
    text-align: left;
    text-decoration: none;
  }

  .hero-push-info__media {
    display: block;
    flex: 0 0 17.6rem;
    inline-size: 17.6rem;
    block-size: 10.6rem;
  }

  .hero-push-info__asset {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: 0.4rem;
  }

  .hero-push-info__body {
    display: grid;
    gap: var(--spacing-04);
    flex: 0 1 auto;
    min-inline-size: 0;
    max-inline-size: 22rem;
  }

  .hero-push-info__title {
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: var(--line-tight);
  }

  .hero-push-info__description {
    font-weight: var(--body-medium-weight);
    line-height: var(--line-normal);
    text-wrap: pretty;
  }

  @media screen and (min-width: 750px) {
    .hero-push-info {
      display: flex;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .hero-push-info--hover-only {
      opacity: 0;
      translate: 0 var(--spacing-08);
      pointer-events: none;
      transition: opacity 220ms ease, translate 220ms ease;
    }

    .hero-panel:hover .hero-push-info--hover-only,
    .hero-panel:focus-within .hero-push-info--hover-only {
      opacity: 1;
      translate: 0 0;
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-push-info--hover-only {
      transition: none;
    }
  }
/* END_BLOCK:_hero-push-info */

/* START_BLOCK:_localization-dialog (INDEX:55) */
localization-dialog {
    display: contents;
  }

  .drawer-shell__close{
    background: none;
    border: none;
  }

  .localization-dialog__element {
    border: none;
    padding: 0;
    width: calc(100% - 4rem);
    max-width: 50rem;
    border-radius: .4rem;
    background: transparent;
    margin: auto;
    max-height: 90dvh;
    overflow: visible;
  }

  .localization-dialog__element::backdrop {
    background: color-mix(in srgb, #000000 25%, transparent);
  }

  .localization-dialog__shell {
    background: var(--color-background);
    color: var(--color-foreground);
    border-radius: inherit;
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    box-shadow: 0 2.4rem 4.8rem color-mix(in srgb, #000000 25%, transparent);
    overflow: visible;
  }

  .localization-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }

  .localization-dialog__eyebrow {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
  }

  .localization-dialog__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: visible;
  }

  .localization-dialog__intro {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .localization-dialog__title {
    margin: 0;
  }

  .localization-dialog__description {
    margin: 0;
    color: color-mix(in srgb, var(--color-foreground) 75%, transparent);
  }

  .localization-dialog__fields {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: visible;
  }

  .localization-dialog__field {
    overflow: visible;
  }

  .localization-dialog__field label {
    display: block;
    margin-block-end: 1rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.4rem;
  }

  .localization-dialog__combobox {
    position: relative;
  }

  .localization-dialog__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 100%, transparent);
    border-radius: .4rem;
    padding: 1.2rem;
    background: #fff;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
  }

  .localization-dialog__trigger:hover,
  .localization-dialog__trigger:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 100%, transparent);
    outline: .1rem solid color-mix(in srgb, var(--color-accent) 50%, transparent);
    outline-offset: 2px;
  }

  .localization-dialog__trigger[aria-expanded='true'] {
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }

  .localization-dialog__trigger-text {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1;
    overflow: hidden;
    min-width: 0;
  }

  .localization-dialog__trigger-text img {
    flex-shrink: 0;
  }

  .localization-dialog__trigger-text-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .localization-dialog__trigger-flag {
    display: block;
    inline-size: 2rem;
    block-size: 1.5rem;
    object-fit: cover;
    flex-shrink: 0;
  }

  .localization-dialog__trigger svg {
    width: 0.7rem;
    height: 0.6rem;
    flex-shrink: 0;
    transition: transform 200ms ease;
  }

  .localization-dialog__trigger[aria-expanded='true'] svg {
    transform: rotate(180deg);
  }

  .localization-dialog__popover {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin-top: 0.4rem;
    background: var(--color-background);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 15%, transparent);
    border-radius: .4rem;
    box-shadow: 0 0.4rem 1.2rem color-mix(in srgb, var(--color-foreground) 15%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .localization-dialog__popover[hidden] {
    display: none !important;
  }

  .localization-dialog__input {
    border: 1px solid color-mix(in srgb, var(--color-accent) 100%, transparent);
    border-radius: .4rem;
    padding: 0.8rem 1.2rem;
    background: #fff;
    color: var(--color-foreground);
    font: inherit;
    margin: 0.8rem 0.8rem 0;
    width: calc(100% - 1.6rem);
  }

  .localization-dialog__input:focus {
    outline: 2px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
    outline-offset: 2px;
    border-color: color-mix(in srgb, var(--color-foreground) 30%, transparent);
  }

  .localization-dialog__country-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 20rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 0.8rem 0.8rem;
  }

  .localization-dialog__country-list::-webkit-scrollbar {
    width: 6px;
  }

  .localization-dialog__country-list::-webkit-scrollbar-track {
    background: transparent;
  }

  .localization-dialog__country-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-foreground) 20%, transparent);
    border-radius: 3px;
  }

  .localization-dialog__country-list::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--color-foreground) 30%, transparent);
  }

  @supports (scrollbar-width: thin) {
    .localization-dialog__country-list {
      scrollbar-width: thin;
      scrollbar-color: color-mix(in srgb, var(--color-foreground) 20%, transparent) transparent;
    }
  }

  .localization-dialog__group-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    margin: 0.8rem 0 0.2rem;
    padding-inline: 1.2rem;
    color: color-mix(in srgb, var(--color-foreground) 100%, transparent);
    font-weight: 700;
  }

  .localization-dialog__country-option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    border-radius: .4rem;
    padding: 0.8rem 1.2rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .localization-dialog__country-option-flag {
    display: block;
    inline-size: 2rem;
    block-size: 1.5rem;
    object-fit: cover;
    flex-shrink: 0;
  }

  .localization-dialog__country-option:hover,
  .localization-dialog__country-option:focus-visible,
  .localization-dialog__country-option.is-focused {
    background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
  }

  .localization-dialog__country-option.is-focused {
    outline: 2px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
    outline-offset: 2px;
  }

  .localization-dialog__country-option.is-selected {
    background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
    font-weight: 600;
  }

  .localization-dialog__country-option[hidden] {
    display: none;
  }

  .localization-dialog__country-name {
    font-weight: 500;
  }

  .localization-dialog__country-meta {
    font-size: 1.3rem;
    color: color-mix(in srgb, var(--color-foreground) 65%, transparent);
  }

  .localization-dialog__empty {
    margin: 0;
    color: color-mix(in srgb, var(--color-foreground) 70%, transparent);
  }

  .localization-dialog__select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .localization-dialog__select-wrapper svg {
    position: absolute;
    right: 1.2rem;
    width: 0.7rem;
    height: 0.6rem;
    pointer-events: none;
    flex-shrink: 0;
  }

  .localization-dialog__language-trigger-flag {
    position: absolute;
    left: 1.2rem;
    display: block;
    inline-size: 2rem;
    block-size: 1.5rem;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    flex-shrink: 0;
  }

  .localization-dialog__select {
    width: 100%;
    border-radius:  .4rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 100%, transparent);
    padding: 1.2rem;
    padding-inline-start: 4.4rem;
    padding-inline-end: 4rem;
    background: #FFF;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  .localization-dialog__select:hover,
  .localization-dialog__select:focus-visible {
    border-color: color-mix(in srgb, var(--color-accent) 100%, transparent);
    outline: .05rem solid color-mix(in srgb, var(--color-accent) 50%, transparent);
    outline-offset: 2px;
  }

  .localization-dialog__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-20);
  }

  .localization-dialog__submit {
    min-width: 16rem;
    width: 100%;
  }

  @media (min-width: 750px) {
    .localization-dialog__fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.4rem;
    }
  }
/* END_BLOCK:_localization-dialog */

/* START_BLOCK:_product-group (INDEX:56) */
.product-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .product-group__tiles {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, var(--products-with-text-tile-width-mobile, 16.9rem));
    justify-content: center;
    column-gap: var(--products-with-text-tiles-gap, var(--spacing-15));
    inline-size: 100%;
  }

  .product-group__description {
    margin-block-start: var(--spacing-15);
    inline-size: 100%;
    max-inline-size: 32rem;
    text-align: center;
    text-wrap: pretty;
  }

  .product-group__description > :last-child {
    margin-block-end: 0;
  }

  .product-group__empty {
    color: var(--color-foreground);
    text-align: center;
  }

  @media screen and (min-width: 990px) {
    /* The group hands its three rows straight through to the tiles, so every group's media,
       title and description line up even when one title wraps and another does not. */
    .product-group {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      grid-template-columns: minmax(0, 1fr);
      row-gap: 0;
      inline-size: auto;
    }

    .product-group__tiles {
      grid-row: 1 / 3;
      grid-column: 1;
      grid-template-rows: subgrid;
      grid-auto-columns: minmax(0, var(--products-with-text-tile-width, 32.6rem));
      row-gap: 0;
      inline-size: auto;
    }

    .product-group__description {
      grid-row: 3;
      grid-column: 1;
      margin-block-start: var(--spacing-20);
      max-inline-size: none;

      /* Size the group's column from its tiles alone. A paragraph's max-content is its whole
         text on one line, so letting the description size the column would stretch the group
         far past its media row — `inline-size: 0` keeps it out of that calculation, and
         `min-inline-size` then fills the width the tiles settled on. */
      inline-size: 0;
      min-inline-size: 100%;
    }
  }
/* END_BLOCK:_product-group */

/* START_BLOCK:_product-tile (INDEX:57) */
.product-tile {
    min-inline-size: 0;
  }

  .product-tile__link {
    display: grid;
    color: inherit;
    text-decoration: none;
  }

  .product-tile__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 0.4rem;
  }

  /* The ratio only reserves height through a flow spacer, so the media box keeps an
     `auto` block-size and the tile still stretches when a neighbour's title wraps. */
  .product-tile__media {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--color-accent--white);
  }

  .product-tile__media::before {
    content: '';
    display: block;
    aspect-ratio: var(--products-with-text-ratio-mobile, 2 / 3);
  }

  .product-tile__media picture,
  .product-tile__image {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .product-tile__image {
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Margins rather than a row gap: the tile shares its rows with every other tile through
     subgrid on desktop, and a grid gap is one value for every gutter it spans. */
  .product-tile__title {
    margin-block-start: var(--spacing-15);
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
    line-height: normal;
    text-align: center;
    text-wrap: pretty;
  }

  @media (hover: hover) {
    .product-tile__link:hover .product-tile__image {
      transform: scale(1.04);
    }
  }

  /* All three products share one media row and one title row, so a title that wraps pushes
     every description down together instead of stepping one group out of line. */
  @media screen and (min-width: 990px) {
    .product-tile,
    .product-tile__link {
      display: grid;
      grid-row: 1 / 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .product-tile__media {
      grid-row: 1;
    }

    .product-tile__title {
      grid-row: 2;
    }

    .product-tile__media::before {
      aspect-ratio: var(--products-with-text-ratio-desktop, 2 / 3);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-tile__image {
      transition: none;
    }

    .product-tile__link:hover .product-tile__image {
      transform: none;
    }
  }
/* END_BLOCK:_product-tile */

/* START_BLOCK:_visual-column (INDEX:58) */
.visual-column {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    scroll-snap-align: center;
  }

  /* The ratio is the Figma card, 326 x 467, and it is not a merchant decision. A flow spacer
     rather than `aspect-ratio` on the box itself: a definite block-size would beat the column's
     stretch and shrink the media whenever a neighbour's caption makes the row taller. */
  .visual-column__media {
    position: relative;
    overflow: hidden;
    background: color-mix(in oklab, var(--color-background) 88%, var(--color-foreground));
  }

  .visual-column__media::before {
    content: "";
    display: block;
    aspect-ratio: 326 / 467;
  }

  .visual-column__media picture,
  .visual-column__asset {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .visual-column__asset {
    object-fit: cover;
  }

  .visual-column__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: var(--spacing-15);
    text-align: center;
    text-wrap: pretty;
  }

  .visual-column__title {
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
    line-height: normal;
  }

  .visual-column__description {
    margin-block-start: var(--spacing-04);
    inline-size: 100%;
  }

  .visual-column__description > :last-child {
    margin-block-end: 0;
  }

  .visual-column__cta {
    margin-block-start: var(--spacing-20);
  }
/* END_BLOCK:_visual-column */

/* START_BLOCK:breadcrumb (INDEX:60) */
.breadcrumbs {
    min-width: 0;
  }

  .breadcrumbs__list {
    align-items: center;
    display: flex;
    gap: var(--spacing-20);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs--align-left .breadcrumbs__list {
    justify-content: flex-start;
  }

  .breadcrumbs--align-right .breadcrumbs__list {
    justify-content: flex-end;
  }

  .breadcrumbs__item {
    position: relative;
    margin: 0;
    text-transform: uppercase;
    font-size: var(--nav-ariane-size);
    font-weight: 500;
    white-space: nowrap;
  }

  .breadcrumbs__item:not(:last-child) {
    flex-shrink: 0;
  }

  .breadcrumbs__item:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breadcrumbs__item:not(:last-child):after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    width: 4px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8' fill='none'%3E%3Cpath d='M0.707031 6.70703L3.70703 3.70703L0.707031 0.707031' stroke='%2311312B' stroke-linecap='square'/%3E%3C/svg%3E");
    transform: translateY(-50%) translate3d(0, 0, 0);
    color: var(--color-foreground);
    background-size: contain;
    background-repeat: no-repeat;

    @media screen and (max-width: 749px) {
      top: 55%;
    }
  }

  .breadcrumbs__link {
    display: block;
    text-decoration: none;
  }

  .breadcrumbs__link:before {
    background: var(--color-foreground);
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: 0.3s ease-in-out;
    width: 0;
  }

  .breadcrumbs__link:hover:before {
    opacity: 1;
    width: 100%;
  }
/* END_BLOCK:breadcrumb */

/* START_BLOCK:media (INDEX:63) */
.media-block {
    position: relative;
    aspect-ratio: var(--media-block-desktop-aspect-ratio);
    min-height: 0;
    overflow: hidden;
    background: color-mix(in oklab, var(--color-background) 88%, var(--color-foreground));
  }

  .media-block__item,
  .media-block__placeholder {
    position: absolute;
    inset: 0;
  }

  .media-block__item--mobile {
    display: none;
  }

  .media-block__item--desktop {
    display: block;
  }

  .media-block__item picture,
  .media-block__item img,
  .media-block__item video,
  .media-block__item lazy-video,
  .media-block__placeholder,
  .media-block__placeholder-svg {
    width: 100%;
    height: 100%;
  }

  .media-block__item img,
  .media-block__item video,
  .media-block__item lazy-video,
  .media-block__placeholder {
    object-fit: cover;
  }

  .media-block__placeholder {
    background: linear-gradient(135deg, rgb(255 255 255 / 0.06), transparent),
      color-mix(in oklab, var(--color-background) 88%, var(--color-foreground));
  }

  @media screen and (max-width: 749px) {
    .media-block {
      aspect-ratio: var(--media-block-mobile-aspect-ratio);
    }

    .media-block__item--mobile {
      display: block;
    }

    .media-block__item--desktop {
      display: none;
    }
  }
/* END_BLOCK:media */

/* START_BLOCK:noka-logo (INDEX:64) */
.noka-logo-block {
    color: inherit;
  }

  /* The asset ships with `width="48" height="48"`, and those presentational
     attributes lose to CSS — which is what lets the size setting drive the mark.
     Both axes are stated because the viewBox is square. */
  .noka-logo-block svg {
    display: block;
    inline-size: var(--noka-logo-size, 10rem);
    block-size: var(--noka-logo-size, 10rem);
  }

  .noka-logo-block--align-center svg {
    margin-inline: auto;
  }

  .noka-logo-block--align-right svg {
    margin-inline-start: auto;
  }
/* END_BLOCK:noka-logo */

/* START_BLOCK:ugc (INDEX:66) */
.ugc-card {
    min-width: 0;
  }

  .ugc-card__media {
    --ugc-card-overlay-inset: 1.5rem;
    --ugc-card-product-image-width: 6.5rem;

    position: relative;
    aspect-ratio: 129 / 185;
    background: color-mix(in oklab, var(--color-background) 92%, var(--color-foreground));

    @media screen and (min-width: 990px) {
      --ugc-card-overlay-inset: 2rem;
      --ugc-card-product-image-width: 10.1rem;
    }
  }

  /*
   * Firefox flickers a <video> on page scroll as soon as it is clipped to a
   * rounded shape inside this transformed carousel, whichever way the clip is
   * made: its own `border-radius`, or `overflow: hidden` / `isolation` on the
   * frame (that one even renders the card empty). So the video stays a plain
   * rectangle and the rounding is painted over it: four corner wedges in the
   * section background, on a pseudo-element under the overlays (which keep
   * their own `z-index`). Only valid on a flat background, which the color
   * schemes are.
   */
  .ugc-card__video,
  .ugc-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ugc-card__placeholder {
    border-radius: inherit;
  }

  .ugc-card__media:has(> .ugc-card__video)::after {
    --corner: var(--media-radius);
    --corner-fill: var(--color-background);
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 100% 100%, transparent calc(var(--corner) - 0.5px), var(--corner-fill) var(--corner))
        top left / var(--corner) var(--corner) no-repeat,
      radial-gradient(circle at 0 100%, transparent calc(var(--corner) - 0.5px), var(--corner-fill) var(--corner))
        top right / var(--corner) var(--corner) no-repeat,
      radial-gradient(circle at 100% 0, transparent calc(var(--corner) - 0.5px), var(--corner-fill) var(--corner))
        bottom left / var(--corner) var(--corner) no-repeat,
      radial-gradient(circle at 0 0, transparent calc(var(--corner) - 0.5px), var(--corner-fill) var(--corner))
        bottom right / var(--corner) var(--corner) no-repeat;
  }

  .ugc-card__placeholder {
    background: color-mix(in oklab, var(--color-foreground) 12%, var(--color-background));
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
  }

  .ugc-card__handle {
    position: absolute;
    font-size: var(--card-title-size);
    inset-block-start: var(--ugc-card-overlay-inset);
    inset-inline-start: var(--ugc-card-overlay-inset);
    z-index: 1;
    color: var(--color-background);
    font-weight: 700;
    text-transform: uppercase;
  }

  .ugc-card__controls {
    position: absolute;
    inset-block-start: var(--ugc-card-overlay-inset);
    inset-inline-end: var(--ugc-card-overlay-inset);
    z-index: 1;
    display: flex;
    gap: var(--spacing-08);
  }

  .ugc-card__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--color-background);
    color: var(--color-foreground);
    cursor: pointer;
  }

  .ugc-card__control svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }

  .ugc-card__control:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  .ugc-card__control-icon {
    display: none;
  }

  [data-user-muted='true'] [data-ugc-toggle-mute] .ugc-card__control-icon--muted,
  [data-user-muted='false'] [data-ugc-toggle-mute] .ugc-card__control-icon--sound,
  [data-video-paused='true'] [data-ugc-toggle-play] .ugc-card__control-icon--play,
  [data-video-paused='false'] [data-ugc-toggle-play] .ugc-card__control-icon--pause {
    display: block;
  }

  .ugc-card__product {
    position: absolute;
    inset-inline: var(--ugc-card-overlay-inset);
    inset-block-end: var(--ugc-card-overlay-inset);
    z-index: 1;
    display: grid;
    grid-template-columns: var(--ugc-card-product-image-width) minmax(0, 1fr);
    align-items: stretch;
    width: auto;
    color: var(--color-foreground);
  }

  .ugc-card__product-image-link {
    display: block;
    width: var(--ugc-card-product-image-width);
    min-width: var(--ugc-card-product-image-width);
    color: inherit;
    text-decoration: none;
  }

  .ugc-card__product-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ugc-card-product-image-width);
    min-width: var(--ugc-card-product-image-width);
    max-width: var(--ugc-card-product-image-width);
    aspect-ratio: 1;
    padding: var(--spacing-12);
    border-radius: var(--spacing-04);
    background: var(--color-background);
    overflow: hidden;
    height: 100%;

    @media screen and (max-width: 989px) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .ugc-card__product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ugc-card__product-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--spacing-04);
    min-height: 100%;
    min-width: 0;
    padding: var(--spacing-12) var(--spacing-15);
    padding-inline-start: var(--spacing-04);
    border-radius: 0 var(--spacing-04) var(--spacing-04) 0;
    background: var(--color-background);
    opacity: 1;
    transform: none;

    @media screen and (max-width: 749px) {
      padding: 1rem;
    }
  }

  .ugc-card__product-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-06);
    min-width: 0;
    overflow: hidden;
  }

  .ugc-card__product-tag {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  .ugc-card__product-tag--last {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .ugc-card__product-tags .product-card__tag {
    display: flex;
    align-items: center;
    max-width: 100%;
  }

  .ugc-card__product-tag--last .product-card__tag {
    min-width: 0;
  }

  .ugc-card__product-tag--last .product-card__tag-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ugc-card__product-tags .product-card__tag {
    font-size: var(--body-size);

    @media screen and (max-width: 749px) {
      font-size: 0.9rem;
    }
  }

  .ugc-card__product-title-wrap {
    min-width: 0;
  }

  .ugc-card__product-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--body-large-size);
    font-weight: 700;
    line-height: normal;
    color: inherit;
    text-decoration: none;

    @media screen and (max-width: 749px) {
      font-size: var(--body-size);
    }
  }

  .ugc-card__product-price,
  .ugc-card__product-price .price,
  .ugc-card__product-price .compare-at-price {
    font-size: var(--body-size);
    line-height: normal;
    margin-block-start: 0.5rem;
    font-weight: 700;

    @media screen and (max-width: 749px) {
      margin-block-start: 0;
    }
  }

  .ugc-card__product-price-prefix {
    font-size: 1.1rem;
    margin-inline-end: var(--spacing-04);
  }

  @media screen and (min-width: 990px) {
    .ugc-card__product {
      grid-template-columns: var(--ugc-card-product-image-width) minmax(0, 1fr);
    }

    .ugc-card__product:hover .ugc-card__product-image-wrap,
    .ugc-card__product:focus-within .ugc-card__product-image-wrap {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    .ugc-card__product-content {
      opacity: 0;
      transform: translateX(-1.2rem);
      overflow: hidden;
      pointer-events: none;
      transition: opacity 0.24s ease-out, transform 0.24s ease-out;
    }

    .ugc-card__product:hover .ugc-card__product-content,
    .ugc-card__product:focus-within .ugc-card__product-content {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
  }

  [data-ugc-toggle-mute] {
    display: none;
  }
/* END_BLOCK:ugc */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:article-card (INDEX:67) */
.article-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .article-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  /* The recipe card frame: push pads portrait ratio, `recipe-content` hero radius. */
  .article-card__media-wrapper {
    aspect-ratio: 326 / 467;
    border-radius: 0.6rem;
    overflow: hidden;
    background-color: var(--color-media-placeholder);
  }

  .article-card__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  .article-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-15);
  }

  .article-card__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
  }

  .article-card__date,
  .article-card__title {
    margin: 0;
  }

  .article-card__title {
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
    line-height: normal;
    text-wrap: pretty;
  }

  @media (hover: hover) and (pointer: fine) {
    .article-card:hover .article-card__cta:before {
      height: 2px;
    }
  }
/* END_SNIPPET:article-card */

/* START_SNIPPET:buttons (INDEX:69) */
.buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-20);

    @media screen and (max-width: 749px) {
      flex-direction: column;

      a {
        width: fit-content;
        margin: auto;
      }
    }
  }

  .buttons--align-left {
    justify-content: flex-start;
  }

  .buttons--align-right {
    justify-content: flex-end;
  }

  @media screen and (max-width: 749px) {
    .buttons--align-left a {
      margin-inline: 0;
    }

    .buttons--align-right a {
      margin-inline: auto 0;
    }
  }

  .hero--split .buttons {
    justify-content: start;
  }
/* END_SNIPPET:buttons */

/* START_SNIPPET:cart-content (INDEX:70) */
.cart-drawer__empty-state {
    animation: cart-empty-fade-in 300ms ease-out;
    display: grid;
    gap: var(--spacing-50);
    padding-inline: 3.1rem;
    padding-block: var(--spacing-10) var(--spacing-20);
  }

  @keyframes cart-empty-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .cart-drawer__empty-pads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: var(--spacing-15);
    list-style: none;
    margin: 0;
    padding: 0;

    & .push-pad__title {
      font-size: var(--body-size);
    }
  }

  .cart-drawer__empty-pad {
    min-width: 0;

    &:empty {
      display: none;
    }
  }

  .cart-drawer__empty-button {
    justify-self: center;
  }

  @media screen and (max-width: 500px) {
    .cart-drawer__empty-state {
      gap: var(--spacing-22);
    }

    .cart-drawer__empty-pads {
      gap: var(--spacing-22) var(--spacing-12);
    }

    .cart-drawer__empty-button {
      min-width: 100%;
    }
  }
/* END_SNIPPET:cart-content */

/* START_SNIPPET:cart-recommendations (INDEX:72) */
.cart-recommendations {
    --cart-recommendations-slide-size: min(34.1rem, calc(100vw - 8rem));
    --cart-recommendations-end-space: var(--spacing-12);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-15);
    margin-top: var(--spacing-22);
    overflow-x: hidden;
  }

  .cart-recommendations__slider {
    display: block;
  }

  .cart-recommendations__viewport {
    overflow: hidden;
  }

  .cart-recommendations__title {
    margin: 0;
    font-size: var(--body-size);
    line-height: 1.1;
    font-weight: 700;
  }

  .cart-recommendations__scroller {
    display: flex;
    gap: var(--spacing-12);
    touch-action: manipulation;
  }

  .cart-recommendations__item {
    flex: 0 0 var(--cart-recommendations-slide-size);
    min-width: 0;
  }

  .cart-recommendations__item:last-child {
    flex-basis: calc(var(--cart-recommendations-slide-size) + var(--cart-recommendations-end-space));
    padding-inline-end: var(--cart-recommendations-end-space);
  }
/* END_SNIPPET:cart-recommendations */

/* START_SNIPPET:cart-recommended-product-card (INDEX:73) */
.cart-recommended-card {
    display: grid;
    grid-template-columns: 7.4rem minmax(0, 1fr);
    gap: var(--spacing-15);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding: var(--spacing-10) var(--spacing-20) var(--spacing-10) var(--spacing-10);
    background: #fff;
    border-radius: 0.8rem;
  }

  .cart-recommended-card__media {
    display: block;
    font-size: 0;
  }

  .cart-recommended-card__image {
    display: block;
    width: 100%;
    max-height: 9rem;
    object-fit: contain;
    border-radius: 0.8rem;
  }

  .cart-recommended-card__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-15);
    min-width: 0;
  }

  .cart-recommended-card__info {
    display: grid;
    align-content: start;
    gap: var(--spacing-04);
    min-width: 0;
    width: 100%;
  }

  .cart-recommended-card__title {
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: var(--body-size);
    line-height: 1.1;
  }

  .cart-recommended-card__tags {
    display: flex;
    gap: 1.2rem;
    min-width: 0;
    font-size: var(--body-size);
  }

  .cart-recommended-card__tags .product-card__tag {
    min-width: 0;
  }

  .cart-recommended-card__tags .product-card__tag-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .card-recommended-card__utils {
    display: flex;
    justify-content: space-between;
    margin-top: 1.1rem;
  }

  .cart-recommended-card__tags .product-card__tag {
    line-height: var(--line-normal);
    letter-spacing: 0;

    @media screen and (max-width: 749px) {
      font-size: var(--body-small-size);
    }
  }

  .cart-recommended-card__price {
    margin: var(--spacing-08) 0 0;
    font-size: var(--body-size);
    line-height: 1.1;
    font-weight: 700;
  }

  .cart-recommended-card__form {
    display: flex;
    align-items: flex-end;
  }

  .cart-recommended-card__product-form {
    margin: 0;
  }

  .cart-recommended-card__add {
    position: relative;
    color: inherit;
    font-size: var(--body-size);
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
  }

  .cart-recommended-card__add[aria-busy='true'] {
    color: transparent;
    pointer-events: none;
  }

  .cart-recommended-card__add[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.7rem;
    margin-inline-start: -0.7rem;
    border: 1px solid color-mix(in oklab, var(--color-foreground) 18%, transparent);
    border-top-color: var(--color-foreground);
    border-radius: 999px;
    animation: cart-recommended-card-spin 0.6s linear infinite;
  }

  .cart-recommended-card__add[disabled] {
    opacity: 0.5;
    text-decoration: none;
  }

  @keyframes cart-recommended-card-spin {
    to {
      transform: rotate(360deg);
    }
  }
/* END_SNIPPET:cart-recommended-product-card */

/* START_SNIPPET:cart-tier-gauge (INDEX:74) */
.cart-tiers {
    --cart-tier-badge-size: 3rem;
    --cart-tier-badge-half: 1.5rem;

    width: 100%;
  }

  .cart-tiers__message {
    margin: 0;
    font-size: var(--body-size);
    font-weight: 500;
    text-transform: none;
    color: var(--color-foreground);
    line-height: normal;
  }

  .cart-tiers__message strong {
    font-weight: 700;
  }

  /* The inline padding reserves half a badge on each end, so a marker sitting at
     100% stays fully inside the gauge instead of hanging off the track. */
  .cart-tiers__track {
    position: relative;
    display: grid;
    align-items: center;
    min-height: var(--cart-tier-badge-size);
    margin-block-start: 1rem;
    padding-inline: var(--cart-tier-badge-half);
  }

  /* Flat Figma track: a 30% beige groove, no outline, and a fill rounded on its start only —
     its end sits under the next badge (Figma 6825:12086). The beige has no theme token; it
     only lives here.

     The fill is a background layer sized from `--cart-tier-progress`, not the native value bar:
     a cart change morphs only this element's attributes, so the size transitions from the old
     width to the new one, and `@starting-style` grows it from 0 when the drawer opens. Neither
     works on `::-webkit-progress-value`, whose width the browser sets outside CSS. */
  .cart-tiers__progress {
    --cart-tier-track: color-mix(in oklab, #c2b5a2 30%, transparent);

    appearance: none;
    display: block;
    width: 100%;
    height: 0.9rem;
    border: 0;
    border-radius: 1rem;
    background:
      linear-gradient(var(--color-accent) 0 0) 0 0 / calc(var(--cart-tier-progress, 0) * 1%) 100%
        no-repeat,
      var(--cart-tier-track);
    overflow: hidden;
    transition: background-size 0.6s ease;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  @starting-style {
    .cart-tiers__progress {
      background-size: 0 100%;
    }
  }

  /* The native bar paints nothing: the element's background above is the whole gauge. */
  .cart-tiers__progress::-webkit-progress-bar,
  .cart-tiers__progress::-webkit-progress-value {
    background: transparent;
  }

  .cart-tiers__progress::-moz-progress-bar {
    background: transparent;
  }

  .cart-tiers__markers {
    position: absolute;
    inset-block: 0;
    inset-inline: var(--cart-tier-badge-half);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  /* The box must be explicit. An absolutely positioned element with `left` set and
     `right: auto` is shrink-to-fit, and the available width at `left: 100%` is 0 —
     which collapses the highest tier's badge to nothing while the others render. */
  .cart-tiers__marker {
    position: absolute;
    top: 50%;
    left: calc(var(--tier-position) * 1%);
    width: var(--cart-tier-badge-size);
    height: var(--cart-tier-badge-size);
    translate: -50% -50%;
    display: flex;
    color: var(--color-foreground);
  }

  .cart-tiers__marker svg {
    display: block;
    flex: 0 0 auto;
    width: var(--cart-tier-badge-size);
    height: var(--cart-tier-badge-size);
    overflow: visible;
  }

  /* The icon assets carry no fill of their own, so the badge follows the section
     color scheme instead of the hardcoded Figma pine/off-white pair. */
  .cart-tiers__marker .tier-badge__shape {
    fill: currentColor;
  }

  .cart-tiers__marker .tier-badge__glyph {
    fill: var(--color-background);
  }

  /* A reached tier turns to the fill's green, so it reads as part of the filled stretch. */
  .cart-tiers__marker[data-reached='true'] {
    color: var(--color-accent);
  }

  .cart-tiers__note {
    margin-block: var(--spacing-06) 0;
    font-size: 1.2rem;
    color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
  }
/* END_SNIPPET:cart-tier-gauge */

/* START_SNIPPET:collection-pad (INDEX:76) */
.collection-pad {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-block-size: 46rem;
    block-size: var(--collection-pad-match-height);
    overflow: hidden;
    isolation: isolate;
    background: var(--color-background);

  }

  .collection-pad__media,
  .collection-pad__content {
    grid-area: 1 / 1;
  }

  .collection-pad__media {
    position: relative;
    background: color-mix(in oklab, var(--color-background) 76%, var(--color-foreground));
  }

  .collection-pad__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, var(--color-background) 24%, transparent);
    pointer-events: none;
  }

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

  .collection-pad__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.4rem;
    padding: var(--spacing-22);
    text-align: center;
    color: var(--color-foreground);
  }

  .collection-pad--no-actions .collection-pad__content {
    gap: 0;
  }

  .collection-pad__title {
    margin: 0;
    max-width: 18ch;
    color: inherit;
    text-wrap: pretty;
  }

  .collection-pad__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
  }

  .collection-pad__button {
    min-width: min(100%, 24rem);
  }

  @media screen and (max-width: 749px) {
    .collection-pad {
      min-block-size: 38rem;
    }

    .collection-pad__content {
      padding: var(--spacing-20);
    }
  }
/* END_SNIPPET:collection-pad */

/* START_SNIPPET:cookie-preference-row (INDEX:78) */
.cookie-preference {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-20);
    padding-block: var(--spacing-20);
    border-block-start: 1px solid var(--color-border);
  }

  .cookie-preference[hidden] {
    display: none;
  }

  .cookie-preference__text {
    display: grid;
    gap: var(--spacing-06);
    min-width: 0;
  }

  .cookie-preference__title {
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight, 700);
    line-height: var(--line-normal);
  }

  .cookie-preference__description {
    margin: 0;
    font-size: var(--body-small-size);
    line-height: var(--line-normal);
    color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
    text-wrap: pretty;
  }

  .cookie-preference__locked {
    flex: 0 0 auto;
    font-size: var(--body-small-size);
    line-height: var(--line-normal);
    color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
    white-space: nowrap;
  }

  /* The switch is the checkbox itself: `appearance: none` keeps the native
     control, its label association and its keyboard behaviour, so nothing has to
     be re-implemented on a decorative sibling. */
  .cookie-switch {
    appearance: none;
    flex: 0 0 auto;
    position: relative;
    inline-size: 4.4rem;
    block-size: 2.4rem;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 2.4rem;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .cookie-switch::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.3rem;
    inline-size: 1.6rem;
    block-size: 1.6rem;
    border-radius: 50%;
    background: var(--color-foreground);
    translate: 0 -50%;
    transition: translate 0.2s ease, background-color 0.2s ease;
  }

  .cookie-switch:checked {
    background: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .cookie-switch:checked::after {
    background: var(--color-background);
    translate: 1.8rem -50%;
  }

  .cookie-switch:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cookie-switch,
    .cookie-switch::after {
      transition: none;
    }
  }
/* END_SNIPPET:cookie-preference-row */

/* START_SNIPPET:input (INDEX:85) */
/* Global input styles */
  .input,
  .textarea,
  .select {
    font: inherit;
    font-size: max(var(--font-size-input), 1.6rem);
    line-height: var(--line-height-input);
    letter-spacing: var(--letter-spacing-input);
    border-radius: var(--style-border-radius-inputs);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border: 1px solid var(--color-input-border);
    min-height: var(--style-height-input);
    transition: border-color 0.2s ease;
    padding: var(--spacing-10) var(--spacing-15);
  }

  .input::placeholder,
  .textarea::placeholder,
  .select::placeholder {
    color: var(--color-input-text);
    font-size: var(--font-size-input);
  }

  .input:hover,
  .textarea:hover,
  .select:hover {
    outline: 1px solid var(--color-input-border);
  }

  .input:focus-visible,
  .textarea:focus-visible,
  .select:focus-visible {
    border-color: var(--color-foreground);
    outline: none;
  }

  .textarea {
    border-radius: var(--style-border-radius-textarea);
  }

  /* Select styles */
  .select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-15) center;
    padding-right: var(--spacing-42);
    cursor: pointer;
    width: 100%;
  }

  /* Label styles */
  .input__label {
    font-weight: bolder;
  }

  /* Input with submit button */
  .input__wrapper {
    position: relative;
  }

  .input__wrapper > .input {
    width: 100%;
    padding-right: calc(var(--style-height-input) + 1.2rem);
  }

  .input__wrapper > .input__button {
    position: absolute;
    width: calc(var(--style-height-input));
    height: calc(var(--style-height-input));
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .input__wrapper > .input__button:hover {
    opacity: 0.8;
  }

  /* Checkbox & Radio */
  .checkbox__wrapper,
  .radio__wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-10);
  }

  .checkbox__wrapper .checkbox,
  .radio__wrapper .radio {
    flex-shrink: 0;
  }

  .checkbox,
  .radio,
  .checkbox__label,
  .radio__label {
    cursor: pointer;
  }

  .checkbox,
  .radio {
    width: 1.5rem;
    height: 1.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: solid 1px color-mix(in oklab, var(--color-input-text) 60%, transparent);
    position: relative;
  }

  /* Checkbox & Radio - Inner mark (::before pseudo-element) */
  .checkbox:before,
  .radio:before {
    content: '';
    display: none;
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: color-mix(in oklab, var(--color-input-text) 60%, transparent);
    transition: background-color 0.2s ease;
  }

  /* Checkbox & Radio - Checked state */
  .checkbox:checked:before,
  .radio:checked:before {
    display: block;
  }

  .radio,
  .radio:before {
    border-radius: 50%;
  }

  /* Checkbox & Radio - Hover state (only when not checked) */
  .checkbox__wrapper:has(:is(.checkbox, .checkbox__label):hover) .checkbox:not(:checked):before,
  .radio__wrapper:has(:is(.radio, .radio__label):hover) .radio:not(:checked):before {
    display: block;
    background-color: color-mix(in oklab, var(--color-input-text) 60%, transparent);
  }

  /* Checkbox & Radio - Checked state */
  .checkbox__wrapper:has(:is(.checkbox, .checkbox__label)) .checkbox:checked:before,
  .radio__wrapper:has(:is(.radio, .radio__label)) .radio:checked:before {
    background-color: var(--color-input-text);
  }

  /* Search input with icon and reset button */
  .input__wrapper--search {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    background-color: var(--color-input-background);
    border: 1px solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    padding-inline: var(--spacing-15);
    min-height: var(--style-height-input);
    transition: border-color 0.2s ease;
  }

  .input__wrapper--search:hover {
    outline: 1px solid var(--color-input-border);
  }

  .input__wrapper--search:focus-within {
    border-color: var(--color-input-text);
    outline: none;
  }

  .input__wrapper--search > .input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 var(--spacing-10);
    min-height: auto;
  }

  .input__wrapper--search > .input:hover,
  .input__wrapper--search > .input:focus-visible {
    outline: none;
    border: none;
  }

  /* Hide native search input clear button */
  .input__wrapper--search > .input::-webkit-search-cancel-button,
  .input__wrapper--search > .input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }

  .input__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--color-input-text);
  }

  .input__icon svg {
    width: 100%;
    height: 100%;
  }

  .input__reset {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-button-primary-text);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .input__reset svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .input__reset:hover {
    opacity: 0.8;
  }

  .input__reset[hidden] {
    display: none;
  }
/* END_SNIPPET:input */

/* START_SNIPPET:menu-chips (INDEX:86) */
.menu-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-12);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu-chips__link {
    display: block;
    border-radius: var(--pill-radius);
    background-color: var(--color-accent--yellow);
    color: var(--color-foreground);
    font-family: var(--font-body-family);
    font-size: var(--body-large-size);
    font-weight: var(--body-bold-weight);
    letter-spacing: 0;
    line-height: normal;
    padding-block: 1.1rem;
    padding-inline: 1.6rem;
    text-decoration: none;
    white-space: nowrap;
  }

  .menu-chips__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  @media (hover: hover) and (pointer: fine) {
    .menu-chips__link:hover {
      text-decoration: underline;
    }
  }

  @media screen and (min-width: 750px) {
    .menu-chips {
      justify-content: center;
    }

    .menu-chips__link {
      padding-block: 1.8rem;
      padding-inline: 1.8rem;
    }
  }
/* END_SNIPPET:menu-chips */

/* START_SNIPPET:pagination (INDEX:89) */
.pagination {
    display: flex;
    justify-content: center;
  }

  .pagination__list {
    display: flex;
    align-items: center;
    gap: var(--spacing-04);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pagination__item {
    display: flex;
  }

  .pagination__link,
  .pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    min-height: 4rem;
    padding-inline: var(--spacing-08);
    border-radius: var(--media-radius);
    color: var(--color-foreground);
    font-size: var(--body-size);
    line-height: normal;
    text-decoration: none;
    transition:
      background-color 0.25s ease-in-out,
      opacity 0.25s ease-in-out;
  }

  /* The current page reuses the collection links' active pill, so the two
     navigations read as one system. */
  .pagination__link--current {
    background-color: var(--color-accent--yellow);
    font-weight: var(--card-title-weight, 700);
  }

  @media (hover: hover) and (pointer: fine) {
    a.pagination__link:hover {
      background-color: var(--color-accent--yellow);
    }
  }

  .pagination__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
  }

  .pagination__link--arrow svg {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
  }

  /* The asset points right, so only the previous arrow is flipped. */
  .pagination__link--arrow:not(.pagination__link--next) svg {
    transform: rotate(180deg);
  }

  /* Kept in the flow rather than removed: dropping an arrow would shift the
     whole row off centre between the first, middle and last pages. */
  .pagination__link[data-disabled] {
    opacity: 0.25;
    pointer-events: none;
  }
/* END_SNIPPET:pagination */

/* START_SNIPPET:pill-tabs (INDEX:91) */
.pill-tabs {
    align-self: stretch;
    inline-size: calc(100% + var(--page-margin));
    margin-block-start: var(--spacing-20);
    margin-inline-end: calc(var(--page-margin) * -1);
  }

  .pill-tabs__list {
    display: grid;
    grid-gap: var(--spacing-50);
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    justify-content: start;
    list-style: none;
    /* The scroller clips overflow, so the block padding (cancelled by the margin) leaves room
       for the focus ring: 3px outline + 2px offset. */
    margin: -0.5rem 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.5rem 0;
    padding-inline-end: var(--page-margin);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;

    @media screen and (max-width: 749px) {
      grid-gap: var(--spacing-20);
    }
  }

  .pill-tabs__list::-webkit-scrollbar {
    display: none;
  }

  .pill-tabs__item {
    min-inline-size: 0;
    scroll-snap-align: start;
  }

  .pill-tabs__tab {
    border-radius: var(--pill-radius);
    color: var(--color-foreground);
    font-family: var(--font-body-family);
    font-size: var(--body-large-size);
    font-weight: var(--body-medium-weight);
    letter-spacing: 0;
    line-height: normal;
    padding-block: 1.1rem;
    padding-inline: 1.6rem;
    text-align: center;
    transition: background-color 0.25s ease-in-out;
    white-space: nowrap;
  }

  .pill-tabs__tab:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  .pill-tabs__tab[aria-pressed='true'] {
    background-color: var(--color-accent--yellow);
    font-weight: var(--body-bold-weight);
  }

  @media (hover: hover) and (pointer: fine) {
    .pill-tabs__tab:hover {
      background-color: var(--color-accent--yellow);
    }
  }

  @media screen and (min-width: 750px) {
    .pill-tabs {
      inline-size: 100%;
      margin-inline-end: 0;
    }

    /* `safe`: a row wider than its box (750px–810px with four tabs) falls back to `start` and
       scrolls, instead of centring off both edges where nothing can reach the first tab. */
    .pill-tabs__list {
      justify-content: safe center;
      padding-inline-end: 0;
    }

    .pill-tabs__tab {
      padding-block: 1.8rem;
      padding-inline: 1.8rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pill-tabs__tab {
      transition: none;
    }
  }
/* END_SNIPPET:pill-tabs */

/* START_SNIPPET:price (INDEX:92) */
.price,
  .compare-at-price {
    margin: 0;
  }

  .compare-at-price {
    text-decoration: line-through;
    opacity: 0.6;
    font-size: 0.8125em;
  }

  .discount-percentage {
    font-size: 0.8125em;
    color: #1500FF;
  }
/* END_SNIPPET:price */

/* START_SNIPPET:product-badges (INDEX:93) */
.product-badges {
    display: flex;
  }

  .product-badges__badge {
    font-size: var(--nav-size);
    line-height: var(--nav-line-height);
    letter-spacing: var(--nav-letter-spacing);
    text-transform: uppercase;
    padding-inline: 1rem;
    padding-block: 0.5rem;
    border-radius: 10rem;
    background: var(--color-foreground);
    color: var(--color-background);
    font-weight: 700;
  }

  .product-badges__badge--green-white {
    background: var(--color-accent--green);
    color: var(--color-accent--off-white);
  }

  .product-badges__badge--yellow-dark-green {
    background: var(--color-accent--yellow);
    color: var(--color-accent--dark-green);
  }

  .product-badges__badge--large {
    font-size: var(--body-size);
    line-height: var(--line-normal);
    letter-spacing: 0;
    padding: var(--spacing-12);
  }
/* END_SNIPPET:product-badges */

/* START_SNIPPET:product-card (INDEX:95) */
product-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    position: relative;
    background: var(--product-card-background);
    overflow: hidden;
  }

  product-card:focus {
    outline: none;
  }

  .product-card__media {
    display: contents;
  }

  .product-card__link {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 1;
  }

  .product-card__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
  }

  /* The packshot ratio (700 x 1005), pinned so a photo in any other ratio is cropped into the
     card instead of setting its height. Packshots already match it, so `cover` leaves them whole.
     A caller that needs another box overrides the viewport, e.g. `_comparator-product`. */
  .product-card__viewport,
  .product-card__hover-media {
    aspect-ratio: 700 / 1005;
  }

  .product-card__viewport {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    overflow: hidden;
  }

  .product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* `overflow: hidden` like the viewport: an aspect-ratio box otherwise grows to fit a
     taller photo (Le Pâtissier's hover shot is 2:3), stretching the card and its row. */
  .product-card__hover-media {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .product-card__hover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-card__swatches {
    grid-column: 1;
    grid-row: 1;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    gap: var(--spacing-04);
    padding: var(--spacing-12);
    align-self: start;
    border: 0;
    margin: 0;
  }

  .product-card__swatch {
    appearance: none;
    display: block;
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    padding: 0;
    border: 0;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .product-card__swatch:hover:not(:checked) {
    opacity: 0.7;
  }

  .product-card__swatch:checked::after {
    content: '';
    position: absolute;
    bottom: calc(-1 * var(--spacing-06) - 1px);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-foreground);
  }

  .product-card__swatch:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  .product-card .product-badges {
    align-self: center;
    display: flex;
    gap: var(--spacing-04);
  }

  /* The rating closes the price row, pushed to the card's right edge under the badges. */
  .product-card--standard .product-card__price {
    align-self: stretch;

    & .product-rating-compact {
      margin-inline-start: auto;
    }
  }

  /* Smaller than the product badges above: it sits inline with the price. */
  .product-card__subscription-badge {
    margin-inline-start: var(--spacing-04);
    padding: 0.2rem 0.6rem;
    font-size: 1rem;
  }

  .product-card__tags {
    display: flex;
    gap: var(--spacing-12);
    align-items: center;
  }

  @media not all and (hover: hover) and (pointer: fine) {
    .product-card__swatches,
    .product-card__quick-add {
      display: none;
    }

    .product-card--standard .product-card__swatches {
      display: flex;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .product-card__quick-add,
    .product-card__swatches {
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    product-card:hover .product-card__quick-add,
    product-card:hover .product-card__swatches,
    product-card:focus-within .product-card__quick-add,
    product-card:focus-within .product-card__swatches {
      opacity: 1;
    }

    product-card:hover .product-card__hover-media,
    product-card:focus-within .product-card__hover-media {
      opacity: 1;
    }
  }

  .product-card__quick-add {
    grid-column: 1 / -1;
    grid-row: 3;
    z-index: 3;
    justify-self: stretch;
    align-self: end;
    position: relative;
    width: calc(100% - (var(--spacing-22) * 2));
    margin-inline: var(--spacing-22);
    margin-block-end: var(--spacing-22);
  }

  .product-card__quick-add-surface {
    position: relative;
    pointer-events: none;
    display: flex;
    justify-content: center;
    text-align: center;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .product-card__quick-add-button,
  .product-card__quick-add-surface {
    min-height: 5rem;
    font-size: var(--nav-size);
  }

  .product-card__quick-add-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  /* Button spans are trimmed to the cap height (`text-box: cap alphabetic` in base.css), so a
     plain `overflow: hidden` for the ellipsis shaved the glyphs' top in Chrome ("30G"). Clip
     the inline axis only: the ellipsis still works, the glyphs keep their height. */
  .product-card__quick-add-button-text {
    overflow-x: clip;
    overflow-y: visible;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-card__quick-add-variants {
    position: absolute;
    inset-inline: 0;
    inset-block: 0;
    z-index: 1;
    display: flex;
    gap: var(--spacing-08);
    align-items: stretch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .product-card__quick-add-variants::-webkit-scrollbar {
    display: none;
  }

  .product-card__quick-add-variant-button {
    min-width: 0;
    width: 100%;
  }

  .product-card__quick-add-button-price {
    font-weight: 400;
  }

  .product-card__quick-add:hover .product-card__quick-add-variants,
  product-card:focus-within .product-card__quick-add-variants,
  .product-card__quick-add:focus-within .product-card__quick-add-variants,
  .product-card__quick-add-variants:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .product-card__quick-add:hover .product-card__quick-add-surface,
  product-card:focus-within .product-card__quick-add-surface,
  .product-card__quick-add:focus-within .product-card__quick-add-surface {
    opacity: 0;
    visibility: hidden;
  }

  /* Compact mode (default) */
  .product-card__info {
    display: contents;
  }

  .product-card__title,
  .product-card__price {
    display: none;
  }

  /* Standard mode */
  .product-card--standard {
    background: none;
  }

  .product-card--standard .product-card__viewport {
    background: var(--product-card-background);
  }

  .product-card--standard .product-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
    grid-column: 1 / -1;
    z-index: 1;
    padding-block: calc(var(--spacing-22) + 0.5rem);
    padding-inline: calc(var(--spacing-22) + 0.5rem);
    position: absolute;
    align-items: flex-start;
    width: 100%;

    @media screen and (min-width: 750px) {
      gap: var(--spacing-04);
    }

    @media screen and (max-width: 749px) {
      padding-block: calc(var(--spacing-15));
      padding-inline: calc(var(--spacing-15));
    }
  }

  .product-card--standard .product-card__info-title {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-12);
    flex-wrap: wrap-reverse;
    align-items: center;
    width: 100%;

    /* From tablet up the badge keeps the title's line and a long title wraps beside it:
       pushed above it, the badge added a whole row and the text ran over the packshot.
       On phones the column is too narrow for both, so the badge still goes on top. */
    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      align-items: flex-start;

      & .product-card__title {
        min-width: 0;
      }

      & .product-badges {
        flex: none;
        align-self: flex-start;
      }
    }
  }

  /* An <h3> for the listing outline (SEO), dressed as the plain link it used to be: the `h3`
     element rule would otherwise bring the italic heading face and its letter-spacing. */
  .product-card--standard .product-card__title {
    display: block;
    margin: 0;
    font-family: inherit;
    font-style: inherit;
    font-weight: 700;
    font-size: var(--card-title-size);
    line-height: normal;
    letter-spacing: inherit;
    color: inherit;
    text-align: left;
  }

  .product-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .product-card--standard .product-card__title-link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  .product-card--standard .product-card__price {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: var(--spacing-04);
    font-size: var(--body-size);
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    margin-block-start: 0.5rem;
  }

  .product-card--standard .product-card__swatches {
    position: static;
    padding: 0;
    grid-column: unset;
    grid-row: unset;
    z-index: unset;
    align-self: unset;
  }

  @media not all and (hover: hover) and (pointer: fine) {
    .product-card--standard .product-card__swatches {
      display: flex;
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .product-card--standard .product-card__swatches {
      opacity: 1;
    }
  }

  .product-card__shimmer {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 2;
    aspect-ratio: var(--product-image-ratio);
    background: var(--product-card-background);
    background-image: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in oklab, var(--color-foreground) 4%, transparent) 40%,
      color-mix(in oklab, var(--color-foreground) 4%, transparent) 60%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: product-card-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes product-card-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-cross-sell (INDEX:97) */
.product-cross-sell {
    --product-cross-sell-image-width: 7.4rem;

    display: grid;
    gap: var(--spacing-10);
    margin-block-start: 3rem;
  }

  .product-cross-sell__heading {
    margin: 0;
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: var(--line-normal);
    color: var(--color-foreground);
  }

  .product-cross-sell__list {
    display: grid;
    gap: var(--spacing-08);
  }

  .product-cross-sell__card {
    display: grid;
    border: 1px solid var(--color-foreground);
    background-color: #ffffff;
    border-radius: 4px;
    grid-template-columns: var(--product-cross-sell-image-width) minmax(0, 1fr);
    gap: var(--spacing-12);
    align-items: center;
    padding: var(--spacing-10) var(--spacing-20) var(--spacing-10) var(--spacing-10);
  }

  .product-cross-sell__utils {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-10);
    margin-block-start: var(--spacing-06);
  }

  .product-cross-sell__form-shell,
  .product-cross-sell__form {
    display: block;
    margin: 0;
  }

  .product-cross-sell__add {
    position: relative;
    color: inherit;
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .product-cross-sell__add[aria-busy='true'] {
    color: transparent;
    pointer-events: none;
  }

  .product-cross-sell__add[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: -0.7rem;
    margin-inline-start: -0.7rem;
    border: 1px solid color-mix(in oklab, var(--color-foreground) 18%, transparent);
    border-top-color: var(--color-foreground);
    border-radius: 999px;
    animation: product-cross-sell-spin 0.6s linear infinite;
  }

  .product-cross-sell__add[disabled] {
    opacity: 0.5;
    text-decoration: none;
  }

  @keyframes product-cross-sell-spin {
    to {
      transform: rotate(360deg);
    }
  }

  .product-cross-sell__image-link {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .product-cross-sell__image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--product-cross-sell-image-width);
    aspect-ratio: 1;
  }

  .product-cross-sell__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.4rem;
  }

  .product-cross-sell__content {
    display: grid;
    /* Explicit track: an implicit `auto` column under `align-content: center` stretches in
       Firefox but not Chrome, which centred the text. minmax(0,…) keeps the title ellipsis working. */
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--spacing-04);
    min-width: 0;
  }

  .product-cross-sell__title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: normal;
    color: inherit;
    text-decoration: none;
  }

  .product-cross-sell__tags {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-06);
    min-width: 0;
    overflow: hidden;
    font-size: var(--body-small-size);
  }

  .product-cross-sell__tag {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  .product-cross-sell__tag--last {
    flex: 1 1 auto;
    overflow: hidden;
  }

  .product-cross-sell__tags .product-card__tag {
    display: flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    font-size: inherit;
  }

  .product-cross-sell__tag--last .product-card__tag-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-cross-sell__price {
    margin: 0;
  }

  .product-cross-sell__price,
  .product-cross-sell__price .price,
  .product-cross-sell__price .compare-at-price {
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: normal;
  }

  .product-cross-sell__price-prefix {
    font-size: 1.1rem;
    font-weight: var(--body-weight);
    margin-inline-end: var(--spacing-04);
  }
/* END_SNIPPET:product-cross-sell */

/* START_SNIPPET:product-media (INDEX:103) */
/* `.section__inner` is a column flex container with `align-items: flex-start`
     and nothing in the theme sets `--section-alignment`, so children are not
     stretched — the row has to claim its width explicitly. */
  .product-media {
    width: 100%;
  }

  /* Each context only exists at one breakpoint range. The hidden one costs no
     network: every tile image is lazy, and a lazy image in a `display: none`
     subtree is never requested.

     Doubled class: the row is also a `.product-media__grid` or
     `.product-media__slider`, and those carry their own `display` at the same
     specificity later in the sheet, so a single-class hide loses on source order
     and the row shows through on mobile. */
  .product-media--row.product-media--row {
    display: none;
  }

  .product-media__grid {
    display: grid;
    gap: var(--product-media-gap);
    grid-template-columns: repeat(var(--product-media-columns-desktop), minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .product-media__grid-item,
  .product-media__slide {
    min-width: 0;
  }

  /* No `overflow: hidden` here on purpose: a `<video>` inside a transformed,
     clipped carousel subtree must not get a second clip. `object-fit: cover`
     never overflows the box, so rounding the assets is enough. */
  .product-media__tile {
    aspect-ratio: var(--product-media-aspect-ratio, 326 / 467);
    /* background: color-mix(in oklab, var(--color-foreground) 4%, var(--color-background)); */
    border-radius: var(--media-radius);
    position: relative;
  }

  .product-media__tile :is(lazy-video, picture, img, video) {
    border-radius: inherit;
  }

  .product-media__asset {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .product-media__slider {
    --product-media-visible-slides: 1;

    display: block;
    position: relative;
  }

  .product-media__viewport {
    overflow: hidden;
  }

  .product-media__slider-container {
    display: flex;
    align-items: stretch;
    gap: var(--product-media-gap);
  }

  .product-media__slide {
    --product-media-slide-trail: 0rem;

    flex: 0 0
      calc(
        (100% - ((var(--product-media-visible-slides) - 1) * var(--product-media-gap))) /
          var(--product-media-visible-slides) + var(--product-media-slide-trail)
      );
  }

  .product-media__dots {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-06);
    justify-content: center;
    margin-block-start: var(--spacing-15);
  }

  .product-media__dot {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    padding: var(--spacing-04);
  }

  .product-media__dot::after {
    background: color-mix(in oklab, var(--color-foreground) 25%, transparent);
    border-radius: 50%;
    content: '';
    display: block;
    height: 0.8rem;
    transition: background-color 300ms ease;
    width: 0.8rem;
  }

  .product-media__dot--active::after {
    background: var(--color-foreground);
  }

  /* The buttons stretch to the slider's height so their hover scrim runs edge to
     edge; the disc inside is centred and keeps its own size. The inset is what the
     arrows' own padding used to provide. */
  .product-media__navigation {
    --slider-arrow-inset: var(--spacing-10);
    align-items: stretch;
    display: flex;
    inset: 0;
    justify-content: space-between;
    pointer-events: none;
    position: absolute;
    padding-inline: var(--spacing-10);
  }

  @media screen and (min-width: 990px) {
    .product-media--stage {
      display: none;
    }

    .product-media--row.product-media--row {
      display: block;
    }

    .product-media--row.product-media--row.product-media__grid {
      display: grid;
    }

    .product-media--row.product-media__slider {
      --product-media-visible-slides: 3.15;

      width: auto;
      margin-inline-end: calc(-1 * var(--page-margin));
    }

    /* Breathing room after the last slide has to live *inside* the slide box —
       Embla measures slides with `offsetWidth` (padding counted) but never sees
       container padding, and only probes a trailing margin under `containScroll`.
       The basis grows by the same amount so the tile keeps its width. */
    .product-media--row.product-media__slider .product-media__slide:last-child {
      --product-media-slide-trail: var(--page-margin);

      padding-inline-end: var(--page-margin);
    }
  }

  @media screen and (min-width: 1500px) {
    .product-media--row.product-media__slider {
      --product-media-visible-slides: 3.5;
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:product-rating (INDEX:104) */
.product-rating-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
  }

  .product-rating-compact__value {
    font-size: 1.3rem;
    font-weight: 500;
  }

  /* A flex box around the star drops the inline line box, whose descender space
     sat the star above the digits. */
  .product-rating-compact__star {
    display: flex;
    color: var(--color-primary);
  }

  .product-rating-compact__count {
    font-size: 1.1rem;
    font-weight: 400;
  }

  /* A shortcut to the reviews on phones, where the card is too small to hunt for them.
     From tablet up the click falls through to the card, which opens the product. */
  .product-rating-compact--link {
    color: inherit;
    text-decoration: none;

    @media screen and (max-width: 749px) {
      & .product-rating-compact__count {
        text-decoration: underline;
        text-underline-offset: 0.2rem;
      }
    }

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

  .product-page__rating {
    display: flex;
    align-items: center;
    gap: var(--spacing-08);
  }

  /* The fill row is laid over the track and clipped to the rating percentage, so
     a half star is a real half star and no extra asset is needed. Both rows hold
     the same markup, so the clip is proportional by construction. */
  .product-page__rating-stars {
    position: relative;
    display: inline-block;
    display: flex;
  }

  .product-page__rating-row {
    display: inline-flex;
    gap: 0.2rem;
  }

  .product-page__rating-row--track {
    color: color-mix(in oklab, var(--color-primary) 25%, transparent);
  }

  .product-page__rating-row--fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    overflow: hidden;
    color: var(--color-primary);
  }

  /* Without this the clipped row shrinks its stars instead of hiding them. */
  .product-page__rating-star {
    display: inline-flex;
    flex: none;
  }

  .product-page__rating-count {
    color: inherit;
    font-size: 1.3rem;
    text-decoration: underline;
    font-weight: 400;
  }

  /* No anchor to point at, so it must not look like one. */
  .product-page__rating-count--static {
    text-decoration: none;
  }

  /* The count jumps to Loox's widget; land it below the sticky header, not under it. */
  #looxReviews {
    scroll-margin-block-start: var(--header-height, 0px);
  }
/* END_SNIPPET:product-rating */

/* START_SNIPPET:product-tags (INDEX:105) */
.product-card__tag {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--body-size);

    &::before {
      content: "";
      background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
      background-size: contain;
      background-repeat: no-repeat;
      display: inline-block;
      width: 8px;
      min-width: 8px;
      height: 8px;

    }

    &-label {
      min-width: 0;
    }
  }
/* END_SNIPPET:product-tags */

/* START_SNIPPET:push-pad (INDEX:108) */
.push-pad__description {
    color: var(--color-accent--dark-green);
    font-size: 1.5rem;
    font-weight: var(--body-medium-weight);
    text-align: center;
  }

  .push-pad {
    align-items: center;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
    text-decoration: none;

    @media screen and (max-width: 749px) {
      gap: var(--spacing-10);
    }
  }

  .push-pad__media-wrapper {
    aspect-ratio: var(--push-pad-aspect-ratio);
    background: color-mix(in oklab, var(--color-foreground) 4%, var(--color-background));
    border-radius: var(--media-radius);
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .push-pad__media {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease-in-out;
    will-change: transform;
    width: 100%;
  }

  .push-pad__step-media-stack,
  .push-pad__step-video-shell {
    height: 100%;
    width: 100%;
  }

  .push-pad__step-video-shell {
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.18s ease-out;
  }

  .push-pad__media--step-image {
    position: relative;
    z-index: 0;
  }

  .push-pad__media--step-video {
    height: 100%;
  }

  .push-pad__product {
    --push-pad-product-image-width: 6.5rem;
    --push-pad-product-inset: 1.5rem;

    inset-block-end: var(--push-pad-product-inset);
    inset-inline: var(--push-pad-product-inset);
    position: absolute;
    z-index: 1;

    @media screen and (min-width: 990px) {
      --push-pad-product-image-width: 10.1rem;
      --push-pad-product-inset: 2rem;
    }
  }

  .push-pad__product-image-link {
    color: inherit;
    display: block;
    text-decoration: none;
    width: var(--push-pad-product-image-width);
  }

  /* `height: 100%` — same as `blocks/ugc.liquid`, which shares this overlay. The
     white panel next to it is sized by its three lines of text, and that comes out
     a few pixels taller than the square tile (73px against 65px at the mobile
     scale). Without it the tile stayed square and top-aligned, leaving the two
     halves of the pill at different heights. */
  .push-pad__product-image-wrap {
    align-items: center;
    aspect-ratio: 1;
    background: var(--color-background);
    border-radius: var(--spacing-04);
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    padding: var(--spacing-12);
    width: var(--push-pad-product-image-width);
  }

  .push-pad__product-image {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .push-pad__product-content {
    display: none;
  }

  .push-pad__product-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-06);
    min-width: 0;
    overflow: hidden;
  }

  .push-pad__product-tag {
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
  }

  .push-pad__product-tag--last {
    flex: 1 1 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .push-pad__product-tags .product-card__tag {
    align-items: center;
    display: flex;
    font-size: var(--body-size);
    max-width: 100%;

    @media screen and (max-width: 749px) {
      font-size: 0.9rem;
    }
  }

  .push-pad__product-tag--last .product-card__tag,
  .push-pad__product-tag--last .product-card__tag-label,
  .push-pad__product-title-wrap {
    min-width: 0;
  }

  .push-pad__product-tag--last .product-card__tag-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .push-pad__product-title {
    color: inherit;
    display: block;
    font-size: var(--body-large-size);
    font-weight: 700;
    line-height: normal;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    @media screen and (max-width: 749px) {
      font-size: var(--body-size);
    }
  }

  .push-pad__product-price,
  .push-pad__product-price .price,
  .push-pad__product-price .compare-at-price {
    font-size: var(--body-size);
    font-weight: 700;
    line-height: normal;
    margin-block-start: 0.5rem;

    @media screen and (max-width: 749px) {
      margin-block-start: 0;
    }
  }

  .push-pad__product-price-prefix {
    font-size: 1.1rem;
    margin-inline-end: var(--spacing-04);
  }

  .push-pad__media--placeholder {
    background: color-mix(in oklab, var(--color-foreground) 4%, var(--color-background));
    display: grid;
    place-items: center;
  }

  .push-pad__placeholder-svg {
    color: color-mix(in oklab, var(--color-foreground) 18%, var(--color-background));
    height: 100%;
    width: 100%;
  }

  .push-pad__title {
    display: inline-flex;
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
    justify-content: center;
    letter-spacing: 0;
    margin: 0;
    position: relative;
  }

  .push-pad__title--step {
    font-weight: var(--push-pad-title-weight, var(--card-title-weight));
  }

  .push-pad__title span {
    position: relative;
  }

  .push-pad__title span::before {
    bottom: 0;
    content: '';
    height: 0.8rem;
    left: -2rem;
    margin-block: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    transform: translateX(-10px) scale(0.8);
    transition: all 0.3s ease-in-out;
    visibility: hidden;
    width: 0.8rem;
    background-image: url("data:image/svg+xml, %3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.94383 0.0337227C3.35475 -0.0760433 3.77415 0.0899824 4.0062 0.41798C4.23922 0.091446 4.6586 -0.0731357 5.0687 0.0376059C5.47929 0.148351 5.75928 0.502039 5.79587 0.90223C6.16159 0.734735 6.60863 0.802227 6.90881 1.10421C7.20802 1.40521 7.2734 1.85046 7.10575 2.21472C7.50479 2.25327 7.85668 2.53378 7.96628 2.94389C8.07603 3.35477 7.91004 3.77408 7.58213 4.00615C7.90859 4.23919 8.07313 4.65855 7.9624 5.06863C7.85166 5.47924 7.49778 5.75928 7.09775 5.79586C7.26523 6.16158 7.19778 6.6086 6.89582 6.90879C6.59483 7.208 6.14958 7.27337 5.78533 7.10572C5.74679 7.50478 5.46628 7.85667 5.05618 7.96628C4.64525 8.07604 4.22586 7.91002 3.99381 7.58202C3.76078 7.90855 3.34141 8.07297 2.9313 7.96239C2.52055 7.85165 2.24068 7.4978 2.20409 7.09777C1.83838 7.26525 1.39137 7.19776 1.09119 6.89579C0.791983 6.59479 0.726605 6.14954 0.894258 5.78528C0.495208 5.74674 0.143323 5.46622 0.0337219 5.05611C-0.0760416 4.64517 0.0899804 4.22577 0.41797 3.99371C0.0914491 3.76068 -0.0729706 3.3413 0.0376051 2.93118C0.148347 2.52059 0.502194 2.24073 0.90221 2.20414C0.734728 1.83842 0.802225 1.3914 1.10418 1.09121C1.40518 0.792001 1.85042 0.726621 2.21467 0.894279C2.25321 0.49522 2.53372 0.143328 2.94383 0.0337227Z' fill='%23869B5D'/%3E%3C/svg%3E%0A");
  }

  .push-pad--linked:hover .push-pad__media,
  .push-pad--linked:focus-visible .push-pad__media {
    transform: scale(1.012);
  }

  .push-pad--linked:hover .push-pad__title span::before,
  .push-pad--linked:focus-visible .push-pad__title span::before {
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
  }

  .push-pad--step[data-video-active='true'] .push-pad__step-video-shell {
    opacity: 1;
  }

  .push-pad--step[data-video-active='true'] .push-pad__media--step-image {
    opacity: 0;
  }

  @media screen and (min-width: 990px) {
    .push-pad__product {
      display: grid;
      grid-template-columns: var(--push-pad-product-image-width) minmax(0, 1fr);
      width: auto;
    }

    .push-pad--step .push-pad__product:hover .push-pad__product-image-wrap,
    .push-pad--step .push-pad__product:focus-within .push-pad__product-image-wrap {
      border-end-end-radius: 0;
      border-start-end-radius: 0;
    }

    .push-pad__product-content {
      align-content: center;
      background: var(--color-background);
      border-radius: 0 var(--spacing-04) var(--spacing-04) 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacing-04);
      /* Explicit track: an implicit `auto` column under `align-content: center` stretches in
         Firefox but not Chrome, which centred the text. minmax(0,…) keeps the title ellipsis working. */
      grid-template-columns: minmax(0, 1fr);
      min-height: 100%;
      min-width: 0;
      opacity: 0;
      overflow: hidden;
      padding: var(--spacing-12) var(--spacing-15);
      pointer-events: none;
      transform: translateX(-1.2rem);
      transition: opacity 0.24s ease-out, transform 0.24s ease-out;
    }

    .push-pad--step .push-pad__product:hover .push-pad__product-content,
    .push-pad--step .push-pad__product:focus-within .push-pad__product-content {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0);
    }
  }
/* END_SNIPPET:push-pad */

/* START_SNIPPET:quantity-selector (INDEX:109) */
.quantity-selector {
    display: inline-grid;
    grid-template-columns: auto minmax(2.5rem, auto) auto;
    align-items: center;
    border: 1px solid var(--color-foreground);
    overflow: hidden;
  }

  .quantity-selector input {
    width: 2.5rem;
    background-color: transparent;
    text-align: center;
    border: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    font-size: 1.5rem;
  }

  .quantity-selector input::-webkit-outer-spin-button,
  .quantity-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .quantity-selector input:focus,
  .quantity-selector input:focus-visible {
    outline-offset: -2px;
  }

  .quantity-selector .button {
    min-height: 3.2rem;
    min-width: 2.7rem;
    border-radius: 0;
    color: var(--color-foreground);
    background: transparent;
    border: 0;
  }

  .quantity-selector .button:focus-visible {
    outline-offset: -2px;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:recipe-card (INDEX:110) */
.recipe-card {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    color: var(--color-foreground);
    text-decoration: none;
  }

  .recipe-card__media-wrapper {
    /* The push pads portrait ratio, and the `recipe-content` hero radius. */
    position: relative;
    aspect-ratio: 326 / 467;
    border-radius: 0.6rem;
    overflow: hidden;
  }

  .recipe-card__media {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
  }

  .recipe-card__badges {
    /* The whole card is the link, so the badges must not swallow the click. */
    position: absolute;
    inset-block-start: 2.4rem;
    inset-inline-start: 2.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .recipe-card__badge {
    padding-block: 0.55rem;
    padding-inline: 1rem;
    border-radius: 0.4rem;
    background-color: var(--color-accent--off-white);
    color: var(--color-accent--dark-green);
    font-size: var(--nav-size);
    font-weight: var(--nav-weight);
    line-height: var(--nav-line-height);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /*
   * The quick view is desktop-hover only: a coarse pointer latches `:hover` after a tap, which
   * would leave the panel stuck over the card. `display: none` below is also what makes it free
   * there — nothing in a `display: none` subtree is laid out.
   */
  .recipe-card__quick-view {
    display: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .recipe-card__quick-view {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 3.9rem;
      padding-block: 8rem;
      padding-inline: 4rem;
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.25s ease-in-out;
    }

    .recipe-card:hover .recipe-card__quick-view,
    .recipe-card:focus-visible .recipe-card__quick-view {
      opacity: 1;
    }
  }

  .recipe-card__quick-view-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-15);
    font-size: var(--body-size);
    text-align: left;
  }

  .recipe-card__quick-view-head p {
    margin: 0;
  }

  .recipe-card__quick-view-label {
    font-weight: var(--body-bold-weight);
  }

  /*
   * The gauge defaults to `--color-primary` over a 25% track. Here the panel's own foreground is
   * the only ink, and the empty half of the scale is left unpainted — `transparent`, not removed:
   * the track is what sizes the box the filled row is clipped against, so a half star stays a
   * half star.
   */
  .recipe-card__quick-view .product-page__rating-row {
    display: flex;
  }

  .recipe-card__quick-view .product-page__rating-row--fill {
    color: var(--color-foreground);
  }

  .recipe-card__quick-view .product-page__rating-row--track {
    color: transparent;
  }

  .recipe-card__quick-view-flower {
    display: block;
    inline-size: 4.8rem;
    block-size: 4.8rem;
  }

  /*
   * The description is whatever the merchant wrote, so the panel cannot size itself to it: the
   * body takes the leftover height and clips, which keeps the CTA on screen for a long recipe.
   * `min-height: 0` is what allows a flex item to shrink below its content.
   *
   * The body is a size container so the rich text inside can clamp to as many whole lines as the
   * leftover height holds, ending on an ellipsis instead of a half-cut line. Each step below is
   * `2em + n * 1.2em`: n lines of `line-height: 1.2`, plus two `1em` paragraph gaps for the usual
   * hook + description split — the clamp counts lines, not margins. `em` in a container query
   * resolves against the container, which carries the same `.body` font size as the text.
   */
  .recipe-card__quick-view-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    text-align: left;
    container-type: size;
  }

  .recipe-card__quick-view-body .metafield-rich_text_field {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    line-height: 1.2;
  }

  .recipe-card__quick-view-body .metafield-rich_text_field p:not(:last-child) {
    margin-block-end: 1em;
  }

  @container (min-height: 4.4em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 2; } }
  @container (min-height: 5.6em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 3; } }
  @container (min-height: 6.8em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 4; } }
  @container (min-height: 8em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 5; } }
  @container (min-height: 9.2em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 6; } }
  @container (min-height: 10.4em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 7; } }
  @container (min-height: 11.6em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 8; } }
  @container (min-height: 12.8em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 9; } }
  @container (min-height: 14em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 10; } }
  @container (min-height: 15.2em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 11; } }
  @container (min-height: 16.4em) { .recipe-card__quick-view-body .metafield-rich_text_field { -webkit-line-clamp: 12; } }

  .recipe-card__quick-view-body > :last-child {
    margin-block-end: 0;
  }

  .recipe-card__quick-view-cta {
    flex: none;
    align-self: flex-start;
  }

  .recipe-card__content {
    display: flex;
    align-items: flex-start;
    text-align: left;
    flex-direction: column;
    gap: 0.7rem;
  }

  .recipe-card__title {
    margin: 0;
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight);
    line-height: var(--line-tight);
  }

  .recipe-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
  }
/* END_SNIPPET:recipe-card */

/* START_SNIPPET:search-layer-list (INDEX:112) */
.search-layer-list {
    --search-layer-list-visible: 1.2;
    --search-layer-list-gap: var(--search-layer-gap, var(--spacing-15));
    --search-layer-list-basis: calc(
      (100% - ((var(--search-layer-list-visible) - 1) * var(--search-layer-list-gap))) /
        var(--search-layer-list-visible)
    );

    position: relative;
    display: block;
  }

  /*
    Visible slides, and it only means anything while Embla is active — so every
    step has to sit **below** the 1090px handoff. A step above it is dead code:
    the track is a grid there and the basis is not read at all.

    `slider` is the exception, since it never hands over, and its 1500px step is
    qualified so it does not look like it applies to the other two.
  */
  @media screen and (min-width: 750px) {
    .search-layer-list {
      --search-layer-list-visible: 2.5;
    }
  }

  @media screen and (min-width: 990px) {
    .search-layer-list {
      --search-layer-list-visible: 3.15;
    }
  }

  @media screen and (min-width: 1500px) {
    .search-layer-list[data-layout='slider'] {
      --search-layer-list-visible: 3.5;
    }
  }

  .search-layer-list__viewport {
    overflow: hidden;
  }

  .search-layer-list__track {
    display: flex;
    gap: var(--search-layer-list-gap);
  }

  /*
    `display: grid` is what makes the card fill its cell. The row's height is set
    by its tallest slide — the recipes push, whose four entries outgrow a product
    card — and a card left at its natural height stops short, showing the panel
    under it. A one-column grid stretches the child in both the grid and the
    carousel layouts, without a percentage height resolved against an auto row.
  */
  .search-layer-list__slide {
    display: grid;
    flex: 0 0 var(--search-layer-list-basis);
    min-width: 0;
    border-radius: var(--media-radius);
  }

  /* The extra height has to read as card, not as a gap. */
  .search-layer-list__slide > product-card {
    background: var(--product-card-background);
  }

  /*
    The hover shot is the one image that has to *fill* the stretched card: it is a
    full-bleed lifestyle photo, so it is cropped rather than letterboxed, and left
    at its natural height it stops short and reveals the white behind it. The card
    image itself keeps `object-fit: contain` — packaging on white must not crop.
  */
  .search-layer-list__slide > product-card .product-card__hover-image {
    height: 100%;
    object-fit: cover;
  }

  /*
    The panel pads its content by `--page-margin`, so a carousel left inside that
    padding stops short of the screen and the cards read as cropped by the
    container rather than running off the edge. Bleed the clipping box — the
    viewport, never a wrapper above it — and hand the margin back as viewport
    padding: Embla aligns its snaps to the track inside it, so every snap keeps
    the page margin while the slides still run to both screen edges, and the
    `center` snaps land on the screen's centre.
  */
  @media screen and (max-width: 1089px) {
    .search-layer-list__viewport {
      margin-inline: calc(var(--page-margin) * -1);
      padding-inline: var(--page-margin);
    }
  }

  /* Static row: `grid` at every width, `mobile_slider` from 1090px — exactly
     where its `data-breakpoints` switches Embla off, so the carousel is never
     left driving a grid container. */
  .search-layer-list[data-layout='grid'] .search-layer-list__viewport {
    overflow: visible;
  }

  .search-layer-list[data-layout='grid'] .search-layer-list__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  /* `grid` is a row at every width, so it gets its own intermediate step rather
     than jumping from one column straight to four. */
  @media screen and (min-width: 750px) {
    .search-layer-list[data-layout='grid'] .search-layer-list__track {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media screen and (min-width: 1090px) {
    .search-layer-list[data-layout='grid'] .search-layer-list__viewport,
    .search-layer-list[data-layout='mobile_slider'] .search-layer-list__viewport {
      overflow: visible;
    }

    .search-layer-list[data-layout='grid'] .search-layer-list__track,
    .search-layer-list[data-layout='mobile_slider'] .search-layer-list__track {
      display: grid;
      grid-template-columns: repeat(var(--search-layer-list-columns), minmax(0, 1fr));
    }
  }

  /* Overlaid on the row's edges, unlike the sliders that reserve a column for their arrows. */
  .search-layer-list__nav {
    position: absolute;
    inset-block: 0;
    margin-block: auto;
  }

  .search-layer-list__nav--prev {
    inset-inline-start: 0;
  }

  .search-layer-list__nav--next {
    inset-inline-end: 0;
  }
/* END_SNIPPET:search-layer-list */

/* START_SNIPPET:search-layer-recipes (INDEX:113) */
/* The link is pinned to the bottom whatever the row's height, which is set by the product
     cards next to it — so the cards take the space and the link stays on the baseline. */
  .search-layer-recipes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-20);
    height: 100%;
    padding-block: 2.5rem;
    padding-inline: 2.3rem;
    border-radius: 0.6rem;
    background-color: var(--color-accent--yellow);
    color: var(--color-accent--dark-green);
  }

  .search-layer-recipes__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-08);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The row takes its tallest slide's height. Up to 1440px a product card is shorter than
     four recipes, which stretched every card beside the push: three are shown there. */
  @media screen and (min-width: 750px) and (max-width: 1439px) {
    .search-layer-recipes__list > :nth-child(n + 4) {
      display: none;
    }
  }

  .search-layer-recipes__card {
    display: flex;
    align-items: center;
    gap: var(--spacing-15);
    padding: var(--spacing-10);
    border-radius: 0.4rem;
    background-color: var(--product-card-background);
    color: inherit;
    text-decoration: none;
  }

  .search-layer-recipes__media {
    flex: none;
    display: block;
    inline-size: 5.7rem;
    aspect-ratio: var(--product-image-ratio);
    border-radius: 0.4rem;
    overflow: hidden;
  }

  .search-layer-recipes__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* `min-width: 0` so a long title wraps inside the flex item instead of pushing the card. */
  .search-layer-recipes__content {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
  }

  /* Two lines maximum: the card's height is set by its thumbnail, and a third
     line of title pushes past it and breaks the rhythm of the four-card stack. */
  .search-layer-recipes__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--body-size);
    font-weight: var(--body-bold-weight);
    line-height: var(--line-tight);
    text-align: left;
  }

  .search-layer-recipes__tags {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 1.2rem;
  }

  /* `product-tags` sizes itself on `--body-size`; here the tags sit one step under
     the title, so the shared snippet is stepped down rather than forked. */
  .search-layer-recipes__tags .product-card__tag,
  .search-layer-recipes__tags-more {
    font-size: var(--body-small-size);
  }

  .search-layer-recipes__link {
    align-self: center;
  }

  /* Same affordance as `snippets/search-result-card.liquid`, the other compact
     card of this panel, so the two read as one system. */
  @media (hover: hover) and (pointer: fine) {
    .search-layer-recipes__card:hover .search-layer-recipes__title {
      text-decoration: underline;
      text-underline-offset: 0.3rem;
    }
  }
/* END_SNIPPET:search-layer-recipes */

/* START_SNIPPET:search-result-card (INDEX:114) */
.search-result-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
    color: inherit;
    text-decoration: none;
  }

  .search-result-card:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
  }

  /*
    A product card takes its height from the natural ratio of its cover image,
    which no article or page shares. The frame is given the collection ratio
    instead, so the card is a predictable box either way — including for a page,
    which carries no image at all and renders the frame empty.
  */
  .search-result-card__media {
    display: block;
    aspect-ratio: var(--collection-image-ratio);
    overflow: hidden;
    background: var(--product-card-background);
  }

  .search-result-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .search-result-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-04);
  }

  .search-result-card__type {
    color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
    text-transform: uppercase;
  }

  .search-result-card__title {
    font-size: var(--card-title-size);
    font-weight: var(--card-title-weight, 700);
    line-height: normal;
  }

  .search-result-card__excerpt {
    color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
    text-wrap: pretty;
  }

  @media (hover: hover) and (pointer: fine) {
    .search-result-card:hover .search-result-card__title {
      text-decoration: underline;
      text-underline-offset: 0.3rem;
    }
  }
/* END_SNIPPET:search-result-card */

/* START_SNIPPET:tab-row (INDEX:123) */
.tab-row {
    display: block;
    align-self: stretch;
    width: calc(100% + var(--page-margin));
    margin-inline-end: calc(var(--page-margin) * -1);
    margin-block-start: 2.1rem;
  }

  .tab-row__slider {
    display: block;
    width: 100%;
  }

  .tab-row__viewport {
    overflow: hidden;
    padding-inline-end: var(--page-margin);
  }

  .tab-row__track {
    display: flex;
    gap: 0.25rem;
  }

  .tab-row__slide {
    flex: 0 0 14.4rem;
    min-width: 0;
  }

  .tab-row__link {
    --tab-row-pill-padding: 0.8rem;
    border-radius: var(--media-radius);
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.1rem;
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    font-size: var(--body-size);
    font-weight: 400;
    transition: background-color 0.25s ease-in-out;
  }

  /* The recipe typologies are toggle buttons; strip the UA chrome so they match the links. */
  button.tab-row__link {
    padding-inline: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;
  }

  .tab-row__link:is([aria-current='page'], [aria-pressed='true']) {
    background-color: var(--color-accent--yellow);
    padding-inline: var(--tab-row-pill-padding);
    border-radius: var(--media-radius);
    font-weight: var(--card-title-weight);
  }

  /*
   * Hover bolds the label and scales the thumbnail inside its clipped wrapper — no pill, so
   * nothing here resizes a tab and there is no layout shift to chase. See `Hover Must Not
   * Change Layout` in `.docs/css-patterns.md`.
   */
  @media (hover: hover) and (pointer: fine) {
    .tab-row__link:hover {
      font-weight: var(--card-title-weight);
    }

    .tab-row__link:hover .tab-row__link-image {
      transform: scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tab-row__link-image {
      transition: none;
    }
  }

  /* `overflow: hidden` here is what clips the hover scale, in both modes — `--crop` adds only
     the forced ratio on top. */
  .tab-row__link-image-wrapper {
    display: block;
    max-width: 11.2rem;
    border-radius: var(--media-radius);
    overflow: hidden;
  }

  .tab-row__link-image {
    display: block;
    width: 100%;
    max-width: 11.2rem;
    border-radius: inherit;
    height: auto;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /*
   * Cropped mode: the ratio is forced on the wrapper and the asset fills it. Without it each
   * image keeps its own ratio, so the row is only even when every source happens to be cropped
   * identically — fine for a handful of curated collection covers, not for recipe typologies.
   */
  .tab-row--crop .tab-row__link-image-wrapper {
    width: 100%;
    aspect-ratio: 5 / 6;
  }

  .tab-row--crop .tab-row__link-image {
    height: 100%;
    object-fit: cover;
  }

  @media screen and (min-width: 750px) {
    .tab-row {
      width: 100%;
      margin-inline-end: 0;
    }

    .tab-row__viewport {
      overflow: visible;
      padding-inline-end: 0;
    }

    .tab-row__track {
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      padding-inline-start: 0;
    }

    .tab-row__slide {
      flex: 0 1 auto;
    }

    .tab-row__link {
      --tab-row-pill-padding: 1.8rem;

      width: auto;
      padding-block: 1.8rem;
      font-size: var(--card-title-size);
    }

    .tab-row__link-image-wrapper,
    .tab-row__link-image {
      max-width: 16.6rem;
    }
  }
/* END_SNIPPET:tab-row */

/* START_SNIPPET:text (INDEX:124) */
.text-block {
    color: inherit;
    max-width: var(--text-block-max-width, none);
    text-wrap: var(--text-block-wrap, pretty);
  }

  .text-block--width-fill {
    width: 100%;
  }

  .text-block--width-fit {
    width: fit-content;
    max-width: min(100%, var(--text-block-max-width, 100%));
  }

  .text-block--align-center {
    margin-inline: auto;
  }

  .text-block--align-right {
    margin-inline-start: auto;
  }

  /* Centred list items each centre on their own line, and their markers end up
     scattered. The list is centred as one block instead, its items flush left. */
  .text-block--align-center :is(ul, ol) {
    width: fit-content;
    margin-inline: auto;
    text-align: start;
  }

  .text-block--uppercase {
    text-transform: uppercase;
  }

  .text-block__content {
    min-width: 0;
    margin-block: 0;
  }

  .text-block--align-center .text-block__content.chip--display {
    justify-content: center;
  }

  .text-block--align-right .text-block__content.chip--display {
    justify-content: flex-end;
  }

  .text-block__read-more {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
  }

  .text-block__content-wrapper {
    position: relative;
    overflow: hidden;
    block-size: auto;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: height;
  }

  .text-block__toggle {
    width: fit-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    list-style: none;
    transition: opacity 0.2s ease;
  }

  .text-block--align-center .text-block__toggle {
    margin-inline: auto;
  }

  .text-block--align-right .text-block__toggle {
    margin-inline-start: auto;
  }

  .text-block__fade {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 5.6rem;
    background: linear-gradient(to bottom, rgb(from var(--color-background) r g b / 0), var(--color-background));
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }

  .text-block__read-more[data-expanded] .text-block__fade,
  .text-block__read-more:not([data-overflowing]) .text-block__fade {
    opacity: 0;
  }

  .text-block__read-more:not([data-overflowing]) .text-block__toggle {
    display: none;
  }

  .text-block__toggle-label--less {
    display: none;
  }

  .text-block__read-more[data-expanded] .text-block__toggle-label--more {
    display: none;
  }

  .text-block__read-more[data-expanded] .text-block__toggle-label--less {
    display: inline;
  }

  .text-block--button {
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
  }

  .text-block--link {
    font-size: var(--link-font-size);
    line-height: var(--link-line-height);
    letter-spacing: var(--link-letter-spacing);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-picker-fields (INDEX:126) */
.variant-option {
    border: 0;
    margin: 0;
    padding: 0;
  }

  .variant-option__radios {
    --input-min-width: 9.3rem;
    display: grid;
    grid-template-columns: var(--input-min-width) var(--input-min-width) var(--input-min-width);
    padding-block-start: 1px;
    padding-inline-start: 1px;
    grid-gap: var(--spacing-10);
  }

  .variant-option__radios:has(.variant-option__radio:nth-child(5)) {
    grid-template-columns: repeat(auto-fit, minmax(var(--input-min-width), 1fr));
  }

  .variant-option__radio {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 4rem;
    border: 0.2rem solid transparent;
    background-color: #fff;
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: var(--button-small-size);
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .variant-option__radio--link {
    color: inherit;
    text-decoration: none;
  }

  .variant-option__radio:hover:not(:has(input:checked)) {
    border-color: var(--color-foreground);
    z-index: 1;
  }

  .variant-option__radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .variant-option__radio:has(input:focus-visible) {
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
    z-index: 2;
  }

  .variant-option__radio--link:focus-visible {
    outline: 2px solid var(--color-border);
    outline-offset: 2px;
    z-index: 2;
  }

  .variant-option__radio:has(input:checked) {
    border-color: var(--color-foreground);
    z-index: 1;
  }

  .variant-option__radio--unavailable {
    color: var(--color-muted);
  }

  .variant-option__radio--unavailable::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top right,
      transparent calc(50% - 0.5px),
      var(--color-border) calc(50% - 0.5px),
      var(--color-border) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)
    );
    pointer-events: none;
  }
/* END_SNIPPET:variant-picker-fields */