/** Shopify CDN: Minification failed

Line 2139:10 Expected identifier but found whitespace
Line 2139:12 Unexpected "{"
Line 2139:15 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.nf {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(110% 90% at 50% -10%, rgb(from var(--nf-accent) r g b / 0.14), transparent 60%),
      var(--nf-bg);
    color: var(--nf-fg);
  }

  .nf .contour { color: var(--nf-accent); opacity: 0.1; }

  .nf__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 44rem;
    margin-inline: auto;
    padding-block: var(--nf-pad-top) var(--nf-pad-bottom);
    padding-inline: var(--page-gutter);
    text-align: center;
  }

  .nf__eyebrow {
    margin: 0;
    color: var(--nf-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .nf__heading {
    margin: 1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2.15rem, 4.4vw, 3.6rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.028em;
    text-wrap: balance;
  }

  .nf__text {
    max-width: 40ch;
    margin: 1.2rem auto 0;
    color: rgb(from var(--nf-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .nf__text p { margin: 0; }

  .nf__search {
    display: flex;
    gap: 0.5rem;
    max-width: 26rem;
    margin: 2rem auto 0;
  }

  .nf__input {
    flex: 1;
    padding: 0.85rem 1.1rem;
    border: 1px solid rgb(from var(--nf-fg) r g b / var(--alpha-rule));
    border-radius: 999px;
    background: var(--nf-fg);
    background: rgb(from var(--nf-fg) r g b / 0.05);
    color: inherit;
    font-family: var(--font-primary--family);
    font-size: 0.95rem;
  }

  .nf__input:focus {
    border-color: var(--nf-accent);
    outline: none;
  }

  .nf__submit {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: var(--nf-fg);
    color: var(--nf-bg);
    cursor: pointer;
    transition: transform 0.25s var(--ease);
  }

  .nf__submit:hover { transform: translateY(var(--lift-button)); }
  .nf__submit svg { width: 19px; height: 19px; }

  .nf__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-block-start: 1.6rem;
  }

  .nf__link {
    color: rgb(from var(--nf-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: 0.92rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .nf__link:hover { color: var(--nf-accent); }

  @media (prefers-reduced-motion: reduce) {
    .nf__submit { transition: none; }
  }
/* END_SECTION:404 */

/* START_SECTION:bestsellers (INDEX:2) */
.bs {
    background: var(--bs-bg);
    color: var(--bs-fg);
  }

  .bs__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--bs-pad-top) var(--bs-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Head ---- */

  .bs__head {
    max-width: 32rem;
  }

  .bs__head--center {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
  }

  .bs__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    color: var(--bs-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .bs__head--center .bs__eyebrow {
    justify-content: center;
  }

  .bs__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  /* ---- Rows ---- */

  .bs__rows {
    display: flex;
    flex-direction: column;
    gap: var(--bs-row-gap);
    margin-block-start: clamp(2.5rem, 4.5vw, 4rem);
  }

  /* Theme blocks arrive wrapped in .shopify-block; contents lets the row own
     the layout box. */
  .bs__rows > .shopify-block {
    display: block;
  }

  .bs__row {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 4rem);
    align-items: center;
  }

  .bs__row--media-end .bs__media {
    order: 2;
  }

  /* ---- Media ---- */

  .bs__media {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3.4;
    padding: clamp(1.5rem, 3vw, 2.6rem);
    border-radius: var(--style-border-radius-cards);
    background: radial-gradient(120% 100% at 50% 0%, #fff, var(--bs-tint));
    overflow: hidden;
  }

  .bs__image {
    width: auto;
    max-width: 74%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 28px 40px rgb(from var(--bs-ink) r g b / 0.28));
  }

  .bs__image--placeholder {
    opacity: 0.3;
  }

  /* ---- Body ---- */

  .bs__segment {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    color: var(--bs-ink);
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .bs__title {
    margin: 0.75rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 540;
    line-height: 1.12;
    letter-spacing: -0.018em;
  }

  /* The flavour is a subordinate fact, so it sits on its own line in the
     utility face rather than competing with the product name. */
  .bs__flavour {
    display: block;
    margin-block-start: 0.45rem;
    color: var(--bs-ink);
    font-family: var(--font-mono--family);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .bs__copy {
    margin-block-start: 1.1rem;
    color: rgb(from var(--bs-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .bs__copy p {
    margin: 0;
  }

  .bs__copy p + p {
    margin-block-start: 0.8rem;
  }

  .bs__closer {
    margin: 1.05rem 0 0;
    max-width: 40ch;
    color: var(--bs-fg);
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
    font-style: italic;
    line-height: var(--type-lead-lh);
  }

  /* ---- Prices ---- */

  .bs__prices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
  }

  .bs__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.55rem 1.05rem;
    border: 1px solid rgb(from var(--bs-ink) r g b / var(--alpha-rule));
    border-radius: 999px;
    font-family: var(--font-mono--family);
  }

  .bs__price-size {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.72;
  }

  .bs__price-value {
    color: var(--bs-ink);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .bs__prices--plain {
    font-family: var(--font-mono--family);
    font-size: 0.86rem;
  }

  /* ---- CTA ---- */

  .bs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: 1.6rem;
    padding: 0.95rem 1.9rem;
    border-radius: var(--style-border-radius-buttons);
    background: var(--bs-ink);
    color: #fff;
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }

  .bs__btn:hover {
    transform: translateY(var(--lift-button));
    box-shadow: 0 16px 30px -14px rgb(from var(--bs-ink) r g b / 0.6);
  }

  .bs__btn-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .bs__btn:hover .bs__btn-arrow {
    transform: translateX(3px);
  }

  /* ---- Assurance ---- */

  .bs__assurance {
    margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
    padding-block-start: 1.4rem;
    border-block-start: 1px solid rgb(from var(--bs-fg) r g b / var(--alpha-hairline));
    color: rgb(from var(--bs-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.74rem;
    line-height: 1.7;
    letter-spacing: 0.02em;
    text-align: center;
  }

  .bs__assurance p {
    margin: 0;
  }

  /* ---- Responsive ---- */

  @media screen and (max-width: 899px) {
    .bs__row,
    .bs__row--media-end {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.5rem;
    }

    /* Image always leads on narrow screens; alternating sides stops reading as
       rhythm once the columns stack. */
    .bs__row--media-end .bs__media {
      order: 0;
    }

    .bs__media {
      aspect-ratio: 4 / 3;
    }

    .bs__head,
    .bs__head--center {
      max-width: none;
    }

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

  @media (prefers-reduced-motion: reduce) {
    .bs__btn,
    .bs__btn-arrow {
      transition: none;
    }
  }
/* END_SECTION:bestsellers */

/* START_SECTION:brand-story (INDEX:4) */
.story {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 82% -10%, rgb(from var(--story-accent) r g b / 0.13), transparent 58%),
      var(--story-bg);
    color: var(--story-fg);
  }

  .story .contour {
    color: var(--story-accent);
    opacity: 0.11;
  }

  .story__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--story-pad-top) var(--story-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .story--ridged .story__inner {
    padding-block-start: calc(var(--story-pad-top) + clamp(24px, 3vw, 48px));
  }

  /* ---- Head ---- */

  .story__head {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
  }

  .story__eyebrow {
    margin: 0;
    color: var(--story-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .story__heading {
    margin: 1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2.15rem, 3.6vw, 3.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.026em;
    text-wrap: balance;
  }

  .story__subheading {
    margin: 1.2rem 0 0;
    color: rgb(from var(--story-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
  }

  /* ---- Movements ----
     Claim on the left against a continuous hairline rail, evidence on the
     right. The rail is what turns four separate paragraphs into one argument
     you can see the shape of. */

  .story__moves {
    max-width: 68rem;
    margin-block-start: clamp(3rem, 6vw, 5.5rem);
    margin-inline: auto;
  }

  .story__moves > .shopify-block {
    display: block;
  }

  .story__move {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    padding-block: clamp(2.2rem, 4vw, 3.4rem);
    padding-inline-start: clamp(1.2rem, 2.4vw, 2.4rem);
    border-inline-start: 1px solid rgb(from var(--story-fg) r g b / var(--alpha-hairline));
  }

  /* The station marker on the rail. */
  .story__move::before {
    content: '';
    position: absolute;
    inset-block-start: clamp(2.6rem, 4.4vw, 3.9rem);
    inset-inline-start: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--story-accent);
    transform: translateX(-50%);
    box-shadow: 0 0 0 5px rgb(from var(--story-accent) r g b / 0.16);
  }

  .story__claim {
    position: sticky;
    inset-block-start: calc(var(--header-height, 76px) + 2.5rem);
    align-self: start;
  }

  /* Oversized, ghosted — graphic weight without another colour or shape. */
  .story__index {
    display: block;
    color: rgb(from var(--story-accent) r g b / var(--alpha-text-soft));
    font-family: var(--font-heading--family);
    font-size: clamp(2.6rem, 4.6vw, 4.2rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  .story__claim-text {
    margin: 0.7rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.25rem, 1.9vw, 1.75rem);
    font-weight: 500;
    line-height: 1.22;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }

  .story__evidence {
    padding-block-start: clamp(0.4rem, 1.6vw, 1.4rem);
    color: rgb(from var(--story-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .story__evidence p {
    margin: 0;
  }

  .story__evidence p + p {
    margin-block-start: 0.95rem;
  }

  /* ---- Kicker ----
     The thesis, and the only place on the page allowed to be this large. */

  .story__kicker {
    margin-block-start: clamp(3.5rem, 6vw, 6rem);
    padding-block-start: clamp(3rem, 5vw, 4.5rem);
    border-block-start: 1px solid rgb(from var(--story-fg) r g b / var(--alpha-hairline));
    text-align: center;
  }

  .story__kicker-lead,
  .story__kicker-payoff {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2.2rem, 5.6vw, 5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.032em;
  }

  .story__kicker-payoff {
    margin-block-start: 0.06em;
    color: var(--story-accent);
    font-style: italic;
    font-weight: 400;
  }

  .story__closing {
    margin: clamp(1.6rem, 2.6vw, 2.2rem) auto 0;
    max-width: 34rem;
    color: rgb(from var(--story-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  /* ---- CTA ---- */

  .story__cta {
    margin-block-start: clamp(2.2rem, 3.4vw, 3rem);
    text-align: center;
  }

  .story__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid rgb(from var(--story-fg) r g b / var(--alpha-rule));
    border-radius: var(--style-border-radius-buttons);
    color: var(--story-fg);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
  }

  .story__btn:hover {
    border-color: var(--story-accent);
    background: var(--story-accent);
    background: rgb(from var(--story-accent) r g b / 0.14);
    transform: translateY(var(--lift-button));
  }

  .story__btn-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .story__btn:hover .story__btn-arrow {
    transform: translateX(3px);
  }

  /* ---- Responsive ---- */

  @media screen and (max-width: 899px) {
    .story__move {
      grid-template-columns: minmax(0, 1fr);
      gap: 1rem;
    }

    /* Sticky needs a second column to scroll against; without one it just
       pins the claim over its own paragraph. */
    .story__claim {
      position: static;
    }

    .story__index {
      font-size: 2.4rem;
    }

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

  @media (prefers-reduced-motion: reduce) {
    .story__btn,
    .story__btn-arrow {
      transition: none;
    }
  }
/* END_SECTION:brand-story */

/* START_SECTION:cart (INDEX:5) */
.cart {
    background: var(--cart-bg);
    color: var(--cart-fg);
  }

  .cart__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--cart-pad-top) var(--cart-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .cart__eyebrow {
    margin: 0;
    color: var(--cart-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .cart__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2.15rem, 4vw, 3.2rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.028em;
  }

  .cart__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: clamp(1.8rem, 4vw, 3.5rem);
    align-items: start;
    margin-block-start: clamp(2rem, 3.5vw, 3rem);
  }

  /* ---- Lines ---- */

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

  .line {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: clamp(0.9rem, 2vw, 1.5rem);
    align-items: start;
    padding-block: 1.5rem;
    border-block-start: 1px solid rgb(from var(--cart-fg) r g b / var(--alpha-hairline));
  }

  .line:last-child {
    border-block-end: 1px solid rgb(from var(--cart-fg) r g b / var(--alpha-hairline));
  }

  .line__media {
    display: grid;
    place-items: center;
    width: 96px;
    aspect-ratio: 1;
    border-radius: var(--radius-tile);
    background: var(--cart-surface);
    overflow: hidden;
  }

  .line__image { width: 100%; height: 100%; object-fit: contain; }

  .line__title {
    font-family: var(--font-heading--family);
    font-size: 1.08rem;
    font-weight: 540;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: inherit;
    text-decoration: none;
  }

  .line__title:hover { color: var(--cart-accent); }

  .line__variant {
    margin: 0.35rem 0 0;
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
  }

  .line__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-block-start: 0.9rem;
  }

  .line__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(from var(--cart-fg) r g b / var(--alpha-rule));
    border-radius: 999px;
  }

  .line__qty-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 36px;
    color: inherit;
    font-size: 1rem;
    text-decoration: none;
  }

  .line__qty-btn:hover { color: var(--cart-accent); }

  .line__qty-value {
    min-width: 28px;
    font-family: var(--font-mono--family);
    font-size: 0.88rem;
    text-align: center;
  }

  .line__remove {
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: 0.84rem;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .line__remove:hover { color: var(--cart-accent); }

  .line__money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-family: var(--font-mono--family);
  }

  .line__price { font-size: 1rem; font-weight: 600; }

  .line__was {
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-soft));
    font-size: 0.82rem;
  }

  /* ---- Summary ---- */

  .cart__summary {
    position: sticky;
    inset-block-start: calc(var(--header-height, 76px) + 1.5rem);
    padding: clamp(1.4rem, 2.4vw, 2rem);
    border: 1px solid rgb(from var(--cart-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--cart-surface);
  }

  .cart__summary-title {
    margin: 0 0 1.2rem;
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .cart__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-primary--family);
    font-size: 0.95rem;
  }

  .cart__row + .cart__row { margin-block-start: 0.6rem; }

  .cart__row--discount { color: var(--cart-accent); }

  .cart__subtotal {
    font-family: var(--font-mono--family);
    font-size: 1.3rem;
    font-weight: 600;
  }

  /* ---- Free shipping meter ---- */

  .cart__ship { margin-block-start: 1.3rem; }

  .cart__ship-text {
    margin: 0 0 0.6rem;
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .cart__ship-text--met { color: var(--cart-accent); }

  .cart__meter {
    height: 4px;
    border-radius: 999px;
    background: var(--cart-fg);
    background: rgb(from var(--cart-fg) r g b / 0.12);
    overflow: hidden;
  }

  .cart__meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cart-accent);
    transition: width 0.5s var(--ease);
  }

  .cart__note {
    margin: 1.3rem 0 0;
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    line-height: 1.6;
  }

  .cart__checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-block-start: 1.2rem;
    padding: 1rem 1.6rem;
    border: 1px solid transparent;
    border-radius: var(--style-border-radius-buttons);
    background: var(--cart-fg);
    color: var(--cart-surface);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }

  .cart__checkout:hover {
    transform: translateY(var(--lift-button));
    box-shadow: 0 16px 32px -16px rgb(from var(--cart-fg) r g b / 0.6);
  }

  .cart__checkout--ghost {
    width: auto;
    background: transparent;
    border-color: rgb(from var(--cart-fg) r g b / var(--alpha-rule));
    color: var(--cart-fg);
  }

  .cart__checkout-arrow { width: 17px; height: 17px; }

  .cart__continue {
    display: block;
    margin-block-start: 0.9rem;
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: 0.88rem;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 0.18em;
  }

  .cart__continue:hover { color: var(--cart-accent); }

  .cart__assurance {
    margin-block-start: 1.4rem;
    padding-block-start: 1.2rem;
    border-block-start: 1px solid rgb(from var(--cart-fg) r g b / var(--alpha-hairline));
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    line-height: 1.7;
  }

  .cart__assurance p { margin: 0; }

  /* ---- Empty ---- */

  .cart__empty {
    margin-block-start: 3rem;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-block: 1px solid rgb(from var(--cart-fg) r g b / var(--alpha-hairline));
    text-align: center;
  }

  .cart__empty-text {
    margin: 0 0 1.6rem;
    color: rgb(from var(--cart-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
  }

  .cart__empty .cart__checkout { display: inline-flex; margin-inline: auto; }

  /* ---- Responsive ---- */

  @media screen and (max-width: 899px) {
    .cart__grid { grid-template-columns: minmax(0, 1fr); }
    .cart__summary { position: static; }
  }

  @media screen and (max-width: 559px) {
    .line { grid-template-columns: 72px minmax(0, 1fr); }
    .line__media { width: 72px; }
    .line__money { grid-column: 2; align-items: flex-start; margin-block-start: 0.6rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart__checkout, .cart__meter-fill { transition: none; }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:6) */
.coll {
    background: var(--coll-bg);
    color: var(--coll-fg);
  }

  .coll__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--coll-pad-top) var(--coll-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Head ---- */

  .coll__crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.4rem;
    color: rgb(from var(--coll-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .coll__crumb a { color: inherit; text-decoration: none; transition: color 0.2s; }
  .coll__crumb a:hover { color: var(--coll-accent); }

  .coll__eyebrow {
    margin: 0;
    color: var(--coll-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .coll__heading {
    max-width: 20ch;
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2.15rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.028em;
    text-wrap: balance;
  }

  .coll__desc {
    max-width: 46ch;
    margin-block-start: 1.1rem;
    color: rgb(from var(--coll-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .coll__desc p { margin: 0; }

  /* ---- Toolbar ---- */

  .coll__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: clamp(2rem, 3.5vw, 3rem);
    padding-block-end: 1.1rem;
    border-block-end: 1px solid rgb(from var(--coll-fg) r g b / var(--alpha-hairline));
  }

  .coll__count {
    margin: 0;
    color: rgb(from var(--coll-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .coll__sort {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .coll__sort-label {
    color: rgb(from var(--coll-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .coll__sort-select {
    padding: 0.5rem 0.9rem;
    border: 1px solid rgb(from var(--coll-fg) r g b / var(--alpha-rule));
    border-radius: 999px;
    background: var(--coll-surface);
    color: inherit;
    font-family: var(--font-primary--family);
    font-size: 0.88rem;
    cursor: pointer;
  }

  /* ---- Grid ---- */

  .coll__grid {
    display: grid;
    grid-template-columns: repeat(var(--coll-cols), minmax(0, 1fr));
    gap: clamp(0.8rem, 1.4vw, 1.3rem);
    margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
    padding: 0;
    list-style: none;
  }

  .coll__item { display: flex; }

  .coll-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    border: 1px solid rgb(from var(--coll-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--coll-surface);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }

  .coll-card:hover {
    transform: translateY(var(--lift-card));
    border-color: rgb(from var(--coll-accent) r g b / 0.5);
    box-shadow: 0 22px 46px -26px rgb(from var(--coll-fg) r g b / 0.35);
  }

  .coll-card__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: clamp(1rem, 2vw, 1.8rem);
    background: radial-gradient(120% 100% at 50% 0%, #fff, var(--coll-bg));
  }

  .coll-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s var(--ease);
  }

  .coll-card:hover .coll-card__image { transform: scale(1.05) translateY(-4px); }

  .coll-card__image--placeholder { opacity: 0.3; }

  .coll-card__badge {
    position: absolute;
    inset-block-start: 0.8rem;
    inset-inline-start: 0.8rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgb(from var(--coll-fg) r g b / var(--alpha-hairline));
    border-radius: 999px;
    background: rgb(255 255 255 / 78%);
    color: var(--coll-fg);
    font-family: var(--font-mono--family);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .coll-card__flag {
    position: absolute;
    inset-block-start: 0.8rem;
    inset-inline-end: 0.8rem;
    z-index: 2;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgb(from var(--coll-fg) r g b / 0.85);
    color: var(--coll-surface);
    font-family: var(--font-mono--family);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .coll-card__flag--save {
    background: var(--coll-accent);
  }

  .coll-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.2rem;
  }

  .coll-card__segment {
    margin-block-end: 0.4rem;
    color: rgb(from var(--coll-fg) r g b / 0.7);
    font-family: var(--font-mono--family);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .coll-card__title {
    font-family: var(--font-heading--family);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 540;
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  .coll-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
  }

  .coll-card__price {
    font-family: var(--font-mono--family);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .coll-card__go {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--coll-fg);
    color: var(--coll-surface);
    transition: transform 0.35s var(--ease);
  }

  .coll-card__go svg { width: 15px; height: 15px; stroke-width: 2.2; }

  .coll-card:hover .coll-card__go { transform: scale(1.08); }

  /* ---- Pagination ---- */

  .coll__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  }

  .coll__page {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 0.6rem;
    border: 1px solid rgb(from var(--coll-fg) r g b / var(--alpha-hairline));
    border-radius: 999px;
    color: inherit;
    font-family: var(--font-mono--family);
    font-size: 0.84rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
  }

  .coll__page:hover { border-color: var(--coll-accent); }

  .coll__page.is-current {
    border-color: var(--coll-fg);
    background: var(--coll-fg);
    color: var(--coll-surface);
  }

  .coll__page--gap { border-color: transparent; }

  /* ---- Empty ---- */

  .coll__empty {
    margin-block-start: 3rem;
    text-align: center;
  }

  .coll__empty p {
    margin: 0 0 1.5rem;
    color: rgb(from var(--coll-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
  }

  .coll__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid rgb(from var(--coll-fg) r g b / var(--alpha-rule));
    border-radius: var(--style-border-radius-buttons);
    color: inherit;
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
  }

  .coll__btn:hover {
    border-color: var(--coll-accent);
    background: rgb(from var(--coll-accent) r g b / 0.1);
    transform: translateY(var(--lift-button));
  }

  .coll__btn-arrow { width: 17px; height: 17px; }

  /* ---- Responsive ---- */

  @media screen and (max-width: 1099px) {
    .coll__grid { grid-template-columns: repeat(min(var(--coll-cols), 3), minmax(0, 1fr)); }
  }

  @media screen and (max-width: 899px) {
    .coll__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coll__heading, .coll__desc { max-width: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .coll-card,
    .coll-card__image,
    .coll-card__go,
    .coll__btn {
      transition: none;
    }
  }
.coll-card-cache-bust-3 { display: none !important; }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:7) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:contact (INDEX:8) */
.ct {
    background: var(--ct-bg);
    color: var(--ct-fg);
  }

  .ct__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--ct-pad-top) var(--ct-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .ct__grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 42rem;
    margin-inline: auto;
  }

  .ct__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  /* ---- Details ---- */

  .ct__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .ct__intro {
    margin-block-start: 1rem;
    color: rgb(from var(--ct-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .ct__intro p { margin: 0; }

  .ct__details {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
  }

  .ct__detail {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .ct__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-block-start: 0.3rem;
    color: var(--ct-accent);
  }

  /* Label above value, so scanning down the column reads as a list of
     channels rather than a paragraph. */
  .ct__detail-label {
    display: block;
    color: rgb(from var(--ct-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .ct__detail-value {
    display: block;
    margin-block-start: 0.25rem;
    color: var(--ct-fg);
    font-family: var(--font-primary--family);
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
    transition: color 0.2s;
  }

  a.ct__detail-value:hover { color: var(--ct-accent); }

  .ct__trade {
    margin-block-start: 2rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgb(from var(--ct-fg) r g b / var(--alpha-hairline));
    color: rgb(from var(--ct-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: 0.92rem;
    line-height: 1.65;
  }

  .ct__trade p { margin: 0; }

  /* ---- Form panel ---- */

  .ct__panel {
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border: 1px solid rgb(from var(--ct-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--ct-surface);
  }

  .ct__form-heading {
    margin: 0 0 1.5rem;
    font-family: var(--font-heading--family);
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    font-weight: 540;
    letter-spacing: -0.014em;
  }

  .ct__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .ct__field { margin-block-end: 1rem; }
  .ct__row .ct__field { margin-block-end: 0; }
  .ct__row + .ct__field { margin-block-start: 1rem; }

  .ct__label {
    display: block;
    margin-block-end: 0.45rem;
    color: rgb(from var(--ct-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-mono--family);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .ct__input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgb(from var(--ct-fg) r g b / var(--alpha-rule));
    border-radius: var(--style-border-radius-inputs);
    background: var(--ct-bg);
    color: var(--ct-fg);
    font-family: var(--font-primary--family);
    font-size: 0.96rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .ct__input:focus {
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px rgb(from var(--ct-accent) r g b / 0.18);
    outline: none;
  }

  .ct__textarea {
    resize: vertical;
    min-height: 8rem;
  }

  .ct__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-block-start: 0.5rem;
    padding: 0.95rem 1.9rem;
    border: 0;
    border-radius: var(--style-border-radius-buttons);
    background: var(--ct-fg);
    color: var(--ct-surface);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  }

  .ct__submit:hover {
    transform: translateY(var(--lift-button));
    box-shadow: 0 16px 32px -16px rgb(from var(--ct-fg) r g b / 0.6);
  }

  .ct__submit-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .ct__submit:hover .ct__submit-arrow { transform: translateX(3px); }

  /* ---- Feedback ---- */

  .ct__success,
  .ct__errors {
    margin: 0 0 1.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--style-border-radius-inputs);
    font-family: var(--font-primary--family);
    font-size: 0.92rem;
  }

  .ct__success {
    border: 1px solid rgb(from var(--ct-accent) r g b / 0.4);
    background: var(--ct-accent);
    background: rgb(from var(--ct-accent) r g b / 0.1);
  }

  .ct__errors {
    border: 1px solid rgb(190 60 50 / 45%);
    background: rgb(190 60 50 / 8%);
    color: #a33;
  }

  .ct__errors p { margin: 0; }

  /* ---- Responsive ---- */

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

  @media screen and (max-width: 559px) {
    .ct__row { grid-template-columns: minmax(0, 1fr); }
    .ct__row .ct__field + .ct__field { margin-block-start: 1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ct__input,
    .ct__submit,
    .ct__submit-arrow,
    .ct__detail-value {
      transition: none;
    }
  }
/* END_SECTION:contact */

/* START_SECTION:cross-sell (INDEX:9) */
.xs {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(100% 90% at 14% -10%, rgb(from var(--xs-accent) r g b / 0.14), transparent 58%),
      var(--xs-bg);
    color: var(--xs-fg);
  }

  .xs .contour { color: var(--xs-accent); opacity: 0.1; }

  .xs__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 58rem;
    margin-inline: auto;
    padding-block: var(--xs-pad-top) var(--xs-pad-bottom);
    padding-inline: var(--page-gutter);
    text-align: center;
  }

  .xs__closing-text {
    max-width: 46ch;
    margin-inline: auto;
    color: rgb(from var(--xs-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .xs__closing-text p { margin: 0; }

  /* The doc's closing beat — the largest line in the section. */
  .xs__kicker {
    margin: 1.2rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.024em;
    text-wrap: balance;
  }

  /* ---- Partner card ---- */

  .xs__card {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgb(from var(--xs-fg) r g b / var(--alpha-rule));
    border-radius: var(--radius-card);
    background: var(--xs-surface);
    color: inherit;
    text-align: start;
    text-decoration: none;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }

  .xs__card:hover {
    transform: translateY(var(--lift-card));
    border-color: var(--xs-accent);
    box-shadow: 0 22px 46px -26px rgb(0 0 0 / 45%);
  }

  .xs__media {
    display: grid;
    place-items: center;
    width: clamp(96px, 14vw, 150px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    border-radius: var(--radius-tile);
    background: var(--xs-fg);
    background: rgb(from var(--xs-fg) r g b / 0.06);
    overflow: hidden;
  }

  .xs__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s var(--ease);
  }

  .xs__card:hover .xs__image { transform: scale(1.06); }

  .xs__body { display: block; }

  .xs__eyebrow {
    display: block;
    color: var(--xs-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .xs__lead {
    display: block;
    margin-block-start: 0.55rem;
    color: rgb(from var(--xs-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .xs__name {
    display: block;
    margin-block-start: 0.5rem;
    font-family: var(--font-heading--family);
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    font-weight: 540;
    line-height: 1.15;
    letter-spacing: -0.018em;
  }

  .xs__go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.8rem;
    color: var(--xs-accent);
    font-family: var(--font-primary--family);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .xs__go-arrow { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
  .xs__card:hover .xs__go-arrow { transform: translateX(3px); }

  @media screen and (max-width: 599px) {
    .xs__card { flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce) {
    .xs__card, .xs__image, .xs__go-arrow { transition: none; }
  }
/* END_SECTION:cross-sell */

/* START_SECTION:cta-band (INDEX:10) */
.cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(110% 90% at 18% -10%, rgb(from var(--cta-accent) r g b / 0.15), transparent 58%),
      var(--cta-bg);
    color: var(--cta-fg);
  }

  .cta .contour {
    color: var(--cta-accent);
    opacity: 0.1;
  }

  .cta__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 52rem;
    margin-inline: auto;
    padding-block: var(--cta-pad-top) var(--cta-pad-bottom);
    padding-inline: var(--page-gutter);
    text-align: center;
  }

  .cta__eyebrow {
    margin: 0;
    color: var(--cta-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .cta__heading {
    margin: 1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .cta__text {
    max-width: 44ch;
    margin: 1.2rem auto 0;
    color: rgb(from var(--cta-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .cta__text p {
    margin: 0;
  }

  .cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-block-start: 2rem;
  }

  .cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid transparent;
    border-radius: var(--style-border-radius-buttons);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s;
  }

  .cta__btn--primary {
    background: var(--cta-fg);
    color: var(--cta-bg);
  }

  .cta__btn--primary:hover {
    transform: translateY(var(--lift-button));
    box-shadow: 0 14px 34px -14px rgb(0 0 0 / 55%);
  }

  .cta__btn--ghost {
    border-color: rgb(from var(--cta-fg) r g b / var(--alpha-rule));
    color: var(--cta-fg);
  }

  .cta__btn--ghost:hover {
    border-color: var(--cta-accent);
    background: var(--cta-accent);
    background: rgb(from var(--cta-accent) r g b / 0.12);
    transform: translateY(var(--lift-button));
  }

  .cta__btn-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .cta__btn:hover .cta__btn-arrow {
    transform: translateX(3px);
  }

  @media screen and (max-width: 749px) {
    .cta__btn {
      flex: 1 1 100%;
      justify-content: center;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cta__btn,
    .cta__btn-arrow {
      transition: none;
    }
  }
/* END_SECTION:cta-band */

/* START_SECTION:faq (INDEX:11) */
.faq {
    background: var(--faq-bg);
    color: var(--faq-fg);
  }

  .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5.5rem);
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--faq-pad-top) var(--faq-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Aside ---- */

  .faq__aside-sticky {
    position: sticky;
    inset-block-start: calc(var(--header-height, 76px) + 2.5rem);
  }

  .faq__eyebrow {
    margin: 0;
    color: var(--faq-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .faq__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .faq__subtext {
    margin-block-start: 1rem;
    color: rgb(from var(--faq-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .faq__subtext p {
    margin: 0;
  }

  .faq__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-block-start: 1.8rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid rgb(from var(--faq-fg) r g b / var(--alpha-rule));
    border-radius: var(--style-border-radius-buttons);
    color: var(--faq-fg);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
  }

  .faq__btn:hover {
    border-color: var(--faq-accent);
    background: var(--faq-accent);
    background: rgb(from var(--faq-accent) r g b / 0.1);
    transform: translateY(var(--lift-button));
  }

  .faq__btn-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.25s var(--ease);
  }

  .faq__btn:hover .faq__btn-arrow {
    transform: translateX(3px);
  }

  /* ---- List ---- */

  .faq__list {
    display: block;
  }

  .faq__list > .shopify-block {
    display: block;
  }

  .faq__item {
    border-block-end: 1px solid rgb(from var(--faq-fg) r g b / var(--alpha-hairline));
  }

  .faq__list > .shopify-block:first-child .faq__item {
    border-block-start: 1px solid rgb(from var(--faq-fg) r g b / var(--alpha-hairline));
  }

  .faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: clamp(1.15rem, 1.8vw, 1.5rem);
    cursor: pointer;
    list-style: none;
    transition: color 0.25s var(--ease);
  }

  /* Safari still paints its own marker without this. */
  .faq__q::-webkit-details-marker {
    display: none;
  }

  .faq__q:hover,
  .faq__item[open] .faq__q {
    color: var(--faq-accent);
  }

  .faq__q-text {
    font-family: var(--font-heading--family);
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
    font-weight: 500;
    line-height: 1.34;
    letter-spacing: -0.012em;
    text-wrap: pretty;
  }

  /* ---- Plus / minus ---- */

  .faq__sign {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-block-start: 0.15rem;
    transition: transform 0.4s var(--ease);
  }

  .faq__sign::before,
  .faq__sign::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 100%;
    height: 1.5px;
    border-radius: 2px;
    background: currentcolor;
    transform: translateY(-50%);
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
  }

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

  .faq__item[open] .faq__sign {
    transform: rotate(180deg);
  }

  /* The vertical bar folds away, leaving a minus. */
  .faq__item[open] .faq__sign::after {
    opacity: 0;
    transform: translateY(-50%) rotate(0deg);
  }

  /* ---- Answer ---- */

  .faq__a {
    color: rgb(from var(--faq-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .faq__a-inner {
    padding-block-end: clamp(1.2rem, 1.8vw, 1.6rem);
    padding-inline-end: clamp(0px, 4vw, 3rem);
  }

  .faq__a p {
    margin: 0;
  }

  .faq__a p + p {
    margin-block-start: 0.8rem;
  }

  /* Animating a <details> open used to need JS to measure the panel. With
     interpolate-size the browser can transition straight to height:auto, so
     this stays script-free; browsers without it simply snap open. */
  @supports (interpolate-size: allow-keywords) {
    .faq__item::details-content {
      height: 0;
      overflow: hidden;
      transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete;
    }

    .faq__item[open]::details-content {
      height: auto;
    }
  }

  /* ---- Responsive ---- */

  @media screen and (max-width: 899px) {
    .faq__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: 2rem;
    }

    .faq__aside-sticky {
      position: static;
    }

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

  @media (prefers-reduced-motion: reduce) {
    .faq__q,
    .faq__sign,
    .faq__sign::before,
    .faq__sign::after,
    .faq__btn,
    .faq__btn-arrow,
    .faq__item::details-content {
      transition: none;
    }
  }
/* END_SECTION:faq */

/* START_SECTION:footer (INDEX:12) */
.ft {
    position: relative;
    background: var(--ft-bg);
    color: var(--ft-fg);
  }

  .ft__ridge {
    color: {{ s.ridge_color | default: '#fbfbf6' }};
  }

  .ft__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--ft-pad-top) var(--ft-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Top ---- */

  .ft__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 2fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }

  .ft__brand {
    max-width: 26rem;
  }

  .ft__logo {
    display: inline-block;
    color: var(--ft-accent);
    text-decoration: none;
  }

  .ft__logo-image {
    width: 200px;
    height: auto;
  }

  .ft__logo-text {
    font-family: var(--font-heading--family);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .ft__tagline {
    margin: 0.7rem 0 0;
    color: var(--ft-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .ft__desc {
    margin-block-start: 1.2rem;
    color: rgb(from var(--ft-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .ft__desc p {
    margin: 0;
  }

  /* ---- Social ---- */

  .ft__social {
    display: flex;
    gap: 0.6rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
  }

  .ft__social-link {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgb(from var(--ft-fg) r g b / var(--alpha-rule));
    border-radius: 50%;
    color: var(--ft-fg);
    transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
  }

  .ft__social-link:hover {
    border-color: var(--ft-accent);
    background: var(--ft-accent);
    background: rgb(from var(--ft-accent) r g b / 0.12);
    color: var(--ft-accent);
    transform: translateY(var(--lift-button));
  }

  .ft__social-link svg {
    width: 18px;
    height: 18px;
  }

  /* ---- Link columns ---- */

  .ft__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  .ft__cols > .shopify-block {
    display: block;
  }

  .ft__col-title {
    margin: 0 0 1rem;
    color: var(--ft-fg);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .ft__list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ft__link {
    color: rgb(from var(--ft-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: 0.93rem;
    text-decoration: none;
    transition: color 0.2s;
  }

  .ft__link:hover {
    color: var(--ft-accent);
  }

  .ft__link--icon {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
  }

  .ft__link--static {
    cursor: default;
  }

  .ft__link--static:hover {
    color: rgb(from var(--ft-fg) r g b / var(--alpha-text-muted));
  }

  .ft__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-block-start: 0.15rem;
    color: var(--ft-accent);
  }

  .ft__list--contact {
    gap: 0.85rem;
  }

  /* ---- Credentials ---- */

  .ft__creds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none;
  }

  .ft__cred {
    padding: 0.4rem 0.85rem;
    border: 1px solid rgb(from var(--ft-fg) r g b / var(--alpha-hairline));
    border-radius: 999px;
    color: rgb(from var(--ft-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  /* ---- Disclaimer ---- */

  .ft__disclaimer {
    margin-block-start: 1.6rem;
    color: var(--ft-fg);
    color: rgb(from var(--ft-fg) r g b / 0.45);
    font-family: var(--font-primary--family);
    font-size: 0.76rem;
    line-height: 1.65;
  }

  .ft__disclaimer p {
    margin: 0;
  }

  /* ---- Base ---- */

  .ft__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-block-start: clamp(2rem, 3vw, 2.6rem);
    padding-block-start: 1.5rem;
    border-block-start: 1px solid rgb(from var(--ft-fg) r g b / var(--alpha-hairline));
  }

  .ft__copy {
    margin: 0;
    color: rgb(from var(--ft-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }

  .ft__pay {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ft__pay-icon {
    width: 34px;
    height: auto;
    border-radius: 4px;
  }

  .ft__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ft__legal-link {
    color: rgb(from var(--ft-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s;
  }

  .ft__legal-link:hover {
    color: var(--ft-accent);
  }

  /* ---- Responsive ---- */

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

    .ft__brand {
      grid-column: 1 / -1;
      max-width: 34rem;
    }
  }

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

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

    .ft__base {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ft__social-link,
    .ft__link,
    .ft__legal-link {
      transition: none;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:13) */
/* Shopify wraps this section in .shopify-section, which critical.css turns
     into a 3-column grid. Sticky has to live on that wrapper rather than on the
     header: the wrapper is only as tall as the header, so a sticky child would
     have no range to travel and would never stick. */
  .shopify-section-group-header-group {
    position: relative;
    z-index: 70;
  }

  .shopify-section-group-header-group:has(.header--sticky) {
    position: sticky;
    inset-block-start: 0;
  }

  .header {
    position: relative;
    z-index: 70;
    display: block;
    border-block-end: 1px solid transparent;
    background: rgb(var(--header-background-rgb) / var(--header-opacity, 1));
    color: var(--header-foreground);
    transition: border-color 0.3s, background 0.3s;
  }

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

  @supports (backdrop-filter: blur(1px)) {
    .header {
      backdrop-filter: saturate(1.5) blur(var(--header-blur, 0px));
      -webkit-backdrop-filter: saturate(1.5) blur(var(--header-blur, 0px));
    }
  }

  .header--bordered,
  .header.is-scrolled {
    border-block-end-color: var(--header-border);
  }

  .header.is-scrolled {
    background: rgb(var(--header-background-rgb) / var(--header-opacity-scrolled, 1));
  }

  .header__container {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
  }

  .header__container--full {
    max-width: none;
  }

  /* Flex + space-between, matching the reference: logo hard left, links taking
     the middle, actions hard right. */
  .header__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-height);
  }

  /* ---- Logo ---- */

  .header__heading {
    margin: 0;
    font-size: inherit;
    line-height: 0;
  }

  .header__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--color-brand);
    text-decoration: none;
  }

  .header__logo-image {
    display: block;
    width: auto;
    max-width: 220px;
    height: var(--header-logo-height);
    object-fit: contain;
  }

  .header__logo-text {
    font-family: var(--font-heading--family);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  /* ---- Links ---- */

  .header__links {
    display: flex;
    align-items: center;
    gap: 2.4rem;
  }

  .header__item--has-drop {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
  }

  /* Nav items size to their own content. Without this a stretched flex parent
     can blow the item out and strand the chevron far from its label. */
  .header__links > * {
    flex: 0 0 auto;
  }

  .header__link-label {
    white-space: nowrap;
  }

  .header__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0;
    border: none;
    background: none;
    color: var(--header-foreground);
    font-family: var(--font-primary--family);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
    -webkit-font-smoothing: antialiased;
  }

  .header__link::after {
    content: '';
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    width: 100%;
    height: 2px;
    background: var(--header-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }

  .header__link:hover::after,
  .header__link--active::after,
  .header__item--has-drop.is-open .header__link--drop::after {
    transform: scaleX(1);
  }

  .header__link:hover,
  .header__item--has-drop.is-open .header__link--drop {
    color: var(--color-brand);
  }

  .header__link--active {
    color: var(--color-brand);
    font-weight: 600;
  }

  .header__drop-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.3s var(--ease);
  }

  .header__item--has-drop.is-open .header__drop-icon {
    transform: rotate(180deg);
  }

  /* ---- Dropdown ---- */

  .header__drop {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 50%;
    z-index: 100;
    min-width: 270px;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius-cards);
    background: var(--color-surface);
    box-shadow: var(--shadow-2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
  }

  /* Bridges the 6px gap so the pointer can reach the panel without tripping
     mouseleave. */
  .header__drop::before {
    content: '';
    position: absolute;
    inset-block-start: -14px;
    inset-inline-start: 0;
    width: 100%;
    height: 16px;
  }

  .header__item--has-drop.is-open .header__drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .header__drop-item {
    display: block;
    padding: 0.75rem 0.95rem;
    border-radius: var(--style-border-radius-inputs);
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
  }

  .header__drop-item:hover {
    background: var(--color-surface-alt);
    transform: translateX(2px);
  }

  .header__drop-title {
    display: block;
    color: var(--color-brand);
    font-size: 0.92rem;
    font-weight: 600;
  }

  .header__drop-desc {
    display: block;
    margin-block-start: 0.25rem;
    color: var(--color-muted);
    font-family: var(--font-primary--family);
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* ---- Right cluster ---- */

  .header__right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .header__btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-surface);
    color: var(--color-brand);
    cursor: pointer;
    transition: box-shadow 0.25s, transform 0.25s;
  }

  .header__btn:hover {
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
  }

  .header__btn svg {
    width: 21px;
    height: 21px;
  }

  .header__count {
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -7px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    border-radius: 100px;
    background: var(--header-count-background);
    color: var(--header-count-foreground);
    font-family: var(--font-mono--family);
    font-size: 0.68rem;
    font-weight: 600;
    transform: scale(0);
    transition: transform 0.3s var(--ease);
  }

  .header__count.is-visible {
    transform: scale(1);
  }

  /* ---- Burger ---- */

  .header__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    background: var(--color-surface);
    cursor: pointer;
  }

  .header__burger > span,
  .header__burger > span::before,
  .header__burger > span::after {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-brand);
  }

  .header__burger > span {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.25s var(--ease);
  }

  .header__burger > span::before,
  .header__burger > span::after {
    content: '';
    inset-inline-start: 0;
    transition: transform 0.3s var(--ease);
  }

  .header__burger > span::before {
    inset-block-start: -6px;
  }

  .header__burger > span::after {
    inset-block-start: 6px;
  }

  .header__burger[aria-expanded='true'] > span {
    background: transparent;
  }

  .header__burger[aria-expanded='true'] > span::before {
    transform: translateY(6px) rotate(45deg);
  }

  .header__burger[aria-expanded='true'] > span::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ---- Mobile ---- */

  @media screen and (max-width: 960px) {
    .header__burger {
      display: block;
    }

    .header__links {
      position: fixed;
      inset: var(--header-height) 0 auto 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0.1rem;
      max-height: calc(100dvh - var(--header-height));
      overflow-y: auto;
      padding: 1.1rem var(--page-gutter) 1.7rem;
      border-block-end: 1px solid var(--color-border);
      background: var(--color-background);
      box-shadow: var(--shadow-2);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-12px);
      transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    }

    .header__links.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .header__links .header__link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.85rem 0;
      border-block-end: 1px solid var(--color-border-soft);
      font-size: 1.05rem;
    }

    .header__links .header__link::after {
      display: none;
    }

    .header__item--has-drop {
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      border-block-end: 1px solid var(--color-border-soft);
    }

    .header__item--has-drop .header__link--drop {
      border-block-end: none;
    }

    .header__drop {
      position: static;
      display: none;
      flex-direction: column;
      gap: 0.4rem;
      min-width: 0;
      width: 100%;
      padding: 0.2rem 0 0.6rem 0.6rem;
      border: none;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
    }

    .header__drop::before {
      display: none;
    }

    .header__item--has-drop.is-open .header__drop {
      display: flex;
      transform: none;
    }

    .header__drop-item {
      border: 1px solid var(--color-border-soft);
      border-radius: var(--style-border-radius-cards);
      background: var(--color-surface);
      padding: 0.75rem 0.9rem;
    }

    .header__drop-item:hover {
      background: var(--color-surface-alt);
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header,
    .header__link,
    .header__link::after,
    .header__drop-icon,
    .header__drop,
    .header__drop-item,
    .header__btn,
    .header__count,
    .header__links,
    .header__burger > span,
    .header__burger > span::before,
    .header__burger > span::after {
      transition: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:14) */
.hero {
    position: relative;
    display: grid;
    isolation: isolate;
    min-height: var(--hero-height);
    overflow: hidden;
    background: rgb(var(--hero-scrim));
    color: var(--hero-text);
  }

  .hero__contour {
    display: none;
    z-index: 1;
  }

  /* ---- Media ---- */

  .hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-focal);
  }

  .hero__image--mobile {
    display: none;
  }

  /* Angled so the wash is heaviest behind the text and clears the right side of
     the frame, where the photograph carries the product. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        100deg,
        rgb(var(--hero-scrim) / var(--hero-scrim-strength)) 0%,
        rgb(var(--hero-scrim) / calc(var(--hero-scrim-strength) * 0.78)) 30%,
        rgb(var(--hero-scrim) / calc(var(--hero-scrim-strength) * 0.22)) var(--hero-scrim-reach),
        transparent 88%
      ),
      linear-gradient(to top, rgb(var(--hero-scrim) / 0.55) 0%, transparent 38%);
  }

  /* ---- Layout ---- */

  .hero__inner {
    display: grid;
    align-items: center;
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: clamp(2.75rem, 6vw, 5.25rem);
    padding-inline: var(--page-gutter);
  }

  .hero--center .hero__inner {
    justify-items: center;
    text-align: center;
  }

  .hero__content {
    max-width: var(--hero-measure);
  }

  .hero--center .hero__content {
    margin-inline: auto;
  }

  /* ---- Altitude datum (signature) ---- */

  .hero__datum {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    color: var(--hero-accent);
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .hero--center .hero__datum {
    justify-content: center;
  }

  /* The rule reads as a benchmark tick: a measured line, not an underline. */
  .hero__datum-rule {
    position: relative;
    display: block;
    width: clamp(28px, 5vw, 52px);
    height: 1px;
    flex: 0 0 auto;
    background: currentcolor;
    transform-origin: left center;
  }

  .hero__datum-rule::after {
    content: '';
    position: absolute;
    inset-block-start: -3px;
    inset-inline-end: 0;
    width: 1px;
    height: 7px;
    background: currentcolor;
  }

  /* ---- Type ---- */

  .hero__heading {
    margin: 0.95rem 0 0;
    color: var(--hero-text);
    font-family: var(--font-heading--family);
    font-size: clamp(2rem, 3.65vw, 3.5rem);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  /* The second sentence is the turn in the sentence — Fraunces' italic axis
     plus the brass carries it without a second typeface. */
  .hero__heading em {
    display: block;
    margin-block-start: 0.05em;
    color: var(--hero-accent);
    font-style: italic;
    font-weight: 400;
  }

  .hero__subtext {
    max-width: 44ch;
    margin-block-start: 1.2rem;
    color: rgb(from var(--hero-text) r g b / var(--alpha-text-strong));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .hero--center .hero__subtext {
    margin-inline: auto;
  }

  .hero__subtext p {
    margin: 0;
  }

  .hero__subtext p + p {
    margin-block-start: 0.7rem;
  }

  /* ---- Actions ---- */

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-block-start: 1.85rem;
  }

  .hero--center .hero__actions {
    justify-content: center;
  }

  .hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid transparent;
    border-radius: var(--style-border-radius-buttons);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
  }

  .hero__btn--primary {
    background: var(--hero-text);
    color: rgb(var(--hero-scrim));
  }

  .hero__btn--primary:hover {
    transform: translateY(var(--lift-button));
    box-shadow: 0 14px 34px -14px rgb(0 0 0 / 65%);
  }

  .hero__btn--ghost {
    border-color: rgb(from var(--hero-text) r g b / var(--alpha-text-soft));
    color: var(--hero-text);
  }

  .hero__btn--ghost:hover {
    border-color: var(--hero-text);
    background: var(--hero-text);
    background: rgb(from var(--hero-text) r g b / 0.1);
  }

  .hero__btn-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .hero__btn:hover .hero__btn-arrow {
    transform: translateX(3px);
  }

  /* ---- Trust bar ---- */

  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.35rem;
    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    border-block-start: 1px solid rgb(from var(--hero-text) r g b / var(--alpha-hairline));
    list-style: none;
  }

  .hero--center .hero__trust {
    justify-content: center;
  }

  .hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgb(from var(--hero-text) r g b / var(--alpha-text-strong));
    font-family: var(--font-mono--family);
    font-size: 0.71rem;
    letter-spacing: 0.04em;
  }

  .hero__trust-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--hero-accent);
  }

  /* ---- Load sequence: one orchestrated moment, nothing else ---- */

  @media (prefers-reduced-motion: no-preference) {
    .hero__datum-rule {
      animation: hero-rule 0.75s var(--ease-out) both;
    }

    .hero__datum-label,
    .hero__heading,
    .hero__subtext,
    .hero__actions,
    .hero__trust {
      animation: hero-rise 0.85s var(--ease-out) both;
    }

    .hero__datum-label { animation-delay: 0.1s; }
    .hero__heading     { animation-delay: 0.18s; }
    .hero__subtext     { animation-delay: 0.3s; }
    .hero__actions     { animation-delay: 0.4s; }
    .hero__trust       { animation-delay: 0.5s; }
  }

  @keyframes hero-rule {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---- Tablet: text column narrows so it never reaches the product ---- */

  @media screen and (min-width: 750px) and (max-width: 1099px) {
    .hero__content {
      max-width: min(var(--hero-measure), 26rem);
    }

    .hero__heading {
      font-size: clamp(1.85rem, 3.9vw, 2.6rem);
    }

    .hero__trust {
      gap: 0.6rem 1rem;
    }
  }

  /* ---- Mobile: the photograph is a band above the content, not a backdrop.
         No overlay — the product has to read clearly at full contrast. ---- */

  @media screen and (max-width: 749px) {
    .hero {
      display: flex;
      flex-direction: column;
      min-height: var(--hero-height-mobile);
    }

    .hero__inner {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hero__media {
      position: static;
      z-index: auto;
      width: 100%;
      height: var(--hero-mobile-media);
      flex: 0 0 auto;
    }

    .hero__image--mobile {
      display: block;
    }

    .hero__media:has(.hero__image--mobile) .hero__image--desktop {
      display: none;
    }

    .hero__image {
      object-position: var(--hero-focal-mobile);
    }

    .hero__scrim {
      display: none;
    }

    .hero__inner {
      position: relative;
      background: var(--hero-mobile-bg);
      padding-block: 2.25rem 2.75rem;
    }

    .hero__contour {
      display: block;
      color: var(--hero-accent);
      opacity: 0.09;
    }

    .hero__content {
      position: relative;
      z-index: 1;
    }

    .hero__content,
    .hero__subtext {
      max-width: none;
    }

    .hero__heading {
      font-size: clamp(1.75rem, 8.2vw, 2.25rem);
    }

    .hero__subtext {
      font-size: 0.95rem;
    }

    .hero__actions {
      margin-block-start: 1.6rem;
    }

    .hero__btn {
      flex: 1 1 100%;
      justify-content: center;
    }

    .hero__trust {
      gap: 0.55rem 1.1rem;
      margin-block-start: 1.7rem;
      padding-block-start: 1.15rem;
    }
  }

  @media screen and (max-width: 749px) {
    .hero--hide-trust-mobile .hero__trust {
      display: none;
    }
  }
/* END_SECTION:hero */

/* START_SECTION:ingredient-index (INDEX:15) */
.idx {
    background: var(--idx-bg);
    color: var(--idx-fg);
  }

  .idx__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--idx-pad-top) var(--idx-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .idx__head { max-width: 42rem; }

  .idx__eyebrow {
    margin: 0;
    color: var(--idx-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .idx__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .idx__subtext {
    margin-block-start: 1.05rem;
    color: rgb(from var(--idx-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .idx__subtext p { margin: 0; }

  .idx__list {
    columns: var(--idx-cols);
    column-gap: clamp(2rem, 4vw, 4rem);
    margin: clamp(2.5rem, 4vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none;
  }

  .idx__list > .shopify-block { display: contents; }

  .idx__group,
  .idx__row {
    break-inside: avoid;
  }

  .idx__group {
    margin-block: 1.8rem 0.9rem;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid rgb(from var(--idx-accent) r g b / 0.45);
    color: var(--idx-accent);
    font-family: var(--font-mono--family);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .idx__group:first-child { margin-block-start: 0; }

  .idx__row {
    padding-block: 0.7rem;
    border-block-end: 1px solid rgb(from var(--idx-fg) r g b / var(--alpha-hairline));
  }

  .idx__name {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 1.02rem;
    font-weight: 540;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .idx__benefit {
    display: block;
    margin-block-start: 0.2rem;
    color: rgb(from var(--idx-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: 0.88rem;
    line-height: 1.5;
  }

  @media screen and (max-width: 899px) {
    .idx__list { columns: 1; }
    .idx__head { max-width: none; }
  }
/* END_SECTION:ingredient-index */

/* START_SECTION:ingredient-spotlights (INDEX:16) */
.ing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ing-bg);
    color: var(--ing-fg);
  }

  .ing .contour {
    color: var(--ing-accent);
    opacity: 0.07;
  }

  .ing__inner {
    position: relative;
    z-index: 1;
  }

  /* Extra top padding so the copy clears the ridge rather than colliding
     with the peaks. */
  .ing--ridged .ing__inner {
    padding-block-start: calc(var(--ing-pad-top) + clamp(24px, 3vw, 48px));
  }

  .ing__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--ing-pad-top) var(--ing-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Head ---- */

  .ing__head {
    max-width: 46rem;
  }

  .ing__head--center {
    margin-inline: auto;
    text-align: center;
  }

  .ing__head--center .ing__eyebrow,
  .ing__head--center .ing__attrs {
    justify-content: center;
  }

  .ing__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    color: var(--ing-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .ing__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  /* The subtext is six claims, not a sentence — setting them as discrete marks
     lets each one land instead of blurring into a run-on line. */
  .ing__attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
  }

  .ing__attr {
    padding: 0.42rem 0.9rem;
    border: 1px solid rgb(from var(--ing-fg) r g b / var(--alpha-hairline));
    border-radius: 999px;
    color: rgb(from var(--ing-fg) r g b / var(--alpha-text-strong));
    font-family: var(--font-mono--family);
    font-size: 0.71rem;
    letter-spacing: 0.06em;
  }

  /* ---- Tile grid ----
     Descended from the reference's ingredient chips: an emoji, a benefit tag,
     a name. Everything else is behind a click. */

  .ing__grid {
    display: grid;
    grid-template-columns: repeat(var(--ing-cols, 4), minmax(0, 1fr));
    gap: clamp(0.7rem, 1.1vw, 1rem);
    margin-block-start: clamp(2.5rem, 4.5vw, 4rem);
  }

  .ing__grid > .shopify-block {
    display: contents;
  }

  .ing__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1.35rem 1.3rem;
    border: 1px solid rgb(from var(--ing-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-tile);
    background: var(--ing-surface);
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }

  .ing__tile:hover {
    transform: translateY(var(--lift-card));
    border-color: rgb(from var(--ing-hue) r g b / var(--alpha-text-soft));
    box-shadow: 0 18px 40px -22px rgb(from var(--ing-fg) r g b / 0.4);
  }

  .ing__tile[aria-expanded='true'] {
    border-color: var(--ing-hue);
    box-shadow: 0 0 0 1px var(--ing-hue);
    transform: none;
  }

  .ing__tile-mark {
    display: block;
    margin-block-end: 0.9rem;
    color: var(--ing-hue);
  }

  .ing__tile-art {
    display: block;
    width: clamp(46px, 4.4vw, 58px);
    height: auto;
  }

  .ing__tile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ing__tile-tag {
    color: var(--ing-hue);
    font-family: var(--font-mono--family);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .ing__tile-name {
    margin-block-start: 0.2rem;
    font-family: var(--font-heading--family);
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
    font-weight: 540;
    line-height: 1.15;
    letter-spacing: -0.012em;
  }

  .ing__tile-more {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-block-start: 1rem;
    border: 1px solid rgb(from var(--ing-hue) r g b / var(--alpha-rule));
    border-radius: 50%;
    color: var(--ing-hue);
  }

  .ing__tile-chevron {
    width: 13px;
    height: 13px;
    transition: transform 0.35s var(--ease);
  }

  .ing__tile[aria-expanded='true'] .ing__tile-chevron {
    transform: rotate(180deg);
  }

  /* ---- Panel ---- */

  .ing__panel {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    /* 0fr -> 1fr animates to the content's own height with no JS measuring. */
    transition: grid-template-rows 0.5s var(--ease), margin 0.5s var(--ease);
  }

  .ing__panel[hidden] {
    display: none;
  }

  .ing__panel.is-open {
    grid-template-rows: 1fr;
    margin-block: 0.25rem 0.35rem;
  }

  .ing__panel-inner {
    overflow: hidden;
  }

  .ing__detail {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 230px) minmax(0, 1fr);
    gap: clamp(1.6rem, 3.5vw, 3.5rem);
    padding: clamp(1.8rem, 3vw, 3rem);
    border: 1px solid rgb(from var(--ing-hue) r g b / var(--alpha-rule));
    border-radius: var(--radius-card);
    background: var(--ing-surface);
    box-shadow: 0 30px 70px -40px rgb(from var(--ing-fg) r g b / 0.5);
  }

  /* Points back at the tile that opened it. */
  .ing__detail::before {
    content: '';
    position: absolute;
    inset-block-start: -7px;
    inset-inline-start: var(--ing-notch, 8%);
    width: 13px;
    height: 13px;
    border-block-start: 1px solid rgb(from var(--ing-hue) r g b / var(--alpha-rule));
    border-inline-start: 1px solid rgb(from var(--ing-hue) r g b / var(--alpha-rule));
    border-start-start-radius: 3px;
    background: var(--ing-surface);
    transform: rotate(45deg);
    transition: inset-inline-start 0.45s var(--ease);
  }

  .ing__medallion {
    display: grid;
    place-items: center;
    width: clamp(112px, 10vw, 150px);
    aspect-ratio: 1;
    border: 1px solid rgb(from var(--ing-hue) r g b / var(--alpha-rule));
    border-radius: 50%;
    color: var(--ing-hue);
  }

  .ing__plate {
    width: 62%;
    height: auto;
  }

  .ing__medallion-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  .ing__detail-name {
    margin: 1.1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    font-weight: 540;
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .ing__detail-local {
    margin: 0.5rem 0 0;
    color: var(--ing-hue);
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .ing__lead {
    color: var(--ing-fg);
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
    font-weight: 400;
    line-height: var(--type-lead-lh);
    letter-spacing: -0.008em;
    text-wrap: pretty;
  }

  .ing__lead p,
  .ing__body p {
    margin: 0;
  }

  .ing__lead p + p {
    margin-block-start: 0.6rem;
  }

  .ing__body {
    margin-block-start: 1rem;
    color: rgb(from var(--ing-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .ing__body p + p {
    margin-block-start: 0.8rem;
  }

  .ing__refrain {
    margin: 1.3rem 0 0;
    color: var(--ing-hue);
    font-family: var(--font-heading--family);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    font-style: italic;
  }

  /* ---- CTA ---- */

  .ing__cta {
    margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  }

  .ing__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid rgb(from var(--ing-fg) r g b / var(--alpha-rule));
    border-radius: var(--style-border-radius-buttons);
    color: var(--ing-fg);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
  }

  .ing__btn:hover {
    border-color: var(--ing-accent);
    background: var(--ing-accent);
    background: rgb(from var(--ing-accent) r g b / 0.12);
    transform: translateY(var(--lift-button));
  }

  .ing__btn-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .ing__btn:hover .ing__btn-arrow {
    transform: translateX(3px);
  }

  /* ---- Responsive ---- */

  @media screen and (max-width: 1099px) {
    .ing__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

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

    .ing__detail {
      grid-template-columns: minmax(0, 1fr);
      gap: 1.2rem;
      padding: 1.5rem 1.25rem;
    }

    /* The notch has no tile to point at once the panel spans the full row. */
    .ing__detail::before {
      display: none;
    }

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

  @media (prefers-reduced-motion: reduce) {
    .ing__tile,
    .ing__tile-chevron,
    .ing__panel,
    .ing__detail::before,
    .ing__btn,
    .ing__btn-arrow {
      transition: none;
    }
  }
/* END_SECTION:ingredient-spotlights */

/* START_SECTION:marquee (INDEX:17) */
.marquee {
    background: var(--marquee-bg);
    overflow: hidden;
    padding-block: var(--marquee-pad-top) var(--marquee-pad-bottom);
    display: block;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    display: flex;
    gap: var(--marquee-gap);
    min-width: max-content;
    align-items: center;
  }

  .marquee__item {
    display: inline-flex;
    align-items: center;
  }

  .marquee__text {
    font-family: var(--font-heading--family, sans-serif);
    font-size: 1.15rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .marquee__text.h1 { font-size: clamp(2.5rem, 4vw, 3.5rem); font-family: var(--font-heading--family, sans-serif); font-weight: 700; text-transform: none; letter-spacing: normal; }
  .marquee__text.h2 { font-size: var(--type-h2, clamp(1.9rem, 3.1vw, 2.85rem)); font-family: var(--font-heading--family, sans-serif); font-weight: 700; text-transform: none; letter-spacing: normal; }
  .marquee__text.h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); font-family: var(--font-heading--family, sans-serif); font-weight: 600; text-transform: none; letter-spacing: normal; }
  .marquee__text.h4 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-family: var(--font-heading--family, sans-serif); font-weight: 600; text-transform: none; letter-spacing: normal; }
  .marquee__text.h5 { font-size: clamp(1.1rem, 1.4vw, 1.25rem); font-family: var(--font-heading--family, sans-serif); font-weight: 500; text-transform: none; letter-spacing: normal; }
  .marquee__text.h6 { font-size: var(--type-lead, clamp(1.05rem, 1.3vw, 1.25rem)); font-family: var(--font-heading--family, sans-serif); font-weight: 500; text-transform: none; letter-spacing: normal; }
  .marquee__text.paragraph { font-size: var(--type-body, clamp(0.96rem, 1vw, 1.03rem)); font-family: var(--font-primary--family, sans-serif); font-weight: normal; text-transform: none; letter-spacing: normal; }
  .marquee__text.rte { font-size: 1.15rem; font-family: var(--font-heading--family, sans-serif); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }

  .marquee__text p {
    margin: 0;
  }

  .marquee__icon svg {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (prefers-reduced-motion: no-preference) {
    mt-marquee[data-initialized="true"] .marquee__wrapper {
      animation: marquee-scroll var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-scroll {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:page-hero (INDEX:18) */
.phero {
    background: var(--phero-bg);
    color: var(--phero-fg);
  }

  .phero__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--phero-pad-top) var(--phero-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .phero--center .phero__inner {
    max-width: 56rem;
    text-align: center;
  }

  .phero__crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.4rem;
    color: rgb(from var(--phero-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .phero--center .phero__crumb {
    justify-content: center;
  }

  .phero__crumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
  }

  .phero__crumb a:hover {
    color: var(--phero-accent);
  }

  .phero__eyebrow {
    margin: 0;
    color: var(--phero-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  /* One step above the section h2 scale — this is the page's title. */
  .phero__heading {
    max-width: 22ch;
    margin: 1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2.15rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.028em;
    text-wrap: balance;
  }

  .phero--center .phero__heading {
    margin-inline: auto;
  }

  .phero__subtext {
    max-width: 46ch;
    margin-block-start: 1.3rem;
    color: rgb(from var(--phero-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .phero--center .phero__subtext {
    margin-inline: auto;
  }

  .phero__subtext p {
    margin: 0;
  }

  @media screen and (max-width: 749px) {
    .phero__heading,
    .phero__subtext {
      max-width: none;
    }
  }
/* END_SECTION:page-hero */

/* START_SECTION:page (INDEX:19) */
.mpage {
    background: var(--mpage-bg);
    color: var(--mpage-fg);
  }

  .mpage__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--mpage-pad-top) var(--mpage-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .mpage__empty {
    color: rgb(from var(--mpage-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.8rem;
  }

  /* ---- Prose ----
     Styling for whatever a merchant writes in the admin rich-text editor:
     policies, FAQs, legal notices. Held to the same scale as the sections. */

  .prose {
    max-width: var(--mpage-measure);
    color: rgb(from var(--mpage-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .prose > * + * {
    margin-block-start: 1.1rem;
  }

  .prose h2,
  .prose h3,
  .prose h4 {
    margin-block-start: 2.4rem;
    color: var(--mpage-fg);
    font-family: var(--font-heading--family);
    font-weight: 540;
    line-height: 1.18;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }

  .prose h2 {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
  }

  .prose h3 {
    font-size: clamp(1.18rem, 1.5vw, 1.4rem);
  }

  .prose h4 {
    font-size: 1.06rem;
  }

  .prose a {
    color: var(--mpage-accent);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
  }

  .prose strong {
    color: var(--mpage-fg);
    font-weight: 600;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.2rem;
  }

  .prose li + li {
    margin-block-start: 0.5rem;
  }

  .prose ul {
    list-style: none;
    padding-inline-start: 0;
  }

  /* A brass tick instead of a bullet, matching the trust marks elsewhere. */
  .prose ul li {
    position: relative;
    padding-inline-start: 1.4rem;
  }

  .prose ul li::before {
    content: '';
    position: absolute;
    inset-block-start: 0.65em;
    inset-inline-start: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mpage-accent);
  }

  .prose blockquote {
    margin-inline: 0;
    padding-inline-start: 1.3rem;
    border-inline-start: 2px solid var(--mpage-accent);
    color: var(--mpage-fg);
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
    line-height: var(--type-lead-lh);
  }

  .prose hr {
    margin-block: 2.4rem;
    border: 0;
    border-block-start: 1px solid rgb(from var(--mpage-fg) r g b / var(--alpha-hairline));
  }

  .prose img {
    border-radius: var(--radius-card);
  }

  .prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }

  .prose th,
  .prose td {
    padding: 0.7rem 0.9rem;
    border-block-end: 1px solid rgb(from var(--mpage-fg) r g b / var(--alpha-hairline));
    text-align: start;
  }

  .prose th {
    color: var(--mpage-fg);
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
/* END_SECTION:page */

/* START_SECTION:product-details (INDEX:21) */
.pdet {
    background: var(--pdet-bg);
    color: var(--pdet-fg);
  }

  .pdet__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--pdet-pad-top) var(--pdet-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .pdet__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
  }

  .pdet__eyebrow {
    margin: 0;
    color: var(--pdet-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .pdet__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .pdet__heading--small {
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  }

  /* ---- Ingredient list ---- */

  .pdet__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    margin: clamp(1.6rem, 2.5vw, 2.2rem) 0 0;
    padding: 0;
    list-style: none;
  }

  .pdet__row {
    padding-block: 0.85rem;
    border-block-end: 1px solid rgb(from var(--pdet-fg) r g b / var(--alpha-hairline));
  }

  .pdet__name {
    display: block;
    font-family: var(--font-heading--family);
    font-size: 1.04rem;
    font-weight: 540;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .pdet__benefit {
    display: block;
    margin-block-start: 0.22rem;
    color: rgb(from var(--pdet-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: 0.88rem;
    line-height: 1.5;
  }

  /* ---- How to serve ---- */

  .pdet__serve {
    position: sticky;
    inset-block-start: calc(var(--header-height, 76px) + 1.5rem);
    padding: clamp(1.5rem, 2.6vw, 2.2rem);
    border: 1px solid rgb(from var(--pdet-accent) r g b / 0.35);
    border-radius: var(--radius-card);
    background: var(--pdet-surface);
  }

  .pdet__serve-text {
    margin: 1rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
    line-height: var(--type-lead-lh);
    text-wrap: pretty;
  }

  .pdet__serve-note {
    margin-block-start: 1.2rem;
    padding-block-start: 1.2rem;
    border-block-start: 1px solid rgb(from var(--pdet-fg) r g b / var(--alpha-hairline));
    color: rgb(from var(--pdet-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    line-height: 1.7;
  }

  .pdet__serve-note p { margin: 0; }

  @media screen and (max-width: 899px) {
    .pdet__grid { grid-template-columns: minmax(0, 1fr); }
    .pdet__serve { position: static; }
  }
/* END_SECTION:product-details */

/* START_SECTION:product-grid (INDEX:22) */
.pgrid {
    background: var(--pgrid-bg);
    color: var(--pgrid-fg);
  }

  .pgrid__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--pgrid-pad-top) var(--pgrid-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Head ---- */

  .pgrid__head {
    max-width: 62ch;
  }

  .pgrid__head--center {
    max-width: 64ch;
    margin-inline: auto;
    text-align: center;
  }

  /* Same benchmark rule as the hero datum, so the two sections read as one
     system rather than two unrelated eyebrow treatments. */
  .pgrid__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
    color: var(--pgrid-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .pgrid__head--center .pgrid__eyebrow {
    justify-content: center;
  }

  /* The trailing rule only earns its place when the label is centred; on a
     left-aligned head it would dangle. */

  .pgrid__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .pgrid__subtext {
    margin-block-start: 1.05rem;
    color: rgb(from var(--pgrid-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .pgrid__subtext p {
    margin: 0;
  }

  /* ---- Trust bar ---- */

  .pgrid__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.35rem;
    margin: 2rem 0 0;
    padding: 1.25rem 0 0;
    border-block-start: 1px solid rgb(from var(--pgrid-fg) r g b / var(--alpha-hairline));
    list-style: none;
  }

  .pgrid__head--center .pgrid__trust {
    justify-content: center;
  }

  .pgrid__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgb(from var(--pgrid-fg) r g b / var(--alpha-text-strong));
    font-family: var(--font-mono--family);
    font-size: 0.71rem;
    letter-spacing: 0.04em;
  }

  .pgrid__trust-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--pgrid-accent);
  }

  /* ---- Grid ---- */

  /* Shopify wraps each theme block in .shopify-block; display:contents lets the
     card itself be the grid item, so hiding a card removes its cell too. */
  /* display:contents would drop the wrapper out of the box tree, taking the
     reveal transform with it — so the wrapper stays a grid item and simply
     passes its sizing through to the card. */
  .pgrid__grid > .shopify-block {
    display: flex;
    flex-direction: column;
  }

  .pgrid__grid > .shopify-block > .pcard {
    flex: 1 1 auto;
  }

  .pgrid__grid {
    display: grid;
    grid-template-columns: repeat(var(--pgrid-columns), minmax(0, 1fr));
    gap: var(--pgrid-gap);
    margin-block-start: clamp(2rem, 3.5vw, 3rem);
  }

  /* ---- Card ---- */

  .pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    border: 1px solid rgb(from var(--pcard-ink) r g b / var(--alpha-hairline));
    border-radius: var(--pgrid-radius);
    background: var(--pcard-bg);
    color: var(--pcard-ink);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }

  .pcard:hover {
    transform: translateY(var(--lift-card));
    box-shadow: 0 22px 48px -12px rgb(from var(--pcard-ink) r g b / 0.22);
  }

  .pcard__top {
    position: relative;
    z-index: 2;
    display: block;
    padding: 1.7rem 1.5rem 0;
  }

  .pcard__title {
    display: block;
    font-family: var(--font-heading--family);
    font-size: clamp(1.15rem, 1.5vw, 1.6rem);
    font-weight: 540;
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  /* The pack floats between the title and the footer and is allowed to grow
     into the space rather than being boxed by a fixed ratio. */
  .pcard__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: var(--pcard-image-padding, 24px);
    pointer-events: none;
  }

  .pcard__image {
    width: 100%;
    height: 100%;
    object-fit: var(--pcard-image-fit, contain);
    filter: drop-shadow(0 14px 28px rgb(0 0 0 / 12%));
    transition: transform 0.5s var(--ease);
  }

  .pcard:hover .pcard__image {
    transform: scale(1.05) translateY(-4px);
  }

  .pcard__image--placeholder {
    opacity: 0.35;
  }

  .pcard__bottom {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 1rem 1.5rem 1.3rem;
    margin-block-start: auto;
  }

  .pcard__label {
    display: inline-flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: 0.35rem 1.1rem;
    border: 1px solid rgb(0 0 0 / 5%);
    border-radius: 999px;
    background: rgb(255 255 255 / 72%);
    font-family: var(--font-mono--family);
    font-size: 0.79rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .pcard__label small {
    display: block;
    margin-block-start: 1px;
    font-size: 0.69rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    opacity: 0.85;
  }

  .pcard__go {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--pcard-ink);
    color: #fff;
    box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
    transition: transform 0.35s var(--ease);
  }

  .pcard__go svg {
    width: 17px;
    height: 17px;
    stroke-width: 2.4;
    transition: transform 0.35s var(--ease);
  }

  .pcard:hover .pcard__go {
    transform: scale(1.08);
  }

  .pcard:hover .pcard__go svg {
    transform: translateX(3px);
  }

  /* ---- CTA ---- */

  .pgrid__cta {
    display: flex;
    justify-content: center;
    margin-block-start: clamp(2rem, 3.4vw, 2.9rem);
  }

  .pgrid__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.9rem;
    border: 1px solid rgb(from var(--pgrid-fg) r g b / var(--alpha-rule));
    border-radius: var(--style-border-radius-buttons);
    color: var(--pgrid-fg);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
  }

  .pgrid__btn:hover {
    border-color: var(--pgrid-fg);
    background: var(--pgrid-fg);
    background: rgb(from var(--pgrid-fg) r g b / 0.06);
    transform: translateY(var(--lift-button));
  }

  .pgrid__btn-arrow {
    width: 17px;
    height: 17px;
    transition: transform 0.25s var(--ease);
  }

  .pgrid__btn:hover .pgrid__btn-arrow {
    transform: translateX(3px);
  }

  /* ---- Responsive ---- */

  @media screen and (max-width: 1099px) {
    .pgrid__grid {
      grid-template-columns: repeat(min(var(--pgrid-columns), 3), minmax(0, 1fr));
    }
  }

  @media screen and (max-width: 899px) {
    .pgrid__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

    .pgrid__grid {
      gap: 0.7rem;
    }

    .pcard {
      aspect-ratio: auto;
      min-height: 340px;
      border-radius: calc(var(--pgrid-radius) * 0.78);
    }

    .pcard__top {
      padding: 1.1rem 0.9rem 0;
    }

    .pcard__title {
      font-size: clamp(1rem, 3.8vw, 1.14rem);
    }

    .pcard__media {
      position: relative;
      inset: auto;
      flex: 1 1 auto;
      margin: 0;
      padding: var(--pcard-image-padding-mobile, var(--pcard-image-padding, 16px));
    }

    .pcard__image {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .pcard__bottom {
      gap: 0.45rem;
      padding: 0.5rem 0.9rem 0.9rem;
    }

    .pcard__label {
      min-height: 34px;
      padding: 0 0.75rem;
      font-size: 0.68rem;
      font-weight: 700;
    }

    /* Two lines will not fit in a 34px pill at this width. */
    .pcard__label small {
      display: none;
    }

    .pcard__go {
      width: 34px;
      height: 34px;
    }

    .pcard__go svg {
      width: 14px;
      height: 14px;
    }

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

  @media (prefers-reduced-motion: reduce) {
    .pcard,
    .pcard__image,
    .pcard__go,
    .pcard__go svg,
    .pgrid__btn,
    .pgrid__btn-arrow {
      transition: none;
    }
  }
/* END_SECTION:product-grid */

/* START_SECTION:product (INDEX:23) */
.pdp {
    background: var(--pdp-bg);
    color: var(--pdp-fg);
  }

  .pdp__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--pdp-pad-top) var(--pdp-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .pdp__crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1.4rem;
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }

  .pdp__crumb a { color: inherit; text-decoration: none; transition: color 0.2s; }
  .pdp__crumb a:hover { color: var(--pdp-accent); }

  .pdp__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: start;
  }

  /* ---- Gallery ---- */

  .pdp__gallery {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-height, 76px) + 1.25rem);
  }

  .pdp__main {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--pdp-tint);
    overflow: hidden;
  }

  .pdp__main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .pdp__main-image--placeholder { opacity: 0.3; }

  .pdp__badge {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-hairline));
    border-radius: 999px;
    background: rgb(255 255 255 / 78%);
    color: var(--pdp-fg);
    font-family: var(--font-mono--family);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Four thumbs in view, the rest reachable by the arrows. */
  .pdp__thumbs-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-block-start: 0.75rem;
  }

  .pdp__thumbs {
    display: flex;
    flex: 1;
    gap: 0.6rem;
    padding-block: 3px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

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

  .pdp__thumb {
    position: relative;
    flex: 0 0 calc((100% - 1.8rem) / 4);
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-hairline));
    border-radius: 12px;
    background: var(--pdp-tint);
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s var(--ease), border-color 0.2s;
  }

  .pdp__thumb:hover { transform: translateY(var(--lift-button)); }

  .pdp__thumb[aria-selected='true'] { border-color: var(--pdp-accent); }

  .pdp__thumb[aria-selected='true']::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 11px;
    box-shadow: inset 0 0 0 2px var(--pdp-accent);
    pointer-events: none;
  }

  .pdp__thumb-image { width: 100%; height: 100%; object-fit: cover; }

  .pdp__nav {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-rule));
    border-radius: 50%;
    background: var(--pdp-bg);
    color: var(--pdp-fg);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s var(--ease);
  }

  .pdp__nav:hover {
    background: var(--pdp-fg);
    border-color: var(--pdp-fg);
    color: var(--pdp-bg);
    transform: scale(1.06);
  }

  .pdp__nav:disabled { opacity: 0.3; cursor: default; }

  /* ---- Buy box ---- */

  .pdp__label {
    margin: 0;
    color: var(--pdp-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .pdp__title {
    margin: 0.55rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 540;
    line-height: 1.05;
    letter-spacing: -0.024em;
    text-wrap: balance;
  }

  .pdp__sub {
    margin: 0.55rem 0 0;
    color: var(--pdp-accent);
    font-family: var(--font-mono--family);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .pdp__tagline {
    max-width: 44ch;
    margin: 1rem 0 0;
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
    line-height: var(--type-lead-lh);
  }

  .pdp__rating {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-block-start: 0.9rem;
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.78rem;
  }

  .pdp__stars { display: inline-flex; gap: 0.1rem; color: var(--pdp-accent); }
  .pdp__star { width: 14px; height: 14px; }

  .pdp__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-block-start: 1.2rem;
  }

  .pdp__now {
    font-family: var(--font-mono--family);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .pdp__was {
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 1.05rem;
  }

  .pdp__save {
    padding: 0.3em 0.6em;
    border-radius: 7px;
    background: var(--pdp-accent);
    background: rgb(from var(--pdp-accent) r g b / 0.14);
    color: var(--pdp-accent);
    font-family: var(--font-mono--family);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pdp__divide {
    margin-block: 1.5rem;
    border: 0;
    border-block-start: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-hairline));
  }

  .pdp__opt-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
  }

  .pdp__opt-title span:last-child {
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.78rem;
    font-weight: 500;
  }

  /* Size cards carry their own price, so the choice is a comparison rather
     than a label you have to price separately. */
  .pdp__sizes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.65rem;
  }

  .pdp__size {
    position: relative;
    padding: 0.95rem 0.6rem;
    border: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-rule));
    border-radius: 14px;
    background: var(--pdp-surface);
    color: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease), background 0.2s;
  }

  .pdp__size:hover:not([disabled]) { transform: translateY(var(--lift-button)); }

  .pdp__size[aria-checked='true'] {
    border-color: var(--pdp-accent);
    box-shadow: 0 0 0 1.5px var(--pdp-accent);
    background: var(--pdp-accent);
    background: rgb(from var(--pdp-accent) r g b / 0.08);
  }

  .pdp__size[disabled] { opacity: 0.4; cursor: not-allowed; }

  .pdp__size b {
    display: block;
    font-family: var(--font-mono--family);
    font-size: 1rem;
    font-weight: 500;
  }

  .pdp__size span {
    display: block;
    margin-block-start: 0.2rem;
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.78rem;
  }

  .pdp__flag {
    position: absolute;
    inset-block-start: -9px;
    inset-inline-start: 50%;
    padding: 0.15em 0.5em;
    border-radius: 6px;
    background: var(--pdp-accent);
    color: var(--pdp-bg);
    font-family: var(--font-mono--family);
    font-size: 0.58rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /* ---- Actions ---- */

  .pdp__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.7rem;
    margin-block-start: 1.5rem;
  }

  .pdp__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(from var(--pdp-fg) r g b / var(--alpha-rule));
    border-radius: 100px;
    background: var(--pdp-surface);
  }

  .pdp__qty-btn {
    width: 44px;
    height: 48px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
  }

  .pdp__qty-input {
    width: 38px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--font-mono--family);
    font-size: 1rem;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .pdp__qty-input::-webkit-outer-spin-button,
  .pdp__qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .pdp__add {
    display: inline-flex;
    flex: 1;
    min-width: 160px;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.9rem 1.9rem;
    border: 0;
    border-radius: var(--style-border-radius-buttons);
    background: var(--pdp-fg);
    color: var(--pdp-bg);
    font-family: var(--font-primary--family);
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), opacity 0.2s;
  }

  .pdp__add:hover:not([disabled]) {
    transform: translateY(var(--lift-button));
    box-shadow: 0 16px 32px -16px rgb(from var(--pdp-fg) r g b / 0.6);
  }

  .pdp__add[disabled] { opacity: 0.45; cursor: not-allowed; }

  .pdp__add-arrow { width: 17px; height: 17px; transition: transform 0.25s var(--ease); }
  .pdp__add:hover:not([disabled]) .pdp__add-arrow { transform: translateX(3px); }

  .pdp__wallet { margin-block-start: 0.7rem; }
  .pdp__wallet .shopify-payment-button__button--unbranded {
    background-color: var(--pdp-fg) !important;
    color: var(--pdp-bg) !important;
    border-radius: var(--style-border-radius-buttons) !important;
    padding: 0.9rem 1.9rem !important;
    border: 0 !important;
    line-height: normal !important;
    font-family: var(--font-primary--family) !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease) !important;
  }
  .pdp__wallet .shopify-payment-button__button--unbranded:hover:not([disabled]) {
    background-color: var(--pdp-fg) !important;
    transform: translateY(var(--lift-button));
    box-shadow: 0 16px 32px -16px rgb(from var(--pdp-fg) r g b / 0.6) !important;
  }

  /* ---- Assurance ---- */

  .pdp__assure {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.3rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
  }

  .hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-strong));
    font-family: var(--font-mono--family);
    font-size: 0.71rem;
    letter-spacing: 0.04em;
  }

  .hero__trust-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--pdp-accent);
  }

  .pdp__ship {
    margin-block-start: 1.1rem;
    color: rgb(from var(--pdp-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    line-height: 1.75;
  }

  .pdp__ship p { margin: 0; }

  .pdp__desc { margin-block-start: 1.6rem; }

  /* ---- Responsive ---- */

  @media screen and (max-width: 899px) {
    .pdp__grid { grid-template-columns: minmax(0, 1fr); }
    .pdp__gallery { position: static; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp__thumb,
    .pdp__nav,
    .pdp__size,
    .pdp__add,
    .pdp__add-arrow {
      transition: none;
    }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:24) */
.srch {
    background: var(--srch-bg);
    color: var(--srch-fg);
  }

  .srch__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--srch-pad-top) var(--srch-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  .srch__head { max-width: 40rem; }

  .srch__eyebrow {
    margin: 0;
    color: var(--srch-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .srch__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.026em;
    text-wrap: balance;
  }

  .srch__form {
    display: flex;
    gap: 0.5rem;
    margin-block-start: 1.6rem;
  }

  .srch__input {
    flex: 1;
    padding: 0.9rem 1.2rem;
    border: 1px solid rgb(from var(--srch-fg) r g b / var(--alpha-rule));
    border-radius: 999px;
    background: var(--srch-surface);
    color: inherit;
    font-family: var(--font-primary--family);
    font-size: 0.98rem;
  }

  .srch__input:focus { border-color: var(--srch-accent); outline: none; }

  .srch__submit {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background: var(--srch-fg);
    color: var(--srch-bg);
    cursor: pointer;
  }

  .srch__submit svg { width: 19px; height: 19px; }

  .srch__count {
    margin: clamp(2rem, 3.5vw, 3rem) 0 0;
    padding-block-end: 1.1rem;
    border-block-end: 1px solid rgb(from var(--srch-fg) r g b / var(--alpha-hairline));
    color: rgb(from var(--srch-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-mono--family);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .srch__grid {
    display: grid;
    grid-template-columns: repeat(var(--srch-cols), minmax(0, 1fr));
    gap: clamp(0.8rem, 1.4vw, 1.3rem);
    margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
    padding: 0;
    list-style: none;
  }

  .srch__item { display: flex; }

  .srch__page {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.3rem;
    border: 1px solid rgb(from var(--srch-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--srch-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.3s, transform 0.3s var(--ease);
  }

  .srch__page:hover {
    border-color: var(--srch-accent);
    transform: translateY(var(--lift-card));
  }

  .srch__page-type {
    color: var(--srch-accent);
    font-family: var(--font-mono--family);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .srch__page-title {
    font-family: var(--font-heading--family);
    font-size: 1.1rem;
    font-weight: 540;
    line-height: 1.2;
  }

  .srch__page-excerpt {
    color: rgb(from var(--srch-fg) r g b / var(--alpha-text-soft));
    font-family: var(--font-primary--family);
    font-size: 0.88rem;
    line-height: 1.6;
  }

  .srch__empty {
    margin-block-start: 2.5rem;
    color: rgb(from var(--srch-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-heading--family);
    font-size: var(--type-lead);
  }

  /* ---- Product Cards ---- */
  .ccard {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    border: 1px solid rgb(from var(--srch-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--srch-surface);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }

  .ccard:hover {
    transform: translateY(var(--lift-card));
    border-color: var(--srch-accent);
    border-color: rgb(from var(--srch-accent) r g b / 0.5);
    box-shadow: 0 22px 46px -26px rgb(from var(--srch-fg) r g b / 0.35);
  }

  .ccard__media {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: clamp(1rem, 2vw, 1.8rem);
    background: radial-gradient(120% 100% at 50% 0%, #fff, var(--srch-bg));
  }

  .ccard__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s var(--ease);
  }

  .ccard:hover .ccard__image { transform: scale(1.05) translateY(-4px); }

  .ccard__image--placeholder { opacity: 0.3; }

  .ccard__flag {
    position: absolute;
    inset-block-start: 0.8rem;
    inset-inline-start: 0.8rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--srch-fg);
    background: rgb(from var(--srch-fg) r g b / 0.85);
    color: var(--srch-surface);
    font-family: var(--font-mono--family);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ccard__flag--save { background: var(--srch-accent); }

  .ccard__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.1rem 1.2rem 1.2rem;
  }

  .ccard__title {
    font-family: var(--font-heading--family);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 540;
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  .ccard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-block-start: auto;
    padding-block-start: 1rem;
  }

  .ccard__price {
    font-family: var(--font-mono--family);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .ccard__go {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--srch-fg);
    color: var(--srch-surface);
    transition: transform 0.35s var(--ease);
  }

  .ccard__go svg { width: 15px; height: 15px; stroke-width: 2.2; }
  .ccard:hover .ccard__go { transform: scale(1.08); }

  /* ---- Pagination ---- */
  .coll__pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  }

  .coll__page {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 0.6rem;
    border: 1px solid rgb(from var(--srch-fg) r g b / var(--alpha-hairline));
    border-radius: 999px;
    color: inherit;
    font-family: var(--font-mono--family);
    font-size: 0.84rem;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
  }

  .coll__page:hover { border-color: var(--srch-accent); }

  .coll__page.is-current {
    border-color: var(--srch-fg);
    background: var(--srch-fg);
    color: var(--srch-surface);
  }

  .coll__page--gap { border-color: transparent; }

  @media screen and (max-width: 1099px) {
    .srch__grid { grid-template-columns: repeat(min(var(--srch-cols), 3), minmax(0, 1fr)); }
  }

  @media screen and (max-width: 899px) {
    .srch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .srch__head { max-width: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .srch__page { transition: none; }
  }
/* END_SECTION:search */

/* START_SECTION:testimonials (INDEX:25) */
.tm {
    background: var(--tm-bg);
    color: var(--tm-fg);
  }

  .tm__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding-block: var(--tm-pad-top) var(--tm-pad-bottom);
    padding-inline: var(--page-gutter);
  }

  /* ---- Head ---- */

  .tm__head {
    max-width: 40rem;
  }

  .tm__head--center {
    margin-inline: auto;
    text-align: center;
  }

  .tm__eyebrow {
    margin: 0;
    color: var(--tm-accent);
    font-family: var(--font-mono--family);
    font-size: var(--type-eyebrow);
    font-weight: 500;
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: uppercase;
  }

  .tm__heading {
    margin: 0.9rem 0 0;
    font-family: var(--font-heading--family);
    font-size: var(--type-h2);
    font-weight: 500;
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-ls);
    text-wrap: balance;
  }

  .tm__subtext {
    margin-block-start: 1.05rem;
    color: rgb(from var(--tm-fg) r g b / var(--alpha-text-muted));
    font-family: var(--font-primary--family);
    font-size: var(--type-body);
    line-height: var(--type-body-lh);
  }

  .tm__subtext p {
    margin: 0;
  }

  /* ---- Grid ---- */

  .tm__grid {
    display: grid;
    grid-template-columns: repeat(var(--tm-cols), minmax(0, 1fr));
    gap: clamp(0.9rem, 1.4vw, 1.35rem);
    margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
    align-items: stretch;
  }

  /* Theme blocks arrive wrapped; the wrapper stays a real box so the reveal
     transform has something to animate, and passes its height to the card. */
  .tm__grid > .shopify-block {
    display: flex;
    flex-direction: column;
  }

  .tm__grid > .shopify-block > .tm__card {
    flex: 1 1 auto;
  }

  /* ---- Card ---- */

  .tm__card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: clamp(1.6rem, 2.2vw, 2.2rem);
    border: 1px solid rgb(from var(--tm-fg) r g b / var(--alpha-hairline));
    border-radius: var(--radius-card);
    background: var(--tm-surface);
    transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }

  .tm__card:hover {
    transform: translateY(var(--lift-card));
    border-color: rgb(from var(--tm-accent) r g b / var(--alpha-text-soft));
    box-shadow: 0 22px 46px -26px rgb(from var(--tm-fg) r g b / 0.4);
  }

  .tm__stars {
    display: flex;
    gap: 0.2rem;
    color: var(--tm-star);
  }

  .tm__star {
    width: 15px;
    height: 15px;
  }

  /* Quotes get the serif: it is someone speaking, not interface copy. */
  .tm__quote {
    margin: 1.15rem 0 0;
    color: var(--tm-fg);
    font-family: var(--font-heading--family);
    font-size: clamp(1.02rem, 1.2vw, 1.14rem);
    font-weight: 400;
    line-height: 1.56;
    letter-spacing: -0.004em;
    text-wrap: pretty;
  }

  .tm__quote p {
    margin: 0;
  }

  .tm__quote p + p {
    margin-block-start: 0.7rem;
  }

  .tm__by {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-block-start: 1.4rem;
  }

  /* An em dash before the name, the way the source copy attributes them. */
  .tm__name::before {
    content: '—';
    margin-inline-end: 0.4rem;
    opacity: 0.55;
  }

  .tm__name {
    font-family: var(--font-primary--family);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .tm__place {
    color: var(--tm-accent);
    font-family: var(--font-mono--family);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* ---- Responsive ---- */

  @media screen and (max-width: 1099px) {
    .tm__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

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

    .tm__head,
    .tm__head--center {
      max-width: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .tm__card {
      transition: none;
    }
  }
/* END_SECTION:testimonials */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:contour (INDEX:39) */
.contour {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .contour svg {
    position: absolute;
    inset-block-start: -12%;
    inset-inline-end: -14%;
    width: min(78%, 900px);
    height: auto;
  }

  /* A very slow drift — enough that the band is never quite static, far too
     slow to notice as motion. */
  @media (prefers-reduced-motion: no-preference) {
    .contour svg {
      animation: contour-drift 48s ease-in-out infinite alternate;
    }
  }

  @keyframes contour-drift {
    from {
      transform: translate3d(0, 0, 0) scale(1);
    }
    to {
      transform: translate3d(-2.5%, 1.8%, 0) scale(1.05);
    }
  }
/* END_SNIPPET:contour */

/* START_SNIPPET:image (INDEX:42) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:ridge (INDEX:44) */
.ridge {
    position: absolute;
    inset-inline: 0;
    z-index: 3;
    width: 100%;
    line-height: 0;
    pointer-events: none;
  }

  .ridge--top {
    inset-block-start: 0;
  }

  .ridge--bottom {
    inset-block-end: 0;
    transform: scaleY(-1);
  }

  .ridge__svg {
    display: block;
    width: 100%;
    height: clamp(38px, 5vw, 78px);
  }

  /* The back range reads as distance rather than as a second border. */
  .ridge__far {
    opacity: 0.45;
  }
/* END_SNIPPET:ridge */