/** Shopify CDN: Minification failed

Line 4740:18 Expected identifier but found whitespace
Line 4740:20 Unexpected "{"
Line 4740:29 Expected ":"
Line 4740:62 Expected ":"
Line 4741:21 Expected identifier but found whitespace
Line 4741:23 Unexpected "{"
Line 4741:32 Expected ":"
Line 4741:68 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
/**
   * Fill the viewport under the sticky header so the empty state does not
   * collapse into a short strip above the footer.
   */
  .not-found {
    display: grid;
    place-items: center;
    min-height: calc(100svh - var(--header-height, 104px));
    padding-block: 64px;
    padding-inline: var(--page-margin);
    background-color: var(--color-background);
    text-align: center;
  }

  .not-found__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 640px;
  }

  .not-found__code {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: clamp(96px, 18vw, 160px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .not-found__message {
    margin: 0;
    color: var(--color-primary);
  }

  .not-found__link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .not-found__link:hover {
    opacity: 0.7;
  }

  @media (width < 1366px) {
    .not-found {
      min-height: calc(100svh - var(--header-height, 80px));
      padding-block: 48px;
    }

    .not-found__inner {
      gap: 16px;
    }
  }
/* END_SECTION:404 */

/* START_SECTION:about-intro (INDEX:1) */
/**
   * The photo deliberately hangs over the dark band that follows it, the same
   * way `intro-showcase` hangs over `how-it-works` on the home page: the
   * negative margin pulls the next section up by the overlap while the photo
   * keeps painting past it, and `z-index` keeps it on top of a section that
   * comes later in the document.
   */
  .about-intro {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    overflow-x: clip;
    padding-top: var(--about-intro-top-spacing);
    background-color: var(--color-background);
  }

  /**
   * `position: relative` here rather than on the section, so the badges are
   * placed against the 1355px text measure the design pins them to and not
   * against the viewport.
   */
  .about-intro__inner {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(1355px, 100% - var(--page-margin) * 2);
    text-align: center;
  }

  .about-intro__heading {
    color: var(--color-primary);
  }

  .about-intro__body {
    max-width: var(--about-intro-body-width, 1010px);
    margin-top: var(--about-intro-heading-gap);
    color: var(--color-body);
  }

  /**
   * The design sets that closing line ("Brush the Happie way!") in full-strength
   * Primary against the 70% body colour, which is what emphasis in the richtext
   * is for.
   */
  .about-intro__body strong {
    color: var(--color-primary);
    font-weight: 600;
  }

  /**
   * The two stickers swap corners between the two frames — at 1728 the smiley
   * sits above the heading on the left (Figma 553:2295) and the HAP disc beside
   * the body on the right (Figma 553:2302), at 390 the smiley leads and the HAP
   * disc closes. They are therefore positioned by which glyph they are rather
   * than by a shared left/right modifier, and each breakpoint clears the inset
   * it is not using.
   */
  .about-intro__badge {
    /* `display: flex` so the inline badge leaves no baseline gap under it. */
    position: absolute;
    display: flex;
  }

  .about-intro__badge--smiley {
    top: -48px;
    left: -33px;
  }

  /**
   * Same gutter cap as `partner-hero`: the HAP disc hangs 125px at 1728, but
   * just above 1366 the 1355px column already sits on `--page-margin` and
   * `overflow-x: clip` would slice the ring.
   */
  .about-intro__badge--hap {
    top: 212px;
    right: calc(-1 * min(125px, max(0px, max((100vw - 1355px) / 2, var(--page-margin)) - 8px)));
  }

  .about-intro__media {
    width: min(1590px, 100% - var(--page-margin) * 2);
    margin-top: var(--about-intro-media-gap);
    margin-bottom: calc(var(--about-intro-overlap) * -1);
  }

  @media (width < 1366px) {
    .about-intro {
      /* The spacing settings are written inline as desktop values. */
      padding-top: 116px;
    }

    /**
     * The 390 frame does not simply scale the 1728 type down — it moves both
     * blocks to a different step of the scale: the heading to Display 1 (48px,
     * where Display 2 would give 40) and the copy to Body M (16px, where Body L
     * would give 20). Both are set from the tokens rather than hardcoded so
     * they stay tied to the scale in `critical.css`.
     */
    .about-intro__heading {
      font-size: var(--display-1-size);
      line-height: var(--display-1-leading);
      letter-spacing: var(--display-1-tracking);
    }

    .about-intro__body {
      margin-top: 24px;
      font-size: var(--body-m-size);
      line-height: var(--body-m-leading);
    }

    /**
     * At 390 the HAP disc closes the block instead of opening it, so it is
     * anchored to the bottom of the copy rather than to a fixed offset from the
     * top — otherwise a longer or shorter paragraph would push the text through
     * the sticker.
     */
    .about-intro__badge--hap {
      top: auto;
      right: -1px;
      bottom: -85px;
      left: auto;
    }

    .about-intro__badge--smiley {
      top: -75px;
      right: auto;
      left: -4px;
    }

    /**
     * `badge` sets `--badge-size` in an inline style attribute, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead of the variable.
     */
    .about-intro__badge .badge {
      width: 73px;
      height: 73px;
    }

    .about-intro__media {
      margin-top: 127px;
      margin-bottom: -83px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .about-intro {
      padding-top: 80px;
    }

    .about-intro__heading {
      font-size: clamp(48px, 6vw, 64px);
    }

    .about-intro__body {
      max-width: 640px;
      margin-top: 28px;
      font-size: 18px;
    }

    .about-intro__badge .badge {
      width: 100px;
      height: 100px;
    }

    .about-intro__badge--smiley {
      top: -40px;
      left: 0;
    }

    .about-intro__badge--hap {
      top: auto;
      right: 0;
      bottom: -40px;
    }

    .about-intro__media {
      width: min(900px, 100%);
      margin-top: 72px;
      margin-bottom: -140px;
    }
  }
/* END_SECTION:about-intro */

/* START_SECTION:about-mission (INDEX:2) */
/**
   * The band's bottom edge is covered by the marquee that follows it, so only
   * the top corners are rounded — the same arrangement `how-it-works` uses on
   * the home page.
   */
  .mission {
    padding-top: var(--mission-top-spacing);
    padding-bottom: var(--mission-bottom-spacing);
    border-radius: var(--mission-corner-radius) var(--mission-corner-radius) 0 0;
    background-color: var(--color-primary);
  }

  /**
   * This band is laid out on its own 1368px measure rather than the theme's
   * shared content column, so it sets its own width.
   */
  .mission__inner {
    width: min(1368px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .mission__intro {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .mission__heading {
    color: var(--color-neutral);
    /* The design breaks the heading across two lines at a fixed point. */
    white-space: pre-line;
  }

  /**
   * Body M (20px) at Neutral 70% — the muted cream the rest of the dark band
   * uses for copy.
   */
  .mission__body {
    max-width: var(--mission-body-width, 1056px);
    margin-top: var(--mission-heading-gap, 35px);
    color: color-mix(in srgb, var(--color-neutral) 70%, transparent);
  }

  .mission__rule {
    height: 1px;
    margin-top: var(--mission-rule-gap, var(--space-40));
    background-color: rgb(255 255 255 / 0.16);
  }

  .mission__founder {
    margin-top: var(--mission-founder-gap, var(--space-40));
  }

  .mission__founder-heading {
    max-width: 1287px;
    color: var(--color-neutral);
    white-space: pre-line;
  }

  .mission__founder-grid {
    display: grid;
    grid-template-columns: var(--mission-founder-columns, 480fr 772fr);
    gap: var(--mission-founder-column-gap, 116px);
    align-items: center;
    margin-top: var(--mission-founder-heading-gap, 100px);
  }

  .mission__founder-image {
    display: block;
    width: 100%;
    aspect-ratio: var(--mission-founder-aspect, 480 / 472);
    border-radius: var(--mission-founder-radius, 56px);
    object-fit: cover;
  }

  .mission__founder-body {
    color: var(--color-neutral);
    opacity: 0.7;
  }

  /**
   * The theme's reset zeroes every margin, so a richtext with more than one
   * paragraph needs its own separation — one blank line, as the design draws it
   * between the founder's two paragraphs.
   */
  .mission__founder-body p + p {
    margin-top: var(--mission-founder-body-gap, 32px);
  }

  .mission__stats {
    display: flex;
    gap: var(--mission-stats-gap, 51px);
    margin: var(--mission-stats-spacing, 85px) 0 0;
  }

  /**
   * The dividers are drawn by the stats themselves rather than by a separate
   * element, so a merchant adding or removing a stat cannot leave a stray rule
   * behind. At 390 the row becomes a column and the same divider moves from the
   * inline edge to the block edge.
   */
  .mission__stat {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--mission-stat-gap, 32px);
  }

  .mission__stat:not(:last-child) {
    border-inline-end: 1px solid rgb(255 255 255 / 0.16);
  }

  .mission__stat-value {
    color: var(--color-neutral);
    font-family: var(--font-secondary--family);
    /**
     * Held at the desktop Display 3 size at both widths: the 390 frame draws
     * these numbers at 48px too, so `.display-3` — which steps down to 32px
     * below 1366 — would be the wrong token.
     */
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .mission__stat-label {
    max-width: 244px;
    margin: 0;
    color: var(--color-neutral);
    opacity: 0.7;
  }

  @media (width < 1366px) {
    .mission {
      --mission-heading-gap: 20px;
      --mission-rule-gap: 49px;
      --mission-founder-gap: 56px;
      --mission-founder-heading-gap: 32px;
      --mission-founder-columns: 1fr;
      --mission-founder-column-gap: 32px;
      --mission-founder-aspect: 358 / 272;
      --mission-founder-radius: 24px;
      --mission-stats-spacing: 63px;
      --mission-stats-gap: 32px;
      --mission-stat-gap: 24px;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 158px;
      padding-bottom: 70px;
      border-radius: 24px 24px 0 0;
    }

    /* One column stacks the portrait above the story, as the 390 frame draws it. */
    .mission__founder-grid {
      align-items: start;
    }

    .mission__stats {
      flex-direction: column;
    }

    .mission__stat:not(:last-child) {
      padding-bottom: var(--mission-stats-gap);
      border-inline-end: 0;
      border-block-end: 1px solid rgb(255 255 255 / 0.16);
    }

    .mission__stat-label {
      max-width: none;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .mission {
      --mission-heading-gap: 24px;
      --mission-founder-heading-gap: 36px;
      --mission-founder-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
      --mission-founder-column-gap: 28px;
      --mission-founder-aspect: 480 / 472;
      --mission-founder-radius: 28px;
      --mission-founder-body-gap: 16px;
      --mission-stats-spacing: 28px;
      --mission-stats-gap: 16px;
      --mission-stat-gap: 12px;

      padding-top: 180px;
      padding-bottom: 96px;
      border-radius: 36px 36px 0 0;
    }

    .mission__heading {
      font-size: clamp(40px, 5vw, 52px);
    }

    .mission__founder-heading {
      font-size: clamp(22px, 2.8vw, 28px);
      line-height: 1.2;
      max-width: none;
    }

    .mission__founder-grid {
      align-items: center;
    }

    .mission__founder-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .mission__founder-body {
      font-size: 14px;
      line-height: 1.5;
    }

    .mission__stats {
      flex-direction: row;
      align-items: stretch;
    }

    /**
     * column-reverse packs toward the bottom once the row stretches to the
     * tallest label, so the numbers drift. Column + order keeps the number
     * first and packs it to the top, so 10+ / 500+ / 8 share one line.
     */
    .mission__stat {
      flex: 1 1 0;
      min-width: 0;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .mission__stat-value {
      order: -1;
      margin: 0;
      font-size: 32px;
      line-height: 1;
    }

    .mission__stat-label {
      max-width: none;
      font-size: 12px;
      line-height: 1.4;
    }

    .mission__stat:not(:last-child) {
      padding-bottom: 0;
      padding-inline-end: var(--mission-stats-gap);
      border-inline-end: 1px solid rgb(255 255 255 / 0.16);
      border-block-end: 0;
    }
  }
/* END_SECTION:about-mission */

/* START_SECTION:article (INDEX:3) */
.article__inner {
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
    padding-top: var(--article-top-spacing);
    padding-bottom: var(--article-bottom-spacing);
  }

  /* -- Hero ---------------------------------------------------------------- */

  .article__hero {
    position: relative;
  }

  .article__breadcrumbs {
    --breadcrumbs-size: 18px;

    margin-bottom: var(--article-breadcrumb-gap, 32px);
  }

  .article__title-wrap {
    position: relative;
  }

  .article__title {
    max-width: var(--article-title-measure, 1346px);
    margin: 0;
    padding-inline-end: var(--article-title-end, 0px);
    color: var(--color-primary);
    font-size: 80px;
  }

  /**
   * The sticker hangs past the content column into the page margin, which is
   * what the design draws. It is decoration, so it is hidden from the
   * accessibility tree and never eats a click meant for the title.
   *
   * Anchored to the title wrap so its bottom tracks the last line of the
   * headline — matching Figma on both the wide and 390 frames.
   */
  .article__badge {
    position: absolute;
    right: var(--article-badge-right, -45px);
    bottom: var(--article-badge-bottom, 0);
    pointer-events: none;
    z-index: 1;
  }

  /**
   * Between the wide Figma frame and the mobile layout the column gets tight
   * (~1440). Keep the badge on the right and reserve end padding so the
   * headline wraps clear of the disc.
   */
  @media (width >= 1366px) and (width < 1700px) {
    .article:has(.article__badge) {
      --article-badge-right: -20px;
      --article-title-end: 160px;
    }
  }

  .article__meta {
    display: flex;
    gap: var(--article-meta-gap, 110px);
    align-items: center;
    margin-top: var(--article-meta-top, 72px);
  }

  .article__meta-cell--date {
    width: var(--article-date-width, 310px);
    border-right: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  }

  .article__meta-label {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: var(--article-meta-label-size, 20px);
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .article__meta-value {
    margin: 4px 0 0;
    color: var(--color-body);
    font-family: var(--font-primary--family);
    font-size: var(--article-meta-value-size, 20px);
    font-weight: 500;
    line-height: var(--article-meta-value-leading, 1.6);
  }

  /* -- Hero image ---------------------------------------------------------- */

  .article__image {
    overflow: hidden;
    aspect-ratio: var(--article-image-aspect, 1568 / 760);
    margin: var(--article-image-top, 100px) 0 0;
    border-radius: var(--article-image-radius, var(--radius-l));
  }

  .article__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  .article__layout {
    display: grid;
    grid-template-columns: var(--article-layout-columns, 433px 1fr);
    align-items: start;
    margin-top: var(--article-layout-top, 116px);
    column-gap: var(--article-layout-gap, 99px);
  }

  /* An article with no `h2` has no contents to sit beside, so it takes the lot. */
  .article__layout--full {
    --article-layout-columns: 1fr;
  }

  .article__main {
    min-width: 0;
  }

  /* -- Table of contents --------------------------------------------------- */

  .article-toc {
    position: sticky;
    top: calc(var(--header-height) + 40px);
    padding: 32px;
    border-radius: 12px;
    background-color: var(--color-secondary);
  }

  /**
   * The rule under the heading hugs the words rather than the card, so the
   * heading is laid out as an inline block and the border travels with it.
   */
  .article-toc__heading {
    display: inline-block;
    margin: 0;
    padding-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: 24px;
    line-height: 1.32;
    letter-spacing: 0.125em;
    text-transform: uppercase;
  }

  .article-toc__heading + .article-toc__list {
    margin-top: 32px;
  }

  .article-toc__list {
    margin: 0;
    padding: 0;
  }

  /**
   * The type is set on the row rather than on the link inside it: an inline
   * link cannot shrink the line box its block parent has already reserved, so
   * leaving the `li` at the inherited 20px/1.6 would space the list out by a
   * third more than the design.
   */
  .article-toc__item {
    color: var(--color-body);
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    list-style: none;
  }

  .article-toc__item + .article-toc__item {
    margin-top: 16px;
  }

  .article-toc__link {
    color: inherit;
    text-decoration: none;
  }

  .article-toc__item:hover {
    color: var(--color-primary);
  }

  /**
   * The heading being read is the only one that carries a bullet — the marker
   * sits in the indent, so the row shifts right rather than reflowing.
   */
  .article-toc__item--active {
    margin-inline-start: 24px;
    color: var(--color-primary);
    font-weight: 600;
    list-style: disc;
  }

  /* -- Table of contents, 390 accordion ------------------------------------ */

  .article-toc-bar {
    position: relative;
    z-index: 5;
    display: none;
    background-color: var(--color-secondary);
  }

  .article-toc-bar__summary {
    padding: 16px var(--page-margin);
    cursor: pointer;
    list-style: none;
  }

  .article-toc-bar__summary::-webkit-details-marker {
    display: none;
  }

  .article-toc-bar__row {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
  }

  .article-toc-bar__label {
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: 16px;
    line-height: 1.24;
    letter-spacing: 0.125em;
    text-transform: uppercase;
  }

  .article-toc-bar__icon {
    display: inline-flex;
    color: var(--color-primary);
    transition: rotate 0.2s ease;
  }

  .article-toc-bar[open] .article-toc-bar__summary {
    padding-block: 24px 0;
  }

  .article-toc-bar[open] .article-toc-bar__row {
    padding-bottom: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  }

  .article-toc-bar[open] .article-toc-bar__icon {
    rotate: 180deg;
  }

  /**
   * The open panel is laid over the title rather than pushing it down, which is
   * how the design draws it (46:31035 keeps every other element where the
   * closed frame has it) and it also means opening the contents does not move
   * the article out from under the reader.
   */
  .article-toc-bar__panel {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    padding: 24px var(--page-margin);
    background-color: var(--color-secondary);
  }

  /* -- Article body -------------------------------------------------------- */

  /**
   * `article.content` is merchant HTML, so it is styled by element rather than
   * by class. Margins are set on each element the editor can produce instead of
   * being reset wholesale, because a blanket reset also flattens whatever
   * spacing the richtext editor writes inline.
   */
  /**
   * Any level can be a contents entry, so every level needs to clear the sticky
   * header when it is jumped to — not only the two the design draws.
   */
  .article__body :is(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: calc(var(--header-height) + 40px);
  }

  .article__body h2 {
    margin: var(--article-section-gap, 72px) 0 0;
    color: var(--color-primary);
    font-size: var(--display-4-size);
    line-height: var(--display-4-leading);
    letter-spacing: var(--display-4-tracking);
  }

  .article__body h3 {
    margin: 40px 0 0;
    color: var(--color-primary);
    font-size: var(--display-5-size);
    line-height: var(--display-5-leading);
    letter-spacing: var(--display-5-tracking);
  }

  .article__body p {
    margin: 24px 0 0;
    color: var(--color-body);
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  .article__body :is(h2, h3) + p {
    margin-top: 20px;
  }

  .article__body :is(ul, ol) {
    margin: 24px 0 0;
    padding-inline-start: 24px;
    color: var(--color-body);
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: var(--article-list-leading, 1.6);
  }

  .article__body li + li {
    margin-top: 16px;
  }

  .article__body img {
    width: 100%;
    height: auto;
    margin-top: 32px;
    border-radius: var(--radius-m);
  }

  .article__body a {
    color: var(--color-primary);
    text-decoration: underline;
  }

  .article__body > :first-child {
    margin-top: 0;
  }

  /* -- Comments ------------------------------------------------------------ */

  .article__comments {
    margin-top: 96px;
  }

  .article__comments-heading {
    margin: 0;
    color: var(--color-primary);
  }

  .article__comment-list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
  }

  .article__comment + .article__comment {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  }

  .article__comment-author {
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
  }

  .article__comment-date,
  .article__comment-body {
    margin: 8px 0 0;
    color: var(--color-body);
  }

  .article__comment-form {
    margin-top: 56px;
  }

  .article__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 24px 0 0;
    color: var(--color-primary);
  }

  .article__comment-form .button {
    margin-top: 32px;
  }

  /**
   * The theme editor writes the desktop settings into the `style` attribute, and
   * an inline declaration outranks any stylesheet rule — so the 390 layout
   * overrides the *used* properties rather than the variables behind them. Only
   * the variables that are never set inline are re-declared here.
   */
  @media (width < 1366px) {
    .article {
      --article-title-measure: none;
      --article-meta-top: 40px;
      --article-image-top: 60px;
      --article-image-aspect: 358 / 300;
      --article-image-radius: var(--radius-m);
      --article-layout-columns: 1fr;
      --article-layout-top: 64px;
      --article-meta-label-size: 18px;
      --article-meta-value-size: 16px;
      --article-meta-value-leading: 1.5;
      --article-section-gap: 60px;
      --article-list-leading: 1.5;
    }

    .article__inner {
      padding-top: 56px;
      padding-bottom: 60px;
    }

    .article__breadcrumbs,
    .article-toc {
      display: none;
    }

    .article-toc-bar {
      display: block;
    }

    /* Leaves the sticker its own column beside the title rather than over it. */
    .article__title {
      padding-inline-end: 72px;
      font-size: var(--display-1-size);
    }

    .article__badge {
      --article-badge-right: -17px;
      --article-badge-bottom: 0;
    }

    /* `badge` writes its size inline, so the used property has to be overridden. */
    .article__badge .badge {
      width: 74px;
      height: 74px;
    }

    .article__meta {
      flex-direction: column;
      gap: 20px;
      align-items: stretch;
    }

    .article__meta-cell--date {
      width: auto;
      padding-block: 20px;
      border-right: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    }

    .article__body :is(h2, h3) {
      scroll-margin-top: calc(var(--header-height) + 24px);
    }

    .article__comments {
      margin-top: 64px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .article {
      --article-meta-top: 48px;
      --article-image-top: 72px;
      --article-image-aspect: 16 / 8;
      --article-image-radius: 36px;
      --article-layout-columns: minmax(200px, 240px) minmax(0, 1fr);
      --article-layout-gap: 32px;
      --article-layout-top: 72px;
      --article-meta-label-size: 18px;
      --article-meta-value-size: 18px;
      --article-section-gap: 56px;
      --article-badge-right: -8px;
    }

    .article__inner {
      padding-top: 72px;
      padding-bottom: 80px;
    }

    .article__breadcrumbs,
    .article-toc,
    .article-toc {
      display: block;
    }

    .article-toc-bar,
    .article-toc-bar {
      display: none;
    }

    .article-toc,
    .article-toc {
      padding: 24px;
    }

    .article-toc__heading,
    .article-toc__heading {
      font-size: 18px;
    }

    .article__title {
      padding-inline-end: 104px;
      font-size: clamp(40px, 5vw, 56px);
    }

    .article__badge .badge {
      width: 100px;
      height: 100px;
    }

    .article__meta {
      flex-direction: row;
      align-items: center;
      gap: 40px;
    }

    .article__meta-cell--date {
      width: auto;
      min-width: 200px;
      padding-block: 0;
      padding-inline-end: 40px;
      border-bottom: 0;
      border-right: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .article-toc-bar__icon {
      transition: none;
    }
  }
/* END_SECTION:article */

/* START_SECTION:blog-posts (INDEX:4) */
.blog-posts {
    padding-top: var(--blog-top-spacing);
    padding-bottom: var(--blog-bottom-spacing);
  }

  /* The design lays this band out on a 1570px measure, wider than the page column. */
  .blog-posts__inner {
    width: min(1570px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .blog-posts__header {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
  }

  .blog-posts__heading {
    color: var(--color-primary);
  }

  .blog-posts__view-all .button {
    min-height: var(--blog-button-height, 80px);
  }

  .blog-posts__view-all--below {
    display: none;
  }

  .blog-posts__grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-columns, 3), minmax(0, 1fr));
    gap: var(--blog-gap, 20px);
    margin: 0;
    margin-top: var(--blog-header-gap, 84px);
    padding: 0;
    list-style: none;
  }

  @media (width < 1366px) {
    .blog-posts {
      --blog-columns: 1;
      --blog-gap: 40px;
      --blog-header-gap: 40px;
      --blog-button-height: 48px;

      padding-top: 80px;
      padding-bottom: 80px;
    }

    .blog-posts__header {
      flex-direction: column;
      gap: 24px;
      align-items: flex-start;
    }

    .blog-posts__view-all--inline {
      display: none;
    }

    .blog-posts__view-all--below {
      display: flex;
      justify-content: center;
      margin-top: 48px;
      padding-bottom: 0;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .blog-posts {
      --blog-columns: 3;
      --blog-gap: 24px;
    }

    .blog-posts__header {
      flex-direction: row;
      gap: 40px;
      align-items: center;
    }

    .blog-posts__view-all--inline {
      display: block;
    }

    .blog-posts__view-all--below {
      display: none;
    }
  }
/* END_SECTION:blog-posts */

/* START_SECTION:blog (INDEX:6) */
/**
   * The band is only rounded at the top: it runs straight into the footer, which
   * carries the matching bottom corners — the same arrangement as
   * `sections/contact-form.liquid`.
   */
  .blog {
    margin-bottom: calc(-1 * var(--blog-corner-radius));
    padding-top: var(--blog-top-spacing);
    padding-bottom: 226px;
    border-radius: var(--blog-corner-radius) var(--blog-corner-radius) 0 0;
    background-color: #eedbfe;
  }

  /* The design lays this band out on a 1570px measure, wider than the page column. */
  .blog__inner {
    width: min(1570px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .blog__header {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
  }

  .blog__heading {
    margin: 0;
    color: var(--color-primary);
  }

  .blog__tools {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .blog__search {
    display: flex;
    flex: 0 1 380px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 380px;
    height: 68px;
    padding: 0 24px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
    border-radius: 100px;
    background-color: transparent;
  }

  .blog__filter {
    position: relative;
    flex: 0 0 220px;
    min-width: 0;
  }

  .blog__filter-trigger {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 68px;
    padding: 0 24px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
    border-radius: 100px;
    background-color: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  .blog__filter-trigger::-webkit-details-marker {
    display: none;
  }

  .blog__filter-trigger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .blog__filter[open] .blog__filter-trigger {
    border-color: var(--color-primary);
  }

  .blog__filter-current {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .blog__filter-trigger .icon {
    flex-shrink: 0;
    transition: rotate 0.2s ease;
  }

  .blog__filter[open] .blog__filter-trigger .icon {
    rotate: 180deg;
  }

  /* Same card pattern as the footer language menu. */
  .blog__filter-list {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 4px;
    background-color: var(--color-light);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
    list-style: none;
  }

  .blog__filter-option {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 4px 0;
    border: 0;
    background: none;
    color: color-mix(in srgb, var(--color-primary) 70%, transparent);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: start;
    white-space: nowrap;
    cursor: pointer;
  }

  .blog__filter-option:hover,
  .blog__filter-option[aria-current='true'] {
    color: var(--color-primary);
  }

  .blog__filter-option[aria-current='true'] {
    font-weight: 500;
  }

  .blog__filter-radio {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-light);
    transition: border-width 0.15s ease;
  }

  .blog__filter-option[aria-current='true'] .blog__filter-radio {
    border-width: 4px;
  }

  .blog__search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  .blog__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    margin-inline: 8px 4px;
    cursor: pointer;
    background-color: #000;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M1.4 0L6 4.6 10.6 0 12 1.4 7.4 6 12 10.6 10.6 12 6 7.4 1.4 12 0 10.6 4.6 6 0 1.4z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M1.4 0L6 4.6 10.6 0 12 1.4 7.4 6 12 10.6 10.6 12 6 7.4 1.4 12 0 10.6 4.6 6 0 1.4z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  .blog__search-input::placeholder {
    color: var(--color-body);
  }

  .blog__search-input:focus {
    outline: none;
  }

  .blog__search:focus-within {
    border-color: var(--color-primary);
  }

  .blog__search-submit {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
  }

  .blog__search-empty {
    margin: var(--blog-heading-gap, 76px) 0 0;
    color: var(--color-body);
    text-align: center;
  }

  .blog__content {
    margin-top: var(--blog-heading-gap, 76px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .blog__content .blog__grid {
    margin-top: 0;
  }

  .blog__content.is-updating {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }

  .blog__card.is-entering {
    opacity: 0;
    transform: translateY(8px);
  }

  .blog__card.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .blog__grid--skeleton {
    margin-top: 0;
  }

  .blog__card--skeleton {
    pointer-events: none;
  }

  .blog__skeleton-media,
  .blog__skeleton-line {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary) 8%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 14%, transparent) 50%,
      color-mix(in srgb, var(--color-primary) 8%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: blog-skeleton-shimmer 1.2s ease-in-out infinite;
  }

  .blog__skeleton-media {
    aspect-ratio: 510 / 432;
    border-radius: 24px;
  }

  .blog__skeleton-line {
    border-radius: 999px;
  }

  .blog__skeleton-line--date {
    width: 36%;
    height: 14px;
    margin-top: 20px;
  }

  .blog__skeleton-line--title {
    width: 78%;
    height: 22px;
    margin-top: 14px;
  }

  .blog__skeleton-line--excerpt {
    width: 92%;
    height: 14px;
    margin-top: 12px;
  }

  @keyframes blog-skeleton-shimmer {
    0% {
      background-position: 100% 0;
    }

    100% {
      background-position: -100% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .blog__content,
    .blog__card.is-visible {
      transition: none;
    }

    .blog__content.is-updating,
    .blog__card.is-entering {
      opacity: 1;
      transform: none;
    }

    .blog__skeleton-media,
    .blog__skeleton-line {
      animation: none;
    }
  }

  .blog__empty {
    margin: var(--blog-heading-gap, 76px) 0 0;
    color: var(--color-body);
  }

  .blog__grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-columns, 3), minmax(0, 1fr));
    margin: 0;
    margin-top: var(--blog-heading-gap, 76px);
    padding: 0;
    column-gap: 20px;
    list-style: none;
    row-gap: var(--blog-row-gap, 72px);
  }

  .blog__more {
    display: flex;
    justify-content: center;
    margin-top: var(--blog-more-gap, 72px);
  }

  .blog__more[hidden] {
    display: none;
  }

  .blog__more[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
  }

  /**
   * Load more is omitted when there is no next page. A modest gap keeps the
   * cards off the footer without matching the full button block.
   */
  .blog__grid:last-child {
    margin-bottom: 80px;
  }

  .blog__content .blog__grid:last-child {
    margin-bottom: 80px;
  }

  /**
   * The theme editor writes the desktop settings into the `style` attribute, and
   * an inline declaration outranks any stylesheet rule — so the 390 layout
   * overrides the *used* properties rather than the variables behind them. Only
   * the variables that are never set inline are re-declared here.
   */
  @media (width < 1366px) {
    .blog {
      --blog-heading-gap: 48px;
      --blog-row-gap: 32px;
      --blog-more-gap: 60px;

      padding-top: 64px;
      padding-bottom: 220px;
      border-radius: 32px 32px 0 0;
    }

    .blog__header {
      flex-direction: column;
      align-items: stretch;
      gap: 24px;
    }

    .blog__tools {
      flex-wrap: wrap;
      justify-content: stretch;
    }

    .blog__search,
    .blog__filter {
      flex: 1 1 100%;
      max-width: none;
    }

    .blog__search,
    .blog__filter-trigger {
      height: 52px;
    }

    .blog__grid {
      grid-template-columns: repeat(var(--blog-columns-mobile, 1), minmax(0, 1fr));
    }

    .blog__grid:last-child {
      margin-bottom: 120px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .blog {
      --blog-heading-gap: 56px;
      --blog-row-gap: 40px;
      --blog-more-gap: 64px;

      padding-top: 80px;
      padding-bottom: 140px;
      border-radius: 36px 36px 0 0;
    }

    .blog__header {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 24px;
    }

    .blog__heading {
      font-size: clamp(36px, 4.5vw, 48px);
    }

    .blog__tools {
      flex: 1 1 320px;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }

    .blog__search,
    .blog__filter {
      flex: 1 1 auto;
      max-width: none;
    }

    .blog__search {
      flex: 1 1 220px;
      max-width: 280px;
    }

    .blog__filter {
      flex: 0 1 200px;
    }

    .blog__search,
    .blog__filter-trigger {
      height: 56px;
    }

    .blog__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 16px;
    }

    .blog__more .button--medium,
    .blog__more .button--primary.button--medium {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }
  }
/* END_SECTION:blog */

/* START_SECTION:cart-drawer (INDEX:7) */
/**
   * The dialog is only the positioning frame; the cream card is the panel. The
   * two are separate so the backdrop can be clicked to close without the click
   * ever landing on the card.
   */
  /**
   * A `<dialog>` is `position: fixed; inset: 0; margin: auto` by default, which
   * centres it. Setting the inset on all four sides and then releasing the
   * bottom pins it to the top instead, at the offset the design draws — still
   * no positioning of its own, so the browser keeps managing the top layer.
   *
   * The width is left to the browser to derive from the two insets rather than
   * being computed from `100vw`. `100vw` counts the classic scrollbar and the
   * containing block of a fixed element does not, so anything measured that way
   * disagrees with the right-hand inset by the width of the scrollbar — and the
   * whole discrepancy shows up as a wider gap down the left.
   *
   * Once `max-width` takes over on a wide viewport the box is over-constrained,
   * and `margin-left: auto` hands all the slack to the left, which is what
   * keeps it in the top right corner.
   */
  .cart-drawer {
    --drawer-offset: 48px;

    inset: var(--drawer-offset);
    bottom: auto;
    width: auto;
    max-width: var(--drawer-width, 666px);
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  .cart-drawer::backdrop {
    background-color: rgb(4 51 41 / 0.4);
  }

  /* Bounded by the inset rather than by the viewport, so the card never runs
     past the 48px it is meant to keep at the bottom. */
  .cart-drawer__panel {
    max-height: calc(100dvh - var(--drawer-offset) * 2);
    overflow-y: auto;
    border-radius: var(--drawer-radius, 24px);
    background-color: var(--color-neutral);
    color: var(--color-primary);
    overscroll-behavior: contain;
  }

  /**
   * 48px above, 32px around, and the same 48px below so the card reads even.
   *
   * The design nests three stacks with 40, 60 and 24px gaps. Flattening them
   * into one stack keeps the empty cart and the error line from needing their
   * own wrappers, so the 40px gap is the default here and the two places that
   * want 60 add the difference back as a margin.
   */
  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 48px 32px;
  }

  .cart-drawer__content[aria-busy='true'] {
    opacity: 0.5;
    pointer-events: none;
  }

  .cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 60px;
  }

  .cart-drawer__heading {
    margin: 0;
    color: var(--color-primary);
  }


  /* 24px from the rule under the last line item to the total row. */
  .cart-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .cart-drawer__error {
    display: none;
    margin: 0;
    color: #b3261e;
  }

  .cart-drawer__error:not(:empty) {
    display: block;
  }

  .cart-drawer__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .cart-drawer__empty-body {
    margin: 0;
  }

  /* The rule sits in the same 40px stack as the line items, so the space above
     it and the space between two items are the one value. */
  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 0;
    padding: 0 0 40px;
    border-bottom: 1px solid rgb(4 51 41 / 0.16);
    list-style: none;
  }

  .cart-drawer__item {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  /* Mint chip behind the cutout, the same treatment the cart page gives it. */
  .cart-drawer__item-media {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 69px;
    height: 73px;
    border-radius: 11px;
    background-color: var(--color-secondary);
    overflow: hidden;
  }

  .cart-drawer__item-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 12px title to price, 16px price to the dispatch line. */
  .cart-drawer__item-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .cart-drawer__item-title,
  .cart-drawer__suggestion-title {
    font-family: var(--font-primary--family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: inherit;
    text-decoration: none;
  }

  .cart-drawer__item-title:hover,
  .cart-drawer__suggestion-title:hover {
    text-decoration: underline;
  }

  .cart-drawer__item-variant,
  .cart-drawer__item-dispatch,
  .cart-drawer__suggestion-dispatch {
    margin: 0;
    color: rgb(4 51 41 / 0.7);
  }

  /* The stacks above are 12px and 8px; the dispatch line sits 16px and 12px
     down respectively, so it makes up the difference itself. */
  .cart-drawer__item-dispatch,
  .cart-drawer__suggestion-dispatch {
    margin-top: 4px;
  }

  .cart-drawer__item-price {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 1.6;
  }

  .cart-drawer__item-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
  }

  /**
   * The stepper snippet is sized for the product page, where it is the height
   * of the button beside it. Here it is a compact 40px pill, which the snippet
   * already exposes as custom properties.
   *
   * Qualified by the drawer rather than left as a single class: the snippet
   * sets these same properties on `.quantity` in its own breakpoint, and two
   * single-class rules would be decided by whichever stylesheet Shopify
   * happens to concatenate last. The same applies to every other override in
   * this file that competes with a shared atom.
   */
  .cart-drawer .cart-drawer__quantity {
    --quantity-height: 40px;
    --quantity-padding-inline: 14px;
    --quantity-input-gap: 12px;
    --quantity-font-size: 20px;

    border-color: rgb(4 51 41 / 0.16);
  }

  .cart-drawer__remove {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .cart-drawer__remove:hover {
    opacity: 0.6;
  }

  .cart-drawer__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .cart-drawer .cart-drawer__total-label {
    letter-spacing: 0.03em;
  }

  .cart-drawer__total-value {
    font-family: var(--font-primary--family);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
  }

  /**
   * 72px rather than the `medium` size's 80px, and full width — the design
   * gives the drawer its own proportions for this one control. Everything else
   * about it is the shared atom.
   */
  .cart-drawer .cart-drawer__checkout-form,
  .cart-drawer .cart-drawer__checkout {
    width: 100%;
  }

  .cart-drawer .cart-drawer__checkout {
    min-height: 72px;
    margin-top: 20px;
  }

  .cart-drawer__more {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 20px;
  }

  .cart-drawer__suggestions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /**
   * The card is `overflow: visible` on purpose: both the discount sticker and
   * the product cutout are drawn breaking out of its corner in the design.
   */
  .cart-drawer__suggestion {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 148px;
    padding: 24px;
    border-radius: 20px;
    background-color: var(--color-secondary);
  }

  .cart-drawer__saving {
    position: absolute;
    top: 5px;
    left: 3px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 41px;
    height: 41px;
    border-radius: 20px;
    rotate: -18deg;
    background-color: var(--color-accent);
    font-family: var(--font-secondary--family);
    font-size: 8px;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .cart-drawer__suggestion-media {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 94px;
    height: 100px;
    padding: 8px;
    border-radius: 12px;
    background-color: var(--color-neutral);
  }

  /**
   * Held inside the tile rather than overhanging it, which is a deliberate
   * departure from the design. Figma draws the cutout wider than the cream
   * square, but that only reads as intentional for a packshot with transparent
   * margins built into it; any ordinary product photo just hangs out of the
   * square, and a landscape one looks like it has slipped sideways.
   *
   * Selected through the container rather than by a class on the image itself,
   * the same way the line item above does it. Both dimensions are set on
   * purpose — `critical.css` gives every image `height: auto`, so constraining
   * only the width lets a tall photo grow to whatever its ratio demands.
   */
  .cart-drawer__suggestion-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cart-drawer__suggestion-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }

  .cart-drawer__suggestion-prices {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 1;
  }

  .cart-drawer__suggestion-compare {
    color: rgb(4 51 41 / 0.7);
  }

  /**
   * Not the `button` snippet: this is a 40px chip with 14px text, well below
   * the smallest size that snippet offers, and stretching it there would change
   * the atom everywhere else.
   */
  .cart-drawer__suggestion-button {
    flex-shrink: 0;
    height: 40px;
    margin-left: 4px;
    padding-inline: 20px;
    border: 1px solid var(--color-primary);
    border-radius: 48px;
    background-color: var(--color-primary);
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-neutral);
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .cart-drawer__suggestion-button:hover {
    background-color: transparent;
    color: var(--color-primary);
  }

  /**
   * The 390 layout (Figma: 111:14738). The theme has one breakpoint, so this is
   * where the mobile design lives.
   *
   * The rearrangement in both the line item and the suggestion card is the same
   * move: what sat in a row beside the text drops under it, still indented past
   * the image. Flex wrapping cannot express that — a wrapped item starts at the
   * left edge, under the image — so both switch to a two-column grid and the
   * lower element is placed in the second column.
   */
  @media (width < 1366px) {
    /* The card takes the full column between the page margins, so the corner
       it is pinned to stops mattering — only the distance from the top does. */
    .cart-drawer {
      --drawer-offset: var(--page-margin);
    }

    /**
     * The stack is 20px here rather than 40, and the two places that want more
     * add the difference back: 32px above the checkout button, 50 above
     * "Add more".
     */
    .cart-drawer__content {
      gap: 20px;
      padding: 24px 16px;
    }

    .cart-drawer__body {
      gap: 32px;
    }

    .cart-drawer__items {
      gap: 40px;
      padding-bottom: 40px;
    }

    /**
     * The 390 frame draws this at 24px with an 8px glyph. Taken to 32/12 on
     * purpose: at 24 it is badly out of proportion with the 32px bin directly
     * below it, and the ratio still matches the 60/20 desktop blob. An
     * invisible inset takes the hit area out to the 44px a finger needs.
     */
    .cart-drawer .cart-drawer__close {
      width: 32px;
      height: 32px;
    }

    .cart-drawer__close .icon {
      width: 12px;
      height: 12px;
    }

    .cart-drawer__close::after {
      content: '';
      position: absolute;
      inset: -6px;
    }

    .cart-drawer__item {
      display: grid;
      grid-template-columns: 90px 1fr;
      column-gap: 21px;
      row-gap: 23px;
    }

    .cart-drawer__item-media {
      width: 90px;
      height: 95px;
      align-self: start;
    }

    .cart-drawer__item-text,
    .cart-drawer__item-actions {
      grid-column: 2;
    }

    .cart-drawer__item-actions {
      gap: 12px;
    }

    /* Both controls shrink: a 72px pill with 16px digits, and a 32px bin. */
    .cart-drawer .cart-drawer__quantity {
      --quantity-height: 32px;
      --quantity-padding-inline: 8px;
      --quantity-input-gap: 8px;
      --quantity-font-size: 16px;
    }

    .cart-drawer__quantity .icon {
      width: 16px;
      height: 16px;
    }

    .cart-drawer__remove .icon {
      width: 32px;
      height: 32px;
    }

    .cart-drawer .cart-drawer__total-label,
    .cart-drawer .cart-drawer__total-value {
      font-size: 16px;
    }

    .cart-drawer .cart-drawer__total-value {
      font-weight: 600;
    }

    .cart-drawer .cart-drawer__checkout {
      min-height: 48px;
      margin-top: 12px;
      font-size: 16px;
    }

    /* The one heading that grows on mobile while the drawer title shrinks. */
    .cart-drawer__more {
      margin-top: 30px;
    }

    .cart-drawer__more .cart-drawer__heading {
      font-size: 24px;
    }

    /**
     * The cream tile is inset 28px from the card edge while the discount
     * sticker sits at 12px, so the padding follows the tile and the sticker
     * keeps its own offsets.
     */
    .cart-drawer__suggestion {
      display: grid;
      grid-template-columns: 70px 1fr;
      column-gap: 16px;
      row-gap: 28px;
      padding: 38px 16px 22px 28px;
    }

    .cart-drawer__suggestion-media {
      width: 70px;
      height: 75px;
      padding: 6px;
      border-radius: 9px;
      align-self: start;
      margin-top: -10px;
    }

    .cart-drawer__suggestion-text {
      grid-column: 2;
    }

    .cart-drawer__suggestion-prices {
      gap: 12px;
      font-size: 16px;
    }

    .cart-drawer__suggestion-button {
      grid-column: 2;
      justify-self: start;
      height: 32px;
      margin-left: 0;
      padding-inline: 18px;
      font-weight: 500;
    }

    .cart-drawer__saving {
      top: 14px;
      left: 12px;
      width: 30px;
      height: 30px;
      border-radius: 15px;
      font-size: 6px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .cart-drawer {
      --drawer-offset: 32px;

      max-width: min(560px, calc(100% - 64px));
    }

    .cart-drawer__panel {
      border-radius: 28px;
    }

    .cart-drawer__content {
      gap: 28px;
      padding: 36px 28px;
    }

    .cart-drawer__heading {
      font-size: clamp(28px, 3.6vw, 36px);
    }

    .cart-drawer .cart-drawer__close {
      width: 44px;
      height: 44px;
    }

    .cart-drawer__close .icon {
      width: 16px;
      height: 16px;
    }

    .cart-drawer__close::after {
      inset: -6px;
    }

    .cart-drawer__item {
      display: flex;
      align-items: center;
      column-gap: 20px;
      row-gap: 0;
    }

    .cart-drawer__item-text,
    .cart-drawer__item-actions {
      grid-column: auto;
    }

    .cart-drawer__item-media {
      width: 80px;
      height: 84px;
    }

    .cart-drawer__item-title,
    .cart-drawer__suggestion-title {
      font-size: 20px;
    }

    .cart-drawer .cart-drawer__quantity {
      --quantity-height: 48px;
      --quantity-padding-inline: 12px;
      --quantity-input-gap: 10px;
      --quantity-font-size: 18px;
    }

    .cart-drawer__quantity .icon {
      width: 16px;
      height: 16px;
    }

    .cart-drawer__remove .icon {
      width: 28px;
      height: 28px;
    }

    .cart-drawer .cart-drawer__total-label,
    .cart-drawer .cart-drawer__total-value {
      font-size: 20px;
    }

    .cart-drawer .cart-drawer__checkout,
    .cart-drawer .cart-drawer__checkout.button,
    .cart-drawer .cart-drawer__checkout.button--primary,
    .cart-drawer .cart-drawer__checkout.button--primary.button--medium,
    .cart-drawer .cart-drawer__empty .button,
    .cart-drawer .cart-drawer__empty .button--primary.button--small {
      min-height: 56px;
      height: 56px;
      font-size: 17px;
    }

    .cart-drawer__more {
      margin-top: 24px;
    }

    .cart-drawer__more .cart-drawer__heading {
      font-size: 28px;
    }

    .cart-drawer__suggestion {
      display: flex;
      align-items: center;
      column-gap: 20px;
      row-gap: 0;
      min-height: 128px;
      padding: 24px 20px;
      border-radius: 20px;
    }

    .cart-drawer__suggestion-media {
      width: 84px;
      height: 90px;
      margin-top: 0;
      padding: 8px;
      border-radius: 12px;
    }

    .cart-drawer__suggestion-text,
    .cart-drawer__suggestion-button {
      grid-column: auto;
    }

    .cart-drawer__suggestion-prices {
      font-size: 18px;
    }

    .cart-drawer__suggestion-button {
      height: 44px;
      padding-inline: 20px;
      font-size: 15px;
    }

    .cart-drawer__saving {
      top: 10px;
      left: 8px;
      width: 36px;
      height: 36px;
      border-radius: 18px;
      font-size: 7px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-drawer__remove,
    .cart-drawer__suggestion-button {
      transition: none;
    }
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:collection (INDEX:9) */
/**
   * The title band sits on the page background, so it spaces itself with
   * margins.
   *
   * `overflow-x: clip` because the HAP sticker deliberately hangs past the
   * measure on the right: at 1728 it sits in the page margin, and below that it
   * would otherwise reach past the viewport and open a horizontal scrollbar.
   * `clip` rather than `hidden` so the stickers are still free to hang above and
   * below the band, which is where the design puts them.
   */
  .collection-header {
    overflow-x: clip;
    margin-top: var(--collection-header-top-spacing);
    margin-bottom: var(--collection-header-bottom-spacing);
    text-align: center;
  }

  /**
   * The measure lives here rather than on the section so the stickers are
   * positioned against the 1460px column the design pins them to — the same one
   * the grid below uses — instead of against the viewport.
   */
  .collection-header__inner {
    position: relative;
    width: min(1460px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /**
   * Figma draws the discs at 205 square, the smiley at 191.59, 220.34 and the
   * HAP at 1435.59, 236.34 against a 1460 column starting at 135.5 and a band
   * whose top edge is y 240 — which is where these four insets come from.
   *
   * `display: flex` so the inline badge leaves no baseline gap under it.
   */
  .collection-header__badge {
    position: absolute;
    display: flex;
  }

  .collection-header__badge--smiley {
    top: -20px;
    left: 56px;
  }

  /**
   * Figma 553:2302 sits the HAP disc beside the body, not on the heading line.
   * The 45px overhang only reads as a sticker in the gutter while the gutter is
   * wider than the disc — below about 1550 it would be sliced through the ring
   * by the viewport, so it is capped at the page margin.
   */
  .collection-header__badge--hap {
    top: 112px;
    right: calc(-1 * min(45px, max((100vw - 1460px) / 2, var(--page-margin))));
  }

  .collection-header__heading {
    color: var(--color-primary);
  }

  .collection-header__body {
    max-width: var(--collection-header-body-width);
    margin-top: var(--collection-header-gap);
    margin-inline: auto;
    color: var(--color-body);
  }
  .collection-header__body strong {
    font-weight: 600;
  }

  /**
   * Testimonials pulls up under this band. It is positioned, so without a
   * layer of its own the cream covers the mint bottom corners. Same reason as
   * `sections/product-story.liquid`.
   */
  .collection {
    position: relative;
    z-index: 1;
    padding-top: var(--collection-top-spacing);
    padding-bottom: var(--collection-bottom-spacing);
    border-radius: var(--collection-corner-radius);
    background-color: var(--color-secondary);
  }

  /**
   * The design lays this band out on a 1460px measure — three 486.66px columns
   * — which is wider than the theme's shared content column, so it sets its
   * own instead of inheriting `--page-width`.
   */
  .collection__inner {
    width: min(1460px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /* The cards carry their own 30px gutter, so the grid itself has none. */
  .collection__grid {
    display: grid;
    grid-template-columns: repeat(var(--collection-columns, 3), minmax(0, 1fr));
    gap: var(--collection-gap, 0);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /**
   * 30px inline is the design's card gutter — it turns a 486.66px column into
   * the 426.66px content box the title is measured on. 20px block is the same
   * padding read off the card in Figma, and it is what sets the 40px gutter
   * between one row of cards and the next.
   */
  .collection__card {
    padding: var(--collection-card-padding, 20px 30px);
  }

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

  /**
   * The artwork is one box with three layers stacked on top of each other, and
   * every offset is a percentage of that box — which is why a card holds its
   * proportions at three columns, at two, and at every width in between. Same
   * technique as `sections/hero.liquid`.
   *
   * `container-type: inline-size` is what lets the price text scale with the
   * card as well. It applies layout containment, not paint, so the disc is
   * still free to overhang the box on the left the way the design draws it.
   */
  .collection__media {
    position: relative;
    container-type: inline-size;
    aspect-ratio: 406.66 / 454;
    width: 95.3%;
    margin-inline: auto;
  }

  .collection__blob {
    position: absolute;
    top: 11.61%;
    left: 55.69%;
    width: 88.63%;
    height: 79.38%;
    color: var(--color-primary);
    translate: -50% 0;
  }

  /**
   * The design hand-places each of its three product renders at a different
   * scale. A collection shows whatever the store returns, so the photo is
   * fitted to the artwork box instead and `image_scale` is the merchant's knob
   * for the rest.
   */
  .collection__image {
    position: absolute;
    inset: 0;
    /* Centred on the blob rather than on the artwork box — the design sits all
       three renders on the blob's axis, which is 5.69% right of centre. */
    translate: 5.69% 0;
  }
  .collection__image :is(img, svg) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: var(--collection-image-scale, 1);
  }

  /* Rotated on the wrapper so the disc itself stays a circle for `aspect-ratio`. */
  .collection__price {
    position: absolute;
    top: 51.75%;
    left: -2.55%;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 40.58%;
    rotate: -18deg;
  }

  .collection__price-disc {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: 79.36%;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    /* 33.29px against the design's 406.66px artwork box. */
    font-size: 8.19cqw;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /**
   * Display 4 is the right size, but the design draws these titles with 1.3
   * leading and no tracking rather than the token's 1.2 / 0.05em.
   *
   * Figma measures this text box from the cap height to the baseline, so its
   * 30px gap above the title is 30px of clear space — where a browser's line
   * box also carries half the leading above the first line and below the last,
   * about 13px each at this size. Left alone that reads as a 43px gap and
   * makes a two-line card ~27px taller than the design. `text-box` trims the
   * same edges Figma does; browsers without it keep today's looser box.
   */
  .collection__title {
    margin-top: var(--collection-title-gap, 30px);
    color: var(--color-primary);
    line-height: 1.3;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
  }

  .collection__link:hover .collection__title {
    text-decoration: underline;
  }

  .collection__pagination {
    margin-top: var(--collection-pagination-gap, 80px);
    color: var(--color-primary);
    text-align: center;
  }
  .collection__pagination a {
    color: inherit;
  }

  /**
   * The settings that the theme editor writes into the `style` attribute are
   * desktop values, and an inline declaration outranks any stylesheet rule — so
   * the 390 layout overrides the *used* properties rather than the variables.
   * Only variables that are never set inline are re-declared here.
   */
  @media (width < 1366px) {
    .collection-header {
      /* Same vertical rhythm as the home hero at 390 (116 / 131). */
      margin-top: 116px;
      margin-bottom: 131px;
    }

    .collection-header__body {
      max-width: 100%;
      margin-top: 16px;
    }

    /**
     * There is no 390 frame for this page, so the stickers are derived: at this
     * width the copy fills the column, so there is no room to flank it and they
     * move into the gutters the band's own margins already leave — the smiley
     * between the nav and the headline, the HAP between the copy and the mint
     * band. The gutters match the home hero (116 / 131). A 60px disc stays 10px
     * from the copy so the extra space opens toward the nav and the mint band,
     * and anchoring the HAP to the bottom rather than the top means a longer
     * paragraph moves it down instead of through the text.
     */
    .collection-header__badge--smiley {
      top: -70px;
      left: -4px;
    }

    .collection-header__badge--hap {
      top: auto;
      right: -4px;
      bottom: -70px;
    }

    /**
     * `badge` sets `--badge-size` in an inline style attribute, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead of the variable.
     */
    .collection-header__badge .badge {
      width: 60px;
      height: 60px;
    }

    .collection {
      --collection-columns: var(--collection-columns-mobile);
      --collection-gap: var(--grid-gutter);
      --collection-card-padding: 8px 0;
      --collection-title-gap: 16px;
      --collection-pagination-gap: 48px;

      padding-top: 80px;
      padding-bottom: 80px;
      border-radius: 32px;
    }

    .collection__inner {
      width: calc(100% - var(--page-margin) * 2);
    }

    /**
     * Two columns at 390 leave a 167px card, and a 24px Ranchers
     * "KINDERTANDPASTA" does not fit in it — `overflow-wrap: break-word` from
     * critical.css splits it mid-word. The titles step down one place in the
     * display scale instead, which is the widest that always fits.
     */
    .collection__title {
      font-size: var(--display-5-size);
    }

    /**
     * Desktop artwork parks the blob/tube on an axis ~5.69% right of centre.
     * On a single-column card that reads as a right lean against the centred
     * title, so both layers are recentred on mobile.
     */
    .collection__blob {
      left: 50%;
    }

    .collection__image {
      translate: none;
    }

    .collection__price {
      left: -8%;
    }
  }

  /**
   * Tablet keeps the stacked title band, then two product cards per row —
   * between the 390 single column and the 1728 three-column grid.
   */
  @media (width >= 750px) and (width < 1366px) {
    .collection-header {
      margin-top: 80px;
      margin-bottom: 88px;
    }

    .collection-header__heading {
      font-size: clamp(48px, 6vw, 64px);
    }

    .collection-header__body {
      max-width: 560px;
    }

    .collection-header__badge .badge {
      width: 96px;
      height: 96px;
    }

    .collection-header__badge--smiley {
      top: -48px;
      left: 0;
    }

    .collection-header__badge--hap {
      top: auto;
      right: 0;
      bottom: -48px;
    }

    .collection {
      --collection-columns: 3;
      --collection-card-padding: 12px 16px;
      --collection-title-gap: 20px;

      padding-top: 96px;
      padding-bottom: 96px;
      border-radius: 40px;
    }

    .collection__title {
      font-size: var(--display-4-size);
    }

    .collection__blob {
      left: 55.69%;
    }

    .collection__image {
      translate: 5.69% 0;
    }

    .collection__price {
      left: -2.55%;
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:10) */
.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-form (INDEX:11) */
/**
   * The band is only rounded at the top: it runs straight into the footer,
   * which carries the matching bottom corners.
   *
   * Qualified with `div` because Shopify stamps the contact form tag with
   * `class="contact-form"` of its own — an unqualified selector would paint the
   * band's background, radius and padding onto the inner `<form>` as well.
   */
  div.contact-form {
    margin-bottom: calc(-1 * var(--contact-corner-radius));
    padding-top: var(--contact-top-spacing);
    padding-bottom: var(--contact-bottom-spacing);
    border-radius: var(--contact-corner-radius) var(--contact-corner-radius) 0 0;
    background-color: var(--color-secondary);
  }

  @media (width >= 1366px) {
    div.contact-form {
      /* Figma desktop measure; 234 is not a valid range step (step 4). */
      padding-bottom: 234px;
    }
  }

  /**
   * DOM order is heading, form, details, so 390 is a plain single column and the
   * grid areas only have to re-place them at 1728 — no `order` juggling, and the
   * tab order stays the reading order at both widths.
   *
   * `space-between` across 584 + 774 inside 1568 resolves to the design's 210px
   * gutter without hard-coding it.
   */
  .contact-form__inner {
    display: grid;
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
    grid-template-areas:
      'heading form'
      'details form';
    grid-template-columns: minmax(0, 584px) minmax(0, 774px);

    /**
     * The form spans both rows and is the taller column, so its height would
     * otherwise be shared out between them and push the details to the bottom
     * of the band. Parking the slack in row two and starting the details at the
     * top of it keeps them exactly one row-gap below the heading, as drawn.
     */
    grid-template-rows: auto 1fr;
    justify-content: space-between;
    row-gap: 132px;
  }

  .contact-form__heading {
    grid-area: heading;
    margin: 0;
    color: var(--color-primary);
  }

  .contact-form__form {
    grid-area: form;
  }

  .contact-form__details {
    display: flex;
    flex-direction: column;
    gap: 28px;
    grid-area: details;
    align-self: start;
  }

  .contact-form__details-heading {
    margin: 0;
    color: var(--color-primary);
  }

  .contact-form__rows {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .contact-form__row {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-primary);
    width: 223px;
  }

  .contact-form__link {
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .contact-form__link:hover {
    text-decoration: underline;
  }

  .contact-form__form form {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .contact-form__message {
    margin: 0;
  }

  .contact-form__message--error {
    color: var(--color-error);
  }

  .contact-form__message--success {
    color: var(--color-primary);
  }

  /** The contact page draws Atom / Button / Primary at 20px semibold, not the style guide's 28px. */
  .contact-form .button--default {
    font-size: 20px;
    font-weight: 600;
  }

  @media (width < 1366px) {
    div.contact-form {
      --contact-corner-radius: 32px;

      padding-top: 56px;
      padding-bottom: 150px;
    }

    .contact-form__inner {
      grid-template-areas:
        'heading'
        'form'
        'details';
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      row-gap: 56px;
    }

    .contact-form__form form {
      gap: 32px;
    }

    .contact-form__fields {
      gap: 16px;
    }

    /* The details block stacks under the form, left-aligned like the design. */
    .contact-form__details {
      align-items: flex-start;
      gap: 32px;
      text-align: left;
    }

    /** 390 draws this one heading at 32px, a step above the Display 5 mobile size. */
    .contact-form__details-heading {
      font-size: 32px;
      letter-spacing: 0.02em;
    }

    .contact-form__rows {
      flex-direction: column;
      gap: 16px;
    }

    /**
     * Off the type scale at 390 — design values, not tokens. Scoped through the
     * row so the rule outranks the `.body-m` utility on the link itself, whose
     * stylesheet order relative to this one is not guaranteed.
     */
    .contact-form__row .contact-form__link {
      font-size: 24px;
      line-height: 2;
    }

    .contact-form__row {
      width: auto;
    }

    .contact-form__submit {
      align-self: flex-start;
    }

    .contact-form .button--default {
      width: auto;
      min-height: 52px;
      padding-inline: 40px;
      font-size: 20px;
      font-weight: 400;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    div.contact-form {
      --contact-corner-radius: 36px;

      padding-top: 80px;
      padding-bottom: 140px;
    }

    .contact-form__inner {
      grid-template-areas:
        'heading form'
        'details form';
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      grid-template-rows: auto 1fr;
      column-gap: 40px;
      row-gap: 48px;
    }

    .contact-form__heading {
      font-size: clamp(32px, 4vw, 44px);
    }

    .contact-form__form form {
      gap: 40px;
    }

    .contact-form__fields {
      gap: 20px;
    }

    .contact-form__details-heading {
      font-size: 28px;
    }

    .contact-form__rows {
      flex-direction: column;
      gap: 16px;
    }

    .contact-form__row .contact-form__link {
      font-size: 18px;
      line-height: 1.5;
    }

    .contact-form .field--outline:not(.field--textarea) .field__control {
      height: 56px;
    }

    .contact-form .button--default,
    .contact-form .button--primary.button--default {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
      font-weight: 600;
    }
  }
/* END_SECTION:contact-form */

/* START_SECTION:cookie-policy (INDEX:12) */
.shopify-section:has(> .cookie-policy) {
    overflow-x: clip;
  }

  .cookie-policy {
    padding-bottom: 140px;
  }

  .cookie-policy__header {
    margin-top: 160px;
    margin-bottom: 80px;
    text-align: center;
    color: var(--color-primary);
  }

  .cookie-policy__title {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 1.1;
    font-family: var(--font-secondary--family);
    font-weight: 400;
    text-transform: uppercase;
    font-style: normal;
  }

  .cookie-policy__title-text {
    display: block;
    padding-inline: 20px;
  }

  .cookie-policy__decoration {
    position: absolute;
    width: 166px;
    height: 166px;
    transform: scale(0.75);
    transform-origin: center;
    pointer-events: none;
  }

  .cookie-policy__decoration--left {
    left: -160px;
    top: -80px;
  }

  .cookie-policy__decoration--right {
    right: -160px;
    bottom: -80px;
  }

  .cookie-policy__body {
    width: min(1010px, 100% - var(--page-margin) * 2);
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.6;
  }

  .cookie-policy__body p,
  .cookie-policy__body li {
    font-size: inherit;
  }

  .cookie-policy__body p {
    margin: 1.2em 0;
  }

  .cookie-policy__body a {
    color: inherit;
    text-decoration: underline;
  }

  .cookie-policy__block {
    margin-top: 56px;
  }

  .cookie-policy__block-heading {
    margin: 0 0 0.4em;
    font-size: 28px;
    line-height: 1.2;
    color: var(--color-primary);
  }

  @media (width < 1366px) {
    .cookie-policy {
      padding-bottom: 80px;
    }

    .cookie-policy__header {
      margin-top: 116px;
      margin-bottom: 64px;
    }

    .cookie-policy__decoration {
      width: 112px;
      height: 112px;
      transform: scale(0.45);
    }

    .cookie-policy__decoration--left {
      left: -86px;
      top: -95px;
    }

    .cookie-policy__decoration--right {
      right: -86px;
      bottom: -95px;
    }

    .cookie-policy__block {
      margin-top: 40px;
    }

    .cookie-policy__block-heading {
      font-size: 24px;
    }
  }
/* END_SECTION:cookie-policy */

/* START_SECTION:cta-banner (INDEX:13) */
.cta-banner {
    position: relative;
    overflow: clip;
    padding-top: var(--cta-top-spacing);
    padding-bottom: var(--cta-bottom-spacing);
    border-radius: var(--cta-corner-radius);
    background-color: var(--color-accent);
  }

  .cta-banner__inner {
    position: relative;
    z-index: 1;
    width: min(686px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
    text-align: center;
  }

  .cta-banner__heading {
    color: var(--color-primary);
    white-space: pre-line;
  }

  .cta-banner__body {
    margin-top: 24px;
    color: var(--color-body);
  }

  .cta-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: var(--cta-actions-gap, 48px);
  }

  .cta-banner__decoration {
    position: absolute;
    z-index: 0;
    display: none;
    pointer-events: none;
  }

  @media (width >= 1366px) {
    .cta-banner__decoration {
      display: block;
    }

    .cta-banner__decoration--left {
      top: var(--cta-badge-top, 97px);
      left: var(--cta-badge-inset, 11%);
    }

    .cta-banner__decoration--right {
      right: var(--cta-badge-inset, 11%);
      bottom: var(--cta-badge-bottom, 45px);
    }
  }

  @media (width < 1366px) {
    .cta-banner {
      --cta-corner-radius: 32px;
      --cta-actions-gap: 32px;

      padding-top: 96px;
      padding-bottom: 96px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .cta-banner {
      --cta-actions-gap: 40px;

      padding-top: 140px;
      padding-bottom: 140px;
    }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:custom-section (INDEX:14) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:faq (INDEX:15) */
/**
   * Pulled up over the band above so this one's rounded top corners land on it
   * rather than on the page background. `position` is what puts this section in
   * front: the band above is itself positioned, and without this it would paint
   * across the overlap and hide the corners. All four corners are rounded so
   * the mint band reads as a card against the page below as well.
   */
  .faq {
    position: relative;
    margin-top: -56px;

    padding-top: var(--faq-top-spacing);
    padding-bottom: var(--faq-bottom-spacing);
    border-radius: var(--faq-corner-radius);
    background-color: var(--color-secondary);
  }

  .faq__inner {
    width: min(1300px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .faq__heading {
    color: var(--color-primary);
    text-align: center;
  }

  .faq__list {
    margin-top: var(--faq-list-spacing, 96px);
  }

  @media (width < 1366px) {
    .faq {
      --faq-list-spacing: 48px;

      /* Matches the 390 overlap the band above leaves for it. */
      margin-top: -24px;

      padding-top: 80px;
      padding-bottom: 80px;

      /**
       * `--faq-corner-radius` is written on the section's `style` attribute,
       * which no stylesheet rule can outrank, so 390 sets the used property.
       */
      border-radius: 24px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .faq {
      --faq-list-spacing: 64px;

      margin-top: -36px;
      padding-top: 96px;
      padding-bottom: 96px;
      border-radius: 36px;
    }

    .faq__inner {
      width: min(860px, 100% - var(--page-margin) * 2);
    }

    .faq__heading {
      font-size: clamp(40px, 5vw, 52px);
    }
  }
/* END_SECTION:faq */

/* START_SECTION:footer (INDEX:16) */
/**
   * The footer is pulled up by exactly its own radius so its rounded top
   * corners overlap the section above rather than sitting beside it. Without
   * the overlap the two notches the radius cuts out expose the page
   * background, which reads as cream wedges against a coloured band — the
   * corners have to be carved out of whatever precedes the footer, and that
   * differs per page.
   *
   * `position: relative` puts the footer in the positioned layer so it paints
   * over the section it now overlaps: `.testimonials`, which sits above it on
   * three templates, is itself positioned and would otherwise win.
   */
  .footer {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--footer-corner-radius));
    padding-top: var(--footer-top-spacing);
    border-radius: var(--footer-corner-radius) var(--footer-corner-radius) 0 0;
    background-color: var(--color-primary);
    color: var(--color-neutral);
  }

  /* The footer sits on an 80px margin rather than the shared content column. */
  .footer__inner,
  .footer__bottom-inner {
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .footer__inner {
    padding-bottom: var(--footer-columns-spacing, var(--space-40));
  }

  .footer__hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /**
   * The brand column is a fixed 352px and the menus take the rest, so the gap
   * between them absorbs the width the design leaves empty.
   */
  .footer__columns {
    display: flex;
    gap: var(--space-10);
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    flex-shrink: 0;
    width: 352px;
  }

  .footer__brand-identity {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: flex-start;
  }

  .footer__logo {
    display: inline-flex;
    color: var(--color-neutral);
  }

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

  .footer__locale-form {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: center;
  }

  /**
   * The pill is a lightened primary rather than a token: it reads as a raised
   * surface on the footer band, which no brand colour on its own gives.
   */
  .footer__locale-pill {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    height: 60px;
    padding-inline: var(--space-3);
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--color-light) 5%, var(--color-primary));
  }

  .footer__locale-disclosure {
    position: relative;
  }

  .footer__locale-pill {
    cursor: pointer;
    list-style: none;
    user-select: none;
  }

  /* Safari paints its own disclosure triangle from a pseudo-element. */
  .footer__locale-pill::-webkit-details-marker {
    display: none;
  }

  .footer__locale-current {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .footer__locale-pill .icon {
    transition: rotate 0.2s ease;
  }

  .footer__locale-disclosure[open] .footer__locale-pill .icon {
    rotate: 180deg;
  }

  /* Figma: 104:2526 — a white card, 4px radius, 12px in, rows 8px apart. */
  .footer__locale-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 4px;
    background-color: var(--color-light);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
    list-style: none;
  }

  .footer__locale-option {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(4 51 41 / 0.7);
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
  }

  .footer__locale-option:hover,
  .footer__locale-option[aria-current='true'] {
    color: var(--color-primary);
  }

  .footer__locale-option[aria-current='true'] {
    font-weight: 500;
  }

  /**
   * Drawn rather than a real `<input type="radio">`: the control that changes
   * the language is the button around it, so a second focusable form field
   * would be a second thing to tab to that does nothing on its own. The button
   * already carries `aria-current`, which is what a screen reader announces.
   *
   * Selected is a thicker ring, not a filled dot. `box-sizing: border-box` is
   * global, so the outer circle stays 14px in both states and the row never
   * shifts.
   */
  .footer__locale-radio {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-light);
    transition: border-width 0.15s ease;
  }

  .footer__locale-option[aria-current='true'] .footer__locale-radio {
    border-width: 4px;
  }

  /* 6px from the flag to the name, inside the 8px from the radio. */
  .footer__locale-label {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .footer__locale-option .flag {
    width: 20px;
    font-size: 17px;
  }

  @media (prefers-reduced-motion: reduce) {
    .footer__locale-pill .icon,
    .footer__locale-radio {
      transition: none;
    }
  }

  /**
   * The columns keep their designed widths and the leftover space falls into
   * the `space-between` gap, so nothing shrinks the menus toward the brand.
   */
  /**
   * The columns hold their design widths while there is room and give ground
   * once there isn't, rather than pushing the page wider — at 1366 the row
   * wants 1481px against a 1326px column, which is a horizontal scrollbar.
   *
   * `flex: 1 1 auto` on the block matters as much as the shrink on the columns:
   * a flex container that cannot grow sizes itself from its contents, and once
   * those contents are shrinkable it collapses to their text width even where
   * the space exists. Filling the row keeps the columns on their own bases.
   */
  .footer__menus {
    display: flex;
    gap: var(--space-5);
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-end;
  }

  .footer__column {
    flex: 0 1 332px;
  }

  .footer__column--newsletter {
    flex: 0 1 385px;
  }

  .footer__column-heading {
    margin: 0;
    color: var(--color-neutral);
  }

  .footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: var(--space-10) 0 0;
    padding: 0;
    list-style: none;
  }

  .footer__link {
    color: var(--color-secondary);
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
    text-decoration: none;
  }

  .footer__link:hover {
    text-decoration: underline;
  }

  .footer__form {
    margin-top: var(--space-4);
  }

  /**
   * The newsletter field is drawn as a single rule rather than a box, so the
   * element-level form styles from critical.css are unset here. Those rules use
   * `:where()`, so a single class is enough to override them.
   */
  .footer__input {
    width: 100%;
    height: 64px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-neutral);
    border-radius: 0;
    background-color: transparent;
    color: var(--color-neutral);
  }

  .footer__input::placeholder {
    color: color-mix(in srgb, var(--color-neutral) 50%, transparent);
  }

  .footer__consent {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-top: var(--space-5);
  }

  /**
   * On the dark band the default primary border disappears into the box. The
   * offset centres the 16px control on the first 32px line, which reads the
   * same as the design's single-line row but survives the label wrapping.
   */
  .footer__checkbox {
    margin-top: var(--space-2);
    border-color: var(--color-neutral);
    background-color: var(--color-neutral);
  }

  .footer__checkbox:checked {
    border-color: var(--color-neutral);
    background-color: var(--color-neutral);
  }

  .footer__checkbox:checked::before {
    background-color: var(--color-primary);
  }

  .footer__consent-label {
    color: var(--color-secondary);
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  .footer__consent-label > * {
    margin: 0;
  }

  .footer__consent-label a {
    color: inherit;
    text-decoration: underline;
  }

  .footer__submit {
    margin-top: var(--space-10);
  }

  .footer__form-error,
  .footer__form-success {
    margin-top: var(--space-4);
  }

  /* The rule runs the full width of the band, the content stays on the margin. */
  .footer__bottom {
    border-top: 1px solid color-mix(in srgb, var(--color-neutral) 10%, transparent);
  }

  .footer__bottom-inner {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
    min-height: 116px;
    padding-block: var(--space-6);
  }

  /**
   * Copyright matches the legal links: 16px sits between --body-s (14px) and
   * --body-m (20px); the design uses it only here, so it is set outright
   * rather than promoted to a token.
   */
  .footer__copyright,
  .footer__legal-link {
    margin: 0;
    color: var(--color-secondary);
    font-size: 16px;
    line-height: 1.6;
  }

  .footer__legal {
    display: flex;
    gap: var(--space-8);
    align-items: center;
  }

  .footer__legal-links {
    display: flex;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer__legal-link {
    text-decoration: none;
    cursor: pointer;
  }

  .footer__legal-link:hover {
    text-decoration: underline;
  }

  .footer__credit {
    display: inline-flex;
    align-items: center;
    color: var(--color-neutral);
  }

  a.footer__credit {
    cursor: pointer;
  }

  .footer__credit-logo {
    display: block;
    width: auto;
    height: 20px;
  }

  @media (width < 1366px) {
    .footer {
      --footer-columns-spacing: var(--space-16);

      /**
       * `--footer-corner-radius` is written into the section's `style`
       * attribute, which no stylesheet rule can outrank, so the 390 radius is
       * applied to the used property rather than to the variable.
       */
      border-radius: 32px 32px 0 0;
      /* Matches the 390 radius above, for the same reason. */
      margin-top: -32px;
      padding-top: var(--space-16);
    }

    .footer__columns {
      flex-direction: column;
      gap: var(--space-12);
    }

    .footer__brand {
      gap: var(--space-8);
      width: 100%;
    }

    /**
     * `size` is written inline by the icon-button snippet, so the smaller mobile
     * button is set on the box rather than by overriding the custom property.
     */
    .footer__social .icon-button {
      width: 48px;
      height: 48px;
    }

    .footer__menus {
      flex-wrap: wrap;
      gap: var(--space-10) var(--space-5);
      width: 100%;
    }

    .footer__column {
      flex: 1 1 40%;
    }

    .footer__column--newsletter {
      flex: 1 1 100%;
    }

    .footer__links {
      gap: var(--space-3);
      margin-top: var(--space-6);
    }

    /**
     * Desktop offsets the 16px box onto a 32px first line (`--space-2`).
     * Mobile body copy is 16px / 1.5 (a 24px line), so that 8px nudge sits
     * the control above the letters. Recentre on the first line instead.
     */
    .footer__checkbox {
      margin-top: calc((var(--body-m-size) * var(--body-m-leading) - 16px) / 2);
    }

    .footer__bottom-inner {
      flex-direction: column;
      gap: var(--space-4);
      align-items: flex-start;
      min-height: 0;
    }

    .footer__legal {
      flex-direction: column;
      gap: var(--space-4);
      align-items: flex-start;
      width: 100%;
    }

    .footer__legal-links {
      flex-direction: column;
      gap: var(--space-2);
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:17) */
/**
   * The header lives in a sticky wrapper so it can be hidden and brought back
   * mid-page without ever leaving the flow — nothing below it shifts when it
   * pins. Past 30px of downward scroll the script hides it, and the first
   * upward scroll from any point brings it back; both are the one transition.
   */
  .shopify-section:has(> .header) {
    position: sticky;
    top: 0;
    z-index: 30;
    transition:
      transform 0.3s ease,
      background-color 0.3s ease;
  }

  .shopify-section:has(> .header).header-group--hidden {
    transform: translateY(-100%);
  }

  /* Floating over the page, the header needs a background of its own. */
  .shopify-section:has(> .header).header-group--floating {
    background-color: var(--color-background);
  }

  /**
   * Only for the first state the script sets: a page restored part-way down
   * should start with the header already away, not animate it away on load.
   */
  .shopify-section:has(> .header).header-group--instant {
    transition: none;
  }

  /**
   * The design lays the header out on the same 1568px measure as the sections
   * below it — 80px either side of the 1728px artboard — so it sets that width
   * directly rather than inheriting the narrower `--page-width`. Below the
   * measure it collapses to the page margin, so a gutter is always left.
   */
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
    padding-block: 12px;
    box-sizing: border-box;
  }

  /* The fallback lockup is drawn in currentColor, so the brand green is set here. */
  .header__logo {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    color: var(--color-primary);
    text-decoration: none;
  }
  .header__logo img {
    height: 26px;
    width: auto;
  }

  .header__nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-primary);
    font-family: var(--font-primary--family);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
  }

  .header__nav-item--dropdown {
    position: relative;
  }
  .header__dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 12px;
    z-index: 10;
  }
  .header__nav-item--dropdown:hover .header__dropdown,
  .header__nav-item--dropdown:focus-within .header__dropdown {
    display: block;
  }
  .header__dropdown-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    min-width: 131px;
    padding: 16px 32px 16px 16px;
    background: var(--color-primary);
    border-radius: 20px;
  }
  .header__dropdown-link {
    text-decoration: none;
    color: var(--color-background);
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
  }
  .header__dropdown-link:hover {
    color: var(--color-secondary);
  }

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

  /**
   * The call to action and the cart sit 16px apart as one group, while the
   * group as a whole keeps the 32px gap to the navigation beside it.
   */
  .header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .header__icons {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* The panel, its toggle and the compact cart only exist below the desktop breakpoint. */
  .header__mobile-tools {
    display: none;
    align-items: center;
    gap: 8px;
  }

  .header__mobile {
    display: block;
  }

  .header__mobile-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--color-neutral);
    cursor: pointer;
    list-style: none;
  }

  .header__mobile-toggle::-webkit-details-marker {
    display: none;
  }

  .header__mobile-shape {
    position: absolute;
    inset: 0;
    color: var(--color-primary);
    transform: rotate(45deg);
  }

  .header__mobile-glyph {
    position: relative;
    display: inline-flex;
  }

  .header__mobile[open] .header__mobile-glyph--closed,
  .header__mobile:not([open]) .header__mobile-glyph--open {
    display: none;
  }

  .header__panel {
    position: absolute;
    top: 100%;
    right: var(--page-margin);
    left: var(--page-margin);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 39px;
    align-items: flex-start;
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    padding: 40px 16px 48px;
    border-radius: 26px;
    background-color: var(--color-primary);
  }

  .header__panel-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .header__panel-action {
    flex-shrink: 0;
  }

  /**
   * Mint's global hover becomes primary-on-primary, which disappears on this
   * band. Darken the fill instead so the pill stays visible.
   */
  .header__panel .button--mint:hover {
    background-color: color-mix(in srgb, #5db77a 85%, black);
    color: #ffffff;
  }

  @media (width < 1366px) {
    .header {
      position: relative;
    }

    .header__nav--left,
    .header__right {
      display: none;
    }

    .header__mobile-tools {
      display: flex;
    }
  }

  /**
   * Tablet uses the same mobile bar (logo / compact cart / hamburger).
   * Only those three controls are scaled up; mobile below 750 is unchanged.
   */
  @media (width >= 750px) and (width < 1366px) {
    .header__logo img,
    .header__logo .logo {
      height: 32px;
    }

    .header__mobile-tools .cart-icon--compact {
      width: 44px;
      height: 44px;
    }

    .header__mobile-tools .cart-icon--compact .icon {
      width: 24px;
      height: 24px;
    }

    .header__mobile-toggle {
      width: 44px;
      height: 44px;
    }

    .header__mobile-toggle .icon {
      width: 20px;
      height: 20px;
    }

    .header__panel {
      gap: 48px;
      max-height: calc(100svh - 96px);
      padding: 48px 32px 56px;
      border-radius: 36px;
    }

    .header__panel-nav {
      gap: 28px;
    }

    .header__panel-action .button,
    .header__panel-action .button--mint.button--small {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-icon,
    .shopify-section:has(> .header) {
      transition: none;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:18) */
/**
   * The stickers are meant to hang past the content column, so the clip has to
   * happen at the section wrapper — that box spans the viewport, while `.hero`
   * is only as wide as the column and would cut them off mid-design.
   *
   * `clip` rather than `hidden` so the axis stays independent: the stickers also
   * overhang vertically, and `overflow-y` keeps computing to `visible` next to a
   * horizontal `clip`.
   */
  .shopify-section:has(> .hero) {
    overflow-x: clip;
  }

  .hero {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--hero-top-spacing);
    margin-bottom: var(--hero-bottom-spacing);
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-content-gap);
    width: var(--hero-content-width);
    max-width: 100%;
  }

  .hero__heading {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 0;
  }
  .hero__heading-line {
    font-family: var(--font-secondary--family);
    font-size: var(--hero-heading-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-align: center;
    text-transform: uppercase;
  }
  .hero__heading-line--accent {
    color: var(--color-secondary);
  }
  .hero__heading-line--primary {
    color: var(--color-primary);
  }

  .hero__actions {
    display: flex;
    align-items: flex-start;
    gap: var(--hero-actions-gap);
  }

  .hero__decoration {
    position: absolute;
    width: var(--hero-decoration-size);
    height: var(--hero-decoration-size);
  }
  .hero__decoration img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .hero__decoration--left {
    top: 0;
    left: 0;
    transform: translate(-30%, -45%) rotate(var(--hero-decoration-rotation));
  }
  .hero__decoration--right {
    right: 0;
    bottom: 0;
    transform: translate(35%, 45%) rotate(var(--hero-decoration-rotation));
  }

  /**
   * The product visual is one box with three layers stacked on top of each
   * other. Every offset is a percentage of that box, which is why the 1728 and
   * 390 versions of this artwork only differ in the box width — the blob and
   * the tube sit at identical proportions in both.
   */
  .hero__product {
    position: relative;
    aspect-ratio: 673 / 738;
    width: var(--hero-product-width, 673px);
    max-width: 100%;
    margin-top: var(--hero-product-spacing, 68px);
  }

  .hero__product-blob {
    position: absolute;
    top: 13.01%;
    left: 58.47%;
    width: 83.06%;
    height: 75.75%;
    color: var(--color-primary);
    translate: -50% 0;
  }

  .hero__product-image {
    position: absolute;
    inset: 0 auto 0 35.36%;
    width: 46.21%;
  }
  .hero__product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Rotated on the wrapper so the disc itself stays a circle for `aspect-ratio`. */
  .hero__price {
    position: absolute;
    top: var(--hero-price-top, 50%);
    left: var(--hero-price-left, 0%);
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: var(--hero-price-size, 38.29%);
    rotate: -18deg;
  }

  .hero__price-disc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    width: 79.36%;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    text-align: center;
    text-transform: uppercase;
  }

  .hero__price-label {
    font-size: var(--hero-price-label-size, 20px);
    line-height: 1.2;
  }

  .hero__price-value {
    font-size: var(--hero-price-value-size, 52px);
    line-height: 1.2;
    white-space: nowrap;
  }

  .hero__body {
    max-width: var(--hero-body-width, 941px);
    margin-top: var(--hero-body-spacing, 22px);
    color: var(--color-body);
    text-align: center;
  }
  .hero__body strong {
    font-weight: 600;
  }

  /**
   * The settings that the theme editor writes into the `style` attribute are
   * desktop values, and an inline declaration outranks any stylesheet rule — so
   * the 390 layout overrides the *used* properties rather than the variables.
   * Only variables that are never set inline are re-declared here.
   */
  @media (width < 1366px) {
    .hero {
      --hero-product-width: 352px;
      --hero-product-spacing: 84px;
      --hero-price-top: 67.86%;
      --hero-price-left: 0.85%;
      --hero-price-size: 32.18%;
      --hero-price-label-size: 12px;
      --hero-price-value-size: 30px;
      --hero-body-spacing: 50px;

      margin-top: 116px;
      margin-bottom: 131px;
    }

    .hero__content {
      gap: 32px;
      width: 100%;
    }

    .hero__heading-line {
      font-size: var(--display-1-size);
    }

    .hero__decoration,
    .hero__decoration .badge {
      width: 74px;
      height: 74px;
    }

    /**
     * At 390 both stickers sit inside the viewport — the right one flush with
     * its edge — so neither can create a horizontal scrollbar.
     */
    .hero__decoration--left {
      transform: translate(-6%, -115%) rotate(var(--hero-decoration-rotation));
    }
    .hero__decoration--right {
      transform: translate(22%, 223%) rotate(var(--hero-decoration-rotation));
    }

    /**
     * Desktop artwork parks the blob/tube centre at ~58.5% of the product box.
     * On mobile that reads as a right shift against the centred copy below, so
     * the layers are recentred on the mid-line instead.
     */
    .hero__product-blob {
      left: 50%;
    }

    .hero__product-image {
      left: 26.9%;
    }
  }

  /**
   * Tablet keeps the stacked mobile composition, but the 390 measurements leave
   * a tiny product island and decorations that float away on a wider canvas.
   */
  @media (width >= 750px) and (width < 1366px) {
    .hero {
      --hero-product-width: min(560px, 68vw);
      --hero-product-spacing: 36px;
      --hero-price-top: 64%;
      --hero-price-left: 2%;
      --hero-price-size: 28%;
      --hero-price-label-size: 14px;
      --hero-price-value-size: 36px;
      --hero-body-width: 580px;
      --hero-body-spacing: 20px;

      margin-top: 72px;
      margin-bottom: 80px;
    }

    .hero__content {
      gap: 24px;
      width: min(720px, 100%);
    }

    .hero__heading-line {
      font-size: clamp(52px, 7vw, 72px);
    }

    .hero__decoration,
    .hero__decoration .badge {
      width: 96px;
      height: 96px;
    }

    .hero__decoration--left {
      left: calc(50% - 50vw + var(--page-margin));
      transform: translateY(-32px) rotate(var(--hero-decoration-rotation));
    }

    .hero__decoration--right {
      right: calc(50% - 50vw + var(--page-margin));
      transform: translateY(36px) rotate(var(--hero-decoration-rotation));
    }

    .hero__actions .button--default,
    .hero__actions .button--primary.button--default,
    .hero__actions .button--secondary.button--default {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }

    .hero__body {
      font-size: 18px;
    }
  }
/* END_SECTION:hero */

/* START_SECTION:how-it-works (INDEX:19) */
.how {
    /**
     * The morph timing. `--how-duration` is read back by this section's script
     * for the body height, so it is the single source of truth for how long a
     * step takes to swap — keep it in a unit JS can parse.
     */
    --how-duration: 420ms;
    --how-ease: cubic-bezier(0.32, 0.72, 0, 1);

    /**
     * Pulled up under the band above so that band's rounded bottom corners land
     * on this dark panel instead of on the page background. The section before
     * this one paints above it — it is the one carrying `position: relative`
     * and a `z-index`. The overlap is a design value per breakpoint, so the 390
     * layout sets its own below.
     */
    margin-top: -55px;

    /**
     * The band after this one is pulled up over it in turn, and being
     * positioned it would otherwise paint across this panel's rounded corners.
     * The section before this one sits higher again, so its photo can keep
     * hanging down over this panel.
     */
    position: relative;
    z-index: 1;

    padding-top: var(--how-top-spacing);
    padding-bottom: var(--how-bottom-spacing);
    border-radius: 0 0 var(--how-corner-radius) var(--how-corner-radius);
    background-color: var(--color-primary);
  }

  /**
   * This band is wider than the theme's shared content column — the design lays
   * it out on a 1569px measure with 80px margins — so it sets its own width
   * instead of inheriting `--page-width`.
   */
  .how__inner {
    width: min(1569px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .how__intro {
    display: grid;
    grid-template-columns: var(--how-intro-columns, 59% 1fr);
  }

  .how__intro-text {
    grid-column: -2;
    max-width: 493px;
    color: var(--color-secondary);
  }

  .how__grid {
    display: grid;
    grid-template-columns: var(--how-grid-columns, 736fr 713fr);
    gap: var(--how-grid-gap, 120px);
    margin-top: var(--how-grid-spacing, 330px);
  }

  .how__heading {
    color: var(--color-accent);
    white-space: pre-line;
  }

  .how__steps {
    display: flex;
    flex-direction: column;
    gap: var(--how-steps-gap, 32px);
    margin-top: var(--how-heading-gap, 71px);
  }

  /**
   * Open and closed are two different states, and the section animates between
   * them, so every open-state rule below is written as `[open]:not([data-closing])`.
   * `data-closing` is set by the script for the length of the collapse, which
   * lets the outgoing step dim and give up its rule segment while its body is
   * still sliding shut, instead of snapping once the slide has finished.
   */
  .how__details {
    /* Closed steps are dimmed; the open one is at full strength. */
    opacity: 0.4;
    transition: opacity var(--how-duration) var(--how-ease);
  }

  .how__details[open]:not([data-closing]) {
    opacity: 1;
  }

  .how__summary {
    display: flex;
    gap: var(--how-summary-gap, 40px);
    align-items: flex-start;
    cursor: pointer;
    list-style: none;
  }

  /* Safari still paints the default disclosure triangle without this. */
  .how__summary::-webkit-details-marker {
    display: none;
  }

  /**
   * Cap-aligned with the title: both faces sit on the same top line. The
   * number used to carry extra padding so it looked centred against the taller
   * heading; that is what made "01" sit lower than "Stralend resultaat!".
   */
  .how__number {
    min-width: var(--how-number-width, 36px);
    color: var(--color-accent);
    /* Match the title's cap alignment: keep the number slightly lowered
       so the glyph sits on the same top line as the step heading. */
    padding-top: 4px;
    text-box: trim-start cap;
  }

  .how__title {
    color: var(--color-neutral);
    text-box: trim-start cap;
  }

  /**
   * `overflow: hidden` is what the script's height animation clips against.
   *
   * The spacing sits on the inner element, not here: `box-sizing: border-box`
   * refuses to shrink a box below its own padding, so a padded panel animating
   * to `height: 0` stops short and then loses the rest in one frame when `open`
   * goes away. An unpadded panel can actually reach zero.
   */
  .how__body {
    overflow: hidden;
  }

  /* Padding rather than margin, for the same reason — it has to collapse with the panel. */
  .how__body-inner {
    padding-top: 20px;
    margin-left: calc(var(--how-number-width, 36px) + var(--how-summary-gap, 40px));
    color: var(--color-secondary);
    /* 16px is a deliberate design value; it is not a step in the type scale. */
    font-size: 16px;
    line-height: 1.6;
  }

  .how__rule {
    position: relative;
    height: 1px;
    margin-top: var(--how-steps-gap, 32px);
    background-color: color-mix(in srgb, var(--color-secondary) 20%, transparent);
  }

  /* A short solid segment marks which step is open. */
  .how__rule-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background-color: var(--color-secondary);
    transition: width var(--how-duration) var(--how-ease);
  }

  .how__step:has(.how__details[open]:not([data-closing])) .how__rule-progress {
    width: var(--how-progress-width, 211px);
  }

  .how__media {
    position: relative;
    display: flex;
    justify-content: flex-end;
  }

  .how__image {
    aspect-ratio: var(--how-image-aspect, 639 / 782);
    width: var(--how-image-width, 639px);
    max-width: 100%;
    border-radius: var(--how-image-radius, 56px);
    object-fit: cover;
    object-position: center;
  }

  .how__media-badge {
    position: absolute;
    top: var(--how-badge-top, 94.4%);
    left: var(--how-badge-left, 10%);
    translate: -50% -50%;
  }

  @media (width < 1366px) {
    .how {
      --how-intro-columns: 1fr;
      --how-grid-columns: 1fr;
      --how-grid-gap: 56px;
      --how-grid-spacing: 92px;
      --how-heading-gap: 40px;
      --how-steps-gap: 20px;
      --how-number-width: 28px;
      --how-summary-gap: 24px;
      --how-progress-width: 96px;
      --how-image-aspect: 358 / 265;
      --how-image-width: 100%;
      --how-image-radius: 32px;
      --how-badge-top: 82%;
      --how-badge-left: 14%;

      /**
       * The section above hangs its photo 107px past its own box, and this band
       * is pulled up another 24px, so the photo's bottom lands 131px inside this
       * one and its sticker clears at 290px. The heading has to start below that
       * — `--how-grid-spacing` supplies the last 92px of the gap.
       */
      margin-top: -24px;

      padding-top: 240px;
      padding-bottom: 96px;

      /**
       * The radius setting is written inline as the 1728 value, and an inline
       * custom property cannot be outranked by a stylesheet rule — so 390
       * overrides the used property rather than `--how-corner-radius`.
       */
      border-radius: 0 0 24px 24px;
    }

    /* The intro paragraph is desktop-only. */
    .how__intro {
      display: none;
    }

    /**
     * Start-aligned at 390, matching the steps below. `normal` rather than
     * `pre-line`: the setting carries a `\n` so the 1728 layout breaks after
     * "Brush the", and that break is not wanted here. This collapses it to a
     * space and lets the line run on.
     */
    .how__heading {
      text-align: start;
      white-space: normal;
    }

    .how__media {
      justify-content: center;
    }

    .how__media-badge .badge {
      width: 71px;
      height: 71px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .how {
      --how-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
      --how-grid-gap: 32px;
      --how-grid-spacing: 56px;
      --how-heading-gap: 32px;
      --how-image-aspect: 4 / 5;
      --how-image-width: 100%;
      --how-image-radius: 36px;
      --how-badge-top: 90%;
      --how-badge-left: 12%;
    }

    .how__grid {
      align-items: center;
    }

    .how__column {
      min-width: 0;
    }

    .how__heading {
      font-size: clamp(36px, 4.6vw, 48px);
    }

    .how__media {
      justify-content: flex-end;
    }

    .how__media-badge .badge {
      width: 88px;
      height: 88px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .how__details,
    .how__rule-progress {
      transition: none;
    }
  }
/* END_SECTION:how-it-works */

/* START_SECTION:image-banner (INDEX:20) */
/**
   * The section below is pulled up under this one — `testimonials` overlaps by
   * 56px — and it is positioned, so without a layer of its own this section
   * loses the paint order and has the bottom of its photo covered along with
   * the photo's rounded corners. Same arrangement, and same reason, as
   * `sections/product-story.liquid`.
   */
  .image-banner {
    position: relative;
    z-index: 1;

    padding-top: var(--image-banner-top-spacing);
    padding-bottom: var(--image-banner-bottom-spacing);
    background-color: var(--color-background);
  }

  .image-banner__inner {
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .image-banner__image {
    display: block;
    width: 100%;
    aspect-ratio: var(--image-banner-aspect, 1568 / 593);
    border-radius: var(--image-banner-radius, 56px);
    object-fit: cover;
  }

  @media (width < 1366px) {
    .image-banner {
      --image-banner-aspect: 358 / 215;
      --image-banner-radius: 24px;
      padding-top: {{ section.settings.mobile_top_spacing }}px;
      padding-bottom: {{ section.settings.mobile_bottom_spacing }}px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .image-banner {
      --image-banner-aspect: 16 / 7;
      --image-banner-radius: 36px;
    }
  }
/* END_SECTION:image-banner */

/* START_SECTION:intro-showcase (INDEX:21) */
/**
   * The photo deliberately hangs below the mint band and over the dark section
   * that follows it. The negative margin on the media block pulls the mint
   * background's bottom edge up by the overlap, while the photo itself keeps
   * painting past it — and `z-index` keeps it above the next section, which
   * comes later in the document and would otherwise cover it.
   */
  .intro {
    position: relative;
    /* Above `how-it-works`, which now carries a z-index of its own, so the
       photo can still hang down across it. */
    z-index: 2;
    display: grid;
    justify-items: center;
    padding-top: var(--intro-top-spacing);
    /* Rounds the mint band's bottom edge only; the photo still hangs past it,
       because this clips the background paint rather than the overflow. */
    border-radius: 0 0 var(--intro-corner-radius, 56px) var(--intro-corner-radius, 56px);
    background-color: var(--color-secondary);
  }

  .intro__inner {
    display: grid;
    justify-items: center;
    width: 100%;
    max-width: var(--intro-media-width, 1590px);
    padding-inline: var(--page-margin);
  }

  .intro__heading {
    max-width: 1300px;
    color: var(--color-primary);
    text-align: center;
  }

  .intro__media {
    position: relative;
    width: 100%;
    margin-top: var(--intro-heading-gap);
    margin-bottom: calc(var(--intro-overlap) * -1);
  }

  .intro__caption {
    position: absolute;
    top: var(--intro-caption-top, 57.45%);
    right: var(--intro-caption-right, 3.08%);
    width: var(--intro-caption-width, 522px);
    max-width: 80%;
    padding: var(--intro-caption-padding, 40px);
    border-radius: var(--intro-caption-radius, 56px);
    background-color: var(--color-accent);
  }

  .intro__caption-text {
    color: var(--color-primary);
    text-align: center;
  }

  /* The tail hangs off the pill's lower-left corner, pointing at the photo. */
  .intro__caption-tail {
    display: none;
  }

  .intro__badge {
    position: absolute;
    top: var(--intro-badge-top, 81.6%);
    left: var(--intro-badge-left, 63.6%);
    rotate: calc(10deg);
  }

  @media (width >= 1366px) {
    .intro__badge {
      left: calc(100% - 3.08% - 522px + 20px);
    }
  }

  @media (width < 1366px) {
    /**
     * The 390 pill is its own size, not a scaled-down 1728 one: 231 x 126 with
     * 24px padding and a 24px radius, sitting flush with the photo's right edge
     * (Figma 105:13014). The percentages are read off the same 358 x 173 photo
     * box the shape is drawn against.
     */
    .intro {
      --intro-media-width: 390px;
      --intro-corner-radius: 24px;
      --intro-caption-top: 49.2%;
      --intro-caption-right: 0%;
      --intro-caption-width: 231px;
      --intro-caption-padding: 24px;
      --intro-caption-radius: 24px;
      --intro-tail-left: 27px;
      /* At 390 the sticker drops clear of the photo, onto the dark band below. */
      --intro-badge-top: 152.7%;
      --intro-badge-left: 35.2%;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 100px;
    }

    .intro__media {
      margin-top: 51px;
      margin-bottom: -107px;
    }
    

    .intro__badge .badge {
      width: 71px;
      height: 71px;
    }


.intro__caption-tail {
    position: absolute;
    bottom: 5px;
    left: var(--intro-tail-left, 71px);
    width: 29px;
    height: 15px;
    color: var(--color-accent);
    translate: 0 100%;
    display: flex;
  }
    
  }

  /**
   * Tablet keeps the stacked mint band and overlapping photo, but drops the
   * 390px column so the wave, pill and sticker fill the wider canvas.
   */
  @media (width >= 750px) and (width < 1366px) {
    .intro {
      --intro-media-width: min(900px, 100%);
      --intro-corner-radius: 36px;
      --intro-caption-top: 54%;
      --intro-caption-right: 2.5%;
      --intro-caption-width: min(360px, 42%);
      --intro-caption-padding: 28px;
      --intro-caption-radius: 32px;

      padding-top: 80px;
    }

    .intro__heading {
      max-width: 640px;
      font-size: clamp(36px, 5.2vw, 52px);
    }

    .intro__media {
      margin-top: 40px;
      margin-bottom: -160px;
    }

    .intro__caption-text {
      font-size: clamp(16px, 2.1vw, 22px);
    }

    .intro__caption-tail {
      left: 40px;
      translate: 0 100%;
    }

    .intro__badge {
      top: 90%;
      left: calc(100% - 2.5% - min(360px, 42%) + 54px);
      translate: -50% 12px;
    }

    .intro__badge .badge {
      width: 100px;
      height: 100px;
    }
  }
/* END_SECTION:intro-showcase */

/* START_SECTION:marquee (INDEX:22) */
/**
   * The band is a tilted strip that straddles the boundary between the two
   * sections it sits between. Those two background colours are painted by a
   * single hard-stop gradient set to the same angle as the band, so the colour
   * change follows the tilt exactly and the band covers the seam — which is why
   * they are settings: the section has to be told what it is straddling.
   * `overflow-x: clip` keeps the over-wide strip from producing a horizontal
   * scrollbar without clipping the vertical overhang.
   */
  /**
   * The two settings that change at 390 are re-published here from the inline
   * `*-setting` values rather than being written to their final names inline:
   * an inline custom property cannot be outranked by a stylesheet rule, so the
   * mobile query below would otherwise have no way to step them down.
   */
  .marquee {
    --marquee-band-height: var(--marquee-band-height-setting);
    --marquee-gap: var(--marquee-gap-setting);

    position: relative;
    display: grid;
    place-items: center;
    overflow-x: clip;
    overflow-y: visible;
    /**
     * The design's height for the band at 1728. It is a flat value rather than
     * the rotated box's own measurement, so a window wide enough leaves the
     * strip's two extreme corners a few pixels outside the section — see the
     * note on `.marquee__band`, which is what keeps them painting rather than
     * being covered.
     */
    height: 239px;
    background: linear-gradient(
      calc(180deg + var(--marquee-tilt)),
      var(--marquee-color-above) 50%,
      var(--marquee-color-below) 50%
    );
  }

  /**
   * The strip straddles the seam between the two sections either side, so it
   * has to paint over both. The lift belongs here rather than on the section:
   * raising `.marquee` would carry its gradient up too, and that rectangle
   * would then cover the top of whatever the section below draws — the
   * testimonials watermark, for one, which loses its head to a hard horizontal
   * line. 3 rather than 1 because `intro-showcase`, which follows this section
   * on the home page, already carries a 2 of its own. `.marquee` is positioned
   * but has no `z-index`, so it opens no stacking context and this competes
   * with the neighbouring sections directly.
   */
  .marquee__band {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 130vw;
    height: var(--marquee-band-height);
    background-color: var(--marquee-band-color);
    rotate: var(--marquee-tilt);
  }

  .marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: var(--marquee-gap);
    width: max-content;
    animation: marquee-scroll var(--marquee-duration) linear infinite;
  }

  .marquee__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--marquee-gap);
  }

  .marquee__item {
    color: var(--marquee-item-color, var(--color-primary));
    white-space: nowrap;
  }

  .marquee__separator {
    display: flex;
    flex-shrink: 0;
    align-items: center;
  }

  /**
   * The track holds two identical groups separated by one gap, so a full cycle
   * is half the track plus half of that separating gap.
   */
  @keyframes marquee-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-50% - var(--marquee-gap) / 2));
    }
  }

  @media (width < 1366px) {
    .marquee {
      --marquee-band-height: 92px;
      --marquee-gap: 20px;

      /**
       * 390 has no design height of its own, so it keeps the measured one: the
       * band's height plus what the tilt adds to a 130vw strip, which is the
       * smallest box the rotated band fits inside.
       */
      height: calc(var(--marquee-band-height) + 130vw * var(--marquee-tilt-sin));
    }

    /**
     * `badge` sets `--badge-size` in an inline style attribute, which no
     * stylesheet rule can outrank, so the mobile size is applied to the used
     * properties instead of the variable.
     */
    .marquee__separator .badge {
      width: 36px;
      height: 36px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .marquee__track {
      animation: none;
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:offer-popup (INDEX:23) */
.offer-popup {
    --offer-popup-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --offer-popup-duration: 0.45s;

    inset: 28px 16px;
    width: min(calc(100% - 32px), var(--offer-popup-width, 1008px));
    max-width: var(--offer-popup-width, 1008px);
    height: fit-content;
    max-height: calc(100dvh - 56px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    opacity: 0;
    transform: translateY(20px) scale(0.94);
    transition:
      opacity var(--offer-popup-duration) var(--offer-popup-ease),
      transform var(--offer-popup-duration) var(--offer-popup-ease);
  }

  .offer-popup.offer-popup--visible {
    opacity: 1;
    transform: none;
  }

  .offer-popup::backdrop {
    background-color: rgb(4 51 41 / 0.28);
    opacity: 0;
    transition: opacity var(--offer-popup-duration) var(--offer-popup-ease);
  }

  .offer-popup.offer-popup--visible::backdrop {
    opacity: 1;
  }

  .offer-popup__frame {
    position: relative;
    overflow: hidden;
    padding: 48px;
    border-radius: var(--offer-popup-radius, 12px);
    background-color: var(--offer-popup-card, #fef5e4);
  }

  .offer-popup__close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--offer-popup-heading, var(--color-primary));
    cursor: pointer;
  }

  .offer-popup__close .icon {
    width: 22px;
    height: 22px;
  }

  .offer-popup__close:hover,
  .offer-popup__close:focus-visible {
    opacity: 0.7;
  }

  .offer-popup__layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .offer-popup__visual {
    --offer-popup-media-height: 374px;
    --offer-popup-blob-size: 283px;

    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    width: var(--offer-popup-blob-size);
    max-width: 100%;
    height: var(--offer-popup-media-height);
  }

  .offer-popup__blob {
    position: absolute;
    z-index: 0;
    top: 13.01%;
    left: 50%;
    width: min(100%, var(--offer-popup-blob-size));
    height: auto;
    aspect-ratio: 1;
    color: var(--color-primary);
    translate: -50% 0;
    pointer-events: none;
  }

  .offer-popup__media {
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    max-width: 100%;
  }

  .offer-popup__media img,
  .offer-popup__image {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  .offer-popup__copy {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
    max-width: 562px;
  }

  .offer-popup__intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .offer-popup__heading {
    margin: 0;
    color: var(--offer-popup-heading, #043329);
    font-family: var(--font-secondary--family);
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .offer-popup__body {
    color: var(--offer-popup-body, #4f6d61);
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.36;
    letter-spacing: -0.03em;
  }

  .offer-popup__body > :first-child {
    margin-top: 0;
  }

  .offer-popup__body > :last-child {
    margin-bottom: 0;
  }

  .offer-popup__form {
    width: 100%;
  }

  .offer-popup__field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    padding: 4px 4px 4px 16px;
    overflow: hidden;
    border-radius: 40px;
    background-color: #ffffff;
  }

  .offer-popup__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 12px 0 0;
    border: 0;
    background: none;
    color: #413f3b;
    font-family: var(--font-primary--family);
    font-size: 16px;
    letter-spacing: -0.025em;
  }

  .offer-popup__input::placeholder {
    color: #413f3b;
    opacity: 0.7;
  }

  .offer-popup__input:focus {
    outline: none;
  }

  .offer-popup__field:focus-within {
    outline: 2px solid var(--offer-popup-heading, #043329);
    outline-offset: 2px;
  }

  .offer-popup__submit {
    flex-shrink: 0;
    height: 48px;
    padding: 0 24px;
    border: 0;
    border-radius: 100px;
    background-color: var(--offer-popup-button, #043329);
    color: var(--offer-popup-button-text, #ffffff);
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1.32;
    cursor: pointer;
  }

  .offer-popup__submit:hover,
  .offer-popup__submit:focus-visible {
    filter: brightness(1.08);
  }

  .offer-popup__error,
  .offer-popup__success {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .offer-popup__error {
    color: #b3261e;
  }

  .offer-popup__success {
    color: var(--offer-popup-heading, #043329);
  }

  @media (width < 1366px) {
    .offer-popup__frame {
      padding: 40px 28px 32px;
    }

    .offer-popup__heading {
      font-size: 28px;
    }

    .offer-popup__visual {
      --offer-popup-media-height: 300px;
      --offer-popup-blob-size: 227px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .offer-popup {
      width: min(calc(100% - 48px), 720px);
      max-width: 720px;
    }

    .offer-popup__frame {
      padding: 36px 32px 32px;
    }

    .offer-popup__layout {
      gap: 28px;
    }

    .offer-popup__visual {
      --offer-popup-media-height: 258px;
      --offer-popup-blob-size: 196px;
    }

    .offer-popup__copy {
      max-width: none;
    }

    .offer-popup__heading {
      font-size: 26px;
    }
  }

  @media (width < 750px) {
    .offer-popup__frame {
      padding: 48px 20px 24px;
    }

    .offer-popup__layout {
      flex-direction: column;
      gap: 24px;
    }

    .offer-popup__visual {
      --offer-popup-media-height: 240px;
      --offer-popup-blob-size: 182px;
    }

    .offer-popup__copy {
      gap: 24px;
      max-width: none;
    }

    .offer-popup__heading {
      font-size: 24px;
    }

    .offer-popup__body {
      font-size: 16px;
    }

    .offer-popup__submit {
      font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .offer-popup,
    .offer-popup::backdrop {
      transition: none;
    }
  }
/* END_SECTION:offer-popup */

/* START_SECTION:page-title (INDEX:24) */
/**
   * The stickers hang past the heading box on purpose, so the clip belongs on
   * the section wrapper — that box spans the viewport, while `.page-title` is
   * only as wide as the content column. Same reasoning as `sections/hero.liquid`.
   */
  .shopify-section:has(> .page-title) {
    overflow-x: clip;
  }

  /**
   * The band sits on the page background rather than painting one, so the
   * spacing settings are margins — the same choice `sections/hero.liquid` makes,
   * and what lets two adjacent bands collapse predictably.
   */
  .page-title {
    display: flex;
    justify-content: center;
    margin-top: var(--page-title-top-spacing);
    margin-bottom: var(--page-title-bottom-spacing);
  }

  .page-title__heading {
    position: relative;
    width: var(--page-title-content-width);
    max-width: 100%;
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: var(--page-title-heading-font-size);
    font-style: normal;
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
  }

  .page-title__highlight {
    color: var(--color-secondary);
  }

  /**
   * Desktop already wraps the blog headline after "Raise" and after "and"
   * from the 110px / 1354px measure. Tablet uses a smaller size, so those
   * two breaks are restored only on the blog placement.
   */
  .page-title__break {
    display: none;
  }

  /**
   * The stickers are positioned against the heading box and offset as a
   * percentage of their own size, so changing `decoration_size` moves them
   * along with it.
   */
  .page-title__decoration {
    position: absolute;
    width: var(--page-title-decoration-size);
    height: var(--page-title-decoration-size);
  }

  .page-title__decoration--left {
    top: 0;
    left: 0;
    transform: translate(var(--page-title-decoration-left-x), var(--page-title-decoration-left-y))
      rotate(var(--page-title-decoration-rotation));
  }

  .page-title__decoration--right {
    right: 0;
    bottom: 0;
    transform: translate(var(--page-title-decoration-right-x), var(--page-title-decoration-right-y))
      rotate(var(--page-title-decoration-rotation));
  }

  /**
   * Contact (corners) and blog (sides) both shove the HAP disc past the
   * heading box. On a smaller desktop the 1354px column leaves almost no
   * gutter, so `overflow-x: clip` on the section cuts the disc. Cap the
   * horizontal shift at the real side space; leave tablet/mobile alone.
   */
  @media (width >= 1366px) {
    .page-title__decoration--right {
      transform: translate(
          min(
            var(--page-title-decoration-right-x),
            calc(
              (max((100vw - var(--page-title-content-width)) / 2, 0px) - 8px) /
                var(--page-title-decoration-size) * 100%
            )
          ),
          var(--page-title-decoration-right-y)
        )
        rotate(var(--page-title-decoration-rotation));
    }
  }

  /**
   * How far the stickers tuck into the heading box depends on how many lines the
   * headline takes, so each page picks a placement rather than a size.
   *
   * Corners is the one-line headline on the contact page: the Figma centres are
   * smiley at 356.6, 280.65 and HAP at 1538.6, 446.65 against a 1355 x 121
   * heading box at 187, 304.
   */
  .page-title--decorations-corners {
    --page-title-decoration-left-x: 24%;
    --page-title-decoration-left-y: -64%;
    --page-title-decoration-right-x: 48%;
    --page-title-decoration-right-y: 63%;
  }

  /**
   * Sides is the three-line headline on the blog page, where the stickers hug
   * the left and right edges instead — smiley at 229.6, 285.65 and HAP at
   * 1594.6, 507.65 against a 1355 x 414 heading box at 187, 203.
   */
  .page-title--decorations-sides {
    --page-title-decoration-left-x: -24%;
    --page-title-decoration-left-y: -13%;
    --page-title-decoration-right-x: 82%;
    --page-title-decoration-right-y: 2%;
  }

  /**
   * The theme editor writes the desktop settings into the `style` attribute, and
   * an inline declaration outranks any stylesheet rule — so the 390 layout
   * overrides the *used* properties rather than the variables behind them.
   */
  @media (width < 1366px) {
    /**
     * At 390 the heading fills the column, so the stickers clear it vertically
     * instead of tucking into its corners the way they do at 1728 — the same
     * placement whichever option the section is set to. Both stay inside the
     * viewport, so neither can create a horizontal scrollbar.
     */
    .page-title {
      --page-title-decoration-left-x: 15%;
      --page-title-decoration-left-y: -105%;
      --page-title-decoration-right-x: -15%;
      --page-title-decoration-right-y: 105%;

      margin-top: var(--page-title-top-spacing-mobile);
      margin-bottom: var(--page-title-bottom-spacing-mobile);
    }

    /**
     * Sides keeps hugging the edges at 390: the smiley clears the headline to
     * the left and the HAP sits just past its bottom-right, 35px clear of the
     * band below — the Figma positions are 11, 136 and 313, 425 against a
     * 358 x 211 heading box at 16, 210.
     */
    .page-title--decorations-sides {
      --page-title-decoration-left-x: 3%;
      --page-title-decoration-left-y: -112%;
      --page-title-decoration-right-x: 9%;
      --page-title-decoration-right-y: 118%;
    }

    .page-title__heading {
      width: 100%;
      font-size: var(--display-1-size);
    }

    .page-title__decoration,
    .page-title__decoration .badge {
      width: 60px;
      height: 60px;
    }
  }

  /**
   * Blog listing only (`--decorations-sides`). Contact keeps the 390 corner
   * layout until 1366. Stickers sit beside the headline again, at a size that
   * still fits the tablet gutter.
   */
  @media (width >= 750px) and (width < 1366px) {
    .page-title--decorations-sides {
      margin-top: 80px;
      margin-bottom: 100px;
    }

    .page-title--decorations-sides .page-title__heading {
      width: min(720px, calc(100% - var(--page-margin) * 2));
      font-size: clamp(36px, 4.8vw, 48px);
    }

    .page-title--decorations-sides .page-title__break {
      display: block;
    }

    .page-title--decorations-sides .page-title__decoration,
    .page-title--decorations-sides .page-title__decoration .badge {
      width: 100px;
      height: 100px;
    }

    /**
     * Same far-edge pinning as the home hero: from the centred heading, step
     * out to the page margin so the discs sit at the left and right ends.
     */
    .page-title--decorations-sides .page-title__decoration--left {
      left: calc(50% - 50vw + var(--page-margin));
      transform: translateY(-32px) rotate(var(--page-title-decoration-rotation));
    }

    .page-title--decorations-sides .page-title__decoration--right {
      top: auto;
      right: calc(50% - 50vw + var(--page-margin));
      bottom: 0;
      transform: translateY(20px) rotate(var(--page-title-decoration-rotation));
    }

    /**
     * Contact hero (`--decorations-corners`): same far-edge stickers as blog
     * and home, with the HAP disc a little below the one-line heading.
     */
    .page-title--decorations-corners {
      margin-top: 80px;
      margin-bottom: 80px;
    }

    .page-title--decorations-corners .page-title__heading {
      width: min(720px, calc(100% - var(--page-margin) * 2));
      font-size: clamp(40px, 5.5vw, 56px);
    }

    .page-title--decorations-corners .page-title__decoration,
    .page-title--decorations-corners .page-title__decoration .badge {
      width: 100px;
      height: 100px;
    }

    .page-title--decorations-corners .page-title__decoration--left {
      left: calc(50% - 50vw + var(--page-margin));
      transform: translateY(-52px) rotate(var(--page-title-decoration-rotation));
    }

    .page-title--decorations-corners .page-title__decoration--right {
      top: auto;
      right: calc(50% - 50vw + var(--page-margin));
      bottom: 0;
      transform: translateY(36px) rotate(var(--page-title-decoration-rotation));
    }
  }
/* END_SECTION:page-title */

/* START_SECTION:partner-hero (INDEX:26) */
/**
   * The photo hangs over the mint band that follows it, the same way
   * `about-intro` hangs over the dark band on the About page: the negative
   * margin pulls the next section up by the overlap while the photo keeps
   * painting past it, and `z-index` keeps it on top of a section that comes
   * later in the document.
   */
  .partner-hero {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    overflow-x: clip;
    padding-top: var(--partner-hero-top-spacing);
    background-color: var(--color-background);
  }

  /**
   * `position: relative` here rather than on the section, so the stickers are
   * placed against the 1355px text measure the design pins them to and not
   * against the viewport.
   */
  .partner-hero__inner {
    position: relative;
    display: grid;
    justify-items: center;
    width: min(1355px, 100% - var(--page-margin) * 2);
    text-align: center;
  }

  /**
   * Display 2 in everything but the size, which is a setting: the design steps
   * this heading 80 → 48px between the two frames, where the token steps
   * 80 → 40px. The mobile query below picks the Display 1 step instead.
   */
  .partner-hero__heading {
    max-width: var(--partner-hero-heading-width, 710px);
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: var(--partner-hero-heading-size);
    font-weight: 400;
    line-height: var(--display-2-leading);
    letter-spacing: var(--display-2-tracking);
    text-transform: uppercase;
  }

  .partner-hero__highlight {
    color: var(--color-secondary);
  }

  /**
   * Desktop wraps this headline after "Samen meer" because the type is 80px in
   * a 710px measure. Tablet uses a smaller size in the same measure, so the
   * break is restored only there — mobile keeps a single wrap from the 390 type.
   */
  .partner-hero__break {
    display: none;
  }

  .partner-hero__body {
    max-width: var(--partner-hero-body-width, 710px);
    margin-top: var(--partner-hero-heading-gap);
    color: var(--color-body);
  }

  .partner-hero__body > :first-child {
    margin-top: 0;
  }

  .partner-hero__body > :last-child {
    margin-bottom: 0;
  }

  .partner-hero__actions {
    margin-top: var(--partner-hero-actions-gap);
  }

  /**
   * The two stickers keep their corners at both breakpoints — smiley above the
   * heading on the left, HAP disc beside the call to action on the right — so
   * only the offsets are re-tuned at 390, never which glyph sits where.
   */
  .partner-hero__badge {
    position: absolute;
  }

  .partner-hero__badge--smiley {
    top: -56px;
    left: -21px;
  }

  /**
   * Figma hangs the HAP disc 125px into the gutter. On a large desktop that
   * gutter is wider than the disc, but just above 1366 the text column already
   * sits on `--page-margin`, so the overhang would be sliced by `overflow-x:
   * clip`. Cap it at the real gutter, the same way `collection` does.
   */
  .partner-hero__badge--hap {
    top: 234px;
    right: calc(-1 * min(125px, max(0px, max((100vw - 1355px) / 2, var(--page-margin)) - 8px)));
  }

  .partner-hero__media {
    width: min(1590px, 100% - var(--page-margin) * 2);
    margin-top: var(--partner-hero-media-gap);
    margin-bottom: calc(var(--partner-hero-overlap) * -1);
  }

  @media (width < 1366px) {
    .partner-hero {
      /* The spacing settings are written inline as desktop values. */
      padding-top: 116px;
    }

    .partner-hero__heading {
      font-size: var(--display-1-size);
      line-height: 1.1;
      letter-spacing: 0;
    }

    /**
     * The 390 mock sets this paragraph at 16px where the Body L step is 20px —
     * a design value with no token behind it.
     */
    .partner-hero__body {
      margin-top: 24px;
      font-size: 16px;
      line-height: 1.48;
    }

    .partner-hero__actions {
      margin-top: 32px;
    }

    .partner-hero__badge--smiley {
      top: -75px;
      left: -4px;
    }

    .partner-hero__badge--hap {
      top: 299px;
      right: -24px;
    }

    /**
     * `badge` sets `--badge-size` in an inline style attribute, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead of the variable.
     */
    .partner-hero__badge .badge {
      width: 73px;
      height: 73px;
    }

    .partner-hero__media {
      margin-top: 136px;
      margin-bottom: -83px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .partner-hero {
      padding-top: 80px;
    }

    .partner-hero__heading {
      font-size: clamp(48px, 6vw, 64px);
      line-height: 1.1;
    }

    .partner-hero__break {
      display: block;
    }

    .partner-hero__body {
      max-width: 640px;
      margin-top: 28px;
      font-size: 18px;
      line-height: 1.5;
    }

    .partner-hero__actions {
      margin-top: 36px;
    }

    .partner-hero__actions .button--medium,
    .partner-hero__actions .button--primary.button--medium,
    .partner-hero__actions .button--secondary.button--medium {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }

    .partner-hero__badge .badge {
      width: 100px;
      height: 100px;
    }

    .partner-hero__badge--smiley {
      top: -40px;
      left: 0;
    }

    .partner-hero__badge--hap {
      top: auto;
      right: 0;
      bottom: -12px;
    }

    .partner-hero__media {
      margin-top: 72px;
      margin-bottom: -140px;
    }
  }
/* END_SECTION:partner-hero */

/* START_SECTION:password (INDEX:27) */
.password-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem 1rem;
    box-sizing: border-box;
  }

  .password-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }

  .password-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--color-primary, #093322);
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .password-message {
    font-size: 1.125rem;
    color: var(--color-primary, #093322);
    margin-bottom: 2rem;
  }

  .password-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
  }

  .password-field-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
  }

  .password-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary, #093322);
  }

  .password-input {
    width: 100%;
    max-width: 320px;
    padding: 12px 20px;
    font-size: 1rem;
    border: 1px solid var(--color-primary, #093322);
    border-radius: 9999px;
    outline: none;
    box-sizing: border-box;
    text-align: center;
    background-color: transparent;
  }

  .password-input:focus {
    border-width: 2px;
  }

  .password-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 48px;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--color-primary, #093322);
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .password-button:hover {
    opacity: 0.9;
  }

  .password-errors {
    color: #d32f2f;
    margin-bottom: 1rem;
  }
/* END_SECTION:password */

/* START_SECTION:policy-details (INDEX:28) */
.shopify-section:has(> .article) {
      overflow-x: clip;
    }

    .article__inner {
      width: min(1568px, 100% - var(--page-margin) * 2);
      margin-inline: auto;
      padding-top: var(--article-top-spacing);
      padding-bottom: var(--article-bottom-spacing);
    }

    .article__hero {
      position: relative;
    }

    .article__title {
      max-width: var(--article-title-measure, 1346px);
      margin: 0;
      color: var(--color-primary);
    }

    .article__badge {
      position: absolute;
      top: var(--article-badge-top, 56px);
      right: var(--article-badge-right, -16px);
      pointer-events: none;
    }

    .article__layout {
      display: grid;
      grid-template-columns: var(--article-layout-columns, 433px 1fr);
      align-items: start;
      margin-top: var(--article-layout-top, 116px);
      column-gap: var(--article-layout-gap, 99px);
    }

    .article__layout--full {
      --article-layout-columns: 1fr;
    }

    .article-toc {
      position: sticky;
      top: calc(var(--header-height) + 40px);
      padding: 32px;
      border-radius: 12px;
      background-color: var(--color-secondary);
    }

    .article-toc__heading {
      display: inline-block;
      margin: 0;
      padding-bottom: 2px;
      border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
      color: var(--color-primary);
      font-family: var(--font-secondary--family);
      font-size: 24px;
      line-height: 1.32;
      letter-spacing: 0.125em;
      text-transform: uppercase;
    }

    .article-toc__heading + .article-toc__list {
      margin-top: 32px;
    }

    .article-toc__list {
      margin: 0;
      padding: 0;
    }

    .article-toc__item {
      color: var(--color-body);
      font-family: var(--font-primary--family);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.4;
      list-style: none;
    }

    .article-toc__item + .article-toc__item {
      margin-top: 16px;
    }

    .article-toc__link {
      color: inherit;
      text-decoration: none;
    }

    .article-toc__item:hover {
      color: var(--color-primary);
    }

    .article-toc__item--active {
      margin-inline-start: 24px;
      color: var(--color-primary);
      font-weight: 600;
      list-style: disc;
    }

    .article-toc-bar {
      position: relative;
      z-index: 5;
      display: none;
      background-color: var(--color-secondary);
    }

    .article-toc-bar__summary {
      padding: 16px var(--page-margin);
      cursor: pointer;
      list-style: none;
    }

    .article-toc-bar__summary::-webkit-details-marker {
      display: none;
    }

    .article-toc-bar__row {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
    }

    .article-toc-bar__label {
      color: var(--color-primary);
      font-family: var(--font-secondary--family);
      font-size: 16px;
      line-height: 1.24;
      letter-spacing: 0.125em;
      text-transform: uppercase;
    }

    .article-toc-bar__icon {
      display: inline-flex;
      color: var(--color-primary);
      transition: rotate 0.2s ease;
    }

    .article-toc-bar__panel {
      position: absolute;
      top: 100%;
      right: 0;
      left: 0;
      padding: 24px var(--page-margin);
      background-color: var(--color-secondary);
    }

    .article__body :is(h1, h2, h3, h4, h5, h6) {
      scroll-margin-top: calc(var(--header-height) + 40px);
    }

    .article__body h2 {
      margin: var(--article-section-gap, 72px) 0 0;
      color: var(--color-primary);
      font-size: var(--display-4-size);
      line-height: var(--display-4-leading);
      letter-spacing: var(--display-4-tracking);
    }

    .article__body h3 {
      margin: 40px 0 0;
      color: var(--color-primary);
      font-size: var(--display-5-size);
      line-height: var(--display-5-leading);
      letter-spacing: var(--display-5-tracking);
    }

    .article__body p {
      margin: 24px 0 0;
      color: var(--color-body);
      font-family: var(--font-primary--family);
      font-size: 20px;
      line-height: 1.6;
    }

    .article__body :is(h2, h3) + p {
      margin-top: 20px;
    }

    .article__body :is(ul, ol) {
      margin: 24px 0 0;
      padding-inline-start: 24px;
      color: var(--color-body);
      font-family: var(--font-primary--family);
      font-size: 20px;
      line-height: 1.6;
    }

    @media (width < 1366px) {
      .article {
        --article-title-measure: none;
        --article-meta-top: 40px;
        --article-image-top: 60px;
        --article-image-aspect: 358 / 300;
        --article-image-radius: var(--radius-m);
        --article-layout-columns: 1fr;
        --article-layout-top: 64px;
        --article-meta-label-size: 18px;
        --article-meta-value-size: 16px;
        --article-meta-value-leading: 1.5;
        --article-section-gap: 60px;
        --article-list-leading: 1.5;
      }

      .article__inner {
        padding-top: 56px;
        padding-bottom: 60px;
      }

      .article__breadcrumbs,
      .article-toc {
        display: none;
      }

      .article-toc-bar {
        display: block;
      }

      .article__title {
        padding-inline-end: 56px;
      }

      .article__badge {
        --article-badge-top: 59px;
        --article-badge-right: -17px;
      }

      .article__badge .badge {
        width: 74px;
        height: 74px;
      }

      .article__body :is(h2, h3) {
        scroll-margin-top: calc(var(--header-height) + 24px);
      }
    }
/* END_SECTION:policy-details */

/* START_SECTION:policy-text (INDEX:29) */
.shopify-section:has(> .policy-text) {
    overflow-x: clip;
  }

  .policy-text__header {
    margin-top: 160px;
    margin-bottom: 80px;
    text-align: center;
    color: var(--color-primary);
  }

  .policy-text {
    padding-bottom: 140px;
  }

  .policy-text__title {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 1.1;
    font-family: var(--font-secondary--family);
    font-weight: 400;
    text-transform: uppercase;
    font-style: normal;
  }

  .policy-text__title-text {
    display: block;
    padding-inline: 20px;
  }

  .policy-text__decoration {
    position: absolute;
    width: 166px;
    height: 166px;
    transform: scale(0.75);
    transform-origin: center;
    pointer-events: none;
  }

  .policy-text__decoration--left {
    left: -160px;
    top: -80px;
  }

  .policy-text__decoration--right {
    right: -160px;
    bottom: -80px;
  }

  .policy-text__body {
    width: min(1010px, 100% - var(--page-margin) * 2);
    margin: 0 auto;
    font-size: 20px;
    line-height: 1.6;
  }

  .policy-text__body p,
  .policy-text__body li {
    font-size: inherit;
  }

  .policy-text__body p {
    margin: 1.2em 0;
  }

  .policy-text__body a {
    color: inherit;
    text-decoration: underline;
  }

  @media (width < 1366px) {
    .policy-text__header {
      margin-top: 116px;
      margin-bottom: 64px;
    }

    .policy-text__decoration {
      width: 112px;
      height: 112px;
      transform: scale(0.45);
    }

    .policy-text__decoration--left {
      left: -86px;
      top: -95px;
    }

    .policy-text__decoration--right {
      right: -86px;
      bottom: -95px;
    }

    .policy-text {
      padding-bottom: 80px;
    }
  }
/* END_SECTION:policy-text */

/* START_SECTION:product-details (INDEX:30) */
.details {
    /* Shared with `disclosure-toggle` so the glyph and the panel land together. */
    --details-duration: 420ms;
    --details-ease: cubic-bezier(0.32, 0.72, 0, 1);

    padding-top: var(--details-top-spacing);
    padding-bottom: var(--details-bottom-spacing);
  }

  .details__inner {
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /* 680 + 176 + 712 fills the 1568 measure exactly. */
  .details__grid {
    display: grid;
    grid-template-columns: var(--details-grid-columns, 680px minmax(0, 712px));
    column-gap: var(--details-columns-gap, 176px);
    row-gap: var(--details-rows-gap, 0);
    align-items: start;
  }

  /**
   * ---------------------------------------------------------------------------
   * Tabs and accordion
   * ---------------------------------------------------------------------------
   *
   * The panels are `<details>` at both widths. A closed one whose `<summary>` is
   * `display: none` takes no height, so a stack of four with one open renders
   * exactly the tab layout: bar, then the single open body.
   *
   * Every tabs-only rule keys off `[data-details-mode='tabs']`, which the
   * script sets from the same 1366px query the rest of this file uses. That
   * makes the swap a single source of truth — and it means that with
   * JavaScript unavailable no mode is ever set, so both widths fall through to
   * a working native accordion rather than a tab strip that does nothing.
   */
  .details__tabbar {
    display: none;
    gap: 40px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
  }

  [data-details-mode='tabs'] .details__tabbar {
    display: flex;
  }

  .details__tab {
    position: relative;
    padding: 0 0 12px;
    border: 0;
    background: none;
    font-family: var(--font-secondary--family);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--details-tab-inactive, #4f6d61);
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .details__tab[aria-selected='true'] {
    color: var(--color-primary);
  }

  /* Matches the focus ring `critical.css` puts on form controls. */
  .details__tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
  }

  /**
   * The underline is the width of its own tab, not the 116px Figma happens to
   * render for "Description" — hard-coding that would break the moment a
   * merchant renames a tab. `-1px` sits it on the container's hairline.
   */
  .details__tab[aria-selected='true']::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 1px;
    background-color: var(--color-primary);
  }

  .details__disclosure {
    overflow: hidden;
  }

  .details__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 24px;
    list-style: none;
    cursor: pointer;
  }

  .details__summary::-webkit-details-marker {
    display: none;
  }

  .details__title {
    font-family: var(--font-secondary--family);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  /* Height is animated by the script; everything else is inert. */
  .details__panel {
    overflow: hidden;
  }

  /**
   * The body sits at 70% of Primary. That is done with a translucent colour
   * rather than `opacity`, because a panel can contain rows whose icon discs
   * and headings are at full strength — `opacity` would dim those too, and
   * nothing inside can climb back out of it.
   */
  .details__panel-inner {
    padding-bottom: var(--details-panel-bottom, 0);
    color: var(--color-body);
  }

  .details__prose > :first-child {
    margin-top: 0;
  }

  .details__prose > :last-child {
    margin-bottom: 0;
  }

  /**
   * ---------------------------------------------------------------------------
   * Rows (Figma: 63:16948, the Compound panel)
   * ---------------------------------------------------------------------------
   */
  .details__prose + .details__rows {
    margin-top: 35px;
  }

  .details__row:not(:last-child) {
    padding-bottom: 32px;
    margin-bottom: 35px;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
  }

  .details__row-head {
    display: flex;
    align-items: center;
    gap: var(--details-row-gap, 20px);
  }

  .details__row-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--details-row-icon-size, 40px);
    height: var(--details-row-icon-size, 40px);
    border-radius: 50%;
    background-color: var(--color-secondary);
    color: var(--color-primary);
  }

  .details__row-icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .details__row-title {
    margin: 0;
    font-family: var(--font-secondary--family);
    font-size: var(--details-row-title-size, 18px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .details__row-body {
    margin-top: 16px;
  }

  .details__row-body > :first-child {
    margin-top: 0;
  }

  .details__row-body > :last-child {
    margin-bottom: 0;
  }

  .details__rule {
    height: 1px;
    background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  }

  /**
   * In tabs mode the summaries and the per-row rules are what the bar replaces,
   * so they go; the panel picks up the 48px the design leaves under the bar.
   */
  [data-details-mode='tabs'] .details__summary,
  [data-details-mode='tabs'] .details__rule {
    display: none;
  }

  [data-details-mode='tabs'] .details__panel-inner {
    padding-top: 48px;
  }

  /**
   * ---------------------------------------------------------------------------
   * Expert tip
   * ---------------------------------------------------------------------------
   */
  .details__expert {
    position: relative;
    padding: var(--details-card-padding, 60px);
    border-radius: var(--details-card-radius);
    background-color: #eedbfe;
  }

  /**
   * Centred on its Figma position and allowed to overhang the card, which is
   * why the card itself must not clip its overflow.
   */
  .details__expert-badge {
    position: absolute;
    top: var(--details-badge-top, 5px);
    right: var(--details-badge-right, 50px);
    translate: 50% -50%;
  }

  .details__expert-heading {
    margin: 0;
    color: var(--color-primary);
  }

  .details__expert-body {
    margin-top: var(--details-expert-gap, 24px);
    opacity: 0.7;
    color: var(--color-primary);
  }

  .details__expert-body > :first-child {
    margin-top: 0;
  }

  .details__expert-body > :last-child {
    margin-bottom: 0;
  }

  .details__expert-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
  }

  .details__expert-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
  }

  .details__expert-name {
    margin: 0;
    font-weight: 700;
    color: var(--color-primary);
  }

  .details__expert-role {
    margin: 0;
    opacity: 0.7;
    color: var(--color-primary);
  }

  /**
   * At 390 the columns stack and the expert card moves above the accordion,
   * which is a reorder rather than a second copy of the markup.
   */
  @media (width < 1366px) {
    .details {
      --details-grid-columns: minmax(0, 1fr);
      --details-columns-gap: 0;
      --details-rows-gap: 62px;
      --details-card-padding: 48px 32px 32px;
      --details-card-radius: 32px;
      --details-badge-top: 0;
      --details-badge-right: 0;
      --details-expert-gap: 20px;
      --details-panel-bottom: 24px;
      --details-row-gap: 16px;
      --details-row-icon-size: 36px;
      --details-row-title-size: 16px;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .details__expert {
      order: -1;
      /* Inline `--details-card-radius` is the desktop setting; Figma 390 is 32px. */
      border-radius: 32px;
    }

    /**
     * Figma 41:7942 sits the quote on the card’s top-right, hanging off the
     * top only. The shared `translate: 50% -50%` also pushed it out the right,
     * which ate the page margin and made the card look off-centre.
     */
    .details__expert-badge {
      translate: 0 -50%;
    }

    /**
     * `badge` writes its size into an inline custom property, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead.
     */
    .details__expert-badge .badge {
      width: 73px;
      height: 73px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .details {
      --details-grid-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      --details-columns-gap: 40px;
      --details-rows-gap: 0;
      --details-card-padding: 48px 40px 40px;
      --details-expert-gap: 24px;
      --details-panel-bottom: 28px;
      --details-row-gap: 18px;
      --details-row-icon-size: 40px;
      --details-row-title-size: 18px;
      --details-badge-top: 0;
      --details-badge-right: 16px;

      padding-top: 96px;
      padding-bottom: 96px;
    }

    .details__expert {
      position: sticky;
      top: 24px;
      order: 0;
      border-radius: 36px;
    }

    .details__expert-heading {
      font-size: clamp(24px, 3vw, 28px);
    }

    .details__expert-body,
    .details__panel-inner {
      font-size: 18px;
    }

    .details__title {
      font-size: 22px;
    }

    .details .disclosure-toggle {
      width: 56px;
      height: 56px;
    }

    .details__expert-badge .badge {
      width: 100px;
      height: 100px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .details__tab {
      transition: none;
    }
  }
/* END_SECTION:product-details */

/* START_SECTION:product-feature (INDEX:31) */
/**
   * The band's own padding has to clear the photo that the preceding hero
   * hangs over it — the hero pulls this section up by its overlap, so the top
   * spacing here is measured from the band's edge, not from the photo.
   */
  /**
   * Rounded at the top only: the band runs on into whatever follows it, and
   * the hero above hangs its photo over the corners rather than meeting them.
   */
  .product-feature {
    padding-top: var(--product-feature-top-spacing);
    padding-bottom: var(--product-feature-bottom-spacing);
    border-radius: var(--product-feature-corner-radius) var(--product-feature-corner-radius) 0 0;
    background-color: var(--color-secondary);
  }

  .product-feature__inner {
    display: grid;
    grid-template-columns: var(--product-feature-columns, 771fr 673fr);
    gap: var(--product-feature-gap, 125px);
    align-items: center;
    width: min(1569px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /**
   * Display 2 in everything but the size, which is a setting: the design steps
   * this heading 80 → 48px between the two frames, where the token steps
   * 80 → 40px. The mobile query below picks the Display 1 step instead.
   */
  .product-feature__heading {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: var(--product-feature-heading-size);
    font-weight: 400;
    line-height: var(--display-2-leading);
    letter-spacing: var(--display-2-tracking);
    text-transform: uppercase;
  }

  .product-feature__body {
    margin-top: var(--product-feature-heading-gap);
    color: var(--color-body);
  }

  .product-feature__body > :first-child {
    margin-top: 0;
  }

  .product-feature__body > :last-child {
    margin-bottom: 0;
  }

  .product-feature__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .product-feature__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--product-feature-buttons-gap, 20px);
    margin-top: var(--product-feature-actions-gap);
  }

  /**
   * The product visual is the same three-layer box as `hero.liquid`, at the
   * same proportions — the Figma frames for the two pages carry identical
   * percentages, so the only difference between 1728 and 390 is the box width.
   * Kept in step with `hero.liquid`'s `.hero__product` rules.
   */
  .product-feature__product {
    position: relative;
    aspect-ratio: 673 / 738;
    width: var(--product-feature-product-width, 673px);
    max-width: 100%;
    margin-inline: auto;
  }

  .product-feature__blob {
    position: absolute;
    top: 13.01%;
    left: 58.47%;
    width: 83.06%;
    height: 75.75%;
    color: var(--color-primary);
    translate: -50% 0;
  }

  .product-feature__image {
    position: absolute;
    inset: 0 auto 0 35.36%;
    width: 46.21%;
  }

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

  .product-feature__badge {
    position: absolute;
    top: 70.18%;
    left: 3.57%;
  }

  @media (width < 1366px) {
    .product-feature {
      --product-feature-columns: 1fr;
      --product-feature-gap: 60px;
      --product-feature-product-width: 352px;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 158px;
      padding-bottom: 98px;

      /**
       * The desktop radius is written into the `style` attribute, which no
       * stylesheet rule can outrank, so 390 sets the used property from its
       * own setting rather than redeclaring the variable.
       */
      border-radius: var(--product-feature-corner-radius-mobile)
        var(--product-feature-corner-radius-mobile) 0 0;
    }

    .product-feature__heading {
      font-size: var(--display-1-size);
      line-height: 1.1;
      letter-spacing: 0;
    }

    .product-feature__body {
      margin-top: 24px;
    }

    /**
     * The 390 mock keeps both buttons on one row, which the atom's 24px mobile
     * padding cannot do inside the measure — so the row tightens to the mock's
     * own 21px padding and 12px gap rather than wrapping.
     */
    .product-feature__actions {
      --product-feature-buttons-gap: 12px;

      margin-top: 40px;
    }

    /**
     * `badge` sets `--badge-size` in an inline style attribute, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead of the variable.
     */
    .product-feature__badge .badge {
      width: 106px;
      height: 106px;
    }

    /**
     * Desktop artwork parks the blob/tube centre at ~58.5%. On mobile that
     * reads as a right lean, so both layers are recentred on the mid-line.
     */
    .product-feature__blob {
      left: 50%;
    }

    .product-feature__image {
      left: 26.9%;
    }

    .product-feature__badge {
      left: -4%;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .product-feature {
      --product-feature-columns: 1fr 1fr;
      --product-feature-gap: 40px;
      --product-feature-product-width: min(420px, 100%);

      padding-top: 280px;
      padding-bottom: 100px;
      border-radius: 36px 36px 0 0;
    }

    .product-feature__heading {
      font-size: clamp(36px, 4.5vw, 48px);
    }

    .product-feature__body {
      margin-top: 24px;
      font-size: 18px;
    }

    .product-feature__actions {
      --product-feature-buttons-gap: 16px;

      margin-top: 36px;
    }

    .product-feature__actions .button--medium,
    .product-feature__actions .button--primary.button--medium,
    .product-feature__actions .button--secondary.button--medium {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }

    .product-feature__badge .badge {
      width: 140px;
      height: 140px;
    }

    .product-feature__blob {
      left: 58.47%;
    }

    .product-feature__image {
      left: 35.36%;
    }

    .product-feature__badge {
      left: 3.57%;
    }
  }
/* END_SECTION:product-feature */

/* START_SECTION:product-story (INDEX:32) */
/**
   * The section below this one is pulled up under it so this panel's rounded
   * bottom corners land on that band rather than on the page background — on
   * the product page that is `testimonials`, with its `margin-top: -56px`.
   * That band is positioned, so without a positioned layer of its own this
   * panel would lose the paint order and have its corners covered instead.
   * Same arrangement, and same reason, as `sections/how-it-works.liquid`.
   */
  .story {
    position: relative;
    z-index: 1;

    padding-top: var(--story-top-spacing);
    padding-bottom: var(--story-bottom-spacing);
    border-radius: var(--story-corner-radius);
    background-color: var(--color-primary);
  }

  .story__inner {
    width: min(1562px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /**
   * The heading is authored with a newline so the merchant controls where it
   * breaks, the same way `how-it-works` does — the two-line balance is part of
   * the composition rather than a consequence of the measure.
   */
  .story__heading {
    max-width: var(--story-heading-width, 1355px);
    margin: 0 auto;
    text-align: center;
    white-space: pre-line;
    color: var(--color-neutral);
  }

  .story__media {
    margin-top: var(--story-media-gap, 174px);
  }

  .story__image {
    display: block;
    width: 100%;
    aspect-ratio: var(--story-image-aspect, 1562 / 593);
    border-radius: var(--story-image-radius, 56px);
    object-fit: cover;
  }

  .story__closing {
    position: relative;
    margin-top: var(--story-closing-gap, 160px);
  }

  .story__note {
    width: var(--story-note-width, 771px);
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  /* Broken by the merchant like `__heading`: the two lines are the composition. */
  .story__subheading {
    margin: 0;
    white-space: pre-line;
    color: var(--color-accent);
  }

  .story__body {
    margin-top: var(--story-body-gap, 40px);
    color: color-mix(in srgb, var(--color-neutral) 70%, transparent);
  }

  .story__body > :first-child {
    margin-top: 0;
  }

  .story__body > :last-child {
    margin-bottom: 0;
  }

  /**
   * Centred on its Figma position rather than pinned by an edge: at 390 the
   * badge deliberately hangs off the left of the measure, so an edge offset
   * would have to flip sign between the breakpoints.
   */
  .story__badge {
    position: absolute;
    top: var(--story-badge-top, 115px);
    left: var(--story-badge-left, 13.16%);
    translate: -50% -50%;
  }

  @media (width < 1366px) {
    .story {
      --story-heading-width: 100%;
      --story-media-gap: 48px;
      --story-image-aspect: 358 / 291;
      --story-image-radius: 24px;
      --story-closing-gap: 48px;
      --story-note-width: 100%;
      --story-body-gap: 24px;
      --story-badge-top: -54px;
      --story-badge-left: 5.79%;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 64px;
      padding-bottom: 64px;

      /**
       * The radius setting is written inline as the 1728 value too, and an
       * inline custom property cannot be outranked by a stylesheet rule — so
       * 390 overrides the used property rather than `--story-corner-radius`.
       */
      border-radius: 32px;
    }

    /**
     * `badge` writes its size into an inline custom property, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead.
     */
    .story__badge .badge {
      width: 73px;
      height: 73px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .story {
      --story-heading-width: 100%;
      --story-media-gap: 64px;
      --story-image-aspect: 16 / 7;
      --story-image-radius: 36px;
      --story-closing-gap: 64px;
      --story-note-width: min(640px, 100%);
      --story-body-gap: 28px;
      --story-badge-top: -20px;
      --story-badge-left: 8%;

      padding-top: 100px;
      padding-bottom: 88px;
      border-radius: 36px;
    }

    .story__heading,
    .story__subheading {
      font-size: clamp(40px, 5vw, 56px);
    }

    .story__body {
      font-size: 18px;
    }

    .story__badge .badge {
      width: 140px;
      height: 140px;
    }
  }
/* END_SECTION:product-story */

/* START_SECTION:product (INDEX:33) */
.product {
    padding-top: var(--product-top-spacing);
    padding-bottom: var(--product-bottom-spacing);
  }

  .product__inner {
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /**
   * The crumb trail's size is `--breadcrumbs-size`, the hook the snippet
   * exposes; the section writes it from `breadcrumb_font_size` so a merchant
   * can move it off the design's 18px. It is set on this section only — the
   * article page renders the same snippet and keeps the Body M default.
   */
  .product__breadcrumbs {
    margin-bottom: var(--product-breadcrumb-gap, 60px);
  }

  /**
   * Default Figma 93:14291 is 559 + 237 + 712 = 1508, inset 60px from the 1568
   * measure. The media column is `max-content` so a wider photo can grow past
   * 559 without changing the 738px height; leftover space sits between the
   * columns the way the 237px gutter does on the single-tube frame.
   */
  .product__grid {
    display: grid;
    margin-left: var(--product-grid-inset, 60px);
    grid-template-columns: var(--product-grid-columns, minmax(0, max-content) minmax(0, 712px));
    justify-content: space-between;
    column-gap: var(--product-columns-gap, 40px);
    row-gap: var(--product-rows-gap, 0);
    align-items: center;
  }

  /**
   * Height is the Figma frame (738). Width is the photo at that height, never
   * narrower than the 559 blob. A wide packshot therefore stretches the blob
   * sideways (`preserveAspectRatio="none"` on the shape) instead of shrinking
   * the artwork to fit a square.
   */
  .product__media {
    position: relative;
    z-index: 0;
    isolation: isolate;
    display: flex;
    justify-content: center;
    height: var(--product-media-height, 738px);
    width: max(
      var(--product-media-min-width, 559px),
      calc(var(--product-media-height, 738px) * var(--product-image-ratio, 0.421))
    );
    max-width: 100%;
  }

  /**
   * Figma 93:14291 draws this as a 559×559 square, centred in the 738-tall
   * media box. It does not grow with a wide photo — only the image does.
   */
  .product__blob {
    position: absolute;
    z-index: 0;
    top: var(--product-blob-top, 13.01%);
    left: 50%;
    width: var(--product-blob-size, 559px);
    height: var(--product-blob-size, 559px);
    color: var(--color-primary);
    translate: -50% 0;
    pointer-events: none;
  }

  .product__image {
    position: relative;
    z-index: 1;
    height: 100%;
    width: auto;
    max-width: 100%;
  }

  /**
   * `contain` rather than `cover`: nothing may be cropped. Height is locked to
   * the media box; width follows the file, capped by the box when space runs out.
   */
  .product__image img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }

  /**
   * Badge centre in Figma 93:14291 is 10.16% across and 5.17% down the 559 blob
   * (56.8, 28.9 on that square). Offsets are taken from the blob, not the media
   * box, so a wider photo cannot pull the sticker out into the cream.
   */
  .product__badge {
    position: absolute;
    z-index: 3;
    top: calc(
      var(--product-blob-top, 13.01%) + var(--product-blob-size, 559px) *
        var(--product-badge-from-blob-top, 0.0517)
    );
    left: calc(
      50% - var(--product-blob-size, 559px) / 2 + var(--product-blob-size, 559px) *
        var(--product-badge-from-blob-left, 0.1016)
    );
    translate: -50% -50%;
    pointer-events: none;
  }

  /**
   * The vertical rhythm is written as one margin per child rather than a single
   * flex `gap`, because the design uses seven different spacings down this
   * column and every one of them changes at 390.
   */
  .product__info > * {
    margin: 0;
  }

  .product__meta {
    display: flex;
    align-items: center;
    gap: var(--product-meta-inline-gap, 20px);
    margin-top: var(--product-meta-gap, 16px);
    font-weight: 500;
    color: var(--color-body);
  }

  .product__title-brand {
    color: var(--color-primary);
  }

  .product__title-rest {
    color: var(--color-secondary);
  }

  /**
   * 40px at both breakpoints with a 1.12 leading, which is not a step on the
   * display scale — `display-4` is 40/1.2/0.05em on desktop and 24/1.3 at 390.
   */
  .product__price {
    margin-top: var(--product-price-gap, 28px);
    font-family: var(--font-secondary--family);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .product__variants {
    margin-top: var(--product-buy-gap, 64px);
    width: 100%;
  }

  .product__buy {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: var(--product-buy-gap, 64px);
  }

  /* The select above already carries the gap when it is present. */
  .product__variants + .product__buy {
    margin-top: 16px;
  }

  /**
   * Figma 93:14322 is 80px — the same pill as the quantity stepper beside it.
   * `button--default` is already 80px; these rules beat the snippet if another
   * size class is ever added, and they honour the 52px mobile token below.
   */
  .product__buy .button.product__atc {
    flex-grow: 1;
    box-sizing: border-box;
    height: var(--product-atc-height, 80px);
    min-height: var(--product-atc-height, 80px);
    max-width: var(--product-atc-width, 347px);
    padding-block: 0;
  }

  .product__dynamic-checkout {
    margin-top: 16px;
  }

  /**
   * Scoped to the section rather than written as a bare `.product__payment`,
   * because the snippet's own `.payment-icons { margin: 0 }` has the same
   * specificity and the order the two stylesheets are concatenated in is not
   * something this file gets to decide.
   */
  .product__info .product__payment {
    margin-top: var(--product-payment-gap, 48px);
  }

  .product__rule {
    height: 1px;
    margin-top: var(--product-rule-gap, 32px);
    border: 0;
    background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  }

  .product__notes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: var(--product-notes-gap, 32px);
    padding: 0;
    list-style: none;
  }

  .product__note {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-primary--family);
    font-size: var(--product-note-size, 18px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-body);
  }

  .product__note .icon {
    color: var(--color-primary);
  }

  .product__upsell {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: var(--product-upsell-gap, 32px);
    padding: var(--product-upsell-padding, 15px);
    border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent);
    border-radius: 12px;
  }

  .product__upsell-media {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 52px;
    height: 54px;
  }

  .product__upsell-blob {
    position: absolute;
    inset: -1px;
    color: var(--color-secondary);
    transform: rotate(-45deg);
  }

  .product__upsell-image {
    position: relative;
    width: 33px;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
  }

  .product__upsell-text {
    flex-grow: 1;
    min-width: 0;
    font-family: var(--font-secondary--family);
    text-transform: uppercase;
    color: var(--color-primary);
  }

  .product__upsell-title {
    margin: 0;
    font-size: var(--product-upsell-title-size, 20px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.03em;
  }

  .product__upsell-price {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.24;
    letter-spacing: 0.03em;
    opacity: 0.7;
  }

  .product__upsell-button {
    min-height: var(--product-upsell-button-height, 54px);
    padding-inline: 28px;
  }

  /**
   * At 390 the two columns stack, the blob and the badge move inside a square
   * media box, and every gap down the info column changes. The breakpoint is
   * almost entirely a swap of the properties declared above.
   */
  @media (width < 1366px) {
    /**
     * The desktop size is written into the section's `style` attribute, so no
     * stylesheet rule on `.product` can outrank it. Re-declaring the variable
     * on the trail itself works instead: it is a different element, so the
     * inherited inline value is simply overridden for this subtree.
     */
    .product__breadcrumbs {
      --breadcrumbs-size: var(--breadcrumbs-size-mobile);
    }

    /**
     * The design draws this one headline at 40px, a step above the Display 3
     * mobile size the class carries. Scoped through `__info` so the rule beats
     * `.display-3` on specificity rather than on source order, which is not
     * guaranteed between this stylesheet and `critical.css`.
     */
    .product__info .product__title {
      font-size: 40px;
    }

    .product {
      --product-breadcrumb-gap: 30px;
      --product-grid-inset: 0;
      --product-columns-gap: 0;
      --product-rows-gap: 32px;
      --product-grid-columns: minmax(0, 1fr);
      --product-media-height: auto;
      --product-media-min-width: 0;
      --product-blob-top: 8.47%;
      --product-blob-size: 83.06%;
      --product-badge-from-blob-top: 0.07;
      --product-badge-from-blob-left: 0.125;
      --product-price-gap: 48px;
      --product-buy-gap: 48px;
      --product-payment-gap: 80px;
      --product-rule-gap: 32px;
      --product-notes-gap: 33px;
      --product-note-size: 16px;
      --product-upsell-gap: 40px;
      --product-upsell-padding: 17px;
      --product-upsell-title-size: 18px;
      --product-atc-height: 52px;
      --product-atc-width: 239px;
      --product-upsell-button-height: 48px;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 56px;
      padding-bottom: 0;
    }

    .product__media {
      aspect-ratio: 1;
      width: 100%;
      height: auto;
    }

    .product__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .product__image img {
      width: 100%;
      height: 100%;
    }

    /**
     * `badge` writes its size into an inline custom property, which no
     * stylesheet rule can outrank, so the 390 size is applied to the used
     * properties instead.
     */
    .product__badge .badge {
      width: 73px;
      height: 73px;
    }

    /* The card becomes two rows with a full-width action beneath the content. */
    .product__upsell {
      flex-wrap: wrap;
    }

    .product__upsell-form {
      flex-basis: 100%;
      margin-top: 24px;
    }

    .product__upsell-button {
      width: 100%;
      max-width: none;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .product {
      --product-breadcrumb-gap: 36px;
      --product-grid-inset: 0;
      --product-columns-gap: 36px;
      --product-rows-gap: 0;
      --product-grid-columns: minmax(0, 1fr) minmax(0, 1fr);
      --product-price-gap: 28px;
      --product-buy-gap: 40px;
      --product-payment-gap: 40px;
      --product-note-size: 17px;
      --product-upsell-title-size: 18px;
      --product-atc-height: 56px;
      --product-atc-width: none;
      --product-upsell-button-height: 56px;

      padding-top: 72px;
      padding-bottom: 80px;
    }

    .product__breadcrumbs {
      --breadcrumbs-size: 18px;
    }

    .product__info .product__title {
      font-size: clamp(40px, 4.8vw, 48px);
    }

    .product__price {
      font-size: 32px;
    }

    .product__badge .badge {
      width: 100px;
      height: 100px;
    }

    .product__buy .button.product__atc,
    .product__buy .button--primary.button--default.product__atc {
      height: 56px;
      min-height: 56px;
      font-size: 17px;
    }

    .product .quantity {
      --quantity-height: 56px;
      --quantity-padding-inline: 18px;
      --quantity-input-gap: 10px;
      --quantity-font-size: 17px;
    }

    .product__upsell-button,
    .product__upsell-button.button--small {
      height: 56px;
      min-height: 56px;
      font-size: 17px;
    }
  }
/* END_SECTION:product */

/* START_SECTION:related-articles (INDEX:34) */
.related-articles {
    margin-bottom: calc(-1 * var(--related-corner-radius));
    padding-top: var(--related-top-spacing);
    padding-bottom: var(--related-bottom-spacing);
    border-radius: var(--related-corner-radius) var(--related-corner-radius) 0 0;
    background-color: #eedbfe;
  }

  /* The design lays this band out on a 1570px measure, wider than the page column. */
  .related-articles__inner {
    width: min(1570px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  .related-articles__header {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: space-between;
  }

  .related-articles__heading {
    margin: 0;
    color: var(--color-primary);
  }

  .related-articles__grid {
    display: grid;
    grid-template-columns: repeat(var(--related-columns, 3), minmax(0, 1fr));
    gap: var(--related-gap, 20px);
    margin: 0;
    margin-top: var(--related-header-gap, 80px);
    padding: 0;
    list-style: none;
  }

  /**
   * The button sits beside the heading at 1728 and under the grid at 390. Both
   * are in the markup and one is hidden, rather than one being moved with
   * `order`: they are in different containers, so there is no single flow to
   * reorder them in.
   */
  .related-articles__view-all--below {
    display: none;
  }

  @media (width < 1366px) {
    .related-articles {
      --related-columns: 1;
      --related-gap: 32px;
      --related-header-gap: 48px;

      padding-top: 64px;
      padding-bottom: 150px;
      border-radius: 32px 32px 0 0;
    }

    .related-articles__view-all--inline {
      display: none;
    }

    .related-articles__view-all--below {
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }

    .related-articles__view-all .button {
      min-height: 48px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .related-articles {
      --related-columns: 3;
      --related-gap: 24px;
      --related-header-gap: 48px;

      padding-top: 80px;
      padding-bottom: 180px;
      border-radius: 36px 36px 0 0;
    }

    .related-articles__heading {
      font-size: clamp(36px, 4.5vw, 48px);
    }

    .related-articles__view-all--inline {
      display: block;
    }

    .related-articles__view-all--below {
      display: none;
    }

    .related-articles__view-all .button--medium,
    .related-articles__view-all .button--primary.button--medium {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }
  }
/* END_SECTION:related-articles */

/* START_SECTION:reseller-form (INDEX:35) */
/**
   * Unlike the contact page's band, this form sits directly on the page
   * background: a centred intro on the wide text measure, then a narrower form
   * column under it.
   */
  .reseller-form {
    padding-top: var(--reseller-top-spacing);
    padding-bottom: var(--reseller-bottom-spacing);
    background-color: var(--color-background);
  }

  .reseller-form__intro {
    display: grid;
    justify-items: center;
    width: min(1355px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
    text-align: center;
  }

  /**
   * Display 2 in everything but the size, which is a setting: the design steps
   * this heading 80 → 48px between the two frames, where the token steps
   * 80 → 40px. The mobile query below picks the Display 1 step instead.
   */
  .reseller-form__heading {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: var(--reseller-heading-size);
    font-weight: 400;
    line-height: var(--display-2-leading);
    letter-spacing: var(--display-2-tracking);
    text-transform: uppercase;
  }

  .reseller-form__text {
    max-width: var(--reseller-intro-width, 837px);
    margin-top: var(--reseller-intro-gap);
    color: var(--color-body);
  }

  .reseller-form__text > :first-child {
    margin-top: 0;
  }

  .reseller-form__text > :last-child {
    margin-bottom: 0;
  }

  /* The mock underlines the mid-sentence link rather than recolouring it. */
  .reseller-form__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .reseller-form__text a:hover {
    color: var(--color-primary);
  }

  .reseller-form__panel {
    width: min(772px, 100% - var(--page-margin) * 2);
    margin-top: var(--reseller-panel-gap);
    margin-inline: auto;
  }

  /* Left-aligned inside the centred column, as drawn. */
  .reseller-form__panel-heading {
    margin: 0;
    color: var(--color-primary);
    text-align: left;
  }

  .reseller-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--reseller-form-gap, 48px);
    margin-top: var(--reseller-fields-gap);
  }

  .reseller-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--reseller-field-gap, 24px);
  }

  .reseller-form__message--error {
    color: var(--color-error);
  }

  .reseller-form__message--success {
    color: var(--color-primary);
  }

  /** Both contact forms draw Verstuur at 20px SemiBold; `medium` carries the size. */
  .reseller-form .button--medium {
    font-weight: 600;
  }

  @media (width < 1366px) {
    .reseller-form {
      --reseller-form-gap: 40px;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 64px;
      padding-bottom: 100px;
    }

    .reseller-form__heading {
      font-size: var(--display-1-size);
      line-height: 1.1;
      letter-spacing: 0;
    }

    .reseller-form__text {
      margin-top: 24px;
    }

    .reseller-form__panel {
      margin-top: 64px;
    }

    /** The Display 5 step is 20px; the 390 mock draws this sub-heading at 24. */
    .reseller-form__panel-heading {
      font-size: 24px;
      letter-spacing: 0.02em;
    }

    /* Slightly tighter outline controls on the reseller panel at mobile widths. */
    .reseller-form .field--outline .field__label {
      font-size: 16px;
    }

    .reseller-form .field--outline:not(.field--textarea) .field__control {
      height: 48px;
      padding: 0 16px;
      font-size: 16px;
    }

    .reseller-form .field--outline.field--textarea .field__control {
      height: 98px;
      min-height: 98px;
      padding: 15px 16px;
      font-size: 16px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .reseller-form {
      --reseller-form-gap: 44px;

      padding-top: 100px;
      padding-bottom: 110px;
    }

    .reseller-form__heading {
      font-size: clamp(40px, 5vw, 52px);
    }

    .reseller-form__text {
      max-width: 640px;
      margin-top: 24px;
      font-size: 18px;
    }

    .reseller-form__panel {
      width: min(640px, 100% - var(--page-margin) * 2);
      margin-top: 80px;
    }

    .reseller-form__panel-heading {
      font-size: 28px;
    }

    .reseller-form .field--outline:not(.field--textarea) .field__control {
      height: 56px;
    }

    .reseller-form .button--default,
    .reseller-form .button--medium,
    .reseller-form .button--primary.button--default,
    .reseller-form .button--primary.button--medium {
      height: 56px;
      min-height: 56px;
      padding: 0 22px;
      font-size: 17px;
    }
  }
/* END_SECTION:reseller-form */

/* START_SECTION:search (INDEX:36) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* START_SECTION:social-grid (INDEX:37) */
.social {
    /**
     * 136px is the desktop size on the 1568px stage. The type scales with the
     * stage so tablet and smaller desktops stay in proportion.
     */
    --social-heading-size: clamp(
      40px,
      calc(min(1568px, 100vw - var(--page-margin) * 2) * 136 / 1568),
      136px
    );

    padding-top: var(--social-top-spacing);
    padding-bottom: var(--social-bottom-spacing);
    overflow-x: clip;
    background-color: var(--color-background);
  }

  .social__stage {
    position: relative;
    aspect-ratio: var(--social-stage-aspect, 1311 / 1250);
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

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

  .social__tile {
    position: absolute;
    z-index: 3;
    top: var(--tile-top);
    left: var(--tile-left);
    aspect-ratio: 1;
    width: var(--tile-width, 15%);
  }

  .social__tile-link {
    display: block;
    height: 100%;
  }

  .social__tile-image {
    width: 100%;
    height: 100%;
    border-radius: var(--social-tile-radius, 48px);
    object-fit: cover;
  }

  .social__tile:nth-child(1) {
    --tile-left: 22.2%;
    --tile-top: 18.4%;
  }
  .social__tile:nth-child(2) {
    --tile-left: 71.2%;
    --tile-top: 18.6%;
  }
  .social__tile:nth-child(3) {
    --tile-left: 0.3%;
    --tile-top: 43%;
  }
  .social__tile:nth-child(4) {
    --tile-left: 85%;
    --tile-top: 42.1%;
  }
  .social__tile:nth-child(5) {
    --tile-left: 17%;
    --tile-top: 65.3%;
  }
  .social__tile:nth-child(6) {
    --tile-left: 70.4%;
    --tile-top: 64.7%;
  }

  /* Anything past the sixth tile has no place in the collage. */
  .social__tile:nth-child(n + 7) {
    display: none;
  }

  /**
   * The heading sets this box's height. Blob and tube are centred on that box
   * (not on an empty layer), so they sit with the type instead of floating
   * toward the top of the stage.
   *
   * No transform on this wrapper: that would trap child z-index and put the
   * heading above the side tiles again. Children stack against `.social__tile`.
   * Order: blob (1) → heading (2) → tiles (3) → product (4) → button (5).
   */
  .social__center {
    position: absolute;
    top: var(--social-center-top, 42%);
    left: calc((100% - var(--social-center-width, 92%)) / 2);
    width: var(--social-center-width, 92%);
  }

  .social__blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    aspect-ratio: 1;
    width: var(--social-blob-width, 32%);
    height: auto;
    color: var(--color-primary);
    translate: -50% -50%;
    rotate: -45.22deg;
  }

  /**
   * The merchant's line break is the only wrap. `nowrap` stops a long second
   * line from splitting mid-word on tablet and mobile. Word-spacing opens the
   * two words on each line around the tube so they sit beside it, not under it.
   */
  .social h2.social__heading {
    position: relative;
    z-index: 2;
    color: var(--color-accent);
    font-size: var(--social-heading-size);
    text-align: center;
    text-wrap: nowrap;
    white-space: nowrap;
    letter-spacing: 0.04em;
    word-spacing: clamp(48px, 9vw, 160px);
  }

  .social h2.social__heading .social__heading-line--smiles {
    word-spacing: clamp(32px, 6.5vw, 112px);
  }

  .social__heading br {
    display: block;
    content: '';
  }

  .social__product {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    /**
     * Sized for `product-toothpaste-tube.png`, which carries more transparent
     * padding than the old green crop — 18% keeps the painted tube at the
     * same visual weight the 12% green asset had.
     */
    width: var(--social-product-width, 18%);
    height: auto;
    object-fit: contain;
    rotate: 12deg;
    translate: -50% -50%;
  }

  .social__actions {
    position: absolute;
    z-index: 5;
    top: var(--social-actions-top, 75%);
    left: 50%;
    translate: -50% 0;
  }

  /**
   * Photos stay on the desktop oval. The cluster is sized to the gap between
   * the upper and lower tiles, then flex-centered so blob, type, and tube
   * share that midpoint.
   */
  @media (width >= 750px) and (width < 1366px) {
    .social__center {
      /* Sits a little below the midpoint of the opening so the cluster clears
         the upper photos rather than crowding them. */
      top: 34%;
      height: 34%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .social h2.social__heading {
      font-size: var(--social-heading-size);
      word-spacing: clamp(24px, 5vw, 96px);
    }

    .social h2.social__heading .social__heading-line--smiles {
      word-spacing: clamp(16px, 3.5vw, 72px);
    }
  }

  /**
   * Portrait collage from the 390 design. Tiles stay put. The cluster is
   * centered in the opening between the top photos and the bottom photos.
   */
  @media (width < 750px) {
    .social {
      --social-stage-aspect: 390 / 657;
      --social-tile-radius: 28px;
      --social-center-width: 100%;
      --social-blob-width: 62%;
      /**
       * The lines are `nowrap` and run edge to edge with only a small side
       * gap. Mobile keeps a much tighter word gap than desktop — the words are
       * meant to close in on the tube rather than clear it — so the type can
       * stay large. 70px is the cap for the 560px stage, which stops growing
       * before the 750px breakpoint does.
       */
      --social-heading-size: clamp(34px, 12.4vw, 70px);
      --social-product-width: 32%;
      --social-actions-top: 95%;

      padding-top: 64px;
      padding-bottom: 120px;
    }

    .social__stage {
      width: min(560px, 100%);
    }

    .social__center {
      top: 34%;
      height: 28%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .social h2.social__heading {
      font-size: var(--social-heading-size);
      /* Just enough of a gap to seat the tube between the two words. */
      letter-spacing: normal;
      word-spacing: clamp(40px, 13vw, 73px);
    }

    .social h2.social__heading .social__heading-line--smiles {
      word-spacing: clamp(34px, 11vw, 62px);
    }

    .social__blob {
      left: 50%;
    }

    .social__product {
      left: 50%;
    }

    .social__tile {
      --tile-width: 34%;
    }

    .social__tile:nth-child(1) {
      --tile-left: 28.2%;
      --tile-top: -1.5%;
      --tile-width: 39.7%;
    }
    .social__tile:nth-child(2) {
      --tile-left: 76.2%;
      --tile-top: 9.4%;
      --tile-width: 33.3%;
    }
    .social__tile:nth-child(3) {
      --tile-left: -3.1%;
      --tile-top: 16.4%;
      --tile-width: 30.3%;
    }
    .social__tile:nth-child(4) {
      --tile-left: 62.8%;
      --tile-top: 65.8%;
      --tile-width: 34.6%;
    }
    .social__tile:nth-child(5) {
      --tile-left: 2.6%;
      --tile-top: 65.8%;
      --tile-width: 32.8%;
    }
    .social__tile:nth-child(n + 6) {
      display: none;
    }
  }
/* END_SECTION:social-grid */

/* START_SECTION:testimonials (INDEX:38) */
.testimonials {
    position: relative;
    /**
     * Pull the section up under the panel above so the rounded corners sit
     * cleanly on top of this band. The amount is kept editable in Shopify so
     * the merchant can tune it without changing code.
     */
    margin-top: calc(var(--testimonials-overlap) * -1);

    overflow: clip;
    padding-top: var(--testimonials-top-spacing);
    padding-bottom: var(--testimonials-bottom-spacing);
    background-color: var(--color-background);
  }

  /**
   * The oversized HAPPIE lettering is a backdrop, not content: it is inlined so
   * it can inherit the accent colour, and hidden from assistive technology.
   */
  .testimonials__watermark {
    position: absolute;
    inset: 0;
    color: var(--color-accent);
    opacity: 0.5;
  }

  .testimonials__watermark > svg {
    width: 100%;
    height: 100%;
  }

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

  /* `video_tag` emits an <img> alongside the <source>s for browsers that cannot play it. */
  .testimonials__video video,
  .testimonials__video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .testimonials__inner {
    position: relative;
    display: grid;
    /**
     * `minmax(0, 1fr)` rather than the default `auto`, which would let the
     * heading's max-content width widen the column and drag the quotes off
     * their 958px measure with it.
     */
    grid-template-columns: minmax(0, 1fr);
    width: min(958px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
    text-align: center;
  }

  /**
   * The quotes are set on a 958px measure but the heading is not — on the About
   * page it runs to 1116px on one line. Shrink-wrapping it and centring it as a
   * grid item lets it break out of the measure symmetrically when it is longer
   * than the column, and changes nothing when it is shorter.
   */
  .testimonials__heading {
    justify-self: center;
    width: max-content;
    max-width: calc(100vw - var(--page-margin) * 2);
    color: var(--color-primary);
  }

  /**
   * Scroll-snap carries the slider on its own — the arrows only automate what a
   * swipe or a keyboard scroll already does, so the section still works with
   * scripting unavailable.
   *
   * `position: relative` makes the slides' `offsetLeft` track-relative, which is
   * what the arrow script scrolls to.
   */
  .testimonials__track {
    position: relative;
    display: flex;
    /**
     * Quotes are different lengths. Stretching every slide to the tallest one
     * would leave a hole between a short author line and the arrows; start
     * alignment lets the track shrink to whichever quote is on screen (the
     * script writes that height) so the 40px nav gap stays constant.
     */
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: var(--testimonials-heading-gap, 48px);
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .testimonials__track.is-sized {
    transition: height 0.35s ease;
  }

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

  .testimonials__slide {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    gap: 24px;
    margin: 0;
    scroll-snap-align: center;
  }

  .testimonials__quote {
    margin: 0;
    color: var(--color-body);
  }

  .testimonials__author {
    color: var(--color-primary);
    font-weight: 600;
  }

  /**
   * In Figma the two blobs are 72.3px apart centre to centre on a 70.1px shape,
   * so they very nearly touch — the lobes of the squircle supply the only
   * visible breathing room between them.
   */
  .testimonials__nav {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin-top: var(--testimonials-nav-gap, 40px);
  }

  @media (width < 1366px) {
    .testimonials {
      --testimonials-heading-gap: 32px;
      --testimonials-nav-gap: 28px;

      /* Matches the 390 radius of the panel above. */
      margin-top: calc(var(--testimonials-overlap-mobile) * -1);

      /**
       * The desktop spacings are written into the `style` attribute, which no
       * stylesheet rule can outrank, so the 390 settings are applied to the
       * used properties rather than to the variables behind them. Both
       * defaults carry the overlap the neighbouring bands sit in: 95 is 71 + 24
       * above, 90 is 66 + 24 below.
       */
      padding-top: var(--testimonials-top-spacing-mobile);
      padding-bottom: var(--testimonials-bottom-spacing-mobile);
    }

    /**
     * `icon-button` and `icon` both write their size into an inline custom
     * property, which no stylesheet rule can outrank, so the 390 sizes are
     * applied to the used properties instead. Both selectors are deliberately
     * two levels deep: a bare `.testimonials__arrow` ties with `.icon-button`
     * on specificity and then loses on source order, which is why the mobile
     * arrows used to stay 70px. The glyph keeps the desktop 20/70 ratio.
     */
    .testimonials__nav .testimonials__arrow {
      width: 48px;
      height: 48px;
    }

    .testimonials__nav .testimonials__arrow .icon {
      width: 14px;
      height: 14px;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .testimonials {
      --testimonials-heading-gap: 40px;
      --testimonials-nav-gap: 36px;

      padding-top: 120px;
      padding-bottom: 110px;
    }

    .testimonials__inner {
      width: min(720px, 100% - var(--page-margin) * 2);
    }

    .testimonials__heading {
      font-size: clamp(40px, 5vw, 52px);
    }

    .testimonials__quote,
    .testimonials__author {
      font-size: 22px;
    }

    .testimonials__nav .testimonials__arrow {
      width: 56px;
      height: 56px;
    }

    .testimonials__nav .testimonials__arrow .icon {
      width: 16px;
      height: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .testimonials__track,
    .testimonials__track.is-sized {
      scroll-behavior: auto;
      transition: none;
    }

    /* The still lettering is already sitting underneath, so the moving layer just steps aside. */
    .testimonials__video {
      display: none;
    }
  }
/* END_SECTION:testimonials */

/* START_SECTION:text-with-image (INDEX:39) */
.text-image {
    padding-top: var(--text-image-top-spacing);
    padding-bottom: var(--text-image-bottom-spacing);
    background-color: var(--color-background);
  }

  /**
   * Laid out on the same 1568px measure as the image band and the footer rather
   * than on the theme's shared content column.
   */
  .text-image__inner {
    display: grid;
    grid-template-columns: var(--text-image-columns, 782fr 639fr);
    gap: var(--text-image-gap, 147px);
    align-items: center;
    width: min(1568px, 100% - var(--page-margin) * 2);
    margin-inline: auto;
  }

  /**
   * Swapping the visual order rather than the source order keeps the heading
   * first for a screen reader whichever side the photo is on — and gives the
   * 390 layout, which always leads with the photo, a single rule to set.
   */
  .text-image__inner--left .text-image__media {
    order: -1;
  }

  .text-image__heading {
    color: var(--color-primary);
  }

  .text-image__body {
    margin-top: var(--text-image-heading-gap, 32px);
    color: var(--color-body);
  }

  /* The theme's reset zeroes every margin, so paragraphs space themselves. */
  .text-image__body p + p {
    margin-top: var(--text-image-body-gap, 24px);
  }

  .text-image__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-position: from-font;
  }

  .text-image__body a:hover {
    color: var(--color-primary);
  }

  .text-image__actions {
    margin-top: var(--text-image-actions-gap, 48px);
  }

  .text-image__image {
    display: block;
    width: 100%;
    aspect-ratio: var(--text-image-aspect, 639 / 678);
    border-radius: var(--text-image-radius, 56px);
    object-fit: cover;
  }

  @media (width < 1366px) {
    .text-image {
      --text-image-columns: 1fr;
      --text-image-gap: 60px;
      --text-image-heading-gap: 24px;
      --text-image-actions-gap: 40px;
      --text-image-aspect: 358 / 272;
      --text-image-radius: 24px;

      /* The spacing settings are written inline as desktop values. */
      padding-top: 86px;
      padding-bottom: 80px;
    }

    /* At 390 the photo leads whichever side it takes at 1728. */
    .text-image__inner .text-image__media {
      order: -1;
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .text-image {
      --text-image-columns: 1fr 1fr;
      --text-image-gap: 40px;
      --text-image-heading-gap: 24px;
      --text-image-actions-gap: 36px;
      --text-image-aspect: 1;
      --text-image-radius: 36px;

      padding-top: 100px;
      padding-bottom: 100px;
    }

    .text-image__heading {
      font-size: clamp(36px, 4.5vw, 48px);
    }

    .text-image__inner .text-image__media {
      order: 0;
    }

    .text-image__inner--left .text-image__media {
      order: -1;
    }
  }
/* END_SECTION:text-with-image */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:40) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:41) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:article-card (INDEX:42) */
.article-card {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .article-card__media {
    overflow: hidden;
    aspect-ratio: var(--article-card-aspect, 510 / 432);
    border-radius: var(--article-card-radius, 24px);
  }

  .article-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-card__date {
    margin-top: var(--article-card-media-gap, 32px);
    color: var(--color-body);
    font-size: 16px;
  }

  .article-card__title {
    margin-top: 16px;
    color: var(--color-primary);
  }

  .article-card__excerpt {
    margin-top: 20px;
    color: var(--color-body);
    font-size: var(--article-card-excerpt-size, 16px);
  }

  .article-card:hover .article-card__title {
    text-decoration: underline;
  }

  .article-card--feature {
    --article-card-radius: 40px;
  }

  .article-card--feature .article-card__date {
    color: var(--color-body);
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
  }

  /**
   * Excerpts on the listing are whatever the author wrote, so the second line is
   * clamped — every row of the grid then lines up regardless of their length.
   */
  .article-card--feature .article-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  @media (width < 1366px) {
    .article-card--compact {
      --article-card-media-gap: 20px;
    }

    /* The listing card is drawn taller than it is wide at 390. */
    .article-card--feature {
      --article-card-aspect: 358 / 372;
      --article-card-radius: 24px;
    }

    /* 24px at 390, which is the Display 4 step rather than Display 5's 20px. */
    .article-card--feature .article-card__title {
      font-size: var(--display-4-size);
      letter-spacing: var(--display-4-tracking);
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .article-card--feature {
      --article-card-aspect: 510 / 432;
      --article-card-radius: 32px;
    }

    .article-card--feature .article-card__title {
      font-size: clamp(20px, 2.2vw, 24px);
    }
  }
/* END_SNIPPET:article-card */

/* START_SNIPPET:badge (INDEX:43) */
.badge {
    display: inline-flex;
    width: var(--badge-size);
    height: var(--badge-size);
    rotate: var(--badge-rotation);
    color: var(--color-primary);
  }

  .badge > svg {
    width: 100%;
    height: 100%;
  }

  .badge--lilac {
    --badge-fill: var(--color-accent);
  }

  .badge--mint {
    --badge-fill: #5db77a;
  }

  /**
   * The inverse of the other two: a Primary disc carrying a lilac ring and
   * glyph, for the quote badge, which sits on the mint expert card where a
   * light disc would disappear.
   */
  .badge--dark {
    --badge-fill: var(--color-primary);

    color: var(--color-accent);
  }

  /**
   * These override the fill and stroke attributes baked into the SVG, which are
   * only there so the file still renders correctly on its own.
   */
  .badge__disc {
    fill: var(--badge-fill);
  }

  .badge__ring {
    stroke: currentcolor;
  }

  .badge__glyph {
    fill: currentcolor;
  }
/* END_SNIPPET:badge */

/* START_SNIPPET:breadcrumbs (INDEX:45) */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-primary--family);
    font-size: var(--breadcrumbs-size, var(--body-m-size));
    line-height: 1.5;
  }

  /**
   * Every crumb but the first is preceded by a slash. Using a pseudo-element
   * keeps the separator out of the text layer, so it is neither selectable nor
   * announced.
   */
  .breadcrumbs__crumb {
    color: var(--color-body);
  }

  .breadcrumbs__crumb + .breadcrumbs__crumb::before {
    content: '/';
    padding-inline: 6px;
    color: var(--color-body);
  }

  .breadcrumbs__crumb--current {
    color: var(--color-primary);
  }

  .breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .breadcrumbs__link:hover {
    color: var(--color-primary);
  }

  @media (prefers-reduced-motion: reduce) {
    .breadcrumbs__link {
      transition: none;
    }
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:button (INDEX:46) */
/**
   * Heights come straight from the design: 30px padding + a 20px cap-height
   * text box + 30px padding = 80px, and 24 + 20 + 24 = 68px. Figma trims the
   * text box to the cap height, which browsers don't do, so the outer height is
   * set explicitly rather than left to line-height.
   *
   * Horizontal padding is 30px at 1366px and up, matching Figma 105:12201.
   *
   * A transparent border is present in every state so the box never shifts when
   * hover swaps between the filled and outlined appearance.
   */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 48px;
    font-family: var(--font-primary--family);
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }

  .button__text {
    padding-inline: 8px;
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .button--default {
    min-height: 80px;
    padding-inline: 30px;
    font-size: 20px;
  }

  /**
   * The "Read e-book" button on the About page keeps the default box but takes
   * the small size's text, which is the one combination the two sizes above
   * cannot produce between them.
   */
  .button--medium {
    min-height: 80px;
    padding-inline: 30px;
    font-size: 20px;
  }

  .button--small {
    min-height: 68px;
    padding-inline: 30px;
    font-size: 20px;
  }

  .button--primary {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    font-weight: 600;
  }

  /**
   * Figma 105:12201 is 80px with 30px around a trimmed 20px label. Vertical
   * padding is not set — it would stack on line-height and the 1px border.
   */
  .button--primary.button--default,
  .button--primary.button--medium,
  .button--secondary.button--default,
  .button--secondary.button--medium {
    height: 80px;
    min-height: 80px;
    padding: 0 30px;
    font-size: 20px;
  }

  .button--primary:hover {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  .button--secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
  }

  .button--secondary:hover {
    background-color: var(--color-primary);
    border-color: transparent;
    color: var(--color-secondary);
  }

  /**
   * The accent variant is for the dark band in the footer, where neither of the
   * other two has enough contrast against Primary.
   */
  .button--accent {
    background-color: var(--color-accent);
    color: var(--color-primary);
  }

  .button--accent:hover {
    background-color: transparent;
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  /**
   * Mint is primary read backwards — the same two colours, swapped — so it
   * hovers into primary's resting state rather than into an outline.
   */
  .button--mint {
    background-color: #5db77a;
    color: #ffffff;
    font-weight: 600;
  }

  .button--mint:hover {
    background-color: var(--color-primary);
    color: #ffffff;
  }

  /**
   * At 390 the design draws every button at 48px tall with 16px text, so all
   * three sizes collapse onto that one step rather than scaling independently.
   */
  @media (width < 1366px) {
    .button--default,
    .button--medium,
    .button--small,
    .button--primary.button--default,
    .button--primary.button--medium,
    .button--secondary.button--default,
    .button--secondary.button--medium {
      height: 48px;
      min-height: 48px;
      padding: 0 14px;
      font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .button {
      transition: none;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:cart-icon (INDEX:47) */
/**
   * Hover inverts the circle the same way `.button--primary` does: the fill
   * drops out and the outline takes over. The transparent border is present in
   * both states so the 80px box never shifts.
   */
  .cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-background);
    text-decoration: none;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }

  .cart-icon:hover {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
  }

  /**
   * The count rides on the rim of the circle rather than inside it, so the
   * glyph stays centred no matter how many digits arrive. Lilac on the dark
   * green is the same pairing the discount sticker uses.
   *
   * `min-width` with inline padding rather than a fixed box: 1 stays a circle
   * and 10 or more grows into a pill instead of spilling out.
   */
  .cart-icon__count {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    min-width: 26px;
    height: 26px;
    padding-inline: 7px;
    border-radius: 13px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }

  .cart-icon__count[hidden] {
    display: none;
  }

  /* 32px glyph on the cream bar, badge on the top-right corner (Figma 587:8425). */
  .cart-icon--compact {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--color-primary);
  }

  .cart-icon--compact:hover {
    background: none;
    border-color: transparent;
    color: var(--color-primary);
  }

  .cart-icon--compact .cart-icon__count {
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding-inline: 4px;
    border-radius: 8px;
    font-size: 10px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-icon {
      transition: none;
    }
  }
/* END_SNIPPET:cart-icon */

/* START_SNIPPET:disclosure-toggle (INDEX:49) */
.disclosure-toggle {
    /**
     * Matches `--faq-item-duration` so every disclosure in the theme opens on
     * the same curve. Sections that animate the panel height read their own
     * duration; this one only has to agree with them.
     */
    --disclosure-toggle-duration: 420ms;
    --disclosure-toggle-ease: cubic-bezier(0.32, 0.72, 0, 1);

    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--disclosure-toggle-size);
    height: var(--disclosure-toggle-size);
    color: var(--color-primary);
  }

  /* The blob asset draws its lobes on the edges; Figma sits them on the diagonals. */
  .disclosure-toggle__shape {
    position: absolute;
    inset: 0;
    transform: rotate(45deg);
  }

  .disclosure-toggle--mint .disclosure-toggle__shape {
    color: var(--color-secondary);
  }

  .disclosure-toggle--lilac .disclosure-toggle__shape {
    color: var(--color-accent);
  }

  .disclosure-toggle__glyph {
    position: relative;
    display: inline-flex;
    grid-area: 1 / 1;
    transition:
      opacity var(--disclosure-toggle-duration) var(--disclosure-toggle-ease),
      rotate var(--disclosure-toggle-duration) var(--disclosure-toggle-ease);
  }

  .disclosure-toggle__glyph--open {
    opacity: 0;
    rotate: -90deg;
  }

  details[open]:not([data-closing]) .disclosure-toggle__glyph--closed {
    opacity: 0;
    rotate: 90deg;
  }

  details[open]:not([data-closing]) .disclosure-toggle__glyph--open {
    opacity: 1;
    rotate: 0deg;
  }

  @media (prefers-reduced-motion: reduce) {
    .disclosure-toggle__glyph {
      transition: none;
    }
  }
/* END_SNIPPET:disclosure-toggle */

/* START_SNIPPET:faq-item (INDEX:50) */
.faq-item {
    /**
     * The morph timing. `--faq-item-duration` is read back by the section's
     * script for the panel height, so this is the single source of truth for
     * how long the whole transition takes — keep it in a unit JS can parse.
     */
    --faq-item-duration: 420ms;
    --faq-item-ease: cubic-bezier(0.32, 0.72, 0, 1);

    /* Closed row, then the open card. Figma: 105:12318 and 105:12304. */
    --faq-item-padding-closed: 48px;
    --faq-item-padding-block: 80px;
    --faq-item-padding-inline: 80px;
    --faq-item-radius: 56px;
    --faq-item-toggle-size: 60px;
    --faq-item-gap: 24px;
    --faq-item-answer-gap: 64px;
    --faq-item-open-color: var(--color-neutral);
  }

  .faq-item__details {
    border-radius: 0;
    background-color: transparent;
    transition:
      border-radius var(--faq-item-duration) var(--faq-item-ease),
      background-color var(--faq-item-duration) var(--faq-item-ease);
  }

  /* Open items lift onto a dark card; closed ones sit flat on the band. */
  .faq-item__details[open]:not([data-closing]) {
    border-radius: var(--faq-item-radius);
    background-color: var(--color-primary);
  }

  /**
   * The padding lives on the summary rather than the `<details>` so the whole
   * row stays clickable, and it is what grows as the card opens.
   */
  .faq-item__summary {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: var(--faq-item-padding-closed);
    cursor: pointer;
    list-style: none;
    transition: padding var(--faq-item-duration) var(--faq-item-ease);
  }

  .faq-item__summary::-webkit-details-marker {
    display: none;
  }

  /* The panel carries the card's bottom padding, so the summary drops its own. */
  .faq-item__details[open]:not([data-closing]) .faq-item__summary {
    padding: var(--faq-item-padding-block) var(--faq-item-padding-inline) 0;
  }

  .faq-item__question {
    color: var(--color-primary);
    transition: color var(--faq-item-duration) var(--faq-item-ease);
  }

  .faq-item__details[open]:not([data-closing]) .faq-item__question {
    color: var(--faq-item-open-color);
  }

  .faq-item__toggle {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: var(--faq-item-toggle-size);
    height: var(--faq-item-toggle-size);
    color: var(--color-primary);
  }

  /* The blob is drawn with its lobes on the edges; Figma sits them on the diagonals. */
  .faq-item__toggle-shape {
    position: absolute;
    inset: 0;
    color: var(--color-accent);
    transform: rotate(45deg);
  }

  /**
   * Both glyphs are stacked in the same grid cell and cross-fade. The plus is
   * four-fold symmetric so rotating it reads as nothing; the minus swinging in
   * from vertical is what sells the change — it looks like the plus's upright
   * stroke folding down onto the horizontal.
   */
  .faq-item__toggle-glyph {
    position: relative;
    display: inline-flex;
    grid-area: 1 / 1;
    transition:
      opacity var(--faq-item-duration) var(--faq-item-ease),
      rotate var(--faq-item-duration) var(--faq-item-ease);
  }

  .faq-item__toggle-glyph--open {
    opacity: 0;
    rotate: -90deg;
  }

  .faq-item__details[open]:not([data-closing]) .faq-item__toggle-glyph--closed {
    opacity: 0;
    rotate: 90deg;
  }

  .faq-item__details[open]:not([data-closing]) .faq-item__toggle-glyph--open {
    opacity: 1;
    rotate: 0deg;
  }

  /**
   * `overflow: hidden` is what the script's height animation clips against.
   *
   * The padding sits on the inner element, not here: `box-sizing: border-box`
   * refuses to shrink a box below its own padding, so a padded panel animating
   * to `height: 0` stops dead at 104px and then loses the rest in one frame
   * when `open` goes away. An unpadded panel can actually reach zero.
   */
  .faq-item__panel {
    overflow: hidden;
    color: var(--color-secondary);
  }

  /**
   * The summary-to-panel gap is padding rather than a flex `gap` so it collapses
   * with the panel instead of leaving a dead band above a closed item.
   */
  .faq-item__panel-inner {
    padding: var(--faq-item-gap) var(--faq-item-padding-inline) var(--faq-item-padding-block);
  }

  /* Figma draws the answer at 80%, and only the answer — the link stays solid. */
  .faq-item__answer {
    color: color-mix(in srgb, var(--color-secondary) 80%, transparent);
  }

  /* `link` paints in `--color-foreground`, which is black on the dark card. */
  .faq-item__link .link {
    margin-top: var(--faq-item-answer-gap);
    color: var(--faq-item-open-color);
  }

  .faq-item__rule {
    height: 1px;
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    transition: background-color var(--faq-item-duration) var(--faq-item-ease);
  }

  .faq-item:last-child .faq-item__rule {
    display: none;
  }

  /* The card supplies its own edge, so the divider under an open item goes. */
  .faq-item:has(.faq-item__details[open]:not([data-closing])) .faq-item__rule {
    background-color: transparent;
  }

  /* The previous row's rule sits on top of the open card — hide that too. */
  .faq-item:has(+ .faq-item .faq-item__details[open]:not([data-closing])) .faq-item__rule {
    background-color: transparent;
  }

  /* Figma: 9:11288 (closed rows sit 40px apart) and 9:11275 (the open card). */
  @media (width < 1366px) {
    .faq-item {
      --faq-item-padding-closed: 20px 0;
      --faq-item-padding-block: 32px;
      --faq-item-padding-inline: 24px;
      --faq-item-radius: 24px;
      --faq-item-toggle-size: 48px;
      --faq-item-gap: 32px;
      --faq-item-answer-gap: 32px;
      --faq-item-open-color: var(--color-secondary);
    }
  }

  @media (width >= 750px) and (width < 1366px) {
    .faq-item {
      --faq-item-padding-closed: 32px 8px;
      --faq-item-padding-block: 48px;
      --faq-item-padding-inline: 40px;
      --faq-item-radius: 36px;
      --faq-item-toggle-size: 56px;
      --faq-item-gap: 24px;
      --faq-item-answer-gap: 40px;
    }

    .faq-item__question {
      font-size: 22px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-item__details,
    .faq-item__summary,
    .faq-item__question,
    .faq-item__toggle-glyph,
    .faq-item__rule {
      transition: none;
    }
  }
/* END_SNIPPET:faq-item */

/* START_SNIPPET:field (INDEX:51) */
/**
   * The control keeps one height across both states so the form doesn't reflow
   * as fields are filled in: 12px + a 12px label + 6px + a 14px value + 12px.
   */
  .field {
    --field-height: 72px;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--font-primary--family);
  }

  /**
   * The 1px border is a deliberate addition to the style guide: the theme's
   * page background is the same Neutral/100 as the field fill, so a borderless
   * control would have no visible edge. See the note in assets/critical.css.
   */
  .field__control {
    width: 100%;
    background-color: var(--color-neutral);
    border: 1px solid var(--color-primary);
    color: var(--color-foreground);
    font-weight: 400;
  }

  .field:not(.field--textarea) .field__control {
    height: var(--field-height);
    padding: 34px 24px 12px;
    font-size: var(--body-s-size);
    line-height: var(--body-s-leading);
  }

  .field--select .field__control {
    padding-right: 60px;
  }

  /**
   * The floating label. It sits over the control, so pointer events are passed
   * through to let a click anywhere in the box focus the field.
   */
  .field__label {
    position: absolute;
    top: 12px;
    left: 24px;
    translate: 0 0;
    pointer-events: none;
    color: var(--color-muted);
    font-size: var(--body-xs-size);
    line-height: var(--body-xs-leading);
    transition:
      top 0.15s ease,
      translate 0.15s ease,
      font-size 0.15s ease,
      color 0.15s ease;
  }

  /* Resting state: the label stands in for the placeholder, centred and full size. */
  .field:not(.field--outline) .field__control:placeholder-shown:not(:focus) + .field__label,
  .field--select:has(option:checked[value='']) .field__control:not(:focus) + .field__label {
    top: 50%;
    translate: 0 -50%;
    color: var(--color-foreground);
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  .field--textarea .field__control {
    min-height: 160px;
    padding: 18px 24px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
    resize: vertical;
  }

  .field__label--static {
    position: static;
    pointer-events: auto;
    color: var(--color-foreground);
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
    transition: none;
  }

  .field__control:focus {
    background-color: var(--color-field-active);
  }

  .field__error {
    color: var(--color-error);
    font-size: var(--body-s-size);
    line-height: var(--body-s-leading);
  }

  .field:has(.field__control:disabled) {
    opacity: 0.4;
  }

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

  /**
   * The outline variant. The border is drawn from Primary at a fraction rather
   * than as a flat grey, so it stays in the palette when a merchant changes the
   * brand colour — the design's rgba(4, 51, 41, 0.32) is exactly that.
   */
  .field--outline {
    gap: 20px;
  }

  /**
   * Control comes first in the DOM; the label is painted above the pill with
   * `order` so the markup stays consistent with the floating variant.
   */
  .field--outline .field__label {
    order: -1;
    position: static;
    pointer-events: auto;
    /** 18px sits between Body S (14) and Body M (20); it is a design value, not a token. */
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-primary);
    transition: none;
  }

  .field--outline .field__required {
    color: var(--color-error);
  }

  .field--outline .field__control {
    border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
    border-radius: 100px;
    background-color: transparent;
    color: var(--color-primary);
  }

  /**
   * Height, padding and type are set at the same specificity as the floating
   * variant's `.field:not(.field--textarea) .field__control`, which would
   * otherwise win on source order and re-impose the 72px control.
   */
  .field--outline:not(.field--textarea) .field__control {
    height: 68px;
    padding: 0 24px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  .field--outline.field--textarea .field__control {
    min-height: 136px;
    padding: 22px 24px;
    border-radius: var(--radius-s);
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  /* Already Primary at 70%, which is the mock's rgba(4, 51, 41, 0.7). */
  .field--outline .field__control::placeholder {
    color: var(--color-body);
    opacity: 1;
  }

  .field--outline .field__control:focus {
    background-color: transparent;
    border-color: var(--color-primary);
    outline: none;
  }

  @media (width < 1366px) {
    .field--outline {
      gap: 12px;
    }

    .field--outline .field__label {
      font-size: 16px;
    }

    .field--outline:not(.field--textarea) .field__control {
      height: 52px;
      padding: 0 20px;
      font-size: 16px;
      line-height: 1.5;
    }

    .field--outline.field--textarea .field__control {
      min-height: 112px;
      padding: 16px 20px;
      font-size: 16px;
      line-height: 1.5;
    }
  }
/* END_SNIPPET:field */

/* START_SNIPPET:flag (INDEX:52) */
.flag {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    font-size: 1rem;
    line-height: 1;
    font-style: normal;
  }
/* END_SNIPPET:flag */

/* START_SNIPPET:header-panel-item (INDEX:54) */
.header-panel-item {
    --header-submenu-duration: 320ms;
    --header-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);

    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .header-panel-item:last-child .header-panel-item__rule {
    display: none;
  }

  .header-panel-item__disclosure {
    width: 100%;
  }

  .header-panel-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 0;
    list-style: none;
    cursor: pointer;
    color: var(--color-neutral);
  }

  .header-panel-item__summary::-webkit-details-marker {
    display: none;
  }

  .header-panel-item__title {
    flex: 1 0 0;
    min-width: 0;
    color: var(--color-neutral);
    font-family: var(--font-primary--family);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.49;
    text-align: start;
    text-decoration: none;
  }

  .header-panel-item__chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-neutral);
    transition: transform var(--header-submenu-duration) var(--header-submenu-ease);
  }

  .header-panel-item__disclosure[open]:not([data-closing]) .header-panel-item__chevron {
    transform: rotate(180deg);
  }

  .header-panel-item__children {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    overflow: hidden;
    height: 0;
    margin: 0;
    padding: 0;
  }

  .header-panel-item__disclosure[open]:not([data-closing]) .header-panel-item__children {
    height: auto;
    margin-top: 12px;
  }

  .header-panel-item__child {
    color: var(--color-neutral);
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 20px;
    opacity: 0.7;
    text-align: start;
    text-decoration: none;
  }

  .header-panel-item__rule {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-neutral) 20%, transparent);
  }

  @media (width >= 750px) and (width < 1366px) {
    .header-panel-item {
      gap: 28px;
    }

    .header-panel-item__summary {
      min-height: 48px;
    }

    .header-panel-item__title {
      font-size: 22px;
      line-height: 1.4;
    }

    .header-panel-item__chevron .icon {
      width: 28px;
      height: 28px;
    }

    .header-panel-item__children {
      gap: 16px;
    }

    .header-panel-item__child {
      display: flex;
      align-items: center;
      min-height: 44px;
      font-size: 18px;
      line-height: 1.4;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .header-panel-item__chevron {
      transition: none;
    }
  }
/* END_SNIPPET:header-panel-item */

/* START_SNIPPET:icon-button (INDEX:55) */
.icon-button {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    padding: 0;
    border: 0;
    background: none;
    color: var(--icon-button-glyph);
    text-decoration: none;
    cursor: pointer;
  }

  /**
   * The shape is taken out of flow so the single grid cell centres the glyph on
   * its own, without the shape's box influencing the alignment.
   */
  .icon-button__shape {
    position: absolute;
    inset: 0;
    color: var(--icon-button-fill);
    transition: color 0.2s ease;
    transform: rotate(45deg);
  }

  .icon-button__glyph {
    position: relative;
    display: inline-flex;
  }

  .icon-button--primary {
    --icon-button-fill: var(--color-primary);
    --icon-button-glyph: var(--color-neutral);
  }

  .icon-button--accent {
    --icon-button-fill: var(--color-accent);
    --icon-button-glyph: var(--color-primary);
  }

  .icon-button--secondary {
    --icon-button-fill: var(--color-secondary);
    --icon-button-glyph: var(--color-primary);
  }

  .icon-button:hover .icon-button__shape,
  .icon-button:focus-visible .icon-button__shape {
    color: var(--icon-button-fill-hover, var(--icon-button-fill));
  }

  .icon-button--primary:hover {
    --icon-button-fill-hover: color-mix(in srgb, var(--color-primary) 85%, white);
  }

  .icon-button--accent:hover,
  .icon-button--secondary:hover {
    --icon-button-fill-hover: color-mix(in srgb, var(--icon-button-fill) 85%, black);
  }

  .icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.35;
  }

  @media (prefers-reduced-motion: reduce) {
    .icon-button__shape {
      transition: none;
    }
  }
/* END_SNIPPET:icon-button */

/* START_SNIPPET:icon (INDEX:56) */
.icon {
    display: inline-flex;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
  }

  .icon > svg {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:icon */

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

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

/* START_SNIPPET:label (INDEX:58) */
/**
   * The design gives the small size larger text (16px) than the default (14px).
   * That reads like a slip in the style guide, but it is reproduced as drawn —
   * worth confirming with design before relying on it.
   */
  .label {
    display: inline-flex;
    align-items: center;
    border-radius: 32px;
    background-color: var(--color-light);
    color: var(--color-dark);
    font-family: var(--font-primary--family);
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
  }

  .label__text {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding-inline: 4px;
  }

  .label--default {
    padding: 8px 12px;
    font-size: var(--body-s-size);
    line-height: 1.6;
  }

  .label--small {
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1.5;
  }
/* END_SNIPPET:label */

/* START_SNIPPET:link (INDEX:59) */
.link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-foreground);
    font-family: var(--font-primary--family);
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
  }

  .link--default {
    gap: 8px;
    font-size: var(--body-m-size);
    line-height: var(--body-m-leading);
  }

  .link--small {
    gap: 4px;
    font-size: 16px;
    line-height: 1.5;
  }

  .link:hover .link__text {
    text-decoration: underline;
  }
/* END_SNIPPET:link */

/* START_SNIPPET:logo (INDEX:60) */
.logo {
    display: inline-flex;
    height: var(--logo-height);
  }

  .logo > svg {
    width: auto;
    height: 100%;
  }
/* END_SNIPPET:logo */

/* START_SNIPPET:payment-icons (INDEX:63) */
.payment-icons {
    display: flex;
    align-items: center;
    gap: var(--payment-icons-gap, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .payment-icons__item {
    display: inline-flex;
    flex-shrink: 0;
  }

  /**
   * The marks are drawn on a square canvas each, so one size covers all four
   * and their differing artwork widths stay optically centred.
   */
  .payment-icons__item > svg {
    width: var(--payment-icon-size);
    height: var(--payment-icon-size);
  }
/* END_SNIPPET:payment-icons */

/* START_SNIPPET:quantity-stepper (INDEX:64) */
/**
   * The pill repeats the outlined button's geometry — 1px Primary border, 48px
   * radius, 30px of inline padding — so the stepper and the add-to-cart button
   * beside it read as one control pair. The height is set explicitly for the
   * same reason it is on `.button`: Figma trims its text box to the cap height,
   * which browsers do not do.
   */
  .quantity {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: var(--quantity-height, 80px);
    padding-inline: var(--quantity-padding-inline, 30px);
    border: 1px solid var(--color-primary);
    border-radius: 48px;
    color: var(--color-primary);
  }

  .quantity__step {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .quantity__step:hover {
    opacity: 0.6;
  }

  /**
   * `critical.css` styles inputs at element level through `:where()`, which has
   * zero specificity, so these single-class rules strip the field chrome
   * without needing `!important`. The spinner buttons are hidden in both their
   * vendor form: the two step controls replace them.
   */
  .quantity__input {
    width: var(--quantity-input-width, 2ch);
    padding: 0;
    padding-inline: var(--quantity-input-gap, 16px);
    border: 0;
    background: none;
    box-sizing: content-box;
    font-family: var(--font-primary--family);
    font-size: var(--quantity-font-size, 20px);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    color: inherit;
    appearance: textfield;
  }

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

  .quantity__input:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
  }

  /* The 390 pill is 52px tall with 16px type, matching the buttons beside it. */
  @media (width < 1366px) {
    .quantity {
      --quantity-height: 52px;
      --quantity-padding-inline: 14px;
      --quantity-input-gap: 8px;
      --quantity-font-size: 16px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quantity__step {
      transition: none;
    }
  }
/* END_SNIPPET:quantity-stepper */

/* START_SNIPPET:rating-stars (INDEX:65) */
.rating {
    display: inline-flex;
    align-items: center;
    gap: var(--rating-gap, 12px);
    color: var(--color-primary);
  }

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

  .rating__count {
    font-family: var(--font-primary--family);
    font-size: var(--body-m-size);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-body);
  }
/* END_SNIPPET:rating-stars */

/* START_SNIPPET:shape (INDEX:66) */
/**
   * Filling the wrapper is only the default — the caller sizes the shape by
   * styling it, as the doc above promises. `:where()` drops this rule to zero
   * specificity so a caller's own single-class rule always wins; at equal
   * specificity the winner would depend on the order the theme's stylesheets
   * happen to be bundled in, which is not something a caller can control.
   */
  :where(.shape) {
    display: block;
    width: 100%;
    height: 100%;
  }

  .shape > svg {
    display: block;
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:shape */

/* START_SNIPPET:share-links (INDEX:67) */
.share-links__label {
    margin: 0;
    color: var(--color-primary);
    font-family: var(--font-secondary--family);
    font-size: var(--share-links-label-size, 20px);
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .share-links__label + .share-links__list {
    margin-top: 12px;
  }

  .share-links__list {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .share-links__item {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--color-primary);
    cursor: pointer;
    transition:
      border-color 0.2s ease,
      background-color 0.2s ease;
  }

  .share-links__item:hover {
    border-color: var(--color-primary);
    background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  @media (width < 1366px) {
    .share-links__label {
      --share-links-label-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .share-links__item {
      transition: none;
    }
  }
/* END_SNIPPET:share-links */

/* START_SNIPPET:wave-image (INDEX:68) */
.wave-image {
    aspect-ratio: var(--wave-aspect);
    width: 100%;
    mask: var(--wave-mask) center / 100% 100% no-repeat;
  }

  .wave-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--wave-position);
  }
/* END_SNIPPET:wave-image */