/** Shopify CDN: Minification failed

Line 5129:3 Unexpected ","
Line 8598:3 Unexpected ","

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.error-404 {
    display: grid;
    grid-template-columns: var(--content-grid);
    width: 100%;
    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary, var(--color-foreground));
    font-family: var(--font-primary--family);
  }

  .error-404__inner {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
    padding-block-start: var(--error-404-padding-block-start);
    padding-block-end: var(--error-404-padding-block-end);
    text-align: center;
  }

  .error-404__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md) var(--spacing-xs);
    width: 100%;
    max-width: 40rem;
  }

  .error-404__content > .shopify-block:has(.text),
  .error-404__content > .shopify-block:has(.heading),
  .error-404__content > .shopify-block:has(.richtext),
  .error-404__content > .shopify-block:has(.group) {
    flex: 1 1 100%;
  }

  .error-404__content > .shopify-block:has(.cta) {
    flex: 0 0 auto;
  }

  .error-404 .text,
  .error-404 .heading,
  .error-404 .richtext {
    --text-align: center;
    text-align: center;
  }
/* END_SECTION:404 */

/* START_SECTION:about-this-product (INDEX:1) */
.about-this-product {
    /* Padding fills with the section background; margin is white space outside it. */
    margin-block-start: var(--about-this-product-margin-top-mobile, var(--about-this-product-margin-top, 0));
    margin-block-end: var(--about-this-product-margin-bottom-mobile, var(--about-this-product-margin-bottom, 0));
    padding-block-start: var(--about-this-product-padding-top-mobile, var(--about-this-product-padding-top, 32px));
    padding-block-end: var(--about-this-product-padding-bottom-mobile, var(--about-this-product-padding-bottom, 32px));
    background-color: var(--surface-secondary);
    color: var(--text-primary);
  }

  .about-this-product__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
    width: 100%;
    min-width: 0;
  }

  .about-this-product__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md, 24px);
    width: 100%;
  }

  /* Figma uses Title/Desktop/md (22 / 1.35) on mobile for this heading. */
  .about-this-product__heading {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-feature-settings: var(--font-feature-settings);
    font-size: 22px;
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
    letter-spacing: 0;
  }

  .about-this-product__placeholder {
    margin: 0;
    color: var(--text-secondary);
  }

  .about-this-product__tabs {
    --about-this-product-tab-arrow-size: 16px;
    --about-this-product-tab-arrow-gap: var(--spacing-5xs, 4px);
    --about-this-product-tab-arrow-space: calc(
      var(--about-this-product-tab-arrow-size) + var(--about-this-product-tab-arrow-gap)
    );

    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: flex-start;
    transition: transform 0.2s ease;
  }

  .about-this-product__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 0 var(--spacing-5xs, 4px);
    border: 0;
    border-block-end: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: margin-inline-start 0.2s ease;
  }

  .about-this-product__tab.is-active {
    border-block-end-color: var(--border-brand-dark);
  }

  .about-this-product__tab:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  /* Same expand pattern as .button__icon: width 0 → icon size.
     First tab grows left via negative margin; later tabs expand in place
     while the tablist translates left so the whole row shifts. */
  .about-this-product__tab-arrow {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 0;
    height: var(--about-this-product-tab-arrow-size);
    margin-inline-start: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      width 0.2s ease,
      margin-inline-start 0.2s ease,
      opacity 0.2s ease;
  }

  .about-this-product__tab-arrow .icon {
    display: block;
    width: var(--about-this-product-tab-arrow-size);
    height: var(--about-this-product-tab-arrow-size);
    min-width: var(--about-this-product-tab-arrow-size);
  }

  .about-this-product__panels {
    width: 100%;
    min-width: 0;
  }

  .about-this-product__panel {
    width: 100%;
    min-width: 0;
  }

  .about-this-product__panel[hidden] {
    display: none;
  }

  .about-this-product__carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
    min-width: 0;
  }

  .about-this-product__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .about-this-product__slide {
    min-width: 0;
  }

  /* Full-bleed track so cards can overflow left/right mid-scroll. Pre-init
     CSS padding insets the first card; once mounted, Splide owns padding via
     data-padding-inline="section" (inline styles would override CSS alone). */
  .about-this-product__carousel .carousel__track {
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-inline: var(--section-padding-inline);
  }

  .about-this-product__carousel.is-initialized .carousel__track {
    padding-inline: 0;
  }

  .about-this-product__carousel.carousel:not(.is-initialized) .carousel__list > .carousel__slide {
    flex: 0 0 var(--carousel-card-width-mobile, 280px);
    width: var(--carousel-card-width-mobile, 280px);
    max-width: var(--carousel-card-width-mobile, 280px);
    min-width: 0;
  }

  .about-this-product__controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg, 32px);
  }

  .carousel.is-overflow .about-this-product__controls {
    display: flex;
  }

  .about-this-product__arrows {
    display: none;
    align-items: center;
    gap: var(--spacing-xs, 16px);
  }

  .about-this-product__arrow {
    --about-this-product-arrow-size: 40px;
    --about-this-product-arrow-fill: color-mix(in srgb, currentColor 10%, transparent);

    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: var(--about-this-product-arrow-size);
    height: var(--about-this-product-arrow-size);
    padding: 0;
    border: 1px solid var(--border-invert);
    border-radius: 50%;
    background: var(--about-this-product-arrow-fill);
    color: inherit;
    cursor: pointer;
  }

  .about-this-product__arrow:disabled {
    --about-this-product-arrow-fill: color-mix(in srgb, currentColor 4%, transparent);

    border-color: transparent;
    opacity: 0.5;
    cursor: default;
  }

  .about-this-product__dots:empty {
    display: none;
  }

  .about-this-product__dots {
    display: flex;
  }

  .about-this-product__dots .carousel__dots {
    gap: var(--spacing-5xs, 4px);
  }

  .about-this-product__dots .carousel__dot {
    /* Safari paints default blue chrome on <button> without both prefixes and
       an explicit background-color (shorthand `background` is not enough). */
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    color: inherit;
    background-color: currentColor;
    opacity: 0.3;
    cursor: pointer;
  }

  .about-this-product__dots .carousel__dot.is-active {
    width: 24px;
    height: 6px;
    opacity: 1;
  }

  @media screen and (min-width: 750px) {
    .about-this-product {
      margin-block-start: var(--about-this-product-margin-top);
      margin-block-end: var(--about-this-product-margin-bottom);
      padding-block-start: var(--about-this-product-padding-top);
      padding-block-end: var(--about-this-product-padding-bottom);
    }

    .about-this-product__inner {
      gap: var(--spacing-lg, 32px);
    }

    .about-this-product__header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-lg, 32px);
    }

    .about-this-product__heading {
      flex: 1 1 auto;
      min-width: 0;
    }

    .about-this-product__tabs {
      flex: 0 0 auto;
    }

    .about-this-product__tab-arrow {
      display: inline-flex;
    }

    .about-this-product__tab:hover .about-this-product__tab-arrow,
    .about-this-product__tab:focus-visible .about-this-product__tab-arrow {
      width: var(--about-this-product-tab-arrow-size);
      margin-inline-start: var(--about-this-product-tab-arrow-gap);
      opacity: 1;
    }

    .about-this-product__tab:first-child:hover,
    .about-this-product__tab:first-child:focus-visible {
      margin-inline-start: calc(-1 * var(--about-this-product-tab-arrow-space));
    }

    .about-this-product__tabs:has(.about-this-product__tab:not(:first-child):hover),
    .about-this-product__tabs:has(.about-this-product__tab:not(:first-child):focus-visible) {
      transform: translateX(calc(-1 * var(--about-this-product-tab-arrow-space)));
    }

    .about-this-product__controls {
      justify-content: flex-start;
    }

    .about-this-product__arrows {
      display: flex;
    }

    .about-this-product__carousel.carousel:not(.is-initialized) .carousel__list > .carousel__slide {
      flex: 0 0 var(--carousel-card-width, 332px);
      width: var(--carousel-card-width, 332px);
      max-width: var(--carousel-card-width, 332px);
    }
  }

  /*
    Card typography from the section settings. Bold and italic sit on top of the
    card's own presets, so only the weight and style change.
  */
  .about-this-product--title-bold .about-this-product-card__title,
  .about-this-product--text-bold .about-this-product-card__text {
    font-weight: var(--font-weight-bold);
  }

  .about-this-product--title-italic .about-this-product-card__title,
  .about-this-product--text-italic .about-this-product-card__text {
    font-style: italic;
  }
/* END_SECTION:about-this-product */

/* START_SECTION:announcement-bar (INDEX:2) */
.shopify-section.announcement-bar-section > * {
    grid-column: 1 / -1;
  }

  announcement-bar {
    display: block;
  }

  .announcement-bar {
    --announcement-bar-background: var(--surface-brand-dark);
    --announcement-bar-text: var(--text-invert);
    --announcement-bar-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --announcement-bar-max-lines: 3;
    /* Was 3px to stop the copy reading high when the line box was all the
       room there was. The underline's room is now reserved below the text,
       which balances the strip on its own, so nudging it down again drops the
       copy off centre. */
    --announcement-bar-optical-nudge: 0px;
    --announcement-bar-line-height: 1.2;
    /* How far below the text a link's underline sits. */
    --announcement-bar-underline-gap: 0.18em;
    /* An underline is ink on the underside of the copy only, so a linked
       message reads bottom-heavy sitting where an unlinked one does. This
       lifts it by half that ink to even the strip up. */
    --announcement-bar-underline-lift: 0.18em;
    /* Room for the underline to be painted into, a shade over its own gap so
       subpixel rounding cannot shave the line off. Every use pairs it with a
       negative margin: the room has to exist for painting but must not be
       charged to the layout, or it lands under unlinked copy too. */
    --announcement-bar-underline-room: calc(var(--announcement-bar-underline-gap) + 1px);
    --announcement-bar-padding-block-start: var(--spacing-4xs);
    --announcement-bar-padding-block-end: var(--spacing-4xs);
    --announcement-bar-padding-inline-start: var(--spacing-none);
    --announcement-bar-padding-inline-end: var(--spacing-none);

    position: relative;
    width: 100%;
    /* Override .color-scheme-* primary surface — bar uses brand tokens from the scheme */
    background: var(--announcement-bar-background);
    color: var(--announcement-bar-text);
  }

  /* No announcement markup at all — hide on storefront.
     Empty messages still render a placeholder node in the editor, and
     the section-level placeholder covers the no-blocks case. */
  .announcement-bar:not(:has([data-announcement-message])):not(:has(.announcement-bar__placeholder)) {
    display: none;
  }

  .announcement-bar__ticker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-block-start: calc(
      var(--announcement-bar-padding-block-start) + var(--announcement-bar-optical-nudge)
    );
    padding-block-end: var(--announcement-bar-padding-block-end);
    padding-inline-start: var(--announcement-bar-padding-inline-start);
    padding-inline-end: var(--announcement-bar-padding-inline-end);
    position: relative;
  }

  @media screen and (max-width: 767px) {
    .announcement-bar__ticker {
      padding-block-start: calc(
        var(
            --announcement-bar-padding-block-start-mobile,
            var(--announcement-bar-padding-block-start)
          )
          + var(--announcement-bar-optical-nudge)
      );
      padding-block-end: var(
        --announcement-bar-padding-block-end-mobile,
        var(--announcement-bar-padding-block-end)
      );
      padding-inline-start: var(
        --announcement-bar-padding-inline-start-mobile,
        var(--announcement-bar-padding-inline-start)
      );
      padding-inline-end: var(
        --announcement-bar-padding-inline-end-mobile,
        var(--announcement-bar-padding-inline-end)
      );
    }
  }

  .announcement-bar__viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    /* Room on both sides: below for the underline, above for the lift that
       balances it, since either would otherwise be cut off here. */
    padding-block: var(--announcement-bar-underline-room);
    margin-block: calc(-1 * var(--announcement-bar-underline-room));
  }

  .announcement-bar__track {
    position: relative;
    display: block;
    width: 100%;
  }

  .announcement-bar__track > .shopify-block {
    display: contents;
  }

  .announcement-bar__message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
  }

  /* Rotating: only the active message contributes to height */
  .announcement-bar--rotating .announcement-bar__viewport {
    min-height: calc(1em * var(--announcement-bar-line-height, 1.2));
  }

  .announcement-bar--rotating .announcement-bar__message:not(.is-active):not(.is-exiting) {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    pointer-events: none;
  }

  /* Before JS: show the first contentful message only (theme blocks wrap each message) */
  .announcement-bar--rotating announcement-bar:not([data-ready])
    .announcement-bar__track
    > .shopify-block:has([data-announcement-message]:not([data-empty]))
    .announcement-bar__message,
  .announcement-bar--rotating .announcement-bar__message.is-active {
    position: relative;
    inset: auto;
    z-index: 1;
    height: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
      transform var(--announcement-bar-transition),
      opacity var(--announcement-bar-transition),
      visibility var(--announcement-bar-transition);
  }

  .announcement-bar--rotating announcement-bar:not([data-ready])
    .announcement-bar__track
    > .shopify-block:has([data-announcement-message]:not([data-empty]))
    ~ .shopify-block:has([data-announcement-message]:not([data-empty]))
    .announcement-bar__message {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    pointer-events: none;
  }

  .announcement-bar--rotating .announcement-bar__message.is-exiting {
    position: absolute;
    inset-inline: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    pointer-events: none;
    transition:
      transform var(--announcement-bar-transition),
      opacity var(--announcement-bar-transition),
      visibility var(--announcement-bar-transition);
  }

  .announcement-bar__ticker[data-static] .announcement-bar__message:not([data-empty]) {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }

  .announcement-bar__message-content {
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: var(--font-body-md-size);
    /* Do not use flex/text-box-trim here — both collapse the used height the
       rollover translateY percentages need. The leading is symmetric, so this
       keeps the glyphs centred while leaving the descender space a link's
       underline is drawn into. */
    line-height: var(--announcement-bar-line-height, 1.2);
    font-weight: var(--font-body-md-weight);
    letter-spacing: var(--font-body-md-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
    color: inherit;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--announcement-bar-max-lines);
    overflow: hidden;
    overflow-wrap: anywhere;
    /* The line clamp above clips at the line box, which ends inside the
       descenders, so a link's underline is painted outside it and disappears.
       This is the room it is painted into. */
    padding-bottom: var(--announcement-bar-underline-room);
    margin-bottom: calc(-1 * var(--announcement-bar-underline-room));
    /* box-sizing is border-box here, so the padding has to be added back or
       the clamp loses a line. */
    max-height: calc(
      1em * var(--announcement-bar-line-height, 1.2) * var(--announcement-bar-max-lines) +
        var(--announcement-bar-underline-room)
    );
  }

  /* Only messages that actually carry an underline get lifted. */
  .announcement-bar__message-content:has(:is(a, u, [style*='underline'])) {
    transform: translateY(calc(-1 * var(--announcement-bar-underline-lift)));
  }

  .announcement-bar__message-content.rte :is(p, h1, h2, h3, h4, h5, h6),
  .announcement-bar__message-content p {
    margin: 0;
    padding: 0;
    display: inline;
    line-height: inherit;
  }

  .announcement-bar__message-content p + p::before {
    content: ' ';
  }

  /* Fake underlines. Do not swap these for text-decoration or border-bottom:
     both are painted outside the inline box and the viewport clip removes them,
     leaving links with no underline at all. A background survives the clip.
     The inline box bottom alone still sits inside the descenders, so the
     padding extends the background box past them — vertical padding on an
     inline element moves where the background paints without affecting layout.
     The message content carries matching room, or the clamp clips the line. */
  .announcement-bar__message-content a,
  .announcement-bar__message-content u,
  .announcement-bar__message-content [style*='underline'] {
    color: inherit;
    text-decoration: none !important;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    padding-bottom: var(--announcement-bar-underline-gap);
  }

  .announcement-bar__message-content a:hover,
  .announcement-bar__message-content a:focus-visible {
    background-size: 100% 2px;
  }

  .announcement-bar__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-block-start: calc(
      var(--announcement-bar-padding-block-start) + var(--announcement-bar-optical-nudge)
    );
    padding-block-end: var(--announcement-bar-padding-block-end);
    padding-inline-start: var(--announcement-bar-padding-inline-start);
    padding-inline-end: var(--announcement-bar-padding-inline-end);
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: var(--font-body-md-size);
    line-height: 1;
    font-weight: var(--font-body-md-weight);
    letter-spacing: var(--font-body-md-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
    text-align: center;
    opacity: 0.7;
  }

  @media (prefers-reduced-motion: reduce) {
    .announcement-bar--rotating .announcement-bar__message.is-active,
    .announcement-bar--rotating .announcement-bar__message.is-exiting {
      transition: opacity 1ms linear;
      transform: none;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article (INDEX:3) */
.article {
    /* Figma hero panel height, mobile hero image ratio and body column width. */
    --article-hero-min-height: 500px;
    --article-hero-media-ratio: 335 / 224;
    --article-hero-max-width: 1118px;
    --article-content-max-width: 890px;

    padding-block-start: var(--article-padding-top, 0);
    padding-block-end: var(--article-padding-bottom, 48px);
    color: var(--text-primary, var(--color-foreground));
    background-color: var(--surface-primary, var(--color-background));
  }

  /* Own chrome above the hero, as in Figma — the trail is not inside the panel. */
  .article__breadcrumbs {
    padding-block: var(--spacing-3xs, 8px);
  }

  /*
    Copy and image meet flush, so the panel radius is split between them. The
    panel sits inside the page column rather than filling it — Figma leaves white
    either side of it, narrowing towards the body column below.
  */
  .article__hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--article-hero-max-width);
    min-width: 0;
    margin-inline: auto;
  }

  .article__hero-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
    min-width: 0;
    padding-block: var(--spacing-lg, 32px);
    padding-inline: var(--spacing-sm, 20px);
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    background-color: var(--surface-secondary, #f5f5f5);
  }

  .article__hero--no-media .article__hero-copy {
    border-radius: var(--radius-md, 8px);
  }

  .article__author {
    margin: 0;
    color: var(--text-primary, #333);
    font-family: var(--font-body--family);
    font-size: var(--font-body-sm-size, 13px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .article__meta-pill {
    padding: var(--spacing-4xs, 6px) var(--spacing-3xs, 8px);
    border-radius: var(--radius-full, 360px);
    background-color: var(--border-brand-light, #c6d97a);
    color: var(--text-primary, #333);
    font-family: var(--font-body--family);
    font-size: var(--font-eyebrow-xs-size, 11px);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--font-eyebrow-xs-line-height, 1);
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .article__title {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--font-title-lg-size, 22px);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-title-lg-line-height, 1.2);
    font-feature-settings: var(--font-feature-settings);
  }

  .article__hero-media {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: var(--article-hero-media-ratio);
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
    background-color: var(--surface-secondary, #f5f5f5);
  }

  .article__hero-image,
  .article__hero-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article__hero-placeholder {
    padding: var(--spacing-lg, 32px);
  }

  /*
    Normal flow, not flex: `.rte` in critical.css already spaces headings and
    paragraphs via margin-block-end, so a flex gap here would stack on top of
    those margins. First/last margin trimming and link styling come from there
    too — only the Figma type treatment belongs in this section.
  */
  .article__body {
    width: 100%;
    max-width: var(--article-content-max-width);
    margin-inline: auto;
    margin-block-start: var(--spacing-sm, 20px);
    font-family: var(--font-body--family);
    font-size: var(--font-body-xl-size, 16px);
    line-height: var(--font-body-xl-line-height, 1.3);
    color: var(--text-primary, #262626);
  }

  /*
    Figma composes the body from text blocks 48px apart, and the gap lands
    above each heading. Admin RTE has no block wrapper to space, so the
    heading carries it and collapses with the previous element's 20px.
  */
  .article__body h1,
  .article__body h2,
  .article__body h3,
  .article__body h4,
  .article__body h5,
  .article__body h6 {
    margin-block-start: var(--spacing-2xl, 48px);
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-weight: var(--font-weight-regular, 400);
    font-size: var(--font-title-md-size, 18px);
    font-feature-settings: var(--font-feature-settings);
    letter-spacing: var(--font-title-md-letter-spacing, 0);
    line-height: var(--font-title-md-line-height, 1.2);
  }

  .article__body > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-block-start: 0;
  }

  .article__body img,
  .article__body iframe,
  .article__body video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-block: var(--spacing-2xl, 48px);
    border-radius: var(--radius-md, 8px);
  }

  .article__body blockquote {
    margin: 0;
    padding-block: var(--spacing-sm, 20px);
    text-align: center;
    font-family: var(--font-body--family);
    font-size: var(--font-title-md-size, 18px);
    font-style: italic;
    line-height: var(--font-title-md-line-height, 1.35);
  }

  /*
    Editors end a quote with a single `<br>` before the attribution, and CSS
    cannot reach past a line break, so `article-quote-attributions` lifts that
    last line into a figcaption where it can drop the quote's italic type.
  */
  .article__quote {
    margin: 0;
    padding-block: var(--spacing-sm, 20px);
  }

  .article__quote blockquote {
    padding-block: 0;
  }

  .article__quote blockquote p:last-child {
    margin-block-end: 0;
  }

  .article__quote-attribution {
    margin-block-start: var(--spacing-sm, 20px);
    text-align: center;
  }

  .article__quote-cite {
    font-style: normal;
    text-decoration: underline;
  }

  .article__quote-cite a {
    color: inherit;
  }

  /*
    Admin uses two-column tables for image-and-copy sequences, which
    `article-tables-as-lists` rebuilds whatever the row count, leaving wider
    tables and merged cells as real tables.
  */
  /*
    Mobile stacks each pair, and Figma spaces those rows — and the list
    itself — 20px apart. Desktop restores the 48px row gap and block margin.
  */
  .article-definition-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
    margin-block: var(--spacing-sm, 20px);
  }

  .article-definition-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
    min-width: 0;
  }

  /*
    A row that carried one cell leaves the other half of the pair empty, and an
    empty box still takes its share of the stack gap. The desktop rule below
    restores the gap, where the pair is a grid and the column gap is wanted.
  */
  .article-definition-list__item--single {
    row-gap: 0;
  }

  .article-definition-list__term,
  .article-definition-list__description {
    min-width: 0;
    margin: 0;
    font-weight: inherit;
  }

  /*
    `.rte` gives every paragraph 20px under it. On mobile the list and item
    gaps are the only spacing, so that margin would stack on top of them.
    The description takes the same 20px as a gap, which keeps paragraphs
    apart once their own margin is gone. Desktop puts the margin back.
  */
  .article-definition-list__description {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
  }

  .article__body .article-definition-list p {
    margin-block-end: 0;
  }

  /*
    The list sets its own rhythm with gap, so media inside it drops the 48px
    block margin `.article__body img` gives a standalone image. This matches
    that rule's specificity, so it has to stay below it to win.
  */
  .article-definition-list img,
  .article-definition-list iframe,
  .article-definition-list video {
    margin-block: 0;
  }

  @media screen and (min-width: 750px) {
    .article__breadcrumbs {
      padding-block: var(--spacing-xs, 16px);
    }

    .article__hero {
      display: grid;
      grid-template-columns: minmax(0, 480fr) minmax(0, 638fr);
      min-height: var(--article-hero-min-height);
    }

    /* Copy is centred in the panel beside the image, and the radius splits left/right. */
    .article__hero-copy {
      justify-content: center;
      gap: var(--spacing-md, 24px);
      padding: var(--spacing-2xl, 48px);
      border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
    }

    /*
      The 500px floor exists to fill the panel beside the image. With no image
      the copy sizes to its own content instead.
    */
    .article__hero--no-media {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }

    .article__hero--no-media .article__hero-copy {
      border-radius: var(--radius-lg, 12px);
    }

    .article__hero-media {
      aspect-ratio: auto;
      height: 100%;
      min-height: var(--article-hero-min-height);
      border-radius: 0 var(--radius-lg, 12px) var(--radius-lg, 12px) 0;
    }

    .article__body {
      margin-block-start: var(--spacing-xl, 40px);
    }

    /*
      Figma sets the quote on the full 890px column, so the inset is estimated.
      20px a side is the largest step that still holds the design's line break:
      its longest line measures 848px here, leaving 42px of total headroom.
    */
    .article__body blockquote {
      padding-inline: var(--spacing-sm, 20px);
    }

    .article-definition-list {
      gap: var(--spacing-2xl, 48px);
      margin-block: var(--spacing-2xl, 48px);
    }

    .article-definition-list__item {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-2xl, 48px);
      align-items: center;
    }

    .article-definition-list__description {
      display: block;
    }

    .article__body .article-definition-list p {
      margin-block-end: var(--spacing-sm, 20px);
    }

    .article__hero-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
  }
/* END_SECTION:article */

/* START_SECTION:blog (INDEX:4) */
.blog-listing {
    --blog-listing-grid-offset-mobile: 30px;
    --touch-target-size: 44px;

    box-sizing: border-box;
    padding-inline: 0;
    padding-block-start: var(--blog-listing-padding-block-start-mobile, var(--blog-listing-padding-block-start));
    padding-block-end: var(--blog-listing-padding-block-end-mobile, var(--blog-listing-padding-block-end));
  }

  .blog-listing__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .blog-listing__hero {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
    align-items: center;
    padding: var(--spacing-lg, 32px) var(--spacing-sm, 20px);
    border-radius: 0;
    background-color: var(--surface-secondary, #f5f5f5);
  }

  .blog-listing__intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    max-width: 45rem;
    text-align: center;
  }

  .blog-listing__title {
    margin: 0;
    color: var(--text-primary, #000);
    font-size: var(--font-title-lg-size, 22px);
    font-weight: var(--font-title-lg-weight, 400);
    line-height: var(--font-title-lg-line-height, 1.2);
    letter-spacing: var(--font-title-lg-letter-spacing, 0);
    text-align: center;
  }

  .blog-listing__description {
    margin: 0;
    color: var(--text-primary, #000);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size, 14px);
    font-weight: var(--font-body-md-weight, 400);
    line-height: var(--font-body-md-line-height, 1.4);
    text-align: center;
  }

  .blog-listing__search {
    display: flex;
    gap: var(--spacing-3xs, 8px);
    align-items: center;
    width: 100%;
    max-width: 335px;
    height: 40px;
    padding: var(--spacing-3xs, 8px);
    border-radius: var(--radius-full, 360px);
    background-color: var(--surface-primary, #fff);
    backdrop-filter: blur(5px);
  }

  .blog-listing__search-icon {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-primary, #333);
  }

  .blog-listing__search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary, #333);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size, 14px);
    font-weight: var(--font-body-md-weight, 400);
    line-height: var(--font-body-md-line-height, 1.4);
  }

  .blog-listing__search-input::placeholder {
    color: var(--text-primary, #333);
    opacity: 1;
  }

  .blog-listing__search-input:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 4px;
  }

  .blog-listing__search-submit {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 5px;
    border: 0;
    border-radius: var(--radius-full, 360px);
    background-color: var(--surface-brand-dark, #4d9d34);
    color: var(--text-invert, #fff);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .blog-listing__search-submit:hover {
    background-color: var(--border-brand-light, #c6d97a);
  }

  .blog-listing__search-submit:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  .blog-listing__filters {
    --blog-filter-visual-height: calc(
      var(--font-button-md-size, 13px) * var(--font-button-md-line-height, 1.4) + var(--spacing-5xs, 4px) + 1px
    );

    display: flex;
    gap: var(--spacing-sm, 20px);
    align-items: stretch;
    justify-content: flex-start;
    /* Figma runs the row past the right edge, so it bleeds out of the hero inset. */
    align-self: stretch;
    min-height: var(--touch-target-size);
    /* overflow-x would clip a 44px ::before; size the scroller to the hit area
       and pull the extra height back so the hero gap stays on the Figma 22px row. */
    margin-block: calc((var(--blog-filter-visual-height) - var(--touch-target-size)) / 2);
    margin-inline-end: calc(var(--spacing-sm, 20px) * -1);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .blog-listing__filters::-webkit-scrollbar {
    display: none;
  }

  .blog-listing__filter {
    display: inline-flex;
    flex-shrink: 0;
    align-items: flex-end;
    box-sizing: border-box;
    min-height: var(--touch-target-size);
    padding: 0 0 var(--spacing-5xs, 4px);
    border-bottom: 1px solid transparent;
    color: var(--text-primary, #333);
    font-family: var(--font-primary--family);
    font-size: var(--font-button-md-size, 13px);
    font-weight: var(--font-button-md-weight, 600);
    line-height: var(--font-button-md-line-height, 1.4);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Figma hover slides an arrow in after the label. */
  .blog-listing__filter-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      width 0.2s ease,
      margin-inline-start 0.2s ease,
      opacity 0.2s ease;
  }

  .blog-listing__filter-icon .icon {
    display: block;
    width: var(--size-4, 16px);
    height: var(--size-4, 16px);
  }

  @media screen and (hover: hover) {
    .blog-listing__filter:hover .blog-listing__filter-icon,
    .blog-listing__filter:focus-visible .blog-listing__filter-icon {
      width: var(--size-4, 16px);
      margin-inline-start: var(--spacing-3xs, 8px);
      opacity: 1;
    }
  }

  .blog-listing__filter--current {
    border-bottom-color: var(--border-brand-dark, #4d9d34);
  }

  .blog-listing__filter:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  .blog-listing__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm, 20px);
    margin-block-start: var(--blog-listing-grid-offset-mobile);
    padding-inline: var(--spacing-sm, 20px);
  }

  /* Bottom half of .blog-pagination padding-block. That block is omitted on a single page. */
  .blog-listing__grid--no-pagination {
    padding-block-end: var(--spacing-lg, 32px);
  }

  .blog-listing__item {
    min-width: 0;
  }

  .blog-listing__empty {
    margin: var(--spacing-xl, 40px) 0;
    color: var(--text-secondary, #767676);
    font-size: var(--font-body-md-size, 14px);
    text-align: center;
  }

  @media screen and (min-width: 768px) {
    .blog-listing {
      padding-inline: var(--section-padding-inline);
      padding-block-start: var(--blog-listing-padding-block-start);
      padding-block-end: var(--blog-listing-padding-block-end);
    }

    .blog-listing__hero {
      gap: var(--spacing-sm, 20px);
      padding: var(--spacing-xl, 40px) var(--spacing-2xl, 48px);
      border-radius: var(--radius-lg, 12px);
    }

    .blog-listing__intro {
      padding-inline: var(--spacing-lg, 32px);
    }

    .blog-listing__search {
      max-width: 480px;
      height: 50px;
    }

    .blog-listing__filters {
      justify-content: center;
      align-self: center;
      width: auto;
      min-height: 0;
      margin-block: 0;
      margin-inline-end: 0;
      overflow: visible;
    }

    .blog-listing__filter {
      align-items: center;
      min-height: 0;
    }

    .blog-listing__grid {
      gap: var(--spacing-xs, 16px);
      margin-block-start: var(--spacing-lg, 32px);
      padding-inline: 0;
    }

    .blog-listing__grid--no-pagination {
      padding-block-end: var(--spacing-2xl, 48px);
    }
  }

  /* Figma desktop is 3 × 436px. 768px is too narrow for that grid. */
  @media screen and (min-width: 1200px) {
    .blog-listing__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
/* END_SECTION:blog */

/* START_SECTION:breadcrumbs (INDEX:5) */
.breadcrumbs-section {
    min-width: 0;
    padding-block-start: var(--breadcrumbs-padding-block-start-mobile, var(--breadcrumbs-padding-block-start));
    padding-block-end: var(--breadcrumbs-padding-block-end-mobile, var(--breadcrumbs-padding-block-end));
    padding-inline: 0;
    color: var(--color-foreground);
  }

  .breadcrumbs-section__inner {
    width: 100%;
    min-width: 0;
    padding-inline: var(--spacing-sm);
  }

  .breadcrumbs {
    min-width: 0;
    min-height: calc(var(--font-body-sm-size) * var(--font-body-sm-line-height));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
  }

  .breadcrumbs::-webkit-scrollbar {
    height: var(--size-1);
  }

  .breadcrumbs::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .breadcrumbs::-webkit-scrollbar-thumb {
    background-color: var(--border-primary);
    border-radius: var(--radius-full);
  }

  .breadcrumbs::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-dark);
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
  }

  .breadcrumbs__item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .breadcrumbs__sep {
    white-space: pre;
  }

  .breadcrumbs__link,
  .breadcrumbs__link:visited {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumbs__link:hover,
  .breadcrumbs__link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

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

    .breadcrumbs-section__inner {
      padding-inline: var(--spacing-2xl);
    }
  }
/* END_SECTION:breadcrumbs */

/* START_SECTION:cart-upsell-recommendations (INDEX:6) */
.cart-upsell-recommendations {
    display: none;
  }
/* END_SECTION:cart-upsell-recommendations */

/* START_SECTION:cart (INDEX:7) */
.cart-page {
    --cart-page-sidebar-width: 27.5rem;

    display: block;
    width: 100%;
    padding-block-start: var(--cart-page-padding-top, 0);
    padding-block-end: var(--cart-page-padding-bottom, 0);
    padding-inline: var(--section-padding-inline, var(--spacing-sm));
    color: var(--text-primary);
    background-color: var(--surface-primary);
  }

  .cart-page__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
  }

  .cart-page__header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-5xs);
    padding-block-end: var(--spacing-2xs);
  }

  .cart-page__title {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: baseline;
    margin: 0;
    color: var(--text-primary);
  }

  .cart-page__count {
    color: var(--text-secondary);
    font-weight: var(--font-weight-regular, 400);
  }

  .cart-page__promo {
    margin: 0 0 var(--spacing-md);
    padding: var(--spacing-4xs) var(--spacing-md);
    background-color: var(--surface-brand-light);
    color: var(--text-primary);
  }

  .cart-page__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    width: 100%;
  }

  .cart-page__blocks:empty {
    display: none;
  }

  .cart-page__form + .cart-page__blocks {
    margin-block-start: var(--spacing-lg);
  }

  .cart-page__form {
    width: 100%;
  }

  .cart-page__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
  }

  .cart-page__main {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .cart-page__items {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
  }

  .cart-page__item {
    width: 100%;
  }

  .cart-page__divider {
    margin: var(--spacing-md) 0;
    border: 0;
    border-block-start: 1px solid var(--border-secondary);
  }

  .cart-page__sidebar {
    width: 100%;
  }

  .cart-page[data-busy] .cart-page__form {
    opacity: 0.6;
    pointer-events: none;
  }

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

  @media screen and (min-width: 768px) {
    .cart-page__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, var(--cart-page-sidebar-width));
      align-items: start;
      gap: var(--spacing-xl);
    }

    .cart-page__sidebar {
      position: sticky;
      top: calc(var(--header-height, 0px) + var(--spacing-lg));
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:8) */
.product-listing {
    padding-block-start: var(--product-listing-padding-block-start-mobile, var(--product-listing-padding-block-start));
    padding-block-end: var(--product-listing-padding-block-end-mobile, var(--product-listing-padding-block-end));
  }

  .product-listing__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .product-listing__compare-title {
    display: none;
    margin: 0;
    padding: var(--spacing-xl) var(--spacing-sm) 0;
    font-family: var(--font-heading--family);
    font-size: var(--font-h1-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--font-h1-line-height);
    text-align: center;
  }

  .compare-mode .product-listing__compare-title {
    display: block;
  }

  .compare-mode .product-listing .collection-hero {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .product-listing {
      padding-block-start: var(--product-listing-padding-block-start);
      padding-block-end: var(--product-listing-padding-block-end);
    }

    .product-listing__compare-title {
      padding: var(--spacing-2xl) var(--spacing-2xl) 0;
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:9) */
.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-forms (INDEX:10) */
.contact-forms {
    /* Shopify Forms caps its own wrapper at this width, so the enquiry control
       matches it rather than spanning the full container above a narrower form. */
    --contact-forms-form-width: 28.125rem;

    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary, var(--color-foreground));
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }

  .contact-forms__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--contact-forms-max-width, 56.25rem);
    margin-inline: auto;
  }

  .contact-forms__root {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .contact-forms__control {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    width: 100%;
    max-width: var(--contact-forms-form-width);
  }

  /* Outranks the `display: flex` above so JS can hide the control with
     the `hidden` attribute when there is only one form. */
  .contact-forms__control[hidden] {
    display: none;
  }

  .contact-forms__label {
    color: var(--text-primary);
  }

  .contact-forms__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .contact-forms__select {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding-block: var(--spacing-2xs);
    padding-inline: var(--spacing-sm) var(--spacing-2xl);
    border: 1px solid var(--border-secondary, currentcolor);
    border-radius: var(--style-border-radius-inputs, 4px);
    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary);
    appearance: none;
    cursor: pointer;
  }

  .contact-forms__select:focus-visible {
    outline: 2px solid var(--border-brand-dark, currentcolor);
    outline-offset: 2px;
  }

  .contact-forms__select-icon {
    position: absolute;
    inset-inline-end: var(--spacing-sm);
    display: flex;
    pointer-events: none;
    color: var(--text-primary);
  }

  .contact-forms__panels {
    width: 100%;
    min-width: 0;
  }

  contact-forms:not(.is-ready) [data-contact-forms-control] {
    visibility: hidden;
  }

  /*
    Pre-JS: show the first non-empty panel only so a flash of stacked forms
    does not happen before the web component hides the rest.
  */
  contact-forms:not(.is-ready) [data-contact-forms-panel][data-empty='false'] ~ [data-contact-forms-panel] {
    display: none;
  }

  contact-forms:not(.is-ready) [data-contact-forms-panel][data-empty='true'] {
    display: none;
  }
/* END_SECTION:contact-forms */

/* START_SECTION:custom-section (INDEX:11) */
.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:customer-reviews (INDEX:12) */
/*
    Side inset is the frame's, not the page shell. Mobile is spacing-sm
    (20px); the shell margin is 16px. From 750px both are spacing-2xl (48px).
    The track bleeds through that inset on both sides. Splide puts the same
    length back as track padding, so the first and last cards sit inset while
    a card in motion is clipped at the frame edge rather than along an inner line.
  */
  .customer-reviews.section--full-width {
    --customer-reviews-inline: var(--spacing-sm);

    position: relative;
    box-sizing: border-box;
    min-width: 0;
    padding-block-start: var(--customer-reviews-padding-top-mobile, 48px);
    padding-block-end: var(--customer-reviews-padding-bottom-mobile, 48px);
    padding-inline: var(--customer-reviews-inline);
    background: var(--customer-reviews-background, transparent);
  }

  .customer-reviews__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--surface-invert);
  }

  .customer-reviews__picture {
    position: absolute;
    inset: 0;
  }

  /*
    Global img { max-width: 100%; height: auto } leaves a hairline of the
    media colour along the left edge of a cover image. The extra pixel is
    clipped by the media box.
  */
  .customer-reviews__image {
    display: block;
    width: calc(100% + 1px);
    max-width: none;
    height: 100%;
    margin-inline-start: -1px;
    object-fit: cover;
  }

  .customer-reviews__overlay {
    position: absolute;
    inset: 0;
    background: var(--customer-reviews-overlay, transparent);
  }

  .customer-reviews__overlay--multiply {
    mix-blend-mode: multiply;
  }

  .customer-reviews__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    width: 100%;
    min-width: 0;
  }

  /*
    The heading block writes --text-align inline. The design centres it
    below 750px and left-aligns it from there, so the section owns alignment.
  */
  .customer-reviews__header .text-block {
    color: var(--customer-reviews-chrome, var(--text-invert));
    text-align: center;
  }

  .customer-reviews__feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    min-width: 0;
  }

  .customer-reviews__carousel {
    --carousel-padding-inline: var(--customer-reviews-inline);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    min-width: 0;
  }

  /*
    Bleed to the frame edge. Pre-init padding insets the end cards; once
    mounted, Splide owns that padding via data-padding-inline="custom"
    (its inline styles would override CSS alone).
  */
  .customer-reviews__carousel .carousel__track {
    margin-inline: calc(var(--customer-reviews-inline) * -1);
    padding-inline: var(--customer-reviews-inline);
  }

  .customer-reviews__carousel.is-initialized .carousel__track {
    padding-inline: 0;
  }

  /*
    Splide sets the list to height 100%, and a percentage height on each
    card then resolves to that card's own copy. Auto height lets the row
    stretch every card to the tallest one.
  */
  .customer-reviews__carousel .splide__list {
    height: auto;
    align-items: stretch;
  }

  .customer-reviews__card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    box-sizing: border-box;
    height: auto;
    align-self: stretch;
    padding-block: var(--spacing-2xl);
    padding-inline: var(--spacing-sm);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    backdrop-filter: blur(10px);
  }

  .customer-reviews__rating {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5xs);
    align-items: center;
    padding-block: var(--spacing-5xs);
    padding-inline: var(--spacing-3xs);
  }

  /*
    Figma star row is 86×14: five 14px stars with spacing-5xs between them.
    14px is not on the size scale.
  */
  .customer-reviews__stars {
    --customer-reviews-star-size: 14px;
    --customer-reviews-stars-width: calc(
      (5 * var(--customer-reviews-star-size)) + (4 * var(--spacing-5xs))
    );

    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--customer-reviews-stars-width);
    height: var(--customer-reviews-star-size);
    overflow: hidden;
    color: var(--text-brand);
  }

  .customer-reviews__stars-track,
  .customer-reviews__stars-fill {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: center;
    width: var(--customer-reviews-stars-width);
    height: var(--customer-reviews-star-size);
  }

  .customer-reviews__stars-track {
    opacity: 0.35;
  }

  .customer-reviews__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    width: var(--customer-reviews-fill, 100%);
  }

  .customer-reviews__star {
    display: flex;
    flex-shrink: 0;
    width: var(--customer-reviews-star-size);
    height: var(--customer-reviews-star-size);
  }

  .customer-reviews__star-icon {
    display: block;
    width: var(--customer-reviews-star-size);
    height: var(--customer-reviews-star-size);
  }

  .customer-reviews__score {
    color: var(--text-primary);
    font-family: var(--font-accent--family);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .customer-reviews__copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    min-width: 0;
  }

  /*
    Card title stays 16px / 1.3 at every width. body-2xl is 16px on mobile
    and 18px from 768px, so the token cannot carry this size.
  */
  .customer-reviews__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--text-primary);
    font-family: var(--font-heading--family);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
  }

  /*
    Body stays 14px / 1.4 at every width. body-md is 13px on mobile.
    Breaks are <br> elements. pre-line stops the line clamp from counting lines.
  */
  .customer-reviews__body {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    color: var(--text-primary);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
  }

  .customer-reviews__controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
  }

  .carousel.is-overflow .customer-reviews__controls {
    display: flex;
  }

  .customer-reviews__arrows {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
  }

  /*
    Splide's arrow skin absolutely centres .splide__arrow and paints the svg
    black. These buttons live in the controls row, so that skin is reset here.
    The extra class wins if that skin loads after this stylesheet.
  */
  .customer-reviews__arrow.splide__arrow {
    position: static;
    inset: auto;
    transform: none;
    z-index: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-10);
    height: var(--size-10);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--customer-reviews-chrome, var(--text-invert)) 16%, transparent);
    color: var(--customer-reviews-chrome, var(--text-invert));
    backdrop-filter: blur(20px);
    cursor: pointer;
  }

  .customer-reviews__arrow.splide__arrow svg {
    fill: currentColor;
    width: 24px;
    height: 24px;
  }

  .customer-reviews__arrow:disabled,
  .customer-reviews__arrow[aria-disabled='true'] {
    opacity: 0.5;
    cursor: default;
  }

  .customer-reviews__dots:empty {
    display: none;
  }

  .customer-reviews__dots .carousel__dots {
    gap: var(--spacing-5xs);
  }

  .customer-reviews__dots .carousel__dot {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: var(--customer-reviews-chrome, var(--text-invert));
    opacity: 0.3;
    cursor: pointer;
  }

  /*
    carousel.css paints the active dot with currentColor, and that file
    loads after this one. The extra class keeps the active dot on the
    same chrome colour as the idle dots.
  */
  .customer-reviews__dots .carousel__dot.is-active {
    width: var(--size-6);
    height: 6px;
    background-color: var(--customer-reviews-chrome, var(--text-invert));
    opacity: 1;
  }

  .customer-reviews__status {
    margin: 0;
    color: var(--customer-reviews-chrome, var(--text-invert));
    font-family: var(--font-body--family);
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .customer-reviews.section--full-width {
      --customer-reviews-inline: var(--spacing-2xl);

      padding-block-start: var(--customer-reviews-padding-top, 80px);
      padding-block-end: var(--customer-reviews-padding-bottom, 80px);
    }

    .customer-reviews__header .text-block {
      text-align: start;
    }

    .customer-reviews__controls {
      justify-content: flex-start;
    }

    .customer-reviews__arrows {
      display: flex;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .customer-reviews__card {
      backdrop-filter: none;
      background-color: var(--surface-primary);
    }

    .customer-reviews__arrow {
      backdrop-filter: none;
    }
  }
/* END_SECTION:customer-reviews */

/* START_SECTION:faqs (INDEX:13) */
.faqs {
    padding-block-start: var(--faqs-padding-top);
    padding-block-end: var(--faqs-padding-bottom);
    scroll-margin-top: calc(var(--header-height, 120px) + var(--spacing-xs));
  }

  .faqs__inner {
    width: 100%;
  }

  .faqs__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--spacing-2xl) var(--spacing-lg);
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
  }

  .faqs__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Default gap = header group → accordion (Figma spacing-lg) */
    gap: var(--spacing-lg);
    width: 100%;
  }

  .faqs__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Title → subtext (Figma spacing-xs / 16px) */
    gap: var(--spacing-xs);
    width: 100%;
    max-width: 34.875rem;
    text-align: center;
  }

  .faqs__content > .shopify-block:has(.heading),
  .faqs__content > .shopify-block:has(.richtext),
  .faqs__content > .shopify-block:has(.text-block) {
    width: 100%;
    max-width: 34.875rem;
    text-align: center;
  }

  /*
    Blocks mode: heading + intro richtext are siblings under .faqs__content, so
    the default lg gap would sit between title and body. Pull only a direct
    intro richtext up to spacing-xs — not an accordion (answers nest .richtext).
  */
  .faqs__content > .shopify-block:has(.heading) + .shopify-block:has(> .richtext) {
    margin-block-start: calc(var(--spacing-xs) - var(--spacing-lg));
  }

  .faqs__content > .shopify-block:has(.heading) .heading,
  .faqs__content > .shopify-block:has(.richtext) .richtext,
  .faqs__content > .shopify-block:has(.text-block) .text-block {
    text-align: center;
  }

  .faqs__content > .shopify-block:has(.accordion),
  .faqs__content > .shopify-block:has(accordion-custom),
  .faqs__content > .accordion,
  .faqs__content > accordion-custom {
    width: 100%;
  }

  .faqs__title {
    margin: 0;
    text-align: center;
    color: var(--text-primary);
  }

  .faqs__subtext {
    width: 100%;
    margin: 0;
    text-align: center;
    color: var(--text-primary);
  }

  /*
    metafield_tag nests a wrapper + <p>, so `.rte :is(...)` in critical.css adds
    trailing rhythm inside the header. `:is` here (not `:where`) to match that
    0 1 1 specificity and win on source order, keeping the gap at 16px.
  */
  .faqs__subtext :is(p, div, ul, ol, h1, h2, h3, h4, h5, h6) {
    margin-block: 0;
  }

  .faqs__content > :first-child,
  .faqs__content > .shopify-block:first-child .heading,
  .faqs__content > .shopify-block:first-child .richtext,
  .faqs__content > .shopify-block:first-child .text-block {
    margin-block-start: 0;
  }

  .faqs__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }

  @media screen and (min-width: 768px) {
    .faqs__panel {
      padding: var(--spacing-2xl) var(--spacing-lg);
    }
  }
/* END_SECTION:faqs */

/* START_SECTION:featured-products (INDEX:14) */
.featured-products-host {
    display: block;
  }

  .featured-products-host[hidden] {
    display: none;
  }

  .featured-products.shop-by-collection {
    --doorway-card-min-width: 256px;

    /* A row with fewer cards than columns keeps each card at the width a full
       row would give it, instead of stretching two cards across the page. The
       percentage resolves against the list where the cap is applied. */
    --shop-by-collection-row-card-max-width: calc(
      (100% - ((var(--shop-by-collection-columns, 5) - 1) * var(--carousel-gap, 16px)))
      / var(--shop-by-collection-columns, 5)
    );
  }

  .featured-products--hide-reviews .product-card__reviews {
    display: none;
  }

  .featured-products__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 20px);
    align-items: center;
    justify-content: space-between;
  }

  .featured-products__header .text-block {
    flex: 1 1 auto;
  }

  /* Stretch every slide to the tallest card. A percentage height does not
     stretch here: the track's height comes from the cards, so 100% stays
     indefinite and each card stays as tall as its own title and swatches.
     The compact card grid in product-card.liquid then pins the add-to-cart
     button to that shared bottom edge. */
  .featured-products .featured-products__slide {
    display: flex;
    align-self: stretch;
    min-width: 0;
    height: auto;
  }

  .featured-products .product-card {
    align-self: stretch;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
  }

  .featured-products--hide-compare .product-card__compare {
    display: none;
  }
/* END_SECTION:featured-products */

/* START_SECTION:filter-content (INDEX:15) */
.filter-content {
    padding-block-start: var(--filter-content-padding-top);
    padding-block-end: var(--filter-content-padding-bottom);
  }

  .filter-content__inner {
    width: 100%;
    min-width: 0;
  }

  .filter-content__root {
    --filter-content-transition-duration: 500ms;
    --filter-content-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
    display: block;
    min-width: 0;
    width: 100%;
  }

  .filter-content__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    min-width: 0;
    width: 100%;
  }

  .filter-content__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
    width: 100%;
  }

  .filter-content__media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    border-radius: var(--radius-md);
  }

  /* Pill mode hosts media below 768px too, so the absolute layers need a frame. */
  .filter-content__media:not(:empty) {
    aspect-ratio: var(--filter-content-image-ratio-mobile, 864 / 532);
  }

  .filter-content__media:empty {
    display: none;
  }

  .filter-content__interaction {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    min-width: 0;
    width: 100%;
  }

  .filter-content--arrow .filter-content__interaction {
    gap: 0;
  }

  .filter-content__items {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    width: 100%;
  }

  .filter-content__triggers {
    display: none;
    gap: var(--filter-content-item-gap, var(--spacing-2xs));
    min-width: 0;
  }

  /* Mobile: the row bleeds past the section padding so pills scroll off the
     screen edge rather than clipping at the page margin. Padding and the
     matching scroll-padding keep the first pill aligned with the content. */
  .filter-content--pill .filter-content__triggers {
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
    width: calc(100% + (var(--section-padding-inline) * 2));
    max-width: none;
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-inline: var(--section-padding-inline);
    scroll-padding-inline: var(--section-padding-inline);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-content--pill .filter-content__triggers::-webkit-scrollbar {
    display: none;
  }

  .filter-content__trigger {
    appearance: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .filter-content__trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* --- Pill triggers --- */
  .filter-content__trigger--pill {
    --filter-content-pill-border-width: 1px;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding:
      calc(var(--spacing-3xs) - var(--filter-content-pill-border-width))
      calc(var(--spacing-xs) - var(--filter-content-pill-border-width));
    border: var(--filter-content-pill-border-width) solid transparent;
    border-radius: var(--radius-full);
    background: var(--filter-content-pill-surface, var(--surface-secondary));
    scroll-snap-align: start;
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-body-md-weight);
    line-height: var(--font-body-md-line-height);
    white-space: nowrap;
  }

  .filter-content__trigger--pill:not(.is-active):hover,
  .filter-content__trigger--pill:not(.is-active):focus-visible {
    border-color: var(--border-brand-dark);
    background: var(--surface-brand-light);
    color: var(--text-primary);
  }

  .filter-content__trigger--pill.is-active {
    background: var(--surface-brand-dark);
    color: var(--text-invert, #fff);
  }

  .filter-content--arrow .filter-content__trigger--pill {
    display: none;
  }

  /* Pills belong in the shared tablist, so hide any still awaiting the move */
  .filter-content--pill [data-filter-item] > .filter-content__trigger--pill {
    display: none;
  }

  /* --- Arrow triggers --- */
  .filter-content__trigger--arrow {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    width: 100%;
    opacity: 0.6;
    transition: opacity 200ms var(--filter-content-transition-easing);
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-size: var(--font-title-xl-size);
    font-weight: var(--font-title-xl-weight);
    line-height: var(--font-title-xl-line-height);
    letter-spacing: var(--font-title-xl-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
  }

  .filter-content__trigger--arrow.is-active {
    opacity: 1;
  }

  .filter-content__trigger-icon {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    /* Figma desktop Arrow-Right instance: 32×32 frame around 26×14.5 path. */
    width: 32px;
    height: 32px;
  }

  .filter-content__trigger-icon .filter-content__arrow-path {
    display: block;
    width: 26px;
    height: auto;
  }

  /* Gated on the setting being on, so nothing later can reveal a hidden arrow */
  .filter-content__root[data-display-arrow='true'] .filter-content__trigger--arrow.is-active .filter-content__trigger-icon {
    display: inline-flex;
  }

  .filter-content__root[data-display-arrow='false'] .filter-content-item__mobile-icon {
    display: none;
  }

  .filter-content--pill .filter-content__trigger--arrow,
  .filter-content--pill .filter-content-item__mobile-row {
    display: none;
  }

  /* --- Arrow item body/media visibility --- */
  .filter-content--arrow .filter-content-item > .filter-content-item__body,
  .filter-content--arrow .filter-content-item > .filter-content-item__media {
    display: none;
  }

  .filter-content--pill .filter-content-item > .filter-content-item__media {
    display: none;
  }

  .filter-content__media .filter-content-item__media {
    display: block;
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--filter-content-transition-duration) var(--filter-content-transition-easing);
  }

  .filter-content__media .filter-content-item__media.is-active {
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Arrow mobile accordion rows --- */
  .filter-content--arrow .filter-content-item__mobile-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: 0 var(--spacing-xs) 0 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-secondary) 60%, transparent);
    color: inherit;
    cursor: pointer;
  }

  .filter-content--arrow .filter-content-item.is-expanded {
    gap: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
  }

  /* Only items that lead somewhere get the affordance */
  .filter-content--arrow .filter-content-item.is-expanded.is-linked {
    cursor: pointer;
  }

  .filter-content--arrow .filter-content-item.is-expanded .filter-content-item__mobile-row {
    display: none;
  }

  /* Expanded card stacks image, then title, then copy */
  .filter-content--arrow .filter-content-item.is-expanded .filter-content-item__media {
    display: block;
    order: -2;
  }

  .filter-content--arrow .filter-content-item.is-expanded .filter-content-item__figure {
    border-radius: 0;
    aspect-ratio: var(--filter-content-image-ratio-mobile, 864 / 532);
    height: auto;
  }

  .filter-content--arrow .filter-content-item.is-expanded .filter-content-item__body {
    display: flex;
    padding: var(--spacing-3xs) var(--spacing-sm) var(--spacing-sm);
  }

  /* Expanded card keeps the compact row's title size rather than the desktop list size */
  .filter-content--arrow .filter-content-item.is-expanded .filter-content__trigger--arrow {
    display: flex;
    order: -1;
    padding: var(--spacing-sm) var(--spacing-sm) 0;
    font-size: var(--font-title-md-size);
    line-height: var(--font-title-md-line-height);
    opacity: 1;
  }

  .filter-content-item.is-expanded .filter-content__trigger-icon {
    width: 28px;
    height: 28px;
  }

  .filter-content-item.is-expanded .filter-content__arrow-path {
    width: 16px;
  }

  .filter-content__root[data-display-arrow='true'] .filter-content-item.is-expanded .filter-content__trigger-icon {
    display: inline-flex;
  }

  /*
    A Find out more link replaces the heading arrow. Items without one keep it.
    A CTA with its label cleared and its arrow off still counts (.cta--suppressed),
    so the heading arrow does not come back beside an item that shows neither.
  */
  .filter-content--arrow .filter-content__root[data-display-arrow='true'] .filter-content-item:has(.cta) .filter-content__trigger-icon,
  .filter-content--arrow .filter-content-item:has(.cta) .filter-content-item__mobile-icon {
    display: none;
  }

  /* Storefront before JS ready: show first item only in pill */
  .filter-content__root[data-layout-mode='pill']:not([data-design-mode='true']):not(.is-ready) [data-filter-item] ~ [data-filter-item] {
    display: none;
  }

  @media screen and (min-width: 768px) {
    .filter-content__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--spacing-2xl);
      align-items: stretch;
    }

    .filter-content--media-width-narrow.filter-content--media-right .filter-content__layout {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .filter-content--media-width-narrow.filter-content--media-left .filter-content__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .filter-content--media-width-wide.filter-content--media-right .filter-content__layout {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .filter-content--media-width-wide.filter-content--media-left .filter-content__layout {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .filter-content--media-left .filter-content__content {
      order: 2;
    }

    .filter-content--media-left .filter-content__media {
      order: 1;
    }

    /*
      Lock the media frame so image swaps crossfade in place. Active media used
      to be `position: relative`, which resized the column per image and jumped.
      Match `:not(:empty)` specificity so desktop wins over the mobile 16/9 rule.
    */
    .filter-content__media,
    .filter-content__media:not(:empty) {
      display: block;
      aspect-ratio: var(--filter-content-image-ratio-desktop, 864 / 532);
      height: auto;
      border-radius: var(--radius-lg);
    }

    .filter-content__media:empty {
      display: block;
      background-color: transparent;
    }

    .filter-content__media:not(.has-active-media) {
      background-color: transparent;
    }

    .filter-content__media .filter-content-item__media,
    .filter-content__media .filter-content-item__figure {
      height: 100%;
      min-height: 0;
    }

    .filter-content__content {
      justify-content: flex-start;
      align-self: stretch;
      gap: var(--spacing-2xl);
    }

    .filter-content--arrow .filter-content__content {
      /* Centre the whole text column to the image without redistributing
         free space when active body height animates. */
      justify-content: flex-start;
      align-self: center;
      gap: var(--spacing-2xl);
    }

    .filter-content--pill .filter-content__content {
      justify-content: space-between;
      align-self: stretch;
      min-height: 100%;
      gap: var(--spacing-2xl);
    }

    /* Keep pills in one overflowing row to match design (do not wrap). */
    .filter-content--pill .filter-content__triggers {
      width: auto;
      max-width: 100%;
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: none;
      scrollbar-width: thin;
      /* Room for focus rings; overflow-x:auto otherwise clips outline-offset. */
      padding-block: 4px;
      margin-block: -4px;
    }

    .filter-content--pill .filter-content__triggers::-webkit-scrollbar {
      display: block;
      height: 6px;
    }

    .filter-content--pill .filter-content__triggers::-webkit-scrollbar-thumb {
      background-color: color-mix(in srgb, currentColor 25%, transparent);
      border-radius: var(--radius-full);
    }

    /* Arrow desktop: titles in list, body under active title */
    .filter-content--arrow .filter-content-item__mobile-row {
      display: none;
    }

    .filter-content--arrow .filter-content__trigger--arrow {
      display: flex;
    }

    .filter-content--arrow .filter-content__items {
      gap: var(--filter-content-item-gap, var(--spacing-lg));
      min-height: var(--filter-content-items-min-height, 0);
    }

    .filter-content--arrow .filter-content-item {
      gap: 0;
    }

    .filter-content--arrow .filter-content-item.is-active.is-linked {
      cursor: pointer;
    }

    /*
      Snap body height instead of animating max-height. A 500ms height tween
      slides titles under a still cursor and retriggers hover (PO stutter).
      Image crossfade and body opacity still ease.
    */
    .filter-content--arrow .filter-content-item > .filter-content-item__body {
      display: flex;
      overflow: hidden;
      max-height: 0;
      margin-block-start: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 200ms var(--filter-content-transition-easing);
    }

    .filter-content--arrow .filter-content-item.is-active > .filter-content-item__body {
      max-height: none;
      margin-block-start: var(--spacing-xs);
      opacity: 1;
      visibility: visible;
    }

    /*
      Before JS: stand in for the active panel with the first item's copy,
      which is the item the script activates anyway. Desktop only — on mobile
      the accordion is meant to start collapsed. Needs to outrank the Arrow
      body rule above, hence the specificity.
    */
    .filter-content__root:not(.is-ready) [data-filter-item]:first-child > .filter-content-item__body {
      display: flex;
      overflow: visible;
      max-height: none;
      margin-block-start: var(--spacing-xs);
      opacity: 1;
      visibility: visible;
    }

    .filter-content--arrow .filter-content-item > .filter-content-item__media {
      display: none;
    }

    .filter-content--arrow .filter-content-item.is-expanded {
      background: transparent;
      border-radius: 0;
    }

    .filter-content--arrow .filter-content-item.is-expanded .filter-content__trigger--arrow {
      padding: 0;
      font-size: var(--font-title-xl-size);
      line-height: var(--font-title-xl-line-height);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .filter-content__media .filter-content-item__media,
    .filter-content--arrow .filter-content-item > .filter-content-item__body,
    .filter-content__trigger--arrow {
      transition: none;
    }
  }
/* END_SECTION:filter-content */

/* START_SECTION:filter-drawer (INDEX:16) */
.filter-drawer {
    display: contents;
  }

  .filter-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9996;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgb(0 0 0 / 0.45);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .filter-drawer[data-open] .filter-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .filter-drawer__panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9997;
    display: flex;
    flex-direction: column;
    /* Figma's mobile panel is 335 of 375, leaving the backdrop reachable.
       Content width then matches the 295px facet rows. */
    width: min(100vw - var(--spacing-xl, 40px), 27.5rem);
    height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background-color: var(--surface-primary);
    color: var(--text-primary);
    visibility: hidden;
    transform: translateX(-100%);
    transition:
      transform 300ms ease,
      visibility 0s linear 300ms;
  }

  .filter-drawer[data-open] .filter-drawer__panel {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .filter-drawer__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2xs, 12px);
    padding: var(--spacing-sm, 20px);
  }

  .filter-drawer__title {
    margin: 0;
  }

  .filter-drawer__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-6, 24px);
    height: var(--size-6, 24px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .filter-drawer__close .icon {
    display: block;
    width: var(--size-6, 24px);
    height: var(--size-6, 24px);
  }

  .filter-drawer__close:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .filter-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--spacing-xs, 16px) var(--spacing-sm, 20px);
  }

  .filter-drawer__placeholder {
    margin: 0;
    color: var(--text-secondary);
  }

  @media screen and (min-width: 750px) {
    .filter-drawer__panel {
      width: 500px;
      max-width: 500px;
    }

    .filter-drawer__header {
      padding: var(--spacing-sm, 20px) var(--spacing-lg, 32px);
    }

    .filter-drawer__body {
      padding: var(--spacing-xs, 16px) var(--spacing-lg, 32px);
    }
  }

  /* LiveChat sets these values inline at the maximum practical stacking level,
     so important is required to keep it out of the modal drawer. */
  body:has(.filter-drawer[data-open]) #chat-widget-container {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    .filter-drawer__backdrop,
    .filter-drawer__panel {
      transition: none;
    }
  }
/* END_SECTION:filter-drawer */

/* START_SECTION:footer (INDEX:17) */
/* Background and content both cap at the shell (.section--full-width), so the
     footer stays inside the same 1920px canvas as the sections above it. */
  .site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
    font-family: var(--font-primary--family);
    overflow-x: clip;
    --footer-border-subtle: color-mix(in srgb, var(--footer-text) 20%, transparent);
    --footer-border: color-mix(in srgb, var(--footer-text) 35%, transparent);
    --footer-input-surface: color-mix(in srgb, var(--footer-text) 20%, transparent);
  }

  .site-footer__inner {
    width: 100%;
    padding-block-start: var(--footer-padding-block-start);
    padding-block-end: var(--footer-padding-block-end);
  }

  .site-footer__main {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .site-footer__main > .shopify-block {
    min-width: 0;
    max-width: 100%;
  }

  .site-footer__main > .shopify-block:has(.footer-contact) {
    width: 100%;
    /*
     * The selector and accordion controls already contribute the visual 36px
     * through their 44px/52px touch-target insets, so no layout gap is needed.
     */
    margin-bottom: 0;
  }

  .site-footer__main > .shopify-block:has(.footer-connect) {
    width: 100%;
    /* Figma mobile: 32px between menus and connect column */
    margin-top: var(--spacing-lg);
  }

  .site-footer__utilities {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--footer-border-subtle);
  }

  .site-footer__legal-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__legal-link {
    color: inherit;
    text-decoration: none;
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
    font-feature-settings: var(--font-feature-settings);
  }

  .site-footer__legal-link:hover,
  .site-footer__legal-link:focus-visible {
    text-decoration: underline;
  }

  .site-footer__copyright {
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
    font-feature-settings: var(--font-feature-settings);
  }

  .site-footer__copyright > *:first-child {
    margin-top: 0;
  }

  .site-footer__copyright > *:last-child {
    margin-bottom: 0;
  }

  @media screen and (min-width: 768px) {
    .site-footer__main {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      column-gap: var(--footer-gap);
      row-gap: var(--spacing-2xl);
    }

    .site-footer__main > .shopify-block:has(.footer-contact) {
      flex: 0 1 290px;
      width: 290px;
      max-width: 290px;
    }

    .site-footer__main > .shopify-block:has(.menu--column) {
      flex: 0 1 auto;
      width: auto;
      min-width: 0;
    }

    .site-footer__main > .shopify-block:has(.footer-connect) {
      flex: 0 1 302px;
      width: 302px;
      max-width: min(302px, 100%);
      margin-top: 0;
      margin-left: auto;
    }

    .site-footer__utilities {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-md);
      /* Vertical rhythm is 48px; --footer-gap remains the 80px column gap. */
      margin-top: var(--spacing-2xl);
      padding-top: var(--spacing-2xs);
      border-top-color: var(--footer-border);
    }

    .site-footer__copyright {
      text-align: right;
      margin-left: auto;
    }
  }

  @media screen and (min-width: 1024px) {
    .site-footer__main {
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    .site-footer__main > .shopify-block:has(.footer-contact) {
      flex: 0 0 290px;
    }

    .site-footer__main > .shopify-block:has(.footer-connect) {
      flex: 0 0 302px;
      margin-left: 0;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:73) */
:root {
    /* Mobile row (68px) plus the search row (40px field + 12px). Must equal the
       rendered height, or the overlay pull-up below leaves the transparent
       header showing page background instead of the hero. */
    --header-height: 120px;
  }

  @property --header-logo-primary-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
  }

  @property --header-logo-inverse-opacity {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }

  .header-section {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Sticky positioning makes this a stacking context, so the drawer inside it
     can never out-paint a chat launcher appended to the body. Lifting the
     section itself is what puts the open drawer above one, and leaving it
     sticky keeps the header in flow so nothing below it shifts. */
  .header-section:has(.header[data-mobile-open]),
  .header-section:has(.header[data-search-open]) {
    z-index: 2147483000;
  }

  /* Dock announcement + header to the viewport while search is open so the
     overlay still lines up when the page is scrolled. Height is measured in
     predictive-search.js. */
  body:has(.header[data-search-open]) .announcement-bar-section {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2147483001;
  }

  body:has(.header[data-search-open]) {
    --header-overlay-surface: var(--surface-primary);
  }

  body:has(.header[data-search-open]) .header-section {
    position: fixed;
    top: var(--announcement-bar-offset, 0px);
    right: 0;
    left: 0;
    width: 100%;
    overflow: visible;
    background-color: var(--header-overlay-surface);
  }

  /* LiveChat sets an inline maximum z-index, so it must be suppressed while
     the modal drawer is open instead of competing in the stacking context. */
  body:has(.header[data-mobile-open]) [id='chat-widget-container'],
  body:has(.header[data-search-open]) [id='chat-widget-container'] {
    visibility: hidden !important;
  }

  /* Named rather than matched as the adjacent sibling: an app or extension that
     injects an element between the header group and the main content took the
     pull-up with it, which dropped the hero out from behind a header still
     painting itself transparent. */
  .header-section:has(.header[data-overlay='true']) ~ main {
    margin-block-start: calc(-1 * var(--header-height));
    /* Sections read this to inset content that would otherwise start behind the
       nav. Under a solid header the rule never matches, so they get the 0px
       fallback instead. */
    --header-overlay-offset: var(--header-height);
  }

  /* The sibling above is the main content element, not a section, and custom
     properties inherit, so every section would see the offset. Only the first
     one is actually pulled under the nav — the rest put it back. */
  .header-section:has(.header[data-overlay='true']) ~ main > * + * {
    --header-overlay-offset: 0px;
  }

  .header {
    /* Inherited by the mega panel to time its own reveal. */
    --header-surface-duration: 300ms;
    /* Must stay 0. Everything that carries the tone — surface, text, logo,
       pills — has to change in one go. Easing any of it pins the text tone to
       one end of the fade while the surface travels to the other, and no
       duration short of zero makes that legible over every hero: fading a white
       surface in under white text is the defect this header was reported for. */
    --header-tone-duration: 0ms;
    --header-nav-hover-duration: 150ms;
    --header-surface-easing: ease;
    position: relative;
    display: block;
    /* .header__shell applies the section inset instead; see the rule below. */
    padding-inline: 0;
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-body--family);
    transition:
      color var(--header-tone-duration),
      background-color var(--header-tone-duration),
      border-color var(--header-tone-duration),
      --header-logo-primary-opacity var(--header-tone-duration),
      --header-logo-inverse-opacity var(--header-tone-duration);
    --header-action-hit-size: 44px;
    --header-action-pill-size: 34px;
    /* Transparent padding either side of a pill, from centring it in the hit
       area. Figma measures between the pills, so gaps subtract this. */
    --header-action-slop: calc((var(--header-action-hit-size) - var(--header-action-pill-size)) / 2);
    --header-action-surface: var(--surface-secondary);
    --header-border-color: var(--border-secondary);
    --header-search-surface: var(--surface-secondary);
    --header-overlay-surface: var(--surface-primary);
  }

  .header[data-search-open],
  .header[data-search-open] .predictive-search__panel {
    background-color: var(--header-overlay-surface);
  }

  /* Matches .section--full-width (critical.css). The shell owns the inline inset
     rather than the section root so the mobile drawer, a sibling, stays edge to edge.
     Figma puts the nav row's rules inside this inset, so they stop level with the logo. */
  .header__shell {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--page-width-full);
    margin-inline: auto;
    padding-inline: var(--section-padding-inline);
  }

  .header__mobile-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 68px;
    padding-block: var(--spacing-2xs, 12px);
  }

  .header__desktop-primary,
  .header__desktop-navigation {
    display: none;
  }

  .header__mobile-search {
    padding-block-end: var(--spacing-2xs, 12px);
  }

  .header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-2xs, 12px);
  }

  .header__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--header-action-hit-size);
    min-height: var(--header-action-hit-size);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .header__mobile-toggle {
    justify-self: start;
  }

  .header__actions--mobile {
    justify-self: end;
    gap: 0;
  }

  .header__mobile-row .header__action::before {
    position: absolute;
    z-index: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 360px);
    background: var(--header-action-surface);
    backdrop-filter: blur(25px);
    transition: background-color var(--header-tone-duration);
    content: '';
  }

  .header__mobile-row .header__cart::before {
    content: none;
  }

  .header__mobile-row .header__action .icon {
    position: relative;
    z-index: 1;
  }

  /* Overlaps the bag's top corner and has to stay above the icon. */
  .header__cart-count {
    position: absolute;
    inset: 2px 0 auto auto;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    padding-inline: 4px;
    border-radius: var(--radius-full, 999px);
    /* Header badge in Figma is solid black. text-strong stays #000 on every scheme. */
    background: var(--text-strong);
    color: var(--text-invert);
    font-size: 10px;
    line-height: 1;
  }

  /* Class display:flex would otherwise beat the [hidden] used when the bag is empty. */
  .header__cart-count[hidden] {
    display: none;
  }

  /* Transparent state. The surface is the hero behind it, so it is gated on
     data-tone: without one there is no way to know which text tone the hero can
     carry, and going transparent anyway is a guess that reads as dark text on a
     dark hero or white text on a white page. The attribute is written by
     assets/header.js, so the header also stays solid for the frames before that
     script runs and on any page where it fails to. */
  .header[data-tone][data-overlay='true'][data-at-top='true'][data-menu-open='false']:not(
      [data-search-open]
    ) {
    background: transparent;
    color: var(--text-primary);
    --header-action-surface: color-mix(in srgb, var(--text-primary) 10%, transparent);
    --header-border-color: color-mix(in srgb, var(--border-primary) 60%, transparent);
    --header-search-surface: color-mix(in srgb, var(--text-primary) 12%, transparent);
    --header-logo-primary-opacity: 1;
    --header-logo-inverse-opacity: 0;
  }

  /* Ties with the rule above on specificity and has to stay after it to win.
     Deliberately not raised any higher: one more attribute would put it level
     with the hover rule below, and being later would then keep the inverted
     tone on the solid surface hover brings in. */
  .header[data-tone='dark'][data-overlay='true'][data-at-top='true'][data-menu-open='false']:not(
      [data-search-open]
    ) {
    color: var(--text-invert);
    --header-action-surface: color-mix(in srgb, var(--surface-primary) 10%, transparent);
    --header-search-surface: color-mix(in srgb, var(--surface-primary) 12%, transparent);
    --header-logo-primary-opacity: 0;
    --header-logo-inverse-opacity: 1;
  }

  /* A pointer anywhere over the header brings it to the solid surface before a
     menu opens, so the two arrive on the same background. This has to carry the
     transparent state's attributes to out-specify it, and is limited to real
     hover so a tap cannot leave a touch device stuck on the solid surface. */
  @media screen and (hover: hover) {
    .header[data-overlay='true'][data-at-top='true'][data-menu-open]:not([data-search-open]):not(
        [data-mobile-open]
      ):hover {
      background: var(--surface-primary);
      color: var(--text-primary);
      --header-action-surface: var(--surface-secondary);
      --header-border-color: var(--border-secondary);
      --header-search-surface: var(--surface-secondary);
      --header-logo-primary-opacity: 1;
      --header-logo-inverse-opacity: 0;
    }
  }

  /* An open panel is solid straight away and needed the header not to be easing
     up from transparent underneath it. --header-tone-duration is 0 in every
     state now, so there is no ease left to cancel for it. */

  .header[data-mobile-open] {
    background: var(--surface-primary);
    color: var(--text-primary);
  }

  .header__action:focus-visible,
  .header__cta:focus-visible,
  .header__nav-link:focus-visible,
  .header__nav-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  /* Beats the rule above. Pointer moves into the drawer set this attribute
     because some browsers still match :focus-visible after scripted focus. */
  .header__action[data-suppress-focus]:focus,
  .header-mobile-menu [data-suppress-focus]:focus {
    outline: none;
  }

  @media screen and (min-width: 990px) {
    :root {
      /* Primary row (66px) plus the nav row, which is 46px: its links carry a
         44px target and the row's rules sit outside that. */
      --header-height: 112px;
    }

    .header__mobile-row {
      display: none;
    }

    .header__mobile-search {
      display: none;
    }

    /* Figma sizes the search field rather than letting it flex, so the third
       column takes the slack and right-aligns its own content. */
    .header__desktop-primary {
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: center;
      column-gap: var(--spacing-xl, 40px);
      min-height: 66px;
      padding-block: var(--spacing-2xs, 12px) var(--spacing-3xs, 8px);
    }

    .header__desktop-primary .header-search--desktop {
      width: 316px;
    }

    .header__desktop-primary .header-search--desktop .header-search {
      min-height: 36px;
      padding-inline: var(--spacing-3xs, 8px) var(--spacing-5xs, 4px);
    }

    .header[data-search-open] .header__desktop-primary .header-search--desktop {
      width: 480px;
    }

    .header[data-search-open] .header__desktop-primary .header-search--desktop .header-search {
      padding-inline: var(--spacing-3xs, 8px);
    }

    .header__desktop-navigation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
      border-block: 1px solid var(--header-border-color);
    }

    .header[data-search-open] .header__desktop-navigation {
      display: none;
    }

    .header[data-search-open] .header-mega {
      display: none;
    }

    /* An open panel starts flush against this edge, so the rule would read as a
       line across the panel. Only the colour goes, to keep the row's height. */
    .header__desktop-navigation:has([data-mega-panel]:not([hidden])) {
      border-block-end-color: transparent;
    }

    /* The pill is centred inside the larger hit area, so the trailing action's
       visible edge would stop short of the section line. Shift by the difference,
       leaving the hit area itself untouched. Cart is always the last action. */
    .header__desktop-primary .header__actions {
      gap: var(--spacing-lg, 32px);
      margin-inline-end: calc(var(--header-action-slop) * -1);
    }

    /* Icons sit closer to each other than to the rest of the row, and the
       group's leading pill carries slop the country label does not. */
    .header__desktop-primary .header__icon-group {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing-xs, 16px) - var(--header-action-slop) * 2);
      margin-inline-start: calc(var(--header-action-slop) * -1);
    }

    .header__desktop-primary .header__cart .icon {
      width: 28px;
      height: 28px;
    }

    .header__desktop-primary .header__action::before {
      position: absolute;
      z-index: 0;
      width: var(--header-action-pill-size);
      height: var(--header-action-pill-size);
      border-radius: var(--radius-full, 360px);
      background: var(--header-action-surface);
      backdrop-filter: blur(25px);
      transition: background-color var(--header-tone-duration);
      content: '';
    }

    .header__desktop-primary .header__cart::before {
      content: none;
    }

    .header__desktop-primary .header__action .icon {
      position: relative;
      z-index: 1;
    }

    .header__nav-list {
      display: flex;
      align-items: center;
      gap: var(--spacing-md, 24px);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .header__nav-item {
      position: static;
    }

    .header__nav-item--condensed {
      position: relative;
    }

    .header__nav-parent {
      position: relative;
      display: flex;
      align-items: center;
    }

    .header__nav-link {
      display: flex;
      align-items: center;
      min-height: 44px;
      color: inherit;
      font-size: var(--font-body-md-size);
      text-decoration: none;
    }

    /* Kept in the tab order, and clipped until keyboard focus. A mouse click
       on the link does not match :focus-visible, so the control stays out of
       the row. :focus covers a scripted return from Escape, which does not
       always match :focus-visible. */
    .header__nav-toggle {
      position: absolute;
      top: 50%;
      left: calc(100% + 2px);
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1px;
      height: 1px;
      margin: 0;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      border: 0;
      background: transparent;
      color: inherit;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .header__nav-link:focus-visible + .header__nav-toggle,
    .header__nav-toggle:focus {
      width: 20px;
      height: 20px;
      overflow: visible;
      clip: auto;
      clip-path: none;
      border-radius: var(--radius-full, 999px);
      background: var(--header-action-surface);
    }

    .header__nav-toggle:focus-visible {
      outline-offset: 1px;
    }

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

    /* Unlike the primary row these links never open a panel, so the open-state
       dimming never reaches them and they had no pointer feedback at all. They
       sit on the transparent header over dark media as often as on the solid
       surface, so they fade rather than move between tones. */
    .header__nav--secondary .header__nav-link {
      --header-nav-hover-opacity: 0.7;

      font-weight: var(--font-weight-bold);
      transition: opacity var(--header-nav-hover-duration) var(--header-surface-easing);
    }

    .header__nav--secondary .header__nav-link:focus-visible {
      opacity: var(--header-nav-hover-opacity);
    }

    /* Real hover only, so a tap cannot leave a link stuck faded. */
    @media screen and (hover: hover) {
      .header__nav--secondary .header__nav-link:hover {
        opacity: var(--header-nav-hover-opacity);
      }
    }

    /* The open item is marked by dimming the rest of the row. A weight change
       here would re-measure every link and shift the row under the cursor. */
    .header__nav--primary:has([aria-expanded='true']) .header__nav-link {
      color: var(--text-secondary);
    }

    .header__nav--primary .header__nav-parent:has([aria-expanded='true']) .header__nav-link {
      color: inherit;
    }

    .header__cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--header-action-pill-size);
      padding: var(--spacing-3xs, 8px) var(--spacing-xs, 16px);
      border-radius: var(--radius-full, 999px);
      background: var(--header-search-surface);
      color: inherit;
      font-size: var(--font-body-sm-size);
      font-weight: var(--font-weight-semibold);
      text-decoration: none;
      backdrop-filter: blur(25px);
      /* Only the pill is listed. The label inherits the header's colour, and
         transitioning it here would chase that value and lag the row. */
      transition: background-color var(--header-tone-duration);
    }

    .header__nav--secondary .header__nav-list {
      gap: var(--spacing-md, 24px);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .header {
      --header-surface-duration: 0ms;
      --header-nav-hover-duration: 0ms;
    }
  }
/* END_SECTION:header */

/* START_SECTION:hello-world (INDEX:74) */
.welcome {
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #f6f6f7;
    padding: 72px 0;
  }

  .welcome-content {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 24px;
  }

  .welcome-description {
    max-width: 80ch;
    line-height: 1.4;
    margin-top: 1.5rem;
  }

  .highlights {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
  }

  @media (max-width: 1100px) {
    .highlights {
      grid-template-columns: 1fr;
    }
  }

  .highlight {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #eef3ff;
    color: rgb(92, 95, 98);
    line-height: 1.4;
  }

  .highlight > * + * {
    margin-top: 1rem;
  }

  .highlight h3 {
    font-size: 1rem;
    color: rgb(32, 34, 35);
  }

  .highlight-description {
    flex: 1 1;
  }

  .highlight a {
    display: flex;
    width: fit-content;
    background-color: rgb(250, 251, 251);
    box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset;
    border: 1px solid rgb(140, 145, 150);
    border-radius: 4px;
    color: rgb(92, 95, 98);
    padding: 3px 10px 5px;
    text-decoration: none;
  }
/* END_SECTION:hello-world */

/* START_SECTION:image-text (INDEX:75) */
.image-text {
    padding-block-start: var(--image-text-padding-block-start-mobile, var(--spacing-xl));
    padding-block-end: var(--image-text-padding-block-end-mobile, var(--spacing-xl));
  }

  .image-text__columns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
  }

  /*
    Both blocks set tag: null, so the storefront columns are the block roots.
    The .shopify-block selectors cover a wrapper if Shopify adds one.
    A media block with nothing picked renders no element at all.
    A content block with no children keeps whitespace, so :empty never matches it.
  */
  .image-text__columns > .image-text-media,
  .image-text__columns > .image-text-content,
  .image-text__columns > .shopify-block:has(> .image-text-media),
  .image-text__columns > .shopify-block:has(> .image-text-content) {
    width: 100%;
    min-width: 0;
  }

  .image-text__columns > .image-text-content:not(:has(> .shopify-block > *, > :not(.shopify-block))),
  .image-text__columns > .shopify-block:not(:has(.image-text-media, .image-text-content > .shopify-block > *, .image-text-content > :not(.shopify-block))) {
    display: none;
  }

  .image-text__columns > .image-text-media,
  .image-text__columns > .shopify-block:has(> .image-text-media) {
    order: -1;
  }

  .image-text__placeholder {
    margin: 0;
  }

  @media screen and (min-width: 750px) {
    .image-text {
      padding-block-start: var(--image-text-padding-block-start, var(--spacing-2xl));
      padding-block-end: var(--image-text-padding-block-end, var(--spacing-2xl));
    }

    .image-text__columns {
      --image-text-columns-gap: var(--spacing-2xl);

      flex-direction: row;
      align-items: center;
      gap: var(--image-text-columns-gap);
    }

    /*
      Fixed half widths so the content column's inline padding can't shift the split.
      A missing column (no image, or no content) takes the full row.
    */
    .image-text__columns > .image-text-media,
    .image-text__columns > .image-text-content,
    .image-text__columns > .shopify-block:has(> .image-text-media),
    .image-text__columns > .shopify-block:has(> .image-text-content) {
      flex: 0 0 calc(50% - var(--image-text-columns-gap) / 2);
    }

    .image-text__columns > :only-child,
    .image-text__columns:not(:has(.image-text-content > .shopify-block > *, .image-text-content > :not(.shopify-block))) > .image-text-media,
    .image-text__columns:not(:has(.image-text-media)) > .image-text-content,
    .image-text__columns:not(:has(.image-text-content > .shopify-block > *, .image-text-content > :not(.shopify-block))) > .shopify-block:has(> .image-text-media),
    .image-text__columns:not(:has(.image-text-media)) > .shopify-block:has(> .image-text-content) {
      flex-basis: 100%;
      max-width: none;
    }

    .image-text__columns > .image-text-content:only-child,
    .image-text__columns:not(:has(.image-text-media)) > .image-text-content,
    .image-text__columns > .shopify-block:only-child > .image-text-content,
    .image-text__columns:not(:has(.image-text-media)) > .shopify-block > .image-text-content {
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    .image-text__columns > .image-text-media,
    .image-text__columns > .shopify-block:has(> .image-text-media) {
      order: 0;
    }
  }
/* END_SECTION:image-text */

/* START_SECTION:image-video-banner (INDEX:76) */
/* Figma runs the banner media to the shell edges — both homepage instances fill
     the full frame width — so this section opts out of the shared inline inset
     that .section--full-width applies. The 1920 cap still comes from that class,
     and the copy keeps its own inset via .image-video-banner__content below. */
  .image-video-banner {
    padding-inline: 0;
    padding-block-start: var(--ivb-padding-block-start);
    padding-block-end: var(--ivb-padding-block-end);
    color: var(--color-foreground);
    background: transparent;
    background-color: transparent;
    background-image: none;
  }

  .image-video-banner__inner {
    width: 100%;
    min-width: 0;
  }

  .image-video-banner__stage {
    --ivb-content-max-width: 28rem;
    /* Wide text: phones use the full width inside the page gutter */
    --ivb-content-max-width-wide: 100%;
    --ivb-justify: var(--ivb-justify-mobile);
    --ivb-align: var(--ivb-align-mobile);
    --ivb-text-align: var(--ivb-text-align-mobile);
    --ivb-items: var(--ivb-items-mobile);
    --ivb-height: var(--ivb-height-mobile);
    --ivb-radius-top: var(--ivb-radius-top-mobile, 0);
    --ivb-radius-bottom: var(--ivb-radius-bottom-mobile, 0);

    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    min-height: var(--ivb-height);
    border-radius: var(--ivb-radius-top) var(--ivb-radius-top) var(--ivb-radius-bottom) var(--ivb-radius-bottom);
  }

  .image-video-banner--height-auto {
    min-height: 0;
  }

  /* Sticky text: any clipping ancestor becomes the stack's scroll box and sticky
     never engages, so the stage drops its clip and the media layer keeps it. */
  .image-video-banner--sticky {
    overflow: visible;
  }

  .image-video-banner--sticky .image-video-banner__media {
    overflow: hidden;
    border-radius: inherit;
  }

  .image-video-banner--sticky .image-video-banner__stack {
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--ivb-pad-block-start));
  }

  /* Bottom alignment already sits the copy at the end of the banner, so sticky
     has no travel and would pin it against the header instead. */
  .image-video-banner--sticky.image-video-banner--bottom .image-video-banner__stack {
    position: static;
  }

  /* Clips the playback controls to the banner radius. The sticky stack stays
     outside this box, because a clipping ancestor would stop it sticking. */
  .image-video-banner__controls-clip {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .image-video-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .image-video-banner__image,
  .image-video-banner__video,
  .image-video-banner__placeholder,
  .image-video-banner__layer,
  .image-video-banner__video-wrap {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-video-banner__layer--desktop {
    display: none;
  }

  .image-video-banner__layer--mobile {
    display: block;
  }

  .image-video-banner__video::-webkit-media-controls {
    display: none;
  }

  .image-video-banner__placeholder {
    background-color: var(--surface-secondary);
  }

  .image-video-banner__color {
    background-color: var(--ivb-background-color, var(--color-background));
  }

  .image-video-banner__overlay {
    position: absolute;
    inset: 0;
    background: var(--ivb-overlay);
    pointer-events: none;
  }

  .image-video-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: var(--ivb-justify);
    align-items: var(--ivb-align);
    min-height: var(--ivb-height);
    /* A transparent header is pulled down over this section, so the box starts
       behind the nav. Insetting by the header height makes the padded area equal
       the part that is actually visible, which is what every vertical alignment
       should resolve against: Top clears the nav, and Middle centres in the
       visible area rather than half a nav too high. --header-overlay-offset is
       set in sections/header.liquid and is 0px under a solid header or past the
       first section. */
    padding-block-start: calc(var(--header-overlay-offset, 0px) + var(--ivb-pad-block-start));
    padding-block-end: var(--ivb-pad-block-end);
    /* Now the media is edge to edge, the copy is what has to line up with the
       header, footer and every other section, so the page gutter is the floor.
       The setting can only add to it. */
    padding-inline-start: max(var(--ivb-pad-inline-start), var(--section-padding-inline));
    padding-inline-end: max(var(--ivb-pad-inline-end), var(--section-padding-inline));
    text-align: var(--ivb-text-align);
    background: transparent;
  }

  .image-video-banner--height-auto .image-video-banner__content {
    min-height: 0;
  }

  .image-video-banner__stack {
    display: flex;
    flex-direction: column;
    align-items: var(--ivb-items);
    width: 100%;
    max-width: var(--ivb-content-max-width);
  }

  .image-video-banner--text-wide .image-video-banner__stack {
    max-width: var(--ivb-content-max-width-wide);
  }

  /*
   * Preset uses title-lg (Title/Desktop/lg = 28). On mobile that token is 22px,
   * but Figma Title/Mobile/xl is 28 — map preset heading to xl metrics until desktop.
   */
  .image-video-banner__stack .heading.font-title-lg {
    font-size: var(--font-title-xl-size);
    font-weight: var(--font-title-xl-weight);
    line-height: var(--font-title-xl-line-height);
    letter-spacing: var(--font-title-xl-letter-spacing);
  }

  /* Figma Body/Bold/md — richtext schema has no semibold option, weight applied here. */
  .image-video-banner__stack .richtext.font-body-md {
    font-weight: var(--font-weight-semibold);
  }

  .image-video-banner__stack .text-block {
    --text-align: var(--ivb-text-align);
    text-align: var(--ivb-text-align);
  }

  .image-video-banner__stack .cta {
    align-self: var(--ivb-items);
  }

  .image-video-banner__controls {
    /* Fixed light chrome — keep icons dark even when the section scheme inverts tokens (scheme-3). */
    --ivb-playback-icon: #333333;
    --ivb-playback-surface: rgb(255 255 255 / 90%);
    --ivb-playback-surface-hover: #ffffff;

    position: absolute;
    right: var(--spacing-md);
    bottom: var(--spacing-md);
    z-index: 2;
    display: flex;
    gap: var(--spacing-3xs);
    align-items: center;
    opacity: 1;
    pointer-events: auto;
  }

  .image-video-banner__control {
    display: inline-flex;
    gap: var(--spacing-3xs);
    align-items: center;
    justify-content: center;
    min-width: var(--size-10);
    min-height: var(--size-10);
    margin: 0;
    padding: var(--spacing-3xs);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--ivb-playback-surface);
    color: var(--ivb-playback-icon);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .image-video-banner__audio {
    padding-inline: var(--spacing-2xs);
  }

  .image-video-banner__control[hidden] {
    display: none;
  }

  .image-video-banner__control:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: var(--focus-ring-size) solid var(--text-brand);
    outline-offset: var(--focus-ring-offset);
  }

  .image-video-banner__control:hover {
    background-color: var(--ivb-playback-surface-hover);
  }

  .image-video-banner__playback-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .image-video-banner__playback-icon[hidden] {
    display: none;
  }

  .image-video-banner__inner .image-video-banner__transcript {
    width: auto;
    margin-block-start: var(--spacing-2xs);
    margin-inline: var(--section-padding-inline);
  }

  .image-video-banner__transcript--desktop {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .image-video-banner__control {
      transition: none;
    }
  }

  @media screen and (min-width: 768px) {
    .image-video-banner__stage {
      /* Figma grab runs heading and copy across ~75% of the banner. Never
         narrower than the standard cap, so Wide can only widen the text, and
         capped so lines stay readable on very wide screens. */
      --ivb-content-max-width-wide: clamp(28rem, 75%, 62.5rem);
      --ivb-justify: var(--ivb-justify-desktop);
      --ivb-align: var(--ivb-align-desktop);
      --ivb-text-align: var(--ivb-text-align-desktop);
      --ivb-items: var(--ivb-items-desktop);
      --ivb-height: var(--ivb-height-desktop);
      --ivb-radius-top: var(--ivb-radius-top-desktop, 0);
      --ivb-radius-bottom: var(--ivb-radius-bottom-desktop, 0);
    }

    .image-video-banner__stack .heading.font-title-lg {
      font-size: var(--font-title-lg-size);
      font-weight: var(--font-title-lg-weight);
      line-height: var(--font-title-lg-line-height);
      letter-spacing: var(--font-title-lg-letter-spacing);
    }

    .image-video-banner__content {
      padding-block-start: calc(var(--header-overlay-offset, 0px) + var(--ivb-pad-block-start-desktop));
      padding-block-end: var(--ivb-pad-block-end-desktop);
      padding-inline-start: max(var(--ivb-pad-inline-start-desktop), var(--section-padding-inline));
      padding-inline-end: max(var(--ivb-pad-inline-end-desktop), var(--section-padding-inline));
    }

    .image-video-banner--sticky.image-video-banner--bottom .image-video-banner__stack {
      position: sticky;
      top: calc(var(--header-height, 0px) + var(--ivb-pad-block-start-desktop));
    }

    .image-video-banner--sticky .image-video-banner__stack {
      top: calc(var(--header-height, 0px) + var(--ivb-pad-block-start-desktop));
    }

    .image-video-banner--sticky.image-video-banner--bottom-desktop .image-video-banner__stack {
      position: static;
    }

    .image-video-banner__layer--desktop {
      display: block;
    }

    .image-video-banner__layer--mobile {
      display: none;
    }

    .image-video-banner__transcript--desktop {
      display: block;
    }

    .image-video-banner__transcript--mobile {
      display: none;
    }
  }
/* END_SECTION:image-video-banner */

/* START_SECTION:learn (INDEX:77) */
/*
    Match shop-by-collection / press / filter-content:
    native <section> + full-width + section--full-width. L/R inset from
    critical.css (.section--full-width → --section-padding-inline) — do not
    override padding-inline here.
  */
  .learn {
    box-sizing: border-box;
    min-height: 12rem;
    padding-block-start: var(--learn-padding-top);
    padding-block-end: var(--learn-padding-bottom);
    background-color: var(--surface-primary, #fff);
    color: var(--text-primary, #333);
    font-family: var(--font-primary--family);
  }

  .learn__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
  }

  .learn__root {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
  }

  .learn__surface {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'title view-all'
      'filters filters'
      'cards cards';
    gap: var(--spacing-lg) var(--spacing-xs);
    align-items: center;
    width: 100%;
  }

  /* Storefront: no chips → title inline with View all (editor keeps filters row for outline) */
  html:not(.shopify-design-mode) .learn__surface:not(:has([data-learn-filter])) {
    grid-template-areas:
      'title view-all'
      'cards cards';
  }

  .learn__surface > .shopify-block:has(.title),
  .learn__surface > .title {
    grid-area: title;
    min-width: 0;
    align-self: center;
  }

  .learn__view-all {
    grid-area: view-all;
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-self: end;
  }

  /*
    Mobile has no hover: keep View all in the underline hover treatment so the
    trailing arrow is visible by default (Figma mobile).
  */
  .learn__view-all-button.button .button__icon {
    width: var(--size-4);
    margin-inline-start: var(--button-gap);
    opacity: 1;
  }

  .learn__filters,
  .learn__surface > .article-filters,
  .learn__surface > .shopify-block:has(.article-filters),
  .learn__surface > .shopify-block:has([data-learn-filters]) {
    grid-area: filters;
    min-width: 0;
    align-self: center;
  }

  .learn__surface > .shopify-block:has(.article-filters),
  .learn__surface > .shopify-block:has([data-learn-filters]) {
    display: flex;
    width: 100%;
  }

  .learn__surface > .shopify-block:has(.article-filters) > .article-filters,
  .learn__surface > .shopify-block:has([data-learn-filters]) > .article-filters {
    flex: 1 1 auto;
    width: 100%;
  }

  html:not(.shopify-design-mode) .learn__surface > .shopify-block:has(.article-filters):not(:has([data-learn-filter])):not(:has(.article-chip)),
  html:not(.shopify-design-mode) .learn__surface > .article-filters:not(:has([data-learn-filter])):not(:has(.article-chip)) {
    display: none !important;
  }

  .learn__track {
    grid-area: cards;
  }

  /*
    Manual Blog cards start as surface siblings (content_for). Sharing
    grid-area: cards would stack them in one cell until JS moves them into
    .learn__track. Until then, place each on its own full-width row so layout
    stays readable without JS and there is no overlap flash.
  */
  .learn__surface > .shopify-block:has(.learn__item),
  .learn__surface > .shopify-block:has(.blog-card-block),
  .learn__surface > .learn__item {
    grid-area: unset;
    grid-column: 1 / -1;
  }

  .learn__track {
    display: flex;
    align-items: stretch;
    gap: var(--learn-card-gap, var(--spacing-xs));
    min-width: 0;
    /*
      Mobile: full-bleed track — peek is cut by the screen edge, not the page
      margin. width:100% + negative margins is overconstrained and the end
      margin is dropped, so expand the used width explicitly instead.
    */
    width: calc(100% + (var(--section-padding-inline) * 2));
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-inline: var(--section-padding-inline);
    /*
      Mandatory snap aligns to the scrollport start and will eat padding-inline
      unless scroll-padding matches, which would flush the first card to the
      screen edge on load.
    */
    scroll-padding-inline: var(--section-padding-inline);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .learn__track > .shopify-block,
  .learn__track > .learn__item,
  .learn__track > .learn__card {
    display: flex;
    flex: 0 0 min(85vw, 20.9375rem);
    flex-direction: column;
    align-items: stretch;
    width: min(85vw, 20.9375rem);
    min-width: 0;
    scroll-snap-align: start;
  }

  .learn__track > .shopify-block > .learn__item {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-height: 0;
  }

  .learn__track .blog-card {
    flex: 1 1 auto;
    width: 100%;
  }

  .learn__item.is-hidden,
  .learn__track > .is-hidden,
  .learn__track > .shopify-block.is-hidden,
  .learn__track > .shopify-block:has(.learn__item.is-hidden) {
    display: none !important;
  }

  .learn[hidden],
  .learn__empty[hidden] {
    display: none !important;
  }

  .learn__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary, #f5f5f5);
  }

  .learn__empty-text {
    margin: 0;
    color: var(--text-secondary, #767676);
    font-size: var(--font-body-md-size, 0.875rem);
    line-height: var(--font-body-md-line-height, 1.4);
    text-align: center;
  }

  .learn__track[hidden],
  .learn__dots[hidden] {
    display: none !important;
  }

  .learn__dots {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: center;
    justify-content: center;
    min-height: 6px;
  }

  .learn__dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background-color: var(--surface-invert, #333);
    opacity: 0.3;
    transition:
      width 0.2s ease,
      opacity 0.2s ease;
  }

  .learn__dot--active {
    width: 24px;
    height: 6px;
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    .learn__inner {
      gap: var(--spacing-md);
    }

    .learn__surface {
      grid-template-areas:
        'title title'
        'filters view-all'
        'cards cards';
      gap: var(--spacing-md) var(--spacing-sm);
      align-items: center;
    }

    html:not(.shopify-design-mode) .learn__surface:not(:has([data-learn-filter])) {
      grid-template-areas:
        'title view-all'
        'cards cards';
    }

    .learn__track > .shopify-block,
    .learn__track > .learn__item,
    .learn__track > .learn__card {
      width: calc((100% - 2 * var(--learn-card-gap, 16px)) * 0.25);
      flex: 0 0 calc((100% - 2 * var(--learn-card-gap, 16px)) * 0.25);
    }

    .learn__track > .shopify-block:has(.blog-card--featured),
    .learn__track > .learn__item:has(.blog-card--featured),
    .learn__track > .learn__card:has(.blog-card--featured) {
      width: calc((100% - 2 * var(--learn-card-gap, 16px)) * 0.5);
      flex: 0 0 calc((100% - 2 * var(--learn-card-gap, 16px)) * 0.5);
    }

    .learn__view-all-button.button .button__icon {
      width: 0;
      margin-inline-start: 0;
      opacity: 0;
    }

    .learn__view-all-button.button:hover .button__icon,
    .learn__view-all-button.button:active .button__icon,
    .learn__view-all-button.button:focus-visible .button__icon {
      width: var(--size-4);
      margin-inline-start: var(--button-gap);
      opacity: 1;
    }

    .learn__track {
      width: auto;
      margin-inline: 0;
      padding-inline: 0;
      scroll-padding-inline: 0;
      scroll-snap-type: x proximity;
    }

    .learn__dots {
      display: none;
    }
  }
/* END_SECTION:learn */

/* START_SECTION:main-compare (INDEX:78) */
.compare-page {
    --compare-page-touch-target: 44px;
    --compare-page-label-width: 100px;
    --compare-page-column-width: 148px;
    display: block;
    min-width: 0;
    color: var(--text-primary);
  }

  .compare-page__inner {
    width: 100%;
    max-width: var(--page-width);
    margin-inline: auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
  }

  .compare-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: center;
    padding-block-end: var(--spacing-md);
    text-align: center;
  }

  .compare-page__heading,
  .compare-page__group {
    margin: 0;
    font-family: var(--font-heading--family);
    font-weight: var(--font-weight-regular);
  }

  .compare-page__heading {
    font-size: var(--font-title-md-size);
    line-height: var(--font-title-md-line-height);
  }

  .compare-page__notice {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size);
  }

  .compare-page__notice[hidden],
  .compare-page__table-wrap[hidden],
  .compare-page__scroll-dots[hidden],
  .compare-page__row-group[hidden],
  .compare-page__group[hidden] {
    display: none;
  }

  /* Pick-more products are a Featured products section on this template, shown
     only while nothing is compared. product-compare-page.js owns the flag. */
  body[data-compare-table-active] .section-featured-products {
    display: none;
  }

  body[data-compare-loading] .compare-page {
    visibility: hidden;
  }

  /* Without a table the heading sits straight on top of the carousel, and that
     section brings its own block padding, so this one adds none below. */
  body:not([data-compare-table-active]) .compare-page__header,
  body:not([data-compare-table-active]) .compare-page__inner {
    padding-block-end: 0;
  }

  .compare-page__table-wrap {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow-x: auto;
    scroll-padding-inline-start: var(--compare-page-label-width);
  }

  .compare-page__table {
    min-width: calc(
      var(--compare-page-label-width) +
      (var(--compare-page-column-width) * var(--compare-page-columns, 2))
    );
  }

  .compare-page__head,
  .compare-page__row {
    display: grid;
    grid-template-columns:
      var(--compare-page-label-width)
      minmax(0, 1fr);
    column-gap: var(--spacing-5xs);
  }

  .compare-page__headers,
  .compare-page__cells {
    display: grid;
    grid-template-columns: repeat(
      var(--compare-page-columns, 2),
      minmax(var(--compare-page-column-width), 1fr)
    );
    gap: var(--spacing-5xs);
    min-width: 0;
  }

  .compare-page__toggle-cell,
  .compare-page__label {
    position: sticky;
    left: 0;
    z-index: 2;
    width: calc(100% + var(--spacing-5xs));
    border-inline-end: var(--spacing-5xs) solid var(--surface-primary);
    background-color: var(--surface-primary);
  }

  .compare-page__toggle-cell {
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-xs) 0;
    border-block-end: 1px solid var(--border-secondary);
  }

  .compare-page__toggle {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: center;
    width: 100%;
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
    text-align: center;
    cursor: pointer;
  }

  .compare-page__toggle-control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--compare-page-touch-target);
    min-height: var(--compare-page-touch-target);
    order: -1;
  }

  .compare-page__toggle-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .compare-page__toggle-track {
    position: relative;
    box-sizing: border-box;
    display: block;
    width: 33px;
    height: 20px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
  }

  .compare-page__toggle-track::after {
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 3px;
    width: 12px;
    border-radius: var(--radius-full);
    background-color: var(--surface-invert);
    content: '';
  }

  .compare-page__toggle-input:checked + .compare-page__toggle-track {
    border-color: var(--surface-brand-dark);
    background-color: var(--surface-brand-dark);
  }

  .compare-page__toggle-input:checked + .compare-page__toggle-track::after {
    inset-inline-start: auto;
    inset-inline-end: 3px;
    background-color: var(--surface-primary);
  }

  .compare-page__toggle-input:focus-visible + .compare-page__toggle-track {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  .compare-page__product {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
    padding: var(--spacing-2xs) var(--spacing-5xs);
    border-block-end: 1px solid var(--border-secondary);
    scroll-snap-align: start;
  }

  .compare-page__product-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: center;
    min-width: 0;
    color: var(--text-primary);
    text-align: center;
    text-decoration: none;
  }

  .compare-page__media {
    display: block;
    flex-shrink: 0;
    width: 33px;
    height: 48px;
  }

  .compare-page__image,
  .compare-page__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .compare-page__product-meta {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-5xs);
    min-width: 0;
  }

  .compare-page__product-title {
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
  }

  .compare-page__product-price {
    margin-block-start: auto;
    font-size: var(--font-body-sm-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-sm-line-height);
  }

  .compare-page__remove {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--compare-page-touch-target);
    height: var(--compare-page-touch-target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .compare-page__remove .icon {
    display: block;
    width: 12px;
    height: 12px;
  }

  .compare-page__remove > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-4);
    height: var(--size-4);
    border-radius: var(--radius-2xs);
    background-color: var(--surface-secondary);
  }

  .compare-page__quick-add {
    width: 100%;
  }

  .compare-page__quick-add .quick-add__button {
    width: 100%;
    border-radius: var(--radius-full);
  }

  .compare-page__quick-add .quick-add__icon {
    display: none;
  }

  /* quick-add keeps its label visually hidden below 750px. The compare CTA
     shows it at every breakpoint, so undo the hiding and restore the button
     type styles the snippet only applies from the desktop breakpoint. */
  .compare-page__quick-add .quick-add__desktop-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-family: var(--font-subheading--family);
    font-size: var(--font-button-sm-size);
    font-weight: var(--font-button-sm-weight);
    line-height: var(--font-button-sm-line-height);
  }

  .compare-page__scroll-dots {
    display: flex;
    gap: var(--spacing-5xs);
    justify-content: center;
    padding-block: var(--spacing-sm);
  }

  .compare-page__scroll-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--border-secondary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .compare-page__scroll-dot::before {
    position: absolute;
    inset: 50%;
    width: var(--compare-page-touch-target);
    height: var(--compare-page-touch-target);
    content: '';
    translate: -50% -50%;
  }

  .compare-page__scroll-dot:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  .compare-page__scroll-dot.is-active {
    width: 29px;
    background-color: var(--surface-invert);
  }

  .compare-page__empty-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: var(--spacing-sm);
    border-block-end: 1px solid var(--border-secondary);
    background-color: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
    text-align: center;
  }

  .compare-page__empty-column p {
    margin: 0;
  }

  .compare-page__empty-link {
    --button-underline-font-weight: var(--font-weight-regular);
  }

  /* Pinned to the scrollport so group titles stay readable while the product
     columns scroll sideways. */
  .compare-page__group {
    position: sticky;
    left: 0;
    width: fit-content;
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
  }

  .compare-page__row {
    margin-block-end: var(--spacing-5xs);
  }

  .compare-page__label,
  .compare-page__cells .product-comparison__cell {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 49px;
    padding: var(--spacing-xs) var(--spacing-2xs);
    background-color: color-mix(in srgb, var(--surface-secondary) 70%, var(--surface-primary));
  }

  .compare-page__label {
    gap: var(--spacing-3xs);
    font-size: var(--font-body-xs-size);
    font-weight: var(--font-weight-semibold);
  }

  .compare-page__label .icon {
    display: none;
  }

  .compare-page__cells .product-comparison__cell {
    justify-content: center;
    background-color: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
    text-align: center;
  }

  .compare-page__empty-data-cell {
    background-color: var(--surface-primary);
  }

  .compare-page__cells .product-comparison__cell-empty {
    color: var(--text-primary);
  }

  .compare-page[data-compare-count='1'] {
    --compare-page-label-width: 96px;
    --compare-page-column-width: calc(
      100vw - var(--compare-page-label-width) - var(--spacing-5xs)
    );
  }

  .compare-page[data-compare-count='1'] .compare-page__table-wrap {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .compare-page[data-compare-count='1'] .compare-page__head,
  .compare-page[data-compare-count='1'] .compare-page__row {
    grid-template-columns: var(--compare-page-label-width) var(--compare-page-column-width);
    column-gap: var(--spacing-5xs);
  }

  .compare-page[data-compare-count='1'] .compare-page__table {
    min-width: calc(
      var(--compare-page-label-width) +
      var(--compare-page-column-width) +
      var(--spacing-5xs)
    );
  }

  .compare-page[data-compare-count='1'] .compare-page__headers {
    display: contents;
  }

  .compare-page[data-compare-count='1'] .compare-page__cells {
    grid-template-columns: var(--compare-page-column-width);
    grid-template-rows: auto;
    grid-auto-rows: 0;
    row-gap: 0;
  }

  /* Collapsed rather than removed so rows keep a cell for the empty product column */
  .compare-page[data-compare-count='1'] .compare-page__empty-data-cell {
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .compare-page[data-compare-count='1'] .compare-page__empty-column {
    grid-row: 1;
    grid-column: 1 / -1;
    width: calc(100vw - (var(--spacing-sm) * 2));
    min-height: 94px;
    margin: 0 auto var(--spacing-md);
    padding: var(--spacing-sm);
    border: 0;
    border-radius: var(--radius-md);
  }

  .compare-page[data-compare-count='1'] .compare-page__toggle-cell,
  .compare-page[data-compare-count='1'] .compare-page__product {
    grid-row: 2;
  }

  .compare-page[data-compare-count='1'] .compare-page__toggle-cell {
    grid-column: 1;
  }

  .compare-page[data-compare-count='1'] .compare-page__product {
    grid-column: 2;
    min-height: 179px;
  }

  @media screen and (min-width: 750px) {
    .compare-page {
      --compare-page-label-width: minmax(180px, 1fr);
      --compare-page-column-width: minmax(0, 1fr);
    }

    .compare-page__inner {
      padding: 0 var(--spacing-2xl) var(--spacing-2xl);
    }

    .compare-page__scroll-dots {
      display: none;
    }

    .compare-page__table-wrap {
      box-sizing: border-box;
      width: auto;
      margin-inline-start: 0;
      margin-inline-end: calc(50% - 50vw);
      padding-inline-end: var(--spacing-2xl);
      overflow-x: auto;
    }

    .compare-page__table {
      min-width: 0;
    }

    .compare-page__head,
    .compare-page__row {
      grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
    }

    .compare-page__headers,
    .compare-page__cells {
      grid-template-columns: repeat(var(--compare-page-columns, 2), minmax(0, 1fr));
    }

    .compare-page__toggle {
      flex-direction: row;
      justify-content: flex-start;
      font-size: var(--font-body-xl-size);
      text-align: start;
    }

    .compare-page__toggle-control {
      order: 0;
    }

    .compare-page__toggle-track {
      width: 44px;
      height: 26px;
    }

    .compare-page__toggle-track::after {
      inset-block: 3px;
      inset-inline-start: 3px;
      width: 18px;
    }

    .compare-page__toggle-input:checked + .compare-page__toggle-track::after {
      inset-inline-start: auto;
      inset-inline-end: 3px;
    }

    .compare-page__product {
      padding: var(--spacing-sm) var(--spacing-lg);
    }

    /* Row direction, so the meta column has to stretch for the price to be
       able to bottom-align against the CTA. The image keeps the centring the
       base rule gives it on mobile. */
    .compare-page__product-link {
      flex-direction: row;
      align-items: stretch;
      text-align: start;
    }

    .compare-page__media {
      align-self: center;
      width: 56px;
      height: 80px;
    }

    .compare-page__product-title {
      font-size: var(--font-body-sm-size);
      line-height: var(--font-body-sm-line-height);
    }

    .compare-page__product-price {
      font-size: var(--font-body-md-size);
      line-height: var(--font-body-md-line-height);
    }

    .compare-page__label .icon {
      display: block;
    }

    .compare-page__label,
    .compare-page__cells .product-comparison__cell {
      min-height: 64px;
      padding: var(--spacing-sm);
      font-size: var(--font-body-xl-size);
      line-height: var(--font-body-xl-line-height);
    }

    .compare-page__label {
      font-weight: var(--font-weight-regular);
    }

    .compare-page[data-compare-count='1'] {
      --compare-page-label-width: minmax(180px, 1fr);
      --compare-page-column-width: minmax(0, 1fr);
    }

    .compare-page[data-compare-count='1'] .compare-page__head {
      grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
      column-gap: var(--spacing-5xs);
    }

    .compare-page[data-compare-count='1'] .compare-page__row {
      grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr);
      column-gap: var(--spacing-5xs);
    }

    .compare-page[data-compare-count='1'] .compare-page__headers {
      display: grid;
    }

    .compare-page[data-compare-count='1'] .compare-page__table {
      min-width: 0;
    }

    /* The one-product bleed outranks the desktop wrap rule, so its 100vw width
       has to be undone at matching specificity or the end gutter is pushed
       past the viewport and clipped. */
    .compare-page[data-compare-count='1'] .compare-page__table-wrap {
      width: auto;
      margin-inline-start: 0;
    }

    .compare-page[data-compare-count='1'] .compare-page__cells {
      grid-template-columns: repeat(var(--compare-page-columns, 2), minmax(0, 1fr));
      grid-template-rows: none;
      grid-auto-rows: auto;
      row-gap: var(--spacing-5xs);
    }

    .compare-page[data-compare-count='1'] .compare-page__empty-data-cell {
      min-height: 64px;
      padding: var(--spacing-sm);
      overflow: visible;
    }

    .compare-page[data-compare-count='1'] .compare-page__empty-column {
      grid-row: auto;
      grid-column: auto;
      width: auto;
      min-height: 180px;
      margin: 0;
      padding: var(--spacing-sm);
      border-block-end: 1px solid var(--border-secondary);
      border-radius: 0;
    }

    .compare-page[data-compare-count='1'] .compare-page__toggle-cell,
    .compare-page[data-compare-count='1'] .compare-page__product {
      grid-row: auto;
      grid-column: auto;
      min-height: 0;
    }
  }

  @media screen and (min-width: 1400px) {
    .compare-page[data-compare-count='2'] .compare-page__head,
    .compare-page[data-compare-count='2'] .compare-page__row,
    .compare-page[data-compare-count='3'] .compare-page__head,
    .compare-page[data-compare-count='3'] .compare-page__row {
      grid-template-columns: 272px minmax(0, 1fr);
    }

    .compare-page[data-compare-count='2'] .compare-page__headers,
    .compare-page[data-compare-count='2'] .compare-page__cells,
    .compare-page[data-compare-count='3'] .compare-page__headers,
    .compare-page[data-compare-count='3'] .compare-page__cells {
      grid-template-columns: repeat(3, 344px);
    }
  },
/* END_SECTION:main-compare */

/* START_SECTION:main-page (INDEX:79) */
.main-page {
    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary, var(--color-foreground));
    padding-block-start: var(--padding-block-start);
    padding-block-end: var(--padding-block-end);
  }

  .main-page__inner {
    display: flex;
    flex-direction: column;
    gap: var(--main-page-gap, var(--spacing-md));
    width: 100%;
    margin-inline: auto;
  }

  .main-page__inner--narrow {
    max-width: 37.5rem;
  }

  .main-page__inner--normal {
    max-width: 56.25rem;
  }

  .main-page__inner--none {
    max-width: none;
  }
/* END_SECTION:main-page */

/* START_SECTION:manuals-grid (INDEX:80) */
.manuals-grid {
    padding-block-start: var(--manuals-grid-padding-top);
    padding-block-end: var(--manuals-grid-padding-bottom);
    color: var(--color-foreground);
  }

  .manuals-grid__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
  }

  .manuals-grid__header:empty {
    display: none;
  }

  .manuals-grid__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--manuals-grid-gap);
    align-items: stretch;
    min-width: 0;
  }

  /* The card's own fixed height lets flex sizing beat the media aspect-ratio,
     so the ratio setting only takes effect once the card height is auto. */
  .manuals-grid .doorway-card {
    height: auto;
    justify-content: flex-start;
  }

  .manuals-grid .doorway-card__media {
    flex: 0 0 auto;
  }

  .manuals-grid__placeholder {
    margin: 0;
    opacity: 0.7;
  }

  @media screen and (min-width: 750px) {
    .manuals-grid__list {
      grid-template-columns: repeat(var(--manuals-grid-columns), minmax(0, 1fr));
    }
  }
/* END_SECTION:manuals-grid */

/* START_SECTION:okendo-reviews (INDEX:81) */
@media screen and (prefers-reduced-motion: no-preference) {
    html:has(.okendo-reviews) {
      scroll-behavior: smooth;
    }
  }

  /*
    Match Learn / About this product / FAQs:
    native <section> + full-width + section--full-width. L/R inset from
    critical.css (.section--full-width → --section-padding-inline) — do not
    override padding-inline on the host. Card chrome lives on __inner so the
    grey wash stays inside that inset instead of painting edge-to-edge.
  */
  .okendo-reviews {
    box-sizing: border-box;
    min-width: 0;
    margin-block-start: var(--okendo-reviews-margin-top-mobile, var(--okendo-reviews-margin-top, 0));
    margin-block-end: var(--okendo-reviews-margin-bottom-mobile, var(--okendo-reviews-margin-bottom, 0));
    scroll-margin-top: calc(var(--header-height, 120px) + var(--spacing-md));
  }

  .okendo-reviews__inner {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--okendo-reviews-padding-top-mobile, var(--okendo-reviews-padding-top, 32px));
    padding-block-end: var(--okendo-reviews-padding-bottom-mobile, var(--okendo-reviews-padding-bottom, 32px));
    padding-inline-start: var(--okendo-reviews-padding-inline-start-mobile, var(--okendo-reviews-padding-inline-start, 0));
    padding-inline-end: var(--okendo-reviews-padding-inline-end-mobile, var(--okendo-reviews-padding-inline-end, 0));
    overflow-x: clip;
    border-radius: var(--radius-md);
    background: var(--okendo-reviews-background, color-mix(in srgb, var(--surface-secondary) 70%, transparent));
  }

  /*
    Figma 19450:63377 — grey card is px-116 / py-48, then title + list are
    width 100%. 116px is not on the spacing scale, so it lives here rather
    than the merchant padding select. Mobile uses spacing-xs.
  */
  .okendo-reviews__content {
    --okendo-reviews-heading-gap: var(--spacing-sm);

    display: flex;
    flex-direction: column;
    gap: var(--okendo-reviews-heading-gap);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-inline: var(--spacing-xs);
  }

  .okendo-reviews__heading {
    display: block;
    margin: 0;
    color: var(--text-primary);
    text-transform: capitalize;
  }

  .okendo-reviews [data-oke-widget] {
    width: 100%;
    min-width: 0;
    margin-block-start: 0;
    padding-block-start: 0;
  }

  /* Widget Plus hard-caps .oke-w at 1200px and centres it. Lift that so
     the widget fills the Figma content column. */
  .okendo-reviews .okeReviews[data-oke-container].oke-w,
  .okendo-reviews div.okeReviews.oke-w {
    max-width: none;
    width: 100%;
    margin-inline: 0;
  }

  .okendo-reviews__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .okendo-reviews {
      margin-block-start: var(--okendo-reviews-margin-top);
      margin-block-end: var(--okendo-reviews-margin-bottom);
    }

    .okendo-reviews__inner {
      padding-block-start: var(--okendo-reviews-padding-top);
      padding-block-end: var(--okendo-reviews-padding-bottom);
      padding-inline-start: var(--okendo-reviews-padding-inline-start);
      padding-inline-end: var(--okendo-reviews-padding-inline-end);
    }

    .okendo-reviews__content {
      /* 30px is not on the spacing scale; keep it scoped here. */
      --okendo-reviews-heading-gap: 30px;

      padding-inline: 116px;
    }
  }
/* END_SECTION:okendo-reviews */

/* START_SECTION:press (INDEX:84) */
/* Mobile shows a single logo where desktop shows the whole row, so the design
     sizes them separately. Resolved in the stylesheet rather than inline,
     because a media query cannot override an inline custom property. */
  .press {
    --press-logo-height: var(--press-logo-height-mobile, 48px);

    padding-block-start: var(--press-padding-top);
    padding-block-end: var(--press-padding-bottom);
    color: var(--press-text-color, var(--color-foreground));
  }

  @media screen and (min-width: 750px) {
    .press {
      --press-logo-height: var(--press-logo-height-desktop, 40px);
    }
  }

  .press__inner {
    width: 100%;
    min-width: 0;
  }

  /* Every block empty (no quote, no logo) — collapse the whole section, padding
     included, rather than leaving an empty padded frame. The editor placeholder
     (design mode, no blocks) is exempt so merchants still see the prompt. */
  .press:not(:has([data-press-item])):not(:has(.press__placeholder)) {
    display: none;
  }

  .press__root {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 24px);
    width: 100%;
    min-width: 0;
  }

  .press__frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 24px);
    width: 100%;
    min-width: 0;
  }

  .press__quote-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 16px);
    width: 100%;
    padding: var(--spacing-lg, 32px) var(--spacing-md, 24px);
    background: var(--surface-secondary, var(--color-background));
    border-radius: var(--radius-lg, 12px);
  }

  /* JS toggles press__root--no-quote after the quote fade finishes so logo-only
     items collapse empty space without cutting the outgoing dissolve. Before JS
     (or if JS fails), logos still live here — never hide via :has(active). */
  :where(.press__root.is-ready.press__root--no-quote) .press__quote-area {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .press__frame {
      padding: 64px var(--spacing-md, 24px) var(--spacing-2xl, 48px);
      background: var(--surface-secondary, var(--color-background));
      border-radius: var(--radius-xl, 24px);
    }

    /* Desktop surface/padding live on the frame — tighten when logo-only. */
    :where(.press__root.is-ready.press__root--no-quote) .press__frame {
      padding-block: var(--spacing-2xl, 48px);
    }

    .press__quote-area {
      padding: 0;
      background: transparent;
      border-radius: 0;
    }
  }

  .press__mark {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    color: var(--color-primary);
  }

  /* `icon` renders a square box; the quote glyph is 35x28, so pin the ratio back. */
  .press__mark-icon {
    display: block;
    width: var(--press-mark-width, 30px);
    height: auto;
    aspect-ratio: 35 / 28;
    transform: rotate(180deg);
  }

  @media screen and (min-width: 750px) {
    .press__mark-icon {
      --press-mark-width: 35px;
    }
  }

  .press__mark-image {
    display: block;
    width: var(--press-mark-image-width, 48px);
    height: auto;
    object-fit: contain;
  }

  .press__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--press-logo-gap, 24px);
    width: 100%;
    min-width: 0;
    text-align: var(--press-text-align, center);
  }

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

  .press__items > .shopify-block:not(:has([data-press-item])) {
    display: none;
  }

  .press__items .press__panel {
    display: none;
    flex: 0 0 100%;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 16px);
    order: -1;
  }

  /* First quote before JS; :where() keeps specificity within the team cap. */
  .press__root:not(.is-ready) :where(.press__items > .shopify-block:has([data-press-item])) .press__panel {
    display: flex;
  }

  .press__root:not(.is-ready) :where(
    .press__items > .shopify-block:has([data-press-item]) ~ .shopify-block:has([data-press-item])
  ) .press__panel {
    display: none;
  }

  .press-item.is-active .press__panel {
    display: flex;
  }

  .press__root--static .press__panel {
    display: flex;
  }

  /* Once JS owns the panels they share one grid cell, so the outgoing and
     incoming quote can overlap and dissolve the way the prototype does. Pairs
     with the row height following the tallest quote instead of the active one,
     which also stops the section resizing mid-transition. */
  :where(.press__root.is-ready) .press__items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.press__root.is-ready) .press__items .press__panel {
    display: flex;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--press-transition-duration, 300ms) ease-out,
      visibility 0s linear var(--press-transition-duration, 300ms);
  }

  /* Same specificity as the rule above, so source order decides — keep last. */
  :where(.press__root.is-ready) .press__items :where(.press-item.is-active) .press__panel {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--press-transition-duration, 300ms) ease-out;
  }

  .press__root.is-ready .press__items .press__logo {
    display: none;
  }

  /* The quote is a display style from the design, not a step on the shared body
     scale (which stops at 18px), so the section owns its typography. */
  .press__items .press__quote {
    margin-inline: auto;
    color: var(--press-text-color, var(--color-foreground));
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: var(--press-quote-size, 18px);
    font-weight: var(--font-weight-regular);
    line-height: var(--press-quote-line-height, 1.3);
    text-align: var(--press-text-align, center);
  }

  /* Desktop text width is a merchant setting, as a share of the quote area so it
     scales with the frame. Mobile keeps the snippet's full-width cap. */
  @media screen and (min-width: 750px) {
    .press__items .press__quote {
      --press-quote-size: 24px;
      --press-quote-line-height: 1.2;

      max-width: var(--press-text-width-desktop, 50%);
    }
  }

  /* Rich text. Paragraphs stay the quote size above, so existing quotes do
     not change. Headings follow the style-guide title scale, one step per
     level. :where() keeps these resets at the same specificity as the gap
     rule below, so that later rule can restore space between blocks. */
  .press__items .press__quote :where(p, h1, h2, h3, h4, h5, h6, ul, ol) {
    margin-block: 0;
  }

  .press__items .press__quote :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-feature-settings: var(--font-feature-settings);
  }

  .press__items .press__quote h1 {
    font-size: var(--font-title-display-size);
    font-weight: var(--font-title-display-weight);
    line-height: var(--font-title-display-line-height);
    letter-spacing: var(--font-title-display-letter-spacing);
  }

  .press__items .press__quote h2 {
    font-size: var(--font-title-xl-size);
    font-weight: var(--font-title-xl-weight);
    line-height: var(--font-title-xl-line-height);
    letter-spacing: var(--font-title-xl-letter-spacing);
  }

  .press__items .press__quote h3 {
    font-size: var(--font-title-lg-size);
    font-weight: var(--font-title-lg-weight);
    line-height: var(--font-title-lg-line-height);
    letter-spacing: var(--font-title-lg-letter-spacing);
  }

  .press__items .press__quote h4 {
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    line-height: var(--font-title-md-line-height);
    letter-spacing: var(--font-title-md-letter-spacing);
  }

  .press__items .press__quote h5 {
    font-size: var(--font-title-sm-size);
    font-weight: var(--font-title-sm-weight);
    line-height: var(--font-title-sm-line-height);
    letter-spacing: var(--font-title-sm-letter-spacing);
  }

  .press__items .press__quote h6 {
    font-size: var(--font-title-xs-size);
    font-weight: var(--font-title-xs-weight);
    line-height: var(--font-title-xs-line-height);
    letter-spacing: var(--font-title-xs-letter-spacing);
  }

  .press__items .press__quote :is(ul, ol) {
    padding-inline-start: 1.25em;
  }

  /* `.rte` hides `p:has(> br:only-child)`. `:only-child` ignores text, so a
     paragraph that starts, ends, or breaks on a `<br>` is hidden along with
     the blank-line spacers that rule is meant to catch. Show those paragraphs
     again. A paragraph that is only a break still has no words. */
  .press__quote.rte :where(p):has(> br:only-child) {
    display: block;
  }

  /* Blank-line spacers are removed in Liquid, so a block that still contains
     a `<br>` is real copy (a Shift+Enter in the middle of the statement) and
     still separates the next block. */
  .press__items .press__quote > :where(p, h1, h2, h3, h4, h5, h6, ul, ol):not(:where(:empty))
    ~ :where(p, h1, h2, h3, h4, h5, h6, ul, ol) {
    margin-block-start: var(--spacing-sm, 20px);
  }

  /* Figma centres a 26px logo inside a 64px row, so there is (64 - 26) / 2 of
     space above and below it. Added here as spacing rather than as a row height
     so it holds if a merchant changes the logo height. */
  .press__logos {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 24px);
    width: 100%;
    min-width: 0;
    margin-block: var(--press-logo-row-inset, 19px);
  }

  .press__root.is-ready .press__logos {
    display: flex;
  }

  /* Quote-only blocks omit the logo control on the storefront. */
  .press__root.is-ready .press__logos:not(:has([data-press-logo])) {
    display: none;
  }

  /* Mixed row: while a quote with no logo is showing, take the previous
     publication off screen so it is not left centred under that quote.
     The dots stay, since they are how that quote is chosen. */
  .press__root--quote-only-active .press__logos {
    visibility: hidden;
    pointer-events: none;
  }

  .press__logos-nav {
    width: 100%;
    min-width: 0;
  }

  .press .carousel {
    width: 100%;
  }

  /* Pre-mount and no-JS only: a centred group, so the row does not read as
     left-aligned before Splide takes the track over and centres the active
     logo itself. */
  .press .carousel:not(.is-initialized) .carousel__list {
    justify-content: center;
  }

  /* carousel.css stretches non-button slide children to the full slide width,
     which a logo must never do: it is sized by its own mark. Buttons are exempt
     from that rule, so this only bites where press.js has demoted a logo to a
     span — every ticker logo, and the loop clones in quote mode, whose slides
     would then measure differently from the originals they mirror. */
  .press .carousel__list > .carousel__slide > .press__logo {
    width: auto;
  }

  /* Press sizes its own static row rather than using a `carousel--*` modifier,
     because the layout differs per breakpoint: one logo per view on mobile
     (matching the mounted Splide layout so nothing shifts when it takes over),
     natural widths in a centred group on desktop. */
  .press__logo-slide {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .press__logo-slide {
      flex: 0 0 auto;
    }
  }

  /* Ticker (logo-only + auto change): press.js clones the set and scrolls the
     row continuously, so the logos are no longer a pager — natural widths at
     every breakpoint, nothing highlighted, nothing to click. */
  .press__root--ticker .press__logo-slide {
    flex: 0 0 auto;
  }

  .press__root--ticker .press__logo {
    opacity: 1;
    cursor: default;
    pointer-events: none;
  }

  .press__root--ticker .carousel:not(.is-initialized) .carousel__track {
    overflow: hidden;
  }

  /* Longhands, not the `animation` shorthand: the shorthand would reset
     play-state and outrank the lower-specificity pause rule below. */
  .press__root--ticker .carousel:not(.is-initialized) .carousel__list {
    justify-content: flex-start;
    width: max-content;
    animation-name: press-logo-ticker;
    animation-duration: var(--press-ticker-duration, 20s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .press__root--ticker .carousel__list.is-paused {
    animation-play-state: paused;
  }

  /* Reduced motion: press.js drops the clones, so the real set wraps instead of
     sitting clipped in a track that no longer moves. */
  .press__root--ticker-static .carousel:not(.is-initialized) .carousel__list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--spacing-xs, 16px);
    width: auto;
    animation: none;
  }

  @keyframes press-logo-ticker {
    from {
      transform: translate3d(0, 0, 0);
    }

    to {
      transform: translate3d(calc(-1 * var(--press-ticker-distance, 0px)), 0, 0);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .press__items .press__panel,
    .press__logos-nav,
    .press__logo {
      transition: none;
    }
  }

  .press__dots:empty {
    display: none;
  }

  /* Desktop shows the whole logo row, so the logos are the pager; mobile shows
     one logo at a time and needs the dots. A quote-only section has no row, so
     its dots stay visible at every width. */
  @media screen and (min-width: 750px) {
    .press__dots {
      display: none;
    }

    .press__root--quote-pager .press__dots {
      display: block;
    }
  }

  .press__dots .carousel__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-5xs, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .press__dots .carousel__dot {
    /* Safari paints default blue chrome on <button> without both prefixes and
       an explicit background-color (shorthand `background` is not enough). */
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    color: var(--press-text-color, var(--color-foreground, currentColor));
    background-color: currentColor;
    opacity: 0.3;
    cursor: pointer;
  }

  .press__dots .carousel__dot.is-active {
    width: 24px;
    height: 6px;
    opacity: 1;
  }

  .press__root--static .press__logo {
    opacity: 1;
    cursor: default;
    pointer-events: none;
  }

  /* PO: optional highlight off — every logo stays fully opaque / in focus. */
  .press__root--no-highlight .press__logo {
    opacity: 1;
  }

  .press__placeholder {
    margin: 0;
    text-align: center;
    opacity: 0.65;
  }
/* END_SECTION:press */

/* START_SECTION:product-comparison (INDEX:86) */
.product-comparison-section {
    min-width: 0;
    padding-block-start: var(--product-comparison-padding-top);
    padding-block-end: var(--product-comparison-padding-bottom);
    scroll-margin-top: calc(var(--header-height, 120px) + var(--spacing-xs));
  }

  .product-comparison-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
  }

  .product-comparison-section__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: center;
    text-align: center;
  }

  .product-comparison-section__header .text {
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-md-line-height);
  }

  @media screen and (min-width: 1024px) {
    .product-comparison-section__header {
      gap: var(--spacing-xs);
    }

    .product-comparison-section__header .text {
      font-size: var(--font-body-xl-size);
      font-weight: var(--font-weight-bold);
      line-height: var(--font-body-xl-line-height);
    }
  }

  .product-comparison-section__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
    text-align: center;
  }
/* END_SECTION:product-comparison */

/* START_SECTION:product-details (INDEX:87) */
.product-details {
    padding-block-start: var(--product-details-padding-top);
    padding-block-end: var(--product-details-padding-bottom);
  }

  .product-details__inner {
    width: 100%;
    min-width: 0;
  }

  .product-details__root {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /*
    Figma Needs tabs (19378:41615): body-2xl, gap spacing-lg, pad spacing-3xs,
    inactive text-primary @ 80%, active semibold + border-brand-dark underline.
    Mobile (19419:39622): stacked accordion headers with chevrons.
  */
  .product-details__triggers {
    display: none;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
    margin-block-end: var(--spacing-lg);
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .product-details__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: start;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /*
    `.product-details__trigger` sets `display`, which beats the UA rule behind
    the `hidden` attribute the script puts on empty tabs. Desktop masked that
    by clipping in-panel triggers, so only mobile grew the extra headers.
  */
  .product-details__trigger[hidden] {
    display: none;
  }

  .product-details__trigger-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-primary);
  }

  .product-details__trigger-icon .icon {
    display: block;
    transition: transform 0.2s ease;
  }

  .product-details__trigger.is-active .product-details__trigger-icon .icon {
    transform: rotate(180deg);
  }

  /* Desktop: hide in-panel triggers until JS relocates them into the tablist */
  @media screen and (min-width: 768px) {
    .product-details__triggers {
      display: flex;
    }

    .product-details-tab > .product-details__trigger {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .product-details__triggers .product-details__trigger {
      position: relative;
      display: inline-flex;
      width: auto;
      height: auto;
      margin: 0;
      padding: var(--spacing-3xs) 0;
      overflow: visible;
      clip: auto;
      white-space: nowrap;
      opacity: 0.8;
    }

    .product-details__triggers .product-details__trigger-icon {
      display: none;
    }

    .product-details__triggers .product-details__trigger::after {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      height: 2px;
      background-color: transparent;
    }

    .product-details__triggers .product-details__trigger.is-active {
      opacity: 1;
    }

    .product-details__triggers .product-details__trigger.is-active::after {
      background-color: var(--border-brand-dark);
    }

    .product-details__triggers .product-details__trigger.is-active .product-details__trigger-label {
      font-weight: var(--font-weight-semibold);
    }
  }

  .product-details__trigger:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .product-details__trigger-label {
    display: inline-block;
  }

  .product-details__panels {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 0;
  }

  @media screen and (max-width: 767px) {
    .product-details__trigger {
      min-height: 44px;
    }

    .product-details__trigger-label {
      font-weight: var(--font-weight-semibold);
    }
  }

  @media screen and (min-width: 768px) {
    .product-details__triggers {
      margin-block-end: var(--spacing-2xl);
      overflow-x: visible;
    }

    .product-details__panels {
      gap: 0;
    }
  }
/* END_SECTION:product-details */

/* START_SECTION:product (INDEX:88) */
.product {
    padding-block-start: var(--product-padding-block-start);
    padding-block-end: var(--product-padding-block-end);
  }

  .product__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
  }

  .product > .shopify-block:has(> sticky-atc) {
    display: contents;
  }
/* END_SECTION:product */

/* START_SECTION:quick-add-drawer (INDEX:89) */
.quick-add-drawer {
    display: contents;
  }

  .quick-add-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .quick-add-drawer[data-open] .quick-add-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .quick-add-drawer__panel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 9997;
    display: flex;
    flex-direction: column;
    width: min(calc(100vw - var(--spacing-xl)), 27.5rem);
    height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
    background-color: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: -4px 0 24px rgb(0 0 0 / 0.12);
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 300ms ease,
      visibility 0s linear 300ms;
  }

  .quick-add-drawer[data-open] .quick-add-drawer__panel {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .quick-add-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    min-height: var(--size-10);
    padding: var(--spacing-3xs) var(--spacing-sm);
  }

  .quick-add-drawer__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .quick-add-drawer__close::before {
    position: absolute;
    inset: calc(var(--spacing-2xs) * -1);
    content: '';
  }

  .quick-add-drawer__close:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .quick-add-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 var(--spacing-sm) var(--spacing-sm);
  }

  .quick-add-drawer__content,
  .quick-add-drawer__extras {
    width: 100%;
    min-width: 0;
  }

  .quick-add-drawer__extras {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
    margin-block-start: var(--spacing-xs);
  }

  .quick-add-drawer__extras[hidden] {
    display: none;
  }

  .quick-add-drawer__callouts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    width: 100%;
    padding: var(--spacing-2xs);
    border-radius: var(--radius-md);
    background-color: var(--surface-secondary);
  }

  .quick-add-drawer__details-link {
    align-self: flex-start;
    padding-block-end: var(--spacing-5xs);
    border-block-end: 1px solid var(--border-brand-dark);
    color: var(--text-primary);
    font-size: var(--font-button-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    text-decoration: none;
  }

  .quick-add-drawer__details-link:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .quick-add-drawer__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
  }

  .quick-add-drawer__skeleton-media,
  .quick-add-drawer__skeleton-line {
    display: block;
    border-radius: var(--radius-md);
    background: linear-gradient(
      90deg,
      var(--surface-secondary) 25%,
      color-mix(in srgb, var(--surface-secondary) 55%, var(--surface-primary)) 50%,
      var(--surface-secondary) 75%
    );
    background-size: 200% 100%;
    animation: quick-add-drawer-shimmer 1.4s ease-in-out infinite;
  }

  .quick-add-drawer__skeleton-media {
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
  }

  .quick-add-drawer__skeleton-line {
    height: var(--spacing-xs);
  }

  .quick-add-drawer__skeleton-line--badges {
    width: 70%;
    height: var(--spacing-md);
  }

  .quick-add-drawer__skeleton-line--title {
    width: 94%;
    height: var(--spacing-lg);
  }

  .quick-add-drawer__skeleton-line--short {
    width: 45%;
  }

  .quick-add-drawer__skeleton-line--options {
    width: 100%;
    height: var(--spacing-2xl);
  }

  .quick-add-drawer__skeleton-line--button {
    width: 100%;
    height: var(--size-10);
    border-radius: var(--radius-full);
  }

  .quick-add-drawer__error {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
    padding-block: var(--spacing-xl);
  }

  .quick-add-drawer__error-message {
    margin: 0;
  }

  .quick-add-product {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
  }

  .quick-add-product__details {
    display: flex;
    flex-direction: column;
    /* Figma 19899:132048 — title, reviews and price sit 12px apart, not 16px. */
    gap: var(--spacing-2xs);
    width: 100%;
    min-width: 0;
  }

  .quick-add-product__details .product-badges {
    /* Figma 19899:132047 — the badge row keeps a 16px gap to the title. */
    margin-block-end: var(--spacing-5xs);
  }

  .quick-add-product__details .product-badges__item {
    /* Fallback when the badge metaobject has no colour. */
    --product-badge-bg: var(--surface-brand-light);
  }

  .quick-add-product__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-title-sm-size, 18px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.2;
    font-feature-settings: var(--font-feature-settings);
  }

  .quick-add-product .product-reviews {
    justify-content: flex-start;
    background-color: transparent;
  }

  .quick-add-product .product-price {
    /* Figma 19899:132054 — the rule sits 16px below the price, not against it. */
    --padding-block-end: var(--spacing-xs);
  }

  .quick-add-product .product-price__values {
    /* Figma 19899:132054 — the drawer price stays 14px, unlike the PDP. */
    font-size: var(--font-button-lg-size);
  }

  .quick-add-product__form,
  .quick-add-product__form .product-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
  }

  .quick-add-product__variants {
    width: 100%;
    min-width: 0;
  }

  .quick-add-product__buttons {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-3xs);
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .quick-add-product__buttons .buy-buttons {
    flex: 1 1 0;
  }

  .quick-add-product__buttons .quantity-selector {
    flex: 0 0 auto;
  }

  product-form.is-oos .quick-add-product__buttons .quantity-selector {
    display: none;
  }

  @keyframes quick-add-drawer-shimmer {
    to {
      background-position-x: -200%;
    }
  }

  body:has(.quick-add-drawer[data-open]) #chat-widget-container {
    /* LiveChat uses maximum inline stacking values. */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  @media screen and (min-width: 750px) {
    .quick-add-drawer__header {
      min-height: var(--size-12);
      padding: var(--spacing-2xs) var(--spacing-sm);
    }

    .quick-add-drawer__body {
      padding: 0 var(--spacing-xl) var(--spacing-xl);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .quick-add-drawer__backdrop,
    .quick-add-drawer__panel {
      transition: none;
    }

    .quick-add-drawer__skeleton-media,
    .quick-add-drawer__skeleton-line {
      animation: none;
    }
  }
/* END_SECTION:quick-add-drawer */

/* START_SECTION:quick-cart (INDEX:91) */
.quick-cart {
    --quick-cart-header-title-size: 16px;
    --quick-cart-count-size: 15px;
    --quick-cart-promo-size: 12px;

    display: contents;
  }

  .quick-cart__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgb(0 0 0 / 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .quick-cart[data-open] .quick-cart__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .quick-cart__panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    width: min(100vw, 27.5rem);
    height: 100vh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background-color: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: -4px 0 24px rgb(0 0 0 / 0.12);
    visibility: hidden;
    transform: translateX(100%);
    transition:
      transform 300ms ease,
      visibility 0s linear 300ms;
  }

  .quick-cart[data-open] .quick-cart__panel {
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
  }

  /* LiveChat sets these values inline at the maximum practical stacking level,
     so important is required to keep it out of the modal drawer. */
  body:has(.quick-cart[data-open]) #chat-widget-container {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .quick-cart__chrome {
    flex-shrink: 0;
  }

  .quick-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2xs) var(--spacing-md);
  }

  .quick-cart__title {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: baseline;
    margin: 0;
  }

  .quick-cart__title > span:first-child {
    font-size: var(--quick-cart-header-title-size);
    line-height: 1.2;
  }

  .quick-cart__count {
    color: var(--text-secondary);
    font-size: var(--quick-cart-count-size);
    line-height: 1.3;
  }

  .quick-cart__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .quick-cart__close::before {
    position: absolute;
    inset: calc(var(--spacing-2xs) * -1);
    content: '';
  }

  .quick-cart__close:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .quick-cart__promo {
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--spacing-4xs) var(--spacing-md);
    background-color: var(--surface-brand-light);
    color: var(--text-primary);
    font-size: var(--quick-cart-promo-size);
    line-height: 1.4;
  }

  .quick-cart__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
  }

  .quick-cart__body--empty {
    padding: var(--spacing-xl) var(--spacing-sm);
  }

  .quick-cart__form {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

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

  .quick-cart__items {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .quick-cart__item {
    padding-block-end: var(--spacing-sm);
  }

  .quick-cart__item + .quick-cart__item {
    padding-block-start: var(--spacing-sm);
    border-block-start: 1px solid var(--border-secondary);
  }

  .quick-cart__blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    width: 100%;
  }

  .quick-cart__blocks:empty {
    display: none;
  }

  /* The rule above the upsell is the last line item's separator, so it hangs
     off the blocks rather than the list — an empty blocks area leaves no
     dangling rule above the footer. */
  .quick-cart__form + .quick-cart__blocks {
    padding-block-start: var(--spacing-md);
    border-block-start: 1px solid var(--border-secondary);
  }

  .quick-cart .cart-summary {
    padding-inline: var(--spacing-sm);
  }

  /* Run the track out to the panel edge so the next card peeks past the body's
     inline padding. Bleed by exactly that padding, which changes at 750px. */
  .quick-cart .cart-upsell__carousel {
    width: calc(100% + var(--spacing-sm));
  }

  /* Mobile drops the arrows, so the dots centre under the cards; the desktop
     rule below restores the arrow-led left alignment. */
  .quick-cart .cart-upsell__controls {
    justify-content: center;
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .quick-cart {
      --quick-cart-header-title-size: 18px;
      --quick-cart-count-size: 16px;
      --quick-cart-promo-size: 13px;
    }

    .quick-cart__header {
      padding: var(--spacing-sm) var(--spacing-md) var(--spacing-2xs);
    }

    .quick-cart__body {
      padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    }

    .quick-cart__body--empty {
      padding: var(--spacing-xl);
    }

    .quick-cart .cart-summary {
      padding-inline: var(--spacing-md);
    }

    .quick-cart .cart-upsell__carousel {
      width: calc(100% + var(--spacing-md));
    }

    .quick-cart .cart-upsell__controls {
      justify-content: flex-start;
      width: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-cart__backdrop,
    .quick-cart__panel {
      transition: none;
    }
  }
/* END_SECTION:quick-cart */

/* START_SECTION:returns-form (INDEX:92) */
.returns-form {
    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary, var(--color-foreground));
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }

  .returns-form__inner {
    display: flex;
    flex-direction: column;
    gap: var(--returns-form-title-gap, var(--spacing-5xl));
    width: 100%;
    max-width: var(--returns-form-max-width, 56.25rem);
    margin-inline: auto;
  }

  .returns-form__title {
    margin: 0;
    color: var(--text-primary);
    text-align: center;
  }

  .returns-form__embed {
    width: 100%;
  }

  /* Forms sizes the custom element to ~28rem; pin it to the section so shadow % widths resolve */
  .returns-form__embed shopify-forms-embed,
  .returns-form__embed [data-form-root],
  .returns-form__embed [data-forms-id] {
    display: block;
    width: 100%;
    max-width: 100%;
  }
/* END_SECTION:returns-form */

/* START_SECTION:returns-terms (INDEX:93) */
.returns-terms {
    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary, var(--color-foreground));
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
  }

  .returns-terms__inner {
    display: flex;
    flex-direction: column;
    gap: var(--returns-terms-gap, var(--spacing-md));
    width: 100%;
    max-width: var(--returns-terms-max-width, 56.25rem);
    margin-inline: auto;
  }

  .returns-terms__inner--narrow {
    --returns-terms-max-width: 37.5rem;
  }

  .returns-terms__inner--normal {
    --returns-terms-max-width: 56.25rem;
  }

  .returns-terms__inner--none {
    --returns-terms-max-width: none;
  }

  .returns-terms__divider {
    width: 100%;
    height: 0;
    margin: 0;
    border: 0;
    border-block-start: 1px solid var(--border-secondary, currentcolor);
  }

  .returns-terms__title {
    margin: 0;
    color: var(--text-primary);
    text-align: start;
  }

  .returns-terms__body > *:first-child {
    margin-block-start: 0;
  }

  .returns-terms__body > *:last-child {
    margin-block-end: 0;
  }

  .returns-terms__body ol,
  .returns-terms__body ul {
    margin-block: var(--spacing-2xs);
    padding-inline-start: 1.25em;
  }

  .returns-terms__body li {
    margin-block-end: var(--spacing-2xs);
  }
/* END_SECTION:returns-terms */

/* START_SECTION:search (INDEX:95) */
.product-listing {
    padding-block-start: var(--product-listing-padding-block-start-mobile, var(--product-listing-padding-block-start));
    padding-block-end: var(--product-listing-padding-block-end-mobile, var(--product-listing-padding-block-end));
  }

  .product-listing__inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  @media screen and (min-width: 750px) {
    .product-listing {
      padding-block-start: var(--product-listing-padding-block-start);
      padding-block-end: var(--product-listing-padding-block-end);
    }
  }
/* END_SECTION:search */

/* START_SECTION:ugc-carousel (INDEX:97) */
.ugc-carousel {
    /* Keep in sync with snippets/ugc-card.liquid so the track can reserve
       active-card height even while a card is mid-transition. */
    --ugc-card-media-height: 360px;
    --ugc-card-media-height-active: 429px;
    --ugc-card-gap: var(--spacing-3xs, 8px);
    --ugc-card-product-height: 60px;
    --ugc-card-active-padding-end: var(--spacing-5xs, 4px);
    --ugc-card-transcript-height: calc(24px + var(--spacing-2xs) * 2);
    /* Only carousels holding a transcript pay for the row, so a track without
       one keeps its existing height. */
    --ugc-card-transcript-space: 0px;
    --ugc-slide-height-media: calc(
      var(--ugc-card-media-height-active)
      + var(--ugc-card-transcript-space)
    );
    --ugc-slide-height-active: calc(
      var(--ugc-card-media-height-active)
      + var(--ugc-card-gap)
      + var(--ugc-card-product-height)
      + var(--ugc-card-active-padding-end)
      + var(--ugc-card-transcript-space)
    );

    display: block;
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    padding-block-start: var(--spacing-xl, 40px);
    padding-block-end: var(--spacing-xl, 40px);
    background-color: var(--surface-primary, #fff);
    color: var(--text-primary);
  }

  /* Reserved on every slide, not just the active one, so moving between cards
     with and without a transcript does not change the track height. */
  .ugc-carousel:has(.ugc-card__transcript) {
    --ugc-card-transcript-space: calc(
      var(--ugc-card-gap) + var(--ugc-card-transcript-height)
    );
  }

  .ugc-carousel__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ugc-carousel__header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: var(--spacing-sm, 20px);
  }

  .ugc-carousel__heading {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-feature-settings: var(--font-feature-settings);
    font-size: 22px;
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
  }

  .ugc-carousel__placeholder {
    margin: 0;
    color: var(--text-secondary);
    text-align: center;
  }

  .ugc-carousel__carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .ugc-carousel__list {
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: center;
    min-height: var(--ugc-slide-height-media);
  }

  .ugc-carousel__list:has(.ugc-card--has-product) {
    min-height: var(--ugc-slide-height-active);
  }

  .ugc-carousel__slide {
    box-sizing: border-box;
    align-items: center;
    width: var(--carousel-card-width-mobile, 280px);
    min-width: 0;
    min-height: var(--ugc-slide-height-media);
    cursor: pointer;
  }

  .ugc-carousel__slide:has(.ugc-card--has-product) {
    min-height: var(--ugc-slide-height-active);
  }

  .ugc-carousel__slide.is-active {
    cursor: default;
  }

  .ugc-carousel__slide:focus-visible {
    outline: 2px solid var(--text-primary, currentColor);
    outline-offset: 4px;
  }

  .ugc-carousel__slide.is-active .ugc-card__product {
    cursor: pointer;
  }

  /* Bleed to the section padding edge. Pre-init CSS padding insets the
     first card; once mounted, Splide owns padding via
     data-padding-inline="section" (inline styles would override CSS alone). */
  .ugc-carousel__carousel .carousel__track {
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-inline: var(--section-padding-inline);
    min-height: var(--ugc-slide-height-media);
  }

  .ugc-carousel__carousel.is-initialized .carousel__track {
    padding-inline: 0;
  }

  .ugc-carousel__carousel:has(.ugc-card--has-product) .carousel__track {
    min-height: var(--ugc-slide-height-active);
  }

  /* Nothing to page through — before mount, and on a finite track whose cards
     already fit — so centre the row rather than leaving it pinned inline-start. */
  .ugc-carousel__carousel.carousel:not(.is-overflow) .carousel__list {
    justify-content: center;
  }

  .ugc-carousel__carousel.carousel--auto .carousel__list > .carousel__slide {
    flex: 0 0 auto;
  }

  /* Beat `.carousel--auto:not(.is-initialized) … { width: auto }` so the static
     row uses the same card width Splide will measure after mount. */
  .ugc-carousel__carousel.carousel--auto:not(.is-initialized) .carousel__list > .carousel__slide {
    width: var(--carousel-card-width-mobile, 280px);
  }

  @media screen and (min-width: 750px) {
    .ugc-carousel {
      --ugc-card-media-height: 380px;
      --ugc-card-media-height-active: 460px;
      --ugc-card-product-height: 80px;
      padding-block-start: var(--ugc-carousel-padding-top);
      padding-block-end: var(--ugc-carousel-padding-bottom);
    }

    .ugc-carousel__inner {
      gap: var(--spacing-xl, 40px);
    }

    .ugc-carousel__header {
      padding-inline: var(--spacing-lg, 32px);
    }

    .ugc-carousel__heading {
      line-height: 1.35;
    }

    .ugc-carousel__slide {
      width: var(--carousel-card-width, 300px);
    }

    .ugc-carousel__carousel.carousel--auto:not(.is-initialized) .carousel__list > .carousel__slide {
      width: var(--carousel-card-width, 300px);
    }
  }
/* END_SECTION:ugc-carousel */

/* START_SECTION:usp-banner (INDEX:98) */
.usp-banner {
    display: grid;
    grid-template-columns: var(--content-grid);
    width: 100%;
    padding-block-start: var(--usp-padding-block-start, 32px);
    padding-block-end: var(--usp-padding-block-end, 64px);
    background-color: var(--surface-primary, var(--color-background));
    color: var(--text-primary, var(--color-foreground));
  }

  .usp-banner__inner {
    grid-column: 2;
    width: 100%;
    min-width: 0;
    padding-inline-start: var(--usp-padding-inline-start, 0px);
    padding-inline-end: var(--usp-padding-inline-end, 0px);
  }

  .usp-banner--full-width .usp-banner__inner {
    grid-column: 1 / -1;
    padding-inline-start: calc(var(--page-margin) + var(--usp-padding-inline-start, 0px));
    padding-inline-end: calc(var(--page-margin) + var(--usp-padding-inline-end, 0px));
  }

  .usp-banner__component {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .usp-banner__viewport {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  /*
    Overflow ticker / manual scroll bleeds to the viewport edges instead of
    clipping at the content-column / page margins (Figma mobile + desktop overflow).
    100vw breakout — avoid transform here so the track marquee transform stays valid.
  */
  .usp-banner--edge-bleed {
    overflow-x: clip;
  }

  .usp-banner--edge-bleed .usp-banner__viewport {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  @media screen and (max-width: 767px) {
    .usp-banner {
      padding-block-start: var(--usp-padding-block-start-mobile, var(--usp-padding-block-start, 32px));
      padding-block-end: var(--usp-padding-block-end-mobile, var(--usp-padding-block-end, 64px));
      background-color: transparent;
    }

    .usp-banner__inner {
      padding-inline-start: var(--usp-padding-inline-start-mobile, var(--usp-padding-inline-start, 0px));
      padding-inline-end: var(--usp-padding-inline-end-mobile, var(--usp-padding-inline-end, 0px));
    }

    .usp-banner--full-width .usp-banner__inner {
      padding-inline-start: calc(
        var(--page-margin) + var(--usp-padding-inline-start-mobile, var(--usp-padding-inline-start, 0px))
      );
      padding-inline-end: calc(
        var(--page-margin) + var(--usp-padding-inline-end-mobile, var(--usp-padding-inline-end, 0px))
      );
    }

    /* Mobile rotating: edge-bleed from first paint while the ticker runs */
    @media screen and (prefers-reduced-motion: no-preference) {
      .usp-banner--mobile-rotating {
        overflow-x: clip;
      }

      .usp-banner--mobile-rotating .usp-banner__viewport {
        width: 100vw;
        max-width: 100vw;
        margin-inline: calc(50% - 50vw);
      }
    }
  }

  .usp-banner__track {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--usp-gap-effective, var(--usp-gap, var(--spacing-5xl, 80px)));
  }

  /*
    Intrinsic sizing so overflow can be detected (width: 100% previously squeezed
    nowrap labels and blocked the desktop ticker).
  */
  .usp-banner__content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--usp-gap-effective, var(--usp-gap, var(--spacing-5xl, 80px)));
    width: max-content;
    max-width: none;
    flex: 0 0 auto;
  }

  .usp-banner__content > .usp-block {
    flex: 0 0 auto;
  }

  .usp-banner__content--clone {
    display: none;
  }

  /*
    Large layout dividers sit in the middle of a single flex gap (via ::after),
    so the merchant gap value is not applied twice (unlike a divider flex child).
  */
  .usp-banner--large .usp-block {
    --usp-divider-offset: calc(var(--usp-gap-effective, var(--usp-gap, var(--spacing-5xl, 80px))) / -2);

    position: relative;
  }

  .usp-banner--large .usp-block:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--usp-divider-offset);
    border-inline-start: 1px solid var(--border-secondary);
  }

  /*
    The row-to-clone gap is a real inter-item gap while the ticker loops, so the
    seam needs the divider that :last-child suppresses. Anchoring it to the
    clone's leading item scopes it to the clone's own visibility, so a static
    row never gains a trailing rule.
  */
  .usp-banner--large .usp-banner__content--clone > .usp-block:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--usp-divider-offset);
    border-inline-start: 1px solid var(--border-secondary);
  }

  /* Soften merchant gap as the viewport narrows — continuum from 768 up */
  @media screen and (min-width: 768px) {
    .usp-banner--icon {
      --usp-gap-effective: clamp(var(--spacing-md, 24px), 3.2vw, var(--usp-gap));
    }

    .usp-banner--large {
      --usp-gap-effective: clamp(var(--spacing-lg, 32px), 4vw, var(--usp-gap));
    }
  }

  /*
    Desktop overflow ticker — JS adds .usp-banner--marquee when content overflows.
    Gated on motion preference: the clone and max-content track are only legible as
    a ticker while the animation runs, so reduced motion falls back to the static row
    (made scrollable below when it overflows).
  */
  @media screen and (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .usp-banner--marquee .usp-banner__track {
      width: max-content;
      will-change: transform;
      animation: usp-banner-marquee var(--usp-marquee-duration, 20s) linear infinite;
      animation-direction: var(--usp-marquee-direction, normal);
    }

    .usp-banner--marquee .usp-banner__content--clone {
      display: flex;
    }
  }

  /* Mobile: continuous looping marquee (icon + large rotating) */
  @media screen and (max-width: 767px) {
    .usp-banner--mobile-rotating {
      --usp-gap-effective: var(--grid-md-gutter, 32px);
    }

    .usp-banner--icon.usp-banner--mobile-rotating {
      --usp-gap-effective: var(--spacing-md, 24px);
    }

    /* Large stacked — Figma MobileLarge Stacked */
    .usp-banner--large.usp-banner--mobile-stacked .usp-banner__content {
      flex-direction: column;
      gap: var(--spacing-sm, 20px);
      width: 100%;
    }

    .usp-banner--large.usp-banner--mobile-stacked .usp-banner__track {
      width: 100%;
      animation: none;
      will-change: auto;
    }

    .usp-banner--large.usp-banner--mobile-stacked .usp-banner__content--clone {
      display: none;
    }

    .usp-banner--large.usp-banner--mobile-stacked .usp-block:not(:last-child)::after {
      top: auto;
      bottom: calc(var(--spacing-sm, 20px) / -2);
      right: 0;
      left: 0;
      border-inline-start: none;
      border-block-start: 1px solid var(--border-secondary);
    }
  }

  /* Rotating geometry rides with the animation, so reduced motion keeps the scrollable static row */
  @media screen and (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .usp-banner--mobile-rotating .usp-banner__track {
      width: max-content;
      will-change: transform;
      animation: usp-banner-marquee var(--usp-marquee-duration, 20s) linear infinite;
      animation-direction: var(--usp-marquee-direction, normal);
    }

    .usp-banner--mobile-rotating .usp-banner__content--clone {
      display: flex;
    }

    .usp-banner--large.usp-banner--mobile-stacked .usp-banner__track {
      animation: none;
    }
  }

  /*
    Reduced motion has no ticker to reveal the overflow, so the clipped viewport
    would strand items off-screen. Manual scrolling replaces the animation.
    Auto margins centre the row while it fits and collapse to 0 once it overflows,
    keeping every item reachable from the scroll start edge.
  */
  @media screen and (prefers-reduced-motion: reduce) {
    .usp-banner__viewport {
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
    }

    .usp-banner__viewport:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 2px;
    }

    .usp-banner__track {
      justify-content: flex-start;
    }

    .usp-banner__content {
      margin-inline: auto;
    }
  }

  @keyframes usp-banner-marquee {
    to {
      transform: translate3d(
        calc(-50% - (var(--usp-gap-effective, var(--usp-gap, var(--spacing-5xl, 80px))) / 2)),
        0,
        0
      );
    }
  }
/* END_SECTION:usp-banner */

/* CSS from block stylesheet tags */
/* START_BLOCK:_additional-info (INDEX:101) */
/* Mobile Figma: column stack (icon above copy); desktop keeps row */
  .additional-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: var(--spacing-2xs);
    border: 1px solid var(--border-invert);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
  }

  .additional-info__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    color: var(--text-primary);
  }

  .additional-info__icon .icon {
    width: 100%;
    height: 100%;
  }

  .additional-info__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-5xs);
    align-items: flex-start;
    min-width: 0;
    width: 100%;
  }

  .additional-info__title,
  .additional-info__content {
    margin: 0;
    font-family: var(--font-primary--family);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  .additional-info__title {
    color: var(--text-secondary);
    /* Mobile Figma Bold/xs = 12px (body-sm) */
    font-size: var(--font-body-sm-size);
  }

  .additional-info__content {
    color: var(--text-primary);
    /* Mobile Figma Regular/sm = 13px (body-md) */
    font-size: var(--font-body-md-size);
  }

  .additional-info__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .additional-info--empty {
    border-style: dashed;
  }

  @media screen and (min-width: 750px) {
    .additional-info {
      flex-direction: row;
    }

    .additional-info__icon {
      width: var(--size-5);
      height: var(--size-5);
    }

    .additional-info__text {
      width: auto;
    }
  }

  @media screen and (min-width: 768px) {
    .additional-info__title {
      font-size: var(--font-body-xs-size);
      line-height: var(--font-body-xs-line-height);
    }

    .additional-info__content {
      font-size: var(--font-body-sm-size);
      line-height: var(--font-body-sm-line-height);
    }
  }
/* END_BLOCK:_additional-info */

/* START_BLOCK:_additional-product-info (INDEX:102) */
.additional-product-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--additional-product-info-gap, var(--spacing-3xs));
    width: 100%;
    min-width: 0;
    padding-block-start: var(--additional-product-info-padding-block-start, 0);
    padding-block-end: var(--additional-product-info-padding-block-end, 0);
    padding-inline-start: var(--additional-product-info-padding-inline-start, 0);
    padding-inline-end: var(--additional-product-info-padding-inline-end, 0);
  }

  .additional-product-info:empty,
  .additional-product-info:not(:has(.additional-info)) {
    display: none;
  }

  .additional-product-info > .shopify-block {
    min-width: 0;
    max-width: 100%;
  }

  .additional-product-info > .shopify-block:not(:has(.additional-info)) {
    display: none;
  }
/* END_BLOCK:_additional-product-info */

/* START_BLOCK:_article-chip (INDEX:104) */
.article-chip {
    display: inline-flex;
    flex-shrink: 0;
  }

    .article-chip .chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-3xs) var(--spacing-xs);
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary, #f5f5f5);
    color: var(--text-primary, #333);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size, 0.875rem);
    line-height: var(--font-body-md-line-height, 1.4);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .article-chip .chip--selected,
  .article-chip .chip[aria-selected='true'] {
    background-color: var(--surface-brand-dark, #4d9d34);
    color: var(--text-invert, #fff);
  }

  .article-chip .chip:hover:not(.chip--selected):not([aria-selected='true']),
  .article-chip .chip:focus-visible:not(.chip--selected):not([aria-selected='true']) {
    background-color: var(--surface-brand-light, #eef4dc);
    color: var(--text-primary, #333);
  }

  .article-chip .chip--incomplete {
    border: 1px dashed var(--border-secondary);
    background-color: transparent;
  }

  .article-chip .chip--incomplete:hover,
  .article-chip .chip--incomplete:focus-visible {
    background-color: transparent;
  }

  .article-chip .chip:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  .article-chip--empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--spacing-3xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary, #f5f5f5);
  }

  .article-chip__placeholder {
    margin: 0;
    color: var(--text-secondary, #767676);
    font-size: var(--font-body-md-size, 0.875rem);
    line-height: var(--font-body-md-line-height, 1.4);
    white-space: nowrap;
  }
/* END_BLOCK:_article-chip */

/* START_BLOCK:_cart-empty (INDEX:108) */
.cart-empty {
    --cart-empty-card-gap-adjustment: -8px;
    --cart-empty-message-max-width: 16rem;
    --cart-empty-message-size: 14px;

    display: flex;
    flex-direction: column;
    gap: var(--cart-empty-gap, var(--spacing-md));
    align-items: stretch;
    width: 100%;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    text-align: var(--text-align, center);
  }

  .cart-empty--editor {
    opacity: 0.45;
  }

  .cart-empty .cta {
    align-self: var(--cart-empty-cta-align, center);
  }

  .cart-empty .cta .button {
    height: var(--size-8);
  }

  .cart-empty .text-block {
    max-width: var(--cart-empty-message-max-width);
    margin-inline: auto;
    font-size: var(--cart-empty-message-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .cart-empty > .cart-need-card {
    text-align: left;
  }

  .cart-empty > .cart-need-card + .cart-need-card {
    margin-block-start: var(--cart-empty-card-gap-adjustment);
  }

  .cart-empty--left .text-block {
    margin-inline: 0 auto;
  }

  .cart-empty--right .text-block {
    margin-inline: auto 0;
  }
/* END_BLOCK:_cart-empty */

/* START_BLOCK:_col (INDEX:111) */
.layout-col {
    display: flex;
    gap: var(--layout-col-gap, 0);
    align-items: var(--layout-col-align, stretch);
    width: 100%;
    min-width: 0;
    height: 100%;
  }

  .layout-col--vertical {
    flex-direction: column;
  }

  .layout-col--horizontal {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .layout-col > .shopify-block {
    min-width: 0;
    max-width: 100%;
  }

  .layout-col--horizontal > .shopify-block {
    flex: 1 1 0;
  }
/* END_BLOCK:_col */

/* START_BLOCK:_connect (INDEX:113) */
.footer-connect {
    --footer-contact-icon-size: var(--size-6);
    --footer-contact-line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    color: inherit;
    font-family: var(--font-primary--family);
  }

  .footer-connect__contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    font-style: normal;
    width: 100%;
  }

  .footer-connect__contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-connect__contact-link {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3xs);
    color: inherit;
    text-decoration: none;
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
    font-feature-settings: var(--font-feature-settings);
  }

  .footer-connect__contact-link:hover,
  .footer-connect__contact-link:focus-visible {
    text-decoration: underline;
  }

  .footer-connect__contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--footer-contact-icon-size);
    height: var(--footer-contact-icon-size);
  }

  /* The global svg reset stretches icons to their container, so pin the size */
  .footer-connect__contact-icon svg {
    width: var(--footer-contact-icon-size);
    max-width: var(--footer-contact-icon-size);
    height: var(--footer-contact-icon-size);
  }

  /*
   * These marks are stroke-drawn at 1 unit on a 24 unit grid, so they land on
   * fractional device pixels and anti-alias into broken hairlines. A heavier
   * stroke keeps them solid against the 14px body text.
   */
  .footer-connect__contact-icon path {
    stroke-width: 1.5;
  }

  /* Centres the first line against the icon box while the address wraps below */
  .footer-connect__contact-text {
    padding-block-start: calc((var(--footer-contact-icon-size) - var(--footer-contact-line-height) * 1em) / 2);
  }

  .footer-connect__payment {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  /* Gap is sized so the 8 marks in the design fit one row of the 302px column */
  .footer-connect__payment-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-4xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-connect__payment-item {
    display: flex;
    flex: 0 0 auto;
    width: 31px;
    height: 17px;
    line-height: 0;
  }

  /* Figma payment marks 31×17; assets include badge fill + border */
  .footer-connect__payment-icon,
  .footer-connect__payment-item svg {
    display: block;
    width: 31px;
    max-width: 31px;
    height: 17px;
    max-height: 17px;
  }

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

  @media screen and (min-width: 1024px) {
    .footer-connect {
      width: 100%;
      max-width: 100%;
    }
  }
/* END_BLOCK:_connect */

/* START_BLOCK:_contact-form (INDEX:114) */
/* No `display` here — an author rule would outrank the `hidden` attribute
     the parent section uses to swap panels. */
  .contact-form {
    width: 100%;
    min-width: 0;
  }

  .contact-form__embed {
    width: 100%;
  }

  .contact-form__embed shopify-forms-embed,
  .contact-form__embed [data-form-root],
  .contact-form__embed [data-forms-id] {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .contact-form__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }
/* END_BLOCK:_contact-form */

/* START_BLOCK:_contact (INDEX:115) */
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--spacing-xs);
    width: 100%;
    color: inherit;
  }

  /* Logo → newsletter → location switcher (PO: switcher under signup on mobile) */
  .footer-contact > .shopify-block:has(.footer-logo) {
    order: 1;
  }

  .footer-contact > .shopify-block:has(.newsletter) {
    order: 2;
  }

  .footer-contact > .shopify-block:has(.localization-selector-block) {
    order: 3;
  }

  @media screen and (min-width: 768px) {
    .footer-contact {
      gap: var(--spacing-xl);
      /* Desktop Figma: logo + newsletter at top, selector pinned to bottom */
      justify-content: flex-start;
      min-height: 100%;
    }

    .footer-contact > .shopify-block:has(.localization-selector-block) {
      margin-top: auto;
    }
  }

  @media screen and (min-width: 1024px) {
    .footer-contact {
      flex: 0 0 290px;
      width: 290px;
      max-width: 290px;
      align-self: stretch;
    }
  }
/* END_BLOCK:_contact */

/* START_BLOCK:_filter-content-block (INDEX:118) */
.filter-content-item {
    --filter-content-cta-gap: 19px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    width: 100%;
  }

  .filter-content-item[hidden] {
    display: none;
  }

  .filter-content-item__body {
    display: flex;
    flex-direction: column;
    gap: var(--filter-content-cta-gap);
    min-width: 0;
    width: 100%;
  }

  .filter-content-item__body:empty {
    display: none;
  }

  /*
    A CTA that renders no button still leaves its theme-block wrapper. That
    wrapper is a flex item, so it adds a gap under the copy. Collapse it.
    The suppressed marker stays in the DOM so the heading-arrow rule can see it.
  */
  .filter-content-item__body > .shopify-block[id*='__cta_']:not(:has(.button)) {
    display: none;
  }

  /* Saved Find out more links turn the icon off. Reveal the shared arrow on hover anyway. */
  .filter-content-item__body .button--underline:hover .button__icon,
  .filter-content-item__body .button--underline:focus-visible .button__icon,
  .filter-content-item__body .button--underline:active .button__icon {
    display: inline-flex;
    width: var(--size-4);
    margin-inline-start: var(--button-gap);
    opacity: 1;
  }

  .filter-content-item__body .richtext {
    display: flex;
    flex-direction: column;
    gap: var(--filter-content-cta-gap);
  }

  .filter-content-item__body .richtext > * {
    margin: 0;
  }

  /*
    A paragraph holding nothing but a link is the CTA pattern, so it takes the
    underline button treatment. Links inside copy keep the body typography.
  */
  .filter-content-item__body .richtext p > a:only-child {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding-block-end: var(--spacing-5xs);
    border-block-end: 1px solid var(--border-brand-dark);
    color: var(--text-primary);
    font-family: var(--font-subheading--family);
    font-style: var(--font-subheading--style);
    font-size: var(--font-button-md-size);
    font-weight: var(--font-button-md-weight);
    line-height: var(--font-button-md-line-height);
    letter-spacing: var(--font-button-md-letter-spacing);
    text-decoration: none;
  }

  .filter-content-item__body .richtext p > a:only-child:hover,
  .filter-content-item__body .richtext p > a:only-child:focus-visible {
    text-decoration: none;
  }

  .filter-content-item__body > .shopify-block {
    min-width: 0;
    max-width: 100%;
  }

  .filter-content-item__media {
    min-width: 0;
    width: 100%;
  }

  .filter-content-item__figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    background-color: transparent;
  }

  .filter-content-item__figure picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .filter-content-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
  }

  .filter-content-item__image--placeholder {
    min-height: 240px;
  }

  .filter-content-item__mobile-row {
    display: none;
  }

  .filter-content-item__mobile-thumb {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    width: 80px;
    height: 80px;
    background-color: color-mix(in srgb, currentColor 6%, transparent);
  }

  .filter-content-item__mobile-thumb-image,
  .filter-content-item__mobile-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .filter-content-item__mobile-label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    line-height: var(--font-title-md-line-height);
    letter-spacing: var(--font-title-md-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
    text-align: left;
  }

  .filter-content-item__mobile-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    /* Figma mobile Arrow-Right instance: 28×28 with 6px padding around 16px path. */
    width: 28px;
    height: 28px;
    padding: 6px;
    box-sizing: border-box;
  }

  .filter-content-item__mobile-icon .filter-content__arrow-path {
    display: block;
    width: 16px;
    height: auto;
  }

  /* Theme editor: Pill items that the storefront would hide stay visible but quieter */
  .filter-content__root[data-design-mode='true'][data-layout-mode='pill'] .filter-content-item:not(.is-active) {
    display: flex;
    opacity: 0.45;
  }

  @media screen and (min-width: 768px) {
    .filter-content-item__figure {
      border-radius: var(--radius-lg);
    }
  }
/* END_BLOCK:_filter-content-block */

/* START_BLOCK:_filter-content-header (INDEX:119) */
.filter-content-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--filter-content-header-gap, var(--spacing-2xs));
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    text-align: var(--filter-content-header-text-align, left);
  }

  .filter-content-header:empty {
    display: none;
  }

  .filter-content-header > .shopify-block {
    display: flex;
    flex-direction: column;
    align-items: var(--filter-content-header-align, stretch);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /*
    Header owns group alignment. Nested text-blocks set --text-align inline,
    so inherit the header text-align instead of their own default.
  */
  .filter-content-header .text-block {
    text-align: inherit;
  }
/* END_BLOCK:_filter-content-header */

/* START_BLOCK:_grid (INDEX:121) */
.layout-grid {
    display: grid;
    gap: var(--layout-grid-gap, 0);
    align-items: var(--layout-grid-align-items, start);
    width: 100%;
    min-width: 0;
    grid-template-columns: var(--layout-grid-template, minmax(0, 1fr) minmax(0, 1fr));
  }

  .layout-grid--stack-mobile {
    grid-template-columns: minmax(0, 1fr);
  }

  .layout-grid > .shopify-block {
    min-width: 0;
    max-width: 100%;
  }

  @media screen and (min-width: 768px) {
    .layout-grid--stack-mobile {
      grid-template-columns: var(--layout-grid-template, minmax(0, 1fr) minmax(0, 1fr));
    }
  }

  /* Stacked PDP: Figma sm (20) between gallery and buy box; desktop keeps the setting. */
  @media screen and (max-width: 767px) {
    .layout-grid--stack-mobile {
      gap: var(--spacing-sm);
    }
  }
/* END_BLOCK:_grid */

/* START_BLOCK:_icon (INDEX:122) */
.icon-block {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    color: var(--icon-block-color, currentColor);
  }

  .icon-block .icon {
    display: block;
    width: var(--icon-block-size, 36px);
    height: var(--icon-block-size, 36px);
  }

  /*
    Uploads keep their own shape: the size sets the height and the width
    follows the ratio. A definite width (not auto) lets max-width cap a wide
    upload at the banner column, and height: auto then scales it down with
    the width instead of squashing it.
  */
  .icon-block__image {
    display: block;
    width: calc(var(--icon-block-size, 36px) * var(--icon-block-ratio, 1));
    max-width: 100%;
    height: auto;
  }
/* END_BLOCK:_icon */

/* START_BLOCK:_image-text-content (INDEX:123) */
.image-text-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--image-text-content-gap, var(--spacing-sm));
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    text-align: var(--image-text-content-text-align, left);
  }

  /* Child wrappers stay in the DOM when their block renders nothing, so check inside them. */
  .image-text-content:not(:has(> .shopify-block > *, > :not(.shopify-block))) {
    display: none;
  }

  .image-text-content > .shopify-block {
    display: flex;
    flex-direction: column;
    align-items: var(--image-text-content-align, stretch);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .image-text-content > .shopify-block:not(:has(*)) {
    display: none;
  }

  .image-text-content .text-block {
    text-align: inherit;
  }

  .image-text-content .richtext :is(p, h1, h2, h3, h4, h5, h6):not(:last-child) {
    margin-block-end: var(--spacing-sm);
  }

  /*
    Figma shows the arrow on mobile and not on desktop. The underline button
    reveals its icon on hover, so mobile forces it open and desktop restores
    that hover. show_icon off stays hidden.
  */
  .image-text-content .button--underline .button__icon {
    width: var(--size-4);
    margin-inline-start: var(--spacing-3xs);
    opacity: 1;
  }

  .image-text-content .button--no-icon .button__icon {
    display: none;
    width: 0;
    margin-inline-start: 0;
    opacity: 0;
  }

  @media screen and (min-width: 750px) {
    /* Merchant padding wins when it is larger than the design's 80px measure inset. */
    .image-text-content {
      padding-inline-end: max(var(--padding-inline-end, 0px), var(--image-text-content-inline-end-desktop, 0px));
    }

    .image-text-content .button--underline .button__icon {
      width: 0;
      margin-inline-start: 0;
      opacity: 0;
    }

    .image-text-content .button--underline:hover .button__icon,
    .image-text-content .button--underline:focus-visible .button__icon,
    .image-text-content .button--underline:active .button__icon {
      width: var(--size-4);
      margin-inline-start: var(--spacing-3xs);
      opacity: 1;
    }

    .image-text-content .button--no-icon .button__icon,
    .image-text-content .button--no-icon:hover .button__icon,
    .image-text-content .button--no-icon:focus-visible .button__icon,
    .image-text-content .button--no-icon:active .button__icon {
      display: none;
      width: 0;
      margin-inline-start: 0;
      opacity: 0;
    }
  }
/* END_BLOCK:_image-text-content */

/* START_BLOCK:_klarna (INDEX:125) */
.klarna-osm {
    display: flex;
    flex-direction: column;
    gap: var(--klarna-osm-gap, 0);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    /* Divider gap is the total space below the line; the form gap covers
       part of it, so only the remainder becomes margin. */
    margin-block-end: max(0px, calc(var(--product-form-divider-gap, 0px) - var(--product-form-gap, 0px)));
    padding-block-start: var(--padding-block-start-mobile, var(--padding-block-start, 0));
    padding-block-end: var(--padding-block-end-mobile, var(--padding-block-end, var(--spacing-xs)));
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    background-color: var(--klarna-osm-background, transparent);
    border-block-end: 1px solid var(--border-secondary);
  }

  @media screen and (min-width: 750px) {
    .klarna-osm {
      padding-block-start: var(--padding-block-start, 0);
      padding-block-end: var(--padding-block-end, var(--spacing-xs));
    }
  }

  .klarna-osm--align-center {
    align-items: center;
  }

  .klarna-osm--align-right {
    align-items: flex-end;
  }

  .klarna-osm > .shopify-block {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    padding-block: 0;
    background-color: var(--klarna-osm-background, transparent);
  }

  /*
   * Klarna OSM renders in shadow DOM. Only ::part() is documented — nested
   * nodes inside a part cannot be targeted. Iframe-only builds ignore this.
   * https://docs.klarna.com/acquirer/klarna/on-site-messaging/additional-resources/styling-on-site-messaging-with-css/
   */
  .klarna-osm klarna-placement::part(osm-container) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: var(--klarna-osm-background, transparent);
    padding-block: 0;
    padding-inline: 0;
  }

  .klarna-osm klarna-placement::part(osm-message),
  .klarna-osm klarna-placement::part(osm-cta),
  .klarna-osm klarna-placement::part(osm-legal) {
    font-family: var(--font-primary--family);
    font-size: var(--font-body-sm-size, 12px);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .klarna-osm klarna-placement::part(osm-badge),
  .klarna-osm klarna-placement::part(osm-logo) {
    align-self: flex-start;
    margin-inline-end: var(--spacing-3xs);
  }

  .klarna-osm--empty:not(.klarna-osm--editor) {
    display: none;
  }

  .klarna-osm__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_BLOCK:_klarna */

/* START_BLOCK:_link-list (INDEX:126) */
.link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--link-list-gap, var(--spacing-3xs));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The accordion body is `.rte`, and its `a` rules in critical.css outrank
     `.button`, repainting a text underline over the underline button's border
     and thickening it on hover. Restate the button's own treatment here, where
     the selector is heavy enough to win. */
  .link-list .button,
  .link-list .button:hover,
  .link-list .button:focus-visible {
    text-decoration: none;
  }

  .link-list__placeholder {
    margin: 0;
    opacity: 0.7;
  }
/* END_BLOCK:_link-list */

/* START_BLOCK:_overview-accordions (INDEX:129) */
.overview-accordions {
    width: 100%;
    min-width: 0;
  }

  /*
    Figma Details-desktop overview (19390:20787): 16 gap, 20 pad, 20 icons,
    surface-secondary @ 70%, radius-md, soft shadow.
  */
  .overview-accordions .accordion {
    max-width: none;
    margin-inline: 0;
    gap: var(--spacing-xs);
  }

  .overview-accordions .accordion-row {
    padding: var(--spacing-sm);
    background-color: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
    box-shadow: 0 2px 4px rgb(0 0 0 / 4%);
  }

  .overview-accordions .accordion-row__heading {
    gap: var(--spacing-3xs);
  }

  .overview-accordions .accordion-row__icon-media,
  .overview-accordions .accordion-row__icon-image {
    width: 20px;
    height: 20px;
  }

  .overview-accordions .accordion-row__icons {
    width: 16px;
    height: 16px;
    padding: 0;
  }

  .overview-accordions__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }
/* END_BLOCK:_overview-accordions */

/* START_BLOCK:_product-callouts (INDEX:131) */
.product-callouts {
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  /* Mobile Figma: 12px pad/gap, radius-md; desktop keeps 16 / radius-lg */
  .product-callouts__panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding: var(--spacing-2xs);
    border-radius: var(--radius-md);
    background-color: var(--surface-secondary);
  }

  .product-callouts:not(:has(.product-callout)):not(:has(.product-callout--empty)) {
    display: none;
  }

  /* Mobile Figma: 20px after the panel, including the form gap */
  @media screen and (max-width: 749px) {
    .product-callouts {
      padding-block-end: max(0px, calc(var(--spacing-sm) - var(--product-form-gap, 0px)));
    }
  }

  @media screen and (min-width: 750px) {
    .product-callouts__panel {
      gap: var(--spacing-xs);
      padding: var(--spacing-xs);
      border-radius: var(--radius-lg);
    }
  }
/* END_BLOCK:_product-callouts */

/* START_BLOCK:_product-compare-control (INDEX:133) */
/* Figma: 24 to the upsell, including the form gap */
  .product-compare-control {
    display: flex;
    padding-block-end: max(0px, calc(var(--spacing-md) - var(--product-form-gap, 0px)));
  }

  .product-compare-control__label {
    display: inline-flex;
    gap: var(--spacing-3xs);
    align-items: center;
    min-height: var(--size-6);
    cursor: pointer;
  }

  .product-compare-control__label.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .product-compare-control__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    opacity: 0;
    pointer-events: none;
    appearance: none;
  }

  .product-compare-control__box {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--size-4);
    height: var(--size-4);
    padding: var(--spacing-6xs);
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-2xs);
    background-color: transparent;
    color: var(--checkbox-tick-hover, var(--border-primary));
  }

  .product-compare-control__box .icon {
    display: block;
    width: 12px;
    height: 12px;
  }

  .product-compare-control__input:checked + .product-compare-control__box {
    border-color: var(--surface-invert);
    background-color: var(--surface-invert);
  }

  .product-compare-control__input:checked + .product-compare-control__box .checkbox__tick {
    opacity: 1;
    color: var(--text-invert);
  }

  .product-compare-control__input:focus-visible + .product-compare-control__box {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .product-compare-control__text {
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
  }
/* END_BLOCK:_product-compare-control */

/* START_BLOCK:_product-comparison (INDEX:135) */
.product-comparison {
    --touch-target-size: 44px;
    --product-comparison-gutter: var(--spacing-5xs);
    --product-comparison-grid: 6rem repeat(var(--product-comparison-cols, 1), minmax(8.25rem, 1fr));
    --product-comparison-row-fill: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
    --product-comparison-row-fill-sticky: color-mix(in srgb, var(--surface-secondary) 70%, var(--surface-primary));
    /* Keeps the gutter white when scrolled columns pass under the sticky first column */
    --product-comparison-sticky-guard: var(--product-comparison-gutter) 0 0 var(--surface-primary);
    box-sizing: border-box;
    display: block;
    width: calc(100% + (var(--section-padding-inline) * 2));
    min-width: 0;
    margin-inline: calc(var(--section-padding-inline) * -1);
  }

  @media screen and (min-width: 750px) {
    .product-comparison {
      width: 100%;
      margin-inline: 0;
    }
  }

  @media screen and (min-width: 1024px) {
    .product-comparison {
      --product-comparison-grid: minmax(0, 1fr) repeat(var(--product-comparison-cols, 1), minmax(0, 1fr));
    }
  }

  .product-comparison__scroller {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    /* Row-label column (6rem) plus the gutter, so snapping never parks a bag under it */
    scroll-padding-inline-start: 6.25rem;
    scroll-snap-type: x proximity;
  }

  .product-comparison__table {
    display: flex;
    flex-direction: column;
    gap: var(--product-comparison-gutter);
    min-width: 100%;
  }

  .product-comparison__head {
    display: grid;
    grid-template-columns: var(--product-comparison-grid);
    column-gap: var(--product-comparison-gutter);
    width: 100%;
    min-width: calc(6rem + (8.25rem + var(--product-comparison-gutter)) * var(--product-comparison-cols, 1));
  }

  .product-comparison__body {
    display: contents;
  }

  .product-comparison__toggle-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    padding: var(--spacing-xs) 0;
    border-block-end: 1px solid var(--border-secondary);
    background-color: var(--surface-primary);
  }

  .product-comparison__toggle {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    cursor: pointer;
  }

  .product-comparison__toggle-label {
    max-width: 5.125rem;
    color: var(--text-primary);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
    text-align: center;
  }

  .product-comparison__toggle-control {
    order: -1;
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-target-size);
    min-height: var(--touch-target-size);
  }

  .product-comparison__toggle-input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
  }

  .product-comparison__toggle-track {
    position: relative;
    box-sizing: border-box;
    display: block;
    flex-shrink: 0;
    width: 2.0625rem;
    height: 1.25rem;
    padding: 3px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    pointer-events: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .product-comparison__toggle-track::after {
    position: absolute;
    inset-block: 3px;
    inset-inline-start: 3px;
    aspect-ratio: 1;
    height: calc(100% - 6px);
    width: auto;
    border-radius: var(--radius-full);
    background-color: var(--surface-invert);
    content: '';
    transition: inset-inline-start 0.15s ease, inset-inline-end 0.15s ease;
  }

  .product-comparison__toggle-input:checked + .product-comparison__toggle-track {
    border-color: var(--surface-brand-dark);
    background-color: var(--surface-brand-dark);
  }

  .product-comparison__toggle-input:checked + .product-comparison__toggle-track::after {
    inset-inline-start: auto;
    inset-inline-end: 3px;
    background-color: var(--surface-primary);
  }

  .product-comparison__toggle-input:focus-visible + .product-comparison__toggle-track {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  .product-comparison__dots {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: center;
    justify-content: center;
    padding-block-start: var(--spacing-md);
  }

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

  .product-comparison__dot {
    position: relative;
    width: 0.375rem;
    height: 0.375rem;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: var(--surface-invert);
    opacity: 0.3;
    cursor: pointer;
  }

  .product-comparison__dot::before {
    position: absolute;
    inset: 50%;
    width: var(--touch-target-size);
    height: var(--touch-target-size);
    translate: -50% -50%;
    content: '';
  }

  .product-comparison__dot.is-active {
    width: 1.5rem;
    height: 0.375rem;
    opacity: 1;
  }

  @media screen and (min-width: 1024px) {
    .product-comparison__toggle-cell {
      padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-lg);
    }

    .product-comparison__toggle {
      flex-wrap: nowrap;
      justify-content: flex-start;
      text-align: start;
    }

    .product-comparison__toggle-control {
      order: 0;
    }

    .product-comparison__toggle-track {
      width: 2.75rem;
      height: 1.625rem;
    }

    .product-comparison__toggle-label {
      max-width: none;
      font-size: var(--font-body-xl-size);
      line-height: var(--font-body-xl-line-height);
      text-align: start;
    }

    .product-comparison__dots {
      display: none;
    }

    .product-comparison__scroller {
      scroll-padding-inline-start: 0;
    }
  },
/* END_BLOCK:_product-comparison */

/* START_BLOCK:_product-details-richtext (INDEX:136) */
.product-details-richtext {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /*
    Figma stack: 20 after paragraphs, 12 after headings / other blocks.
    Descendant selectors so nested metafield wrappers still pick up spacing.
  */
  .product-details-richtext :is(p, h1, h2, h3, h4, h5, h6, ul, ol) {
    margin-block: 0;
  }

  .product-details-richtext :is(h1, h2, h3, h4, h5, h6, ul, ol):not(:last-child) {
    margin-block-end: var(--spacing-2xs);
  }

  .product-details-richtext p:not(:last-child) {
    margin-block-end: var(--spacing-sm);
  }

  .product-details-richtext__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }
/* END_BLOCK:_product-details-richtext */

/* START_BLOCK:_product-details-tab (INDEX:137) */
.product-details-tab {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .product-details-tab[hidden] {
    display: none;
  }

  /* Drop empty tabs before the script runs so mobile never flashes the header. */
  product-details[data-design-mode='false'] .product-details-tab[data-empty='true'] {
    display: none;
  }

  .product-details-tab:not(.is-active) .product-details-tab__body {
    display: none;
  }

  .product-details-tab.is-active .product-details-tab__body {
    display: block;
  }

  /*
    Pre-JS: show the first non-empty panel only. :first-child would flash an
    empty leading tab when JS later activates the first data-empty="false".
  */
  product-details:not(.is-ready) .product-details-tab[data-empty='false'] .product-details-tab__body {
    display: block;
  }

  product-details:not(.is-ready)
    .product-details-tab[data-empty='false']
    ~ .product-details-tab[data-empty='false']
    .product-details-tab__body {
    display: none;
  }

  .product-details-tab__body {
    width: 100%;
    min-width: 0;
  }

  .product-details-tab__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    width: 100%;
    min-width: 0;
  }

  .product-details-tab__columns > * {
    min-width: 0;
  }

  /*
    Blank image/video blocks leave an empty .shopify-block (no element
    children). Hide only those — never heading/text/other filled wrappers.
  */
  .product-details-tab__columns > .shopify-block:not(:has(*)) {
    display: none;
  }

  .product-details-tab__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }

  @media screen and (max-width: 767px) {
    .product-details-tab.is-active .product-details-tab__body {
      padding-block-start: var(--spacing-sm);
      /* Figma Details-mobile (19419:39623): breathing room before the next tab. */
      padding-block-end: var(--spacing-sm, 20px);
    }

    .product-details-tab__columns--split {
      gap: var(--spacing-sm);
    }

    /* Mobile copy should span the content width (no desktop column max-width). */
    .product-details-tab__columns > .product-details-richtext,
    .product-details-tab__columns--split > .product-details-richtext,
    .product-details-tab__columns > .shopify-block,
    .product-details-tab__columns > .image-block,
    .product-details-tab__columns > .video-block {
      width: 100%;
      max-width: none;
    }

    .product-details-tab .image-block__image,
    .product-details-tab .image-block__placeholder {
      border-radius: var(--radius-md, 8px);
    }
  }

  @media screen and (min-width: 768px) {
    .product-details-tab .image-block__image,
    .product-details-tab .image-block__placeholder {
      border-radius: var(--radius-lg, 12px);
    }

    /*
      Solo media / copy — Figma Details-desktop on 1344 content (1440 − 48×2):
      media/video 777, simple richtext 800. Scales with section--full-width up
      to the 1920 shell. Public image/video sit in .shopify-block; private
      richtext uses tag: null.
    */
    .product-details-tab__columns > .image-block:only-child,
    .product-details-tab__columns > .video-block:only-child,
    .product-details-tab__columns > .shopify-block:only-child:has(.image-block, .video-block) {
      max-width: calc(100% * 777 / 1344);
    }

    .product-details-tab__columns > .product-details-richtext:only-child,
    .product-details-tab__columns--stack > .product-details-richtext:first-child:last-child {
      max-width: calc(100% * 800 / 1344);
    }

    /* Solo richtext when empty media wrappers are the only siblings (hidden above). */
    .product-details-tab__columns--stack > .product-details-richtext {
      max-width: calc(100% * 800 / 1344);
    }

    .product-details-tab__columns--split > .product-details-richtext {
      max-width: none;
    }

    .product-details-tab__columns {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
      gap: var(--spacing-2xl);
      align-items: start;
    }

    /*
      Two-column Details (Figma 19388:24690 / 19388:24875): copy 469 + side
      777 on 1344 content; space-between so the gutter scales toward 1920.
    */
    .product-details-tab__columns--split {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: start;
      gap: var(--spacing-2xl);
    }

    .product-details-tab__columns--split > .product-details-richtext {
      flex: 0 1 auto;
      width: calc(100% * 469 / 1344);
      max-width: calc(100% * 469 / 1344);
    }

    .product-details-tab__columns--split > .overview-accordions,
    .product-details-tab__columns--split > .water-removal,
    .product-details-tab__columns--split > .product-specs,
    .product-details-tab__columns--split > .shopify-block {
      flex: 0 1 auto;
      width: calc(100% * 777 / 1344);
      max-width: calc(100% * 777 / 1344);
    }
  }
/* END_BLOCK:_product-details-tab */

/* START_BLOCK:_product-energy-saving (INDEX:138) */
/* Visuals match `_additional-info` — duplicate so this tile styles when alone. */
  .additional-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: var(--spacing-2xs);
    border: 1px solid var(--border-invert);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
  }

  .additional-info__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    color: var(--text-primary);
  }

  .additional-info__icon .icon {
    width: 100%;
    height: 100%;
  }

  .additional-info__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-5xs);
    align-items: flex-start;
    min-width: 0;
    width: 100%;
  }

  .additional-info__title,
  .additional-info__content {
    margin: 0;
    font-family: var(--font-primary--family);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  .additional-info__title {
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size);
  }

  .additional-info__content {
    color: var(--text-primary);
    font-size: var(--font-body-md-size);
  }

  .additional-info__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .additional-info--empty {
    border-style: dashed;
  }

  @media screen and (min-width: 750px) {
    .additional-info {
      flex-direction: row;
    }

    .additional-info__icon {
      width: var(--size-5);
      height: var(--size-5);
    }

    .additional-info__text {
      width: auto;
    }
  }

  @media screen and (min-width: 768px) {
    .additional-info__title {
      font-size: var(--font-body-xs-size);
      line-height: var(--font-body-xs-line-height);
    }

    .additional-info__content {
      font-size: var(--font-body-sm-size);
      line-height: var(--font-body-sm-line-height);
    }
  }
/* END_BLOCK:_product-energy-saving */

/* START_BLOCK:_product-form-controls (INDEX:139) */
.product-form-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .product-form-controls:not(:has(.quantity-selector)):not(:has(.buy-buttons)):not(:has(.subscribe-save)) {
    display: none;
  }

  .product-form-controls__row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: var(--spacing-3xs);
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .product-form-controls__row:not(:has(.quantity-selector)):not(:has(.buy-buttons)) {
    display: none;
  }

  .product-form-controls__row > .shopify-block {
    display: flex;
    min-width: 0;
  }

  .product-form-controls__row > .shopify-block:has(.quantity-selector) {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .product-form-controls__row > .shopify-block:has(.buy-buttons) {
    flex: 1 1 0;
  }

  .product-form-controls__row > .shopify-block:only-child {
    flex: 1 1 100%;
  }

  .product-form-controls__row > .shopify-block:only-child .quantity-selector {
    width: 100%;
  }

  /* Mobile Figma: 20px after the buttons row, including the form gap, so it
     holds whatever gap the store's template saves (desktop keeps the setting) */
  @media screen and (max-width: 749px) {
    .product-form-controls {
      padding-block-end: max(0px, calc(var(--spacing-sm) - var(--product-form-gap, 0px)));
    }
  }

  @media screen and (min-width: 750px) {
    .product-form-controls__row {
      gap: var(--spacing-2xs);
    }
  }
/* END_BLOCK:_product-form-controls */

/* START_BLOCK:_product-grid (INDEX:140) */
.product-grid {
    box-sizing: border-box;
    width: calc(100% + (var(--section-padding-inline) * 2));
    min-width: 0;
    padding-block-start: var(--product-grid-padding-block-start-mobile, var(--product-grid-padding-block-start));
    padding-block-end: var(--product-grid-padding-block-end-mobile, var(--product-grid-padding-block-end));
    margin-inline: calc(var(--section-padding-inline) * -1);
  }

  .product-grid--simple {
    width: calc(100% + (var(--section-padding-inline) * 2));
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-block-start: var(--spacing-sm, 20px);
    padding-inline: var(--spacing-sm, 20px);
  }

  .product-grid__list {
    display: grid;
    grid-template-columns: repeat(var(--product-grid-columns-mobile, 2), minmax(0, 1fr));
    column-gap: var(--product-grid-column-gap-mobile, var(--product-grid-column-gap, 8px));
    row-gap: var(--product-grid-row-gap-mobile, var(--product-grid-row-gap, 20px));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Article and page rows only appear on an untyped search, where they share
     the grid with product cards. They read as full-width rows. */
  .product-grid__item--result {
    grid-column: 1 / -1;
  }

  /* Mobile detailed cards sit 12px apart (Figma 19852:117111) rather than
     using the merchant row gap, which is tuned for the compact 2-col grid. */
  .product-grid--detailed .product-grid__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--spacing-2xs, 12px);
  }

  .product-grid__simple {
    display: flex;
    flex-direction: column;
    gap: var(--product-grid-row-gap-mobile, var(--product-grid-row-gap, 20px));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-grid__item,
  .product-grid__simple-item {
    min-width: 0;
  }

  .product-grid__item {
    height: 100%;
  }

  .product-grid__item--ad {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .product-grid__item--ad .ad-block-card {
    flex: 1 1 auto;
    width: 100%;
  }

  .product-grid__item--ad:has(.ad-block-card--two-cards),
  .product-grid__item--ad:has(.ad-block-card--full-width) {
    grid-column: 1 / -1;
  }

  /* 1- and 2-card ads are compact-only. display:none so a sticky CTA cannot
     paint over the next product when detailed view hides the tile. */
  .product-grid--detailed .product-grid__item--ad:has(.ad-block-card:not(.ad-block-card--full-width)) {
    display: none;
  }

  /* Mobile 2-col: match product cards — square outer edge, curved inner edge. */
  .product-grid__item--ad-inner-end .ad-block-card--one-card {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius-sm, 4px);
    border-end-end-radius: var(--radius-sm, 4px);
  }

  .product-grid__item--ad-inner-start .ad-block-card--one-card {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-start-start-radius: var(--radius-sm, 4px);
    border-end-start-radius: var(--radius-sm, 4px);
  }

  /* A lone trailing 1-card fills the rest of the row. Two adjacent 1-cards
     each keep a single column. A 1-card after a wider ad still fills, because
     that wider tile has already ended its row. */
  .product-grid__list > .product-grid__item--ad:last-child:has(.ad-block-card--one-card) {
    grid-column: auto / -1;
  }

  .product-grid__list > .product-grid__item--ad:has(.ad-block-card--one-card) + .product-grid__item--ad:last-child:has(.ad-block-card--one-card) {
    grid-column: auto;
  }

  /* A left-column 1-card that fills the phone row has no product beside it,
     so both edges stay square. Two adjacent 1-cards keep the inner curve. */
  .product-grid__list > .product-grid__item--ad-inner-end:last-child:has(.ad-block-card--one-card) .ad-block-card--one-card {
    border-radius: 0;
  }

  .product-grid__list > .product-grid__item--ad:has(.ad-block-card--one-card) + .product-grid__item--ad-inner-end:last-child:has(.ad-block-card--one-card) .ad-block-card--one-card {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius-sm, 4px);
    border-end-end-radius: var(--radius-sm, 4px);
  }

  .product-grid__empty {
    margin: 0;
    padding-block: var(--spacing-lg, 32px);
    padding-inline: var(--section-padding-inline);
    color: var(--text-secondary);
    text-align: center;
  }

  .product-grid__list > .shopify-block,
  .product-grid__item > .shopify-block {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .product-grid {
      width: 100%;
      margin-inline: 0;
      padding-block-start: var(--product-grid-padding-block-start);
      padding-block-end: var(--product-grid-padding-block-end);
    }

    .product-grid--simple {
      width: 100%;
      margin-inline: 0;
      padding-block-start: var(--spacing-sm, 20px);
      padding-inline: 0;
    }

    .product-grid__list {
      grid-template-columns: repeat(var(--product-grid-columns, 4), minmax(0, 1fr));
      column-gap: var(--product-grid-column-gap, 20px);
      row-gap: var(--product-grid-row-gap, 20px);
    }

    .product-grid--detailed .product-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: var(--product-grid-row-gap, 20px);
    }

    .product-grid__item--ad:has(.ad-block-card--two-cards) {
      grid-column: span 2;
    }

    .product-grid__item--ad:has(.ad-block-card--full-width) {
      grid-column: 1 / -1;
    }

    .product-grid__item--ad-inner-end .ad-block-card--one-card,
    .product-grid__item--ad-inner-start .ad-block-card--one-card,
    .product-grid__list > .product-grid__item--ad-inner-end:last-child:has(.ad-block-card--one-card) .ad-block-card--one-card,
    .product-grid__list > .product-grid__item--ad:has(.ad-block-card--one-card) + .product-grid__item--ad-inner-end:last-child:has(.ad-block-card--one-card) .ad-block-card--one-card {
      border-radius: var(--radius-lg, 12px);
    }

    /* Detailed view: only the full-width banner remains, across the row. */
    .product-grid--detailed .product-grid__item--ad:has(.ad-block-card--full-width) {
      grid-column: 1 / -1;
      height: auto;
    }

    .product-grid--detailed .ad-block-card--full-width {
      flex: 0 0 auto;
      aspect-ratio: 1344 / 348;
      height: auto;
      align-self: auto;
    }

    .product-grid__list > .product-grid__item--ad:last-child:has(.ad-block-card--one-card) {
      grid-column: auto / -1;
    }

    .product-grid__list > .product-grid__item--ad:has(.ad-block-card--one-card) + .product-grid__item--ad:last-child:has(.ad-block-card--one-card) {
      grid-column: auto;
    }

    .product-grid__simple {
      gap: var(--product-grid-row-gap, 20px);
    }

    .product-grid__empty {
      padding-inline: 0;
    }
  }
/* END_BLOCK:_product-grid */

/* START_BLOCK:_product-media-gallery (INDEX:141) */
.product-media-gallery {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: var(--product-media-gallery-gap, var(--spacing-3xs));
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  /*
    Stick the gallery column on desktop so the buy box can scroll past it.
    The sticky containing block is the layout grid: once that row is fully
    scrolled, the gallery continues with the rest of the page.
  */
  @media screen and (min-width: 768px) {
    .layout-grid > .shopify-block:has(.product-media-gallery) {
      position: sticky;
      top: var(--spacing-xs);
      align-self: start;
    }
  }

  .product-media-gallery--thumbs-bottom {
    flex-direction: column;
  }

  /* DOM order is stage then thumbs — reverse for left so thumbs sit first visually */
  .product-media-gallery--thumbs-left {
    flex-direction: row-reverse;
    align-items: stretch;
  }

  .product-media-gallery--thumbs-right {
    flex-direction: row;
    align-items: stretch;
  }

  .product-media-gallery__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    /* Figma desktop stage is a fixed square canvas; media uses object-fit: contain */
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
  }

  /*
    The stage is a Splide slider: slides always run left to right, whatever the
    thumb placement, so the side arrows move the image the way they point.
    splide-core hides an uninitialised .splide; keep the stage visible so the
    first image shows before the script mounts (and if it never does).
  */
  .product-media-gallery__viewport {
    width: 100%;
    height: 100%;
    /* pan-y keeps vertical page scroll; Splide owns the horizontal swipe. */
    touch-action: pan-y;
  }

  .product-media-gallery__viewport.splide,
  .product-media-gallery__thumbs.splide {
    visibility: visible;
  }

  .product-media-gallery__track,
  .product-media-gallery__list {
    height: 100%;
  }

  /* Mouse users get a grab cue for the stage drag; touch just swipes. */
  @media screen and (hover: hover) and (pointer: fine) {
    .product-media-gallery__viewport.splide--draggable {
      cursor: grab;
    }

    .product-media-gallery__viewport.is-dragging {
      cursor: grabbing;
    }
  }

  .product-media-gallery__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
  }

  .product-media-gallery__stage-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
  }

  .product-media-gallery__model-poster .product-media-gallery__stage-image {
    transform-origin: center center;
  }

  .product-media-gallery.is-image-zoomed .product-media-gallery__viewport {
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    overscroll-behavior: none;
  }

  .product-media-gallery.is-image-zoomed .product-media-gallery__stage-image {
    pointer-events: auto;
  }

  .product-media-gallery__stage-video,
  .product-media-gallery__external-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--surface-secondary);
  }

  .product-media-gallery__stage-video {
    object-fit: contain;
  }

  .product-media-gallery__external-video {
    pointer-events: auto;
  }

  .product-media-gallery__model {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .product-media-gallery__model-poster,
  .product-media-gallery__model-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .product-media-gallery__model.is-active .product-media-gallery__model-poster {
    display: none;
  }

  .product-media-gallery__model-viewer[hidden] {
    display: none;
  }

  /*
    Shopify ModelViewerUI wraps <model-viewer> in .shopify-model-viewer-ui
    (CDN CSS defaults to inline-block). Force a fill layout like Horizon so the
    canvas and control chrome don't collapse / explode in the snap stage.
    Include dialog selectors — lightbox portals to document.body while open.
  */
  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    cursor: grab;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .product-media-gallery__model-viewer model-viewer,
  .product-media-gallery__stage-model,
  .product-media-gallery__dialog-model {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    background-color: var(--surface-secondary);
    --poster-color: transparent;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__controls-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__controls-area {
    position: absolute;
    right: var(--spacing-sm);
    bottom: var(--spacing-sm);
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    border: 1px solid var(--border-brand-light);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--surface-primary) 94%, transparent);
    box-shadow: none;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__button--control {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__button--control:hover,
  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__button--control:focus-visible {
    color: var(--text-brand);
    background-color: var(--surface-brand-light);
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__button--control:active {
    color: var(--text-brand);
    background-color: var(--surface-brand-light);
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__button--control:not(:last-child)::after {
    position: absolute;
    right: var(--spacing-3xs);
    bottom: 0;
    left: var(--spacing-3xs);
    width: auto;
    border-bottom: 1px solid var(--border-secondary);
    content: '';
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__button--control:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: -2px;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__control-icon {
    width: 44px;
    height: 44px;
    fill: none;
  }

  :is(.product-media-gallery, .product-media-gallery__dialog) .shopify-model-viewer-ui__spritesheet {
    display: none;
  }

  .product-media-gallery.is-model-active .product-media-gallery__viewport {
    overflow: hidden;
    cursor: default;
    touch-action: none;
  }

  .product-media-gallery.is-model-active .product-media-gallery__controls {
    display: none;
  }

  .product-media-gallery__dialog.is-model-active .product-media-gallery__dialog-viewport {
    overflow: hidden;
    cursor: default;
    scroll-snap-type: none;
    touch-action: none;
  }

  .product-media-gallery__awards {
    /* Figma Certification Badges: fixed to stage, not slides (desktop 39/78/24 → tokens) */
    --product-media-gallery-award-size: var(--size-12);
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-xs);
    list-style: none;
    background-color: transparent;
    pointer-events: none;
  }

  .product-media-gallery__award {
    flex: 0 0 auto;
    width: var(--product-media-gallery-award-size);
    height: var(--product-media-gallery-award-size);
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .product-media-gallery__award-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }

  @media screen and (min-width: 750px) {
    .product-media-gallery__awards {
      --product-media-gallery-award-size: 78px;
      gap: var(--spacing-md);
      padding: var(--spacing-xl);
    }
  }

  .product-media-gallery__awards-empty {
    position: absolute;
    inset: var(--spacing-xs) auto auto var(--spacing-xs);
    z-index: 2;
    max-width: 12rem;
    margin: 0;
    padding: var(--spacing-3xs);
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
    pointer-events: none;
  }

  @media screen and (min-width: 750px) {
    .product-media-gallery__awards-empty {
      inset: var(--spacing-xl) auto auto var(--spacing-xl);
    }
  }

  .product-media-gallery__view-360 {
    position: absolute;
    /* Figma: ~19px / ~9px from stage edges — nearest tokens spacing-sm / spacing-3xs */
    inset: auto auto var(--spacing-3xs) var(--spacing-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6xs);
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-2xs);
    border: 1px solid var(--border-brand-dark);
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    font-family: var(--font-subheading--family);
    font-style: var(--font-subheading--style);
    font-size: var(--font-button-sm-size, 0.75rem);
    font-weight: var(--font-button-sm-weight, 600);
    line-height: var(--font-button-sm-line-height, 1.4);
    letter-spacing: var(--font-button-sm-letter-spacing, 0);
    white-space: nowrap;
    cursor: pointer;
    pointer-events: auto;
  }

  .product-media-gallery__view-360.is-hidden,
  .product-media-gallery__view-360[hidden] {
    display: none;
  }

  .product-media-gallery__controls {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }

  .product-media-gallery__nav,
  .product-media-gallery__lightbox {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-brand-dark);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    color: var(--text-brand);
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  }

  /* Lightbox trigger is desktop-only; mobile uses unsigned pinch zoom.
     Also hidden on video slides (native controls include fullscreen). */
  .product-media-gallery__lightbox {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .product-media-gallery__lightbox:not([hidden]):not(.is-hidden) {
      display: inline-flex;
    }
  }

  .product-media-gallery__lightbox.is-hidden,
  .product-media-gallery__lightbox[hidden] {
    display: none;
  }

  .product-media-gallery__stage:hover .product-media-gallery__nav,
  .product-media-gallery__stage:hover .product-media-gallery__lightbox,
  .product-media-gallery__stage:focus-within .product-media-gallery__nav,
  .product-media-gallery__stage:focus-within .product-media-gallery__lightbox,
  .product-media-gallery__nav:focus-visible,
  .product-media-gallery__lightbox:focus-visible {
    opacity: 1;
  }

  .product-media-gallery__nav:hover,
  .product-media-gallery__lightbox:hover {
    background-color: var(--surface-brand-light);
  }

  .product-media-gallery__nav:disabled {
    cursor: default;
    opacity: 0;
    pointer-events: none;
  }

  .product-media-gallery__stage:hover .product-media-gallery__nav:disabled,
  .product-media-gallery__stage:focus-within .product-media-gallery__nav:disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  .product-media-gallery__nav--prev {
    inset: 50% auto auto var(--spacing-sm);
    transform: translateY(-50%);
  }

  .product-media-gallery__nav--next {
    inset: 50% var(--spacing-sm) auto auto;
    transform: translateY(-50%);
  }

  .product-media-gallery__lightbox {
    inset: auto var(--spacing-sm) var(--spacing-sm) auto;
  }

  .product-media-gallery__nav-icon,
  .product-media-gallery__lightbox-icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  .product-media-gallery__nav:focus-visible,
  .product-media-gallery__lightbox:focus-visible,
  .product-media-gallery__view-360:focus-visible,
  .product-media-gallery__thumb:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  /* The thumb rail clips overflow, so an outside ring is cut off. */
  .product-media-gallery__thumb:focus-visible {
    outline-offset: -3px;
  }

  .product-media-gallery__thumbs-rail {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* A second Splide slider: free drag, and it only scrolls to keep the active thumb in view */
  .product-media-gallery__thumbs {
    min-width: 0;
  }

  .product-media-gallery__thumb-slide {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-media-gallery--thumbs-bottom .product-media-gallery__thumbs-rail,
  .product-media-gallery--thumbs-bottom .product-media-gallery__thumbs {
    width: 100%;
  }

  /*
    Side rails: absolute thumbs so the rail has no intrinsic height.
    Flex stretch then matches stage height; the strip scrolls inside.
    Figma desktop thumbs are 80×80 with 1px padding for the active border.
  */
  .product-media-gallery--thumbs-left .product-media-gallery__thumbs-rail,
  .product-media-gallery--thumbs-right .product-media-gallery__thumbs-rail {
    position: relative;
    align-self: stretch;
    width: calc(var(--size-20) + 2px);
    overflow: hidden;
  }

  /* Splide's vertical slider fills the rail; its 1px padding keeps the active border clear */
  .product-media-gallery--thumbs-left .product-media-gallery__thumbs,
  .product-media-gallery--thumbs-right .product-media-gallery__thumbs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Figma fade at bottom of overflowing thumb column */
  .product-media-gallery--thumbs-left .product-media-gallery__thumbs-rail::after,
  .product-media-gallery--thumbs-right .product-media-gallery__thumbs-rail::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 100%;
    height: var(--size-7);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--surface-primary) 60%, transparent)
    );
    transform: translateX(-50%);
  }

  .product-media-gallery__thumb {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--size-20);
    height: var(--size-20);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--surface-secondary);
    cursor: pointer;
  }

  .product-media-gallery__thumb-badge {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    color: var(--text-primary);
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

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

  .product-media-gallery__thumb.is-active,
  .product-media-gallery__thumb[aria-current='true'] {
    border-color: var(--border-primary);
  }

  .product-media-gallery__thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  /*
    Mobile SoT (Figma Images Gallery 19419:39156):
    - Placement ignored — thumbs always below stage, horizontal track
    - Gallery gap 0; thumbs track padding 4/8/0; thumb gap via setting (8)
    - Stage: square, no radius, surface-secondary, edge-to-edge (bleed out of
      section--full-width inline padding). Buy box keeps the page margin.
    - Thumbs: 64×64, 1px pad, radius spacing-6xs; active border-dark
    - Right-edge fade on overflowing thumb track
    - No zoom / lightbox chrome
  */
  @media screen and (max-width: 749px) {
    .layout-grid > .shopify-block:has(.product-media-gallery),
    .layout-col > .shopify-block:has(.product-media-gallery) {
      max-width: none;
    }

    .product-media-gallery,
    .product-media-gallery--empty,
    .product-media-gallery--thumbs-bottom,
    .product-media-gallery--thumbs-left,
    .product-media-gallery--thumbs-right {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      width: calc(100% + (var(--section-padding-inline) * 2));
      max-width: none;
      margin-inline: calc(var(--section-padding-inline) * -1);
    }

    .product-media-gallery__stage {
      border-radius: 0;
    }

    .product-media-gallery.is-image-zoomed .product-media-gallery__viewport {
      touch-action: none;
    }

    .product-media-gallery--thumbs-left .product-media-gallery__thumbs-rail,
    .product-media-gallery--thumbs-right .product-media-gallery__thumbs-rail,
    .product-media-gallery--thumbs-bottom .product-media-gallery__thumbs-rail {
      position: relative;
      align-self: auto;
      width: 100%;
      overflow: hidden;
    }

    /* Horizontal slider below the stage; Splide's inline padding gives the 8px inset */
    .product-media-gallery--thumbs-left .product-media-gallery__thumbs,
    .product-media-gallery--thumbs-right .product-media-gallery__thumbs,
    .product-media-gallery--thumbs-bottom .product-media-gallery__thumbs {
      position: static;
      inset: auto;
      width: 100%;
      max-width: 100%;
      height: auto;
      padding-block-start: var(--spacing-5xs);
    }

    .product-media-gallery--thumbs-left .product-media-gallery__thumbs-rail::after,
    .product-media-gallery--thumbs-right .product-media-gallery__thumbs-rail::after,
    .product-media-gallery--thumbs-bottom .product-media-gallery__thumbs-rail::after {
      content: '';
      position: absolute;
      top: var(--spacing-5xs);
      right: 0;
      bottom: auto;
      left: auto;
      z-index: 1;
      width: var(--size-7);
      height: var(--size-16);
      pointer-events: none;
      background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--surface-primary) 60%, transparent)
      );
      transform: none;
    }

    /*
      The 1px padding rings the image for the active border. A grey fill
      behind it showed as a square frame round the image's rounder corners.
    */
    .product-media-gallery__thumb {
      width: var(--size-16);
      height: var(--size-16);
      padding: 1px;
      border-radius: var(--spacing-6xs);
      background-color: transparent;
    }

    .product-media-gallery__thumb.is-active,
    .product-media-gallery__thumb[aria-current='true'] {
      border-color: var(--border-dark);
    }

    .product-media-gallery__lightbox,
    .product-media-gallery__lightbox:not([hidden]):not(.is-hidden) {
      display: none;
    }
  }

  .product-media-gallery--empty {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .product-media-gallery__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
  }

  @media screen and (max-width: 749px) {
    .product-media-gallery__fallback {
      border-radius: 0;
    }
  }

  .product-media-gallery__fallback-svg {
    width: 100%;
    height: 100%;
  }

  .product-media-gallery__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  /* Desktop fullscreen lightbox takeover.
     Dialog is portaled to document.body while open so close doesn't
     reflow back into the gallery column (top-layer → in-flow flash). */
  .product-media-gallery__dialog {
    box-sizing: border-box;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: var(--spacing-xl);
    border: 0;
    background-color: var(--surface-primary);
    color: var(--text-primary);
    opacity: 0;
    transform: scale(0.985);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }

  .product-media-gallery__dialog[open] {
    display: block;
  }

  .product-media-gallery__dialog.is-open {
    opacity: 1;
    transform: scale(1);
  }

  .product-media-gallery__dialog.is-closing {
    opacity: 0;
    transform: scale(0.985);
  }

  .product-media-gallery__dialog::backdrop {
    background-color: var(--surface-primary);
    opacity: 0;
    transition: opacity 0.28s ease;
  }

  .product-media-gallery__dialog.is-open::backdrop {
    opacity: 1;
  }

  .product-media-gallery__dialog.is-closing::backdrop {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .product-media-gallery__dialog,
    .product-media-gallery__dialog[open] {
      display: none;
    }
  }

  .product-media-gallery__dialog-close {
    position: absolute;
    top: var(--spacing-xl);
    right: var(--spacing-xl);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-brand-dark);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
  }

  .product-media-gallery__dialog-close:hover {
    background-color: var(--surface-brand-light);
  }

  .product-media-gallery__dialog-close:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .product-media-gallery__dialog-close-icon {
    display: inline-flex;
  }

  .product-media-gallery__dialog-layout {
    display: flex;
    gap: var(--spacing-3xs);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .product-media-gallery__dialog-thumbs {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--spacing-3xs);
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1px;
    scrollbar-width: thin;
  }

  .product-media-gallery__dialog-thumb {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0;
    padding: 1px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background-color: var(--surface-primary);
    cursor: pointer;
  }

  .product-media-gallery__dialog-thumb.is-active {
    border-color: var(--border-primary);
  }

  .product-media-gallery__dialog-thumb:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .product-media-gallery__dialog-thumb-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--radius-sm);
  }

  .product-media-gallery__dialog-thumb-badge {
    position: absolute;
    inset: auto var(--spacing-3xs) var(--spacing-3xs) auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--surface-primary) 92%, transparent);
    color: var(--text-primary);
    pointer-events: none;
  }

  /* Grey stage is the design canvas: fixed square frame so varied
     aspect ratios sit consistently (object-fit: contain shows the fill). */
  .product-media-gallery__dialog-stage {
    position: relative;
    flex: 0 1 800px;
    width: min(800px, calc(100% - 96px));
    max-height: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
  }

  .product-media-gallery__dialog-viewport {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    cursor: grab;
    scroll-snap-type: y mandatory;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  .product-media-gallery__dialog-viewport::-webkit-scrollbar {
    display: none;
  }

  .product-media-gallery__dialog-viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .product-media-gallery__dialog-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .product-media-gallery__dialog-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  .product-media-gallery__dialog-video,
  .product-media-gallery__dialog-external-video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: var(--surface-secondary);
  }

  .product-media-gallery__dialog-video {
    object-fit: contain;
  }

  .product-media-gallery__dialog-external-video {
    pointer-events: auto;
  }
/* END_BLOCK:_product-media-gallery */

/* START_BLOCK:_product-reviews (INDEX:143) */
.product-reviews-block {
    display: flex;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .product-reviews-block__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_BLOCK:_product-reviews */

/* START_BLOCK:_product-short-description (INDEX:144) */
.product-short-description {
    display: block;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--product-short-description-padding-block-start, 0);
    padding-block-end: var(--product-short-description-padding-block-end, 0);
    padding-inline-start: var(--product-short-description-padding-inline-start, 0);
    padding-inline-end: var(--product-short-description-padding-inline-end, 0);
    color: var(--text-brand-muted);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-xl-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.3;
    font-feature-settings: var(--font-feature-settings);
  }

  .product-short-description__body {
    overflow: hidden;
  }

  .product-short-description__text,
  .product-short-description__content {
    margin: 0;
  }

  .product-short-description__expand {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }

  .product-short-description__expand:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .product-short-description__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_BLOCK:_product-short-description */

/* START_BLOCK:_product-specs (INDEX:146) */
.product-specs {
    /* Desktop: fixed title col; list flex-grows; 3 equal 1fr data cols */
    --product-specs-title-width: 12.9375rem;
    --product-specs-col-gap: var(--spacing-4xl);
    --product-specs-row-pad-inline: var(--spacing-2xs);
    --product-specs-item-pad-inline: var(--spacing-3xs);
    --product-specs-row-alt-bg: color-mix(in srgb, var(--surface-secondary) 70%, transparent);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 0;
    color: var(--text-primary);
  }

  .product-specs__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding-block-end: var(--spacing-sm);
    border-bottom: 1px solid var(--border-secondary);
  }

  .product-specs__group-title {
    margin: 0;
    color: var(--text-secondary);
  }

  .product-specs__list {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    /* Mobile (19419:39659): 16px between stacked items / packed rows */
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
  }

  .product-specs__row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .product-specs__row--alt {
    background: transparent;
  }

  .product-specs__item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: none;
    padding-inline: var(--product-specs-item-pad-inline);
    position: relative;
    overflow: visible;
  }

  .product-specs__item--tooltip-open {
    z-index: 2;
  }

  /* Mobile (19419:39659): single-column zebra per item across packed rows */
  .product-specs__row .product-specs__item:nth-child(even),
  .product-specs__row--alt .product-specs__item:nth-child(odd) {
    background-color: var(--product-specs-row-alt-bg);
    padding-block: var(--spacing-2xs);
  }

  .product-specs__row--alt .product-specs__item:nth-child(even) {
    background-color: transparent;
    padding-block: 0;
  }

  .product-specs__label,
  .product-specs__value {
    margin: 0;
    color: var(--text-primary);
  }

  .product-specs__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-4xs);
    flex-wrap: wrap;
    position: relative;
    width: 100%;
  }

  .product-specs__tooltip {
    position: static;
  }

  .product-specs__tooltip[open] {
    z-index: 1;
  }

  .product-specs__tooltip-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
    list-style: none;
  }

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

  .product-specs__tooltip-icon {
    display: block;
    width: 12px;
    height: 12px;
  }

  .product-specs__tooltip-content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--spacing-3xs);
    position: absolute;
    z-index: 1;
    inset-block-start: calc(100% + var(--spacing-4xs));
    inset-inline-start: 0;
    inset-inline-end: 0;
    width: min(18rem, 100%);
    max-width: 100%;
    margin-inline: auto;
    padding-block: var(--spacing-sm);
    padding-inline-start: var(--spacing-sm);
    padding-inline-end: var(--spacing-3xs);
    border-radius: var(--radius-md);
    background: var(--surface-secondary);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
  }

  .product-specs__tooltip-body {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
  }

  .product-specs__tooltip-body :is(p, ul, ol) {
    margin: 0;
  }

  .product-specs__tooltip-body :is(p, ul, ol) + :is(p, ul, ol) {
    margin-block-start: var(--spacing-3xs);
  }

  .product-specs__tooltip-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    padding: 3.2px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .product-specs__tooltip-close-icon {
    display: block;
  }

  .product-specs__value-line {
    display: block;
  }

  .product-specs__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }

  @media screen and (min-width: 768px) {
    .product-specs {
      gap: var(--spacing-4xl);
    }

    .product-specs__group {
      flex-direction: row;
      align-items: flex-start;
      gap: var(--spacing-sm);
      padding-block-end: 0;
      border-bottom: 0;
    }

    /* Lines up with the first row's content, which now sits inside its padding */
    .product-specs__group-title {
      flex: 0 0 var(--product-specs-title-width);
      width: var(--product-specs-title-width);
      max-width: var(--product-specs-title-width);
      padding-block-start: var(--spacing-sm);
    }

    /* Grow into leftover space; three data columns stay equal via 1fr */
    .product-specs__list {
      flex: 1 1 0;
      gap: 0;
      width: auto;
      max-width: none;
      min-width: 0;
    }

    .product-specs__row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0 var(--product-specs-col-gap);
      width: 100%;
      /* Same padding as the muted rows, so white rows centre their content too */
      padding-block: var(--spacing-sm);
      padding-inline: var(--product-specs-row-pad-inline);
      border-bottom: 1px solid var(--border-secondary);
    }

    /* Desktop (19386:24504): muted rows use 20px vertical padding */
    .product-specs__row--alt {
      background-color: var(--product-specs-row-alt-bg);
      padding-block: var(--spacing-sm);
    }

    .product-specs__item {
      width: auto;
      max-width: none;
      padding-inline: 0;
    }

    .product-specs__row .product-specs__item:nth-child(even),
    .product-specs__row--alt .product-specs__item:nth-child(odd),
    .product-specs__row--alt .product-specs__item:nth-child(even) {
      background-color: transparent;
      padding-block: 0;
    }

    /*
      Anchored to the label (the details stays static) so the panel spans its
      own spec column. Pinning it to the 12px icon let it spill into the group
      title column.
    */
    .product-specs__tooltip-content {
      width: auto;
      max-width: none;
      margin-inline: 0;
    }
  }
/* END_BLOCK:_product-specs */

/* START_BLOCK:_product-utility-links (INDEX:147) */
/*
   * Figma PDP form links row: single line, gap-md (24) mobile / gap-lg (32)
   * desktop. Overflow scrolls horizontally — never wraps/stacks.
   */
  .product-utility-links {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .product-utility-links::-webkit-scrollbar {
    display: none;
  }

  .product-utility-links__button {
    flex: 0 0 auto;
  }

  /*
    The comparison and FAQ sections render later on the page, so the links
    cannot know about them in Liquid. Each link is hidden until its section
    is on the page. Two classes so this beats `.button { display: inline-flex }`.

    The row is removed unless something in it is actually showing: the
    calculator, a size link with a comparison section, or an FAQ link with
    an FAQ section. A toggle that is off leaves that button out of the
    markup, so one hidden link cannot keep an empty row on the page. The
    design-mode placeholder (`.product-utility-links--empty`) is left alone.
  */
  .product-utility-links .product-utility-links__button--size,
  .product-utility-links .product-utility-links__button--faqs {
    display: none;
  }

  :where(body:has(.product-comparison-section)) .product-utility-links .product-utility-links__button--size,
  :where(body:has(.faqs)) .product-utility-links .product-utility-links__button--faqs {
    display: inline-flex;
  }

  .product-utility-links:not(:where(.product-utility-links--empty)):not(:has(.product-utility-links__button--calculator)) {
    display: none;
  }

  :where(body:has(.product-comparison-section)) .product-utility-links:has(.product-utility-links__button--size),
  :where(body:has(.faqs)) .product-utility-links:has(.product-utility-links__button--faqs) {
    display: flex;
  }

  .product-utility-links__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  /* Mobile Figma: 20px after links, including the form gap */
  @media screen and (max-width: 749px) {
    .product-utility-links {
      padding-block-end: max(0px, calc(var(--spacing-sm) - var(--product-form-gap, 0px)));
    }
  }

  @media screen and (min-width: 750px) {
    .product-utility-links {
      gap: var(--spacing-lg);
    }
  }
/* END_BLOCK:_product-utility-links */

/* START_BLOCK:_row (INDEX:148) */
.layout-row {
    display: flex;
    gap: var(--layout-row-gap, 0);
    align-items: var(--layout-row-align, stretch);
    width: 100%;
    min-width: 0;
  }

  .layout-row--horizontal {
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .layout-row--vertical {
    flex-direction: column;
  }

  .layout-row > .shopify-block {
    min-width: 0;
    max-width: 100%;
  }

  .layout-row--horizontal > .shopify-block {
    flex: 1 1 0;
  }
/* END_BLOCK:_row */

/* START_BLOCK:_sticky-atc (INDEX:149) */
/* Root-scoped so the LiveChat launcher, which the app appends to the body,
     can travel on the same curve as the bar. */
  :root {
    --sticky-atc-transition: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .sticky-atc {
    position: fixed;
    z-index: 20;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);

    /* The bar owns the visible surface, so the host fills the safe-area strip beneath it */
    background-color: var(--surface-primary);
    pointer-events: none;
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    transition:
      transform var(--sticky-atc-transition),
      visibility var(--sticky-atc-transition);
  }

  .sticky-atc.is-visible {
    pointer-events: auto;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }

  .sticky-atc__bar {
    box-sizing: border-box;
    display: flex;
    gap: var(--spacing-2xs);
    align-items: center;
    width: 100%;
    height: var(--size-14);
    max-width: var(--page-width-full);
    min-width: 0;
    margin-inline: auto;
    padding: var(--spacing-3xs) var(--spacing-sm);
    background-color: var(--surface-primary);
    border-radius: var(--radius-sm);
    box-shadow:
      inset 0 0 0 1px var(--border-invert),
      0 2px 4px var(--shadow-xs-color);
  }

  .sticky-atc__title {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-atc__actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--spacing-sm);
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .sticky-atc__prices {
    display: none;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    align-items: center;
    font-family: var(--font-primary--family);
    font-size: var(--font-body-xl-size, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .sticky-atc__compare {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-skip-ink: none;
  }

  .sticky-atc__price {
    color: var(--text-primary);
  }

  .sticky-atc__submit {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: var(--size-10);
    min-height: var(--size-10);
    overflow: visible;
    --button-height: var(--size-10);
    --button-font-size: var(--font-button-sm-size);
    --button-font-weight: var(--font-button-sm-weight);
    --button-line-height: var(--font-button-sm-line-height);
    --button-padding-y: 0;
  }

  .sticky-atc--notify .sticky-atc__submit {
    --button-bg: var(--surface-invert);
    --button-hover-bg: var(--surface-invert);
    --button-color: var(--text-invert);
    --button-hover-color: var(--text-invert);
  }

  .sticky-atc__submit::after {
    position: absolute;
    content: '';
    inset: -3px 0;
  }

  .sticky-atc__submit--error {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

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

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

    .sticky-atc__bar {
      height: var(--size-18);
      padding: var(--spacing-sm);
    }

    .sticky-atc__actions {
      width: auto;
    }

    .sticky-atc__prices {
      display: flex;
    }

    .sticky-atc__submit {
      width: 192px;
      height: var(--size-8);
      min-height: var(--size-8);
      --button-height: var(--size-8);
    }

    .sticky-atc__submit::after {
      inset-block: -7px;
    }
  }

  html.has-sticky-atc {
    padding-bottom: var(--sticky-atc-offset, 0px);
  }

  /* LiveChat pins its launcher to the bottom of the viewport with inline
     styles, so lifting it clear of the bar has to be a transform, and its
     inline `transition: none` has to be overridden for it to move with the bar
     instead of jumping. The transition stays on the element whether or not the
     bar is up, otherwise the drop back down would not animate. */
  body:has(sticky-atc) [id='chat-widget-container'] {
    transition: transform var(--sticky-atc-transition) !important;
  }

  /* An expanded chat can fill the viewport, so it keeps its own position.
     The compare tray replaces this bar rather than stacking on it, so it owns
     the transform while it is up — otherwise these two rules would set it at
     the same specificity and stylesheet order would decide. */
  html.has-sticky-atc:not(.has-chat-expanded):not(.has-compare-tray) [id='chat-widget-container'] {
    transform: translate3d(0, calc(-1 * var(--sticky-atc-offset, 0px)), 0);
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .sticky-atc {
      transition: none;
    }

    body:has(sticky-atc) [id='chat-widget-container'] {
      transition: none !important;
    }
  }
/* END_BLOCK:_sticky-atc */

/* START_BLOCK:_text-link (INDEX:150) */
.text-link__item {
    min-width: 0;
  }

  .text-link__placeholder {
    opacity: 0.7;
  }
/* END_BLOCK:_text-link */

/* START_BLOCK:_usp-block (INDEX:151) */
.usp-block {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .usp-block__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: var(--usp-block-align, center);
    gap: var(--usp-block-gap, var(--spacing-3xs, 8px));
    flex-shrink: 0;
  }

  .usp-block__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--usp-block-icon-size, 36px);
    height: var(--usp-block-icon-size, 36px);
    overflow: hidden;
    color: var(--text-primary, var(--color-foreground));
  }

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

  .usp-block__icon .icon {
    width: var(--usp-block-icon-size, 36px);
    height: var(--usp-block-icon-size, 36px);
  }

  .usp-block__heading {
    display: none;
    margin: 0;
    color: var(--text-primary, var(--color-foreground));
    text-align: var(--usp-block-text-align, center);
    white-space: nowrap;
  }

  .usp-block__text {
    margin: 0;
    color: var(--text-primary, var(--color-foreground));
    text-align: var(--usp-block-text-align, center);
    white-space: nowrap;
  }

  /*
    Figma General/USP uses Body/Desktop/Bold/md (14px) on mobile frames too.
    Global body-md is 13px below 768 — keep the icon row at the desktop size.
  */
  .usp-banner--icon {
    --usp-icon-text-size: 14px;
  }

  @media screen and (max-width: 767px) {
    .usp-banner--icon .usp-block__text.font-body-md,
    .usp-banner--icon .usp-block__text.font-body-md--semibold {
      font-size: var(--usp-icon-text-size);
    }
  }

  /* Large layout — Figma Usp larger: stacked value + label */
  .usp-banner--large .usp-block {
    width: 9.75rem;
    justify-content: var(--usp-block-align, center);
  }

  .usp-banner--large .usp-block__inner {
    flex-direction: column;
    align-items: var(--usp-block-align, center);
    justify-content: flex-start;
    text-align: var(--usp-block-text-align, center);
    width: 100%;
  }

  .usp-banner--large .usp-block__icon {
    display: none;
  }

  .usp-banner--large .usp-block__heading {
    display: block;
  }

  .usp-banner--large .usp-block__text {
    white-space: normal;
  }

  /* Stacked mobile: full-width rows so left/center/right alignment is visible */
  @media screen and (max-width: 767px) {
    .usp-banner--large.usp-banner--mobile-stacked .usp-block {
      width: 100%;
    }
  }
/* END_BLOCK:_usp-block */

/* START_BLOCK:_variant-picker (INDEX:152) */
.variant-picker-block {
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .variant-picker-block--stock-only {
    display: flex;
    justify-content: flex-end;
  }

  .variant-picker-block__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_BLOCK:_variant-picker */

/* START_BLOCK:_water-removal (INDEX:153) */
.water-removal {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .water-removal__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 var(--spacing-3xs);
    color: var(--text-primary);
  }

  .water-removal__row--head .water-removal__cell {
    padding-block: 0;
  }

  .water-removal__cell {
    width: 25%;
    padding-block: var(--spacing-3xs);
    padding-inline: 0;
    text-align: start;
    vertical-align: top;
    font-feature-settings: var(--font-feature-settings);
  }

  .water-removal__cell:first-child {
    padding-inline-start: var(--spacing-2xs);
  }

  .water-removal__row:not(.water-removal__row--head) .water-removal__cell {
    background-color: transparent;
  }

  .water-removal__row:not(.water-removal__row--head):nth-child(even) .water-removal__cell {
    background-color: color-mix(in srgb, var(--surface-brand-light) 50%, transparent);
  }

  .water-removal__row:not(.water-removal__row--head):nth-child(even) .water-removal__cell:first-child {
    border-start-start-radius: var(--radius-sm, 4px);
    border-end-start-radius: var(--radius-sm, 4px);
  }

  .water-removal__row:not(.water-removal__row--head):nth-child(even) .water-removal__cell:last-child {
    border-start-end-radius: var(--radius-sm, 4px);
    border-end-end-radius: var(--radius-sm, 4px);
  }

  .water-removal__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }

  .water-removal .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_BLOCK:_water-removal */

/* START_BLOCK:article-filters (INDEX:155) */
.article-filters {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: var(--spacing-2xs);
    align-items: center;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .article-filters::-webkit-scrollbar {
    display: none;
  }

  .article-filters__placeholder-wrap {
    display: none;
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: var(--spacing-3xs) var(--spacing-sm);
    border: 1px dashed var(--border-secondary);
    border-radius: var(--radius-lg);
    background-color: transparent;
  }

  .article-filters:not(:has(.article-chip)):not(:has([data-learn-filter]))
    .article-filters__placeholder-wrap--empty {
    display: flex;
  }

  .article-filters:has(.article-chip):not(:has([data-blog]))
    .article-filters__placeholder-wrap--configure,
  .article-filters:has([data-learn-filter]):not(:has([data-blog]))
    .article-filters__placeholder-wrap--configure {
    display: flex;
  }

  .article-filters__placeholder {
    margin: 0;
    color: var(--text-secondary, #767676);
    font-size: var(--font-body-md-size, 0.875rem);
    line-height: var(--font-body-md-line-height, 1.4);
    text-align: center;
  }

  @media screen and (min-width: 768px) {
    .article-filters {
      flex: 1 1 auto;
      width: auto;
    }
  }
/* END_BLOCK:article-filters */

/* START_BLOCK:blog-card (INDEX:156) */
.learn__item.is-hidden {
    display: none !important;
  }

  .blog-card-block--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: var(--spacing-sm);
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary, #f5f5f5);
  }

  .blog-card-block__placeholder {
    margin: 0;
    color: var(--text-secondary, #767676);
    font-size: var(--font-body-md-size);
    text-align: center;
  }
/* END_BLOCK:blog-card */

/* START_BLOCK:compatible-products (INDEX:158) */
/* Mobile Figma Upsell: gap-sm (20) between header and cards */
  .compatible-products {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 0;
  }

  .compatible-products__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    width: 100%;
    min-width: 0;
  }

  .compatible-products__title {
    margin: 0;
    padding-block-start: var(--compatible-products-title-padding-block-start, 0);
    padding-block-end: var(--compatible-products-title-padding-block-end, 0);
    padding-inline-start: var(--compatible-products-title-padding-inline-start, 0);
    padding-inline-end: var(--compatible-products-title-padding-inline-end, 0);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    /* Title/Mobile/xs = 14 Semibold */
    font-size: var(--font-title-xs-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-title-xs-line-height, 1.2);
    font-feature-settings: var(--font-feature-settings);
  }

  .compatible-products__subtitle {
    margin: 0;
    padding-block-start: var(--compatible-products-subtitle-padding-block-start, 0);
    padding-block-end: var(--compatible-products-subtitle-padding-block-end, 0);
    padding-inline-start: var(--compatible-products-subtitle-padding-inline-start, 0);
    padding-inline-end: var(--compatible-products-subtitle-padding-inline-end, 0);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
  }

  .compatible-products__cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    width: 100%;
    min-width: 0;
    padding-block-start: var(--compatible-products-cards-padding-block-start, 0);
    padding-block-end: var(--compatible-products-cards-padding-block-end, 0);
    padding-inline-start: var(--compatible-products-cards-padding-inline-start, 0);
    padding-inline-end: var(--compatible-products-cards-padding-inline-end, 0);
  }

  .compatible-products__carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
  }

  .compatible-products__list {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .compatible-products__list--single {
    display: block;
    width: var(--compatible-products-card-width, 371px);
    max-width: 100%;
  }

  .compatible-products__slide {
    min-width: 0;
  }

  .compatible-products__carousel:not(.is-initialized) .carousel__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--compatible-products-gap, var(--spacing-xs));
  }

  .compatible-products__carousel:not(.is-initialized) .carousel__list > * {
    flex: 0 0 var(--compatible-products-card-width, 371px);
    width: var(--compatible-products-card-width, 371px);
    max-width: var(--compatible-products-card-width, 371px);
  }

  .compatible-products__controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 31px;
    padding-inline: var(--spacing-sm);
  }

  .carousel.is-overflow .compatible-products__controls {
    display: flex;
  }

  .compatible-products__arrows {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .compatible-products__arrow {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: var(--size-10);
    height: var(--size-10);
    padding: 0;
    border: 1px solid var(--border-invert);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    cursor: pointer;
  }

  .compatible-products__arrow:disabled {
    border-color: transparent;
    background: color-mix(in srgb, currentColor 4%, transparent);
    opacity: 0.5;
    cursor: default;
  }

  .compatible-products__dots:empty {
    display: none;
  }

  .compatible-products__dots {
    display: flex;
  }

  .compatible-products__dots .carousel__dots {
    gap: var(--spacing-5xs);
  }

  .compatible-products__dots .carousel__dot {
    appearance: none;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: currentColor;
    opacity: 0.3;
  }

  .compatible-products__dots .carousel__dot.is-active {
    width: 24px;
    opacity: 1;
  }

  .compatible-products__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  @media screen and (min-width: 750px) {
    .compatible-products {
      gap: var(--spacing-lg);
    }

    .compatible-products__controls {
      justify-content: flex-start;
      padding-inline: 0;
    }

    .compatible-products__arrows {
      display: flex;
    }
  }
/* END_BLOCK:compatible-products */

/* START_BLOCK:cta (INDEX:159) */
.cta {
    display: inline-flex;
  }

  .cta.cta--suppressed {
    display: none;
  }

  /*
    Custom colours. Each picker only overrides its own button tokens, so one
    can be set without the other. Primary hover normally keeps its colours;
    with a custom fill the arrow may be off, so hover shifts the fill towards
    the text colour to stay visible on any creative.
  */
  .cta--custom-background .button:not(.button--underline) {
    --button-bg: var(--cta-background);
    --button-hover-bg: color-mix(in srgb, var(--cta-background) 85%, var(--button-color));
  }

  /* Primary keeps its transparent border, since its hover never swaps border
     colour. Secondary draws one, so match it to the fill in both states. */
  .cta--custom-background .button--secondary {
    --button-border-color: var(--cta-background);
    --button-hover-border-color: var(--button-hover-bg);
  }

  .cta--custom-text .button {
    --button-color: var(--cta-text);
    --button-hover-color: var(--cta-text);
  }

  .cta--custom-text .button--underline {
    --button-border-color: var(--cta-text);
    --button-hover-border-color: var(--cta-text);
  }

  /*
    The default focus ring is brand dark, which can vanish on campaign creative.
    Two tones from the button's own colours: a text-coloured band against the
    fill, ringed in the fill colour, so one of them always contrasts.
  */
  .cta--custom-background .button:not(.button--underline):focus-visible,
  .cta--custom-text .button:not(.button--underline):focus-visible {
    outline: 2px solid var(--button-bg);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--button-color);
  }

  .cta--custom-text .button--underline:focus-visible {
    outline-color: var(--cta-text);
  }
/* END_BLOCK:cta */

/* START_BLOCK:email-signup (INDEX:161) */
.newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    color: inherit;
    font-family: var(--font-primary--family);
  }

  .newsletter__heading {
    margin: 0;
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-size: var(--font-title-xl-size);
    font-weight: var(--font-title-xl-weight);
    line-height: var(--font-title-xl-line-height);
    letter-spacing: var(--font-title-xl-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
  }

  .newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .newsletter__fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    position: relative;
  }

  .newsletter__field {
    width: 100%;
  }

  .newsletter__field--email {
    position: relative;
  }

  .newsletter__input {
    box-sizing: border-box;
    width: 100%;
    height: var(--size-10);
    margin: 0;
    padding: var(--spacing-6xs) var(--spacing-xs);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--footer-input-surface, color-mix(in srgb, var(--text-invert, currentColor) 20%, transparent));
    backdrop-filter: blur(5px);
    color: inherit;
    font-family: inherit;
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
  }

  .newsletter__field--email .newsletter__input {
    padding-right: var(--size-12);
  }

  .newsletter__input::placeholder {
    color: inherit;
    opacity: 1;
  }

  .newsletter__input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .newsletter__submit {
    position: absolute;
    top: 50%;
    right: var(--spacing-5xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-brand-light);
    color: var(--text-primary);
    transform: translateY(-50%);
    cursor: pointer;
  }

  /* The global svg reset stretches icons to their container, so pin the size */
  .newsletter__submit svg {
    width: var(--size-6);
    max-width: var(--size-6);
    height: var(--size-6);
  }

  .newsletter__submit:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .newsletter__consent {
    margin: 0;
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
    color: inherit;
  }

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

  .newsletter__consent a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .newsletter__message {
    margin: 0;
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
  }

  .newsletter__message--error {
    padding: var(--spacing-3xs);
    border-inline-start: 2px solid var(--border-brand-dark);
    border-radius: var(--radius-sm);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
  }

  .newsletter .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:group (INDEX:163) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: var(--group-gap);
    max-width: 100%;
    padding-block: var(--group-padding-block);
    padding-inline: var(--group-padding-inline);
  }

  .group--width-fill {
    width: 100%;
  }

  .group--width-page {
    width: 100%;
  }

  .group--width-full {
    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .group--width-custom {
    width: var(--group-width);
  }

  .group--vertical.group--width-fill {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .group--vertical.group--width-custom {
    flex: 0 0 auto;
    width: var(--group-width);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .group--horizontal > .shopify-block {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  /*
    Opt image out of equal columns: the wrapper leaves the box tree so a custom
    % width resolves against the group. The wrapper cannot take the width over
    instead, because --image-block-width-num is declared on the image block
    itself and custom properties do not inherit upwards. Trade-off: a wrapper
    with no box cannot be outlined in the theme editor preview, so these blocks
    are selected from the sidebar rather than by clicking the image.
  */
  .group--horizontal > .shopify-block:has(> .image-block--fit),
  .group--horizontal > .shopify-block:has(> .image-block--custom) {
    display: contents;
  }

  .group--horizontal > .shopify-block > .image-block--fill {
    width: 100%;
    max-width: 100%;
  }

  .group--horizontal > .shopify-block > .image-block--fit {
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .group--horizontal > .shopify-block > .image-block--custom {
    flex: 0 1 auto;
    width: calc(var(--image-block-width-num, 50) * 1%);
    max-width: 100%;
    min-width: 0;
  }

  .group--vertical-mobile {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .group--vertical-mobile > .shopify-block {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }

  .group--vertical-mobile > .shopify-block > .image-block {
    width: 100%;
    max-width: 100%;
    flex: none;
  }

  .group--vertical-mobile > .shopify-block > .image-block--fit .image-block__image,
  .group--vertical-mobile > .shopify-block > .image-block--fit .image-block__placeholder {
    width: 100%;
  }

  @media screen and (min-width: 768px) {
    .group--vertical-mobile {
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }

    .group--horizontal > .shopify-block,
    .group--vertical-mobile.group--horizontal > .shopify-block {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
    }

    .group--horizontal > .shopify-block:has(> .image-block--fit),
    .group--horizontal > .shopify-block:has(> .image-block--custom),
    .group--vertical-mobile.group--horizontal > .shopify-block:has(> .image-block--fit),
    .group--vertical-mobile.group--horizontal > .shopify-block:has(> .image-block--custom) {
      display: contents;
    }

    .group--horizontal > .shopify-block > .image-block--fill,
    .group--vertical-mobile.group--horizontal > .shopify-block > .image-block--fill {
      width: 100%;
      max-width: 100%;
    }

    .group--horizontal > .shopify-block > .image-block--fit,
    .group--vertical-mobile.group--horizontal > .shopify-block > .image-block--fit {
      flex: 0 1 auto;
      width: fit-content;
      max-width: 100%;
      min-width: 0;
    }

    .group--horizontal > .shopify-block > .image-block--custom,
    .group--vertical-mobile.group--horizontal > .shopify-block > .image-block--custom {
      flex: 0 1 auto;
      width: calc(var(--image-block-width-num, 50) * 1%);
      max-width: 100%;
      min-width: 0;
    }

    .group--vertical-mobile.group--horizontal > .shopify-block > .image-block--fit .image-block__image,
    .group--vertical-mobile.group--horizontal > .shopify-block > .image-block--fit .image-block__placeholder {
      width: auto;
      max-width: 100%;
    }
  }
/* END_BLOCK:group */

/* START_BLOCK:logo (INDEX:167) */
.footer-logo__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
  }

  .footer-logo__image {
    display: block;
    width: auto;
    height: var(--footer-logo-height, 28px);
    max-width: 100%;
  }

  .footer-logo__text {
    color: var(--text-brand);
    font-weight: var(--font-weight-bold);
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:168) */
.menu {
    color: inherit;
    font-family: var(--font-primary--family);
  }

  .menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3xs);
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font: inherit;
  }

  .menu__title {
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-md-line-height);
    font-feature-settings: var(--font-feature-settings);
  }

  .menu__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    color: inherit;
  }

  .menu__toggle[aria-expanded='true'] .menu__icon--plus,
  .menu__toggle[aria-expanded='false'] .menu__icon--minus {
    display: none;
  }

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

  .menu--column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .menu__list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin: 0;
  }

  .menu__link {
    color: inherit;
    text-decoration: none;
    font-size: var(--font-body-md-size);
    font-weight: var(--font-body-md-weight);
    line-height: var(--font-body-md-line-height);
    font-feature-settings: var(--font-feature-settings);
  }

  .menu__link:hover,
  .menu__link:focus-visible {
    text-decoration: underline;
  }

  .menu__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  /* Mobile accordion: 64px nav rows; divider under the whole panel
     (below links when open, below title when closed) per Figma. */
  @media screen and (max-width: 767px) {
    .menu--column {
      border-bottom: 1px solid var(--footer-border-subtle, color-mix(in srgb, var(--text-invert, currentColor) 20%, transparent));
    }

    .menu--column .menu__toggle {
      padding: var(--spacing-sm) 0;
    }

    /* Open rows tighten the toggle so the toggle-to-list gap totals 24px */
    .menu--column .menu__toggle[aria-expanded='true'] {
      padding-bottom: var(--spacing-3xs);
    }

    .menu--column .menu__list {
      padding-top: var(--spacing-xs);
      padding-bottom: var(--spacing-xs);
    }

    .menu--column .menu__toggle[aria-expanded='false'] + .menu__list {
      display: none;
    }
  }

  /* Desktop: always show list; toggle is a non-interactive heading */
  @media screen and (min-width: 768px) {
    .menu--column .menu__icon {
      display: none;
    }

    .menu--column .menu__toggle {
      pointer-events: none;
      cursor: default;
    }

    .menu--column .menu__list {
      display: flex;
      margin-top: var(--spacing-md);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:169) */
.page-content {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    color: var(--text-primary, inherit);
  }

  @media screen and (min-width: 750px) {
    .page-content {
      max-width: var(--page-content-max-width, 600px);
    }
  }

  .page-content--placeholder {
    display: grid;
    place-items: center;
    min-height: 6rem;
    border: 1px dashed var(--border-primary, currentcolor);
    text-align: center;
  }

  .page-content__title {
    margin-block: 0 var(--spacing-md);
  }

  .page-content__body > *:first-child {
    margin-block-start: 0;
  }

  .page-content__body > *:last-child {
    margin-block-end: 0;
  }

  .page-content__body ul,
  .page-content__body ol {
    margin-block: var(--spacing-2xs);
    padding-inline-start: 1.25em;
  }

  .page-content__body h1,
  .page-content__body h2,
  .page-content__body h3,
  .page-content__body h4,
  .page-content__body h5,
  .page-content__body h6 {
    font-family: var(--font-heading--family);
    font-style: var(--font-heading--style);
    font-feature-settings: var(--font-feature-settings);
  }

  .page-content__body h1 {
    font-size: var(--font-title-xl-size);
    font-weight: var(--font-title-xl-weight);
    line-height: var(--font-title-xl-line-height);
  }

  .page-content__body h2 {
    font-size: var(--font-title-lg-size);
    font-weight: var(--font-title-lg-weight);
    line-height: var(--font-title-lg-line-height);
  }

  .page-content__body h3 {
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    line-height: var(--font-title-md-line-height);
  }

  .page-content__body h4,
  .page-content__body h5,
  .page-content__body h6 {
    font-weight: var(--font-title-lg-weight);
    line-height: var(--font-title-lg-line-height);
  }

  .page-content__body img,
  .page-content__body iframe,
  .page-content__body video {
    max-width: 100%;
    height: auto;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:product-form (INDEX:170) */
.product-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--product-form-padding-block-start, 0);
    padding-block-end: var(--product-form-padding-block-end, 0);
    padding-inline-start: var(--product-form-padding-inline-start, 0);
    padding-inline-end: var(--product-form-padding-inline-end, 0);
  }

  /* Custom-element host must keep the same flex column layout as the old div. */
  product-form.product-form {
    display: flex;
    flex-direction: column;
  }

  /* Figma: 16px between badges and title. The host only ever has badges and
     the form as visible children, so this is a fixed margin, not the gap. */
  .product-form > .product-badges,
  .product-form > .product-badges--empty {
    margin-block-end: var(--spacing-xs);
  }

  .product-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--product-form-gap, 0);
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  /* A theme-block wrapper whose child rendered nothing (e.g. the compare
     control on an unavailable product) would still take a gap slot. A hidden
     utility-links row is the same: `display: none` on the row does not remove
     a `.shopify-block` around it, so hide that wrapper unless a link is
     actually showing. The editor placeholder stays. */
  .product-form__form > .shopify-block:not(:has(*)) {
    display: none;
  }

  .product-form__form > .shopify-block:has(> .product-utility-links:not(:where(.product-utility-links--empty))):not(:has(.product-utility-links__button--calculator)) {
    display: none;
  }

  :where(body:has(.product-comparison-section)) .product-form__form > .shopify-block:has(> .product-utility-links .product-utility-links__button--size),
  :where(body:has(.faqs)) .product-form__form > .shopify-block:has(> .product-utility-links .product-utility-links__button--faqs) {
    display: block;
  }

  /* The calculator host only holds a modal dialog, which renders in the top
     layer, so its empty box should not take a gap slot either. */
  .product-form__form > .running-cost {
    display: contents;
  }

  .product-form__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-md-size, 0.875rem);
    line-height: var(--font-body-md-line-height, 1.4);
  }

  /* Controls render the quantity/buy children directly or wrapped in a
     theme-block div, depending on the host, so both shapes are covered. */
  product-form.is-oos .quantity-selector,
  product-form.is-oos .product-form-controls__row > .shopify-block:has(.quantity-selector) {
    display: none;
  }

  product-form.is-oos .product-form-controls__row > .buy-buttons,
  product-form.is-oos .product-form-controls__row > .shopify-block:has(.buy-buttons) {
    flex: 1 1 100%;
  }

  /* A delivery estimate is misleading with nothing to ship, so drop the whole
     block rather than the row, which would leave its padding behind. */
  product-form.is-oos .product-callout--delivery,
  product-form.is-oos .shopify-block:has(> .product-callout--delivery) {
    display: none;
  }

  /* display:none still matches :has(), so a delivery-only panel keeps its
     grey background. Hide it unless another callout (or an editor
     placeholder) is still in the panel. */
  product-form.is-oos .product-callouts:not(:has(.product-callout:not(.product-callout--delivery))),
  product-form.is-oos .product-form__form > .shopify-block:has(> .product-callouts):not(:has(.product-callout:not(.product-callout--delivery))) {
    display: none;
  }

  /* Klarna OSM stays in the DOM so an in-stock variant can reveal it. Hide
     the shopify-block wrapper so its padding does not leave a gap. Editor
     copy stays visible when the preview variant is out of stock. */
  product-form.is-oos .klarna-osm:not(.klarna-osm--editor),
  product-form.is-oos .shopify-block:has(> .klarna-osm:not(.klarna-osm--editor)),
  product-form.is-oos .product-form__form > .shopify-block:has(klarna-placement):not(:has(.klarna-osm--editor)),
  product-form .shopify-block:has(> .klarna-osm--empty:not(.klarna-osm--editor)) {
    display: none;
  }

  /*
    Price owns the hairline by default (quick-add, no Klarna, OOS). `_klarna`
    and `_product-price` use schema tag null, so they are direct form children.
    The hairline owner also carries the divider margin, so drop the edge, the
    margin and the padding above the line on the price while OSM is visible:
    the form gap is then the space between price and Klarna, and only
    Klarna’s line (and its breathing room) remains.
  */
  product-form:not(.is-oos):has(.klarna-osm:not(.klarna-osm--empty)) .product-price {
    margin-block-end: 0;
    padding-block-end: 0;
    border-block-end: 0;
  }

  /* Unwrapped OSM sibling (before the app is nested in `_klarna`). Figma:
     16 above the line; `divider_gap` is the total below it, so the margin is
     what the form gap does not already provide. */
  .product-form__form > .shopify-app-block:has(klarna-placement) {
    margin-block-end: max(0px, calc(var(--product-form-divider-gap, 0px) - var(--product-form-gap, 0px)));
    padding-block-end: var(--spacing-xs);
    border-block-end: 1px solid var(--border-secondary);
  }

  product-form:not(.is-oos):has(> .product-form__form > .shopify-app-block:has(klarna-placement)) .product-price {
    margin-block-end: 0;
    padding-block-end: 0;
    border-block-end: 0;
  }

  /* Alternates stay in the DOM so variant changes can reveal them. Keep the
     editor copy visible when the preview variant is still in stock. */
  product-form:not(.is-oos) .oos-alternates:not(.oos-alternates--editor),
  product-form:not(.is-oos) .shopify-block:has(> .oos-alternates:not(.oos-alternates--editor)) {
    display: none;
  }
/* END_BLOCK:product-form */

/* START_BLOCK:richtext (INDEX:173) */
.richtext {
    display: block;
  }

  /*
    Enter in the editor starts a new paragraph. The universal reset zeroes
    margins, so paragraphs ran together; give them the same rhythm as .rte copy
    in critical.css. The last block's margin is cleared by .text-block.
  */
  .richtext :is(p, ul, ol) {
    margin-block-end: var(--spacing-sm);
  }
/* END_BLOCK:richtext */

/* START_BLOCK:title (INDEX:175) */
.title {
    margin-block: var(--title-margin-block-start, 0) var(--title-margin-block-end, 0);
    text-align: var(--title-align, left);
  }

  .title__heading {
    margin: 0;
    font-family: var(--font-primary--family);
    font-feature-settings: var(--font-feature-settings);
    color: var(--color-text--primary, var(--brand-14));
  }

  .title--display .title__heading {
    font-size: var(--font-title-display-size);
    font-weight: var(--font-title-display-weight);
    line-height: var(--font-title-display-line-height);
    letter-spacing: var(--font-title-display-letter-spacing);
  }

  .title--xl .title__heading {
    font-size: var(--font-title-xl-size);
    font-weight: var(--font-title-xl-weight);
    line-height: var(--font-title-xl-line-height);
    letter-spacing: var(--font-title-xl-letter-spacing);
  }

  .title--lg .title__heading {
    font-size: var(--font-title-lg-size);
    font-weight: var(--font-title-lg-weight);
    line-height: var(--font-title-lg-line-height);
    letter-spacing: var(--font-title-lg-letter-spacing);
  }

  .title--md .title__heading {
    font-size: var(--font-title-md-size);
    font-weight: var(--font-title-md-weight);
    line-height: var(--font-title-md-line-height);
    letter-spacing: var(--font-title-md-letter-spacing);
  }

  .title--sm .title__heading {
    font-size: var(--font-title-sm-size);
    font-weight: var(--font-title-sm-weight);
    line-height: var(--font-title-sm-line-height);
    letter-spacing: var(--font-title-sm-letter-spacing);
  }

  .title--xs .title__heading {
    font-size: var(--font-title-xs-size);
    font-weight: var(--font-title-xs-weight);
    line-height: var(--font-title-xs-line-height);
    letter-spacing: var(--font-title-xs-letter-spacing);
  }

  .title--empty {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
  }

  .title__placeholder {
    margin: 0;
    color: var(--text-secondary, #767676);
    font-size: var(--font-body-md-size, 0.875rem);
    line-height: var(--font-body-md-line-height, 1.4);
  }
/* END_BLOCK:title */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:about-this-product-card (INDEX:177) */
.about-this-product-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border-invert, #f5f5f5);
    border-radius: var(--radius-md, 8px);
    background-color: var(--surface-primary, #fff);
    box-shadow: 0 2px 4px rgb(0 0 0 / 4%);
    color: var(--text-primary);
  }

  .about-this-product-card__media {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
    background-color: var(--surface-secondary);
  }

  .about-this-product-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-this-product-card__content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    gap: var(--spacing-5xs, 4px);
    width: 100%;
    padding: var(--spacing-sm, 20px);
  }

  /* The section can override these colours for every card it renders. */
  .about-this-product-card__title {
    margin: 0;
    color: var(--about-this-product-card-title-color, var(--text-primary));
  }

  .about-this-product-card__text {
    margin: 0;
    color: var(--about-this-product-card-text-color, var(--text-primary));
  }

  .about-this-product-card__text p {
    margin: 0;
  }

  .about-this-product-card__text p + p {
    margin-block-start: var(--spacing-5xs, 4px);
  }
/* END_SNIPPET:about-this-product-card */

/* START_SNIPPET:accordion-row (INDEX:179) */
.accordion-row {
    width: 100%;
    margin: 0;
    padding: var(--spacing-2xs);
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    color: var(--text-primary);
  }

  .accordion-row__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    width: 100%;
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .accordion-row__summary::-webkit-details-marker {
    display: none;
  }

  .accordion-row__summary::marker {
    content: '';
  }

  .accordion-row__summary:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  .accordion-row__heading {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
  }

  .accordion-row__icon-media {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  .accordion-row__icon-image {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }

  .accordion-row__question {
    flex: 1 1 auto;
    min-width: 0;
    /* Isolate from any ancestor padding custom properties (e.g. accordion chrome) */
    --padding-block-start: 0;
    --padding-block-end: 0;
    --padding-inline-start: 0;
    --padding-inline-end: 0;
  }

  .accordion-row__icons {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    color: var(--text-primary);
  }

  .accordion-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1 / 1;
    width: 16px;
    height: 16px;
    transition: opacity 320ms ease;
  }

  .accordion-row__icon--plus {
    opacity: 1;
  }

  .accordion-row__icon--minus {
    opacity: 0;
  }

  .accordion-row[open] .accordion-row__icon--plus {
    opacity: 0;
  }

  .accordion-row[open] .accordion-row__icon--minus {
    opacity: 1;
  }

  /*
    Native details motion: animate the details content box itself.
    JS height toggling flashes because the panel paints full-height for a frame
    before collapsing. ::details-content avoids that.

    Gate on interpolate-size: without it, height: 0 / overflow: hidden on
    ::details-content creates a block formatting context so the last
    paragraph's margin (from .rte) cannot collapse. That showed as extra
    space under metafield answers in Safari and some Edge/Chrome builds.
  */
  @supports (interpolate-size: allow-keywords) {
    .accordion-row {
      interpolate-size: allow-keywords;
    }

    .accordion-row::details-content {
      height: 0;
      overflow: hidden;
      transition:
        height 520ms cubic-bezier(0.22, 1, 0.36, 1),
        content-visibility 520ms allow-discrete;
    }

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

  .accordion-row__panel {
    min-height: 0;
  }

  .accordion-row__content {
    margin-block-start: var(--spacing-2xs);
    color: var(--text-primary);
  }

  .accordion-row__content > *:first-child {
    margin-block-start: 0;
  }

  .accordion-row__content > *:last-child {
    margin-block-end: 0;
  }

  /*
    metafield_tag wraps answers in .metafield-rich_text_field, so the trailing
    margin .rte gives the last paragraph sits inside that wrapper, out of reach
    of the last-child resets above, and overflow on ::details-content stops it
    collapsing. Space the wrapper's blocks with flex gap instead: gap also
    skips the blank Admin RTE spacers critical.css hides, which margins turn
    into phantom space. Scoped to the wrapper so theme-block richtext answers
    keep their own rhythm.
  */
  .accordion-row__content .metafield-rich_text_field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .accordion-row__content .metafield-rich_text_field :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
    margin-block: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion-row__icon,
    .accordion-row::details-content {
      transition: none;
    }
  }
/* END_SNIPPET:accordion-row */

/* START_SNIPPET:accordion (INDEX:180) */
.accordion {
    display: flex;
    flex-direction: column;
    gap: var(--accordion-gap, var(--spacing-sm));
    width: 100%;
    max-width: 42.125rem;
    margin-inline: auto;
    padding-block-start: var(--accordion-padding-block-start, 0);
    padding-block-end: var(--accordion-padding-block-end, 0);
    padding-inline-start: var(--accordion-padding-inline-start, 0);
    padding-inline-end: var(--accordion-padding-inline-end, 0);
  }

  .accordion__placeholder {
    margin: 0;
    padding: var(--spacing-2xs);
    color: var(--text-secondary);
    text-align: center;
    font-size: var(--font-body-sm-size);
  }
/* END_SNIPPET:accordion */

/* START_SNIPPET:ad-block-card (INDEX:181) */
.ad-block-card {
    --ad-block-card-radius: 0;
    --ad-block-card-content-padding-block: var(--spacing-sm);
    --ad-block-card-content-padding-inline: var(--spacing-2xs);
    --ad-block-card-content-gap: var(--spacing-xs);
    /* Mobile 1-col overlay: top-left darken (~0.6) */
    --ad-block-card-overlay: linear-gradient(
      139deg,
      rgb(0 0 0 / 0.6) 8%,
      rgb(0 0 0 / 0) 69%
    );

    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: clip;
    border-radius: var(--ad-block-card-radius);
    color: var(--text-invert, #fff);
    text-decoration: none;
  }

  .ad-block-card--linked {
    cursor: pointer;
  }

  .ad-block-card--one-card {
    --ad-block-card-content-padding-block: 20px;
    --ad-block-card-content-padding-inline: 12px;
    align-self: stretch;
  }

  /* Full / two-card on mobile = full grid row, ~400px tall (Figma 375×400)
     Text scrim: top-left darken (Figma ~169deg) — stronger/wider so white type holds on light walls */
  .ad-block-card--full-width,
  .ad-block-card--two-cards {
    --ad-block-card-content-padding-block: 32px;
    --ad-block-card-content-padding-inline: 20px;
    --ad-block-card-overlay:
      linear-gradient(
        169deg,
        rgb(0 0 0 / 0.55) 0%,
        rgb(0 0 0 / 0.4) 22%,
        rgb(0 0 0 / 0.15) 52%,
        rgb(0 0 0 / 0) 72%
      ),
      linear-gradient(180deg, rgb(0 0 0 / 0.35) 0%, rgb(0 0 0 / 0) 40%),
      linear-gradient(242deg, rgb(0 0 0 / 0) 66%, rgb(0 0 0 / 0.35) 85%);
    aspect-ratio: 375 / 400;
    height: auto;
  }

  .ad-block-card__media {
    position: absolute;
    inset: 0;
  }

  .ad-block-card__media--placeholder {
    background-color: var(--text-secondary, #4d4d4d);
  }

  .ad-block-card--placeholder.ad-block-card--one-card {
    min-height: 280px;
  }

  .ad-block-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
  }

  .ad-block-card__image--hover {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
  }

  .ad-block-card--has-content::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--ad-block-card-overlay);
    pointer-events: none;
  }

  .ad-block-card__content-rail {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .ad-block-card__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ad-block-card-content-gap);
    max-width: min(100%, 28rem);
    padding-block: var(--ad-block-card-content-padding-block);
    padding-inline: var(--ad-block-card-content-padding-inline);
  }

  /* Rail is the full tile so sticky has travel. Clip stays on the media;
     overflow:clip on the card would trap sticky in a non-scrolling box.
     Do not use `inset` here — it resets `top` and sticky never engages. */
  .ad-block-card--sticky {
    overflow: visible;
  }

  .ad-block-card--sticky .ad-block-card__media,
  .ad-block-card--sticky.ad-block-card--has-content::before {
    border-radius: inherit;
  }

  .ad-block-card--sticky .ad-block-card__media {
    overflow: hidden;
  }

  .ad-block-card--sticky .ad-block-card__content {
    position: sticky;
    top: var(--header-height, 0px);
    width: max-content;
  }

  .ad-block-card__title {
    margin: 0;
    color: inherit;
  }

  .ad-block-card__cta {
    display: flex;
  }

  /* Card hover/focus drives CTA hover (card is the single link) */
  .ad-block-card--linked:hover .ad-block-card__button,
  .ad-block-card--linked:focus-visible .ad-block-card__button {
    background-color: var(--button-hover-bg, var(--surface-brand-dark));
    color: var(--button-hover-color, var(--text-invert));
  }

  .ad-block-card--linked:hover .ad-block-card__button .button__icon,
  .ad-block-card--linked:focus-visible .ad-block-card__button .button__icon {
    width: var(--size-4, 16px);
    margin-inline-start: var(--button-gap, 4px);
    opacity: 1;
  }

  .ad-block-card--linked:focus-visible {
    outline: 2px solid var(--border-brand-dark, currentColor);
    outline-offset: 2px;
  }

  @media screen and (min-width: 750px) {
    .ad-block-card {
      --ad-block-card-radius: var(--radius-lg, 12px);
      --ad-block-card-content-padding-block: 24px;
      --ad-block-card-content-padding-inline: 24px;
      --ad-block-card-overlay: linear-gradient(
        165deg,
        rgb(0 0 0 / 0.4) 8%,
        rgb(0 0 0 / 0) 69%
      );
    }

    .ad-block-card--one-card {
      --ad-block-card-radius: var(--radius-lg, 12px);
      --ad-block-card-content-padding-block: 20px;
      --ad-block-card-content-padding-inline: 20px;
      aspect-ratio: unset;
      height: 100%;
    }

    .ad-block-card--two-cards {
      --ad-block-card-content-padding-block: 32px;
      --ad-block-card-content-padding-inline: 20px;
      /* Desktop 2-col (Figma 19832:71618): left text scrim + top strip + bottom-right tint */
      --ad-block-card-overlay:
        linear-gradient(
          169deg,
          rgb(0 0 0 / 0.5) 0%,
          rgb(0 0 0 / 0.35) 28%,
          rgb(0 0 0 / 0) 72%
        ),
        linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, rgb(0 0 0 / 0) 22%),
        linear-gradient(229deg, rgb(0 0 0 / 0) 66%, rgb(0 0 0 / 0.4) 85%);
      aspect-ratio: unset;
      height: 100%;
      align-self: stretch;
    }

    .ad-block-card--full-width {
      --ad-block-card-content-padding-block: 32px;
      --ad-block-card-content-padding-inline: 20px;
      /* Wide 21:5 banner needs a broader left/top scrim than the tall mobile tile */
      --ad-block-card-overlay:
        linear-gradient(
          100deg,
          rgb(0 0 0 / 0.55) 0%,
          rgb(0 0 0 / 0.4) 24%,
          rgb(0 0 0 / 0.18) 42%,
          rgb(0 0 0 / 0) 58%
        ),
        linear-gradient(180deg, rgb(0 0 0 / 0.4) 0%, rgb(0 0 0 / 0) 55%),
        linear-gradient(242deg, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.3) 90%);
      aspect-ratio: 21 / 5;
      height: auto;
    }
  }

  .ad-block-card--has-mobile-image .ad-block-card__image--default:not(.ad-block-card__image--mobile) {
    display: none;
  }

  .ad-block-card--has-mobile-hover .ad-block-card__image--hover:not(.ad-block-card__image--mobile) {
    display: none;
  }

  .ad-block-card__image--mobile {
    display: block;
  }

  @media screen and (min-width: 750px) {
    .ad-block-card--has-mobile-image .ad-block-card__image--default:not(.ad-block-card__image--mobile),
    .ad-block-card--has-mobile-hover .ad-block-card__image--hover:not(.ad-block-card__image--mobile) {
      display: block;
    }

    .ad-block-card__image--mobile {
      display: none;
    }
  }

  @media screen and (hover: hover) and (min-width: 750px) {
    .ad-block-card--has-hover .ad-block-card__image--default,
    .ad-block-card--has-hover .ad-block-card__image--hover {
      transition: opacity 250ms ease;
    }

    .ad-block-card--has-hover:hover .ad-block-card__image--hover,
    .ad-block-card--has-hover:focus-visible .ad-block-card__image--hover {
      opacity: 1;
    }

    .ad-block-card--has-hover:hover .ad-block-card__image--default,
    .ad-block-card--has-hover:focus-visible .ad-block-card__image--default {
      opacity: 0;
    }
  }

  @media screen and (hover: hover) and (max-width: 749px) {
    .ad-block-card--has-hover:not(.ad-block-card--has-mobile-hover) .ad-block-card__image--default,
    .ad-block-card--has-hover:not(.ad-block-card--has-mobile-hover) .ad-block-card__image--hover,
    .ad-block-card--has-mobile-hover .ad-block-card__image--default,
    .ad-block-card--has-mobile-hover .ad-block-card__image--hover {
      transition: opacity 250ms ease;
    }

    .ad-block-card--has-mobile-hover:hover .ad-block-card__image--hover.ad-block-card__image--mobile,
    .ad-block-card--has-mobile-hover:focus-visible .ad-block-card__image--hover.ad-block-card__image--mobile,
    .ad-block-card--has-hover:not(.ad-block-card--has-mobile-hover):hover .ad-block-card__image--hover,
    .ad-block-card--has-hover:not(.ad-block-card--has-mobile-hover):focus-visible .ad-block-card__image--hover {
      opacity: 1;
    }

    .ad-block-card--has-mobile-hover:hover .ad-block-card__image--default,
    .ad-block-card--has-mobile-hover:focus-visible .ad-block-card__image--default,
    .ad-block-card--has-hover:not(.ad-block-card--has-mobile-hover):hover .ad-block-card__image--default,
    .ad-block-card--has-hover:not(.ad-block-card--has-mobile-hover):focus-visible .ad-block-card__image--default {
      opacity: 0;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .ad-block-card--has-hover .ad-block-card__image--default,
    .ad-block-card--has-hover .ad-block-card__image--hover,
    .ad-block-card--has-mobile-hover .ad-block-card__image--default,
    .ad-block-card--has-mobile-hover .ad-block-card__image--hover {
      transition: none;
    }
  }
/* END_SNIPPET:ad-block-card */

/* START_SNIPPET:b2b-purchasing (INDEX:186) */
.b2b-volume-pricing {
    /* Figma M - b2b 19505:45876 is 13px; D - b2b 19505:45817 is 16px. */
    --b2b-volume-heading-size: var(--font-body-md-size);
    /* Rows hold 14px / 13px at both breakpoints (Figma 19505:45879, 19505:45880). */
    --b2b-volume-tier-size: 14px;
    --b2b-volume-price-size: 13px;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    color: var(--text-primary);

    @media screen and (min-width: 768px) {
      --b2b-volume-heading-size: var(--font-body-xl-size);
    }
  }

  .b2b-volume-pricing[hidden] {
    display: none;
  }

  .b2b-volume-pricing__heading {
    margin: 0;
    font-family: var(--font-body--family);
    font-size: var(--b2b-volume-heading-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
  }

  .b2b-volume-pricing__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .b2b-volume-pricing__row {
    display: flex;
    gap: var(--spacing-2xs);
    align-items: center;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-2xs);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
  }

  .b2b-volume-pricing__tier {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .b2b-volume-pricing__qty,
  .b2b-volume-pricing__price {
    margin: 0;
    font-family: var(--font-body--family);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
  }

  .b2b-volume-pricing__qty {
    font-size: var(--b2b-volume-tier-size);
    font-weight: var(--font-weight-semibold, 600);
  }

  .b2b-volume-pricing__price {
    font-size: var(--b2b-volume-price-size);
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-secondary);
  }

  .b2b-volume-pricing__badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding-block-start: 5px;
    padding-block-end: var(--spacing-5xs);
    padding-inline: var(--spacing-3xs);
    border-radius: var(--radius-full);
    /* Figma brand/green badge; text-primary on badges is #3D3D3D (--border-dark). */
    background-color: var(--border-brand-light);
    color: var(--border-dark);
    font-family: var(--font-body--family);
    font-size: var(--font-body-2xs-size);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1;
    text-transform: capitalize;
    font-feature-settings: var(--font-feature-settings);
  }

  .b2b-volume-pricing__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--b2b-volume-price-size);
  }

  .b2b-volume-pricing--editor .b2b-volume-pricing__heading {
    color: var(--text-secondary);
  }
/* END_SNIPPET:b2b-purchasing */

/* START_SNIPPET:b2b-quantity-note (INDEX:187) */
.b2b-quantity-note {
    /* Figma M - b2b 19505:45868 is 13px; D - b2b 19505:45861 is 16px. */
    --b2b-note-heading-size: var(--font-body-md-size);
    --b2b-note-text-size: var(--font-body-md-size);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
    width: 100%;
    min-width: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    color: var(--text-primary);

    @media screen and (min-width: 768px) {
      --b2b-note-heading-size: var(--font-body-xl-size);
    }
  }

  .b2b-quantity-note[hidden] {
    display: none;
  }

  .b2b-quantity-note__heading,
  .b2b-quantity-note__text {
    margin: 0;
    font-family: var(--font-body--family);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
  }

  .b2b-quantity-note__heading {
    font-size: var(--b2b-note-heading-size);
    font-weight: var(--font-weight-semibold, 600);
  }

  .b2b-quantity-note__text {
    font-size: var(--b2b-note-text-size);
    font-weight: var(--font-weight-regular, 400);
  }

  .b2b-quantity-note--editor {
    color: var(--text-secondary);
  }
/* END_SNIPPET:b2b-quantity-note */

/* START_SNIPPET:back-in-stock-dialog (INDEX:188) */
.back-in-stock__dialog {
    width: calc(100% - var(--spacing-lg) * 2);
    max-width: 28rem;
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
  }

  .back-in-stock__dialog::backdrop {
    background-color: rgb(51 51 51 / 40%);
  }

  .back-in-stock__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 4px var(--shadow-xs-color);
  }

  .back-in-stock__close {
    position: absolute;
    top: var(--spacing-2xs);
    right: var(--spacing-2xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .back-in-stock__close:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .back-in-stock__title {
    margin: 0;
    padding-inline-end: var(--size-8);
    font-family: var(--font-heading--family);
    font-size: var(--font-title-sm-size);
    font-weight: var(--font-title-sm-weight);
    line-height: var(--font-title-sm-line-height);
    font-feature-settings: var(--font-feature-settings);
  }

  .back-in-stock__description,
  .back-in-stock__label,
  .back-in-stock__status {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  .back-in-stock__description,
  .back-in-stock__label {
    color: var(--text-primary);
  }

  .back-in-stock__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  .back-in-stock__input {
    width: 100%;
    min-height: var(--size-10);
    padding: var(--spacing-3xs) var(--spacing-xs);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
  }

  .back-in-stock__input:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .back-in-stock__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3xs);
  }

  .back-in-stock__checkbox {
    flex-shrink: 0;
    width: var(--size-4);
    height: var(--size-4);
    margin: 0.15em 0 0;
    accent-color: var(--text-brand);
  }

  .back-in-stock__consent-label {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
  }

  .back-in-stock__status[hidden] {
    display: none;
  }

  .back-in-stock__status--error {
    color: var(--system-sale);
  }

  .back-in-stock__status--success {
    color: var(--text-brand);
  }
/* END_SNIPPET:back-in-stock-dialog */

/* START_SNIPPET:blog-card (INDEX:189) */
.blog-card {
    --blog-card-radius: var(--radius-md, 8px);
    --blog-card-height: 300px;
    --blog-card-content-height: 135px;
    --blog-card-content-padding: var(--spacing-sm, 20px);
    --blog-card-arrow-size: 28px;
    --blog-card-arrow-icon-size: 16px;
    --blog-card-surface: var(--surface-secondary, #f5f5f5);
    --blog-card-text: var(--text-primary, #333);
    --blog-card-text-muted: var(--text-secondary, #767676);
    --blog-card-text-invert: var(--text-invert, #fff);

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: clip;
    width: 100%;
    height: var(--blog-card-height);
    min-height: var(--blog-card-height);
    border-radius: var(--blog-card-radius);
    background-color: var(--blog-card-surface);
    color: var(--blog-card-text);
    text-decoration: none;
    isolation: isolate;
  }

  .blog-card--expanded {
    --blog-card-height: 360px;
  }

  .blog-card:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  /* Shared media — always covers its flex region */
  .blog-card__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background-color: var(--blog-card-surface);
  }

  .blog-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .blog-card__image--placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--blog-card-surface);
  }

  /* —— Minimal: full-bleed image + gradient / blur overlay (Figma 19121:84393) —— */
  .blog-card--minimal {
    /* isolation:isolate on .blog-card prevents backdrop-filter from sampling the image */
    isolation: auto;
  }

  .blog-card--minimal .blog-card__media {
    position: absolute;
    inset: 0;
    flex: none;
    z-index: 0;
    border-radius: inherit;
  }

  .blog-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    padding: var(--spacing-3xs, 8px);
  }

  .blog-card__badge-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px var(--spacing-3xs, 8px) var(--spacing-5xs, 4px);
    border-radius: var(--radius-full, 360px);
    background-color: rgb(0 0 0 / 0.2);
    color: var(--blog-card-text-invert);
    font-family: var(--font-primary--family);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .blog-card--expanded .blog-card__badge {
    inset-block-start: 12px;
    inset-inline-start: 13px;
    padding: 0;
  }

  .blog-card--expanded .blog-card__badge-label {
    background-color: var(--border-brand-light, #c6d97a);
    color: var(--border-dark, #3d3d3d);
    font-size: 11px;
    text-transform: capitalize;
  }

  /*
    Figma 19121:84393 — gradient scrim + backdrop blur.
    Uniform backdrop-filter on the overlay box creates a hard top seam.
    Blur lives on masked pseudo-elements so intensity fades in (progressive blur).
  */
  .blog-card__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs, 12px);
    align-items: flex-start;
    justify-content: center;
    padding: var(--spacing-xl, 40px) 64px var(--spacing-sm, 20px) var(--spacing-sm, 20px);
    background: linear-gradient(
      180deg,
      rgb(0 0 0 / 0) 0%,
      rgb(0 0 0 / 0.6) 100%
    );
  }

  .blog-card__overlay::before,
  .blog-card__overlay::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
  }

  /* Soft entry — taller than the overlay so the fade starts above the content band */
  .blog-card__overlay::before {
    height: 160%;
    z-index: 0;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 35%,
      black 75%,
      black 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 35%,
      black 75%,
      black 100%
    );
  }

  /* Stronger frost toward the title — matches the partial-fix approach */
  .blog-card__overlay::after {
    inset: 0;
    z-index: 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 45%,
      black 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 45%,
      black 100%
    );
  }

  .blog-card--minimal .blog-card__title {
    position: relative;
    z-index: 1;
    color: var(--blog-card-text-invert);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  .blog-card--minimal .blog-card__arrow {
    color: var(--blog-card-text-invert);
  }

  /* —— Expanded: image + fixed grey text panel —— */
  .blog-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    height: var(--blog-card-content-height);
    min-height: var(--blog-card-content-height);
    padding: var(--blog-card-content-padding) 3rem var(--blog-card-content-padding)
      var(--blog-card-content-padding);
    background-color: var(--blog-card-surface);
  }

  .blog-card__content-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs, 8px);
    width: 100%;
    min-width: 0;
  }

  .blog-card__eyebrow {
    margin: 0;
    color: var(--blog-card-text-muted);
    font-family: var(--font-primary--family);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  .blog-card--listing .blog-card__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-5xs, 4px);
  }

  .blog-card__meta-dot {
    --blog-card-meta-dot-size: 4px;

    flex: 0 0 auto;
    width: var(--blog-card-meta-dot-size);
    height: var(--blog-card-meta-dot-size);
    border-radius: 50%;
    background-color: var(--border-brand-dark, #4d9d34);
  }

  .blog-card__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs, 4px);
    width: 100%;
    min-width: 0;
  }

  .blog-card__title {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  .blog-card--expanded .blog-card__title {
    color: var(--blog-card-text);
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /*
    A border sits under the whole title box. Text decoration follows each wrapped
    line instead and stops where the words do. The offset stays inside the
    line box so the line clamp's overflow does not clip it on the last line.
  */
  .blog-card--listing .blog-card__title {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }

  .blog-card__excerpt {
    margin: 0;
    overflow: hidden;
    color: var(--blog-card-text);
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Mobile: arrow always visible. Desktop: hover / focus only (see media query). */
  .blog-card__arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--blog-card-arrow-size);
    height: var(--blog-card-arrow-size);
    margin: var(--spacing-2xs, 12px);
    color: var(--blog-card-text);
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /*
    The arrow glyph spans 18 of the icon's 24 units. Figma draws it 12px wide on
    mobile and 20px wide on desktop, so the svg scales with the breakpoint.
  */
  .blog-card__arrow .icon {
    display: block;
    width: var(--blog-card-arrow-icon-size);
    height: var(--blog-card-arrow-icon-size);
  }

  @media screen and (min-width: 768px) {
    .blog-card {
      --blog-card-radius: var(--radius-lg, 12px);
      --blog-card-height: 400px;
      --blog-card-content-height: 142px;
      --blog-card-arrow-size: 36px;
      --blog-card-arrow-icon-size: 27px;
    }

    .blog-card--expanded {
      --blog-card-height: 465px;
      --blog-card-content-height: 147px;
    }

    .blog-card--expanded .blog-card__content {
      padding: var(--spacing-sm, 20px) var(--spacing-sm, 20px) var(--spacing-xl, 40px);
    }

    .blog-card--minimal .blog-card__title,
    .blog-card--expanded .blog-card__title {
      font-size: 16px;
      line-height: 1.4;
    }

    .blog-card--featured.blog-card--expanded .blog-card__excerpt {
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }

    .blog-card__arrow,
    .blog-card--expanded .blog-card__arrow,
    .blog-card--minimal .blog-card__arrow {
      opacity: 0;
    }

    .blog-card:hover .blog-card__arrow,
    .blog-card:focus-visible .blog-card__arrow {
      opacity: 1;
    }

    .blog-card--listing:hover .blog-card__title,
    .blog-card--listing:focus-visible .blog-card__title {
      text-decoration-color: var(--border-brand-dark, #4d9d34);
    }
  }
/* END_SNIPPET:blog-card */

/* START_SNIPPET:blog-pagination (INDEX:190) */
.blog-pagination {
    /* Figma radius/sm is 1px; the theme's --radius-sm is 4px, so it can't be used here. */
    --blog-pagination-cell-radius: 1px;
    /* Figma keeps page numbers at 16px; --font-body-xl-size drops to 15px below 750px. */
    --blog-pagination-font-size: 16px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs, 8px);
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-block-start: var(--spacing-sm, 20px);
    padding-block: var(--spacing-lg, 32px);
    background-color: var(--surface-primary, #fff);
  }

  .blog-pagination__arrow,
  .blog-pagination__page,
  .blog-pagination__ellipsis {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    color: var(--text-primary, #262626);
    text-decoration: none;
  }

  .blog-pagination__arrow {
    width: 24px;
    height: 24px;
  }

  .blog-pagination__arrow--disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  .blog-pagination__arrow:focus-visible,
  .blog-pagination__page:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  .blog-pagination__page,
  .blog-pagination__ellipsis {
    width: 32px;
    height: 32px;
    padding: 8px 12px;
    border-radius: var(--blog-pagination-cell-radius);
    font-family: var(--font-primary--family);
    font-size: var(--blog-pagination-font-size);
    font-weight: var(--font-body-xl-weight, 400);
    line-height: 1.4;
  }

  .blog-pagination__page--current {
    border-radius: var(--radius-md, 8px);
    background-color: var(--surface-brand-light, #eef4dc);
  }

  @media screen and (min-width: 768px) {
    .blog-pagination {
      padding-block: var(--spacing-2xl, 48px);
    }
  }
/* END_SNIPPET:blog-pagination */

/* START_SNIPPET:button (INDEX:192) */
/*
   * Figma Light and Dark modes use the same semantic token names.
   * The surrounding color scheme supplies each mode's values, so buttons
   * inherit their mode from `.color-scheme-1`, `.color-scheme-2`, etc.
   */
  .button {
    --button-height: var(--size-8);
    --button-icon-size: 34px;
    --button-font-size: var(--font-button-sm-size);
    --button-font-weight: var(--font-button-sm-weight);
    --button-line-height: var(--font-button-sm-line-height);
    --button-letter-spacing: var(--font-button-sm-letter-spacing);
    --button-underline-font-size: var(--font-button-md-size);
    --button-underline-font-weight: var(--font-button-md-weight);
    --button-underline-line-height: var(--font-button-md-line-height);
    --button-underline-letter-spacing: var(--font-button-md-letter-spacing);
    --button-gap: var(--spacing-4xs);
    --button-padding-y: var(--spacing-3xs);
    --button-padding-x: var(--spacing-xs);
    --button-bg: var(--surface-brand-dark);
    --button-color: var(--text-invert);
    --button-border-color: transparent;
    --button-border-width: 1px;
    --button-hover-bg: var(--surface-brand-dark);
    --button-hover-color: var(--text-invert);
    --button-hover-border-color: transparent;
    --button-active-border-width: 1.5px;
    --button-disabled-opacity: 0.3;
    --button-icon-hover-bg: var(--border-brand-light);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    min-height: var(--button-height);
    margin: 0;
    padding: var(--button-padding-y) var(--button-padding-x);
    border: var(--button-border-width) solid var(--button-border-color);
    border-radius: var(--radius-full);
    background-color: var(--button-bg);
    color: var(--button-color);
    font-family: var(--font-subheading--family);
    font-style: var(--font-subheading--style);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      opacity 0.2s ease;
  }

  .button:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .button__label {
    display: inline-block;
  }

  .button__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 0;
    height: var(--size-4);
    margin-inline-start: 0;
    overflow: hidden;
    opacity: 0;
    color: currentColor;
    transition:
      width 0.2s ease,
      margin-inline-start 0.2s ease,
      margin-inline-end 0.2s ease,
      opacity 0.2s ease;
  }

  .button__icon .icon {
    display: block;
    width: var(--size-4);
    height: var(--size-4);
    min-width: var(--size-4);
  }

  .button:hover .button__icon,
  .button:active .button__icon,
  .button:focus-visible .button__icon {
    width: var(--size-4);
    margin-inline-start: var(--button-gap);
    opacity: 1;
  }

  .button--icon-only {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    min-height: var(--button-icon-size);
    padding: var(--spacing-2xs);
    gap: var(--spacing-5xs);
  }

  .button--icon-only .button__icon {
    width: var(--size-4);
    margin-inline-start: 0;
    opacity: 1;
  }

  .button--no-icon .button__icon {
    display: none;
    width: 0;
    margin-inline-start: 0;
    opacity: 0;
  }

  .button--no-icon:hover .button__icon,
  .button--no-icon:active .button__icon,
  .button--no-icon:focus-visible .button__icon {
    display: none;
    width: 0;
    margin-inline-start: 0;
    opacity: 0;
  }

  .button--full {
    width: 100%;
  }

  .button--primary {
    --button-bg: var(--surface-brand-dark);
    --button-color: var(--text-invert);
    --button-border-color: transparent;
    --button-hover-bg: var(--surface-brand-dark);
    --button-hover-color: var(--text-invert);
    --button-disabled-opacity: 0.3;
  }

  .button--primary:hover,
  .button--primary:active,
  .button--primary:focus-visible {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-color);
  }

  .button--primary.button--icon-only:hover {
    background-color: var(--button-icon-hover-bg);
  }

  .button--secondary {
    --button-bg: var(--surface-primary);
    --button-color: var(--text-primary);
    --button-border-color: var(--border-brand-dark);
    --button-hover-bg: var(--surface-brand-light);
    --button-hover-color: var(--text-primary);
    --button-hover-border-color: transparent;
    --button-disabled-opacity: 0.4;
  }

  .button--secondary:hover,
  .button--secondary:focus-visible {
    background-color: var(--button-hover-bg);
    border-color: var(--button-hover-border-color);
    color: var(--button-hover-color);
  }

  .button--secondary:active {
    background-color: var(--button-bg);
    border-width: var(--button-active-border-width);
    border-color: var(--button-border-color);
    color: var(--button-color);
  }

  .button--underline {
    --button-bg: transparent;
    --button-color: var(--text-primary);
    --button-border-color: var(--border-brand-dark);
    --button-hover-bg: transparent;
    --button-hover-color: var(--text-primary);
    --button-hover-border-color: var(--border-brand-dark);
    --button-gap: var(--spacing-3xs);
    --button-disabled-opacity: 0.4;
    min-height: auto;
    padding: 0 0 var(--spacing-5xs);
    border: none;
    border-bottom: 1px solid var(--button-border-color);
    border-radius: 0;
    background-color: transparent;
    font-size: var(--button-underline-font-size);
    font-weight: var(--button-underline-font-weight);
    line-height: var(--button-underline-line-height);
    letter-spacing: var(--button-underline-letter-spacing);
  }

  .button--underline:hover,
  .button--underline:focus-visible {
    background-color: transparent;
    color: var(--button-hover-color);
    border-bottom-color: var(--button-hover-border-color);
  }

  .button--underline:active {
    border-bottom-width: var(--button-active-border-width);
    color: var(--button-color);
  }

  .button--disabled,
  .button[aria-disabled='true'],
  .button:disabled {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
  }
/* END_SNIPPET:button */

/* START_SNIPPET:buy-buttons (INDEX:193) */
.buy-buttons {
    display: flex;
    width: 100%;
    min-width: 0;
  }

  .buy-buttons[class*='color-'] {
    background: none;
    background-color: transparent;
  }

  .buy-buttons .button,
  .buy-buttons__submit {
    width: 100%;
    height: 100%;
    min-height: var(--size-10);
    --button-height: var(--size-10);
    --button-font-size: var(--font-button-sm-size);
    --button-font-weight: var(--font-button-sm-weight);
    --button-line-height: var(--font-button-sm-line-height);
  }

  .buy-buttons--notify .buy-buttons__submit {
    --button-bg: var(--surface-invert);
    --button-hover-bg: var(--surface-invert);
    --button-color: var(--text-invert);
    --button-hover-color: var(--text-invert);
  }

  .buy-buttons__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .buy-buttons .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SNIPPET:buy-buttons */

/* START_SNIPPET:cart-line-item (INDEX:194) */
.cart-line-item {
    --cart-line-item-image-size: 7.25rem;
    --cart-line-item-drawer-title-size: 13px;
    --cart-line-item-drawer-price-size: 13px;

    display: flex;
    gap: var(--spacing-xs);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
  }

  .cart-line-item--page {
    --cart-line-item-image-size: 7.75rem;

    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .cart-line-item__media {
    display: block;
    flex-shrink: 0;
    width: var(--cart-line-item-image-size);
    height: var(--cart-line-item-image-size);
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
    text-decoration: none;
  }

  .cart-line-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-line-item__image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
  }

  .cart-line-item__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
  }

  .cart-line-item__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-5xs);
    min-width: 0;
  }

  .cart-line-item--page .cart-line-item__info {
    gap: var(--spacing-2xs);
  }

  .cart-line-item--drawer .cart-line-item__body {
    padding-block-start: var(--spacing-6xs);
  }

  .cart-line-item--drawer .cart-line-item__info {
    gap: var(--spacing-2xs);
  }

  .cart-line-item--drawer .cart-line-item__title {
    font-size: var(--cart-line-item-drawer-title-size);
    line-height: 1.4;
  }

  .cart-line-item--drawer .cart-line-item__price--info {
    font-size: var(--cart-line-item-drawer-price-size);
    line-height: 1.4;
  }

  .cart-line-item__badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: var(--spacing-6xs) var(--spacing-3xs);
    border-radius: var(--radius-full);
    background-color: var(--border-brand-light, var(--surface-brand-light));
    color: var(--text-primary);
  }

  .cart-line-item__title {
    color: var(--text-primary);
    text-decoration: none;
  }

  .cart-line-item__title:hover {
    text-decoration: underline;
  }

  .cart-line-item__meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
  }

  .cart-line-item__option {
    margin: 0;
    color: var(--text-secondary);
  }

  .cart-line-item__bundle {
    width: 100%;
    min-width: 0;
  }

  .cart-line-item__bundle-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-5xs);
    cursor: pointer;
    color: var(--text-secondary);
    list-style: none;
  }

  .cart-line-item__bundle-toggle::-webkit-details-marker,
  .cart-line-item__bundle-toggle::marker {
    display: none;
  }

  .cart-line-item__bundle-label--hide {
    display: none;
  }

  .cart-line-item__bundle[open] .cart-line-item__bundle-label--show {
    display: none;
  }

  .cart-line-item__bundle[open] .cart-line-item__bundle-label--hide {
    display: inline;
  }

  .cart-line-item__bundle-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .cart-line-item__bundle:not([open]) .cart-line-item__bundle-icon {
    transform: rotate(180deg);
  }

  .cart-line-item__components {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    margin: var(--spacing-2xs) 0 0;
    padding: 0;
    list-style: none;
  }

  .cart-line-item__component {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xs);
    min-width: 0;
  }

  .cart-line-item__component-media {
    display: block;
    flex-shrink: 0;
    width: var(--size-8);
    height: var(--size-8);
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--surface-secondary);
  }

  .cart-line-item__component-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-line-item__component-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
  }

  .cart-line-item__component-title {
    min-width: 0;
    color: var(--text-secondary);
  }

  .cart-line-item__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-5xs);
    color: var(--text-primary);
  }

  .cart-line-item__price-compare {
    color: var(--text-primary);
  }

  .cart-line-item__price-final--sale {
    color: var(--system-sale);
  }

  .cart-line-item__unit-price {
    color: var(--text-secondary);
  }

  .cart-line-item--page .cart-line-item__price--info {
    display: none;
  }

  .cart-line-item--drawer .cart-line-item__price--toolbar {
    display: none;
  }

  .cart-line-item__toolbar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
  }

  .cart-line-item--page .cart-line-item__toolbar {
    gap: var(--spacing-3xs);
    justify-content: space-between;
    width: 100%;
  }

  .cart-line-item--drawer .cart-line-item__toolbar {
    padding-block: var(--spacing-5xs) var(--spacing-6xs);
  }

  .cart-line-item--drawer.cart-line-item--gift .cart-line-item__toolbar {
    justify-content: flex-end;
  }

  .cart-line-item__quantity {
    display: inline-flex;
    gap: var(--spacing-2xs);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 5rem;
    height: var(--size-7);
    padding-block: var(--spacing-6xs);
    padding-inline: var(--spacing-3xs);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
  }

  /* The pill is a fixed 80px wide, leaving 64px inside the padding. The number
     takes 16px and the two gaps 24px, so the steppers have to share what is
     left rather than claim a fixed width, or they overflow the pill. */
  .cart-line-item__quantity-button {
    position: relative;
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--size-4);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .cart-line-item__quantity-button::before {
    position: absolute;
    inset: calc(var(--spacing-5xs) * -1);
    content: '';
  }

  .cart-line-item__quantity-button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .cart-line-item__quantity-button:focus-visible,
  .cart-line-item__quantity-input:focus-visible,
  .cart-line-item__remove:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .cart-line-item__quantity-input {
    flex: 0 0 auto;
    width: var(--size-4);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-align: center;
    appearance: textfield;
  }

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

  .cart-line-item__remove {
    --cart-line-item-remove-icon-size: var(--size-6);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
  }

  .cart-line-item__remove .icon {
    width: var(--cart-line-item-remove-icon-size);
    max-width: var(--cart-line-item-remove-icon-size);
    height: var(--cart-line-item-remove-icon-size);
  }

  .cart-line-item__remove:hover {
    color: var(--text-secondary);
  }

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

  @media screen and (min-width: 768px) {
    .cart-line-item--page {
      --cart-line-item-image-size: 8.75rem;

      align-items: center;
    }

    .cart-line-item--page .cart-line-item__body {
      flex-direction: row;
      gap: var(--spacing-xs);
      align-items: center;
      justify-content: space-between;
    }

    .cart-line-item--page.cart-line-item--bundle .cart-line-item__body {
      align-items: flex-start;
    }

    .cart-line-item--page .cart-line-item__info {
      flex: 1 1 12rem;
    }

    .cart-line-item--page .cart-line-item__toolbar {
      flex: 0 0 auto;
      gap: var(--spacing-xs);
      justify-content: flex-end;
      width: auto;
    }

    .cart-line-item--drawer {
      --cart-line-item-image-size: 7.75rem;
      --cart-line-item-drawer-title-size: 14px;
    }
  }
/* END_SNIPPET:cart-line-item */

/* START_SNIPPET:cart-need-card (INDEX:195) */
.cart-need-card {
    --cart-need-card-title-size: 16px;

    /* The arrow glyph spans 18 of the icon's 24 viewBox units, so a 16px box
       paints a 12px arrow. Scaled up to land on the 16px arrow in the design. */
    --cart-need-card-arrow-size: 21px;

    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding-inline-end: var(--spacing-xs);
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
  }

  a.cart-need-card:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .cart-need-card__media {
    display: block;
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
  }

  .cart-need-card__image,
  .cart-need-card__placeholder,
  .cart-need-card__placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-need-card__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--cart-need-card-title-size);
    line-height: 1.3;
  }

  .cart-need-card__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-7);
    height: var(--size-7);
    color: var(--text-primary);
  }

  .cart-need-card__icon .icon {
    width: var(--cart-need-card-arrow-size);
    height: var(--cart-need-card-arrow-size);
  }
/* END_SNIPPET:cart-need-card */

/* START_SNIPPET:cart-summary (INDEX:196) */
.cart-summary {
    --cart-summary-row-size: 12px;
    --cart-summary-total-size: 14px;
    --cart-summary-wallet-height: var(--size-8);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: stretch;
    width: 100%;
    padding: var(--spacing-2xs) var(--spacing-md) var(--spacing-sm);
    border: 0;
    border-block-start: 1px solid var(--border-invert, var(--surface-secondary));
    background-color: var(--surface-primary);
  }

  /* The page panel is a surface of its own rather than a strip pinned to the
     viewport, so it drops the drawer's top rule for a padded grey box. Type
     matches the mini cart and checkout CTA at 12px. */
  .cart-summary--page {
    --cart-summary-total-size: 12px;

    gap: var(--spacing-2xs);
    padding: var(--spacing-md);
    border-block-start: 0;
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
  }

  .cart-summary--sticky {
    flex-shrink: 0;
  }

  .cart-summary__heading {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--cart-summary-row-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
  }

  .cart-summary__lines {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
    width: 100%;
    margin: 0;
  }

  .cart-summary__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    padding-inline: var(--spacing-3xs);
    color: var(--text-primary);
    font-size: var(--cart-summary-row-size);
    line-height: 1.4;
  }

  .cart-summary__row dt,
  .cart-summary__row dd {
    margin: 0;
  }

  .cart-summary__row dd {
    text-align: end;
  }

  /* The panel already pads its contents, so the rows sit flush inside it. */
  .cart-summary--page .cart-summary__row {
    padding-inline: 0;
  }

  .cart-summary__row--savings {
    color: var(--system-sale);
  }

  .cart-summary__row--total {
    padding-block-start: var(--spacing-2xs);
    border-block-start: 1px solid var(--border-secondary);
    font-size: var(--cart-summary-total-size);
  }

  .cart-summary__tax-note {
    margin: 0;
    color: var(--text-secondary);
  }

  .cart-summary__checkout {
    width: 100%;
    height: var(--size-8);
  }

  .cart-summary__wallets {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: stretch;
    width: 100%;
  }

  .cart-summary__wallets[aria-disabled='true'] {
    pointer-events: none;
  }

  .cart-summary__wallets > * {
    flex: 1 1 0;
    min-width: 0;
  }

  .cart-summary__wallets shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-button-block-size: var(--cart-summary-wallet-height);
    --shopify-accelerated-checkout-button-inline-size: var(--cart-summary-wallet-height);
    --shopify-accelerated-checkout-button-border-radius: var(--radius-full);
    --shopify-accelerated-checkout-button-box-shadow: none;
    --shopify-accelerated-checkout-inline-alignment: space-between;
    --shopify-accelerated-checkout-row-gap: var(--spacing-5xs);

    display: block;
    width: 100%;
  }

  .cart-summary__note {
    margin: 0;
    color: var(--text-secondary);
    text-align: center;
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-toast (INDEX:197) */
.cart-toast {
    position: fixed;
    inset-block-end: var(--spacing-xs);
    inset-inline-start: var(--spacing-xs);
    z-index: 10000;
    display: block;
    width: min(calc(100vw - var(--spacing-sm)), 26rem);
  }

  .cart-toast[hidden] {
    display: none;
  }

  .cart-toast__panel {
    display: flex;
    gap: var(--spacing-2xs);
    align-items: flex-start;
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-md);
    background-color: var(--surface-invert);
    color: var(--text-invert);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
    opacity: 0;
    transform: translateY(var(--spacing-2xs));
    transition:
      opacity 300ms ease,
      transform 300ms ease;
  }

  .cart-toast[data-open] .cart-toast__panel {
    opacity: 1;
    transform: translateY(0);
  }

  .cart-toast__message {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--font-body-sm-size, 0.875rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .cart-toast__dismiss {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .cart-toast__dismiss:focus-visible {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .cart-toast__panel {
      transition: none;
    }
  }
/* END_SNIPPET:cart-toast */

/* START_SNIPPET:cart-upsell (INDEX:198) */
.cart-upsell {
    --cart-upsell-arrow-size: 36px;
    --cart-upsell-dot-size: 6px;
    --cart-upsell-dot-active-width: 24px;
    --cart-upsell-gap: var(--spacing-xs);
    --compatible-product-card-price-size: 13px;
    --compatible-product-card-price-line-height: 1.4;

    /* A fixed card rather than a fraction of the track: the drawer is a fixed
       440px, but this block is also allowed on the full-width cart page, where
       a proportional card would blow up to the width of the page. */
    --carousel-card-width: 371px;
    --carousel-card-width-mobile: 300px;
    --carousel-gap: var(--cart-upsell-gap);
    --carousel-gap-mobile: var(--cart-upsell-gap);

    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    min-width: 0;
  }

  /* display above outranks the user-agent [hidden] rule, so the empty
     cart-source module would keep its heading on screen. */
  .cart-upsell[hidden] {
    display: none;
  }

  .cart-upsell--placeholder {
    min-height: var(--spacing-md);
  }

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

  .cart-upsell__cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
  }

  .cart-upsell__list {
    list-style: none;
  }

  .cart-upsell__carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  /* Splide only reports overflow once mounted; before that the row scrolls and
     the controls would be inert. */
  .cart-upsell__controls {
    display: none;
    gap: var(--spacing-lg);
    align-items: center;
  }

  .carousel.is-overflow .cart-upsell__controls {
    display: flex;
  }

  .cart-upsell__arrows {
    display: none;
    gap: var(--spacing-xs);
    align-items: center;
  }

  /* Same circle as the compatible-products carousel, which pages the same cards
     on the product page — at 4% this one read as white against the panel. */
  .cart-upsell__arrow {
    --cart-upsell-arrow-fill: color-mix(in srgb, currentColor 10%, transparent);

    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: var(--cart-upsell-arrow-size);
    height: var(--cart-upsell-arrow-size);
    padding: 0;
    border: 1px solid var(--border-invert);
    border-radius: var(--radius-full);
    background-color: var(--cart-upsell-arrow-fill);
    color: inherit;
    cursor: pointer;
    appearance: none;
  }

  .cart-upsell__arrow:disabled {
    cursor: default;
    opacity: 0.5;
  }

  .cart-upsell__dots:empty {
    display: none;
  }

  .cart-upsell__dots .carousel__dots {
    gap: var(--spacing-5xs);
  }

  .cart-upsell__dots .carousel__dot {
    box-sizing: border-box;
    width: var(--cart-upsell-dot-size);
    height: var(--cart-upsell-dot-size);
    border: 0;
    border-radius: var(--radius-sm);
    background-color: currentColor;
    opacity: 0.3;
  }

  .cart-upsell__dots .carousel__dot.is-active {
    width: var(--cart-upsell-dot-active-width);
    opacity: 1;
  }

  @media screen and (min-width: 750px) {
    .cart-upsell {
      --compatible-product-card-price-size: 15px;
      --compatible-product-card-price-line-height: 1.3;
    }

    .cart-upsell__arrows {
      display: flex;
    }
  }
/* END_SNIPPET:cart-upsell */

/* START_SNIPPET:chip (INDEX:199) */
.chip {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-3xs) var(--spacing-xs);
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary, #f5f5f5);
    color: var(--text-primary, #333);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-regular-md-size, 0.875rem);
    font-weight: var(--font-body-regular-md-weight, 400);
    line-height: var(--font-body-regular-md-line-height, 1.4);
    letter-spacing: var(--font-body-regular-md-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    transition:
      background-color 0.2s ease,
      color 0.2s ease;
  }

  .chip:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  /* Match secondary CTA hover: brand-light surface */
  .chip:hover:not(.chip--selected):not([aria-selected='true']):not([aria-current='true']),
  .chip:focus-visible:not(.chip--selected):not([aria-selected='true']):not([aria-current='true']) {
    background-color: var(--surface-brand-light, #eef4dc);
    color: var(--text-primary, #333);
  }

  .chip--selected,
  .chip[aria-selected='true'],
  .chip[aria-current='true'] {
    background-color: var(--surface-brand-dark, #4d9d34);
    color: var(--text-invert, #fff);
  }

  .chip__label {
    display: inline-block;
  }
/* END_SNIPPET:chip */

/* START_SNIPPET:collection-hero (INDEX:200) */
.collection-hero {
    --collection-hero-media-min-height: 200px;
    --collection-hero-media-height-mobile: 152px;
    --collection-hero-content-max-width: 720px;

    display: flex;
    flex-direction: column;
    gap: var(--collection-hero-gap, var(--spacing-lg));
    box-sizing: border-box;
    width: calc(100% + (var(--section-padding-inline) * 2));
    min-width: 0;
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-block-start: var(--collection-hero-padding-block-start-mobile, var(--collection-hero-padding-block-start));
    padding-block-end: var(--collection-hero-padding-block-end-mobile, var(--collection-hero-padding-block-end));
    padding-inline: var(--spacing-sm);
    border-radius: 0;
    background-color: var(--surface-secondary);
    color: var(--text-primary);
  }

  .collection-hero--split {
    gap: var(--spacing-sm);
  }

  /* Image is the last row — drop the card's bottom padding so it sits flush.
     Overlay is excluded: its image is a background, so the copy still needs the inset. */
  .collection-hero--split.collection-hero--no-links:not(.collection-hero--overlay) {
    padding-block-end: 0;
  }

  /* Quick links sit on the card padding. 20px under the row; the 32px mobile
     block padding was reading as about 34px. Desktop restores the setting. */
  .collection-hero:not(.collection-hero--no-links) {
    padding-block-end: var(--spacing-sm);
  }

  /* Overlay is mobile-only (Figma Size9). Desktop keeps the split layout. */
  .collection-hero--overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    isolation: isolate;
    overflow: hidden;
    padding-block-end: var(--spacing-sm);
  }

  .collection-hero--overlay .collection-hero__content,
  .collection-hero--overlay .collection-hero__links,
  .collection-hero--overlay .collection-hero__media-button--flow {
    position: relative;
    z-index: 1;
  }

  .collection-hero--overlay .collection-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: auto;
    margin-inline: 0;
  }

  .collection-hero--overlay .collection-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
  }

  .collection-hero--overlay .collection-hero__heading,
  .collection-hero--overlay .collection-hero__description {
    color: var(--text-strong);
  }

  .collection-hero--overlay .collection-hero__description {
    gap: var(--spacing-6xs);
  }

  .collection-hero--overlay .collection-hero__media-button--on-media {
    display: none;
  }

  .collection-hero--overlay .collection-hero__media-button--flow {
    display: inline-flex;
    align-self: center;
    position: relative;
    inset: auto;
    transform: none;
  }

  .collection-hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: var(--collection-hero-content-max-width);
    margin-inline: auto;
    text-align: center;
  }

  .collection-hero--left .collection-hero__content {
    align-items: flex-start;
    text-align: left;
  }

  .collection-hero--right .collection-hero__content {
    align-items: flex-end;
    text-align: right;
  }

  .collection-hero__heading {
    width: 100%;
    margin: 0;
    color: var(--text-primary);
  }

  .collection-hero__description {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
    width: 100%;
    margin: 0;
    color: var(--text-primary);
  }

  .collection-hero__description summary {
    list-style: none;
    cursor: pointer;
  }

  .collection-hero__description summary::-webkit-details-marker {
    display: none;
  }

  .collection-hero__read-more {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
    align-items: inherit;
  }

  .collection-hero__read-more-closed {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .collection-hero__toggle {
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .collection-hero__toggle-less {
    display: none;
  }

  .collection-hero__description[open] .collection-hero__read-more-closed,
  .collection-hero__description[open] .collection-hero__toggle-more {
    display: none;
  }

  .collection-hero__description[open] .collection-hero__toggle-less {
    display: inline;
  }

  /* A summary has to stay the first child to remain the toggle, so the expanded
     Read less is reordered below the copy rather than moved in the markup. */
  .collection-hero__description[open] .collection-hero__read-more {
    order: 1;
    gap: 0;
  }

  .collection-hero__description-full {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    margin: 0;
  }

  /* Expanded copy is .rte, whose last paragraph otherwise keeps a 20px
     margin when a hidden Admin spacer follows it — that made Read less sit
     further from the text than Read more. Space paragraphs with gap instead. */
  .collection-hero__description-full.rte :is(h1, h2, h3, h4, h5, h6, p),
  .collection-hero__description-full > :last-child {
    margin-block-end: 0;
  }

  .collection-hero__media {
    position: relative;
    box-sizing: border-box;
    width: auto;
    height: var(--collection-hero-media-height-mobile);
    margin-inline: calc(var(--spacing-sm) * -1);
    overflow: hidden;
  }

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

  .collection-hero__media-button {
    --collection-hero-cta-inset-block: 13px;

    position: absolute;
    bottom: var(--collection-hero-cta-inset-block);
    left: 50%;
    display: inline-flex;
    gap: var(--spacing-4xs);
    align-items: center;
    justify-content: center;
    padding-block: var(--spacing-3xs);
    padding-inline: var(--spacing-xs);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  /* Only the mobile overlay lifts the CTA out of the image. */
  .collection-hero__media-button--flow {
    display: none;
  }

  .collection-hero__media-button:hover,
  .collection-hero__media-button:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  /* Mobile scroller bleeds past the card padding on both sides, so links scroll
     off the screen edge rather than clipping 20px in. Padding keeps the resting
     row aligned with the copy above. */
  .collection-hero__links {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-lg);
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    width: calc(100% + (var(--spacing-sm) * 2));
    min-width: 0;
    margin-inline: calc(var(--spacing-sm) * -1);
    padding-inline: var(--spacing-sm);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .collection-hero__links::-webkit-scrollbar {
    display: none;
  }

  .collection-hero__link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding-block-start: var(--spacing-none);
    padding-block-end: var(--spacing-5xs);
    padding-inline: var(--spacing-none);
    border-block-end: 1px solid var(--border-brand-dark);
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Same expand as .button__icon: width 0 → icon size, so the underline grows with the arrow. */
  .collection-hero__link-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 0;
    height: var(--size-4);
    margin-inline-start: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      width 0.2s ease,
      margin-inline-start 0.2s ease,
      opacity 0.2s ease;
  }

  .collection-hero__link:focus-visible .collection-hero__link-icon {
    width: var(--size-4);
    margin-inline-start: var(--spacing-3xs);
    opacity: 1;
  }

  /* Touch keeps :hover on the last link tapped or dragged across, so the arrow
     stuck open while scrolling. Only reveal it for a real pointer. */
  @media screen and (hover: hover) {
    .collection-hero__link:hover .collection-hero__link-icon {
      width: var(--size-4);
      margin-inline-start: var(--spacing-3xs);
      opacity: 1;
    }
  }

  .collection-hero__link-icon .icon {
    display: block;
    width: var(--size-4);
    height: var(--size-4);
    min-width: var(--size-4);
  }

  @media screen and (min-width: 750px) {
    .collection-hero {
      width: 100%;
      margin-inline: 0;
      padding-block-start: var(--collection-hero-padding-block-start);
      padding-block-end: var(--collection-hero-padding-block-end);
      padding-inline: var(--spacing-2xl);
      border-radius: var(--radius-lg);
    }

    .collection-hero:not(.collection-hero--no-links) {
      padding-block-end: var(--collection-hero-padding-block-end);
    }

    .collection-hero__links {
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      margin-inline: 0;
      padding-inline: 0;
      overflow-x: visible;
    }

    .collection-hero--left .collection-hero__links {
      justify-content: flex-start;
    }

    .collection-hero--right .collection-hero__links {
      justify-content: flex-end;
    }

    /* Two columns: text and links stack in the first column, the image fills
       the second and bleeds to the inline-end edge of the card.

       Height comes from the text column (Figma 20390:48228 is 265px collapsed,
       21402:51905 is 346px expanded). The image is taken out of flow so a
       portrait collection.image cannot stretch the banner. Extra row space,
       if any, stays above the links so they remain 48px from the bottom. */
    .collection-hero.collection-hero--split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: 1fr auto;
      column-gap: var(--spacing-sm);
      row-gap: var(--collection-hero-gap, var(--spacing-lg));
      padding-block: var(--spacing-none);
      padding-inline-end: var(--spacing-none);
      /* Clips the flush image to the card's own corner radius. */
      overflow: hidden;
    }

    .collection-hero--split .collection-hero__content {
      grid-row: 1;
      grid-column: 1;
      align-self: start;
      align-items: flex-start;
      max-width: none;
      margin-inline: 0;
      padding-block-start: var(--collection-hero-padding-block-start);
      text-align: left;
    }

    .collection-hero--split.collection-hero--no-links {
      grid-template-rows: auto;
      row-gap: 0;
    }

    .collection-hero--split.collection-hero--no-links .collection-hero__content {
      padding-block-end: var(--collection-hero-padding-block-end);
    }

    .collection-hero--split .collection-hero__links {
      grid-row: 2;
      grid-column: 1;
      gap: var(--spacing-md);
      justify-content: flex-start;
      /* Figma 20390:48228 — 48px from the links to the bottom of the banner. */
      padding-block-end: var(--spacing-2xl);
    }

    .collection-hero--split .collection-hero__media {
      grid-row: 1 / -1;
      grid-column: 2;
      align-self: stretch;
      width: 100%;
      height: 100%;
      min-height: var(--collection-hero-media-min-height);
      margin-inline: 0;
      overflow: hidden;
      border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    }

    .collection-hero--split .collection-hero__image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Without links there is no second row for the image to span, so it must
       not reserve one. */
    .collection-hero--split.collection-hero--no-links .collection-hero__media {
      grid-row: 1;
    }

    .collection-hero--split .collection-hero__media-button {
      --collection-hero-cta-inset-block: var(--spacing-lg);
      --collection-hero-cta-inset-inline: var(--size-7);

      right: var(--collection-hero-cta-inset-inline);
      bottom: var(--collection-hero-cta-inset-block);
      left: auto;
      transform: none;
    }

    /* Overlay must not leak onto desktop — Figma never overlays copy there. */
    .collection-hero--overlay {
      isolation: auto;
      padding-block-end: var(--spacing-none);
    }

    .collection-hero--overlay .collection-hero__media {
      position: relative;
      inset: auto;
    }

    .collection-hero--overlay .collection-hero__image {
      opacity: 1;
    }

    .collection-hero--overlay .collection-hero__heading,
    .collection-hero--overlay .collection-hero__description {
      color: var(--text-primary);
    }

    .collection-hero--overlay .collection-hero__description {
      gap: var(--spacing-5xs);
    }

    .collection-hero--overlay .collection-hero__media-button--flow {
      display: none;
    }

    .collection-hero--overlay .collection-hero__media-button--on-media {
      display: inline-flex;
    }
  }
/* END_SNIPPET:collection-hero */

/* START_SNIPPET:compatible-product-card (INDEX:202) */
.compatible-product-card {
    display: flex;
    gap: var(--spacing-xs);
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: var(--spacing-2xs);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
  }

  .compatible-product-card__media {
    display: block;
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: var(--radius-md);
    text-decoration: none;
  }

  .compatible-product-card__image,
  .compatible-product-card__placeholder-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .compatible-product-card__image-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--surface-secondary);
  }

  .compatible-product-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: flex-start;
    min-width: 0;
  }

  .compatible-product-card__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
    align-items: flex-start;
    width: 100%;
    min-width: 0;
  }

  .compatible-product-card__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-6xs) var(--spacing-3xs);
    border-radius: var(--radius-full);
    background-color: var(--border-brand-light);
    color: var(--text-primary);
  }

  .compatible-product-card__title {
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
    text-decoration: none;
  }

  .compatible-product-card__title:hover,
  .compatible-product-card__title:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .compatible-product-card__price {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--compatible-product-card-price-size, var(--font-body-xl-size));
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--compatible-product-card-price-line-height, var(--font-body-xl-line-height, 1.3));
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .compatible-product-card__quick-add {
    align-self: flex-end;
    margin-inline-start: auto;
  }

  .compatible-product-card__compare {
    display: inline-flex;
    gap: var(--spacing-3xs);
    align-items: center;
    min-height: 44px;
    color: var(--text-primary);
    font-size: var(--font-body-sm-size);
    cursor: pointer;
  }

  .compatible-product-card__compare.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .compatible-product-card__compare-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid var(--border-primary);
    background-color: var(--surface-primary);
  }

  .compatible-product-card__compare-box .icon {
    opacity: 0;
  }

  .compatible-product-card__compare-input:checked + .compatible-product-card__compare-box {
    border-color: var(--surface-invert);
    background-color: var(--surface-invert);
    color: var(--text-invert);
  }

  .compatible-product-card__compare-input:checked + .compatible-product-card__compare-box .icon {
    opacity: 1;
  }

  .compatible-product-card__compare-input:focus-visible + .compatible-product-card__compare-box {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  /* Match the PLP product card, which scales the bag icon up from 750px while
     the button stays 32px, so the upsell hover reads the same as a listing card. */
  @media screen and (min-width: 750px) {
    .compatible-product-card__quick-add .quick-add__icon {
      --quick-add-icon-size: var(--size-6);
    }
  }

  .compatible-product-card .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SNIPPET:compatible-product-card */

/* START_SNIPPET:doorway-card (INDEX:206) */
.doorway-card {
    --doorway-card-radius: 8px;
    --doorway-card-height: 280px;
    --doorway-card-content-padding: var(--spacing-sm);
    --doorway-card-gap: var(--spacing-3xs);
    --doorway-card-fade: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--doorway-card-gap);
    width: 100%;
    height: var(--doorway-card-height);
    min-width: var(--doorway-card-min-width, 256px);
    padding-block-start: var(--padding-block-start);
    padding-block-end: var(--padding-block-end);
    padding-inline-start: var(--padding-inline-start);
    padding-inline-end: var(--padding-inline-end);
    overflow: clip;
    border-radius: var(--doorway-card-radius);
    background: var(--doorway-card-bg);
    color: var(--color-foreground);
    text-decoration: none;
  }

  /* Gradients cannot be interpolated, so transitioning `background` between the two
     snaps instead of fading. Cross-fade a layer holding the hover gradient instead:
     `z-index: -1` sits it above the card's own background but behind everything in
     flow, which is why the card isolates itself into a stacking context. */
  .doorway-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--doorway-card-bg-hover);
    opacity: 0;
    transition: opacity var(--doorway-card-fade);
  }

  .doorway-card--linked {
    cursor: pointer;
  }

  .doorway-card--expandable {
    justify-content: flex-start;
    height: auto;
    min-height: var(--doorway-card-height);
  }

  .doorway-card--expandable .doorway-card__media {
    flex: 0 0 auto;
  }

  .doorway-card__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
  }

  .doorway-card__media:has(.doorway-card__picture),
  .doorway-card__media:has(.doorway-card__placeholder) {
    aspect-ratio: var(--doorway-card-media-ratio, auto);
  }

  .doorway-card__picture {
    position: absolute;
    inset: 0;
    display: block;
  }

  .doorway-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--doorway-card-object-fit, contain);
    object-position: center;
    pointer-events: none;
  }

  .doorway-card__image--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--doorway-card-fade);
  }

  .doorway-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
  }

  .doorway-card__placeholder-svg {
    width: 40%;
    height: auto;
    opacity: 0.35;
  }

  .doorway-card__content {
    display: flex;
    width: 100%;
    padding: var(--doorway-card-content-padding);
    flex-shrink: 0;
  }

  /* Title shares row 1 with the arrow; any further blocks span the full width below. */
  .doorway-card__blocks {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--doorway-card-blocks-gap, var(--spacing-5xs)) var(--spacing-3xs);
    width: 100%;
    min-width: 0;
  }

  .doorway-card__blocks > .shopify-block {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .doorway-card__blocks > .accordion {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .doorway-card__blocks > .shopify-block:first-child {
    grid-column: 1;
  }

  /* The design styles the card label as Body 2XL (regular, 1.3), but the label is a
     heading block and those only offer the title scale. title-sm already lands on the
     right size at both breakpoints, so only weight and line-height need re-pointing. */
  .doorway-card .heading {
    font-weight: var(--font-body-2xl-weight);
    line-height: var(--font-body-2xl-line-height);
  }

  .doorway-card__arrow {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: 20px;
    height: 20px;
    color: var(--color-foreground);
    opacity: 1;
    transition: opacity var(--doorway-card-fade);
  }

  .doorway-card__arrow svg {
    display: block;
    width: 100%;
    height: auto;
  }

  @media screen and (min-width: 750px) {
    .doorway-card {
      --doorway-card-radius: 12px;
      --doorway-card-height: 320px;
    }

    .doorway-card--linked .doorway-card__arrow {
      opacity: 0;
    }

    .doorway-card--linked:hover .doorway-card__arrow,
    .doorway-card--linked:focus-visible .doorway-card__arrow {
      opacity: 1;
    }
  }

  @media screen and (hover: hover) and (min-width: 750px) {
    .doorway-card:hover::before,
    .doorway-card:focus-visible::before {
      opacity: 1;
    }

    .doorway-card--has-hover-image:hover .doorway-card__image--hover,
    .doorway-card--has-hover-image:focus-visible .doorway-card__image--hover {
      opacity: 1;
    }

    .doorway-card--has-hover-image:hover .doorway-card__image--default,
    .doorway-card--has-hover-image:focus-visible .doorway-card__image--default {
      opacity: 0;
    }

    .doorway-card--has-hover-image .doorway-card__image--default {
      transition: opacity var(--doorway-card-fade);
    }
  }
/* END_SNIPPET:doorway-card */

/* START_SNIPPET:embed (INDEX:207) */
.embed-block {
    display: block;
    width: 100%;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .embed-block--placeholder {
    display: grid;
    place-items: center;
    min-height: 6rem;
    border: 1px dashed var(--border-primary, currentcolor);
    text-align: center;
  }

  .embed-block__media {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .embed-block--ratio .embed-block__media {
    aspect-ratio: var(--embed-aspect-ratio, 16 / 9);
  }

  .embed-block__media iframe,
  .embed-block__media video,
  .embed-block__media embed,
  .embed-block__media object {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
  }

  .embed-block--ratio .embed-block__media iframe,
  .embed-block--ratio .embed-block__media video,
  .embed-block--ratio .embed-block__media embed,
  .embed-block--ratio .embed-block__media object {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .embed-block__media img {
    display: block;
    max-width: 100%;
    height: auto;
  }
/* END_SNIPPET:embed */

/* START_SNIPPET:filter-bar (INDEX:211) */
.filter-bar {
    --filter-bar-switch-width: 34px;
    --filter-bar-switch-travel: 14px;
    --filter-bar-switch-thumb: 14px;
    --filter-bar-divider-size: var(--size-5);

    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--filter-bar-gap, var(--spacing-xs));
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    padding-block-start: var(--filter-bar-padding-block-start-mobile, var(--filter-bar-padding-block-start));
    padding-block-end: var(--filter-bar-padding-block-end-mobile, var(--filter-bar-padding-block-end));
    color: var(--text-primary);
  }

  .filter-bar__start {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    align-items: center;
    min-width: 0;
  }

  .filter-bar__end {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    align-items: center;
    min-width: 0;
  }

  .filter-bar__filter-by {
    --button-padding-x: var(--spacing-2xs);
    flex-shrink: 0;
    font-feature-settings: var(--font-feature-settings);
  }

  .filter-bar .filter-bar__filter-by--desktop {
    display: none;
  }

  .filter-bar__count {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-body--family);
    font-style: var(--font-body--style);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-body-md-weight);
    line-height: var(--font-body-md-line-height);
    letter-spacing: var(--font-body-md-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .filter-bar__detailed {
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--spacing-3xs);
    align-items: center;
    cursor: pointer;
  }

  .filter-bar__detailed-label {
    color: var(--text-primary);
    white-space: nowrap;
  }

  .filter-bar__switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .filter-bar__switch {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: var(--filter-bar-switch-width);
    height: var(--size-5);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    transition: background-color 150ms ease;
  }

  .filter-bar__switch::after {
    position: absolute;
    top: var(--spacing-6xs);
    left: var(--spacing-6xs);
    width: var(--filter-bar-switch-thumb);
    height: var(--filter-bar-switch-thumb);
    border-radius: var(--radius-full);
    background-color: var(--surface-invert);
    content: '';
    transition:
      transform 150ms ease,
      background-color 150ms ease;
  }

  .filter-bar__switch-input:checked + .filter-bar__switch {
    background-color: var(--surface-invert);
  }

  .filter-bar__switch-input:checked + .filter-bar__switch::after {
    background-color: var(--surface-primary);
    transform: translateX(var(--filter-bar-switch-travel));
  }

  .filter-bar__switch-input:focus-visible + .filter-bar__switch {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-bar__divider {
    flex-shrink: 0;
    width: 1px;
    height: var(--filter-bar-divider-size);
    background-color: var(--border-secondary);
  }

  .filter-bar__divider--sort {
    display: none;
  }

  .filter-bar__sort {
    display: none;
    flex-shrink: 0;
    gap: var(--spacing-3xs);
    align-items: center;
    color: var(--text-primary);
  }

  .filter-bar__sort-label {
    position: relative;
    display: inline-flex;
    gap: var(--spacing-3xs);
    align-items: center;
    cursor: pointer;
  }

  .filter-bar__sort-text {
    display: inline-flex;
    gap: var(--spacing-5xs);
    align-items: center;
  }

  .filter-bar__sort-prefix {
    color: var(--text-secondary);
  }

  .filter-bar__sort-value {
    color: var(--text-primary);
  }

  .filter-bar__sort-select {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
  }

  .filter-bar__sort-label:has(.filter-bar__sort-select:focus-visible) {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
  }

  .filter-bar__sort-submit {
    font-family: inherit;
    font-size: var(--font-body-sm-size);
    cursor: pointer;
  }

  .filter-bar__sort-icon {
    display: block;
    flex-shrink: 0;
    color: var(--text-primary);
    pointer-events: none;
  }

  .filter-bar [data-filter-drawer-open] {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .filter-bar {
      --filter-bar-switch-width: var(--size-10);
      --filter-bar-switch-travel: var(--size-5);
      --filter-bar-divider-size: 18px;

      flex-wrap: wrap;
      padding-block-start: var(--filter-bar-padding-block-start);
      padding-block-end: var(--filter-bar-padding-block-end);
    }

    .filter-bar__start {
      gap: var(--spacing-2xs);
    }

    .filter-bar__filter-by {
      --button-padding-x: var(--spacing-xl);
    }

    .filter-bar .filter-bar__filter-by--mobile {
      display: none;
    }

    .filter-bar .filter-bar__filter-by--desktop {
      display: inline-flex;
    }

    .filter-bar__divider--clusters {
      display: none;
    }

    .filter-bar__divider--sort {
      display: block;
    }

    .filter-bar__sort {
      display: inline-flex;
    }
  }

  @media screen and (min-width: 768px) {
    .filter-bar__count {
      font-size: var(--font-body-sm-size);
      font-weight: var(--font-body-sm-weight);
      line-height: var(--font-body-sm-line-height);
      letter-spacing: var(--font-body-sm-letter-spacing);
    }
  }
/* END_SNIPPET:filter-bar */

/* START_SNIPPET:filter-drawer-form (INDEX:213) */
.filter-drawer__form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .filter-drawer__form-el {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    margin: 0;
  }

  .filter-drawer__applied {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    padding-block-end: var(--spacing-xs);
  }

  .filter-drawer__applied-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
  }

  .filter-drawer__applied-label {
    margin: 0;
    color: var(--text-secondary);
  }

  .filter-drawer__clear-all {
    flex-shrink: 0;
    color: var(--text-brand);
    text-decoration: underline;
    text-underline-offset: 0.12em;
  }

  .filter-drawer__clear-all:hover,
  .filter-drawer__clear-all:focus-visible {
    color: var(--text-brand-muted);
  }

  .filter-drawer__clear-all:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-drawer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .filter-drawer__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-5xs);
    padding: var(--spacing-3xs) var(--spacing-2xs) var(--spacing-3xs) var(--spacing-xs);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
  }

  .filter-drawer__pill:hover,
  .filter-drawer__pill:focus-visible {
    background-color: var(--surface-brand-light);
  }

  .filter-drawer__pill:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-drawer__pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-3, 12px);
    height: var(--size-3, 12px);
    color: var(--text-primary);
  }

  .filter-drawer__pill-remove .icon {
    display: block;
    width: var(--size-3, 12px);
    height: var(--size-3, 12px);
  }

  .filter-drawer__facets {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .filter-drawer__footer {
    --filter-drawer-footer-button-height: 36px;

    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--surface-primary);
    box-shadow: 0 -2px 10px rgb(0 0 0 / 0.04);
  }

  .filter-drawer__apply,
  .filter-drawer__clear {
    flex: 1 1 0;
    min-width: 0;
    --button-height: var(--filter-drawer-footer-button-height);
    min-height: var(--filter-drawer-footer-button-height);
  }

  @media screen and (min-width: 750px) {
    .filter-drawer__footer {
      padding: var(--spacing-xs) var(--spacing-lg);
    }
  }

  .filter-drawer__form .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SNIPPET:filter-drawer-form */

/* START_SNIPPET:filter-facet (INDEX:214) */
.filter-facet {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-block-end: 1px solid var(--border-secondary);
    background-color: transparent;
    color: var(--text-primary);
    interpolate-size: allow-keywords;
  }

  .filter-facet__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    width: 100%;
    min-height: var(--size-6, 24px);
    /* Figma spaces the row 16px off the divider below it, and the open panel
       picks up the same gap from here rather than its own top padding. */
    padding-block: 0 var(--spacing-xs);
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .filter-facet__summary::-webkit-details-marker {
    display: none;
  }

  .filter-facet__summary::marker {
    content: '';
  }

  .filter-facet__summary:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-facet__label {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
  }

  .filter-facet__icons {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--size-6, 24px);
    height: var(--size-6, 24px);
    padding: 0;
    color: var(--text-primary);
  }

  .filter-facet__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1 / 1;
    width: var(--size-6, 24px);
    height: var(--size-6, 24px);
    transition: opacity 320ms ease;
  }

  .filter-facet__icon .icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .filter-facet__icon--plus {
    opacity: 1;
  }

  .filter-facet__icon--minus {
    opacity: 0;
  }

  .filter-facet[open] .filter-facet__icon--plus {
    opacity: 0;
  }

  .filter-facet[open] .filter-facet__icon--minus {
    opacity: 1;
  }

  .filter-facet::details-content {
    height: 0;
    overflow: hidden;
    transition:
      height 520ms cubic-bezier(0.22, 1, 0.36, 1),
      content-visibility 520ms allow-discrete;
  }

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

  .filter-facet__panel {
    min-height: 0;
    padding-block-end: var(--spacing-xs);
  }

  .filter-facet__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .filter-facet__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-height: var(--size-5, 20px);
    cursor: pointer;
  }

  .filter-facet__option--disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .filter-facet__check {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--size-5, 20px);
    height: var(--size-5, 20px);
    padding: var(--spacing-6xs, 2px);
    overflow: hidden;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xs, 2px);
    background-color: var(--surface-primary);
    color: var(--text-invert);
  }

  .filter-facet__tick {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Local fallback for the shared .checkbox hover tick, in case the
     style-guide snippet is cached behind this bundled stylesheet. */
  .filter-facet__option:hover:not(.filter-facet__option--disabled) .filter-facet__check:not(.filter-facet__check--radio) .filter-facet__tick {
    opacity: 1;
    color: var(--checkbox-tick-hover, var(--border-primary));
  }

  /* Radios opt out of the shared checkbox hover, so hide the tick until checked. */
  .filter-facet__check--radio .filter-facet__tick {
    opacity: 0;
  }

  .filter-facet__input:checked + .filter-facet__check {
    border-color: var(--surface-invert);
    background-color: var(--surface-invert);
  }

  /* Sort is single-select, so the same tick sits in a circle to read apart
     from the multi-select facets. Figma has no open state for this group. */
  .filter-facet__check--radio {
    border-radius: var(--radius-full);
  }

  .filter-facet__input:checked + .filter-facet__check .filter-facet__tick {
    opacity: 1;
  }

  .filter-facet__input:focus-visible + .filter-facet__check {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-facet__option-text {
    color: var(--text-secondary);
  }

  .filter-facet__count {
    margin-inline-start: 0.15em;
  }

  .filter-facet__rooms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .filter-facet__room {
    display: flex;
    cursor: pointer;
  }

  .filter-facet__room--disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .filter-facet__room-face {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: var(--size-10, 40px);
    height: var(--size-10, 40px);
    padding-inline: var(--spacing-3xs);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    white-space: nowrap;
  }

  .filter-facet__room-face--compact {
    width: var(--size-10, 40px);
    min-width: var(--size-10, 40px);
    padding-inline: 0;
  }

  .filter-facet__room-input:checked + .filter-facet__room-face {
    border-color: var(--surface-invert);
    background-color: var(--surface-invert);
    color: var(--text-invert);
  }

  .filter-facet__room-input:focus-visible + .filter-facet__room-face {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-facet__price-slider {
    --price-from: 0%;
    --price-to: 100%;
    --price-thumb-size: var(--size-3, 12px);
    --price-track-height: 3px;
    --price-track-active-height: 3px;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .filter-facet__price-labels {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-xs);
  }

  .filter-facet__price-value {
    color: var(--text-secondary);
  }

  .filter-facet__price-scale {
    position: relative;
    height: var(--price-thumb-size);
  }

  .filter-facet__price-track {
    position: absolute;
    right: calc(var(--price-thumb-size) / 2);
    left: calc(var(--price-thumb-size) / 2);
    top: 50%;
    height: var(--price-track-height);
    transform: translateY(-50%);
    border-radius: var(--radius-2xs, 2px);
    background-color: color-mix(in srgb, var(--surface-invert) 30%, transparent);
    pointer-events: none;
  }

  .filter-facet__price-track::after {
    position: absolute;
    top: 50%;
    left: var(--price-from);
    width: calc(var(--price-to) - var(--price-from));
    height: var(--price-track-active-height);
    transform: translateY(-50%);
    border-radius: var(--radius-2xs, 2px);
    background-color: var(--surface-invert);
    content: '';
  }

  .filter-facet__price-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--price-thumb-size);
    margin: 0;
    padding: 0;
    background: none;
    pointer-events: none;
    appearance: none;
  }

  .filter-facet__price-thumb::-webkit-slider-runnable-track {
    height: var(--price-track-height);
    background: transparent;
    border: 0;
  }

  .filter-facet__price-thumb::-moz-range-track {
    height: var(--price-track-height);
    background: transparent;
    border: 0;
  }

  .filter-facet__price-thumb::-webkit-slider-thumb {
    position: relative;
    z-index: 1;
    width: var(--price-thumb-size);
    height: var(--price-thumb-size);
    margin-block-start: calc((var(--price-track-height) - var(--price-thumb-size)) / 2);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-invert);
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
  }

  /* Firefox ignores position and z-index on the thumb, so stacking is set on the inputs in JS */
  .filter-facet__price-thumb::-moz-range-thumb {
    width: var(--price-thumb-size);
    height: var(--price-thumb-size);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-invert);
    pointer-events: auto;
    appearance: none;
    cursor: pointer;
  }

  .filter-facet__price-thumb:focus-visible {
    outline: none;
  }

  .filter-facet__price-thumb:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .filter-facet__price-thumb:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

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

  @media screen and (min-width: 750px) {
    /* The filter bar owns sort from 750px. The radios stay in the DOM so the
       active key still posts with the form when facets change. */
    .filter-facet--sort {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .filter-facet__icon,
    .filter-facet::details-content {
      transition: none;
    }
  }
/* END_SNIPPET:filter-facet */

/* START_SNIPPET:free-gift-message (INDEX:220) */
.free-gift-message {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    color: var(--text-primary);
  }

  .free-gift-message__callout {
    display: flex;
    gap: var(--spacing-4xs);
    align-items: flex-start;
    width: 100%;
    padding: var(--spacing-xs);
    border-radius: var(--radius-lg);
    background-color: var(--surface-brand-light);
  }

  .free-gift-message__icon {
    display: flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background-color: var(--border-brand-light);
    color: var(--text-primary);
  }

  .free-gift-message__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-5xs);
    min-width: 0;
  }

  .free-gift-message__message,
  .free-gift-message__note {
    margin: 0;
  }

  .free-gift-message--editor {
    color: var(--text-secondary);
  }
/* END_SNIPPET:free-gift-message */

/* START_SNIPPET:header-ad-card (INDEX:232) */
.header-ad-card {
    position: relative;
    display: block;
    min-height: 180px;
    overflow: hidden;
    border-radius: var(--radius-md, 12px);
    color: var(--text-invert, white);
    text-decoration: none;
  }

  .header-ad-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
  }

  .header-ad-card__image--hover {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
  }

  .header-ad-card__overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--text-primary) 65%, transparent),
      transparent 70%
    );
  }

  .header-ad-card__content {
    position: absolute;
    z-index: 2;
    inset: auto var(--spacing-sm, 20px) var(--spacing-sm, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs, 8px);
  }

  .header-ad-card__title {
    font-family: var(--font-heading--family);
    font-size: var(--font-title-sm-size);
    line-height: var(--font-title-sm-line-height);
  }

  .header-ad-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3xs, 8px);
    font-size: var(--font-body-sm-size);
  }

  .header-ad-card__arrow {
    position: absolute;
    z-index: 2;
    inset: auto var(--spacing-2xs, 12px) var(--spacing-2xs, 12px) auto;
    display: flex;
  }

  .header-ad-card--desktop-mega {
    --header-ad-card-title-size: 15px;

    height: 219px;
    min-height: 0;
  }

  .header-ad-card--desktop-mega .header-ad-card__content {
    inset: auto var(--spacing-2xl, 48px) var(--spacing-sm, 20px) var(--spacing-sm, 20px);
    gap: var(--spacing-5xs, 4px);
  }

  .header-ad-card--desktop-mega .header-ad-card__title {
    font-family: var(--font-body--family);
    font-size: var(--header-ad-card-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-xl-line-height);
  }

  .header-ad-card--desktop-mega .header-ad-card__cta {
    display: block;
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
  }

  .header-ad-card--mobile-menu {
    height: 300px;
    min-height: 0;
    border-radius: var(--radius-md, 8px);
  }

  .header-ad-card--mobile-menu .header-ad-card__content {
    inset: auto var(--spacing-2xl, 48px) var(--spacing-sm, 20px) var(--spacing-sm, 20px);
    gap: var(--spacing-5xs, 4px);
  }

  .header-ad-card--mobile-menu .header-ad-card__title {
    font-family: var(--font-body--family);
    font-size: var(--font-body-xl-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-xl-line-height);
  }

  .header-ad-card--mobile-menu .header-ad-card__cta {
    display: block;
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
  }

  .header-ad-card--mobile-menu .header-ad-card__arrow .icon {
    width: 28px;
    height: 28px;
  }

  .header-ad-card--mobile-root {
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary);
    color: var(--text-primary);
  }

  /* The 335x140 card matches these creatives' own ratio, so the base full-bleed
     image lands whole instead of as a cropped slice. Creatives carry the subject
     on the trailing side and leave the leading side clear for the copy. */

  .header-ad-card--mobile-root .header-ad-card__overlay {
    display: none;
  }

  .header-ad-card--mobile-root .header-ad-card__content {
    inset: 50% auto auto var(--spacing-sm, 20px);
    width: calc(100% - 130px);
    gap: var(--spacing-2xs, 12px);
    transform: translateY(-50%);
  }

  .header-ad-card--mobile-root .header-ad-card__title {
    max-width: 10.75rem;
    font-family: var(--font-body--family);
    font-size: var(--font-body-sm-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-sm-line-height);
  }

  .header-ad-card--mobile-root .header-ad-card__cta {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--spacing-4xs, 6px);
    min-height: 32px;
    padding: var(--spacing-3xs, 8px) var(--spacing-xs, 16px);
    border-radius: var(--radius-full, 360px);
    background: var(--surface-brand-dark);
    color: var(--text-invert);
    font-size: var(--font-button-sm-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-button-sm-line-height);
  }

  .header-ad-card--mobile-root .header-ad-card__cta .icon {
    width: 16px;
    height: 16px;
  }

  .header-ad-card:not(.header-ad-card--has-hover):hover .header-ad-card__image {
    transform: scale(1.025);
  }

  @media screen and (hover: hover) {
    .header-ad-card--has-hover .header-ad-card__image--default,
    .header-ad-card--has-hover .header-ad-card__image--hover {
      transition: opacity 250ms ease;
    }

    .header-ad-card--has-hover:hover .header-ad-card__image--hover,
    .header-ad-card--has-hover:focus-visible .header-ad-card__image--hover {
      opacity: 1;
    }

    .header-ad-card--has-hover:hover .header-ad-card__image--default,
    .header-ad-card--has-hover:focus-visible .header-ad-card__image--default {
      opacity: 0;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .header-ad-card__image,
    .header-ad-card--has-hover .header-ad-card__image--default,
    .header-ad-card--has-hover .header-ad-card__image--hover {
      transition: none;
    }
  }

  .header-ad-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }
/* END_SNIPPET:header-ad-card */

/* START_SNIPPET:header-logo (INDEX:234) */
.header-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    height: 28px;
    color: inherit;
    text-decoration: none;
  }

  .header-logo__image {
    display: block;
    width: auto;
    height: 28px;
    /* Swaps with the header's tone, so it must not cross-fade: mid-fade both
       logos sit at half opacity and the inverse one disappears into a surface
       that has not finished changing. */
    transition: opacity var(--header-tone-duration, 0ms);
  }

  .header-logo__image--primary {
    opacity: var(--header-logo-primary-opacity, 1);
  }

  .header-logo__image--inverse {
    position: absolute;
    inset: 0 auto auto 0;
    opacity: var(--header-logo-inverse-opacity, 0);
  }

  .header-logo__text {
    font-family: var(--font-heading--family);
    font-size: var(--font-title-md-size);
    font-weight: var(--font-weight-bold);
  }
/* END_SNIPPET:header-logo */

/* START_SNIPPET:header-mega-panel (INDEX:235) */
/* The nav item is deliberately `position: static`, so this resolves against
     `.header`, which `.section--full-width` already caps at the page width and
     centres. Stretching to both its edges therefore lines the panel up with the
     header without a percentage width or a translate to undo. */
  .header-mega {
    /* One column of links, which both panel widths below are measured from. */
    --header-mega-link-column: 293px;

    position: absolute;
    inset: 100% 0 auto;
    z-index: 3;
    padding: var(--spacing-xl, 40px) var(--section-padding-inline);
    border-block-end: 1px solid var(--header-border-color);
    border-radius: 0 0 var(--radius-xl, 24px) var(--radius-xl, 24px);
    background: var(--surface-primary);
    color: var(--text-primary);
    box-shadow: 0 16px 30px color-mix(in srgb, var(--text-primary) 14%, transparent);
  }

  @keyframes header-mega-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* The panel carries the header's surface, so it must not fade as a whole: a
     translucent white shows the hero through it and reads as a different colour
     from the header above. The surface lands with the header and only the
     contents ease in. */
  .header-mega__inner {
    width: 100%;
    animation: header-mega-in var(--header-surface-duration, 300ms) var(--header-surface-easing, ease);
  }

  .header-mega__inner--with-cards {
    display: grid;
    grid-template-columns: minmax(220px, calc(var(--header-mega-link-column) * var(--header-mega-link-columns, 1))) minmax(0, 890px);
    gap: 0;
  }

  .header-mega__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md, 24px);
  }

  .header-mega__list,
  .header-mega__sublist {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header-mega__sublist {
    gap: var(--spacing-3xs, 8px);
    padding-block-start: var(--spacing-3xs, 8px);
    padding-inline-start: var(--spacing-xs, 16px);
  }

  /* Past five links a second column starts. The row count is capped at two
     columns' worth by Liquid, so the list can never grow a third column and
     push the promo cards out of the panel. */
  .header-mega__list--split {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--header-mega-link-rows, 5), auto);
    grid-auto-columns: var(--header-mega-link-column);
    column-gap: 0;
  }

  .header-mega__link,
  .header-mega__sublink {
    color: inherit;
    text-decoration: none;
  }

  .header-mega__link {
    /* Figma's Menulink component moves between the two text tones rather than
       fading, so each level names the tone it is not currently using. */
    --header-mega-link-hover-color: var(--text-secondary);

    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-medium);
    transition: color 150ms var(--header-surface-easing, ease);
  }

  .header-mega__sublink {
    --header-mega-link-hover-color: var(--text-primary);

    color: var(--text-secondary);
    font-size: var(--font-body-sm-size);
    transition: color 150ms var(--header-surface-easing, ease);
  }

  .header-mega__link:focus-visible,
  .header-mega__sublink:focus-visible {
    color: var(--header-mega-link-hover-color);
  }

  .header-mega__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm, 20px);
    width: 100%;
    max-width: 890px;
  }

  .header-mega--condensed {
    inset: 100% auto auto calc(var(--spacing-xl, 40px) * -1);
    box-sizing: border-box;
    /* Figma's width for one column, widened by each column the links spill into. */
    width: calc(332px + var(--header-mega-link-column) * (var(--header-mega-link-columns, 1) - 1));
    padding: var(--spacing-xl, 40px) 0 var(--spacing-xl, 40px) var(--spacing-xl, 40px);
  }

  /* Real hover only, so a tap cannot leave a link stuck on its hover tone. */
  @media screen and (hover: hover) {
    .header-mega__link:hover,
    .header-mega__sublink:hover {
      color: var(--header-mega-link-hover-color);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .header-mega__inner {
      animation: none;
    }

    .header-mega__link,
    .header-mega__sublink {
      transition: none;
    }
  }
/* END_SNIPPET:header-mega-panel */

/* START_SNIPPET:header-mobile-menu (INDEX:237) */
/* The bar travels with the panel, so the whole thing is one fixed layer that
     starts off-canvas. The drawer is always in the DOM, hence transitioning an
     attribute rather than animating on reveal. */
  .header-mobile-menu {
    position: fixed;
    inset: 0;
    /* Above the header chrome that shares this stacking context, notably the
       cart count badge, which lifts itself over its own icon. */
    z-index: 4;
    display: flex;
    flex-direction: column;
    background: var(--surface-primary);
    color: var(--text-primary);
    transform: translateX(-100%);
    transition: transform 250ms ease-out;
    /* The panel is opaque white, so the header's translucent search fill would
       vanish into it. */
    --header-search-surface: var(--surface-secondary);
  }

  /* The flex display above would otherwise beat the browser's own [hidden]
     rule, leaving the closed panel focusable off-canvas. */
  .header-mobile-menu[hidden] {
    display: none;
  }

  .header-mobile-menu[data-open] {
    transform: translateX(0);
  }

  .header-mobile-menu__bar {
    flex: 0 0 auto;
    padding: var(--spacing-2xs, 12px) var(--spacing-sm, 20px);
  }

  .header-mobile-menu__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 44px;
    margin-block-end: var(--spacing-sm, 20px);
  }

  .header-mobile-menu__close {
    justify-self: start;
  }

  .header-mobile-menu__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Figma leaves 24px between the search field and whatever follows it, on both
     the root list and a submenu's back row. The bar contributes 12px of that. */
  .header-mobile-menu__root,
  .header-mobile-menu__page {
    min-height: 100%;
    padding-block-start: var(--spacing-2xs, 12px);
    padding-inline: var(--spacing-sm, 20px);
    padding-block-end: var(--spacing-xl, 40px);
  }

  .header-mobile-menu__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .header-mobile-menu__item {
    margin: 0;
  }

  .header-mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 36px;
    padding: var(--spacing-5xs, 4px) 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
  }

  .header-mobile-menu__utilities {
    margin: var(--spacing-xs, 16px) calc(-1 * var(--spacing-sm, 20px))
      calc(-1 * var(--spacing-xl, 40px));
    padding: var(--spacing-sm, 20px);
    background: var(--surface-light-grey, var(--surface-secondary));
  }

  .header-mobile-menu__utilities .header-mobile-menu__links {
    margin: 0;
  }

  .header-mobile-menu__locale {
    margin-block-start: var(--spacing-xs, 16px);
  }

  .header-mobile-menu__page-heading {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xs, 8px);
    width: calc(100% + (var(--spacing-sm, 20px) * 2));
    min-height: 44px;
    margin-inline: calc(-1 * var(--spacing-sm, 20px));
    padding: var(--spacing-3xs, 8px) var(--spacing-sm, 20px);
    border: 0;
    background: var(--surface-light-grey, var(--surface-secondary));
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .header-mobile-menu__page > .header-mobile-menu__links {
    gap: var(--spacing-md, 24px);
    margin-block-start: var(--spacing-md, 24px);
  }

  .header-mobile-menu__page > .header-mobile-menu__links .header-mobile-menu__link {
    min-height: 18px;
    padding: 0;
    font-weight: var(--font-weight-regular);
    line-height: 1.3;
  }

  .header-mobile-menu__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .header-mobile-menu__sublinks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 16px);
    margin: 0;
    padding: var(--spacing-3xs, 8px) 0 var(--spacing-xs, 16px) var(--spacing-xs, 16px);
    list-style: none;
  }

  .header-mobile-menu__sublink {
    color: inherit;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
  }

  .header-mobile-menu__shop-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3xs, 8px);
    width: 100%;
    min-height: 40px;
    margin-block-start: var(--spacing-md, 24px);
    padding: var(--spacing-3xs, 8px) var(--spacing-xs, 16px);
    border-radius: var(--radius-full, 360px);
    background: var(--surface-brand-dark);
    color: var(--text-invert);
    font-size: var(--font-button-sm-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-button-sm-line-height);
    text-decoration: none;
  }

  .header-mobile-menu__cards {
    display: grid;
    gap: var(--spacing-sm, 20px);
    margin-block-start: var(--spacing-sm, 20px);
  }

  .header-ad-card--mobile-root {
    /* 335x140 in the design; kept as a ratio so the creative fills wider
       viewports without being cropped. */
    aspect-ratio: 335 / 140;
    min-height: 0;
    margin-block-start: var(--spacing-xs, 16px);
  }

  @media (prefers-reduced-motion: reduce) {
    .header-mobile-menu {
      transition: none;
    }
  }

  @media screen and (min-width: 990px) {
    .header-mobile-menu {
      display: none;
    }
  }
/* END_SNIPPET:header-mobile-menu */

/* START_SNIPPET:header-search (INDEX:238) */
.predictive-search {
    --predictive-search-collection-width: 236px;
    --predictive-search-collection-height: 342px;

    position: static;
    display: block;
    width: 100%;
  }

  .predictive-search [hidden] {
    display: none;
  }

  .header-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xs, 8px);
    width: 100%;
    min-height: 40px;
    padding: 0 var(--spacing-xs, 16px);
    /* The field is fill-only in the design, on both the transparent and the
       solid header, so there is deliberately no border here. */
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: var(--header-search-surface);
    color: inherit;
    backdrop-filter: blur(25px);
    /* Carries the header's tone, so it changes with it rather than easing
       behind placeholder text that has already switched colour. */
    transition: background-color var(--header-tone-duration, 0ms);
  }

  .header-search > input[type='hidden'] {
    display: none;
  }

  .header-search__field {
    display: flex;
    align-items: center;
    gap: var(--spacing-3xs, 8px);
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-search__icon {
    --header-search-spinner-size: 18px;
    --header-search-spinner-stroke: 2px;

    position: relative;
    display: flex;
    flex: 0 0 auto;
  }

  /* While suggestions are being fetched the magnifier gives way to a ring, so
     the wait reads as "searching" rather than the field doing nothing. */
  .header-search__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--header-search-spinner-size);
    height: var(--header-search-spinner-size);
    margin: auto;
    border: var(--header-search-spinner-stroke) solid currentColor;
    border-inline-end-color: transparent;
    border-radius: var(--radius-full, 999px);
    opacity: 0;
  }

  .predictive-search[aria-busy='true'] .header-search__icon .icon {
    visibility: hidden;
  }

  .predictive-search[aria-busy='true'] .header-search__icon::after {
    opacity: 1;
    animation: header-search-spin 0.7s linear infinite;
  }

  @keyframes header-search-spin {
    to {
      transform: rotate(1turn);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .predictive-search[aria-busy='true'] .header-search__icon .icon {
      visibility: visible;
    }

    .predictive-search[aria-busy='true'] .header-search__icon::after {
      opacity: 0;
      animation: none;
    }
  }

  .header-search__input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: var(--font-body--family);
    /* 16px on mobile so iOS does not zoom the page when the field is focused. */
    font-size: var(--font-body-2xl-size);
    appearance: none;
  }

  .header-search__input::-webkit-search-cancel-button,
  .header-search__input::-webkit-search-decoration {
    display: none;
    appearance: none;
  }

  .header-search__input::placeholder {
    color: currentColor;
    opacity: 0.7;
  }

  /* The design carries no focus ring on this field, on either header state, so
     there is deliberately no rule here. The caret is the focus indicator; a
     ring on :focus-visible is not an alternative, as text inputs match that on
     click too, which is the ring the design review asked to remove. */

  .header-search__clear,
  .header-search__close {
    flex: 0 0 auto;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .header-search__clear {
    font-family: var(--font-body--family);
    font-size: var(--font-body-sm-size);
    text-decoration: underline;
  }

  .header-search__close {
    width: 23px;
    height: 23px;
    min-width: 23px;
    min-height: 23px;
  }

  .header-search__close .icon {
    display: block;
    width: 23px;
    height: 23px;
  }

  .predictive-search[data-open] .header-search__close,
  .predictive-search[data-open][data-has-query] .header-search__clear {
    display: inline-flex;
  }

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

  .predictive-search[data-view='results'] .predictive-search__empty,
  .predictive-search[data-view='results'] .predictive-search__no-results,
  .predictive-search[data-view='popular'] .predictive-search__results,
  .predictive-search[data-view='popular'] .predictive-search__no-results,
  .predictive-search[data-view='no-results'] .predictive-search__empty,
  .predictive-search[data-view='no-results'] .predictive-search__results {
    display: none;
  }

  .predictive-search__backdrop {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 2;
    height: 100vh;
    background: color-mix(in srgb, var(--text-primary) 40%, transparent);
  }

  .predictive-search__panel {
    position: absolute;
    inset: calc(100% - 1px) 0 auto;
    z-index: 3;
    max-height: min(70vh, 32rem);
    overflow: auto;
    padding: var(--spacing-xl, 40px) var(--section-padding-inline);
    border-radius: 0 0 var(--radius-xl, 24px) var(--radius-xl, 24px);
    background: var(--header-overlay-surface, var(--surface-primary));
    color: var(--text-primary);
    box-shadow: 0 28px 40px -24px color-mix(in srgb, var(--text-primary) 20%, transparent);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .predictive-search__panel::-webkit-scrollbar {
    display: none;
  }

  .predictive-search__inner,
  .predictive-search__results-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl, 40px);
  }

  .predictive-search__rail,
  .predictive-search__empty {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl, 40px);
    min-width: 0;
  }

  .predictive-search__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
  }

  .predictive-search__heading {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
  }

  .predictive-search__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .predictive-search__link {
    color: var(--text-primary);
    font-size: var(--font-body-md-size);
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .predictive-search__link:hover,
  .predictive-search__link:focus-visible {
    color: var(--text-secondary);
  }

  .predictive-search__link .highlight,
  .predictive-search__link mark,
  .predictive-search-product__title .highlight,
  .predictive-search-product__title mark {
    display: inline;
    font-weight: inherit;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
    border-radius: 0;
  }

  .predictive-search-product__title .highlight,
  .predictive-search-product__title mark {
    color: var(--text-primary);
  }

  .predictive-search[data-view='results'] .predictive-search__link {
    color: var(--text-secondary);
  }

  .predictive-search[data-view='results'] .predictive-search__link .highlight,
  .predictive-search[data-view='results'] .predictive-search__link mark {
    color: var(--text-primary);
  }

  .predictive-search[data-view='results'] .predictive-search__link:hover,
  .predictive-search[data-view='results'] .predictive-search__link:focus-visible,
  .predictive-search[data-view='results'] .predictive-search__link:hover .highlight,
  .predictive-search[data-view='results'] .predictive-search__link:hover mark,
  .predictive-search[data-view='results'] .predictive-search__link:focus-visible .highlight,
  .predictive-search[data-view='results'] .predictive-search__link:focus-visible mark {
    color: var(--text-secondary);
  }

  .predictive-search__link[aria-selected='true'],
  .predictive-search-product[aria-selected='true'],
  .predictive-search-collection[aria-selected='true'],
  .predictive-search__view-all[aria-selected='true'],
  .predictive-search__view-all-button[aria-selected='true'] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .predictive-search__rail,
  .predictive-search__products {
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .predictive-search__rail::-webkit-scrollbar,
  .predictive-search__products::-webkit-scrollbar {
    display: none;
  }

  .predictive-search__products {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
  }

  .predictive-search__products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm, 20px);
  }

  .predictive-search__view-all {
    flex-shrink: 0;
  }

  .predictive-search__view-all-bar {
    display: none;
  }

  .predictive-search__product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm, 20px);
    min-width: 0;
  }

  .predictive-search__empty-message {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-body-md-size);
  }

  .predictive-search__no-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl, 40px);
    min-width: 0;
  }

  .predictive-search__no-results-copy-col,
  .predictive-search__no-results-collections {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing-md, 24px);
    min-width: 0;
  }

  .predictive-search__no-results-copy-col {
    flex: 0 0 auto;
    align-self: start;
  }

  .predictive-search__no-results-copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 20px);
    color: var(--text-primary);
    font-size: var(--font-body-md-size);
    line-height: 1.4;
  }

  .predictive-search__no-results-line {
    margin: 0;
  }

  .predictive-search__no-results-copy strong {
    font-weight: var(--font-weight-semibold, 600);
  }

  .predictive-search__collection-grid {
    display: flex;
    gap: var(--spacing-sm, 20px);
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .predictive-search__collection-grid::-webkit-scrollbar {
    display: none;
  }

  .predictive-search-collection {
    --predictive-search-collection-scrim: rgb(0 0 0 / 0.6);

    position: relative;
    display: block;
    flex: 1 0 180px;
    min-width: 180px;
    height: 240px;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: var(--surface-secondary);
    color: var(--text-invert);
    text-decoration: none;
  }

  .predictive-search-collection__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
  }

  .predictive-search-collection__content {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs, 4px);
    padding: var(--spacing-xl, 40px) var(--spacing-2xl, 48px) var(--spacing-sm, 20px) var(--spacing-sm, 20px);
    background: linear-gradient(to bottom, transparent, var(--predictive-search-collection-scrim));
    backdrop-filter: blur(3px);
    color: var(--text-invert);
  }

  .predictive-search-collection__title {
    font-size: var(--font-body-xl-size, 15px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
  }

  .predictive-search-collection__cta {
    font-size: var(--font-body-sm-size, 13px);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.4;
  }

  .predictive-search-collection__arrow {
    position: absolute;
    right: var(--spacing-2xs, 12px);
    bottom: var(--spacing-2xs, 12px);
    display: flex;
    color: var(--text-invert);
  }

  .predictive-search-collection__arrow .icon {
    display: block;
    width: 28px;
    height: 28px;
  }

  .predictive-search__collection-dots {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-5xs, 4px);
  }

  .predictive-search__collection-dot {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: var(--spacing-4xs, 6px);
    height: var(--spacing-4xs, 6px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background-color: var(--text-primary);
    opacity: 0.3;
    cursor: pointer;
  }

  .predictive-search__collection-dot.is-active {
    width: var(--spacing-md, 24px);
    height: var(--spacing-4xs, 6px);
    opacity: 1;
  }

  .predictive-search-product {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xs, 12px);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    width: 100%;
    padding-inline-end: var(--spacing-sm, 20px);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-light-grey, var(--surface-secondary));
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }

  @media screen and (hover: hover) {
    .predictive-search-product:hover,
    .predictive-search-product:focus-visible {
      background-color: var(--surface-secondary);
    }

    .predictive-search-collection:hover .predictive-search-collection__image,
    .predictive-search-collection:focus-visible .predictive-search-collection__image {
      transform: scale(1.04);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .predictive-search-product,
    .predictive-search-collection__image {
      transition: none;
    }
  }

  .predictive-search-product__media {
    flex: 0 0 auto;
    width: 156px;
    height: 156px;
    overflow: hidden;
    /* Only the card's outer edge is rounded; the edge against the text stays straight */
    border-start-start-radius: 12px;
    border-end-start-radius: 12px;
    background: var(--surface-secondary);
  }

  .predictive-search-product__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .predictive-search-product__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-xs, 16px);
    min-width: 0;
  }

  .predictive-search-product__title {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    font-size: var(--font-body-md-size, 13px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-body-md-line-height, 1.4);
  }

  .predictive-search-product__title--formatted {
    font-weight: var(--font-weight-regular, 400);
  }

  .predictive-search-product__title--formatted strong {
    font-weight: var(--font-weight-semibold, 600);
  }

  .predictive-search-product__price {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-body-xl-size, 15px);
    line-height: 1.3;
  }

  .predictive-search-product__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5xs, 4px);
    align-items: center;
    padding-block: var(--spacing-5xs, 4px);
  }

  .predictive-search-product__swatch {
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-full, 999px);
  }

  .predictive-search-product__swatch:first-child {
    border-color: var(--border-primary);
  }

  .predictive-search-product__swatch-fill {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-full, 999px);
    background-color: var(--border-secondary);
    background-position: center;
    background-size: cover;
  }

  /* Figma white swatch stroke (#e5e5e5). Every fill keeps a 1px border so the discs stay the same size. */
  .predictive-search-product__swatch--white .predictive-search-product__swatch-fill {
    --swatch-white-border: #e5e5e5;
    border-color: var(--swatch-white-border);
  }

  /* Sold out keeps its colour and takes a diagonal strike, matching the
     product card and PDP variant picker. */
  .predictive-search-product__swatch--unavailable .predictive-search-product__swatch-fill::after {
    content: '';
    position: absolute;
    inset-block: -25%;
    inset-inline-start: 50%;
    width: 1px;
    background-color: var(--border-primary);
    box-shadow: 0 0 0 1px var(--surface-primary);
    transform: translateX(-50%) rotate(45deg);
  }

  @media screen and (min-width: 990px) {
    .header-search__input {
      font-size: var(--font-body-md-size);
    }

    /* :not([hidden]) keeps these from beating the [hidden] display:none used to close. */
    .predictive-search[data-open][data-view='results'] .predictive-search__panel:not([hidden]),
    .predictive-search[data-open][data-view='no-results'] .predictive-search__panel:not([hidden]),
    .predictive-search[data-open][data-view='popular']:has(.predictive-search__products) .predictive-search__panel:not([hidden]) {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: min(70vh, 32rem);
    }

    .predictive-search[data-view='results'] .predictive-search__inner,
    .predictive-search[data-view='results'] .predictive-search__results:not([hidden]),
    .predictive-search[data-view='no-results'] .predictive-search__inner,
    .predictive-search[data-view='no-results'] .predictive-search__no-results:not([hidden]),
    .predictive-search[data-view='popular']:has(.predictive-search__products) .predictive-search__inner,
    .predictive-search[data-view='popular']:has(.predictive-search__products)
      .predictive-search__empty:not([hidden]):not(.predictive-search__empty--split) {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
    }

    .predictive-search[data-view='results'] .predictive-search__results-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    .predictive-search[data-view='no-results'] .predictive-search__no-results--split:not([hidden]) {
      display: grid;
      grid-template-columns: 293px minmax(0, 1fr);
      align-items: start;
      align-content: start;
      column-gap: var(--spacing-xl, 40px);
    }

    .predictive-search__results-body--split {
      display: grid;
      grid-template-columns: 293px minmax(0, 1fr);
      align-items: stretch;
      column-gap: var(--spacing-xl, 40px);
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    .predictive-search__results-body--split > .predictive-search__rail {
      grid-column: 1;
      grid-row: 1;
    }

    .predictive-search__results-body--split > .predictive-search__products {
      grid-column: 2;
      grid-row: 1;
    }

    .predictive-search[data-view='popular']:has(.predictive-search__products)
      .predictive-search__empty--split:not([hidden]) {
      display: grid;
      grid-template-columns: 293px minmax(0, 1fr);
      align-items: stretch;
      column-gap: var(--spacing-xl, 40px);
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
    }

    .predictive-search[data-view='popular'] .predictive-search__empty .predictive-search__products {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
    }

    .predictive-search__product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
    }

    .predictive-search__collection-grid {
      display: flex;
      align-items: stretch;
    }

    .predictive-search-collection {
      flex: 1 0 var(--predictive-search-collection-width);
      min-width: var(--predictive-search-collection-width);
      height: var(--predictive-search-collection-height);
    }
  }

  .header-mobile-menu .predictive-search__backdrop {
    display: none;
  }

  .header-mobile-menu:has(predictive-search[data-open]) .header-mobile-menu__scroll {
    display: none;
  }

  .header-mobile-menu:has(predictive-search[data-open]) .header-mobile-menu__bar {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  .header-mobile-menu .predictive-search[data-open] .predictive-search__panel {
    position: static;
    max-height: none;
    padding: var(--spacing-xl, 40px) 0 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  /* Mobile idle overlay — Figma 20466:109720. Full-viewport sheet, close above
     the field, popular then trending stacked. Desktop keeps the dropdown. */
  @media screen and (max-width: 989px) {
    .predictive-search[data-open] {
      position: fixed;
      inset: var(--announcement-bar-offset, 0px) 0 0;
      z-index: 5;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-sm);
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      padding: calc(var(--spacing-sm) + env(safe-area-inset-top, 0px))
        calc(var(--spacing-sm) + env(safe-area-inset-right, 0px))
        calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px))
        calc(var(--spacing-sm) + env(safe-area-inset-left, 0px));
      background: var(--surface-primary);
      color: var(--text-primary);
    }

    .predictive-search[data-open] .header-search {
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-3xs, 8px);
      min-height: 0;
      padding: 0;
      border-radius: 0;
      background: var(--surface-primary);
      backdrop-filter: none;
    }

    .predictive-search[data-open] .header-search__close {
      align-self: flex-end;
      order: -1;
    }

    .predictive-search[data-open] .header-search__field {
      min-height: 40px;
      padding: var(--spacing-3xs, 8px);
      border-radius: var(--radius-full, 360px);
      background: var(--surface-secondary);
      box-shadow: none;
    }

    .predictive-search[data-open] .header-search__field:focus-within {
      outline: none;
      box-shadow: 0 0 0 2px var(--text-primary);
    }

    .predictive-search[data-open][data-has-query] .header-search__field {
      padding-inline-end: var(--spacing-2xs, 12px);
    }

    .predictive-search[data-open][data-has-query] .header-search__input {
      font-size: var(--font-body-2xl-size);
    }

    .predictive-search[data-open] .header-search__input::placeholder {
      opacity: 1;
    }

    .predictive-search[data-open] .predictive-search__backdrop {
      display: none;
    }

    .predictive-search[data-open] .predictive-search__panel:not([hidden]) {
      position: relative;
      inset: auto;
      z-index: 1;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: none;
      margin: 0;
      overflow: auto;
      padding: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .predictive-search[data-view='popular'] .predictive-search__inner,
    .predictive-search[data-view='popular'] .predictive-search__empty,
    .predictive-search[data-view='popular'] .predictive-search__rail {
      gap: 0;
      overflow: visible;
    }

    .predictive-search[data-view='popular'] .predictive-search__group {
      gap: var(--spacing-sm);
      padding-block-end: var(--spacing-sm);
    }

    .predictive-search[data-view='popular'] .predictive-search__links {
      gap: var(--spacing-sm, 20px);
    }

    .predictive-search[data-view='popular'] .predictive-search__link {
      color: var(--text-primary);
    }

    .predictive-search[data-view='popular'] .predictive-search__products {
      gap: var(--spacing-2xs, 12px);
      padding-block-start: var(--spacing-sm, 20px);
      padding-block-end: var(--spacing-xl, 40px);
      overflow: visible;
    }

    .predictive-search[data-view='popular'] .predictive-search__product-grid,
    .predictive-search[data-view='results'] .predictive-search__product-grid {
      gap: var(--spacing-2xs, 12px);
    }

    .predictive-search[data-view='popular'] .predictive-search-product,
    .predictive-search[data-view='results'] .predictive-search-product {
      padding-inline-end: var(--spacing-3xs, 8px);
    }

    .predictive-search[data-view='popular'] .predictive-search-product__media,
    .predictive-search[data-view='results'] .predictive-search-product__media {
      width: min(163px, 46%);
      height: auto;
      aspect-ratio: 1;
    }

    .predictive-search[data-view='popular'] .predictive-search-product__text,
    .predictive-search[data-view='results'] .predictive-search-product__text {
      padding-block: var(--spacing-3xs, 8px);
    }

    /* Mobile results — products, then suggested collections, then pages.
       Desktop keeps the split rail. */
    .predictive-search[data-open][data-view='results']:has(.predictive-search__view-all-bar:not([hidden])) {
      padding-block-end: 0;
    }

    .predictive-search[data-view='results'] .predictive-search__inner,
    .predictive-search[data-view='results'] .predictive-search__results:not([hidden]),
    .predictive-search[data-view='results'] .predictive-search__results-body {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .predictive-search[data-view='results'] .predictive-search__rail {
      display: contents;
    }

    .predictive-search[data-view='results'] .predictive-search__rail,
    .predictive-search[data-view='results'] .predictive-search__products {
      overflow: visible;
    }

    .predictive-search[data-view='results'] .predictive-search__group--collections {
      gap: var(--spacing-md, 24px);
      padding-block: var(--spacing-sm, 20px);
    }

    .predictive-search[data-view='results'] .predictive-search__products {
      gap: var(--spacing-2xs, 12px);
      padding-block: var(--spacing-sm, 20px);
    }

    .predictive-search[data-view='results'] .predictive-search__group--pages {
      gap: var(--spacing-md, 24px);
      padding-block-start: var(--spacing-sm, 20px);
      padding-block-end: var(--spacing-xl, 40px);
    }

    .predictive-search[data-view='results'] .predictive-search__group--articles {
      gap: var(--spacing-md, 24px);
      padding-block-start: var(--spacing-sm, 20px);
      padding-block-end: var(--spacing-xl, 40px);
    }

    .predictive-search[data-view='results'] .predictive-search__products-header .predictive-search__view-all,
    .predictive-search[data-view='results'] .predictive-search__results-body > .predictive-search__view-all {
      display: none;
    }

    .predictive-search[data-open][data-view='results'] .predictive-search__view-all-bar:not([hidden]) {
      display: block;
      flex: 0 0 auto;
      box-sizing: border-box;
      margin-block-start: calc(var(--spacing-2xs, 12px) - var(--spacing-sm, 20px));
      margin-inline: calc(-1 * (var(--spacing-sm, 20px) + env(safe-area-inset-left, 0px)))
        calc(-1 * (var(--spacing-sm, 20px) + env(safe-area-inset-right, 0px)));
      padding-block: var(--spacing-2xs, 12px);
      padding-block-end: calc(var(--spacing-2xs, 12px) + env(safe-area-inset-bottom, 0px));
      padding-inline: calc(var(--spacing-sm, 20px) + env(safe-area-inset-left, 0px))
        calc(var(--spacing-sm, 20px) + env(safe-area-inset-right, 0px));
      background: var(--surface-primary);
    }

    .predictive-search[data-open][data-view='results'] .predictive-search__view-all-button {
      min-height: var(--size-10, 40px);
      gap: var(--spacing-4xs, 6px);
    }

    .predictive-search[data-open][data-view='results'] .predictive-search__view-all-button .button__icon {
      width: var(--size-4, 16px);
      margin-inline-start: 0;
      opacity: 1;
    }

    /* Mobile no-results — Figma 20470:112520. Copy, then overlay-size
       collection carousel with peek and dots. Desktop keeps the split.
       Overlay keeps gap so the panel cannot sit on the field. */
    .predictive-search[data-view='no-results'] .predictive-search__inner,
    .predictive-search[data-view='no-results'] .predictive-search__no-results:not([hidden]) {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .predictive-search[data-view='no-results'] .predictive-search__no-results-copy-col {
      gap: var(--spacing-md, 24px);
      padding-block-start: var(--spacing-sm, 20px);
      padding-block-end: var(--spacing-xl, 40px);
    }

    .predictive-search[data-view='no-results'] .predictive-search__no-results-collections {
      gap: var(--spacing-sm, 20px);
    }

    .predictive-search[data-view='no-results'] .predictive-search__collection-grid {
      gap: var(--spacing-2xs, 12px);
      scroll-snap-type: x mandatory;
    }

    .predictive-search[data-view='no-results'] .predictive-search-collection {
      flex: 0 0 var(--predictive-search-collection-width);
      width: var(--predictive-search-collection-width);
      min-width: var(--predictive-search-collection-width);
      height: var(--predictive-search-collection-height);
      scroll-snap-align: start;
    }

    .predictive-search[data-view='no-results'] .predictive-search__collection-dots:not([hidden]) {
      display: flex;
    }
  }
/* END_SNIPPET:header-search */

/* START_SNIPPET:image-block (INDEX:241) */
.image-block {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    background-color: color-mix(in srgb, currentColor 4%, transparent);
  }

  .image-block--fit {
    width: fit-content;
    max-width: 100%;
  }

  .image-block--custom {
    width: calc(var(--image-block-width-num, 50) * 1%);
    max-width: 100%;
  }

  .image-block__link {
    display: block;
  }

  .image-block__image,
  .image-block__placeholder {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }

  .image-block--fit .image-block__image,
  .image-block--fit .image-block__placeholder {
    width: auto;
    max-width: 100%;
  }

  .image-block__image {
    transition: opacity 0.35s ease;
  }

  /* Applied by image-block.js only to images that have not painted yet, so a
     blocked or missing script leaves images visible rather than hiding them. */
  .image-block__image.is-loading {
    opacity: 0;
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .image-block__image {
      transition: none;
    }
  }

  .image-block__placeholder {
    background-color: var(--surface-secondary);
  }
/* END_SNIPPET:image-block */

/* START_SNIPPET:image-text-media (INDEX:243) */
.image-text-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 648 / 500;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--surface-secondary);
  }

  .image-text-media__asset {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .image-text-media__placeholder {
    background-color: var(--surface-secondary);
  }

  .image-text-media__controls {
    position: absolute;
    right: var(--spacing-sm);
    bottom: var(--spacing-sm);
    z-index: 1;
  }

  .image-text-media__playback {
    --image-text-control-size: 44px;

    display: none;
    align-items: center;
    justify-content: center;
    width: var(--image-text-control-size);
    height: var(--image-text-control-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
  }

  .image-text-media.is-ready .image-text-media__playback {
    display: inline-flex;
  }

  .image-text-media__playback:focus-visible {
    outline: var(--focus-ring-size) solid var(--text-brand);
    outline-offset: var(--focus-ring-offset);
  }

  .image-text-media__playback [hidden] {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .image-text-media {
      border-radius: var(--radius-lg);
    }
  }
/* END_SNIPPET:image-text-media */

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

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

/* START_SNIPPET:localization-selector (INDEX:245) */
.localization-selector {
    position: relative;
    color: inherit;
    font-family: var(--font-primary--family);
    width: fit-content;
  }

  /* Mobile first: the device picker is the default, the custom list is the
     desktop enhancement. 990px matches the header's own mobile breakpoint. */
  .localization-selector--disclosure {
    display: none;
  }

  .localization-selector--native {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Transparent rather than hidden, so the control keeps its own focus and hit
     area over the full width of the visible markup. */
  .localization-selector__select {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    opacity: 0;
    cursor: pointer;
  }

  /* Focus lands on the select, which is invisible, so the ring has to be drawn
     by the wrapper that holds the flag and label. */
  .localization-selector--native:has(.localization-selector__select:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .localization-selector__summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer;
    color: inherit;
  }

  .localization-selector__summary::-webkit-details-marker {
    display: none;
  }

  .localization-selector__summary::marker {
    content: '';
  }

  .localization-selector__summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .localization-selector__current,
  .localization-selector__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3xs, 8px);
  }

  .localization-selector__caret {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--spacing-4xs, 6px);
    transition: transform 200ms ease;
  }

  .localization-selector--disclosure[open] .localization-selector__caret {
    transform: rotate(180deg);
  }

  .localization-selector__flag {
    display: block;
    width: var(--size-4);
    height: var(--size-4);
    object-fit: cover;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    overflow: hidden;
  }

  .localization-selector__label {
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
    font-weight: var(--font-weight-semibold);
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  /* Figma sets the desktop header's selector a step smaller than the footer's.
     Scoped to that row, not the whole header, which also holds the mobile drawer. */
  .header__desktop-primary .localization-selector__label {
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
  }

  /* Figma Country Selector: underline country code and currency (not the flag) */
  .localization-selector__current .localization-selector__label {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.12em;
  }

  /* The panel overlays a light header on one page and a dark footer on the
     same one, so it can't take its colours from either. Dedicated popover
     tokens keep it a light sheet wherever it opens. */
  .localization-selector__list {
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    margin: 0;
    padding: var(--spacing-3xs, 8px) 0;
    list-style: none;
    background: var(--popover-surface);
    color: var(--popover-text);
    border: 1px solid var(--popover-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--popover-shadow);
  }

  .localization-selector--down .localization-selector__list {
    top: calc(100% + var(--spacing-3xs, 8px));
  }

  .localization-selector--up .localization-selector__list {
    bottom: calc(100% + var(--spacing-3xs, 8px));
  }

  .localization-selector--align-start .localization-selector__list {
    inset-inline-start: 0;
  }

  .localization-selector--align-end .localization-selector__list {
    inset-inline-end: 0;
  }

  .localization-selector__item {
    margin: 0;
  }

  .localization-selector__link {
    min-height: 44px;
    width: 100%;
    padding: var(--spacing-3xs, 8px) var(--spacing-xs, 16px);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Tinted from the row's own text colour so it stays legible if the popover
     tokens are ever rescoped. */
  .localization-selector__link:hover,
  .localization-selector__link:focus-visible {
    background: color-mix(in srgb, currentColor 8%, transparent);
  }

  .localization-selector__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

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

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

  @media screen and (min-width: 990px) {
    .localization-selector--disclosure {
      display: block;
    }

    .localization-selector--native {
      display: none;
    }
  }
/* END_SNIPPET:localization-selector */

/* START_SNIPPET:macro-filter-bar (INDEX:246) */
.macro-filter-bar {
    box-sizing: border-box;
    width: calc(100% + (var(--section-padding-inline) * 2));
    min-width: 0;
    margin-inline: calc(var(--section-padding-inline) * -1);
    padding-block-start: var(--macro-filter-bar-padding-block-start-mobile, var(--macro-filter-bar-padding-block-start));
    padding-block-end: var(--macro-filter-bar-padding-block-end-mobile, var(--macro-filter-bar-padding-block-end));
    padding-inline: var(--spacing-sm);
    border-radius: 0;
    background-color: var(--surface-secondary);
  }

  .macro-filter-bar__content {
    display: flex;
    flex-direction: column;
    gap: var(--macro-filter-bar-gap, var(--spacing-sm));
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
  }

  .macro-filter-bar--left .macro-filter-bar__content {
    align-items: flex-start;
    text-align: left;
  }

  .macro-filter-bar--right .macro-filter-bar__content {
    align-items: flex-end;
    text-align: right;
  }

  .macro-filter-bar--center .macro-filter-bar__content {
    align-items: center;
    text-align: center;
  }

  .macro-filter-bar__heading {
    margin: 0;
    width: 100%;
    color: var(--text-primary);
  }

  .macro-filter-bar__results-terms {
    display: block;
  }

  .macro-filter-bar__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    align-items: flex-start;
    justify-content: center;
  }

  .macro-filter-bar__tabs > [data-search-tab] {
    display: contents;
  }

  .macro-filter-bar--left .macro-filter-bar__tabs {
    justify-content: flex-start;
  }

  .macro-filter-bar--right .macro-filter-bar__tabs {
    justify-content: flex-end;
  }

  .macro-filter-bar__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block-start: var(--spacing-none);
    padding-block-end: var(--spacing-5xs);
    padding-inline: var(--spacing-none);
    border-block-end: 1px solid transparent;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
  }

  .macro-filter-bar__tab.button--underline {
    --button-color: var(--text-primary);
    --button-hover-color: var(--text-primary);
    --button-border-color: transparent;
    --button-hover-border-color: transparent;
    min-height: auto;
    border-block-end-color: transparent;
  }

  .macro-filter-bar__tab.button--underline .button__icon {
    color: currentColor;
  }

  .macro-filter-bar__tab.button--underline:hover,
  .macro-filter-bar__tab.button--underline:focus-visible {
    border-block-end-color: transparent;
  }

  .macro-filter-bar__tab--active {
    border-block-end-color: var(--border-brand-dark);
  }

  @media screen and (min-width: 750px) {
    .macro-filter-bar {
      width: 100%;
      margin-inline: 0;
      padding-block-start: var(--macro-filter-bar-padding-block-start);
      padding-block-end: var(--macro-filter-bar-padding-block-end);
      padding-inline: var(--spacing-2xl);
      border-radius: var(--radius-lg);
    }

    .macro-filter-bar__results-terms {
      display: inline;
    }

    .macro-filter-bar__results-terms::before {
      content: ' ';
    }
  }
/* END_SNIPPET:macro-filter-bar */

/* START_SNIPPET:okendo-star-rating (INDEX:249) */
.okendo-star-rating {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }
/* END_SNIPPET:okendo-star-rating */

/* START_SNIPPET:oos-alternates (INDEX:250) */
.oos-alternates.product-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin-inline: 0;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .oos-alternates__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-title-xs-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-title-xs-line-height, 1.2);
    font-feature-settings: var(--font-feature-settings);
  }

  .oos-alternates__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .oos-alternates__item {
    min-width: 0;
    height: 100%;
  }

  .oos-alternates .product-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .oos-alternates .product-card__compare,
  .oos-alternates .product-card__specs {
    display: none;
  }

  /* Design sizes awards at 34px on these narrow buy-box cards at every
     breakpoint, between the listing card's 24px mobile and 40px desktop.
     Off the 4px size scale, so set directly. */
  .oos-alternates .product-card__awards {
    --product-awards-size: 34px;
  }

  .oos-alternates__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_SNIPPET:oos-alternates */

/* START_SNIPPET:press-block (INDEX:253) */
.press-item {
    display: contents;
  }

  .press__panel {
    width: 100%;
  }

  .press__quote {
    margin: 0;
    width: 100%;
    max-width: var(--press-quote-max-width, 42rem);
    border: 0;
    text-wrap: pretty;
  }

  .press__quote--placeholder {
    opacity: 0.55;
  }
/* END_SNIPPET:press-block */

/* START_SNIPPET:press-logo (INDEX:254) */
.press__logo {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    height: var(--press-logo-height, 48px);
    max-width: 100%;
    opacity: 0.5;
    transition: opacity var(--press-transition-duration, 300ms) ease-out;
  }

  .press__logo.is-active,
  .press__logo[aria-pressed='true'] {
    opacity: 1;
  }

  .press__logo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }

  .press__logo-image {
    display: block;
    width: auto;
    height: 100%;
    max-height: var(--press-logo-height, 48px);
    object-fit: contain;
  }

  .press__logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    height: 100%;
    padding-inline: var(--spacing-xs, 16px);
    border: 1px dashed currentColor;
    opacity: 0.6;
    font-size: var(--font-body-xs-size, 11px);
  }
/* END_SNIPPET:press-logo */

/* START_SNIPPET:product-awards (INDEX:256) */
.product-awards {
    display: flex;
    flex-direction: column;
    gap: var(--size-2-5);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  .product-awards__item {
    flex: 0 0 auto;
    width: var(--product-awards-size, var(--size-6));
    height: var(--product-awards-size, var(--size-6));
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-sm, 4px);
  }

  .product-awards__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }
/* END_SNIPPET:product-awards */

/* START_SNIPPET:product-badges (INDEX:257) */
.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-badges__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding-block-start: 5px;
    padding-block-end: var(--spacing-5xs);
    padding-inline: var(--spacing-3xs);
    border-radius: var(--radius-full);
    background-color: var(--product-badge-bg, var(--surface-brand-light));
    /* Figma text-primary on badges is #3D3D3D; that token is --border-dark.
       --text-primary is #333333 and was washing the label out.
       --product-badge-fg flips to --text-invert on a dark metaobject colour. */
    color: var(--product-badge-fg, var(--border-dark));
    font-family: var(--font-primary--family);
  }

  .product-badges__label {
    font-family: var(--font-primary--family);
    font-size: var(--font-body-2xs-size);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--font-body-2xs-line-height, 1.4);
    letter-spacing: var(--font-body-2xs-letter-spacing, normal);
    font-feature-settings: var(--font-feature-settings);
    color: inherit;
  }

  .product-badges--empty {
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_SNIPPET:product-badges */

/* START_SNIPPET:product-callout (INDEX:258) */
.product-callout {
    display: flex;
    gap: var(--spacing-4xs);
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .product-callout__icon {
    --product-callout-icon-pad-inline: 5px;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--size-6);
    height: var(--size-6);
    padding-block: var(--spacing-5xs);
    padding-inline: var(--product-callout-icon-pad-inline);
    border-radius: var(--radius-full);
    color: var(--product-callout-icon-color, #333333);
    background-color: var(--product-callout-icon-bg, #C6D97A);
  }

  .product-callout__icon .icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-callout__text {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    /* Mobile Figma: 13px (body-md); desktop body-sm = 13px */
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  @media screen and (min-width: 768px) {
    .product-callout__text {
      font-size: var(--font-body-sm-size);
    }
  }

  .product-callout__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }
/* END_SNIPPET:product-callout */

/* START_SNIPPET:product-card (INDEX:261) */
.product-card {
    --product-card-fade: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --product-card-reveal: 200ms ease;

    display: flex;
    flex-direction: column;
    gap: var(--product-card-gap, 12px);
    min-width: 0;
    height: 100%;
    position: relative;
    padding-block-start: var(--product-card-padding-block-start, 0);
    padding-block-end: var(--product-card-padding-block-end, 12px);
    padding-inline-start: var(--product-card-padding-inline-start, 0);
    padding-inline-end: var(--product-card-padding-inline-end, 0);
    transition:
      background-color var(--product-card-reveal),
      gap var(--product-card-reveal),
      border-radius var(--product-card-reveal);
  }

  .product-card__media {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm, 4px);
    background-color: var(--surface-secondary);
  }

  .product-card__media-link {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .product-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .product-card__image--default {
    position: relative;
    z-index: 0;
  }

  .product-card__image--hover {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
  }

  .product-card__placeholder {
    width: 60%;
    height: auto;
    opacity: 0.4;
  }

  .product-card__badges {
    position: absolute;
    inset-block-start: var(--spacing-3xs, 8px);
    inset-inline-start: var(--spacing-3xs, 8px);
    z-index: 1;
    max-width: calc(100% - 16px);
    pointer-events: none;
  }

  .product-card__badges .product-badges {
    gap: var(--spacing-5xs, 4px);
  }

  .product-card__badges .product-badges__item {
    /* Fallback when the badge metaobject has no colour. A set colour is
       an inline --product-badge-bg and wins over this. */
    --product-badge-bg: var(--border-brand-light);
    /* Figma: 13px pill around a 10px / line-height 1 label (1px top, 2px
       bottom). In the browser Raleway's caps already sit centred inside the
       10px line box, so that asymmetric split pushes the text up. Split the
       same 3px evenly to keep the 13px height with the label centred. */
    --product-badge-padding-block: 1.5px;
    padding-block: var(--product-badge-padding-block);
  }

  .product-card__badges .product-badges__label {
    font-family: var(--font-primary--family);
    font-size: var(--font-eyebrow-2xs-size, 10px);
    font-weight: var(--font-eyebrow-2xs-weight, 700);
    line-height: var(--font-eyebrow-2xs-line-height, 1);
    color: var(--product-badge-fg, var(--border-dark));
  }

  .product-card__awards {
    /* Figma mobile: 24px tiles, spacing-3xs inset. Desktop: 40px, spacing-xs */
    --product-awards-size: var(--size-6);
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--size-2-5);
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-3xs);
    list-style: none;
    pointer-events: none;
  }

  /*
    Cards in a carousel slide size awards at 34px at every breakpoint. Keyed
    off .carousel__list, which is in the server markup, rather than the slide
    class Splide adds on mount, so the tiles do not resize once JS runs.
    Off the 4px size scale, so set directly.
  */
  .carousel__list .product-card__awards {
    --product-awards-size: 34px;
  }

  .product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-xs, 16px);
    min-width: 0;
    padding-inline: var(--spacing-3xs, 8px);
  }

  .product-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs, 8px);
    min-width: 0;
  }

  .product-card__reviews .product-reviews {
    justify-content: flex-start;
    background-color: transparent;
  }

  .product-card__title {
    margin: 0;
    font-size: var(--font-body-md-size, 13px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-body-md-line-height, 1.4);
  }

  /* Formatted titles are regular, with merchant bold kept as semibold.
     The strong element is what Shopify rich text emits for bold. */
  .product-card__title--formatted {
    font-weight: var(--font-weight-regular, 400);
  }

  .product-card__title--formatted strong {
    font-weight: var(--font-weight-semibold, 600);
  }

  .product-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .product-card__title-link:hover {
    text-decoration: none;
  }

  .product-card__title-link:focus-visible {
    outline: 2px solid var(--border-brand-dark, currentColor);
    outline-offset: 2px;
  }

  /* Stretch the title link over the card instead of wrapping it in <a>.
     Media, compare, swatches, and quick-add stay above the hit area so
     image hover and nested controls are not captured by the overlay. */
  .product-grid--full-click .product-card {
    isolation: isolate;
    cursor: pointer;
  }

  .product-grid--full-click .product-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .product-grid--full-click .product-card:has(.product-card__title-link:focus-visible) {
    outline: 2px solid var(--border-brand-dark, currentColor);
    outline-offset: 2px;
  }

  .product-grid--full-click .product-card__title-link:focus-visible {
    outline: none;
  }

  .product-grid--full-click .product-card__media,
  .product-grid--full-click .product-card__compare,
  .product-grid--full-click .product-card__swatches,
  .product-grid--full-click .product-card__quick-add {
    position: relative;
    z-index: 2;
  }

  .product-card__price {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs, 8px);
    font-size: var(--font-body-lg-size, 15px);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.3;
    color: var(--text-primary);
  }

  .product-card__price-compare[hidden] {
    display: none;
  }

  .product-card__price-current--sale {
    color: var(--system-sale);
  }

  .product-card__specs[hidden],
  .product-card__spec[hidden],
  .product-card__image--hover[hidden] {
    display: none;
  }

  .product-card__specs {
    display: grid;
    grid-template-rows: 0fr;
    min-width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    border-block-start: 0 solid var(--border-secondary);
    transition:
      grid-template-rows var(--product-card-reveal),
      opacity var(--product-card-reveal),
      padding-block-start var(--product-card-reveal),
      border-width var(--product-card-reveal);
  }

  .product-card__specs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs, 8px);
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .product-card__spec {
    display: flex;
    gap: var(--spacing-5xs, 4px);
    align-items: center;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--font-body-sm-size, 12px);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  .product-card__spec-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-4);
    height: var(--size-4);
  }

  .product-card__spec-icon .icon {
    width: 100%;
    height: 100%;
  }

  .product-card__spec-label {
    flex-shrink: 0;
    font-weight: var(--font-weight-semibold, 600);
  }

  .product-card__spec-label:empty {
    display: none;
  }

  .product-card__spec-value {
    min-width: 0;
    font-weight: var(--font-weight-regular, 400);
  }

  .product-card__footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-2xs, 12px);
    margin-block-start: auto;
  }

  .product-card__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2-5);
    align-items: center;
    padding-block: var(--spacing-5xs, 4px);
  }

  /* 24px matches the PDP variant picker and clears the 24px minimum target
     size; the gap keeps adjacent targets from crowding each other. */
  .product-card__swatch {
    --product-card-swatch-inset: var(--spacing-6xs, 2px);
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--size-6);
    height: var(--size-6);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
    appearance: none;
  }

  .product-card__swatch--selected {
    border-color: var(--border-primary);
  }

  .product-card__swatch:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  /* Inset from the ring rather than flex-centring a sized circle. On fractional
     display scaling (Windows 125%) the centred circle snapped a pixel off. */
  .product-card__swatch-fill {
    position: absolute;
    inset: var(--product-card-swatch-inset);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--border-secondary);
    background-position: center;
    background-size: cover;
  }

  /* Figma white swatch stroke (#e5e5e5). Every fill keeps a 1px border so the discs stay the same size. */
  .product-card__swatch[aria-label="White" i] .product-card__swatch-fill {
    --swatch-white-border: #e5e5e5;
    border-color: var(--swatch-white-border);
  }

  /* Sold out keeps its colour and takes a diagonal strike. The halo keeps the
     line readable on dark swatches. */
  .product-card__swatch--unavailable .product-card__swatch-fill::after {
    content: '';
    position: absolute;
    inset-block: -25%;
    inset-inline-start: 50%;
    width: 1px;
    background-color: var(--border-primary);
    box-shadow: 0 0 0 1px var(--surface-primary);
    transform: translateX(-50%) rotate(45deg);
  }

  .product-card__compare {
    /* Unchecked stays an open box. Checked fill matches Figma
       19836:89709 and the filter-facet invert box. Hover still
       uses the shared ghost tick. The hit area is taller than the
       16px box so the label, not only the square, is easy to tap. */
    --checkbox-tick-checked: var(--text-invert);
    --compare-hit-block: 44px;
    --compare-hit-inline: 12px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3xs, 8px);
    min-height: var(--compare-hit-block);
    margin-inline: calc(var(--compare-hit-inline) * -1);
    padding-inline: var(--compare-hit-inline);
    cursor: pointer;
  }

  .product-card__compare.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  /*
    Hide the native control without clip:rect — Safari still paints a 1×1
    checkbox (the tiny tick on macOS) unless appearance is none and the
    control is opacity-clipped.
  */
  .product-card__compare-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
  }

  .product-card__compare-box {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--size-4, 16px);
    height: var(--size-4, 16px);
    min-width: var(--size-4, 16px);
    min-height: var(--size-4, 16px);
    padding: var(--spacing-6xs, 2px);
    overflow: visible;
    border: 1px solid var(--text-primary);
    border-radius: var(--radius-2xs, 2px);
    background-color: transparent;
    color: var(--checkbox-tick-hover, var(--border-primary));
  }

  .product-card__compare-box .checkbox__tick {
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    overflow: visible;
    fill: currentColor;
  }

  .product-card__compare-input:checked + .product-card__compare-box {
    border-color: var(--surface-invert);
    background-color: var(--surface-invert);
  }

  .product-card__compare-input:focus-visible + .product-card__compare-box {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .product-card__compare-label {
    font-size: var(--font-body-2xs-size, 11px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    text-transform: capitalize;
  }

  .product-card__quick-add {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    margin-inline-start: auto;
  }

  .product-card__quick-add .quick-add__button {
    width: var(--size-8);
    height: var(--size-8);
  }

  .product-card__placeholder-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
  }

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

  .product-grid--hide-badges .product-card__badges,
  .product-grid--hide-reviews .product-card__reviews,
  .product-grid--hide-compare .product-card__compare,
  .product-grid--hide-swatches .product-card__swatches {
    display: none;
  }

  /* Compact card (Figma 19832:57685): swatches then compare stack in the text
     column, with the quick-add bottom-aligned against the compare row. Row gap
     is 0 and the 16px rhythm comes from margins, so a product with no swatches
     or a merchant who hides compare does not leave an empty row behind.
     Featured-product carousels use the same grid so the add-to-cart buttons
     share one baseline when titles wrap or swatches are missing. */
  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto;
    column-gap: var(--spacing-xs, 16px);
    row-gap: 0;
    align-items: end;
  }

  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__info {
    grid-area: 1 / 1 / 2 / -1;
    align-self: start;
  }

  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__swatches {
    grid-area: 2 / 1 / 3 / 2;
    align-self: end;
    margin-block-start: var(--spacing-xs, 16px);
  }

  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__footer {
    display: contents;
  }

  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__compare {
    grid-area: 3 / 1 / 4 / 2;
    margin-block-start: var(--spacing-xs, 16px);
  }

  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__quick-add {
    grid-area: 2 / 2 / 4 / 3;
    align-self: end;
    margin-block-start: var(--spacing-xs, 16px);
  }

  :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__specs {
    display: none;
  }

  .product-grid--detailed .product-card__body {
    gap: var(--spacing-2xs, 12px);
  }

  .product-grid--detailed .product-card__specs {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
  }

  .product-grid--mobile-2 .product-grid__item:nth-child(odd) .product-card__media {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .product-grid--mobile-2 .product-grid__item:nth-child(even) .product-card__media {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Collection grids with ads tag each product with its phone column. */
  .product-grid--mobile-2 .product-grid__item.product-grid__item--mobile-start .product-card__media {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--radius-sm, 4px);
    border-end-end-radius: var(--radius-sm, 4px);
  }

  .product-grid--mobile-2 .product-grid__item.product-grid__item--mobile-end .product-card__media {
    border-start-start-radius: var(--radius-sm, 4px);
    border-end-start-radius: var(--radius-sm, 4px);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .product-grid--detailed.product-grid--mobile-2 .product-grid__item:nth-child(odd) .product-card__media,
  .product-grid--detailed.product-grid--mobile-2 .product-grid__item:nth-child(even) .product-card__media {
    border-radius: var(--radius-lg, 12px);
  }

  /* Mobile detailed view (Figma 19852:117111): full-bleed grey card with a
     160px media beside the title block, then specs and footer across the
     full width. Row gap is 0 and the spacing comes from margins so that a
     product without swatches does not leave an empty row behind. */
  @media screen and (max-width: 749px) {
    .product-grid--detailed .product-card {
      --product-card-detailed-media: 160px;

      display: grid;
      grid-template-columns: var(--product-card-detailed-media) minmax(0, 1fr);
      column-gap: var(--product-card-gap, 12px);
      row-gap: 0;
      padding-block: var(--spacing-2xs, 12px);
      padding-inline: var(--spacing-xs, 16px);
      background-color: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
    }

    .product-grid--detailed .product-card__media {
      grid-column: 1;
      grid-row: 1 / span 2;
      align-self: stretch;
      aspect-ratio: unset;
      background-color: transparent;
      border-radius: var(--radius-lg, 12px);
    }

    .product-grid--detailed .product-card__image {
      object-fit: cover;
    }

    .product-grid--detailed .product-card__body {
      display: contents;
    }

    .product-grid--detailed .product-card__info {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
    }

    .product-grid--detailed .product-card__swatches {
      grid-column: 2;
      grid-row: 2;
      align-self: start;
      margin-block-start: var(--spacing-xs, 16px);
    }

    .product-grid--detailed .product-card__specs,
    .product-grid--detailed .product-card__footer {
      grid-column: 1 / -1;
      margin-block-start: var(--product-card-gap, 12px);
    }

    .product-grid--detailed .product-card__footer {
      align-items: center;
    }
  }

  @media screen and (min-width: 750px) {
    .product-card__media,
    .product-grid--mobile-2 .product-grid__item:nth-child(odd) .product-card__media,
    .product-grid--mobile-2 .product-grid__item:nth-child(even) .product-card__media {
      border-radius: var(--radius-lg, 12px);
    }

    .product-card__badges {
      inset-block-start: var(--spacing-2xs, 12px);
      inset-inline-start: var(--spacing-2xs, 12px);
      max-width: calc(100% - 24px);
    }

    .product-card__badges .product-badges {
      gap: var(--spacing-3xs, 8px);
    }

    .product-card__badges .product-badges__item {
      padding-block-start: 5px;
      padding-block-end: var(--spacing-5xs);
    }

    .product-card__badges .product-badges__label {
      font-family: var(--font-primary--family);
      font-size: var(--font-body-2xs-size, 11px);
      font-weight: var(--font-weight-bold, 700);
      line-height: 1;
      color: var(--product-badge-fg, var(--border-dark));
    }

    .product-card__awards {
      --product-awards-size: var(--size-10);
      padding: var(--spacing-xs);
    }

    .product-card__body {
      padding-inline: 0;
    }

    .product-card__quick-add .quick-add__button {
      width: var(--size-10);
      height: var(--size-10);
    }

    .product-card__quick-add .quick-add__icon {
      --quick-add-icon-size: var(--size-6);
    }

    /* Figma insets the compact quick-add from the card edge while the text
       column stays flush with the media. Mobile keeps it flush. */
    :is(.product-grid:not(.product-grid--detailed), .featured-products) .product-card__quick-add {
      margin-inline-end: var(--spacing-2xs, 12px);
    }

    .product-grid--detailed .product-card {
      flex-direction: row;
      align-items: stretch;
      gap: var(--spacing-sm, 20px);
      overflow: hidden;
      padding: 0;
      border-radius: var(--radius-lg, 12px);
      background-color: color-mix(in srgb, var(--surface-secondary) 70%, transparent);
    }

    .product-grid--detailed .product-card__media,
    .product-grid--detailed.product-grid--mobile-2 .product-grid__item:nth-child(odd) .product-card__media,
    .product-grid--detailed.product-grid--mobile-2 .product-grid__item:nth-child(even) .product-card__media {
      --product-card-detailed-media: 264px;

      flex: 0 0 var(--product-card-detailed-media);
      width: var(--product-card-detailed-media);
      aspect-ratio: unset;
      align-self: stretch;
      background-color: transparent;
      border-start-start-radius: var(--radius-lg, 12px);
      border-end-start-radius: var(--radius-lg, 12px);
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    .product-grid--detailed .product-card__media-link {
      height: 100%;
    }

    .product-grid--detailed .product-card__image {
      object-fit: cover;
    }

    .product-grid--detailed .product-card__awards {
      inset-block-end: 0;
    }

    .product-grid--detailed .product-card__body {
      gap: var(--spacing-2xs, 12px);
      padding-block: var(--spacing-2xs, 12px);
      padding-inline-start: 0;
      padding-inline-end: var(--spacing-2xs, 12px);
    }

    .product-grid--detailed .product-card__specs {
      padding-block-start: var(--spacing-2xs, 12px);
      border-block-start-width: 1px;
    }

    .product-grid--detailed .product-card__spec {
      font-size: var(--font-body-xs-size, 12px);
    }

    .product-grid--detailed .product-card__footer {
      align-items: center;
    }

    .product-grid--detailed .product-card__quick-add .quick-add__button {
      width: var(--size-8);
      height: var(--size-8);
    }
  }

  @media screen and (hover: hover) {
    .product-card--has-hover .product-card__image--default,
    .product-card--has-hover .product-card__image--hover {
      transition: opacity var(--product-card-fade);
    }

    .product-card--has-hover .product-card__media:hover .product-card__image--hover {
      opacity: 1;
    }

    .product-card--has-hover .product-card__media:hover .product-card__image--default {
      opacity: 0;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .product-card {
      --product-card-fade: 0ms;
      --product-card-reveal: 0ms;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-compare-tray (INDEX:264) */
.compare-tray {
    --compare-tray-touch-target: 44px;

    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--sticky-atc-offset, 0px);
    z-index: 20;
    box-sizing: border-box;
    width: 100%;
    border-block-start: 1px solid var(--border-invert);
    background-color: var(--surface-primary);
    box-shadow: 0 -2px 10px rgb(0 0 0 / 0.04);
    color: var(--text-primary);
    transition: inset-block-end var(--sticky-atc-transition, 400ms cubic-bezier(0.4, 0, 0.2, 1));
  }

  .compare-tray[hidden] {
    display: none;
  }

  html.has-compare-tray {
    padding-bottom: calc(
      var(--sticky-atc-offset, 0px) + var(--compare-tray-offset, 0px)
    );
  }

  /* LiveChat sets an inline `transition: none`, so the override has to stay on
     the launcher whether or not the tray is up. Dropping it alongside the
     transform would snap the launcher back down instead of easing it. */
  body:has(product-compare-tray) [id='chat-widget-container'] {
    transition: transform var(--sticky-atc-transition, 400ms cubic-bezier(0.4, 0, 0.2, 1)) !important;
  }

  /* An expanded chat can fill the viewport, so it keeps its own position. */
  html.has-compare-tray:not(.has-chat-expanded) [id='chat-widget-container'] {
    transform: translate3d(
      0,
      calc(-1 * (var(--sticky-atc-offset, 0px) + var(--compare-tray-offset, 0px))),
      0
    );
  }

  .compare-tray__toggle {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--compare-tray-touch-target);
    padding: var(--spacing-2xs) var(--spacing-sm);
    border: 0;
    background-color: var(--surface-brand-light);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-button-lg-size);
    font-weight: var(--font-button-lg-weight);
    line-height: var(--font-body-xl-line-height);
    text-align: start;
    cursor: pointer;
  }

  /* Expanded, the heading is part of the white panel rather than its own
     tinted bar, so its block padding supplies the panel's top spacing. */
  .compare-tray.is-expanded .compare-tray__toggle {
    padding-block: var(--spacing-sm);
    background-color: transparent;
  }

  .compare-tray__chevron {
    display: flex;
    transition: rotate 150ms ease;
  }

  .compare-tray.is-expanded .compare-tray__chevron {
    rotate: 180deg;
  }

  .compare-tray__panel {
    display: none;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: calc(100dvh - var(--compare-tray-touch-target));
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xl);
    overflow-y: auto;
  }

  .compare-tray.is-expanded .compare-tray__panel {
    display: flex;
    padding-block-start: 0;
  }

  .compare-tray__products {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  .compare-tray__product,
  .compare-tray__slot {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-lg);
  }

  .compare-tray__product {
    min-height: 60px;
    padding-inline-end: var(--spacing-2xs);
    background-color: var(--surface-secondary);
  }

  .compare-tray__slot {
    justify-content: center;
    border: 1px dashed var(--border-primary);
    font-size: var(--font-body-xl-size);
    line-height: 1;
    /* Raleway draws its figures low in the em box, so pinning the line
       height still leaves the digit below the circle. End padding shifts
       the flex centre up by half of this value. */
    padding-block-end: 0.2em;
  }

  .compare-tray__media {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: var(--radius-full);
  }

  .compare-tray__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .compare-tray__meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-block: var(--spacing-3xs);
    line-height: 1.4;
  }

  .compare-tray__title {
    overflow: hidden;
    font-size: var(--font-body-sm-size);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compare-tray__price {
    font-size: var(--font-body-xs-size);
  }

  .compare-tray__remove {
    display: inline-flex;
    flex: 0 0 var(--compare-tray-touch-target);
    align-items: center;
    justify-content: center;
    width: var(--compare-tray-touch-target);
    height: var(--compare-tray-touch-target);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .compare-tray__remove .icon {
    display: block;
    width: var(--size-4);
    height: var(--size-4);
  }

  .compare-tray__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: center;
  }

  .compare-tray__submit {
    --button-height: 36px;

    width: 100%;
  }

  .compare-tray__submit[aria-disabled='true'] {
    opacity: 0.3;
    pointer-events: none;
  }

  .compare-tray__clear {
    --button-underline-font-size: var(--font-body-md-size);
    --button-underline-font-weight: var(--font-weight-regular);
    --button-underline-line-height: var(--font-body-md-line-height);

    min-height: var(--size-6);
    padding-inline: var(--spacing-3xs);
  }

  @media screen and (min-width: 750px) {
    .compare-tray {
      padding: var(--spacing-sm) var(--spacing-2xl);
    }

    .compare-tray__toggle {
      display: none;
    }

    .compare-tray__panel,
    .compare-tray.is-expanded .compare-tray__panel {
      display: flex;
      flex-direction: row;
      gap: var(--spacing-sm);
      align-items: center;
      justify-content: space-between;
      max-height: none;
      padding: 0;
      overflow: visible;
    }

    .compare-tray__products {
      flex: 1 1 auto;
      flex-direction: row;
      gap: var(--spacing-sm);
      min-width: 0;
    }

    .compare-tray__product {
      flex: 0 1 316px;
      max-width: 316px;
      border-radius: var(--radius-full);
    }

    .compare-tray__remove .icon {
      width: var(--size-5);
      height: var(--size-5);
    }

    .compare-tray__slot {
      flex: 0 0 61px;
      width: 61px;
      min-height: 61px;
      border-radius: var(--radius-full);
    }

    .compare-tray__actions {
      flex: 0 0 auto;
      flex-direction: row;
      gap: var(--spacing-3xs);
    }

    .compare-tray__submit,
    .compare-tray__clear {
      --button-height: 32px;

      width: auto;
    }

    .compare-tray__clear {
      --button-underline-font-size: var(--font-button-sm-size);
      --button-underline-font-weight: var(--font-button-sm-weight);
      --button-underline-line-height: var(--font-button-sm-line-height);

      padding-block: var(--spacing-3xs);
      padding-inline: var(--spacing-xs);
      min-height: var(--size-8);
      border: 1px solid var(--border-brand-dark);
      border-radius: var(--radius-full);
      background-color: var(--surface-primary);
      color: var(--text-primary);
      text-decoration: none;
    }

    .compare-tray__clear:hover,
    .compare-tray__clear:focus-visible {
      border-color: transparent;
      background-color: var(--surface-brand-light);
      color: var(--text-primary);
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .compare-tray {
      transition: none;
    }

    body:has(product-compare-tray) [id='chat-widget-container'] {
      transition: none !important;
    }
  }
/* END_SNIPPET:product-compare-tray */

/* START_SNIPPET:product-comparison-product (INDEX:267) */
.product-comparison__product {
    --product-comparison-busy-opacity: 0.5;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
    padding: var(--spacing-2xs) var(--spacing-5xs);
    border-block-end: 1px solid var(--border-secondary);
    scroll-snap-align: start;
  }

  .product-comparison__select-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .product-comparison__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .product-comparison__select {
    width: 100%;
    min-width: 0;
    height: auto;
    padding-block: var(--spacing-2xs);
    padding-inline: var(--spacing-2xs) var(--spacing-lg);
    overflow: hidden;
    border: 1px solid var(--border-invert);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
    color: var(--text-primary);
    font-size: var(--font-body-sm-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-body-sm-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    outline: none;
  }

  .product-comparison__select:disabled {
    padding-inline: var(--spacing-2xs);
    cursor: default;
    opacity: 1;
  }

  .product-comparison__select:focus {
    outline: none;
  }

  .product-comparison__select:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
  }

  .product-comparison__select-icon {
    position: absolute;
    inset-inline-end: var(--spacing-3xs);
    display: flex;
    pointer-events: none;
    color: var(--text-primary);
  }

  .product-comparison__product[data-comparison-locked] .product-comparison__select-icon {
    display: none;
  }

  .product-comparison__product[aria-busy='true'] .product-comparison__summary {
    opacity: var(--product-comparison-busy-opacity);
  }

  .product-comparison__summary {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-3xs);
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  .product-comparison__media {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.0625rem;
    height: 3rem;
  }

  .product-comparison__image,
  .product-comparison__placeholder {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .product-comparison__meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .product-comparison__unit,
  .product-comparison__price {
    margin: 0;
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
    white-space: nowrap;
  }

  .product-comparison__unit {
    color: var(--text-secondary);
    font-weight: var(--font-weight-regular);
  }

  .product-comparison__price {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
  }

  .product-comparison__quick-add {
    --product-comparison-bag-size: 1.625rem;
    --product-comparison-bag-offset-block: -0.3125rem;
    --product-comparison-bag-offset-inline: -0.1875rem;
    position: absolute;
    /* Offsets position the visible bag; the larger touch target is centred back over it */
    inset-block-start: calc(
      var(--product-comparison-bag-offset-block) - (var(--touch-target-size, 44px) - var(--product-comparison-bag-size)) / 2
    );
    inset-inline-start: calc(
      var(--product-comparison-bag-offset-inline) - (var(--touch-target-size, 44px) - var(--product-comparison-bag-size)) / 2
    );
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-size, 44px);
    height: var(--touch-target-size, 44px);
    margin: 0;
  }

  .product-comparison__quick-add .quick-add__button {
    width: var(--product-comparison-bag-size);
    height: var(--product-comparison-bag-size);
  }

  .product-comparison__quick-add .quick-add__icon {
    --quick-add-icon-size: var(--size-4);
  }

  @media screen and (min-width: 1024px) {
    .product-comparison__product {
      padding: var(--spacing-sm);
    }

    .product-comparison__select {
      padding-inline: var(--spacing-2xs) var(--spacing-lg);
    }

    .product-comparison__summary {
      gap: var(--spacing-xs);
    }

    .product-comparison__media {
      width: 3.5rem;
      height: 5rem;
    }

    .product-comparison__meta {
      gap: var(--spacing-5xs);
      align-items: center;
    }

    .product-comparison__quick-add {
      position: static;
      width: var(--size-10);
      height: var(--size-10);
      margin-inline-start: auto;
      inset: auto;
    }

    .product-comparison__quick-add .quick-add__button {
      width: var(--size-8);
      height: var(--size-8);
    }

    .product-comparison__quick-add .quick-add__icon {
      --quick-add-icon-size: 1.125rem;
    }
  }
/* END_SNIPPET:product-comparison-product */

/* START_SNIPPET:product-comparison-row (INDEX:268) */
.product-comparison-row {
    display: contents;
  }

  .product-comparison__group,
  .product-comparison__data {
    display: grid;
    grid-template-columns: var(--product-comparison-grid);
    grid-auto-rows: minmax(3.0625rem, auto);
    column-gap: var(--product-comparison-gutter);
    align-items: stretch;
    width: 100%;
    min-width: calc(6rem + (8.25rem + var(--product-comparison-gutter)) * var(--product-comparison-cols, 1));
  }

  .product-comparison__group-label,
  .product-comparison__group-pad,
  .product-comparison__label,
  .product-comparison__cell {
    display: flex;
    align-items: center;
    align-self: stretch;
    min-width: 0;
    min-height: 3.0625rem;
    padding-block: var(--spacing-3xs);
    padding-inline: var(--spacing-xs) var(--spacing-3xs);
  }

  .product-comparison__group-label,
  .product-comparison__group-pad {
    min-height: 3.0625rem;
    background-color: var(--surface-primary);
    color: var(--text-secondary);
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
    font-weight: var(--font-weight-semibold);
  }

  .product-comparison__group-label {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .product-comparison__label {
    position: sticky;
    left: 0;
    z-index: 1;
    gap: var(--spacing-3xs);
    background-color: var(--product-comparison-row-fill-sticky);
    box-shadow: var(--product-comparison-sticky-guard);
    color: var(--text-primary);
    font-size: var(--font-body-xs-size);
    line-height: var(--font-body-xs-line-height);
    font-weight: var(--font-weight-semibold);
  }

  .product-comparison__label-icon {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-4);
    height: var(--size-4);
    color: var(--text-primary);
  }

  .product-comparison__label-icon .icon {
    width: 100%;
    height: 100%;
  }

  .product-comparison__label-text {
    min-width: 0;
  }

  .product-comparison__cell {
    justify-content: center;
    padding-inline: var(--spacing-2xs);
    background-color: var(--product-comparison-row-fill);
    color: var(--text-primary);
    font-size: var(--font-body-sm-size);
    line-height: var(--font-body-sm-line-height);
    text-align: center;
  }

  .product-comparison__cell-text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .product-comparison__cell-boolean {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
  }

  .product-comparison__cell-boolean .icon {
    display: block;
  }

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

  .product-comparison__cell-empty {
    color: var(--text-secondary);
  }

  .product-comparison-row.is-same {
    display: none;
  }

  .product-comparison__group.is-hidden {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .product-comparison__group,
    .product-comparison__data {
      grid-auto-rows: minmax(4rem, auto);
    }

    .product-comparison__group-label,
    .product-comparison__group-pad,
    .product-comparison__label,
    .product-comparison__cell {
      min-height: 4rem;
      padding-block: var(--spacing-3xs);
      padding-inline: var(--spacing-sm);
    }

    .product-comparison__group-label,
    .product-comparison__group-pad {
      font-size: var(--font-body-md-size);
      line-height: var(--font-body-md-line-height);
    }

    .product-comparison__label {
      font-size: var(--font-body-xl-size);
      line-height: var(--font-body-xl-line-height);
      font-weight: var(--font-weight-regular);
    }

    .product-comparison__label-icon {
      display: flex;
    }

    .product-comparison__cell {
      font-size: var(--font-body-xl-size);
      line-height: var(--font-body-xl-line-height);
    }
  }
/* END_SNIPPET:product-comparison-row */

/* START_SNIPPET:product-grid-pagination (INDEX:271) */
.product-grid__pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding-block: var(--spacing-sm);
    width: 100%;
  }

  .product-grid__pagination-count {
    margin: 0;
    color: var(--text-primary);
    font-feature-settings: var(--font-feature-settings);
    text-align: center;
  }

  .product-grid__pagination-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .button.product-grid__page-button {
    --button-font-size: var(--font-button-xs-size);
    --button-font-weight: var(--font-button-xs-weight);
    --button-line-height: var(--font-button-xs-line-height);
    --button-letter-spacing: var(--font-button-xs-letter-spacing);
    --button-padding-x: var(--spacing-2xs);
    --button-padding-y: var(--spacing-5xs);
    flex: 0 0 auto;
    text-transform: capitalize;
  }

  .product-grid__pagination[aria-busy='true'] .product-grid__page-button {
    cursor: wait;
    pointer-events: none;
  }

  @media screen and (min-width: 750px) {
    .product-grid__pagination {
      padding-block: var(--spacing-xl);
    }

    .button.product-grid__page-button {
      --button-font-size: var(--font-button-sm-size);
      --button-font-weight: var(--font-button-sm-weight);
      --button-line-height: var(--font-button-sm-line-height);
      --button-letter-spacing: var(--font-button-sm-letter-spacing);
      --button-padding-x: var(--spacing-xl);
      --button-padding-y: var(--spacing-3xs);
      text-transform: none;
    }
  }
/* END_SNIPPET:product-grid-pagination */

/* START_SNIPPET:product-price (INDEX:272) */
.product-price {
    display: block;
    width: 100%;
    min-width: 0;
    /* Hairline owner also owns the space below it: the divider gap is the
       total, so only what the form gap does not cover becomes margin. Only
       `product-form` sets the variables, so the quick add drawer (flex gap)
       keeps a plain edge. */
    margin-block-end: max(0px, calc(var(--product-form-divider-gap, 0px) - var(--product-form-gap, 0px)));
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
    border-block-end: 1px solid var(--border-secondary);
  }

  .product-price__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .product-price__values {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 auto;
    gap: var(--spacing-3xs);
    align-items: center;
    font-family: var(--font-primary--family);
    font-size: var(--font-button-lg-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .product-price__row > .shopify-block {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .product-price__row > .shopify-block > * {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .product-price__compare {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-skip-ink: none;
  }

  .product-price__current {
    color: var(--text-primary);
  }

  .product-price__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

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

  @media screen and (min-width: 750px) {
    .product-price__values {
      font-size: var(--font-body-xl-size, 1rem);
    }
  }
/* END_SNIPPET:product-price */

/* START_SNIPPET:product-reviews (INDEX:273) */
.product-reviews {
    /* Figma Product Card/Reviews — 136×21; gap spacing-5xs between stars / rating / count */
    --product-reviews-star-size: var(--size-3);
    --product-reviews-stars-width: calc(
      (5 * var(--product-reviews-star-size)) + (4 * var(--spacing-6xs))
    );

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-5xs);
    min-height: 21px;
    margin: 0;
    padding: var(--spacing-none);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    text-decoration: none;
  }

  .product-reviews:hover .product-reviews__rating,
  .product-reviews:hover .product-reviews__count {
    text-decoration: underline;
  }

  .product-reviews__stars {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--product-reviews-stars-width);
    height: var(--product-reviews-star-size);
    overflow: hidden;
    color: var(--product-reviews-star-color, var(--text-brand));
  }

  .product-reviews__stars-track,
  .product-reviews__stars-fill {
    display: flex;
    gap: var(--spacing-6xs);
    align-items: center;
    width: var(--product-reviews-stars-width);
    height: var(--product-reviews-star-size);
  }

  .product-reviews__stars-track {
    opacity: 0.6;
  }

  .product-reviews__stars-fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
    width: var(--product-reviews-fill, 100%);
  }

  .product-reviews__star {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--product-reviews-star-size);
    height: var(--product-reviews-star-size);
    overflow: hidden;
  }

  .product-reviews__star-icon {
    display: block;
    width: var(--product-reviews-star-size);
    height: var(--product-reviews-star-size);
  }

  .product-reviews__rating,
  .product-reviews__count {
    font-family: var(--font-primary--family);
    /* Mobile: Body/md 13px; desktop: Body/sm 13px (Figma Bold/sm + Mobile/md) */
    font-size: var(--font-body-md-size);
    line-height: var(--font-body-md-line-height);
    letter-spacing: var(--font-body-md-letter-spacing);
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .product-reviews__rating {
    font-weight: var(--font-weight-semibold);
  }

  .product-reviews__count {
    font-weight: var(--font-weight-regular);
  }

  @media screen and (min-width: 768px) {
    .product-reviews__rating,
    .product-reviews__count {
      font-size: var(--font-body-sm-size);
      line-height: var(--font-body-sm-line-height);
      letter-spacing: var(--font-body-sm-letter-spacing);
    }
  }

  .product-reviews--compact {
    min-height: 0;
    background-color: transparent;
  }

  .product-reviews--compact .product-reviews__stars {
    width: var(--product-reviews-star-size);
    overflow: visible;
    color: var(--product-reviews-star-color, var(--text-brand));
  }

  .product-reviews--compact .product-reviews__rating,
  .product-reviews--compact .product-reviews__count {
    font-size: var(--font-body-2xs-size, 11px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
  }
/* END_SNIPPET:product-reviews */

/* START_SNIPPET:product-stock (INDEX:281) */
.product-stock {
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--spacing-5xs);
    align-items: center;
    margin: 0;
    padding-inline: var(--spacing-5xs);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

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

  .product-stock__dot {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--text-brand) 25%, transparent);
  }

  .product-stock__dot::after {
    content: '';
    position: absolute;
    inset: 2.5px;
    border-radius: var(--radius-full);
    background-color: var(--text-brand);
  }

  .product-stock--oos {
    font-weight: var(--font-weight-semibold, 600);
    white-space: normal;
    text-align: start;
  }

  .product-stock--oos .product-stock__dot {
    background-color: color-mix(in srgb, var(--system-sale) 25%, transparent);
  }

  .product-stock--oos .product-stock__dot::after {
    background-color: var(--system-sale);
  }

  @media screen and (min-width: 768px) {
    .product-stock {
      font-size: var(--font-body-sm-size);
    }

    .product-stock--oos {
      text-align: end;
    }
  }
/* END_SNIPPET:product-stock */

/* START_SNIPPET:quantity-selector (INDEX:283) */
.quantity-selector {
    display: inline-flex;
    flex-shrink: 0;
    gap: var(--spacing-2xs);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: var(--size-10);
    min-width: max-content;
    padding-block: var(--spacing-6xs);
    padding-inline: var(--spacing-3xs);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
  }

  .quantity-selector__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .quantity-selector__button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .quantity-selector__button:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }

  .quantity-selector__input {
    flex: 0 0 auto;
    width: 2.25rem;
    min-width: 2.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-button-lg-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.4;
    text-align: center;
    font-feature-settings: var(--font-feature-settings);
    appearance: textfield;
  }

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

  .quantity-selector__input:focus-visible {
    outline: 2px solid var(--border-brand-dark, var(--text-brand));
    outline-offset: 2px;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-gallery (INDEX:284) */
.quick-add-gallery {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .quick-add-gallery__carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background-color: var(--surface-secondary);
  }

  .quick-add-gallery__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .quick-add-gallery__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--surface-secondary);
  }

  .quick-add-gallery__image {
    display: block;
    width: 100%;
    height: auto;
    /* Splide stretches slides to the flex line, so a square set on the slide
       leaves Safari with nothing to size that line from and the whole gallery
       collapses to 0px high. Sizing the image gives the line a real height. */
    aspect-ratio: 1;
    object-fit: contain;
  }

  .quick-add-gallery__awards {
    --product-awards-size: var(--size-10);

    position: absolute;
    z-index: 2;
    inset-block-start: var(--spacing-sm);
    inset-inline-start: var(--spacing-sm);
  }

  .quick-add-gallery__arrows {
    position: absolute;
    z-index: 3;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--spacing-2xs);
    pointer-events: none;
  }

  .quick-add-gallery__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    padding: var(--spacing-5xs);
    border: 0;
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, var(--surface-primary) 80%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    pointer-events: auto;
    backdrop-filter: blur(20px);
  }

  .quick-add-gallery__arrow:disabled {
    opacity: 0.5;
    cursor: default;
  }

  .quick-add-gallery__arrow:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }
/* END_SNIPPET:quick-add-gallery */

/* START_SNIPPET:quick-add (INDEX:285) */
.quick-add {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
  }

  .quick-add__button {
    /* Figma 11227:10550 (Primary-Icon, Hover) fades the fill to 60% and leaves
       the icon solid, so the alpha sits on the background, not the element. */
    --quick-add-hover-bg: color-mix(in srgb, var(--surface-brand-dark) 60%, transparent);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--size-8);
    height: var(--size-8);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-brand-dark);
    color: var(--text-invert);
    cursor: pointer;
    appearance: none;
    transition: opacity 0.2s ease, background-color 0.2s ease;
  }

  .quick-add__button:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .quick-add__button--link {
    text-decoration: none;
  }

  /* Sold out still reaches the product page for the back-in-stock form, so it
     keeps the muted look of the old disabled button without losing the click. */
  .quick-add__button--sold-out {
    opacity: 0.3;
  }

  @media screen and (hover: hover) {
    .quick-add__button:hover:not(:disabled):not([aria-disabled='true']) {
      background-color: var(--quick-add-hover-bg);
    }
  }

  .quick-add__button:disabled,
  .quick-add__button[aria-disabled='true'] {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .quick-add--loading .quick-add__button {
    opacity: 0.7;
    cursor: wait;
  }

  .quick-add--error .quick-add__button {
    background-color: var(--text-secondary);
  }

  .quick-add__icon {
    --quick-add-icon-size: 1.125rem;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--quick-add-icon-size);
    height: var(--quick-add-icon-size);
    color: inherit;
  }

  .quick-add__icon .icon {
    display: block;
    width: var(--quick-add-icon-size);
    height: var(--quick-add-icon-size);
    min-width: var(--quick-add-icon-size);
    min-height: var(--quick-add-icon-size);
  }

  /* Stays in the accessibility tree at every breakpoint so the control's name
     matches the label desktop shows. Only the visual presentation changes. */
  .quick-add__desktop-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .quick-add__placeholder {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body-sm-size, 0.75rem);
    line-height: var(--font-body-sm-line-height, 1.4);
  }

  @media screen and (min-width: 750px) {
    .quick-add__button--desktop-label .quick-add__icon {
      display: none;
    }

    .quick-add__desktop-label {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      clip-path: none;
      font-family: var(--font-subheading--family);
      font-size: var(--font-button-sm-size);
      font-weight: var(--font-button-sm-weight);
      line-height: var(--font-button-sm-line-height);
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:rapid-search-settings (INDEX:288) */
#rps_search_overlay,
  #rapid-search-results,
  #search-results-mobile,
  #rapid-search-mask,
  #rps_sticky_widget,
  .rps_sticky_widget,
  .rps_sticky_widget_top_right {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
/* END_SNIPPET:rapid-search-settings */

/* START_SNIPPET:running-cost-calculator (INDEX:290) */
.running-cost {
    --running-cost-target: 44px;
    --running-cost-message-width: 150px;
    --running-cost-save-copy-width: 238px;

    /* Save pill gradient from the Figma SaveGraphic. Tints of the brand green. */
    --running-cost-pill-start: color-mix(in srgb, var(--surface-brand-light) 20%, transparent);
    --running-cost-pill-mid: color-mix(in srgb, var(--surface-brand-dark) 50%, transparent);
    --running-cost-pill-end: color-mix(in srgb, var(--surface-brand-dark) 85%, black);
  }

  .running-cost [hidden] {
    display: none;
  }

  /* Right-hand drawer. Left corners follow Figma radius/xl. */
  .running-cost__dialog {
    --running-cost-drawer-width: 31.25rem;
    --running-cost-drawer-duration: 300ms;

    inset-block: 0;
    inset-inline: auto 0;
    width: min(100vw, var(--running-cost-drawer-width));
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: -4px 0 24px var(--shadow-xs-color);
  }

  .running-cost__dialog[open] {
    animation: running-cost-slide-in var(--running-cost-drawer-duration) ease;
  }

  .running-cost__dialog::backdrop {
    background-color: color-mix(in srgb, var(--text-primary) 40%, transparent);
  }

  .running-cost__dialog[open]::backdrop {
    animation: running-cost-fade-in var(--running-cost-drawer-duration) ease;
  }

  .running-cost__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: var(--surface-primary);
    color: var(--text-primary);
  }

  .running-cost__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-sm) 0;
  }

  .running-cost__screen {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-sm) var(--spacing-xl);
  }

  .running-cost__title,
  .running-cost__result,
  .running-cost__estimated,
  .running-cost__intro,
  .running-cost__product,
  .running-cost__power,
  .running-cost__label,
  .running-cost__suffix,
  .running-cost__error,
  .running-cost__callout-text,
  .running-cost__results-label,
  .running-cost__save-label,
  .running-cost__save-amount,
  .running-cost__save-note,
  .running-cost__compare-brand,
  .running-cost__compare-product,
  .running-cost__compare-cost,
  .running-cost__info {
    margin: 0;
    font-family: var(--font-primary--family);
    font-feature-settings: var(--font-feature-settings);
  }

  .running-cost__title {
    font-family: var(--font-heading--family);
    font-size: var(--font-title-md-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--font-title-md-line-height);
  }

  .running-cost--results .running-cost__title {
    font-size: var(--font-title-sm-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-title-sm-line-height);
  }

  .running-cost__close,
  .running-cost__tooltip-toggle,
  .running-cost__tab {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
  }

  .running-cost__close {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
  }

  .running-cost__close::before {
    position: absolute;
    inset: calc(var(--spacing-2xs) * -1);
    content: '';
  }

  .running-cost__intro,
  .running-cost__suffix,
  .running-cost__callout-text,
  .running-cost__compare-product {
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
  }

  .running-cost__intro {
    font-size: var(--font-body-sm-size);
    color: var(--text-primary);
  }

  .running-cost__estimated,
  .running-cost__label {
    font-family: var(--font-heading--family);
    font-size: var(--font-title-xs-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
  }

  .running-cost__product {
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .running-cost__product-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
  }

  .running-cost__power {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5xs);
    font-size: var(--font-body-sm-size);
    line-height: 1.4;
  }

  .running-cost__power-label {
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
  }

  .running-cost__power-value {
    font-size: var(--font-body-xs-size);
    font-weight: var(--font-weight-regular);
  }

  .running-cost__power--missing {
    color: var(--text-secondary);
  }

  .running-cost__callout {
    display: flex;
    gap: var(--spacing-2xs);
    align-items: flex-start;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-invert);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px var(--shadow-xs-color);
  }

  .running-cost__info {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--size-6);
    height: var(--size-6);
    border-radius: var(--radius-full);
    background-color: var(--surface-brand-light);
    font-size: var(--font-body-xs-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
  }

  .running-cost__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .running-cost__label-row {
    display: flex;
    gap: var(--spacing-3xs);
    align-items: center;
  }

  .running-cost__tooltip {
    position: relative;
  }

  .running-cost__tooltip-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-4);
    height: var(--size-4);
    list-style: none;
  }

  .running-cost__tooltip-toggle::-webkit-details-marker,
  .running-cost__tooltip-toggle::marker {
    display: none;
    content: '';
  }

  .running-cost__tooltip-panel {
    position: absolute;
    z-index: 1;
    inset-inline-start: 0;
    width: min(18rem, 70vw);
    margin-block-start: var(--spacing-5xs);
    padding: var(--spacing-2xs);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px var(--shadow-xs-color);
    font-size: var(--font-body-sm-size);
    line-height: 1.4;
  }

  .running-cost__price-row {
    display: flex;
    gap: var(--spacing-3xs);
    align-items: center;
  }

  .running-cost__currency {
    flex-shrink: 0;
    font-family: var(--font-primary--family);
    font-size: var(--font-body-xl-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .running-cost__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--spacing-2xs);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-xl-size);
    line-height: 1.4;
  }

  .running-cost__input[aria-invalid='true'] {
    border-color: var(--system-sale);
  }

  .running-cost__suffix {
    flex-shrink: 0;
  }

  .running-cost__error {
    color: var(--system-sale);
    font-size: var(--font-body-sm-size);
    line-height: 1.4;
  }

  .running-cost__next,
  .running-cost__add,
  .running-cost__back {
    min-height: var(--size-10);
    height: var(--size-10);
  }

  .running-cost__results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .running-cost__tabs-bar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
    align-items: flex-start;
    padding-block-start: var(--spacing-xs);
    border-top: 1px solid var(--border-secondary);
  }

  .running-cost__results-label {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: var(--font-button-md-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .running-cost__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-md);
    align-items: flex-start;
    width: 100%;
  }

  .running-cost__tab {
    padding-block-end: var(--spacing-5xs);
    border-bottom: 1px solid transparent;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-button-md-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .running-cost__tab[aria-selected='true'] {
    border-bottom-color: var(--border-brand-dark);
  }

  .running-cost__panel-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .running-cost__figure {
    display: flex;
    gap: var(--spacing-3xs);
    align-items: center;
  }

  .running-cost__cost-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--text-brand);
  }

  .running-cost__result {
    font-family: var(--font-heading--family);
    font-size: var(--font-title-xs-size);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
  }

  .running-cost__result:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .running-cost__compare {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .running-cost__compare-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xs);
  }

  .running-cost__compare-row {
    display: flex;
    gap: var(--spacing-xs);
    align-items: baseline;
    justify-content: space-between;
  }

  .running-cost__compare-name {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6xs);
    min-width: 0;
  }

  .running-cost__compare-brand,
  .running-cost__compare-cost {
    color: var(--text-secondary);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .running-cost__compare-item--meaco .running-cost__compare-brand,
  .running-cost__compare-item--meaco .running-cost__compare-cost {
    color: var(--text-brand);
  }

  /* Bars share one scale: the dearest cost fills the track, cheaper ones are shorter. */
  .running-cost__track {
    --running-cost-bar-duration: 700ms;

    display: block;
    width: 100%;
    height: var(--size-6);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--surface-secondary);
  }

  .running-cost__bar {
    display: block;
    width: calc(var(--running-cost-bar, 0) * 100%);
    height: 100%;
    border-radius: var(--radius-xl);
    background-color: var(--border-primary);
    transition: width var(--running-cost-bar-duration) cubic-bezier(0.22, 1, 0.36, 1);
  }

  .running-cost__compare-item--meaco .running-cost__bar {
    background-color: var(--surface-brand-dark);
  }

  .running-cost__save {
    --running-cost-pig-size: 56px;
    --running-cost-pig-overhang: calc(var(--running-cost-pig-size) * 0.5);

    position: relative;
    display: flex;
    gap: 0;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-xs);
    border-radius: var(--radius-lg);
    background-color: var(--surface-brand-dark);
    color: var(--text-invert);
  }

  /* Room for the pig between the amount and the message. Without a message the copy fills the card. */
  .running-cost__save--with-message {
    gap: var(--running-cost-pig-overhang);
  }

  .running-cost__save-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-3xs);
    align-items: flex-start;
    min-width: 0;
  }

  .running-cost__save--with-message .running-cost__save-copy {
    flex-basis: calc(var(--running-cost-save-copy-width) - var(--running-cost-pig-overhang));
    max-width: calc(var(--running-cost-save-copy-width) - var(--running-cost-pig-overhang));
  }

  .running-cost__save-label {
    color: var(--text-invert);
    font-size: var(--font-title-lg-size);
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
  }

  .running-cost__save-amount {
    display: flex;
    color: var(--text-invert);
    font-size: var(--font-title-md-size);
    font-weight: var(--font-weight-regular);
    line-height: 1.35;
  }

  .running-cost__save-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-5xs) var(--spacing-2xs);
    border-radius: var(--radius-full);
    background-image: linear-gradient(
      90deg,
      var(--running-cost-pill-start) 0%,
      var(--running-cost-pill-mid) 53%,
      var(--running-cost-pill-end) 100%
    );
  }

  .running-cost__save-note {
    color: var(--text-invert);
    font-size: var(--font-body-2xs-size);
    font-weight: var(--font-weight-regular);
    line-height: 1.4;
    text-wrap: balance;
  }

  .running-cost__save-message {
    position: relative;
    flex: 0 0 auto;
    width: var(--running-cost-message-width);
    max-width: 50%;
    padding: var(--spacing-2xs) var(--spacing-sm) var(--spacing-2xs) var(--spacing-lg);
    border-radius: var(--radius-lg);
    background-color: var(--surface-brand-light);
  }

  /* Pig badge overlaps the top-left corner of the message, as in the Figma SaveGraphic. */
  .running-cost__save-pig {
    position: absolute;
    inset-block-start: calc(var(--running-cost-pig-size) * -0.3);
    inset-inline-start: calc(var(--running-cost-pig-size) * -0.5);
    display: flex;
    width: var(--running-cost-pig-size);
    height: var(--running-cost-pig-size);
    color: var(--text-brand);
  }

  .running-cost__save-message-text {
    margin: 0;
    color: var(--text-brand);
    font-family: var(--font-primary--family);
    font-feature-settings: var(--font-feature-settings);
    font-size: var(--font-body-xs-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
  }

  .running-cost__actions {
    display: flex;
    gap: var(--spacing-xs);
  }

  .running-cost__actions .button {
    flex: 1 1 0;
  }

  .running-cost__close:focus-visible,
  .running-cost__tooltip-toggle:focus-visible,
  .running-cost__input:focus-visible,
  .running-cost__tab:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  @keyframes running-cost-slide-in {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0);
    }
  }

  @keyframes running-cost-fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @media screen and (min-width: 750px) {
    .running-cost__dialog {
      border-start-start-radius: var(--radius-xl);
      border-end-start-radius: var(--radius-xl);
    }

    .running-cost__header {
      padding-inline: var(--spacing-xl);
    }

    .running-cost__screen {
      padding-inline: var(--spacing-xl);
    }

    .running-cost__tabs-bar {
      flex-direction: row;
      gap: var(--spacing-md);
    }

    .running-cost__results-label {
      padding-block-end: var(--spacing-5xs);
    }

    .running-cost__tabs {
      flex-wrap: wrap;
      width: auto;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .running-cost__dialog[open],
    .running-cost__dialog[open]::backdrop {
      animation: none;
    }

    .running-cost__bar {
      transition: none;
    }
  }
/* END_SNIPPET:running-cost-calculator */

/* START_SNIPPET:search-result-card (INDEX:291) */
.search-result-card {
    --search-result-card-arrow-size: 28px;
    --search-result-card-arrow-inset: var(--spacing-3xs, 8px);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    width: 100%;
    border-radius: var(--radius-lg, 12px);
    background-color: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
  }

  .search-result-card--page {
    --search-result-card-arrow-size: 36px;
    --search-result-card-arrow-inset: var(--spacing-2xs, 12px);

    flex-direction: row;
    align-items: center;
  }

  .search-result-card:focus-visible {
    outline: 2px solid var(--border-brand-dark, #4d9d34);
    outline-offset: 2px;
  }

  .search-result-card__media {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 760 / 460;
    border-start-start-radius: var(--radius-md, 8px);
    border-start-end-radius: var(--radius-md, 8px);
    background-color: var(--surface-secondary);
  }

  .search-result-card__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .search-result-card__image--placeholder {
    color: var(--text-secondary);
  }

  .search-result-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-5xs, 4px);
    align-items: flex-start;
    min-width: 0;
    padding-block: var(--spacing-sm, 20px);
    padding-inline-start: var(--spacing-sm, 20px);
    padding-inline-end: var(--spacing-md, 24px);
  }

  .search-result-card--page .search-result-card__content {
    padding-block: var(--spacing-2xs, 12px);
    padding-inline-start: var(--spacing-sm, 20px);
    padding-inline-end: calc(var(--search-result-card-arrow-size) + var(--search-result-card-arrow-inset) + var(--spacing-md, 24px));
  }

  .search-result-card--page .search-result-card__icon {
    width: 24px;
    height: 24px;
  }

  .search-result-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    width: 100%;
    color: var(--text-primary);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .search-result-card--page .search-result-card__title {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-result-card__excerpt {
    overflow: hidden;
    margin: 0;
    width: 100%;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-result-card__arrow {
    position: absolute;
    top: 50%;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--search-result-card-arrow-size);
    height: var(--search-result-card-arrow-size);
    margin-inline: var(--search-result-card-arrow-inset);
    color: var(--text-primary);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .search-result-card--page .search-result-card__arrow {
    display: inline-flex;
  }

  .search-result-card__icon {
    width: 16px;
    height: 16px;
  }

  @media screen and (min-width: 750px) {
    .search-result-card {
      --search-result-card-arrow-size: 36px;
      --search-result-card-arrow-inset: var(--spacing-2xs, 12px);
      flex-direction: row;
      align-items: center;
      min-height: 109px;
    }

    .search-result-card__media {
      width: 180px;
      height: 109px;
      aspect-ratio: auto;
      border-radius: var(--radius-md, 8px);
    }

    .search-result-card__content {
      padding-block: var(--spacing-sm, 20px);
      padding-inline-start: var(--spacing-sm, 20px);
      padding-inline-end: calc(var(--search-result-card-arrow-size) + var(--search-result-card-arrow-inset) + var(--spacing-md, 24px));
    }

    .search-result-card__arrow {
      display: inline-flex;
    }

    .search-result-card__icon {
      width: 24px;
      height: 24px;
    }

    .search-result-card--page {
      min-height: 0;
    }

    .search-result-card--page .search-result-card__content {
      padding-block: var(--spacing-sm, 20px);
    }
  }
/* END_SNIPPET:search-result-card */

/* START_SNIPPET:shop-by-collection-styles (INDEX:292) */
.shop-by-collection {
    --doorway-card-min-width: 256px;

    padding-block-start: var(--shop-by-collection-padding-top-mobile, var(--shop-by-collection-padding-top));
    padding-block-end: var(--shop-by-collection-padding-bottom-mobile, var(--shop-by-collection-padding-bottom));
    color: var(--color-foreground);
  }

  .shop-by-collection__inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    min-width: 0;
  }

  .shop-by-collection__header {
    text-align: var(--shop-by-collection-title-align, left);
  }

  .shop-by-collection__header .text-block {
    text-align: var(--shop-by-collection-title-align, left);
  }

  .shop-by-collection__placeholder {
    margin: 0;
    color: var(--color-foreground);
    opacity: 0.7;
  }

  .shop-by-collection__cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
  }

  .shop-by-collection__list {
    min-width: 0;
  }

  /* Every layout rule below is gated on `:not(.is-initialized)`: once Splide mounts
     it sizes and positions the slides itself, and a stray grid or flex-basis here
     would fight the track it is translating. `> *` covers the block wrappers both
     before and after carousel.js promotes them to slides. */
  .shop-by-collection__carousel:not(.is-initialized) .carousel__list > * {
    min-width: var(--doorway-card-min-width, 256px);
  }

  /* A carousel layout shows the next card running off the trailing edge, so the
     track pulls back out of the shared inline inset. Only the track does: the
     section keeps the inset so the title, the controls and a static row that
     fits all stay on the content column. Each breakpoint follows its own layout
     setting, hence the reset and the desktop rule from 750px below. */
  .shop-by-collection--mobile-carousel .carousel__track {
    margin-inline-end: calc(var(--section-padding-inline) * -1);
  }

  /* Mobile layouts.
     The `.shop-by-collection__carousel` class is here to win a specificity tie,
     not to scope: carousel.css loads after the compiled section stylesheet, and
     `carousel--per-page` / `carousel--peek` size slides at the same 0 4 0 as the
     plain form of these rules. The modifier follows the mobile layout, so a row
     or grid also carries `carousel--per-page` — without the extra class its
     full-track sizing would win, falsely overflow, and mount a one-up carousel. */
  .shop-by-collection--mobile-row .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list {
    flex-wrap: nowrap;
    justify-content: var(--shop-by-collection-justify, stretch);
  }

  .shop-by-collection--mobile-row .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list > * {
    flex: 1 1 0;
  }

  .shop-by-collection--mobile-grid .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .shop-by-collection--mobile-grid .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list > * {
    flex: unset;
    width: auto;
  }

  .shop-by-collection__carousel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 24px);
    min-width: 0;
  }

  /* Only paged content needs controls, and carousel.js sets `is-overflow` once the
     cards no longer fit — until then the row is static and the controls are noise. */
  .shop-by-collection__controls {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg, 32px);
  }

  .carousel.is-overflow .shop-by-collection__controls {
    display: flex;
  }

  /* Arrows are desktop-only; mobile pages by dragging. */
  .shop-by-collection__arrows {
    display: none;
    align-items: center;
    gap: var(--spacing-xs, 16px);
  }

  .shop-by-collection__arrow {
    --shop-by-collection-arrow-size: 40px;
    --shop-by-collection-arrow-fill: color-mix(in srgb, currentColor 10%, transparent);

    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    width: var(--shop-by-collection-arrow-size);
    height: var(--shop-by-collection-arrow-size);
    padding: 0;
    border: 1px solid var(--border-invert);
    border-radius: 50%;
    background: var(--shop-by-collection-arrow-fill);
    color: inherit;
    cursor: pointer;
  }

  .shop-by-collection__arrow:disabled {
    --shop-by-collection-arrow-fill: color-mix(in srgb, currentColor 4%, transparent);

    border-color: transparent;
    opacity: 0.5;
    cursor: default;
  }

  .shop-by-collection__dots:empty {
    display: none;
  }

  .shop-by-collection__dots {
    display: flex;
  }

  .shop-by-collection__dots .carousel__dots {
    gap: var(--spacing-5xs, 4px);
  }

  .shop-by-collection__dots .carousel__dot {
    /* Safari paints default blue chrome on <button> without both prefixes and
       an explicit background-color (shorthand `background` is not enough). */
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    color: inherit;
    background-color: currentColor;
    opacity: 0.3;
    cursor: pointer;
  }

  .shop-by-collection__dots .carousel__dot.is-active {
    width: 24px;
    height: 6px;
    opacity: 1;
  }

  @media screen and (min-width: 750px) {
    .shop-by-collection {
      padding-block-start: var(--shop-by-collection-padding-top);
      padding-block-end: var(--shop-by-collection-padding-bottom);
    }

    /* Set on the class, not inline, so it can beat the 256px floor above. */
    .shop-by-collection--desktop-carousel {
      --doorway-card-min-width: 0px;
    }

    .shop-by-collection--mobile-carousel .carousel__track {
      margin-inline-end: 0;
    }

    .shop-by-collection--desktop-carousel .carousel__track {
      margin-inline-end: calc(var(--section-padding-inline) * -1);
    }

    .shop-by-collection__controls {
      justify-content: flex-start;
    }

    .shop-by-collection__arrows {
      display: flex;
    }

    /* Cards share the row until they hit their min-width, at which point they
       overflow and carousel.js pages them at that same width — so mounting the
       carousel never resizes a card. Same specificity note as the mobile rules
       above: `carousel--peek` also applies from 750px, so the extra class stops
       peek sizing winning here and forcing a false overflow.
       `--shop-by-collection-row-card-max-width` lets a host stop a short row
       from stretching its cards; min-width still wins when the cap is below the
       floor, so the overflow-to-carousel behaviour is unchanged. */
    .shop-by-collection--desktop-row .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list {
      display: flex;
      flex-wrap: nowrap;
      justify-content: var(--shop-by-collection-justify, stretch);
    }

    .shop-by-collection--desktop-row .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list > * {
      flex: 1 1 0;
      width: auto;
      max-width: var(--shop-by-collection-row-card-max-width, none);
    }

    .shop-by-collection--desktop-grid .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list {
      display: grid;
      grid-template-columns: repeat(var(--shop-by-collection-columns, 5), minmax(0, 1fr));
      justify-content: var(--shop-by-collection-justify, stretch);
    }

    .shop-by-collection--desktop-grid .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list > * {
      width: auto;
      flex: unset;
    }

    .shop-by-collection--desktop-carousel .shop-by-collection__carousel.carousel:not(.is-initialized) .carousel__list > * {
      flex: 0 0 calc(
        (100% - ((var(--carousel-per-page, 5) - 1) * var(--carousel-gap, 16px)))
        / var(--carousel-per-page, 5)
      );
    }
  }
/* END_SNIPPET:shop-by-collection-styles */

/* START_SNIPPET:social-links (INDEX:294) */
.social-links {
    color: inherit;
  }

  .social-links__list {
    --social-glyph-size: var(--size-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Block-level so the anchor's height is not padded by an inline baseline strut */
  .social-links__item {
    display: flex;
  }

  .social-links__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-8);
    height: var(--size-8);
    color: inherit;
  }

  /*
   * Every logo is drawn on a 24 unit grid but fills a different amount of it,
   * so each is scaled by its longest edge to land in the same optical square.
   * Without this the taller marks (Facebook, TikTok) sit lower than the rest.
   */
  .social-links__link svg {
    width: var(--social-icon-size);
    max-width: none;
    height: var(--social-icon-size);
  }

  .social-links__link .icon--facebook,
  .social-links__link .icon--tiktok {
    --social-icon-size: calc(var(--social-glyph-size) * 24 / 20);
  }

  .social-links__link .icon--instagram,
  .social-links__link .icon--pinterest,
  .social-links__link .icon--youtube {
    --social-icon-size: calc(var(--social-glyph-size) * 24 / 18);
  }

  .social-links__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
  }
/* END_SNIPPET:social-links */

/* START_SNIPPET:subscribe-save (INDEX:299) */
.subscribe-save {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
  }

  .subscribe-save[hidden] {
    display: none;
  }

  .subscribe-save__options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .subscribe-save__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    padding: var(--spacing-xs);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    cursor: pointer;
  }

  .subscribe-save__card:has(.subscribe-save__radio:checked) {
    border-color: var(--border-dark);
  }

  .subscribe-save__card--subscribe:has(.subscribe-save__radio:checked) {
    gap: var(--spacing-xs);
    padding-block-start: var(--spacing-md);
  }

  .subscribe-save__header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    cursor: pointer;
  }

  .subscribe-save__choice {
    display: flex;
    gap: var(--spacing-3xs);
    align-items: center;
    min-width: 0;
  }

  .subscribe-save__radio {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    appearance: none;
    border: 1.25px solid var(--text-primary);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    cursor: pointer;
  }

  .subscribe-save__radio:checked {
    background-image: radial-gradient(
      circle,
      var(--text-primary) 7px,
      transparent 7.5px
    );
  }

  .subscribe-save__radio:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .subscribe-save__label {
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
  }

  .subscribe-save__pricing {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3xs);
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }

  .subscribe-save__badges {
    width: auto;
    flex: 0 0 auto;
  }

  .subscribe-save__badges[hidden] {
    display: none;
  }

  .subscribe-save__badge-item {
    --product-badge-bg: var(--border-brand-light);
  }

  .subscribe-save__badge-item .product-badges__label {
    font-size: var(--font-button-sm-size);
    line-height: var(--font-button-sm-line-height, 1.4);
  }

  .subscribe-save__prices {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: center;
  }

  .subscribe-save__compare {
    color: var(--text-secondary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
    text-decoration: line-through;
  }

  .subscribe-save__compare[hidden] {
    display: none;
  }

  .subscribe-save__price {
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
    white-space: nowrap;
  }

  .subscribe-save__price--one-time {
    font-family: var(--font-accent--family);
  }

  .subscribe-save__details {
    display: none;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
  }

  .subscribe-save__card--subscribe:has(.subscribe-save__radio:checked) .subscribe-save__details {
    display: flex;
  }

  .subscribe-save__usps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5xs);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .subscribe-save__usp {
    display: flex;
    gap: var(--spacing-5xs);
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .subscribe-save__usp-icon {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-primary);
  }

  .subscribe-save__usp-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background-color: var(--border-brand-light);
    transform: translate(-50%, -50%);
  }

  .subscribe-save__usp-icon .icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 12px;
    height: 12px;
  }

  .subscribe-save__usp-text {
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-accent--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-body-md-line-height, 1.4);
  }

  .subscribe-save__frequency {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .subscribe-save__select {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding-block: var(--spacing-2xs);
    padding-inline-start: var(--spacing-2xs);
    padding-inline-end: var(--spacing-lg);
    overflow: hidden;
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.04);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: var(--font-body-md-line-height, 1.4);
    font-feature-settings: var(--font-feature-settings);
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
    appearance: none;
    cursor: pointer;
  }

  .subscribe-save__select:focus,
  .subscribe-save__select:focus-visible {
    outline: none;
    border-color: var(--border-secondary);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.04);
  }

  .subscribe-save__select-icon {
    position: absolute;
    top: 50%;
    right: var(--spacing-3xs);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-primary);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .subscribe-save__select-icon .icon {
    display: block;
    width: 20px;
    height: 20px;
  }

  .subscribe-save .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* END_SNIPPET:subscribe-save */

/* START_SNIPPET:ugc-card (INDEX:302) */
.ugc-card {
    --ugc-card-media-height: 360px;
    --ugc-card-media-height-active: 429px;
    --ugc-card-gap: var(--spacing-3xs, 8px);
    --ugc-card-radius: var(--radius-lg, 12px);
    --ugc-card-cart-size: 32px;
    --ugc-card-cart-icon: 18px;
    --ugc-card-product-height: 60px;
    --ugc-card-active-padding-end: var(--spacing-5xs, 4px);
    /* Collapsed accordion row: 24px icon box + the row's block padding. */
    --ugc-card-transcript-height: calc(24px + var(--spacing-2xs) * 2);
    --ugc-card-transcript-max-height: calc(
      var(--ugc-card-media-height-active) - var(--spacing-md)
    );

    display: flex;
    flex-direction: column;
    gap: var(--ugc-card-gap);
    align-items: stretch;
    width: 100%;
    min-width: 0;
    padding-block-end: 0;
    transition: padding-block-end 0.35s ease;
  }

  .ugc-card__media {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--ugc-card-media-height);
    overflow: hidden;
    border-radius: var(--ugc-card-radius);
    background-color: var(--surface-secondary);
    color: inherit;
    text-decoration: none;
    transition: height 0.35s ease;
  }

  .ugc-card__media-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
  }

  .ugc-card__media-link:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: -2px;
  }

  .ugc-card__image,
  .ugc-card__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ugc-card__video {
    pointer-events: none;
  }

  .ugc-card__media-controls {
    position: absolute;
    right: var(--spacing-2xs);
    bottom: var(--spacing-2xs);
    z-index: 4;
    display: flex;
    gap: var(--spacing-3xs);
    align-items: center;
  }

  .ugc-card__media-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--size-10);
    min-height: var(--size-10);
    padding: var(--spacing-3xs);
    border: 0;
    border-radius: var(--radius-full);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    cursor: pointer;
  }

  .ugc-card__media-control--audio {
    gap: var(--spacing-3xs);
    padding-inline: var(--spacing-2xs);
  }

  .ugc-card__media-control:focus-visible {
    outline: var(--focus-ring-size) solid var(--text-brand);
    outline-offset: var(--focus-ring-offset);
  }

  .ugc-card__media-control[hidden] {
    display: none;
  }

  .carousel.is-initialized .splide__slide--clone .ugc-card__media-control--audio {
    display: none;
  }

  .ugc-card__media-control [hidden] {
    display: none;
  }

  /* The track only reserves the collapsed summary row (see
     sections/ugc-carousel.liquid), so anchor the disclosure to the bottom of
     that row. An open transcript then grows up over the media and scrolls at
     its cap, instead of stretching the card past the reserved slide height. */
  .ugc-card__transcript {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    height: var(--ugc-card-transcript-height);
  }

  .ugc-card__transcript .accordion-row {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    max-height: var(--ugc-card-transcript-max-height);
    overflow-y: auto;
    box-shadow: 0 2px 4px var(--shadow-xs-color);
  }

  .carousel.is-initialized .ugc-card__transcript {
    display: none;
  }

  .carousel.is-initialized .is-active .ugc-card__transcript {
    display: block;
  }

  .carousel.is-initialized .splide__slide--clone .ugc-card__transcript {
    display: none;
  }

  .ugc-card__product {
    position: relative;
    display: none;
    align-items: center;
    width: 100%;
    height: var(--ugc-card-product-height);
    overflow: hidden;
    border: 1px solid var(--border-invert, #f5f5f5);
    border-radius: var(--ugc-card-radius);
    background-color: var(--surface-primary, #fff);
    box-shadow: 0 2px 4px rgb(0 0 0 / 4%);
    color: var(--text-primary);
  }

  .ugc-card__product-link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  .ugc-card__product-link:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: -2px;
  }

  .ugc-card__product-thumb {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 54px;
    align-self: stretch;
    padding: 0;
    overflow: hidden;
  }

  .ugc-card__product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ugc-card__product-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    min-width: 0;
    padding: var(--spacing-3xs, 8px) calc(var(--ugc-card-cart-size) + var(--spacing-3xs, 8px) + var(--spacing-3xs, 8px)) var(--spacing-3xs, 8px) var(--spacing-5xs, 4px);
    font-size: 13px;
    line-height: 1.4;
  }

  .ugc-card__product-title {
    overflow: hidden;
    font-weight: var(--font-weight-medium, 500);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ugc-card__product-price {
    font-weight: var(--font-weight-regular, 400);
  }

  .ugc-card__quick-add {
    position: absolute;
    top: 50%;
    right: var(--spacing-3xs, 8px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  .ugc-card__quick-add .quick-add__button {
    width: var(--ugc-card-cart-size);
    height: var(--ugc-card-cart-size);
  }

  .ugc-card__quick-add .quick-add__icon {
    width: var(--ugc-card-cart-icon);
    height: var(--ugc-card-cart-icon);
    min-width: var(--ugc-card-cart-icon);
    min-height: var(--ugc-card-cart-icon);
  }

  .ugc-card__quick-add .quick-add__icon .icon {
    width: var(--ugc-card-cart-icon);
    height: var(--ugc-card-cart-icon);
    min-width: var(--ugc-card-cart-icon);
    min-height: var(--ugc-card-cart-icon);
  }

  /* Active slide — taller media + product strip (when present) */
  .splide__slide.is-active .ugc-card,
  .carousel:not(.is-initialized) .ugc-card--has-product {
    --ugc-card-media-height: var(--ugc-card-media-height-active);
    padding-block-end: var(--ugc-card-active-padding-end);
  }

  .splide__slide.is-active .ugc-card--has-product .ugc-card__product,
  .carousel:not(.is-initialized) .ugc-card--has-product .ugc-card__product {
    display: flex;
  }

  @media screen and (min-width: 750px) {
    .ugc-card {
      --ugc-card-media-height: 380px;
      --ugc-card-media-height-active: 460px;
      --ugc-card-product-height: 80px;
    }

    .ugc-card__product-thumb {
      width: 64px;
    }

    .ugc-card__product-copy {
      gap: 2px;
      padding: var(--spacing-3xs, 8px) calc(var(--ugc-card-cart-size) + var(--spacing-3xs, 8px) + var(--spacing-3xs, 8px)) var(--spacing-3xs, 8px) var(--spacing-3xs, 8px);
      font-size: 14px;
    }
  }
/* END_SNIPPET:ugc-card */

/* START_SNIPPET:variant-picker (INDEX:304) */
.variant-picker {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
    min-width: 0;
  }

  .variant-picker__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xs);
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .variant-picker__title {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  .variant-picker__option-name {
    font-weight: var(--font-weight-regular, 400);
  }

  .variant-picker__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-5xs);
    align-items: center;
  }

  .variant-picker__list--swatches {
    gap: var(--size-2-5);
  }

  .variant-picker__list--cards {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: stretch;
  }

  .variant-picker__swatch {
    --variant-picker-swatch-inset: var(--spacing-6xs, 2px);
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    box-sizing: border-box;
    width: var(--size-6, 24px);
    height: var(--size-6, 24px);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: transparent;
    cursor: pointer;
  }

  .variant-picker__swatch--selected {
    border-color: var(--border-primary);
  }

  .variant-picker__swatch:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  /* Inset from the ring rather than flex-centring a sized circle, matching the
     product card. Fractional display scaling snapped the centred circle off. */
  .variant-picker__swatch-fill {
    position: absolute;
    inset: var(--variant-picker-swatch-inset);
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background-color: var(--border-secondary);
    background-position: center;
    background-size: cover;
  }

  /* Figma white swatch stroke (#e5e5e5). Every fill keeps a 1px border so the discs stay the same size. */
  .variant-picker__swatch[aria-label="White" i] .variant-picker__swatch-fill {
    --swatch-white-border: #e5e5e5;
    border-color: var(--swatch-white-border);
  }

  /* Sold out stays clickable, keeps its colour, and takes a diagonal strike. */
  .variant-picker__swatch--unavailable .variant-picker__swatch-fill::after {
    content: '';
    position: absolute;
    inset-block: -25%;
    inset-inline-start: 50%;
    width: 1px;
    background-color: var(--border-primary);
    box-shadow: 0 0 0 1px var(--surface-primary);
    transform: translateX(-50%) rotate(45deg);
  }

  .variant-picker__card {
    display: flex;
    flex: 1 1 calc((100% - var(--spacing-xs)) / 2);
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-2xs);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background-color: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-primary--family);
    text-align: left;
    appearance: none;
    cursor: pointer;
  }

  .variant-picker__card--selected {
    border-color: var(--border-dark);
  }

  .variant-picker__card:focus-visible {
    outline: 2px solid var(--border-brand-dark);
    outline-offset: 2px;
  }

  .variant-picker__card--unavailable {
    cursor: pointer;
    opacity: 0.4;
  }

  .variant-picker__card-title {
    color: var(--text-primary);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  .variant-picker__card-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-body-md-size);
    font-weight: var(--font-weight-regular, 400);
    line-height: 1.4;
    font-feature-settings: var(--font-feature-settings);
  }

  @media screen and (min-width: 768px) {
    .variant-picker__title,
    .variant-picker__card-subtitle {
      font-size: var(--font-body-sm-size);
    }

    .variant-picker__card-title {
      font-size: var(--font-body-md-size);
    }

    .variant-picker__option--swatches {
      grid-template-columns: minmax(0, 1fr) max-content;
      gap: var(--spacing-3xs);
    }

    .variant-picker__option--swatches .variant-picker__title {
      grid-column: 1;
      grid-row: 1;
    }

    .variant-picker__option--swatches .product-stock {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }

    .variant-picker__option--swatches .variant-picker__list {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }
/* END_SNIPPET:variant-picker */

/* START_SNIPPET:video-transcript (INDEX:305) */
.video-transcript {
    width: 100%;
    color: var(--text-primary);
  }
/* END_SNIPPET:video-transcript */

/* START_SNIPPET:video (INDEX:306) */
.video-block {
    display: block;
    width: 100%;
    padding-block-start: var(--padding-block-start, 0);
    padding-block-end: var(--padding-block-end, 0);
    padding-inline-start: var(--padding-inline-start, 0);
    padding-inline-end: var(--padding-inline-end, 0);
  }

  .video-block__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--video-aspect-ratio, 16 / 9);
    overflow: hidden;
  }

  .video-block__element {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .video-block__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: var(--video-aspect-ratio, 16 / 9);
    background-color: var(--surface-secondary);
  }
/* END_SNIPPET:video */