/** Shopify CDN: Minification failed

Line 1432:51 Unexpected "`"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:awh-campagne (INDEX:4) */
/* Section-level theme flip. Applied to any block that sits on anthracite,
     so components inside never need to know which ground they are on. */
  .awh-campagne .is-dark {
    --clr-bg: var(--awh-clr-dark-bg);
    --clr-surface: var(--awh-clr-dark-surface);
    --clr-surface-sunken: #1b1f22;
    --clr-ink: var(--awh-clr-dark-ink);
    --clr-ink-muted: var(--awh-clr-dark-ink-muted);
    --clr-line: var(--awh-clr-dark-line);
    --clr-line-strong: #4a5155;
  }

  .awh-campagne .is-dark :focus-visible {
    outline-color: #7fb0ff;
  }

  /* Inside the categories header the title sits beside its lede, not above it,
     so the stacked rhythm does not apply. */
  .awh-campagne .ccats__head .section-title {
    margin-bottom: 0;
  }

  .awh-campagne .is-dark .btn--ghost {
    --btn-bg: transparent;
    --btn-ink: var(--awh-clr-dark-ink);
    --btn-border: #4a5155;
  }

  .awh-campagne .is-dark .btn--ghost:hover {
    --btn-border: var(--awh-clr-dark-ink);
  }

  /* ==========================================================================
     BLOCK: ccats (hier hernoemd; .cats is in dit thema awh-cats)
     ========================================================================== */
  .awh-campagne .ccats__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awh-sp-8);
    margin-bottom: var(--awh-sp-10);
  }

  .awh-campagne .ccats__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--awh-sp-5);
  }

  /* Five cards on a six-column grid: the first two take three columns each,
     the remaining three take two. No orphan row, no filler card. */
  /* No hover state on these cards, and no gate animation on the hero above:
     removed at the client's request. Focus is unaffected — the cards never had
     their own :focus-visible rule and still take the global outline from
     base.css, so keyboard users keep an affordance. */
  .awh-campagne .ccats__card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
  }

  .awh-campagne .ccats__card:nth-child(-n + 2) {
    grid-column: span 3;
  }

  .awh-campagne .ccats__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .awh-campagne .ccats__card:nth-child(-n + 2) .ccats__media {
    aspect-ratio: 16 / 8;
  }

  .awh-campagne .ccats__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .awh-campagne .ccats__body {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-2);
    padding: var(--awh-sp-5) var(--awh-sp-5) var(--awh-sp-6);
    flex: 1;
  }

  .awh-campagne .ccats__title {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-ink);
  }

  /* Every card gets a clarifying subtitle. This replaces four identical
     "GA NAAR DE WEBSITE" buttons that gave the eye no reason to prefer one. */
  .awh-campagne .ccats__sub {
    font-size: var(--awh-fs-sm);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .ccats__go {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: auto;
    padding-top: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
  }

  @media (max-width: 1000px) {

    .awh-campagne .ccats__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .awh-campagne .ccats__card,


    .awh-campagne .ccats__card:nth-child(-n + 2) {
      grid-column: span 1;
    }

    .awh-campagne .ccats__card:nth-child(-n + 2) .ccats__media {
      aspect-ratio: 16 / 10;
    }

  }

  @media (max-width: 620px) {

    .awh-campagne .ccats__grid {
      grid-template-columns: 1fr;
    }

    .awh-campagne .ccats__head {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--awh-sp-5);
    }

  }

  /* ==========================================================================
     BLOCK: dealers
     ========================================================================== */
  .awh-campagne .dealers__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
  }

  .awh-campagne .dealers__form {
    display: flex;
    gap: var(--awh-sp-3);
    margin-top: var(--awh-sp-8);
    max-width: 440px;
  }

  .awh-campagne .dealers__field {
    flex: 1;
    min-width: 0;
  }

  .awh-campagne .dealers__input {
    width: 100%;
    min-height: 52px;
    padding: var(--awh-sp-3) var(--awh-sp-5);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-md);
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-campagne .dealers__input::placeholder {
    color: var(--awh-steel-light);
  }

  .awh-campagne .dealers__input:hover {
    border-color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .dealers__hint {
    display: block;
    margin-top: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  /* A quiet map stand-in built from the slat rhythm rather than a stock
     illustration — it reads as coverage without pretending to be data. */
  .awh-campagne .dealers__map {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-clr-surface);
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .awh-campagne .dealers__map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
    90deg,
    var(--awh-clr-line) 0,
    var(--awh-clr-line) 1px,
    transparent 1px,
    transparent var(--awh-slat-period)
    );
    opacity: 0.8;
  }

  .awh-campagne .dealers__map-note {
    position: relative;
    text-align: center;
    padding: var(--awh-sp-6);
  }

  .awh-campagne .dealers__map-count {
    display: block;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-4xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
    color: var(--awh-orange);
  }

  .awh-campagne .dealers__map-label {
    display: block;
    margin-top: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  @media (max-width: 900px) {

    .awh-campagne .dealers__inner {
      grid-template-columns: 1fr;
    }

    .awh-campagne .dealers__map {
      aspect-ratio: 16 / 9;
    }

  }

  @media (max-width: 520px) {

    .awh-campagne .dealers__form {
      flex-direction: column;
    }

    .awh-campagne .dealers__form .btn {
      justify-content: center;
    }

  }

  /* ==========================================================================
     BLOCK: trust
     ========================================================================== */
  .awh-campagne .trust {
    --mark-h: 46px;
    --mark-w: clamp(88px, 12vw, 140px);
    background: var(--awh-clr-surface-sunken);
    padding-block: var(--awh-sp-12);
  }

  .awh-campagne .trust__label {
    text-align: center;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
    margin-bottom: var(--awh-sp-8);
  }

  /* Gap is tuned so all six marks hold one row at the 1280px container:
     6 x 140 + 5 x 48 = 1080, inside the 1200px content width. */
  .awh-campagne .trust__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3.4vw, 3rem);
  }

  /* The wrapper needs a definite width AND height: these marks arrive at wildly
     different intrinsic sizes (Metaalunie is 3170x584, ISO is 200x92), and as a
     flex item with the default `min-width: auto` the box would otherwise refuse
     to shrink below the image's natural width and blow the section apart. */
  .awh-campagne .trust__mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    --w: var(--awh-mark-w);
    --h: var(--awh-mark-h);
    inline-size: var(--awh-w);
    block-size: var(--awh-h);
    min-inline-size: 0;
  }

  /* Optical balance: a square mark constrained to the same 46px height as a
     5:1 wordmark reads about a third the size. Square marks therefore get a
     taller box so all six carry roughly equal visual weight. */
  .awh-campagne .trust__mark--square {
    --w: 62px;
    --h: 62px;
  }

  /* Both axes take the same definite token as the wrapper. A percentage
     block-size here does not resolve — the image falls back to the intrinsic
     aspect ratio implied by its width/height attributes and overflows the box. */
  .awh-campagne .trust__mark img {
    inline-size: var(--awh-w);
    block-size: var(--awh-h);
    object-fit: contain;
    object-position: center;
    /* Marks arrive in mixed colours and weights; desaturating settles them
    into one row without misrepresenting any of them. */
    filter: grayscale(1);
    opacity: 0.62;
    transition:
    filter var(--awh-dur-base) var(--awh-ease-out),
    opacity var(--awh-dur-base) var(--awh-ease-out);
  }

  .awh-campagne .trust__mark:hover img {
    filter: grayscale(0);
    opacity: 1;
  }

  /* The Wiśniowski artwork is white. That is correct on the anthracite bands and
     near-invisible on the light certification rows, where it has quietly been
     washing out on the homepage too. A silhouette keeps the wordmark legible
     without touching the asset.

     Placed after the grayscale rule on purpose: both selectors carry the same
     specificity, so source order is what decides which filter wins. */
  .awh-campagne .trust__mark--invert img,

  .awh-campagne .trust__mark--invert:hover img {
    filter: brightness(0);
    opacity: 0.68;
  }

  /* ===== styles/sections/content.css ===== */
  /* ==========================================================================
     BLOCK: faq
     ========================================================================== */
  .awh-campagne .faq {
    background: var(--awh-clr-surface);
    border-block: 1px solid var(--awh-clr-line);
  }

  /* Split rail. The right column is the wider of the two so the questions keep a
     comfortable measure; the left is sized to hold the heading at two or three
     lines without becoming a column of its own. */
  .awh-campagne .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(var(--awh-sp-10), 6vw, var(--awh-sp-20));
    align-items: start;
  }

  .awh-campagne .faq__rail {
    position: sticky;
    /* Clears the 76px sticky masthead, plus breathing room. */
    top: calc(76px + var(--awh-sp-10));
  }

  /* The shared .section-title caps at 20ch and scales to 49px, which is tuned for
     a full-width heading. In a ~40% rail that wraps to five or six lines, so this
     steps it down and lets it use the rail's full width. */
  .awh-campagne .faq__title {
    font-size: clamp(var(--awh-fs-xl), 2.6vw, var(--awh-fs-3xl));
    max-width: none;
  }

  .awh-campagne .faq__aside {
    margin-top: var(--awh-sp-10);
    padding: var(--awh-sp-6);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
  }

  .awh-campagne .faq__aside-title {
    font-family: var(--awh-font-display);
    font-weight: 700;
    font-size: var(--awh-fs-md);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-ink);
  }

  .awh-campagne .faq__aside-text {
    margin-top: var(--awh-sp-2);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .faq__aside-tel {
    display: block;
    margin-top: var(--awh-sp-5);
    font-family: var(--awh-font-display);
    font-weight: 700;
    font-size: var(--awh-fs-xl);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-tight);
    color: var(--awh-clr-ink);
    text-decoration: none;
  }

  .awh-campagne .faq__aside-tel:hover {
    color: var(--awh-clr-accent);
  }

  .awh-campagne .faq__aside-link {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: var(--awh-sp-3);
    font-size: var(--awh-fs-sm);
    font-weight: 500;
    color: var(--awh-clr-accent);
    text-decoration: none;
  }

  .awh-campagne .faq__aside-link:hover {
    text-decoration: underline;
  }

  .awh-campagne .faq__list {
    border-top: 1px solid var(--awh-clr-line);
  }

  .awh-campagne .faq__item {
    border-bottom: 1px solid var(--awh-clr-line);
  }

  .awh-campagne .faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--awh-sp-5);
    padding-block: var(--awh-sp-5);
    cursor: pointer;
    list-style: none;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    line-height: var(--awh-lh-snug);
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-ink);
    /* A <summary> is not an h1–h4, so it misses the hyphenation set in base.css,
    and Dutch questions carry compounds that overflow the column at 320px. */
    hyphens: auto;
    overflow-wrap: break-word;
    min-inline-size: 0;
  }

  .awh-campagne .faq__q::-webkit-details-marker {
    display: none;
  }

  .awh-campagne .faq__q:hover {
    color: var(--awh-clr-accent);
  }

  /* awh-faq draws its plus with two pseudo-element bars and hides one of them
     when the item opens. This section draws the plus as an SVG and rotates the
     whole circle 45° instead. Both rulesets match .faq__icon, so the open state
     came out as the SVG cross plus one leftover bar — the slashed circle. The
     bars are switched off here; the SVG is the one that belongs to this page. */
  .awh-campagne .faq__icon::before,
  .awh-campagne .faq__icon::after {
    content: none;
  }

  .awh-campagne .faq__icon {
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: 50%;
    color: var(--awh-clr-accent);
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .awh-campagne .faq__icon svg {
    inline-size: 14px;
    block-size: 14px;
  }

  .awh-campagne .faq__item[open] .faq__icon {
    transform: rotate(45deg);
  }

  .awh-campagne .faq__a {
    padding-block-end: var(--awh-sp-6);
    padding-inline-end: var(--awh-sp-12);
    max-width: var(--awh-measure);
  }

  .awh-campagne .faq__a p {
    color: var(--awh-clr-ink-muted);
    line-height: var(--awh-lh-relaxed);
  }

  @media (max-width: 940px) {

    .awh-campagne .faq__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--awh-sp-6);
    }

    /* display:contents dissolves the rail so its three children become grid items
         in their own right — that is what lets the aside be re-ordered past the
         list. The row gap then owns the vertical rhythm, so the title's own
         bottom margin has to go or it doubles up. */
    .awh-campagne .faq__rail {
      position: static;
      display: contents;
    }

    .awh-campagne .faq__title {
      font-size: clamp(var(--awh-fs-2xl), 4vw, var(--awh-fs-3xl));
      max-width: 20ch;
      margin-bottom: 0;
    }

    .awh-campagne .faq__aside {
      order: 1;
      margin-top: 0;
    }

  }

  @media (max-width: 560px) {

    .awh-campagne .faq__q {
      font-size: var(--awh-fs-md);
    }

    .awh-campagne .faq__a {
      padding-inline-end: 0;
    }

  }

  .awh-campagne .form {
    display: grid;
    gap: var(--awh-sp-8);
  }

  /* --- field ---------------------------------------------------------------- */
  .awh-campagne .field {
    display: grid;
    gap: var(--awh-sp-2);
    align-content: start;
    min-inline-size: 0;
  }

  .awh-campagne .field--full {
    grid-column: 1 / -1;
  }

  .awh-campagne .field__label {
    display: flex;
    align-items: baseline;
    gap: var(--awh-sp-2);
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    color: var(--awh-clr-ink);
  }

  .awh-campagne .field__req {
    color: var(--awh-clr-accent);
  }

  /* Marking what is optional rather than what is required reads as less
     demanding on a long form, and there are fewer optional fields to mark. */
  .awh-campagne .field__optional {
    font-family: var(--awh-font-mono);
    font-size: 9.5px;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-steel-light);
    font-weight: 400;
  }

  .awh-campagne .field__hint {
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-2);
    font-size: var(--awh-fs-2xs);
    font-weight: 500;
    color: var(--awh-orange-deep);
  }

  .awh-campagne .field__error::before {
    content: "!";
    flex: none;
    inline-size: 15px;
    block-size: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--awh-orange-deep);
    color: #fff;
    font-family: var(--awh-font-mono);
    font-size: 10px;
    line-height: 1;
    margin-block-start: 1px;
  }

  /* --- controls ------------------------------------------------------------- */
  .awh-campagne .control {
    inline-size: 100%;
    min-block-size: 52px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    background: var(--awh-clr-surface);
    color: var(--awh-clr-ink);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-sm);
    font-size: var(--awh-fs-md);
    transition:
    border-color var(--awh-dur-fast) var(--awh-ease-out),
    box-shadow var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-campagne .control::placeholder {
    color: var(--awh-steel-light);
  }

  .awh-campagne .control:hover {
    border-color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .control:focus {
    outline: none;
    border-color: var(--awh-clr-accent);
    box-shadow: 0 0 0 3px var(--awh-orange-tint);
  }

  .awh-campagne .control[aria-invalid="true"] {
    border-color: var(--awh-orange-deep);
  }

  .awh-campagne .control--area {
    min-block-size: 140px;
    resize: vertical;
    line-height: var(--awh-lh-normal);
  }

  .awh-campagne .control-wrap {
    position: relative;
  }

  .awh-campagne .control--select {
    appearance: none;
    padding-inline-end: var(--awh-sp-10);
    cursor: pointer;
  }

  .awh-campagne .control-wrap__chevron {
    position: absolute;
    inset-inline-end: var(--awh-sp-4);
    inset-block-start: 50%;
    translate: 0 -50%;
    color: var(--awh-clr-ink-muted);
    pointer-events: none;
    /* Sized here as well as by the width/height attributes. An absolutely
    positioned SVG with neither defaults to 100% of its containing block,
    which renders the chevron several hundred pixels across. */
    inline-size: 14px;
    block-size: 14px;
  }

  /* --- error summary -------------------------------------------------------- */
  .awh-campagne .errsum {
    padding: var(--awh-sp-5);
    border: 1px solid var(--awh-orange-deep);
    border-inline-start-width: 3px;
    border-radius: var(--awh-radius-sm);
    background: var(--awh-orange-tint);
    display: grid;
    gap: var(--awh-sp-3);
  }

  .awh-campagne .errsum__title {
    font-weight: 700;
    color: var(--awh-clr-ink);
  }

  .awh-campagne .errsum__list {
    margin: 0;
    padding-inline-start: var(--awh-sp-5);
    display: grid;
    gap: var(--awh-sp-1);
    font-size: var(--awh-fs-sm);
  }

  .awh-campagne .errsum__list a {
    color: var(--awh-orange-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* --- success -------------------------------------------------------------- */
  .awh-campagne .formdone {
    display: grid;
    justify-items: start;
    gap: var(--awh-sp-4);
    padding: var(--awh-sp-10);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    max-width: 56ch;
  }

  .awh-campagne .formdone__mark {
    inline-size: 52px;
    block-size: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--awh-clr-ok);
    color: #fff;
  }

  .awh-campagne .formdone__mark svg {
    inline-size: 24px;
    block-size: 24px;
  }

  .awh-campagne .formdone__title {
    font-size: var(--awh-fs-xl);
  }

  .awh-campagne .formdone__body {
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--awh-sp-4);
  }

  .awh-campagne .form__legal {
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink-muted);
    max-width: 44ch;
  }

  .awh-campagne .form__legal a {
    color: var(--awh-clr-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* --------------------------------------------------------------------------
     BLOCK: chero — the one block that matters. An action above the fold.
     -------------------------------------------------------------------------- */
  .awh-campagne .chero {
    position: relative;
    overflow: hidden;
  }

  .awh-campagne .chero__title {
    font-size: clamp(var(--awh-fs-2xl), 4.4vw, var(--awh-fs-4xl));
    line-height: var(--awh-lh-tight);
    max-width: 20ch;
  }

  .awh-campagne .chero__sub {
    margin-top: var(--awh-sp-5);
    font-size: var(--awh-fs-lg);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink-muted);
    max-width: var(--awh-measure);
  }

  .awh-campagne .chero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--awh-sp-4) var(--awh-sp-6);
    margin-top: var(--awh-sp-8);
  }

  .awh-campagne .chero__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    font-weight: 600;
    color: var(--awh-clr-ink);
    text-decoration: none;
  }

  .awh-campagne .chero__tel:hover {
    color: var(--awh-clr-accent);
  }

  .awh-campagne .chero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-3) var(--awh-sp-6);
    margin-top: var(--awh-sp-8);
    padding: 0;
    list-style: none;
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .chero__trust li {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
  }

  .awh-campagne .chero__trust svg {
    color: var(--awh-clr-accent);
    flex: none;
  }

  /* --- split: copy left, image right. High-intent paid search. --- */
  .awh-campagne .chero--split .chero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--awh-sp-8), 5vw, var(--awh-sp-16));
    padding-block: clamp(var(--awh-sp-12), 7vw, var(--awh-sp-20));
  }

  .awh-campagne .chero--split .chero__media {
    order: 2;
  }

  .awh-campagne .chero--split .chero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media (min-width: 901px) {

    /* The media is pulled out of flow so the copy column can centre against a
         full-bleed image edge rather than against a boxed one. */
    .awh-campagne .chero--split .chero__media {
      position: absolute;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 46%;
    }

    .awh-campagne .chero--split .chero__inner {
      grid-template-columns: minmax(0, 1fr);
    }

    .awh-campagne .chero--split .chero__copy {
      max-inline-size: 52%;
    }

  }

  @media (max-width: 900px) {

    .awh-campagne .chero--split .chero__inner {
      grid-template-columns: minmax(0, 1fr);
      padding-block: var(--awh-sp-10);
    }

    .awh-campagne .chero--split .chero__media {
      order: -1;
      margin-block-end: var(--awh-sp-8);
    }

    .awh-campagne .chero--split .chero__media img {
      aspect-ratio: 16 / 10;
    }

  }

  /* --- stage: full-bleed image, copy overlaid. Colder social traffic. --- */
  .awh-campagne .chero--stage {
    color: var(--awh-clr-bg);
    background: var(--awh-anthracite);
  }

  .awh-campagne .chero--stage .chero__media {
    position: absolute;
    inset: 0;
  }

  .awh-campagne .chero--stage .chero__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* The scrim is what keeps the headline readable regardless of which photo the
     marketer picks — the block cannot assume a dark or a busy image. */
  .awh-campagne .chero--stage .chero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
    100deg,
    rgb(0 0 0 / 0.82) 0%,
    rgb(0 0 0 / 0.62) 46%,
    rgb(0 0 0 / 0.22) 100%
    );
  }

  .awh-campagne .chero--stage .chero__inner {
    position: relative;
    padding-block: clamp(var(--awh-sp-16), 10vw, var(--awh-sp-24));
  }

  .awh-campagne .chero--stage .chero__copy {
    max-inline-size: 46rem;
  }

  .awh-campagne .chero--stage .chero__sub,


  .awh-campagne .chero--stage .chero__trust {
    color: rgb(255 255 255 / 0.82);
  }

  .awh-campagne .chero--stage .chero__tel {
    color: var(--awh-clr-bg);
  }

  /* --------------------------------------------------------------------------
     BLOCK: cusps — four checkmarks under the hero
     -------------------------------------------------------------------------- */
  .awh-campagne .cusps {
    padding-block: var(--awh-sp-10);
    border-block: 1px solid var(--awh-clr-line);
    background: var(--awh-clr-bg-alt);
  }

  .awh-campagne .cusps__title {
    margin-bottom: var(--awh-sp-6);
  }

  .awh-campagne .cusps__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: var(--awh-sp-4) var(--awh-sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .awh-campagne .cusps__item {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-normal);
  }

  .awh-campagne .cusps__item svg {
    flex: none;
    margin-block-start: 2px;
    color: var(--awh-clr-accent);
  }

  /* --------------------------------------------------------------------------
     BLOCK: cbar — certification marks, with the line that does the persuading

     Borrows .trust__mark from home.css for the sizing, because those marks
     arrive at wildly different intrinsic ratios (Metaalunie 3170x584, ISO
     200x92) and that block already solves it.
     -------------------------------------------------------------------------- */
  .awh-campagne .cbar {
    --mark-h: 42px;
    --mark-w: clamp(84px, 10vw, 124px);
    padding-block: clamp(var(--awh-sp-10), 5vw, var(--awh-sp-14));
    border-block-end: 1px solid var(--awh-clr-line);
  }

  .awh-campagne .cbar__label {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
    margin-bottom: var(--awh-sp-8);
  }

  .awh-campagne .cbar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: var(--awh-sp-8) var(--awh-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* A fixed row for the mark, so the captions start on one line across all six.
     The marks arrive at six different aspect ratios and the square ones get a
     taller box for optical balance, which without this pushes each caption to a
     different height and makes the row read as unaligned. */
  .awh-campagne .cbar__cell {
    display: grid;
    grid-template-rows: 62px auto;
    align-items: start;
    justify-items: start;
    gap: var(--awh-sp-3);
    min-inline-size: 0;
  }

  /* Every mark box takes the full row height so the captions all start on the
     same line. Without this the 42px wordmarks and the 62px square badges push
     their captions to different heights, and a two-line caption lands 10px above
     a three-line one — enough to read as a misaligned row. The mark itself is
     still centred inside its box by .trust__mark's own place-items. */
  .awh-campagne .cbar__cell .trust__mark {
    --h: 62px;
  }

  .awh-campagne .cbar__means {
    font-size: var(--awh-fs-xs);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink-muted);
    text-wrap: pretty;
  }

  @media (max-width: 640px) {

    .awh-campagne .cbar__grid {
      gap: var(--awh-sp-5);
    }

    .awh-campagne .cbar__cell {
      grid-template-rows: auto;
      grid-template-columns: 62px minmax(0, 1fr);
      align-items: center;
      gap: var(--awh-sp-4);
    }

    /* The mark box is wider than its column by default (up to 124px) and would
         otherwise spill across the caption beside it. */
    .awh-campagne .cbar__cell .trust__mark {
      --w: 62px;
      --h: 52px;
    }

  }

  /* The reprise directly above the form: marks only, no lines. The visitor has
     already read them once; here they are a reminder at the moment of
     committing, not a second lesson. */
  .awh-campagne .cbar--row {
    --mark-h: 34px;
    --mark-w: clamp(66px, 8vw, 96px);
    padding-block: var(--awh-sp-8);
    border-block-start: 1px solid var(--awh-clr-line);
    background: var(--awh-clr-surface-sunken);
  }

  .awh-campagne .cbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    opacity: 0.72;
  }

  /* --------------------------------------------------------------------------
     BLOCK: cguar — warranty facts beside the commercial reversal
     -------------------------------------------------------------------------- */

  /* Two rows: copy beside the promises card, then the warranty facts spanning
     the full width beneath. Stacking the facts under the copy made the left
     column 521px against a 186px card and left two thirds of the right column
     empty. */
  .awh-campagne .cguar {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(var(--awh-sp-8), 4vw, var(--awh-sp-12))
    clamp(var(--awh-sp-8), 5vw, var(--awh-sp-16));
    align-items: start;
  }

  .awh-campagne .cguar__terms {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--awh-sp-6);
    margin: 0;
  }

  /* Label above value, not label and value at opposite ends of a 1200px row —
     at full width a justified pair reads as two unrelated fragments. */
  .awh-campagne .cguar__term {
    display: grid;
    gap: var(--awh-sp-2);
    padding-block-start: var(--awh-sp-4);
    border-block-start: 1px solid var(--awh-clr-line-strong);
    min-inline-size: 0;
  }

  .awh-campagne .cguar__term dt {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .cguar__term dd {
    margin: 0;
    /* The numbers are the whole point of this block, so they get the display
    face rather than sitting in body type beside a muted label. */
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    line-height: var(--awh-lh-snug);
    letter-spacing: var(--awh-ls-tight);
    text-wrap: balance;
  }

  .awh-campagne .cguar__promises {
    display: grid;
    gap: var(--awh-sp-4);
    margin: 0;
    padding: var(--awh-sp-6);
    list-style: none;
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-sm);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-normal);
  }

  .awh-campagne .cguar__promises li {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
  }

  .awh-campagne .cguar__promises svg {
    flex: none;
    margin-block-start: 3px;
    color: var(--awh-clr-accent);
  }

  @media (max-width: 880px) {

    .awh-campagne .cguar {
      grid-template-columns: minmax(0, 1fr);
    }

  }

  /* --------------------------------------------------------------------------
     BLOCK: cproc — what happens after you press send

     Lives inside the form's rail, vertically. It was a full-width section of its
     own first, which wrapped three short lines in a section heading and 300px of
     padding while leaving the rail beside the form two thirds empty. One move
     fixes both.
     -------------------------------------------------------------------------- */
  .awh-campagne .cproc {
    display: grid;
    gap: var(--awh-sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  /* The number sits in its own column so the step text aligns down the rail
     rather than being indented by a marker of variable width. */
  .awh-campagne .cproc__step {
    counter-increment: step;
    display: grid;
    grid-template-columns: 1.35rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--awh-sp-1) var(--awh-sp-3);
  }

  .awh-campagne .cproc__step::before {
    content: counter(step);
    grid-row: 1 / span 2;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    font-weight: 500;
    color: var(--awh-clr-accent);
  }

  .awh-campagne .cproc__when {
    font-weight: 700;
    font-family: var(--awh-font-display);
    letter-spacing: var(--awh-ls-tight);
  }

  .awh-campagne .cproc__what {
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink-muted);
    text-wrap: pretty;
  }

  /* --------------------------------------------------------------------------
     BLOCK: ckeuze / cdealers — two-up bands with one action
     -------------------------------------------------------------------------- */
  .awh-campagne .ckeuze,

  .awh-campagne .cdealers {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(var(--awh-sp-6), 4vw, var(--awh-sp-12));
    padding: clamp(var(--awh-sp-6), 4vw, var(--awh-sp-10));
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
  }

  .awh-campagne .ckeuze .btn,


  .awh-campagne .cdealers .dealers__form {
    justify-self: start;
  }

  @media (max-width: 820px) {

    .awh-campagne .ckeuze,


    .awh-campagne .cdealers {
      grid-template-columns: minmax(0, 1fr);
    }

  }

  /* --------------------------------------------------------------------------
     BLOCK: cproof — dark band, Wiśniowski co-branding
     -------------------------------------------------------------------------- */

  /* .is-dark only re-maps the tokens for components nested inside; the band still
     has to paint its own ground, the same way .desk does on /contact. Without
     this the white Wiśniowski logo lands on a light background and disappears. */
  .awh-campagne .cproof {
    background: var(--awh-clr-dark-bg);
    color: var(--awh-clr-dark-ink);
    padding-block: clamp(var(--awh-sp-12), 7vw, var(--awh-sp-20));
  }

  .awh-campagne .cproof__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(var(--awh-sp-8), 5vw, var(--awh-sp-16));
    align-items: start;
  }

  .awh-campagne .cproof__title {
    max-width: 18ch;
  }

  .awh-campagne .cproof__body {
    margin-top: var(--awh-sp-5);
    line-height: var(--awh-lh-normal);
    max-width: var(--awh-measure);
    opacity: 0.82;
  }

  .awh-campagne .cproof__mark {
    display: block;
    margin-top: var(--awh-sp-8);
    inline-size: auto;
    block-size: 46px;
  }

  .awh-campagne .cproof__facts {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .awh-campagne .cproof__fact {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding-block: var(--awh-sp-4);
    border-top: 1px solid rgb(255 255 255 / 0.16);
  }

  .awh-campagne .cproof__fact:last-child {
    border-bottom: 1px solid rgb(255 255 255 / 0.16);
  }

  .awh-campagne .cproof__fact dt {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    opacity: 0.62;
  }

  .awh-campagne .cproof__fact dd {
    margin: 0;
    font-weight: 600;
    text-align: end;
  }

  @media (max-width: 820px) {

    .awh-campagne .cproof__inner {
      grid-template-columns: minmax(0, 1fr);
    }

  }

  /* --------------------------------------------------------------------------
     BLOCK: cquotes — hidden until real quotes exist
     -------------------------------------------------------------------------- */
  .awh-campagne .cquotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--awh-sp-6);
    margin-top: var(--awh-sp-8);
  }

  .awh-campagne .cquote {
    margin: 0;
    padding: var(--awh-sp-6);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
  }

  .awh-campagne .cquote blockquote {
    margin: 0;
    font-size: var(--awh-fs-md);
    line-height: var(--awh-lh-normal);
  }

  .awh-campagne .cquote figcaption {
    margin-top: var(--awh-sp-4);
    font-size: var(--awh-fs-xs);
    font-weight: 600;
  }

  .awh-campagne .cquote figcaption span {
    font-weight: 400;
    color: var(--awh-clr-ink-muted);
  }

  .awh-campagne .cquotes__link {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: var(--awh-sp-6);
    font-size: var(--awh-fs-sm);
    font-weight: 500;
    color: var(--awh-clr-accent);
  }

  /* --------------------------------------------------------------------------
     BLOCK: cform — four fields, and the aside that catches everyone else
     -------------------------------------------------------------------------- */
  .awh-campagne .cform {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(var(--awh-sp-8), 5vw, var(--awh-sp-16));
    align-items: start;
  }

  prop keeps working because .field--full is still `1 / -1`. */
  .awh-campagne .cform__form {
    margin-top: var(--awh-sp-8);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--awh-sp-5);
  }

  /* The site's .form__submit is a wrapping flex row — button and legal line side
     by side. Here there are three children and the order matters vertically:
     button, then the reassurance it protects, then the legal line. */
  .awh-campagne .cform__form .form__submit {
    grid-column: 1 / -1;
    margin-top: var(--awh-sp-3);
    display: grid;
    justify-items: start;
    gap: var(--awh-sp-4);
  }

  /* Directly under the submit button, where the hesitation actually happens.
     Not muted grey like the legal line beneath it — this is copy that has a job,
     so it sits at full ink weight. */
  .awh-campagne .cform__reassure {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
    max-inline-size: 46ch;
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink);
  }

  .awh-campagne .cform__reassure svg {
    flex: none;
    margin-block-start: 3px;
    color: var(--awh-clr-accent);
  }

  @media (max-width: 620px) {

    .awh-campagne .cform__form {
      grid-template-columns: minmax(0, 1fr);
    }

  }

  .awh-campagne .cform__aside {
    padding: var(--awh-sp-6);
    background: var(--awh-clr-bg-alt);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
  }

  .awh-campagne .cform__aside-title {
    font-weight: 700;
    font-family: var(--awh-font-display);
    letter-spacing: var(--awh-ls-tight);
    margin-bottom: var(--awh-sp-5);
  }

  /* The rail carries two groups now — the steps and the direct-contact routes.
     A rule rather than extra space separates them, because the gap that would
     read as a separator here is large enough to read as a broken card instead. */
  .awh-campagne .cform__aside-title--rule {
    margin-block-start: var(--awh-sp-6);
    padding-block-start: var(--awh-sp-6);
    border-block-start: 1px solid var(--awh-clr-line);
  }

  .awh-campagne .cform__list {
    display: grid;
    gap: var(--awh-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--awh-fs-sm);
  }

  .awh-campagne .cform__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
  }

  .awh-campagne .cform__list svg {
    flex: none;
    margin-block-start: 3px;
    color: var(--awh-clr-accent);
  }

  @media (max-width: 900px) {

    .awh-campagne .cform {
      grid-template-columns: minmax(0, 1fr);
    }

  }
/* END_SECTION:awh-campagne */

/* START_SECTION:awh-cats (INDEX:6) */
/* Ported from styles/site.css, BLOCK: cats — category cards.
     Labels sit BELOW the image on a solid surface. On the live site they are
     overlaid at the bottom edge, so the second row reads as unlabelled
     photographs above the fold. */

  .cats__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awh-sp-8);
    margin-bottom: var(--awh-sp-10);
  }

  .cats__lede {
    max-width: 38ch;
  }

  /* Twelve columns, not six. On a six-column grid, 3+3 fills row one and
     2+2+2 fills row two — which leaves the sixth card alone in a third row.
     Twelve columns give 6+6 then 3+3+3+3: two clean rows, no orphan. */
  .cats__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--awh-sp-5);
  }

  /* Shopify wraps each block; the wrapper is the grid item, not the <li>. */
  .cats__grid > .shopify-block {
    display: contents;
  }

  .cats__card {
    grid-column: span 3;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .cats__grid > .shopify-block:nth-child(-n + 2) .cats__card {
    grid-column: span 6;
  }

  .cats__card:hover {
    border-color: var(--awh-clr-line-strong);
    box-shadow: var(--awh-shadow-md);
    transform: translateY(-3px);
  }

  .cats__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .cats__grid > .shopify-block:nth-child(-n + 2) .cats__media {
    aspect-ratio: 16 / 8;
  }

  .cats__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Gate photography is landscape and the subject sits low in frame. */
    object-position: center 60%;
    transition: transform var(--awh-dur-slow) var(--awh-ease-out);
  }

  .cats__card:hover .cats__media img {
    transform: scale(1.03);
  }

  .cats__body {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-2);
    padding: var(--awh-sp-5) var(--awh-sp-5) var(--awh-sp-6);
    flex: 1;
  }

  .cats__head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--awh-sp-3);
  }

  .cats__title {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
  }

  .cats__title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .cats__count {
    flex: none;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  /* The fit statement is what makes this usable by someone who does not know
     the difference between a schuifpoort and a vouwpoort. */
  .cats__fit {
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  .cats__cta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: auto;
    padding-top: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
  }

  .cats__cta svg {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .cats__card:hover .cats__cta svg {
    transform: translateX(3px);
  }

  @media (max-width: 900px) {
    .cats__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--awh-sp-4);
    }

    .cats__card,
    .cats__grid > .shopify-block:nth-child(-n + 2) .cats__card {
      grid-column: span 1;
    }

    .cats__grid > .shopify-block:nth-child(-n + 2) .cats__media {
      aspect-ratio: 16 / 10;
    }

    .cats__head {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--awh-sp-5);
    }
  }

  @media (max-width: 560px) {
    /* Sideways card: keeps the photo, the label and the fit statement, and
       costs a third of the height of six stacked cards. */
    .cats__grid {
      grid-template-columns: 1fr;
    }

    .cats__card,
    .cats__grid > .shopify-block:nth-child(-n + 2) .cats__card {
      grid-column: span 1;
      flex-direction: row;
    }

    .cats__media,
    .cats__grid > .shopify-block:nth-child(-n + 2) .cats__media {
      width: 38%;
      flex: none;
      aspect-ratio: auto;
    }

    .cats__body {
      padding: var(--awh-sp-4);
    }

    .cats__head-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
  }
/* END_SECTION:awh-cats */

/* START_SECTION:awh-configurator-bar (INDEX:10) */
.qb__bar--product {
    position: relative;
    z-index: 1;
  }

  .qb__step-link {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-3);
    color: inherit;
    text-decoration: none;
  }

  .qb__step-link:hover {
    color: var(--awh-orange);
  }
/* END_SECTION:awh-configurator-bar */

/* START_SECTION:awh-desk (INDEX:14) */
/* ==========================================================================
     BLOCK: desk — the contact band.
     Replaces a four-up card row in which the phone number, the e-mail address and
     a seven-row opening-hours table all carried identical weight. Three of those
     cards held one line of text and sat two-thirds empty, and the highest-intent
     action on the page read no louder than a reference table. Here the number is
     the headline and everything else is explicitly secondary.
     ========================================================================== */
  .awh-desk .desk {
    background: var(--awh-clr-dark-bg);
    color: var(--awh-clr-dark-ink);
    padding-block: clamp(var(--awh-sp-12), 7vw, var(--awh-sp-20));
  }

  .awh-desk .desk__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(var(--awh-sp-8), 5vw, var(--awh-sp-16));
    align-items: center;
  }

  /* Set as display type, not as a link that happens to be big. The size is the
     hierarchy: it is the fastest way to reach AW and it should read that way. */
  .awh-desk .desk__tel {
    display: block;
    margin-top: var(--awh-sp-4);
    font-family: var(--awh-font-display);
    font-size: clamp(var(--awh-fs-3xl), 6vw, var(--awh-fs-5xl));
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-dark-ink);
    text-decoration: none;
    transition: color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-desk .desk__tel:hover {
    color: var(--awh-orange);
  }

  .awh-desk .desk__hours {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--awh-sp-3);
    margin-top: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-xs);
    color: var(--awh-clr-dark-ink-muted);
  }

  .awh-desk .desk__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-3);
    margin-top: var(--awh-sp-8);
  }

  .awh-desk .desk__cards {
    display: grid;
    gap: var(--awh-sp-4);
  }

  .awh-desk .desk__card {
    padding: var(--awh-sp-5) var(--awh-sp-6);
    background: rgb(255 255 255 / 4%);
    border: 1px solid var(--awh-clr-dark-line);
    border-radius: var(--awh-radius-sm);
  }

  .awh-desk .desk__card-label {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-dark-ink-muted);
  }

  .awh-desk .desk__card-label svg {
    color: var(--awh-orange);
  }

  .awh-desk .desk__card-value {
    display: block;
    margin-top: var(--awh-sp-2);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-dark-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  a.desk__card-value:hover {
    color: var(--awh-orange);
  }

  .awh-desk .desk__card-value--address {
    font-style: normal;
    line-height: var(--awh-lh-snug);
  }

  .awh-desk .desk__card-note {
    margin-top: var(--awh-sp-2);
    font-size: var(--awh-fs-xs);
    color: var(--awh-clr-dark-ink-muted);
  }

  .awh-desk .desk__card-note a {
    color: var(--awh-orange);
  }

  @media (max-width: 900px) {

    .awh-desk .desk__inner {
      grid-template-columns: minmax(0, 1fr);
    }

  }

  /* ==========================================================================
     BLOCK: opennow — live open/closed badge, client-rendered
     ========================================================================== */
  .awh-desk .opennow {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    padding: 3px var(--awh-sp-3);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  .awh-desk .opennow__dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .awh-desk .opennow--open {
    background: rgb(74 190 122 / 14%);
    color: #6fd79b;
  }

  .awh-desk .opennow--closed {
    background: rgb(255 255 255 / 8%);
    color: var(--awh-clr-dark-ink-muted);
  }
/* END_SECTION:awh-desk */

/* START_SECTION:awh-faq (INDEX:16) */
.faq--rail .faq__rail {
    position: sticky;
    /* Clears the 76px sticky masthead, plus breathing room. */
    top: calc(76px + var(--awh-sp-10));
  }

  /* The shared .section-title caps at 20ch and scales to 49px, which is tuned for
     a full-width heading. In a ~40% rail that wraps to five or six lines, so this
     steps it down and lets it use the rail's full width. */
  .faq--rail .faq__title {
    font-size: clamp(var(--awh-fs-xl), 2.6vw, var(--awh-fs-3xl));
    max-width: none;
  }

  .faq--rail .faq__aside {
    margin-top: var(--awh-sp-10);
    padding: var(--awh-sp-6);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
  }

  .faq--rail .faq__aside-title {
    font-family: var(--awh-font-display);
    font-weight: 700;
    font-size: var(--awh-fs-md);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-ink);
  }

  .faq--rail .faq__aside-text {
    margin-top: var(--awh-sp-2);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .faq--rail .faq__aside-tel {
    display: block;
    margin-top: var(--awh-sp-5);
    font-family: var(--awh-font-display);
    font-weight: 700;
    font-size: var(--awh-fs-xl);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-tight);
    color: var(--awh-clr-ink);
    text-decoration: none;
  }

  .faq--rail .faq__aside-tel:hover {
    color: var(--awh-clr-accent);
  }

  .faq--rail .faq__aside-link {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: var(--awh-sp-3);
    font-size: var(--awh-fs-sm);
    font-weight: 500;
    color: var(--awh-clr-accent);
    text-decoration: none;
  }

  .faq--rail .faq__aside-link:hover {
    text-decoration: underline;
  }

  .faq__a p {
    color: var(--awh-clr-ink-muted);
    line-height: var(--awh-lh-relaxed);
  }

  @media (max-width: 940px) {

    .faq__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--awh-sp-6);
    }

    /* display:contents dissolves the rail so its three children become grid items
         in their own right — that is what lets the aside be re-ordered past the
         list. The row gap then owns the vertical rhythm, so the title's own
         bottom margin has to go or it doubles up. */
    .faq__rail {
      position: static;
      display: contents;
    }

    .faq__title {
      font-size: clamp(var(--awh-fs-2xl), 4vw, var(--awh-fs-3xl));
      max-width: 20ch;
      margin-bottom: 0;
    }

    .faq__aside {
      order: 1;
      margin-top: 0;
    }

  }

  @media (max-width: 560px) {

    .faq__q {
      font-size: var(--awh-fs-md);
    }

    .faq__a {
      padding-inline-end: 0;
    }

  }


  /* Ported from styles/site.css, BLOCK: faq — native <details>, so every
     answer is in the initial HTML and readable by search engines and AI
     assistants without JavaScript. */

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

  .faq__list {
    border-top: 1px solid var(--awh-clr-line);
  }

  .faq__item {
    border-bottom: 1px solid var(--awh-clr-line);
  }

  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-5);
    min-height: 56px;
    padding-block: var(--awh-sp-4);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    cursor: pointer;
    list-style: none;
  }

  .faq__q::-webkit-details-marker {
    display: none;
  }

  .faq__q:hover {
    color: var(--awh-orange);
  }

  .faq__icon {
    position: relative;
    flex: none;
    width: 14px;
    height: 14px;
  }

  .faq__icon::before,
  .faq__icon::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition:
      transform var(--awh-dur-base) var(--awh-ease-out),
      opacity var(--awh-dur-base) var(--awh-ease-out);
  }

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

  .faq__item[open] .faq__icon::after {
    transform: translateY(-50%) rotate(0);
    opacity: 0;
  }

  .faq__a {
    padding-bottom: var(--awh-sp-5);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
    max-width: var(--awh-measure);
  }

  @media (max-width: 900px) {
    .faq__inner {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:awh-faq */

/* START_SECTION:awh-footer (INDEX:17) */
/* Ported from styles/site.css, BLOCK: sitefooter. */

  .sitefooter {
    display: block;
    background: var(--awh-footer-bg);
    color: var(--awh-footer-ink);
    font-size: var(--awh-fs-xs);
  }

  .sitefooter__inner {
    width: 100%;
    max-width: var(--awh-container);
    margin-inline: auto;
    padding-inline: var(--awh-gutter);
  }

  .sitefooter__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--awh-sp-10) var(--awh-sp-8);
    padding-block: var(--awh-sp-16);
  }

  .sitefooter__brand {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-5);
  }

  .sitefooter__logo {
    align-self: start;
    padding: var(--awh-sp-2) var(--awh-sp-3);
    background: #fff;
    border-radius: var(--awh-radius-xs);
  }

  .sitefooter__logo img {
    display: block;
    height: 44px;
    width: auto;
  }

  .sitefooter__blurb {
    margin: 0;
    line-height: var(--awh-lh-relaxed);
    max-width: 34ch;
  }

  .sitefooter__importer {
    margin: 0;
    padding-top: var(--awh-sp-4);
    border-top: 1px solid var(--awh-footer-line);
    font-size: var(--awh-fs-2xs);
    line-height: 1.55;
  }

  .sitefooter__importer strong {
    color: var(--awh-footer-ink-strong);
    font-weight: 600;
  }

  .sitefooter__title {
    margin: 0 0 var(--awh-sp-5);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-footer-ink-strong);
  }

  .sitefooter__list {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sitefooter__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    transition: color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .sitefooter__link:hover {
    color: var(--awh-accent);
  }

  .sitefooter__sub {
    display: block;
    font-size: var(--awh-fs-3xs);
    color: #7d858a;
  }

  /* Shopify wraps each block; the wrapper is what the grid lays out. */
  .sitefooter__top > .shopify-block {
    display: contents;
  }

  /* The family row. A visitor who wants a garage door should be able to get
     there from here — and it reinforces that these are one company. */
  .sitefooter__col--full {
    grid-column: 1 / -1;
    margin-block-start: var(--awh-sp-6);
  }

  .sitefooter__family-list {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }

  .sitefooter__col--full .sitefooter__link {
    min-height: 0;
    padding-block: var(--awh-sp-2);
  }

  .sitefooter__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding-block: var(--awh-sp-5);
    border-top: 1px solid var(--awh-footer-line);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: 0.03em;
  }

  .sitefooter__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sitefooter__legal .sitefooter__link {
    min-height: 0;
  }

  @media (max-width: 1024px) {
    .sitefooter__top {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 560px) {
    .sitefooter__top {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--awh-sp-8) var(--awh-sp-5);
    }

    .sitefooter__brand {
      grid-column: 1 / -1;
    }

    .sitefooter__bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }
/* END_SECTION:awh-footer */

/* START_SECTION:awh-form (INDEX:18) */
/* Two columns, not auto-fit. Every question here has three or four options, and
     auto-fit lays four out as 3 + 1 — a ragged orphan on the second row. Two
     columns give a clean 2 × 2, and 3 + 1 becomes 2 + 1, which reads as
     deliberate. */
  .awh-form .kh__form .radios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--awh-sp-4);
    margin-top: var(--awh-sp-8);
  }

  @media (max-width: 560px) {

    .awh-form .kh__form .radios {
      grid-template-columns: minmax(0, 1fr);
    }

  }

  /* ===== styles/sections/forms.css ===== */
  /* ==========================================================================
     Form UI kit
     ========================================================================== */
  .awh-form .formshell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }

  .awh-form .formshell__aside {
    position: sticky;
    top: 108px;
    display: grid;
    gap: var(--awh-sp-5);
  }

  @media (max-width: 980px) {

    .awh-form .formshell {
      grid-template-columns: 1fr;
    }

    .awh-form .formshell__aside {
      position: static;
    }

  }

  .awh-form .form {
    display: grid;
    gap: var(--awh-sp-8);
  }

  /* --- fieldset ------------------------------------------------------------- */
  .awh-form .fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--awh-sp-5);
  }

  .awh-form .fieldset__legend {
    padding: 0;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-ink);
  }

  .awh-form .fieldset__hint {
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
    max-width: var(--awh-measure);
    margin-top: calc(var(--awh-sp-3) * -1);
  }

  .awh-form .fieldset__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--awh-sp-5);
  }

  @media (max-width: 620px) {

    .awh-form .fieldset__body {
      grid-template-columns: 1fr;
    }

  }

  /* --- field ---------------------------------------------------------------- */
  .awh-form .field {
    display: grid;
    gap: var(--awh-sp-2);
    align-content: start;
    min-inline-size: 0;
  }

  .awh-form .field--full {
    grid-column: 1 / -1;
  }

  .awh-form .field__label {
    display: flex;
    align-items: baseline;
    gap: var(--awh-sp-2);
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    color: var(--awh-clr-ink);
  }

  .awh-form .field__req {
    color: var(--awh-clr-accent);
  }

  /* Marking what is optional rather than what is required reads as less
     demanding on a long form, and there are fewer optional fields to mark. */
  .awh-form .field__optional {
    font-family: var(--awh-font-mono);
    font-size: 9.5px;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-steel-light);
    font-weight: 400;
  }

  .awh-form .field__hint {
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  .awh-form .field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-2);
    font-size: var(--awh-fs-2xs);
    font-weight: 500;
    color: var(--awh-orange-deep);
  }

  .awh-form .field__error::before {
    content: "!";
    flex: none;
    inline-size: 15px;
    block-size: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--awh-orange-deep);
    color: #fff;
    font-family: var(--awh-font-mono);
    font-size: 10px;
    line-height: 1;
    margin-block-start: 1px;
  }

  /* --- controls ------------------------------------------------------------- */
  .awh-form .control {
    inline-size: 100%;
    min-block-size: 52px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    background: var(--awh-clr-surface);
    color: var(--awh-clr-ink);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-sm);
    font-size: var(--awh-fs-md);
    transition:
    border-color var(--awh-dur-fast) var(--awh-ease-out),
    box-shadow var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-form .control::placeholder {
    color: var(--awh-steel-light);
  }

  .awh-form .control:hover {
    border-color: var(--awh-clr-ink-muted);
  }

  .awh-form .control:focus {
    outline: none;
    border-color: var(--awh-clr-accent);
    box-shadow: 0 0 0 3px var(--awh-orange-tint);
  }

  .awh-form .control[aria-invalid="true"] {
    border-color: var(--awh-orange-deep);
  }

  .awh-form .control--area {
    min-block-size: 140px;
    resize: vertical;
    line-height: var(--awh-lh-normal);
  }

  .awh-form .control-wrap {
    position: relative;
  }

  .awh-form .control--select {
    appearance: none;
    padding-inline-end: var(--awh-sp-10);
    cursor: pointer;
  }

  .awh-form .control-wrap__chevron {
    position: absolute;
    inset-inline-end: var(--awh-sp-4);
    inset-block-start: 50%;
    translate: 0 -50%;
    color: var(--awh-clr-ink-muted);
    pointer-events: none;
    /* Sized here as well as by the width/height attributes. An absolutely
    positioned SVG with neither defaults to 100% of its containing block,
    which renders the chevron several hundred pixels across. */
    inline-size: 14px;
    block-size: 14px;
  }

  /* --- radio cards ---------------------------------------------------------- */
  .awh-form .radios {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--awh-sp-3);
  }

  .awh-form .radio input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
  }

  .awh-form .radio__box {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
    block-size: 100%;
    padding: var(--awh-sp-4);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-sm);
    cursor: pointer;
    transition:
    border-color var(--awh-dur-fast) var(--awh-ease-out),
    background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-form .radio__box:hover {
    border-color: var(--awh-clr-ink-muted);
  }

  .awh-form .radio__dot {
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    margin-block-start: 1px;
    border: 2px solid var(--awh-clr-line-strong);
    border-radius: 50%;
    position: relative;
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-form .radio__dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--awh-clr-accent);
    transform: scale(0);
    transition: transform var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-form .radio input:checked + .radio__box {
    border-color: var(--awh-clr-accent);
    background: var(--awh-orange-tint);
  }

  .awh-form .radio input:checked + .radio__box .radio__dot {
    border-color: var(--awh-clr-accent);
  }

  .awh-form .radio input:checked + .radio__box .radio__dot::after {
    transform: scale(1);
  }

  .awh-form .radio input:focus-visible + .radio__box {
    outline: 3px solid var(--awh-clr-focus);
    outline-offset: 2px;
  }

  .awh-form .radio__text {
    display: grid;
    gap: 2px;
    min-inline-size: 0;
  }

  .awh-form .radio__title {
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    color: var(--awh-clr-ink);
  }

  .awh-form .radio__sub {
    font-size: var(--awh-fs-2xs);
    line-height: 1.45;
    color: var(--awh-clr-ink-muted);
  }

  /* --- checkbox ------------------------------------------------------------- */
  .awh-form .check {
    grid-column: 1 / -1;
    display: grid;
    gap: var(--awh-sp-2);
  }

  .awh-form .check__label {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
    cursor: pointer;
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
    min-block-size: 44px;
    padding-block: var(--awh-sp-2);
  }

  .awh-form .check__label input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
  }

  .awh-form .check__box {
    flex: none;
    inline-size: 22px;
    block-size: 22px;
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
    display: grid;
    place-items: center;
    color: transparent;
    transition:
    background var(--awh-dur-fast) var(--awh-ease-out),
    border-color var(--awh-dur-fast) var(--awh-ease-out),
    color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh-form .check__box svg {
    inline-size: 13px;
    block-size: 13px;
  }

  .awh-form .check__label input:checked + .check__box {
    background: var(--awh-clr-accent);
    border-color: var(--awh-clr-accent);
    color: #fff;
  }

  .awh-form .check__label input:focus-visible + .check__box {
    outline: 3px solid var(--awh-clr-focus);
    outline-offset: 2px;
  }

  .awh-form .check__text a {
    color: var(--awh-clr-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* --- error summary -------------------------------------------------------- */
  .awh-form .errsum {
    padding: var(--awh-sp-5);
    border: 1px solid var(--awh-orange-deep);
    border-inline-start-width: 3px;
    border-radius: var(--awh-radius-sm);
    background: var(--awh-orange-tint);
    display: grid;
    gap: var(--awh-sp-3);
  }

  .awh-form .errsum__title {
    font-weight: 700;
    color: var(--awh-clr-ink);
  }

  .awh-form .errsum__list {
    margin: 0;
    padding-inline-start: var(--awh-sp-5);
    display: grid;
    gap: var(--awh-sp-1);
    font-size: var(--awh-fs-sm);
  }

  .awh-form .errsum__list a {
    color: var(--awh-orange-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* --- success -------------------------------------------------------------- */
  .awh-form .formdone {
    display: grid;
    justify-items: start;
    gap: var(--awh-sp-4);
    padding: var(--awh-sp-10);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    max-width: 56ch;
  }

  .awh-form .formdone__mark {
    inline-size: 52px;
    block-size: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--awh-clr-ok);
    color: #fff;
  }

  .awh-form .formdone__mark svg {
    inline-size: 24px;
    block-size: 24px;
  }

  .awh-form .formdone__title {
    font-size: var(--awh-fs-xl);
  }

  .awh-form .formdone__body {
    color: var(--awh-clr-ink-muted);
  }

  /* --- form aside ----------------------------------------------------------- */
  .awh-form .formaside {
    padding: var(--awh-sp-6);
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-sm);
    display: grid;
    gap: var(--awh-sp-4);
  }

  .awh-form .formaside__title {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .awh-form .formaside__list {
    display: grid;
    gap: var(--awh-sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
  }

  .awh-form .formaside__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
  }

  .awh-form .formaside__list svg {
    color: var(--awh-clr-accent);
    flex: none;
    margin-block-start: 4px;
  }

  /* Prose in a form's side rail: smaller and quieter than body copy, and it sits
     under the icon list rather than replacing it. */
  .awh-form .formaside__body {
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
  }

  .awh-form .formaside__body p {
    margin-block-end: var(--awh-sp-3);
  }

  .awh-form .formaside__body p:last-child {
    margin-block-end: 0;
  }

  .awh-form .form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--awh-sp-4);
  }

  .awh-form .form__legal {
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink-muted);
    max-width: 44ch;
  }

  .awh-form .form__legal a {
    color: var(--awh-clr-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* The site forms get their two-column grid from .fieldset__body, but a campaign
     form has no fieldsets to group — four fields do not need a legend telling the
     visitor they are "je gegevens". So the grid is declared here instead, and the
     Field span= {
    2
  }

  /* The site's .form__submit is a wrapping flex row — button and legal line side
     by side. Here there are three children and the order matters vertically:
     button, then the reassurance it protects, then the legal line. */
  .awh-form .cform__form .form__submit {
    grid-column: 1 / -1;
    margin-top: var(--awh-sp-3);
    display: grid;
    justify-items: start;
    gap: var(--awh-sp-4);
  }
/* END_SECTION:awh-form */

/* START_SECTION:awh-header (INDEX:19) */
/* Ported from aw-design/css/header.css — masthead, nav, mega, burger and
     drawer. Selectors unchanged; names carry an `awh-` prefix and nothing else.
     Every value resolves to a literal in snippets/awh-tokens.liquid. */

  /* ---------------------------------------------------------------- masthead */

  .masthead {
    display: block;
    position: sticky;
    top: 0;
    z-index: var(--awh-z-header);
    background: var(--awh-header-bg);
    color: var(--awh-header-ink);
    border-bottom: 1px solid var(--awh-header-line);
  }

  .masthead--static {
    position: relative;
  }

  .masthead__inner {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-8);
    min-height: var(--awh-header-min-h, 76px);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--awh-gutter);
  }

  /* Ported from aw-design/css/base.css .container. Deliberately not Horizon's
     .section--page-width, which is a grid contract (.section sets the columns,
     `> *` lands in column 2) — a dependency worth avoiding for a max-width. */
  .masthead__inner--page-width {
    max-width: var(--awh-container);
  }

  .masthead__logo {
    flex: none;
    display: block;
    padding-block: var(--awh-sp-3);
    color: inherit;
    text-decoration: none;
  }

  .masthead__logo-img {
    display: block;
    width: auto;
    height: var(--awh-logo-h, 44px);
  }

  .masthead__logo-text {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 800;
    letter-spacing: var(--awh-ls-display);
  }

  .masthead__nav {
    margin-inline-start: auto;
  }

  .masthead__actions {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    flex: none;
  }

  /* styles/zoek.css — a bordered circle. Icon-only by design in a masthead
     that already carries three worded controls. */
  .masthead__zoek {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--awh-header-line-strong);
    border-radius: 50%;
    background: var(--awh-header-bg);
    color: var(--awh-header-ink);
    transition:
      border-color var(--awh-dur-fast) var(--awh-ease-out),
      background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .masthead__zoek:hover {
    border-color: var(--awh-header-ink);
    background: var(--awh-header-sunken);
  }

  /* styles/site.css — labelled, never a bare bag icon on a site with no
     checkout, because a bag would promise one. */
  .masthead__quote {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-height: 44px;
    padding-inline: var(--awh-sp-4);
    cursor: pointer;
    font: inherit;
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    letter-spacing: var(--awh-ls-tight);
    color: var(--awh-header-ink);
    text-decoration: none;
    border: 1px solid var(--awh-header-line-strong);
    border-radius: var(--awh-radius-pill);
    background: var(--awh-header-bg);
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .masthead__quote:hover {
    border-color: var(--awh-header-ink);
  }

  /* styles/offerte.css — absolute, so the count never widens the control.
     On mobile the label is hidden and what is left reads as a circle. */
  /* Same reason as the panel: `display: grid` below outranks the `hidden`
     attribute, so an empty quote showed a badge reading "0". */
  .masthead__quote-badge[hidden] {
    display: none;
  }

  .masthead__quote-badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 5px;
    border-radius: var(--awh-radius-pill);
    background: var(--awh-accent);
    color: #fff;
    font-family: var(--awh-font-mono);
    font-size: 11px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 1024px) {
    .masthead__quote-label {
      display: none;
    }

    .masthead__quote {
      padding-inline: var(--awh-sp-3);
    }
  }

  .masthead__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-height: 44px;
    padding-inline: var(--awh-sp-5);
    background: var(--awh-accent);
    color: #fff;
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-xs);
    font-weight: 600;
    letter-spacing: var(--awh-ls-tight);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .masthead__cta:hover {
    background: var(--awh-accent-deep);
  }

  .masthead__cta-arrow {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

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

  @media (max-width: 560px) {
    .masthead__logo-img {
      height: var(--awh-logo-h-mobile, 34px);
    }
  }

  @media (max-width: 1024px) {
    .masthead__nav {
      display: none;
    }

    /* The nav carries the auto margin that pushes everything right; once it is
       hidden the actions must take that job, or the burger collapses against
       the logo and leaves the row unbalanced. */
    .masthead__actions {
      margin-inline-start: auto;
    }

    .masthead__inner {
      min-height: 68px;
    }
  }

  /* --------------------------------------------------------------------- nav */

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-1);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* The mega panel is anchored to the masthead, not to the nav item — anchoring
     to the item pushes a wide panel off-screen when the trigger sits away from
     centre. The item therefore stays static and the link carries the underline. */
  .nav__item {
    position: static;
  }

  .nav__link,
  .nav__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-height: 44px;
    padding: var(--awh-sp-2) var(--awh-sp-4);
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    letter-spacing: var(--awh-ls-tight);
    color: var(--awh-header-ink);
    text-decoration: none;
    border-radius: var(--awh-radius-sm);
    transition: color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .nav__link:hover,
  .nav__trigger:hover,
  .nav__link.is-active,
  .nav__trigger.is-active,
  .nav__trigger[aria-expanded='true'] {
    color: var(--awh-accent);
  }

  /* Underline grows from the left — quiet, and it reuses the slat bar width. */
  .nav__link::after,
  .nav__trigger::after {
    content: '';
    position: absolute;
    left: var(--awh-sp-4);
    right: var(--awh-sp-4);
    bottom: 12px;
    height: 2px;
    background: var(--awh-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .nav__link:hover::after,
  .nav__trigger:hover::after,
  .nav__link.is-active::after,
  .nav__trigger.is-active::after,
  .nav__trigger[aria-expanded='true']::after {
    transform: scaleX(1);
  }

  .nav__chevron {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

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

  /* -------------------------------------------------------------------- mega */

  .mega {
    position: absolute;
    z-index: var(--awh-z-mega);
    top: 100%;
    left: 50%;
    width: min(var(--awh-container), calc(100vw - var(--awh-gutter) * 2));
    margin-top: 1px;
    background: var(--awh-header-bg);
    border: 1px solid var(--awh-header-line);
    border-radius: var(--awh-radius-md);
    box-shadow: var(--awh-shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    /* Centring lives in transform rather than the standalone `translate`
       property so the entrance offset composes reliably. */
    transform: translateX(-50%) translateY(-6px);
    transition:
      opacity var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out),
      visibility 0s linear var(--awh-dur-base);
  }

  .mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition:
      opacity var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out),
      visibility 0s linear 0s;
  }

  /* The slat band caps the panel — the motif, reused at component scale. */
  .mega__rule {
    height: 4px;
    background-image: repeating-linear-gradient(
      90deg,
      var(--awh-accent) 0,
      var(--awh-accent) var(--awh-slat-bar),
      transparent var(--awh-slat-bar),
      transparent var(--awh-slat-period)
    );
  }

  .mega__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 280px;
    gap: var(--awh-sp-8);
    padding: var(--awh-sp-8);
    align-items: start;
  }

  .mega__grid--no-promo {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .mega__col {
    min-width: 0;
  }

  .mega__col--flat {
    grid-column: span 2;
  }

  .mega__heading {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-header-ink-muted);
    margin: 0 0 var(--awh-sp-4);
  }

  .mega__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--awh-sp-1);
  }

  .mega__link {
    display: block;
    padding: var(--awh-sp-3);
    margin-inline: calc(var(--awh-sp-3) * -1);
    border-radius: var(--awh-radius-sm);
    text-decoration: none;
    transition: background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .mega__link:hover {
    background: var(--awh-accent-tint);
  }

  .mega__link-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--awh-sp-2);
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    color: var(--awh-header-ink);
    letter-spacing: var(--awh-ls-tight);
  }

  .mega__link:hover .mega__link-title {
    color: var(--awh-accent-deep);
  }

  /* The subtitle does the selling: it turns a category noun into a use case.
     This is the fix for four identical unlabelled cards on the current site. */
  .mega__link-sub {
    display: block;
    margin-top: 2px;
    font-size: var(--awh-fs-2xs);
    line-height: 1.45;
    color: var(--awh-header-ink-muted);
  }

  .mega__promo {
    display: flex;
    flex-direction: column;
    background: var(--awh-header-sunken);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    text-decoration: none;
  }

  .mega__promo-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

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

  .mega__promo-body {
    padding: var(--awh-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-2);
    flex: 1;
  }

  .mega__promo-title {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    color: var(--awh-header-ink);
  }

  .mega__promo-text {
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-header-ink-muted);
  }

  .mega__promo-cta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: auto;
    padding-top: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-accent);
  }

  .mega__promo-cta svg {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .mega__promo:hover .mega__promo-cta svg {
    transform: translateX(3px);
  }

  @media (max-width: 1180px) {
    .mega__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mega__promo {
      display: none;
    }
  }

  /* ------------------------------------------------------------------ burger */

  .burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    cursor: pointer;
    border: 1px solid var(--awh-header-line-strong);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-header-bg);
  }

  .burger:hover {
    border-color: var(--awh-header-ink);
  }

  .burger__box {
    display: grid;
    gap: 4px;
    width: 20px;
  }

  .burger__bar {
    height: 2px;
    background: var(--awh-header-ink);
    border-radius: 1px;
  }

  @media (max-width: 1024px) {
    .burger {
      display: inline-flex;
    }

    .masthead__cta:not(.drawer__cta) {
      display: none;
    }
  }

  /* ------------------------------------------------------------------ drawer */

  .drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--awh-z-scrim);
    background: rgb(20 24 26 / 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--awh-dur-base) var(--awh-ease-out);
  }

  .drawer__scrim.is-open {
    opacity: 1;
  }

  .drawer {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: var(--awh-z-drawer);
    width: min(400px, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--awh-header-bg);
    color: var(--awh-header-ink);
    box-shadow: -8px 0 40px rgb(20 24 26 / 0.2);
    transform: translateX(100%);
    /* Hidden while closed so the off-screen panel cannot contribute to the
       scrollable area or be reachable by assistive tech. */
    visibility: hidden;
    /* Visibility is a discrete property: a plain transition flips it halfway
       through, leaving the panel unfocusable at the moment it opens. Instead it
       becomes visible instantly on open, and is only hidden once the slide-out
       has finished. */
    transition:
      transform var(--awh-dur-slow) var(--awh-ease-out),
      visibility 0s linear var(--awh-dur-slow);
  }

  .drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform var(--awh-dur-slow) var(--awh-ease-out),
      visibility 0s linear 0s;
  }

  .drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding: var(--awh-sp-4) var(--awh-sp-5);
    border-bottom: 1px solid var(--awh-header-line);
    flex: none;
  }

  .drawer__logo img {
    display: block;
    width: auto;
    height: 40px;
  }

  .drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    background: none;
    border: 1px solid var(--awh-header-line-strong);
    border-radius: var(--awh-radius-sm);
    color: var(--awh-header-ink);
  }

  .drawer__close:hover {
    border-color: var(--awh-header-ink);
  }

  .drawer__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--awh-sp-3) var(--awh-sp-5) var(--awh-sp-8);
  }

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

  .drawer__item + .drawer__item {
    border-top: 1px solid var(--awh-header-line);
  }

  .drawer__link,
  .drawer__disclosure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    width: 100%;
    min-height: 58px;
    padding-block: var(--awh-sp-3);
    padding-inline: 0;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: start;
    text-decoration: none;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    color: var(--awh-header-ink);
  }

  .drawer__disclosure[aria-expanded='true'] {
    color: var(--awh-accent);
  }

  .drawer__disclosure-icon {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .drawer__disclosure[aria-expanded='true'] .drawer__disclosure-icon {
    transform: rotate(45deg);
  }

  /* Accordion via grid-template-rows so the panel animates without a fixed
     height, and stays fully hidden from AT when closed. */
  .drawer__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--awh-dur-base) var(--awh-ease-out);
  }

  .drawer__panel.is-open {
    grid-template-rows: 1fr;
  }

  .drawer__panel-inner {
    overflow: hidden;
    min-height: 0;
  }

  .drawer__sublist {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--awh-sp-4);
    display: grid;
    gap: var(--awh-sp-1);
  }

  .drawer__sublink {
    display: block;
    padding: var(--awh-sp-3);
    margin-inline: calc(var(--awh-sp-3) * -1);
    border-radius: var(--awh-radius-sm);
    min-height: 44px;
    text-decoration: none;
  }

  .drawer__sublink:hover {
    background: var(--awh-accent-tint);
  }

  .drawer__sublink-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--awh-sp-2);
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    color: var(--awh-header-ink);
  }

  .drawer__foot {
    flex: none;
    display: grid;
    gap: var(--awh-sp-3);
    padding: var(--awh-sp-5);
    border-top: 1px solid var(--awh-header-line);
    background: var(--awh-header-sunken);
  }

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

  .drawer__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: 0.04em;
    color: var(--awh-header-ink-muted);
    min-height: 44px;
    text-decoration: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .mega,
    .mega.is-open,
    .drawer,
    .drawer.is-open,
    .drawer__panel,
    .nav__link::after,
    .nav__trigger::after {
      transition-duration: 1ms;
    }
  }
/* END_SECTION:awh-header */

/* START_SECTION:awh-hero (INDEX:20) */
/* Ported from styles/site.css, BLOCK: hero. */

  .hero {
    position: relative;
    background: var(--awh-clr-bg);
    border-bottom: 1px solid var(--awh-clr-line);
    overflow: hidden;
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    /* Stretch, not centre. Centring let the image float with ~140px of dead
       space above and below it while the text column ran 640px tall. */
    align-items: stretch;
    gap: clamp(2rem, 5vw, 4.5rem);
    padding-block: clamp(3rem, 6vw, 5.5rem);
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero__title {
    font-size: clamp(2.4rem, 5.6vw, 4rem);
    margin-bottom: var(--awh-sp-6);
  }

  /* The second line carries the promise: made to measure, to the centimetre. */
  .hero__title-accent {
    display: block;
    color: var(--awh-orange);
  }

  .hero__lede {
    font-size: var(--awh-fs-lg);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink-muted);
    max-width: 52ch;
    margin-bottom: var(--awh-sp-8);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--awh-sp-3);
  }

  /* Fills the row rather than sitting at a fixed ratio, so the image is always
     as tall as the text beside it. Gates are a visual purchase — this is the
     most important asset on the screen and it should not be the smallest. */
  .hero__media {
    position: relative;
    min-height: clamp(20rem, 32vw, 30rem);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

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

  /* Caption strip — the mono voice, carrying the real spec of the gate shown. */
  .hero__media-tag {
    position: absolute;
    left: var(--awh-sp-4);
    bottom: var(--awh-sp-4);
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    padding: var(--awh-sp-2) var(--awh-sp-3);
    background: rgb(35 40 43 / 0.82);
    backdrop-filter: blur(6px);
    color: #edeae5;
    border-radius: var(--awh-radius-xs);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  .hero__media-tag b {
    color: var(--awh-orange);
    font-weight: 500;
  }

  @media (max-width: 900px) {
    .hero__inner {
      grid-template-columns: 1fr;
      gap: var(--awh-sp-10);
    }

    .hero__media {
      order: -1;
    }
  }
/* END_SECTION:awh-hero */

/* START_SECTION:awh-importer (INDEX:21) */
/* Ported from styles/site.css, BLOCK: importer — the dark band with the
     mono spec table. */

  .importer {
    background: var(--awh-clr-dark-bg);
    color: var(--awh-clr-dark-ink);
  }

  .importer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .importer__title {
    font-size: clamp(var(--awh-fs-2xl), 4.4vw, var(--awh-fs-4xl));
    margin-bottom: var(--awh-sp-6);
    max-width: 18ch;
  }

  .importer__media {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
  }

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

  /* A short spec list in the mono voice — RAL codes are native here. */
  .importer__facts {
    display: grid;
    gap: 0;
    margin-top: var(--awh-sp-8);
    border-top: 1px solid var(--awh-clr-dark-line);
  }

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

  .importer__fact {
    display: flex;
    justify-content: space-between;
    gap: var(--awh-sp-5);
    padding-block: var(--awh-sp-3);
    border-bottom: 1px solid var(--awh-clr-dark-line);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: 0.03em;
  }

  .importer__fact dt {
    color: var(--awh-clr-dark-ink-muted);
    text-transform: uppercase;
  }

  .importer__fact dd {
    margin: 0;
    text-align: end;
    color: var(--awh-clr-dark-ink);
  }

  .importer__actions {
    margin-top: var(--awh-sp-8);
  }

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

    .importer__media {
      order: -1;
    }
  }
/* END_SECTION:awh-importer */

/* START_SECTION:awh-legal (INDEX:23) */
/* With no outline beside it a single measure-wide column left against the
     gutter reads as a layout that failed to load. Centred, it reads as a
     document. */
  /* On an article the grid sits below a header and a hero image and needs the
     gap. Here it is the first thing in the section, which already carries its
     own top padding, so the extra cushion only widened the hole under the H1. */
  .awh-legal .art__grid {
    margin-block-start: 0;
  }

  /* Scoped under .awh-legal for the weight, not for the reach: .art__grid sets
     the two-column track in awh-pages-styles, and at one class each the rule
     that lands later in the compiled bundle wins. It was theirs, so the
     algemene voorwaarden kept the empty second column. */
  .awh-legal .art__grid--solo {
    grid-template-columns: minmax(0, var(--awh-measure));
    justify-content: center;
  }

  .awh-legal__note {
    padding: var(--awh-sp-5);
    margin-bottom: var(--awh-sp-6);
    border-left: 2px solid var(--awh-orange);
    background: var(--awh-clr-surface-sunken);
    color: var(--awh-clr-ink);
  }

  .awh-legal__note > * + * {
    margin-top: var(--awh-sp-3);
  }

  .awh-legal__meta {
    margin-bottom: var(--awh-sp-6);
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
  }

  /* .art__body already carries the measure, the paragraph rhythm, the H2 and
     the unordered list — everything the blog needed. A policy brings two things
     a blog post never did: H3 subheadings and numbered lists. Only those are
     added here. */
  .awh-legal__body h3 {
    margin-top: var(--awh-sp-6);
    font-size: var(--awh-fs-lg);
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-ink);
    scroll-margin-block-start: 110px;
  }

  .awh-legal__body h2:first-child,
  .awh-legal__body h3:first-child {
    margin-top: 0;
  }

  .awh-legal__body ul {
    list-style: disc;
  }

  .awh-legal__body ol {
    padding-left: var(--awh-sp-5);
    display: grid;
    gap: var(--awh-sp-2);
    list-style: decimal;
  }
/* END_SECTION:awh-legal */

/* START_SECTION:awh-models (INDEX:24) */
/* Ported from styles/site.css, BLOCK: models — product cards. */

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

  .models__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--awh-sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .model {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .model:hover {
    border-color: var(--awh-clr-line-strong);
    box-shadow: var(--awh-shadow-md);
    transform: translateY(-3px);
  }

  .model__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .model__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    transition: transform var(--awh-dur-slow) var(--awh-ease-out);
  }

  .model:hover .model__media img {
    transform: scale(1.03);
  }

  .model__body {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-1);
    padding: var(--awh-sp-5);
    flex: 1;
  }

  /* Attribute line — the same vocabulary as the filter tags above, which is
     what makes those tags mean something. */
  .model__attrs {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
    margin-bottom: var(--awh-sp-2);
  }

  .model__title {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
  }

  .model__title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* The model code in mono. This is the site that actually has 128 of them. */
  .model__code {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  .model__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    margin-top: auto;
    padding-top: var(--awh-sp-5);
  }

  .model__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  /* "Vanaf" is always present. On the live site the collection says
     "Vanaf €4.079,00" and the product page says "€4.079,00" — the same number
     meaning two different things. */
  .model__price-label {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .model__price-value {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
  }

  .model__cta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
    white-space: nowrap;
  }

  .model__cta svg {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .model:hover .model__cta svg {
    transform: translateX(3px);
  }

  @media (max-width: 1024px) {
    .models__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 560px) {
    .models__grid {
      gap: var(--awh-sp-4);
    }

    .model__body {
      padding: var(--awh-sp-4);
    }

    .model__foot {
      flex-direction: column;
      align-items: stretch;
      gap: var(--awh-sp-3);
    }
  }
/* END_SECTION:awh-models */

/* START_SECTION:awh-product-videos (INDEX:28) */
/* Ported from styles/video.css by scripts/rename-tokens.py — a prefix rename
     and nothing else. */

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

  .pvids__lede p {
    font-size: var(--awh-fs-lg);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink-muted);
    max-width: var(--awh-measure);
  }

  .pvids__lede p + p {
    margin-top: var(--awh-sp-4);
  }

  /* ==========================================================================
     Video
     --------------------------------------------------------------------------
     Three surfaces share one player: the PDP gallery, the homepage product-video
     row, and the full-bleed banner.
  
     The dominant constraint is aspect. AW Hekken's product footage is 1080×1920
     portrait — shot on a phone, held upright — while every product photograph is
     landscape. Nothing here crops video to fit a landscape box: a poort that
     only half fits is the one thing the footage exists to avoid.
     ========================================================================== */
  
  /* --------------------------------------------------------------------------
     Player
     -------------------------------------------------------------------------- */
  
  .vspeler {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    background: var(--awh-clr-dark-bg);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
  }
  
  .vspeler__video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    /* `contain`, never `cover` — see the note at the top of this file. */
    object-fit: contain;
    background: var(--awh-clr-dark-bg);
  }
  
  /* The idle state is a button, so it is keyboard reachable and announces what
     it plays. It is also what a visitor sees most, and is the part the live
     site leaves entirely to default browser chrome. */
  .vspeler__start {
    display: block;
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    border: 0;
    background: var(--awh-clr-dark-bg);
    cursor: pointer;
    color: var(--awh-clr-dark-ink);
    text-align: start;
  }
  
  .vspeler__poster {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--awh-dur-base) var(--awh-ease-out), opacity var(--awh-dur-base) var(--awh-ease-out);
  }
  
  .vspeler--portret .vspeler__poster {
    object-fit: cover;
  }
  
  .vspeler__leeg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    background: var(--awh-clr-dark-surface);
  }
  
  .vspeler__start::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.1) 45%, transparent 70%);
  }
  
  .vspeler__knop {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    z-index: 1;
  
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    border-radius: 50%;
    background: var(--awh-clr-accent);
    color: var(--awh-clr-accent-ink);
    /* Optical centring: a triangle's visual mass sits left of its bounding box. */
    padding-inline-start: 3px;
    transition: scale var(--awh-dur-fast) var(--awh-ease-out), background var(--awh-dur-fast) var(--awh-ease-out);
  }
  
  .vspeler__label {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    gap: var(--awh-sp-2);
    padding: var(--awh-sp-4);
  }
  
  .vspeler__titel {
    font-size: var(--awh-fs-xs);
    font-weight: 600;
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-dark-ink);
  }
  
  .vspeler__duur {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-dark-ink-muted);
  }
  
  .vspeler__start:hover .vspeler__knop,
  .vspeler__start:focus-visible .vspeler__knop {
    scale: 1.08;
    background: var(--awh-clr-accent-hover);
  }
  
  .vspeler__start:hover .vspeler__poster {
    transform: scale(1.03);
  }
  
  .vspeler__start:focus-visible {
    outline: 3px solid var(--awh-clr-focus);
    outline-offset: -3px;
  }
  
  .galerij__hoofd--video .vspeler {
    /* 3:4 inside a 4:3 stage — as tall as the box allows, centred. */
    aspect-ratio: 3 / 4;
    block-size: 100%;
    inline-size: auto;
  }
  
  /* --------------------------------------------------------------------------
     Homepage · product video row
     -------------------------------------------------------------------------- */
  
  .pvids__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--awh-sp-12);
    align-items: center;
  }
  
  .pvids__tekst .lede {
    margin-block-start: var(--awh-sp-4);
  }
  
  .pvids__tekst .btn {
    margin-block-start: var(--awh-sp-6);
  }
  
  .pvids__rij-wrap {
    position: relative;
    min-inline-size: 0;
  }
  
  .pvids__rij {
    display: flex;
    gap: var(--awh-sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Room for the cards' focus ring, which would otherwise be clipped by the
       scroll container. */
    padding-block: var(--awh-sp-1);
    scrollbar-width: none;
  }
  
  .pvids__rij::-webkit-scrollbar {
    display: none;
  }
  
  .pvids__kaart {
    flex: 0 0 clamp(200px, 44%, 260px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  /* `block-size: auto` overrides the player's default fill. The card stretches
     to the tallest in the row, and without this the video would take all of
     that height and push the link out of the scroll container's box. */
  .pvids__kaart .vspeler {
    aspect-ratio: 9 / 16;
    block-size: auto;
    flex: none;
  }
  
  .pvids__link {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-block-start: var(--awh-sp-3);
    /* 44px minimum target height, per the project floor. */
    padding-block: var(--awh-sp-3);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    color: var(--awh-clr-ink);
    text-decoration: none;
    border-block-end: 1px solid var(--awh-clr-line-strong);
  }
  
  .pvids__link:hover {
    color: var(--awh-clr-accent);
    border-color: var(--awh-clr-accent);
  }
  
  .pvids__nav {
    display: flex;
    gap: var(--awh-sp-2);
    margin-block-start: var(--awh-sp-4);
  }
  
  .pvids__pijl {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: 50%;
    background: var(--awh-clr-surface);
    color: var(--awh-clr-ink);
    cursor: pointer;
    transition: background var(--awh-dur-fast) var(--awh-ease-out), color var(--awh-dur-fast) var(--awh-ease-out);
  }
  
  .pvids__pijl:hover {
    background: var(--awh-clr-ink);
    color: var(--awh-clr-ink-inverse);
  }
  
  .pvids__pijl-ico--links {
    rotate: 90deg;
  }
  
  .pvids__pijl-ico--rechts {
    rotate: -90deg;
  }
  
  @media (max-width: 900px) {
    .pvids__inner {
      grid-template-columns: 1fr;
      gap: var(--awh-sp-8);
    }
  
    /* Full-bleed row on small screens, so a card is not clipped mid-gutter. */
    .pvids__rij {
      margin-inline: calc(var(--awh-gutter) * -1);
      padding-inline: var(--awh-gutter);
    }
  
    .pvids__kaart {
      flex-basis: clamp(180px, 60vw, 240px);
    }
  
    /* Touch scrolling makes the arrows redundant, and they are aria-hidden, so
       nothing is lost by removing them here. */
    .pvids__nav {
      display: none;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    /* The observer never starts playback in this mode — see VideoBanner.js —
       so the poster stands and transitions elsewhere are dropped too. */
    .vspeler__poster,
    .vspeler__knop {
      transition: none;
    }
  
    .vspeler__start:hover .vspeler__poster {
      transform: none;
    }
  
    .pvids__rij {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:awh-product-videos */

/* START_SECTION:awh-product (INDEX:29) */
awh-gallery-component {
    display: block;
  }
/* END_SECTION:awh-product */

/* START_SECTION:awh-projects (INDEX:30) */
/* Ported from styles/site.css, BLOCK: projects. */

  .projects__lede {
    max-width: 36ch;
  }

  .projects__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--awh-sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

  .project {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .project:hover {
    border-color: var(--awh-clr-line-strong);
    box-shadow: var(--awh-shadow-md);
    transform: translateY(-3px);
  }

  .project__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .project__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
  }

  .project__body {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-2);
    padding: var(--awh-sp-5);
    flex: 1;
  }

  .project__title {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
  }

  .project__title a::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .project__summary {
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  /* The configuration that produced it, so a visitor can load exactly that
     setup into the configurator. */
  .project__config {
    margin-top: var(--awh-sp-2);
    padding: var(--awh-sp-3);
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-xs);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    line-height: 1.55;
    letter-spacing: 0.02em;
    color: var(--awh-clr-ink-muted);
  }

  .project__cta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: auto;
    padding-top: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
  }

  .project__cta svg {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .project:hover .project__cta svg {
    transform: translateX(3px);
  }

  @media (max-width: 900px) {
    .projects__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 560px) {
    .projects__grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:awh-projects */

/* START_SECTION:awh-proof (INDEX:31) */
/* Ported from styles/site.css, BLOCK: proof — the four-up strip. */

  .proof {
    background: var(--awh-clr-surface);
    border-bottom: 1px solid var(--awh-clr-line);
  }

  .proof__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Shopify wraps each block, so the wrapper is the grid item, not the <li>. */
  .proof__list > .shopify-block {
    display: contents;
  }

  .proof__item {
    padding: var(--awh-sp-6) var(--awh-sp-6) var(--awh-sp-6) 0;
    border-inline-start: 1px solid var(--awh-clr-line);
    padding-inline-start: var(--awh-sp-6);
  }

  .proof__list > .shopify-block:first-child .proof__item {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .proof__value {
    display: block;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
    color: var(--awh-clr-ink);
  }

  .proof__label {
    display: block;
    margin-top: var(--awh-sp-2);
    font-size: var(--awh-fs-2xs);
    line-height: 1.45;
    color: var(--awh-clr-ink-muted);
  }

  @media (max-width: 860px) {
    .proof__list {
      grid-template-columns: repeat(2, 1fr);
    }

    .proof__list > .shopify-block:nth-child(odd) .proof__item {
      border-inline-start: 0;
      padding-inline-start: 0;
    }

    .proof__list > .shopify-block:nth-child(n + 3) .proof__item {
      border-top: 1px solid var(--awh-clr-line);
    }
  }
/* END_SECTION:awh-proof */

/* START_SECTION:awh-routes (INDEX:34) */
/* ==========================================================================
     BLOCK: route — "which of these are you?" cards
     ========================================================================== */
  .awh-routes .routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--awh-sp-5);
    margin-top: var(--awh-sp-10);
  }

  .awh-routes .route {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--awh-sp-7);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    text-decoration: none;
    transition:
    border-color var(--awh-dur-fast) var(--awh-ease-out),
    box-shadow var(--awh-dur-base) var(--awh-ease-out);
  }

  /* Deliberately no translateY on hover. These cards carry two full-width rules —
     above the meta line and above the CTA — which line up across the row at rest.
     Lifting one card by even 2px snapped its rules out of alignment with its
     neighbours, and that reads as a rendering fault rather than as a hover state.
     The affordance is the slat band instead: it is the brand motif, it lives
     inside the card's own box, and it moves nothing. */
  .awh-routes .route::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background-image: repeating-linear-gradient(
    90deg,
    var(--awh-orange) 0,
    var(--awh-orange) var(--awh-slat-bar),
    transparent var(--awh-slat-bar),
    transparent var(--awh-slat-period)
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .awh-routes .route:hover,


  .awh-routes .route:focus-visible {
    border-color: var(--awh-clr-accent);
    box-shadow: var(--awh-shadow-md);
  }

  .awh-routes .route:hover::before,


  .awh-routes .route:focus-visible::before {
    transform: scaleX(1);
  }

  .awh-routes .route__eyebrow {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-accent);
  }

  .awh-routes .route__title {
    margin-top: var(--awh-sp-3);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    line-height: var(--awh-lh-snug);
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    color: var(--awh-clr-ink);
  }

  .awh-routes .route__body {
    margin-top: var(--awh-sp-3);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  /* auto margin pushes the meta + CTA to the bottom, so they line up across a row
     of cards whose body copy is different lengths. */
  .awh-routes .route__meta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: auto;
    padding-top: var(--awh-sp-6);
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink-muted);
  }

  .awh-routes .route__meta svg {
    flex: none;
    color: var(--awh-clr-accent);
  }

  .awh-routes .route__cta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin-top: var(--awh-sp-4);
    padding-top: var(--awh-sp-4);
    border-top: 1px solid var(--awh-clr-line);
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    color: var(--awh-clr-accent);
  }

  .awh-routes .route:hover .route__cta svg,


  .awh-routes .route:focus-visible .route__cta svg {
    transform: translateX(3px);
  }

  .awh-routes .route__cta svg {
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }
/* END_SECTION:awh-routes */

/* START_SECTION:awh-showroom (INDEX:36) */
/* Ported from styles/site.css, BLOCK: showroom. */

  .showroom__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .showroom__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-3);
    margin-top: var(--awh-sp-8);
  }

  .showroom__facts {
    display: grid;
    margin-top: var(--awh-sp-8);
    border-top: 1px solid var(--awh-clr-line);
  }

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

  .showroom__fact {
    display: flex;
    justify-content: space-between;
    gap: var(--awh-sp-5);
    padding-block: var(--awh-sp-3);
    border-bottom: 1px solid var(--awh-clr-line);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: 0.03em;
  }

  .showroom__fact dt {
    color: var(--awh-clr-ink-muted);
    text-transform: uppercase;
  }

  .showroom__fact dd {
    margin: 0;
    text-align: end;
  }

  .showroom__media {
    position: relative;
    aspect-ratio: 3 / 2;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

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

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

    .showroom__media {
      order: -1;
    }
  }
/* END_SECTION:awh-showroom */

/* START_SECTION:awh-slats (INDEX:37) */
/* The divider itself lives in snippets/awh-base.liquid, with the rest of the
     shared primitives. This section only places it. */
/* END_SECTION:awh-slats */

/* START_SECTION:awh-steps (INDEX:38) */
/* Ported from styles/site.css, BLOCK: steps. */

  .steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--awh-sp-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }

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

  .step {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-3);
    padding-top: var(--awh-sp-5);
    border-top: 2px solid var(--awh-clr-line);
  }

  .step__number {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-lg);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-orange);
    font-variant-numeric: tabular-nums;
  }

  .step__title {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
  }

  .step__body {
    font-size: var(--awh-fs-2xs);
    line-height: 1.55;
    color: var(--awh-clr-ink-muted);
  }

  @media (max-width: 900px) {
    .steps__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 480px) {
    .steps__grid {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:awh-steps */

/* START_SECTION:awh-utility-bar (INDEX:41) */
/* Ported from aw-design/css/header.css, BLOCK: utilitybar.
     The class names are unchanged on purpose — this is the one header
     component that is genuinely the same on both sites, so the rules
     transfer rather than being rewritten. Only the token names differ,
     per the mapping in SHOPIFY-MIGRATION-PLAN.md section 3. */

  .utilitybar {
    font-size: var(--awh-fs-2xs);
  }

  .utilitybar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-6);
    min-height: 38px;
    padding-block: var(--awh-sp-2);
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--awh-gutter);
  }

  .utilitybar__inner--page-width {
    max-width: var(--awh-container);
  }

  /* The block wrapper Shopify injects would otherwise be the flex item, so the
     gap and alignment below would apply to it instead of to the USP. */
  .utilitybar__usps > .shopify-block {
    display: contents;
  }

  .utilitybar__usps {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-6);
    min-inline-size: 0;
  }

  .utilitybar__usp {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    white-space: nowrap;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .utilitybar__usp-link {
    color: inherit;
    text-decoration: none;
  }

  .utilitybar__usp-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .utilitybar__check {
    flex: none;
  }

  .utilitybar__actions {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-5);
    flex: none;
  }

  /* Needs its own flex context: the global reset sets `svg { display: block }`,
     which would otherwise push the icon onto a line of its own. */
  .utilitybar__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    /* The text is 20px tall, which fails WCAG 2.2 AA target size (24x24).
       Padding absorbs into the bar's existing 38px min-height, so the tap
       target clears the floor without the bar growing. */
    padding-block: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    transition: color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .utilitybar__tel svg {
    flex: none;
  }

  .utilitybar__tel:hover {
    color: var(--awh-utility-accent);
  }

  .utilitybar__cta {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: var(--awh-sp-2) var(--awh-sp-4);
    background: var(--awh-utility-accent);
    color: #fff;
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .utilitybar__cta:hover {
    background: var(--awh-utility-accent-deep);
  }

  @media (max-width: 900px) {
    .utilitybar__usps {
      gap: var(--awh-sp-4);
    }

    /* The wrapper, not the span: Shopify puts a .shopify-block between the
       flex row and our markup, so it is what :nth-child sees. */
    .utilitybar__usps > .shopify-block:nth-child(n + 2) {
      display: none;
    }
  }

  @media (max-width: 560px) {
    .utilitybar__cta {
      display: none;
    }
  }

  /* Below ~380px the USP and the phone number cannot both hold their line.
     The phone number is the more useful of the two, so the USP steps aside. */
  @media (max-width: 380px) {
    .utilitybar__usps {
      display: none;
    }

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

  @media (max-width: 749px) {
    .utilitybar--desktop-only {
      display: none;
    }
  }
/* END_SECTION:awh-utility-bar */

/* START_SECTION:awh-video-banner (INDEX:42) */
/* Ported from styles/video.css by scripts/rename-tokens.py. */

  /* --------------------------------------------------------------------------
     Homepage · full-bleed banner
     -------------------------------------------------------------------------- */
  
  .vbanner {
    position: relative;
    display: grid;
    place-items: center;
    min-block-size: clamp(380px, 56vh, 560px);
    overflow: hidden;
    background: var(--awh-clr-dark-bg);
    isolation: isolate;
  }
  
  .vbanner__video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    z-index: -2;
  }
  
  /* Text over footage needs a guaranteed contrast floor — the clip is dark in
     most frames but not all, and the heading has to stay readable in every one. */
  .vbanner__waas {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      to right,
      rgb(0 0 0 / 0.82) 0%,
      rgb(0 0 0 / 0.62) 45%,
      rgb(0 0 0 / 0.35) 100%
    );
  }
  
  .vbanner__inner {
    text-align: start;
    padding-block: var(--awh-sp-16);
  }
  
  .vbanner__titel {
    max-inline-size: 14ch;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-3xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-display);
    line-height: var(--awh-lh-tight);
    color: var(--awh-clr-dark-ink);
  }
  
  .vbanner__tekst {
    max-inline-size: var(--awh-measure-short);
    margin-block: var(--awh-sp-4) var(--awh-sp-6);
    font-size: var(--awh-fs-md);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-dark-ink-muted);
  }
  
  /* WCAG 2.2 · 2.2.2 — anything that moves for more than five seconds needs a
     pause control. Bottom-right, out of the reading path, always reachable. */
  .vbanner__pauze {
    position: absolute;
    inset-block-end: var(--awh-sp-4);
    inset-inline-end: var(--awh-sp-4);
    min-block-size: 44px;
    padding-inline: var(--awh-sp-4);
    border: 1px solid rgb(255 255 255 / 0.35);
    border-radius: var(--awh-radius-pill);
    background: rgb(0 0 0 / 0.45);
    color: var(--awh-clr-dark-ink);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    cursor: pointer;
  }
  
  .vbanner__pauze:hover {
    background: rgb(0 0 0 / 0.7);
    border-color: var(--awh-clr-dark-ink);
  }
/* END_SECTION:awh-video-banner */

/* START_SECTION:collection-links (INDEX:45) */
collection-links-component {
    --alignment: flex-start;

    display: grid;
    align-items: center;
    grid-gap: var(--gap-3xl);

    &:has([ratio='portrait']) {
      --template-column-ratio: 0.8fr;
    }

    &:has([ratio='square']) {
      --template-column-ratio: 1fr;
    }

    &:has([ratio='landscape']) {
      --template-column-ratio: 1.4fr;
    }

    &[alignment='center'] {
      --alignment: center;

      .text-block {
        text-align: center;
      }
    }

    &[alignment='right'] {
      --alignment: flex-end;

      .text-block {
        text-align: right;
      }
    }

    &[layout='spotlight'] {
      position: relative;
      grid-template-columns: 1fr var(--template-column-ratio);
      grid-template-areas: 'text image';

      @media screen and (min-width: 750px) {
        &[reverse] {
          grid-template-areas: 'image text';
          grid-template-columns: var(--template-column-ratio) 1fr;
        }
      }

      .collection-links__container {
        align-items: var(--alignment);
      }

      @media screen and (max-width: 749px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'text' 'image';
        grid-gap: var(--gap-2xl);

        .collection-links__container {
          gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
          justify-content: var(--alignment);
        }
      }
    }

    &[layout='text'] {
      grid-gap: 0;
      grid-template-areas: 'text';

      .collection-links__container {
        gap: clamp(var(--gap-xs), 1vw, var(--gap-xl)) var(--gap-2xl);
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: var(--alignment);
      }
    }
  }

  .collection-links__container {
    display: flex;
    gap: var(--gap-md);
    flex-direction: column;
  }

  .collection-links__images {
    overflow: hidden;
    grid-area: image;

    @media screen and (max-width: 749px) {
      image-block {
        max-width: 100%;
      }
    }
  }
/* END_SECTION:collection-links */

/* START_SECTION:featured-product (INDEX:51) */
.featured-product-section .section-content-wrapper {
    grid-template-columns: 1fr;
    display: grid;
    overflow: hidden;

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

  .featured-product-section {
    --viewport-offset: 400px;
    --constrained-min-height: var(--visual-preview--height, 80dvh);
    --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

    @media screen and (min-width: 750px) {
      --viewport-offset: 300px;
    }
  }

  .featured-product-section .product-grid__card {
    --padding-block: 20px;
    --padding-inline: 20px;

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

  @media screen and (max-width: 749px) {
    .featured-product-section .media-block {
      order: -1;
    }
  }

  @media screen and (min-width: 750px) {
    .featured-product-section .product-card__content {
      --hugged-width: calc(var(--constrained-height) * var(--gallery-aspect-ratio, var(--media-preview-ratio)));
      width: min(100%, var(--hugged-width));
      margin-left: auto;
      margin-right: auto;
    }
  }
/* END_SECTION:featured-product */

/* START_SECTION:footer-utilities (INDEX:52) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid var(--divider-color, var(--color-border));
    color: var(--color-foreground-muted);

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      justify-content: center;
      gap: var(--gap);
      align-items: center;
      text-align: left;
    }
  }

  .utilities a,
  .utilities button {
    color: var(--color-utilities, var(--color-foreground-muted));
  }

  .utilities > * {
    text-align: center;

    @media screen and (min-width: 750px) {
      text-align: left;
      justify-self: start;
    }
  }

  /* Dynamic positioning based on number of blocks */
  @media screen and (min-width: 750px) {
    /* 1 block: Single column, left aligned */
    .utilities--blocks-1 {
      grid-template-columns: 1fr;
      justify-content: start;
    }

    .utilities--blocks-1 > * {
      justify-self: start;
      text-align: left;
    }

    /* 2 blocks: Two equal columns, start and end aligned */
    .utilities--blocks-2 {
      grid-template-columns: 1fr 1fr;
    }

    .utilities--blocks-2 > *:nth-child(2) {
      justify-self: end;
      text-align: right;
    }

    /* 3 blocks: Three columns (1fr auto 1fr), start/center/end aligned */
    .utilities--blocks-3 {
      grid-template-columns: 1fr auto 1fr;
    }

    .utilities--blocks-3 > *:nth-child(2) {
      justify-self: center;
      text-align: center;
    }

    .utilities--blocks-3 > *:nth-child(3) {
      justify-self: end;
      text-align: right;
    }
  }
/* END_SECTION:footer-utilities */

/* START_SECTION:footer (INDEX:53) */
.footer-content {
    contain: content;
    content-visibility: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--footer-gap);
    align-items: start;
  }

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

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .footer-content {
      grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
      grid-auto-flow: row;
    }

    .footer-content[style*='--grid-columns: 4'] {
      grid-template-columns: repeat(2, 1fr);
    }

    .footer-content--isolated-grid-item-tablet > :last-child {
      grid-column: 1 / -1;
    }
  }

  @media screen and (min-width: 990px) {
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }

    /* Single item centered */
    .footer-content[style*='--grid-columns: 1'] {
      justify-items: center;
    }

    .footer-content--isolated-grid-item-desktop > :last-child {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header-announcements (INDEX:84) */
.announcement-bar {
    border-block-end: var(--border-bottom-width) solid var(--color-border);
  }

  .announcement-bar__slider {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .announcement-bar__slides {
    display: grid;
    grid: [stack] auto / [stack] auto;
    width: calc(100% - var(--button-size) * 2);
    max-width: 680px;
    margin-inline: auto;
  }

  .announcement-bar__slides > * {
    grid-area: stack;
  }

  .announcement-bar__slide {
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    content-visibility: visible;

    &[aria-hidden='true'] {
      opacity: 0;
      visibility: hidden;
    }
  }

  .announcement-bar__slider slideshow-arrows {
    padding: 0;
    mix-blend-mode: normal;
  }

  .announcement-bar__slider slideshow-arrows .slideshow-control {
    color: var(--color-foreground);
  }

  .announcement-bar__slider .slideshow-control {
    display: flex;
    padding: 0;
    width: var(--button-size);
    height: var(--button-size);
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: none;

    @media screen and (min-width: 750px) {
      --slideshow-control-offset: calc((var(--button-size) - var(--icon-size-xs)) / 2);

      .section--page-width &.slideshow-control--previous {
        transform: translateX(var(--slideshow-control-offset));
      }
    }
  }

  .announcement-bar__slider .slideshow-control .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .announcement-bar__slide {
    place-content: center;
  }

  .announcement-bar__text:first-child {
    margin: 0;
  }

  .announcement-bar__link {
    position: absolute;
    inset: 0;
  }
/* END_SECTION:header-announcements */

/* START_SECTION:header (INDEX:85) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  .header {
    /* Set header paddings based on height setting */
    --header-padding: var(--padding-sm);
    --font-paragraph--line-height: 1;
    --header-content-transition-timing: 0s;

    display: block;
    contain: layout style;
    background: transparent;

    a,
    .button,
    .button-secondary,
    .header-actions__action {
      /* reset style from base.css */
      transition: color var(--header-content-transition-timing), border-color var(--header-content-transition-timing);
    }
  }

  #header-component :is(.header-menu, .dropdown-localization) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] :is(.header-menu, .dropdown-localization) {
      display: flex;
    }
  }

  #header-component[data-menu-style='drawer'] .header__column {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__navigation-bar-row {
      display: none;
    }
  }

  .header[transparent] {
    --language-button-background-color: transparent;
    --language-button-border-color: transparent;
    --header-content-transition-timing: calc(var(--submenu-animation-speed) - var(--animation-speed-fast))
      var(--animation-speed-fast) var(--ease-out-cubic);

    --closed-underlay-height: 0px;

    /* used to display the appropriate logo based on transparency state */
    --header-logo-display: none;
    --header-logo-inverse-display: block;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    z-index: var(--layer-overlay);

    &[transparent='not-sticky'][data-sticky-state='active'],
    &:has(.menu-list__list-item > .menu-list__link:not([aria-haspopup]):hover) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --closed-underlay-height: 100%;
    }

    /** For transparent header, apply transparent text color to rows when menu is not hovered */
    &:not([data-sticky-state='active']):not(:has(.menu-list__link:hover)):not(:has(header-menu[aria-expanded='true']))
      .header__row {
      --color-foreground: var(--color-transparent-text);
      --color-foreground-rgb: var(--color-transparent-text-rgb);
      --color-border: var(--color-transparent-text);
      --color-border-rgb: var(--color-transparent-text-rgb);
      --color-primary-button-background: var(--color-transparent-text);
      --color-primary-button-text: var(--color-transparent-text-contrast);
    }

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

    /* Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link:hover),
    &:has(header-menu[aria-expanded='true']) {
      --header-logo-display: unset;
      --header-logo-inverse-display: unset;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --header-content-transition-timing: var(--submenu-animation-speed) var(--ease-out-cubic);
    }
  }

  /* When top row has transparent background, make it inherit colors from header component */
  [data-transparent-background='top']:hover .header__row--top,
  [data-transparent-background='top']:focus-within .header__row--top,
  [data-transparent-background='both']:hover .header__row--top,
  [data-transparent-background='both']:focus-within .header__row--top {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  /* When bottom row has transparent background, make it inherit colors from header component */
  [data-transparent-background='bottom']:hover .header__row--bottom,
  [data-transparent-background='bottom']:focus-within .header__row--bottom,
  [data-transparent-background='both']:hover .header__row--bottom,
  [data-transparent-background='both']:focus-within .header__row--bottom {
    --color-foreground: inherit;
    --color-foreground-rgb: inherit;
    --color-border: inherit;
    --color-border-rgb: inherit;
    --color-primary-button-background: inherit;
    --color-primary-button-text: inherit;
  }

  .header-section {
    position: relative;
    z-index: var(--layer-menu-drawer);
  }

  /* need default values for non-flash transitions on first overflow menu open */
  #header-component {
    --submenu-height: 0px;
    --full-open-header-height: 0px;
  }

  #header-group:has(#header-component[sticky]) {
    display: contents;
  }

  .header-section:has(> #header-component[sticky='always']),
  .header-section:has(> #header-component[sticky='scroll-up'][data-sticky-state='active']) {
    position: sticky;

    /* Use -1 instead of 0 so intersection observer can track sticky state */
    top: -1px;
    z-index: var(--layer-menu-drawer);
  }

  .header[data-sticky-state] {
    transition: opacity var(--animation-speed) var(--animation-easing);
    opacity: 1;
  }

  .header[data-sticky-state='active'] {
    view-transition-name: sticky-header;
  }

  :active-view-transition-type(empty-cart-drawer) {
    .header[data-sticky-state='active'] {
      view-transition-name: none;
    }
  }

  .header[data-sticky-state='idle'] {
    opacity: 0;
  }

  /* ================================
     * Underlays
     * ================================ */
  .header__underlay {
    position: absolute;
    inset: 0;
  }

  .header__underlay-closed {
    height: var(--closed-underlay-height, 100%);
    z-index: var(--layer-lowest);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height)
    );
    transition: height var(--animation-speed-slow) var(--ease-out-cubic);
  }

  .header__underlay-open {
    height: var(--full-open-header-height);
    background: linear-gradient(
      var(--color-background-top-row) 0 var(--top-row-height),
      var(--color-background-bottom-row) var(--top-row-height) var(--header-height),
      var(--color-submenu) var(--header-height) 100%
    );
    /* header-height is updated via js, the transition works automagically */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

  .header__underlay-open::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--shadow-popover);
    clip-path: inset(var(--header-height) 0 -100px 0); /* stylelint-disable-line */
    transition: height var(--submenu-animation-speed) var(--ease-out-cubic);
  }

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

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

  [data-submenu-overlap-bottom-row] {
    .header__underlay-open {
      background: linear-gradient(
        var(--color-background-top-row) 0 var(--top-row-height),
        var(--color-submenu) var(--top-row-height) 100%
      );
    }

    .header__row--bottom {
      z-index: var(--layer-lowest);
    }
  }

  /* End Underlays ================ */

  .header__row {
    /* The account component uses a different background color, but we need to override it to inherit the color of the header row */
    --color-account-icon: var(--color-foreground);

    position: relative;

    /* Overwrite color from section settings, background is controlled by the underlays */
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__submenu:not([inert])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

  .header__row--top:not(.divider--page-width),
  .header__row--top.divider--page-width .header__columns,
  .header__row--bottom {
    border-bottom: var(--border-bottom-width) solid var(--border-bottom-color, var(--color-border));
  }

  @media screen and (max-width: 749px) {
    .header__row--top:not(.divider--page-width),
    .header__row--top.divider--page-width .header__columns {
      border-bottom-width: var(--border-bottom-width-mobile);
      border-bottom-color: var(--border-bottom-color-mobile);
    }
  }

  #header-component[data-menu-style='drawer'] .header__row--top:not(.divider--page-width),
  #header-component[data-menu-style='drawer'] .header__row--top.divider--page-width .header__columns {
    border-bottom-width: var(--border-bottom-width-mobile);
    border-bottom-color: var(--border-bottom-color-mobile);
  }

  .header__row.divider--page-width:not(.section--page-width) .header__columns {
    @media screen and (min-width: 750px) {
      padding-inline-start: 0;
      padding-inline-end: 0;
      margin-inline-start: var(--page-margin);
      margin-inline-end: var(--page-margin);
    }
  }

  .header__column {
    display: flex;
    align-items: center;

    /* on mobile, header__column nodes are ignored to create a new grid-template-area based on all visible content */
    @media screen and (max-width: 749px) {
      display: contents;
    }
  }

  .header__column--left,
  .header__column--center {
    gap: var(--gap-xl);
    grid-area: left;
  }

  .header__column--center {
    justify-content: center;
    grid-area: center;

    header-menu:only-child .overflow-menu::part(list) {
      justify-content: center;
    }
  }

  .header__column--right {
    gap: var(--gap-xl);
    justify-content: flex-end;
    grid-area: right;

    .overflow-menu::part(list) {
      justify-content: flex-end;
    }
  }

  .header__columns {
    /* Three column layout */
    --header-left: 1fr;
    --header-center: auto;
    --header-right: 1fr;
    --header-template-columns: var(--header-left) var(--header-center) var(--header-right);

    /* Mobile layout */
    --header-mobile-bookend: 44px;

    display: grid;
    grid-template-areas: 'left center right';
    grid-gap: var(--gap-xl);
    grid-template-columns: var(--header-template-columns);

    /* If menu is in center column */
    &:has(.header__column--center header-menu) {
      --header-center: auto;
      --header-left: minmax(max-content, 1fr);
      --header-right: minmax(max-content, 1fr);
    }

    /* If there is no center column, make the column the menu is in grow eagerly */
    &:where(:not(:has(.header__column--center))) {
      @media screen and (min-width: 750px) {
        --header-template-columns: var(--header-left) var(--header-right);

        grid-template-areas: 'left right';
      }

      /* If the header-menu is in the right column */
      &:has(.header__column--right header-menu) {
        --header-right: auto;
        --header-left: minmax(max-content, 1fr);
      }

      /* If the header-menu is in the left column */
      &:has(.header__column--left header-menu) {
        --header-left: auto;
        --header-right: minmax(max-content, 1fr);
      }
    }

    @media screen and (max-width: 749px) {
      --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
        var(--header-mobile-bookend) var(--header-mobile-bookend);

      grid-template-areas: 'leftA leftB center rightA rightB';
      grid-column: span 3;
      column-gap: 0;
      align-items: center;
      padding-block: 0;
      padding-inline: 0 var(--padding-3xs);

      .header-logo {
        grid-area: center;
      }

      &:not(:has(header-actions)) .search-action {
        grid-area: leftB;
      }

      &:not(:has(shopify-account)) .search-action {
        grid-area: rightA;
      }

      .search-action {
        grid-area: leftB;
      }

      header-actions {
        grid-area: rightB;
      }
    }
  }

  /* not ideal but we need to duplicate these styles for when touch comes into play
    We could avoid the duplication using js to set the data-menu-style attribute on small screens instead of using @media queries */
  #header-component[data-menu-style='drawer'] .header__columns {
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr
      var(--header-mobile-bookend) var(--header-mobile-bookend);

    grid-template-areas: 'leftA leftB center rightA rightB';
    grid-column: span 3;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
    padding-inline: 0 var(--padding-3xs);

    .header-logo {
      grid-area: center;
    }

    &:not(:has(header-actions)) .search-action {
      grid-area: leftB;
    }

    &:not(:has(shopify-account)) .search-action {
      grid-area: rightA;
    }

    .search-action {
      grid-area: leftB;
    }

    header-actions {
      grid-area: rightB;
    }
  }

  /* Single column layout if there are no columns within */
  .header__columns:not(:has(.header__column)) {
    grid-template-columns: 1fr;
  }

  /* Check for hover support to avoid unnecessary expensive recalculations when tapping on mobile */
  @media (hover: hover) {
    /* Column-specific dimming effect when any interactive element is hovered
        Multiple selectors for performance: each simple :has() check is faster than one complex selector with multiple conditions */
    .header__column:has(header-menu:hover),
    .header__column:has(.header-actions__action:hover),
    .header__column:has(.header__icon--menu:hover) {
      header-menu:not(:hover),
      .header-actions__action:not(:hover),
      .header__icon--menu:not(:hover) {
        opacity: var(--opacity-subdued-text);
        transition: opacity var(--animation-speed) var(--animation-easing);
      }
    }
  }

  /* Ensure smooth transitions for all interactive elements */
  header-menu,
  .header-actions__action,
  .header__icon--menu {
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* Header action button styles */
  .header-actions__action {
    --button-color: var(--color-foreground);
    color: var(--button-color);
    cursor: pointer;
    display: flex;
    justify-content: center;

    &:hover {
      --button-color: var(--color-foreground);
    }
  }

  .header-actions__action:not(.account-button) .svg-wrapper {
    height: var(--button-size);
    width: var(--button-size);
  }

  .header-actions__action:not(.account-button) svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .header:has(#Details-menu-drawer-container[open]) {
    contain: style;
  }

  .header.header--compact {
    --header-padding: var(--padding-2xs);
  }

  .header__columns {
    --padding-block-start: var(--header-padding);
    --padding-block-end: var(--header-padding);
  }

  .header:not(.header--compact) .header__row--bottom {
    --header-padding: var(--padding-xs);
  }

  .header--collapse-row-paddings {
    .header__row--top .header__columns {
      --padding-block-end: 0px;
    }

    .header__row--bottom .header__columns {
      --padding-block-start: 0px;
    }
  }

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

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

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

  /* When the header is transparent, add a margin to a potential header-section below it */
  .header-section:has(.header[transparent]) + .shopify-section {
    margin-top: var(--header-height);
  }

  /* Optimize layout performance for hidden menus */
  .header-menu .menu-list__submenu {
    content-visibility: auto;
    contain-intrinsic-size: 0px 500px;
  }

  /* Force visibility when open/animating and in overflow submenu to prevent layout issues */
  .header-menu details[open] .menu-list__submenu,
  .header-menu .menu-list__submenu[data-active],
  .header-menu .menu-list__list-item[slot='overflow'] .menu-list__submenu {
    content-visibility: visible;
  }

  /* Dropdown Localization Styles */
  .dropdown-localization__button {
    display: flex;
    position: relative;
    align-items: center;
    gap: 4px;
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
    font-weight: var(--menu-top-level-font-weight);
    padding-inline: var(--padding-2xs);
    margin-inline: calc(-1 * var(--padding-2xs));
  }

  .dropdown-localization__button .svg-wrapper.icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .dropdown-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .dropdown-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .dropdown-localization__button[aria-expanded='true'] .icon-caret svg {
    transform: rotate(180deg);
  }

  .dropdown-localization__button,
  .dropdown-localization__button:hover {
    box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    border-radius: 0;
  }

  dropdown-localization-component .localization-form__list {
    max-height: 20.5rem;
  }

  .localization-wrapper {
    position: fixed;
    z-index: var(--layer-raised);
    border-radius: var(--style-border-radius-popover);
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  .localization-wrapper:not([hidden]) {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .localization-wrapper:not([hidden]) {
      translate: 0 20px;
      opacity: 0;
    }
  }

  dropdown-localization-component {
    position: relative;
    background-color: transparent;
  }

  dropdown-localization-component .country-filter {
    position: relative;
    padding: 8px;
  }

  dropdown-localization-component .country-filter__input {
    border: none;
  }

  dropdown-localization-component .localization-form__list-item {
    margin-inline: 8px;
  }

  dropdown-localization-component .localization-wrapper {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    max-height: 27.5rem;
    position: absolute;
    top: calc(100% + 10px);
    z-index: calc(var(--layer-header-menu) + 1);
  }

  dropdown-localization-component .localization-wrapper.right-bound {
    right: 0;
    left: unset;
  }

  dropdown-localization-component .localization-wrapper.left-bound {
    left: -8px;
    right: unset;
  }

  /* Additional specificity due to dropdown-localization-component getting a low score */
  dropdown-localization-component .language-selector.language-selector {
    padding: 10px 8px 10px 16px;
  }

  dropdown-localization-component .localization-form__currency {
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: none;
  }

  dropdown-localization-component .localization-form__select:hover {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  dropdown-localization-component
    :is(
      .localization-form__list-item:hover,
      .localization-form__list-item[aria-selected='true'],
      .localization-form__list-item[aria-current='true']
    )
    .localization-form__currency {
    opacity: 1;
    color: var(--color-foreground-muted);
    transition: opacity var(--animation-speed-slow) var(--animation-easing);
    visibility: visible;
  }

  .dropdown-localization .language-selector:where(:not(.language-selector--top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:86) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(#header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

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

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

    :is(a, button, input, textarea, select, details, summary) {
      pointer-events: auto;
    }
  }

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

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

  .hero__blurred-image--mobile {
    display: block;

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

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:87) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:88) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:90) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:91) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
    background-color: var(--color-background);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:92) */
.cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:96) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

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

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

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

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

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

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

/* START_SECTION:media-with-content (INDEX:97) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

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

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

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

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

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

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

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

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

      @media screen and (min-width: 750px) {
        padding-block: var(--page-margin);
      }
    }

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

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:98) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
    text-decoration: underline;

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

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

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

/* START_SECTION:product-hotspots (INDEX:102) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog {
    .quick-add {
      display: flex;
      justify-content: flex-end;
      position: relative;
      z-index: var(--layer-flat);
    }

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

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

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

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

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

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

/* START_SECTION:product-information (INDEX:103) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: blur(20px) saturate(180%) brightness(1.5);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

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

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

    .sticky-add-to-cart__bar .add-to-cart-text__content {
      display: none;
    }

    .sticky-add-to-cart__info[data-has-image='false'] {
      padding-left: 0;
    }

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

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

    sticky-add-to-cart:not([data-variant-available='true']) .add-to-cart-text__content {
      display: initial;
    }

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:106) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:111) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_blog-post-card (INDEX:114) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item--horizontal .blog-post-card__title-link .spacing-style,
  .blog-post-item--horizontal .blog-post-details,
  .blog-post-item--horizontal .blog-post-card__content-text {
    padding-inline-start: 0;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
    color: var(--color-foreground);
  }

  .blog-post-card__content a:hover {
    color: var(--color-foreground-subdued);
  }

  a.blog-post-card__title-link {
    color: var(--color-foreground);

    &:hover {
      color: var(--color-foreground-subdued);
    }
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:115) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
    color: var(--color, inherit);
  }

  .blog-post-content a {
    color: currentcolor;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:116) */
.blog-post-card__content-text a {
    color: currentcolor;
  }

  .blog-post-card__content-text a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:117) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    position: relative;
    display: block;
    width: var(--width);
    margin-inline: auto;
  }

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:118) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:119) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: var(--color-details, var(--color-foreground-muted));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:121) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:122) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:123) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:124) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(#header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding: var(--padding-md) var(--page-margin) var(--padding-4xl);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  /* On mobile, drop the summary's custom palette and inherit from the cart
     section so the summary visually merges with the rest of the cart page. */
  @media screen and (max-width: 749px) {
    :is(.section-background, .cart-summary, .cart-summary__inner).inherit-parent-scheme--mobile {
      --color: inherit;
      --color-rgb: inherit;
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-foreground-subdued: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
      --opacity-10-25: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:125) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-title .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 26px);
    height: min(1lh, 26px);
  }

  .cart-title .cart-bubble .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:128) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:130) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:134) */
.featured-blog-posts-card {
    width: 100%;
    position: relative;
    height: 100%;
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);
  }

  .featured-blog-posts-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__image,
    .blog-placeholder-svg {
      aspect-ratio: 99;
      height: 100%;
    }

    .featured-blog-posts-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;

      flex-shrink: 0;
      height: auto;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    gap: var(--gap);
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:135) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:137) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:140) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:141) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:142) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

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

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

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:143) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

  @media screen and (min-width: 750px) {
    #header-component[data-menu-style='menu'] .header__drawer {
      display: none;
      min-height: 0;
    }
  }

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  /* Wraps a top-level link and its disclosure button. Positioned so the
     absolutely-positioned button can sit in the gap after the link without
     affecting the top-bar layout. */
  .menu-list__trigger {
    position: relative;
    display: flex;
    height: 100%;
  }

  .menu-list__disclosure {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% - var(--gap-xs));
    width: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--padding-3xs);
    padding-block: var(--padding-sm);
    color: var(--menu-top-level-font-color);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    outline-offset: 0.1em;

    /* Hidden control must not intercept pointer events; hover-open is driven by
       the list item itself. */
    pointer-events: none;

    &:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .menu-list__disclosure-icon {
    display: block;
    width: var(--font-size--3xs);
    aspect-ratio: 10 / 6;
    fill: currentColor;
    transition: transform var(--animation-speed) var(--animation-easing);
  }

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

  .menu-list__link-title {
    padding-inline: var(--gap-sm);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item[slot='more']:has(.menu-list__link[aria-expanded='true'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item:is([slot='more'], [slot='overflow']):has([aria-expanded='true']) .menu-list__link {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    /* stylelint-disable-next-line declaration-no-important */
    background-color: transparent !important;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.background-matches-parent,
    .overflow-menu.background-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    /* Bridge the gap (row bottom padding + border) so the pointer reaches the
       submenu; collapses to 0 when the padding does. */
    --submenu-gap: calc(var(--padding-block-end, var(--header-padding)) + var(--border-bottom-width, 0px));
    --submenu-clip-top: calc(var(--header-height) - var(--submenu-gap));

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    clip-path: rect(var(--submenu-clip-top) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  /* Keep the submenu transparent (color-custom paints an opaque bg) so the
     bridged band shows the header row; the underlay paints the dropdown. */
  .menu-list__list-item > .menu-list__submenu {
    background-color: transparent;
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      --submenu-clip-top: calc(var(--top-row-height) - var(--submenu-gap));
    }
  }

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    /* The trigger becomes the left-column grid item, laying the link and its
       disclosure button out inline */

    .menu-list__trigger {
      grid-area: left;
      grid-row: auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: var(--gap-2xs);
    }

    .menu-list__disclosure {
      position: static;
      flex-shrink: 0;
      transform: none;
    }

    /* Point the chevron toward the content that opens to the right. */
    .menu-list__disclosure-icon,
    .menu-list__disclosure[aria-expanded='true'] .menu-list__disclosure-icon {
      transform: rotate(-90deg);
    }

    .menu-list__link {
      /* Bare leaf links (no children) have no `.menu-list__trigger` wrapper, so
         they need explicit left-column placement themselves. On parent items the
         link is inside the trigger and this is simply ignored. */
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    /* The disclosure button owns the expanded state; reveal the submenu when it
       is expanded (via the inline chevron, hover, or the More trigger). */
    &:has(.menu-list__disclosure[aria-expanded='true']) .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }

  /* Hide product cards in collapsed submenus from the IntersectionObserver that fires product view events */
  .menu-list__list-item:not(:has([aria-expanded='true'])) > .menu-list__submenu product-component {
    display: none;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:146) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

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

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:150) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

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

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

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

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

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

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

/* START_BLOCK:_product-details (INDEX:155) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:160) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

  .search-page-input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:161) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:162) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:awh-pdp-details (INDEX:181) */
.pdp__detail {
    border-block-end: 1px solid var(--awh-clr-line);
  }

  .pdp__detail:first-of-type {
    border-block-start: 1px solid var(--awh-clr-line);
  }

  .pdp__detail-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    min-height: 48px;
    padding-block: var(--awh-sp-3);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-sm);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    cursor: pointer;
    list-style: none;
  }

  .pdp__detail-kop::-webkit-details-marker {
    display: none;
  }

  .pdp__detail-kop:hover {
    color: var(--awh-orange);
  }

  /* The plus that becomes a minus, lifted from .faq__icon so the two
     accordions on the page open the same way. 12px rather than 14: the row is
     shorter here. */
  .pdp__detail-ico {
    position: relative;
    flex: none;
    inline-size: 12px;
    block-size: 12px;
  }

  .pdp__detail-ico::before,
  .pdp__detail-ico::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    block-size: 2px;
    background: currentColor;
    transform: translateY(-50%);
    transition:
      transform var(--awh-dur-base) var(--awh-ease-out),
      opacity var(--awh-dur-base) var(--awh-ease-out);
  }

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

  .pdp__detail[open] .pdp__detail-ico::after {
    transform: translateY(-50%) rotate(0);
    opacity: 0;
  }

  .pdp__detail-body {
    padding-block-end: var(--awh-sp-4);
    font-size: var(--awh-fs-2xs);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .pdp__detail-body p + p,
  .pdp__detail-body ul {
    margin-block-start: var(--awh-sp-3);
  }

  .pdp__detail-body ul {
    padding-inline-start: var(--awh-sp-4);
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp__detail-ico::before,
    .pdp__detail-ico::after {
      transition-duration: 1ms;
    }
  }
/* END_BLOCK:awh-pdp-details */

/* START_BLOCK:comparison-slider (INDEX:198) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    color: var(--handle-color, var(--color-foreground));
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:199) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:200) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:disclosures (INDEX:202) */
.disclosures__container {
      width: 100%;
    }

    .disclosures__container:has(> [shopify-block-empty]) {
      display: none;
    }

    .disclosures {
      --disclosures-symbol-width: calc(var(--disclosures-icon-size) * var(--disclosures-symbol-aspect-ratio, 1));

      display: block;
      color: var(--color, inherit);
      width: 100%;
      container-type: inline-size;
    }

    .disclosures.accordion--dividers accordion-custom:first-child .details {
      border-block-start: var(--style-border-width) solid var(--color-border);
    }

    .disclosures.accordion--dividers accordion-custom:last-child .details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .disclosures__heading {
      margin-block-end: var(--margin-lg);
    }

    .disclosures .details__header {
      padding-block: var(--padding-xl);
      display: flex;
      align-items: flex-start;
      gap: var(--gap-xs);
    }

    .disclosures .details__header > .svg-wrapper {
      margin-block-start: calc((var(--disclosures-icon-size) - var(--icon-size-xs)) / 2);
    }

    .disclosures details[open] .details__header {
      padding-block-end: var(--padding-xs);
    }

    .disclosures__summary-content {
      flex: 1 1 0%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--gap-xs);
      min-width: 0;
    }

    .disclosures__summary-item {
      display: flex;
      flex-direction: column;
      row-gap: var(--gap-xs);
      min-width: 0;
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure {
      position: fixed;
      inset-block-start: 0;
      inset-inline-start: 0;
      display: block;
      width: max-content;
      max-width: none;
      visibility: hidden;
      white-space: nowrap;
      pointer-events: none;
      contain: layout style;
    }

    .disclosures__summary-item-row {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      min-width: 0;
      vertical-align: middle;
    }

    .disclosures__summary-item-title {
      font-weight: var(--font-weight-normal, normal);
      overflow-wrap: break-word;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-title {
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .disclosures .details__icon {
      display: inline-block;
      flex-shrink: 0;
      width: auto;
      max-inline-size: 100%;
      height: var(--disclosures-icon-size);
      margin: 0;
      object-fit: contain;
      vertical-align: middle;
    }

    .disclosures__summary-item-row:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__summary-item-row:has(> .details__icon) > .disclosures__summary-item-title {
      grid-column: 2;
    }

    .disclosures details[open] > summary .disclosures__summary-item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__summary-item-extra {
      display: block;
    }

    .disclosures__separator {
      display: none;
      flex-shrink: 0;
      padding-inline: var(--padding-xs);
      line-height: 1;
    }

    @container (min-width: 701px) {
      .disclosures:where([data-summary-layout='inline']) .details__header {
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .details__header > .svg-wrapper {
        margin-block-start: 0;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item {
        display: block;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row {
        display: inline-flex;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-row:has(> .details__icon) {
        display: inline-grid;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__summary-item-extra {
        display: inline-flex;
        align-items: center;
      }

      .disclosures:where([data-summary-layout='inline']) .disclosures__separator {
        display: inline-block;
      }
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row {
      display: inline-flex;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-row:has(> .details__icon) {
      display: inline-grid;
    }

    .disclosures__summary-item--measure .disclosures__summary-item-extra {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }

    .disclosures__summary-item--measure .disclosures__separator {
      display: inline-block;
    }

    .disclosures details[open] .disclosures__summary-item-extra {
      display: none;
    }

    .disclosures__item {
      display: flex;
    }

    .disclosures__item + .disclosures__item {
      margin-block-start: var(--spacing-lg);
    }

    .disclosures__item-left {
      flex: 0 1 auto;
      min-width: 0;
      cursor: default;
    }

    .disclosures__item-right {
      flex: 1;
      cursor: pointer;
    }

    .disclosures__item-header {
      display: flex;
      align-items: center;
      gap: var(--padding-2xs);
      margin-block-end: var(--spacing-xs);
      padding-block-end: var(--padding-xs);
    }

    .disclosures__item-title {
      margin: 0;
    }

    .disclosures__item-header:has(> .details__icon) {
      display: grid;
      grid-template-columns: var(--disclosures-symbol-width) minmax(0, 1fr);
      align-items: center;
      column-gap: var(--padding-2xs);
      min-inline-size: 0;
    }

    .disclosures__item-header:has(> .details__icon) > .details__icon {
      grid-column: 1;
      justify-self: center;
    }

    .disclosures__item-header:has(> .details__icon) > .disclosures__item-title {
      grid-column: 2;
    }

    .disclosures details[open] .disclosures__item-title {
      font-weight: var(--font-weight-bold, bold);
    }

    .disclosures__item-content {
      max-width: var(--normal-content-width);
      padding-block-end: var(--padding-2xl);
    }

    .disclosures details[open] .details-content {
      padding-block-end: 0;
    }
/* END_BLOCK:disclosures */

/* START_BLOCK:email-signup (INDEX:203) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

    @media screen and (max-width: 749px) {
      width: 100%;
      min-width: unset;
    }
  }

  .email-signup__heading {
    color: var(--color, inherit);
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
    transition: background-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);

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

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

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

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

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

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    --hover-color-rgb: var(--color-input-text-rgb);

    color: rgb(var(--hover-color-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:featured-collection (INDEX:204) */
.featured-collection-block {
    width: 100%;
  }
/* END_BLOCK:featured-collection */

/* START_BLOCK:filters (INDEX:205) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

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

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

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

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

    @media screen and (min-width: 750px) {
      padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    }
  }

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-subdued);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--theme-drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--theme-drawer-padding) * 2);
    border-top: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__item:not(:first-of-type)::before,
    .facets--vertical .sorting-filter::before {
      content: '';
    }
  }

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: rgb(var(--color-foreground-rgb) / var(--opacity-80));

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--theme-drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets--drawer .theme-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

  @starting-style {
    .facets__clear-all--active {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);

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

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    height: var(--font-paragraph--size);
    position: absolute;
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-copyright (INDEX:207) */
.footer-utilities__group-copyright {
    color: var(--color-utilities, var(--color-foreground-muted));
  }
/* END_BLOCK:footer-copyright */

/* START_BLOCK:footer-policy-list (INDEX:208) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

/* START_BLOCK:icon (INDEX:210) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:211) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:213) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:214) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page-content (INDEX:215) */
.page-content {
    color: var(--color, inherit);
  }

  .page-content a {
    color: currentcolor;
  }
/* END_BLOCK:page-content */

/* START_BLOCK:page (INDEX:216) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:217) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:218) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:221) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:223) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:224) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:227) */
.rating-wrapper {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
    --color-rgb: var(--color-foreground-rgb);
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:229) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:230) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0 0 auto;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:231) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:234) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:235) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:accordion-styles (INDEX:236) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }

  .details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_SNIPPET:accordion-styles */

/* START_SNIPPET:add-to-cart-button-styles (INDEX:237) */
/* Add to cart button */
  .button[id^='BuyButtons-ProductSubmitButton-'] {
    position: relative;
    overflow: hidden;
  }

  .add-to-cart-button {
    --text-speed: 0.26;
    --base-delay: calc(var(--text-speed) * 0.25);
    --tick-speed: 0.1;
    --ring-speed: 0.2;
    --check-speed: 0.2;
    --burst-speed: 0.32;
    --step-delay: 3;
    --speed: 1;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-2xs);
    user-select: none;
    transition-property: color, box-shadow, background-color, scale, translate;
    transition-duration: var(--animation-speed);
    transition-timing-function: var(--ease-out-cubic);

    &:active {
      scale: 0.99;
      translate: 0 1px;
    }
  }

  .add-to-cart-button .svg-wrapper .checkmark-burst {
    width: 30px;
    height: 30px;
  }

  .add-to-cart-text {
    --atc-opacity: 0;
    --atc-destination: -1em;

    display: flex;
    gap: var(--gap-2xs);
    align-items: center;
    justify-content: center;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: forwards;
    transition: width var(--animation-speed) var(--animation-easing),
      opacity var(--animation-speed) var(--animation-easing);
  }

  .add-to-cart__added {
    --atc-opacity: 1;
    --atc-destination: 0px;

    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
  }

  .add-to-cart__added-icon {
    width: 32px;
    height: 32px;
  }

  [data-added='true'] .add-to-cart-text,
  [data-added='true'] .add-to-cart__added {
    animation-name: atc-slide;
  }

  .checkmark-burst {
    opacity: 0;
    overflow: visible;

    .burst {
      rotate: 20deg;
    }

    .check {
      opacity: 0.2;
      scale: 0.8;
      filter: blur(2px);
      transform: translateZ(0);
    }

    :is(.ring, .line, .check, .burst, .tick) {
      transform-box: fill-box;
      transform-origin: center;
    }

    :is(.line) {
      stroke-dasharray: 1.5 1.5;
      stroke-dashoffset: -1.5;
      translate: 0 -180%;
    }

    g {
      transform-origin: center;
      rotate: calc(var(--index) * (360 / 8) * 1deg);
    }
  }

  .add-to-cart-button[data-added='true'] .checkmark-burst {
    opacity: 1;
  }

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

    .check {
      opacity: 1;
      scale: 1;
      filter: blur(0);
    }

    .tick {
      scale: 1.75;
    }

    .ring {
      opacity: 0;
      scale: 1;
    }

    .line {
      stroke-dashoffset: 1.5;
    }

    .add-to-cart__added {
      color: var(--button-color);
    }

    .add-to-cart-text {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: circle(0% at 50% 50%);
      filter: blur(2px);
      opacity: 0;
      translate: 0 4px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .add-to-cart-button[data-added='true'] {
      .check {
        transition-property: opacity, scale, filter;
        transition-duration: calc(calc(var(--check-speed) * 1s));
        transition-delay: calc((var(--base-delay) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .tick {
        transition-property: scale;
        transition-duration: calc((calc(var(--tick-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * (var(--step-delay) * 1.1))) * 1s));
        transition-timing-function: ease-out;
      }

      .ring {
        transition-property: opacity, scale;
        transition-duration: calc((calc(var(--ring-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-quad);
      }

      .line {
        transition-property: stroke-dashoffset;
        transition-duration: calc((calc(var(--burst-speed) * 1s)));
        transition-delay: calc(((var(--base-delay) + (var(--check-speed) * var(--step-delay))) * 1s));
        transition-timing-function: var(--ease-out-cubic);
      }
    }

    .add-to-cart-text {
      transition-property: clip-path, opacity, filter, translate;
      transition-duration: calc((var(--text-speed) * 0.6s)), calc((var(--text-speed) * 1s));
      transition-timing-function: ease-out;
    }
  }

  .add-to-cart-text {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: circle(100% at 50% 50%);
  }

  @keyframes atc-slide {
    to {
      opacity: var(--atc-opacity, 1);
      translate: 0px var(--atc-destination, 0px);
    }
  }
/* END_SNIPPET:add-to-cart-button-styles */

/* START_SNIPPET:awh-base (INDEX:240) */
/* Every ported section is a containing block.

     Horizon scrolls `.page-wrapper`, not the document, and leaves it
     `position: static`. Any `position: absolute` descendant with no positioned
     ancestor therefore resolves against the initial containing block, escapes
     the scroller's clip, and extends the *root's* scrollable area to wherever
     it sits — for the product page, the `<caption class="visually-hidden">` in
     the spec table put the document's scrollHeight at 2695px against a 772px
     viewport.

     The consequence is not a stray pixel. Once the root is scrollable, a wheel
     over any point the page does not paint scrolls the root instead of
     `.page-wrapper`, which drags the entire layout off-screen and leaves a
     blank page. That is the "clicking a swatch blanks everything" report: the
     click focused a hidden input, the root scrolled, and nothing was left in
     view.

     One line, scoped to our own sections so it cannot touch Horizon's
     components. `position: relative` with `z-index: auto` creates no stacking
     context, so nothing else changes. */
  .awh {
    position: relative;
  }

  /* --- element typography, scoped -----------------------------------------
     Scoped with :where(), which contributes nothing to specificity, so these
     rules land at (0,0,1) — the same weight as the prototype's bare element
     selectors. Using `.awh` directly would make them (0,1,1) and they would
     override the very component classes they are meant to sit beneath. */
  :where(.awh) :is(h1, h2, h3, h4) {
    font-family: var(--awh-font-display);
    font-weight: 800;
    line-height: var(--awh-lh-tight);
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    text-wrap: balance;
    margin: 0;
  }

  :where(.awh) :is(p, ul, ol, dl, dd, figure, blockquote) {
    margin: 0;
  }

  :where(.awh) p {
    text-wrap: pretty;
  }

  :where(.awh) :is(ul, ol)[role='list'] {
    list-style: none;
    padding: 0;
  }

  :where(.awh) a {
    color: inherit;
    text-decoration: none;
  }

  /* Ported from base.css. Without this, Horizon's own button styling shows
     through on every bare button we render — .qb__back has padding:0 and no
     border by design, and was rendering as a bordered box. */
  :where(.awh) button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  :where(.awh) :is(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  :where(.awh) :is(img, svg, video) {
    display: block;
    max-width: 100%;
  }

  /* Neither AW property currently shows any focus state. */
  :where(.awh) :focus-visible {
    outline: 3px solid var(--awh-clr-focus);
    outline-offset: 2px;
    border-radius: var(--awh-radius-xs);
  }

  .awh-is-dark :focus-visible {
    outline-color: #7fb0ff;
  }

  /* --- layout primitives -------------------------------------------------- */
  .awh-container {
    width: 100%;
    max-width: var(--awh-container);
    margin-inline: auto;
    padding-inline: var(--awh-gutter);
  }

  .awh-container--wide {
    max-width: var(--awh-container-wide);
  }

  .awh-section {
    padding-block: var(--awh-section-y);
    background: var(--awh-clr-bg);
    color: var(--awh-clr-ink);
  }

  /* The alternating band. White, matching the bands the homepage alternates. */
  .awh-section--raised {
    background: var(--awh-clr-surface);
  }

  /* Two raised bands in a row are one band, not two — without this they stack a
     bottom and a top cushion into ~200px of empty ground with no edge to
     explain it. */
  .awh-section--raised + .awh-section--raised {
    padding-block-start: 0;
  }

  .awh-section--flush {
    padding-block: 0;
  }

  /* --- typographic primitives --------------------------------------------- */

  /* The mono eyebrow carries the code vernacular native to this business —
     RAL numbers, product codes, dimensions. */
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
    margin-bottom: var(--awh-sp-5);
  }

  .eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    background: var(--awh-clr-accent);
    flex: none;
  }

  .section-title {
    font-size: clamp(var(--awh-fs-2xl), 4vw, var(--awh-fs-4xl));
    max-width: 20ch;
    margin-bottom: var(--awh-sp-5);
  }

  /* Inside the categories header the title sits beside its lede, not above it,
     so the stacked rhythm does not apply. */
  .cats__head .section-title {
    margin-bottom: 0;
  }

  .lede {
    font-size: var(--awh-fs-lg);
    line-height: var(--awh-lh-normal);
    color: var(--awh-clr-ink-muted);
    max-width: var(--awh-measure);
  }

  .prose {
    max-width: var(--awh-measure);
    color: var(--awh-clr-ink-muted);
  }

  .prose > * + * {
    margin-top: var(--awh-sp-4);
  }

  .prose strong {
    color: var(--awh-clr-ink);
    font-weight: 600;
  }

  /* Until the PDP linked out to /advies, no prose anywhere carried an inline
     link, so there was no rule and one rendered as plain muted body text —
     indistinguishable from the sentence around it. Ink plus an orange rule
     rather than orange text: the accent is the site's pointer, and a
     full-orange run in the middle of a paragraph reads as a warning. */
  /* Scoped under .awh, which every one of our sections wraps itself in: at a
     bare `.prose a` the underline came out ink, because Horizon's own reset
     sets the `-webkit-text-decoration` shorthand on `a` and a prefixed
     shorthand beats an unprefixed longhand at equal specificity. Both spellings
     are set for the same reason. */
  .awh .prose a {
    color: var(--awh-clr-ink);
    text-decoration-line: underline;
    -webkit-text-decoration-color: var(--awh-orange);
    text-decoration-color: var(--awh-orange);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .awh .prose a:hover {
    color: var(--awh-orange);
  }

  /* --- buttons ------------------------------------------------------------- */
  .btn {
    --btn-bg: transparent;
    --btn-ink: var(--awh-clr-ink);
    --btn-border: var(--awh-clr-line-strong);
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-3);
    min-height: 48px; /* touch target — current AW buttons are ~32px */
    padding: var(--awh-sp-3) var(--awh-sp-6);
    background: var(--btn-bg);
    color: var(--btn-ink);
    border: 1px solid var(--btn-border);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--awh-ls-tight);
    transition:
      background var(--awh-dur-fast) var(--awh-ease-out),
      border-color var(--awh-dur-fast) var(--awh-ease-out),
      color var(--awh-dur-fast) var(--awh-ease-out),
      transform var(--awh-dur-fast) var(--awh-ease-out);
  }

  .btn:hover {
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(0);
  }

  .btn--primary {
    --btn-bg: var(--awh-clr-accent);
    --btn-ink: var(--awh-clr-accent-ink);
    --btn-border: var(--awh-clr-accent);
  }

  .btn--primary:hover {
    --btn-bg: var(--awh-clr-accent-hover);
    --btn-border: var(--awh-clr-accent-hover);
  }

  .btn--ghost {
    --btn-bg: var(--awh-clr-surface);
  }

  .btn--ghost:hover {
    --btn-border: var(--awh-clr-ink);
  }

  .awh-is-dark .btn--ghost {
    --btn-bg: transparent;
    --btn-ink: var(--awh-clr-dark-ink);
    --btn-border: #4a5155;
  }

  .awh-is-dark .btn--ghost:hover {
    --btn-border: var(--awh-clr-dark-ink);
  }

  .btn__note {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    opacity: 0.72;
  }

  /* Arrow affordance — the one borrowed gesture, and it earns its place. */
  .btn__arrow {
    flex: none;
    transition: transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .btn:hover .btn__arrow {
    transform: translateX(3px);
  }

  /* --- the slat divider ----------------------------------------------------
     A spijlenhek profile drawn to scale, doing the job a hairline rule would
     otherwise do. This is the page's signature motif. */
  .slats {
    height: var(--awh-slat-band-h);
    background-image: repeating-linear-gradient(
      90deg,
      var(--awh-anthracite) 0,
      var(--awh-anthracite) var(--awh-slat-bar),
      transparent var(--awh-slat-bar),
      transparent var(--awh-slat-period)
    );
    background-color: transparent;
  }

  .slats--accent {
    background-image: repeating-linear-gradient(
      90deg,
      var(--awh-orange) 0,
      var(--awh-orange) var(--awh-slat-bar),
      transparent var(--awh-slat-bar),
      transparent var(--awh-slat-period)
    );
  }

  .slats--light {
    background-image: repeating-linear-gradient(
      90deg,
      var(--awh-clr-dark-line) 0,
      var(--awh-clr-dark-line) var(--awh-slat-bar),
      transparent var(--awh-slat-bar),
      transparent var(--awh-slat-period)
    );
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
/* END_SNIPPET:awh-base */

/* START_SNIPPET:awh-collection-styles (INDEX:242) */
/* `hidden` has to actually hide — see snippets/awh-quote-styles.liquid for
     why a class that sets `display` outranks the attribute. */
  .pfilter [hidden],
  .prodgrid > [hidden] {
    display: none !important;
  }

  /* ==========================================================================
     COLLECTION + PRODUCT TEMPLATES
     Shaped to port onto Shopify's collection.liquid and product.liquid.
     ========================================================================== */

  /* --- breadcrumbs (absent entirely on the live site) --- */

  .kruimels { padding-block: var(--awh-sp-5) 0; }

  .kruimels__lijst {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--awh-sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .kruimels__item + .kruimels__item::before {
    content: "/";
    margin-right: var(--awh-sp-2);
    color: var(--awh-clr-line-strong);
  }

  /* Breadcrumb text is small by design. The padding lifts the tap target to
     44px without changing the line's appearance — it absorbs into the row. */
  .kruimels__item a {
    color: inherit;
    display: inline-block;
    padding-block: var(--awh-sp-3);
  }

  .kruimels__item a:hover { color: var(--awh-orange); }
  .kruimels__item [aria-current] { color: var(--awh-clr-ink); }

  /* --- collection header --- */

  /* Tightened from 2rem/2.5rem. That padding was set when the header carried
     an eyebrow, a heading, a lede, a fit line and two buttons — five things
     that needed room to separate. With the eyebrow and the buttons gone it
     left the grid a screen and a half down on a laptop. */
  .colhead { padding-block: var(--awh-sp-4) var(--awh-sp-6); }

  /* The measure goes on the child, not on the element that also carries
     .awh-container — putting it on .awh-container overrides the page width and centres
     the whole header. */
  .colhead__inner > * { max-width: 46rem; }

  .colhead__titel {
    font-size: clamp(var(--awh-fs-2xl), 4.4vw, var(--awh-fs-4xl));
    margin-bottom: var(--awh-sp-3);
  }

  /* The heading is the first thing in the header now, so the gap above it is
     the breadcrumb's to give — and the breadcrumb sits right under a sticky
     bar that already has its own padding. */
  .colhead__titel:first-child { margin-top: 0; }

  /* The one-line "is this for me" statement. */
  .colhead__fit {
    margin-top: var(--awh-sp-5);
    padding: var(--awh-sp-4) var(--awh-sp-5);
    background: var(--awh-orange-tint);
    border-left: 3px solid var(--awh-orange);
    border-radius: var(--awh-radius-xs);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-normal);
  }

  .colhead__acties { display: flex; flex-wrap: wrap; gap: var(--awh-sp-3); margin-top: var(--awh-sp-6); }

  /* .awh-section pads 104px top and bottom, which is right for a section that
     stands on its own between two others. This one does not: it continues the
     header directly above it, so that padding stacked on the header's own and
     left 128px of nothing between "Kies jouw schuifpoort:" and the first
     filter. The bottom keeps its distance — "Bekijk ook" underneath is a
     separate section and does need the air. */
  .colmodellen { padding-block-start: var(--awh-sp-4); }

  /* --- filter bar (collections + configurator) --- */

  .pfilter {
    margin-block-end: var(--awh-sp-6);
    border-block-end: 1px solid var(--awh-clr-line);
  }

  /* Solid, filled, full width of the strip — the old input was a hairline
     outline floating beside the heading and read as ornament rather than a
     control. */
  .pfilter__zoek {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    padding-inline: var(--awh-sp-4);
    margin-block-end: var(--awh-sp-5);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-clr-surface);
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .pfilter__zoek:focus-within {
    border-color: var(--awh-clr-accent);
    box-shadow: 0 0 0 3px var(--awh-orange-tint);
  }

  .pfilter__zoek > svg { flex: none; color: var(--awh-clr-ink-muted); }

  .pfilter__zoek input {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 52px;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink);
  }

  .pfilter__zoek input:focus { outline: none; }
  .pfilter__zoek input::-webkit-search-cancel-button { display: none; }

  .pfilter__zoekwis {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 36px;
    block-size: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--awh-clr-surface-sunken);
    color: var(--awh-clr-ink);
    cursor: pointer;
  }

  .pfilter__zoekwis:hover { background: var(--awh-clr-line); }

  .pfilter__rijen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-5) var(--awh-sp-8);
    padding-block-end: var(--awh-sp-5);
  }

  .pfilter__groep { min-inline-size: 0; }

  .pfilter__label {
    display: block;
    margin-block-end: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .pfilter__chips { display: flex; flex-wrap: wrap; gap: var(--awh-sp-2); }

  .pchip {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-block-size: 40px;
    padding-inline: var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    background: var(--awh-clr-surface);
    font: inherit;
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink);
    cursor: pointer;
    transition:
      border-color var(--awh-dur-fast) var(--awh-ease-out),
      background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .pchip:hover { border-color: var(--awh-clr-ink); }

  .pchip.is-selected {
    border-color: var(--awh-clr-accent);
    background: var(--awh-orange-tint);
    font-weight: 600;
  }

  .pchip__vink { color: var(--awh-clr-accent); flex: none; }

  /* The count is what makes a filter honest: it says how much is behind the
     chip before anyone spends a click, and an option holding nothing is never
     rendered at all. */
  .pchip__n {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    color: var(--awh-clr-ink-muted);
  }

  .pchip.is-selected .pchip__n { color: var(--awh-orange-deep); }

  .pfilter__voet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding-block: var(--awh-sp-4);
    border-block-start: 1px solid var(--awh-clr-line);
  }

  .pfilter__telling {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .pfilter__telling strong { color: var(--awh-clr-ink); }

  .pfilter__wis {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-block-size: 40px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-accent);
    cursor: pointer;
  }

  .pfilter__wis:hover { color: var(--awh-orange-deep); }

  @media (max-width: 640px) {
    /* One line, scrolled sideways.

       Stacked groups cost roughly 300px of controls before the first product on
       a 390px screen — three labelled blocks the visitor scrolls past every
       time. Here the whole bar is a single track: each group keeps its label,
       laid inline ahead of its own chips, and the track bleeds into the gutter
       so a chip is always cut by the viewport edge. That cut is what says there
       is more to the right. */
    .pfilter__rijen {
      flex-wrap: nowrap;
      align-items: center;
      gap: var(--awh-sp-5);
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      margin-inline: calc(var(--awh-gutter) * -1);
      padding-inline: var(--awh-gutter);
      padding-block-end: var(--awh-sp-4);
    }

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

    .pfilter__groep {
      display: flex;
      align-items: center;
      gap: var(--awh-sp-3);
      inline-size: auto;
      flex: none;
    }

    .pfilter__label {
      margin-block-end: 0;
      white-space: nowrap;
    }

    .pfilter__chips { flex-wrap: nowrap; }
    .pchip { flex: none; }

    .pfilter__voet { gap: var(--awh-sp-3); }
  }

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

  /* --- product grid --- */


  .colgrid[data-n='1'] { grid-template-columns: minmax(0, 460px); }
  .colgrid[data-n='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colgrid[data-n='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .colgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--awh-sp-8) var(--awh-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .colkaart {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .colkaart__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .colkaart__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: scale var(--awh-dur-base) var(--awh-ease-out);
  }

  .colkaart:hover .colkaart__media img { scale: 1.03; }

  .colkaart__body { margin-top: var(--awh-sp-4); }

  .colkaart__titel {
    font-size: var(--awh-fs-lg);
    line-height: var(--awh-lh-snug);
  }

  .colkaart__titel a { color: inherit; text-decoration: none; }
  .colkaart__titel a:hover { color: var(--awh-clr-accent); }

  /* Stretched link — the whole card is the target, not one line of text. */
  .colkaart__titel a::after { content: ''; position: absolute; inset: 0; }

  .colkaart__fit {
    margin-top: var(--awh-sp-2);
    font-size: var(--awh-fs-2xs);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .colkaart__meta {
    margin-top: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink);
  }

  @media (prefers-reduced-motion: reduce) {
    .artkaart, .artkaart__media img { transition: none; }
    .artkaart:hover { transform: none; }
    .artkaart:hover .artkaart__media img { transform: none; }
    .colkaart__media img { transition: none; }
    .colkaart:hover .colkaart__media img { scale: 1; }
  }

  /* --------------------------------------------------------------------------
     Pagination
     `default_pagination` emits bare links with nothing to hold on to, so the
     grid ended in a stray line of text. Mono and uppercase like the rest of the
     furniture, the current page in accent, and both steps always present so the
     row does not shift width between the first page and the middle ones.
     -------------------------------------------------------------------------- */

  .pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    flex-wrap: wrap;
    margin-block-start: var(--awh-sp-10);
    padding-block-start: var(--awh-sp-6);
    border-block-start: 1px solid var(--awh-clr-line);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  .pager__stap {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-block-size: 44px;
    padding-inline: var(--awh-sp-3);
    color: var(--awh-clr-ink);
    text-decoration: none;
  }

  .pager__stap:hover { color: var(--awh-clr-accent); }

  .pager__stap.is-uit {
    color: var(--awh-clr-ink-muted);
    opacity: 0.45;
  }

  .pager__pijl--vorige { rotate: 90deg; }
  .pager__pijl--volgende { rotate: -90deg; }

  .pager__lijst {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .pager__nr {
    display: grid;
    place-items: center;
    min-inline-size: 40px;
    min-block-size: 40px;
    border-radius: var(--awh-radius-xs);
    color: var(--awh-clr-ink-muted);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }

  .pager__nr:hover {
    background: var(--awh-clr-surface);
    color: var(--awh-clr-ink);
  }

  .pager__nr.is-actief {
    background: var(--awh-orange-tint);
    color: var(--awh-orange-deep);
    font-weight: 500;
  }

  .pager__nr--gat {
    min-inline-size: 20px;
    color: var(--awh-clr-line-strong);
  }

  @media (max-width: 560px) {
    .pager { justify-content: center; }
    .pager__stap span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  }

  /* The chips are links now, not buttons — Shopify's filters live in the URL,
     which is what makes a filtered view shareable and makes the whole thing
     work with the script blocked. Links do not centre their contents or drop
     their underline the way a button does. */
  a.pchip {
    text-decoration: none;
  }

  .pfilter__wis {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    text-decoration: none;
  }

  /* Swapping the grid is a network round trip. Fade rather than blank, so the
     old results stay readable while the new ones come. */
  .is-laden .prodgrid {
    opacity: 0.45;
    transition: opacity var(--awh-dur-fast) var(--awh-ease-out);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .is-laden .prodgrid { transition: none; }
  }

  /* `data-n` carries the real number of cards, not a capped one. Only 1, 2 and
     3 have rules; four or more is meant to fall through to the auto-fill base,
     which is what the prototype does. Clamping it to 3 quietly forced four
     cards into a three-column track. */

  /* iOS Safari zooms the whole page in when a field takes focus and its text
     is smaller than 16px — and it does not zoom back out afterwards, so the
     visitor is left scrolling sideways through the rest of the form. Nothing
     here is a rendering bug; 16px is simply the threshold Apple picked.

     Only on touch pointers, so the desktop keeps the type size the design asks
     for. Written at the end of the file so it lands after the rules it raises,
     rather than relying on where this snippet falls in the compiled bundle. */
  @media (pointer: coarse) {
    .pfilter__zoek input {
      font-size: 16px;
    }
  }
/* END_SNIPPET:awh-collection-styles */

/* START_SNIPPET:awh-configurator-styles (INDEX:244) */
awh-configure-component {
    display: contents;
  }

  /* Horizon's assets/base.css carries a global

       label:has(input[type='radio']),
       label:has(input[type='checkbox']) {
         display: inline-flex; align-items: center; gap: var(--padding-2xs);
       }

     at (0,1,1). Every control the prototype builds as a label wrapping its own
     hidden radio loses to it: the size chips, the choice cards and the colour
     chips all collapsed into one inline row, which is why the metre value and
     its price sat side by side and overflowed the chip, and why the cards
     clipped their labels. Same failure as the `:where(.awh)` reset — a bare
     class is (0,1,0) and cannot outrank a tag plus a pseudo-class.

     Restated here at the same weight rather than raised further, and only for
     the three classes that wrap an input. The values are the prototype's, not
     a compromise between the two. */
  label.maatchip:has(input),
  label.qbkeuze:has(input) {
    display: grid;
    align-items: normal;
    gap: 2px;
  }

  label.qbkleur__chip:has(input) {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
  }

  /* ==========================================================================
     QUOTE BUILDER
     Browse the catalogue and configure a poort, on one URL.
     The quote itself is no longer here — it is the site-wide drawer in
     styles/offerte.css, so this file is only the browse and configure surface.
     Same tokens and primitives as the rest of the site.
     ========================================================================== */

  .qb { background: var(--awh-clr-bg); min-height: 70vh; }

  /* --- progress bar --- */

  /* Not sticky.
     It was, at top:0 — the same offset as the masthead, which is sticky at
     z-index 100 against this bar's 99. So the moment the page scrolled, the
     masthead sat straight on top of it and the whole progress bar became
     invisible; elementFromPoint at its centre returned the masthead.

     Rather than stack it below the masthead and spend 146px of a 900px viewport
     on fixed chrome, it scrolls away. It is a two-step indicator, and the quote
     count it also carried now lives in the header with a live badge. That also
     leaves the configurator with exactly the product page's sticky chrome, so
     the two galleries pin at the same offset. */
  .qb__bar {
    background: var(--awh-clr-surface);
    border-bottom: 1px solid var(--awh-clr-line);
  }

  .qb__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-6);
    min-height: 58px;
  }

  .qb__steps { display: flex; align-items: center; gap: var(--awh-sp-6); list-style: none; margin: 0; padding: 0; }

  .qb__step {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qb__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-3xs);
  }

  .qb__step.is-active { color: var(--awh-clr-ink); font-weight: 500; }

  .qb__step.is-active .qb__step-num { background: var(--awh-orange); border-color: var(--awh-orange); color: #fff; }

  .qb__step.is-done .qb__step-num { background: var(--awh-clr-ink); border-color: var(--awh-clr-ink); color: #fff; }

  .qb__count {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    margin: 0;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  .qb__count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding-inline: 5px;
    border-radius: var(--awh-radius-pill);
    background: var(--awh-orange);
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 640px) {
    .qb__steps { gap: var(--awh-sp-4); }
    .qb__step:not(.is-active) .qb__step-label { display: none; }
  }

  /* --- layout --- */

  /* One column. The quote used to occupy a 320px rail on the right of this
     grid; it is now the site-wide drawer, so the container is undivided at
     every width and the product grid gets the space back. */
  .qb__layout {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-block: var(--awh-sp-10) var(--awh-sp-16);
    align-items: start;
  }

  .qb__main { min-width: 0; }

  .qbregel { display: flex; gap: var(--awh-sp-3); }

  .qbregel__foto {
    flex: none;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .qbregel__body { min-width: 0; }

  .qbregel__titel { font-size: var(--awh-fs-2xs); font-weight: 600; line-height: 1.35; }

  .qbregel__sam,
  .qbregel__prijs {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  .qbregel__prijs { margin-top: 2px; color: var(--awh-clr-ink); }

  .qbregel__weg {
    padding: 0;
    min-height: 32px;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
    text-decoration: underline;
  }

  .qbregel__weg:hover { color: var(--awh-orange); }

  /* --- unanswered required options --- */

  /* A left edge rather than a full red panel. The option is not wrong, it is
     simply not answered yet, and shouting at someone halfway through a form
     they are still filling in reads as an error they made. */
  .qbgroep--open {
    border-inline-start: 3px solid var(--awh-clr-accent);
    padding-inline-start: var(--awh-sp-4);
    margin-inline-start: calc(var(--awh-sp-4) * -1);
  }

  .qbgroep__fout {
    margin-top: var(--awh-sp-1);
    font-size: var(--awh-fs-3xs);
    font-weight: 600;
    color: var(--awh-orange-deep);
  }

  .qb__ontbreekt {
    margin-top: var(--awh-sp-6);
    padding: var(--awh-sp-3) var(--awh-sp-4);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-orange-tint);
    font-size: var(--awh-fs-2xs);
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-ink);
  }

  .qb__ontbreekt a {
    color: var(--awh-orange-deep);
    font-weight: 600;
  }

  .qb__prijsbalk .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .qbbewaar {
    margin-top: var(--awh-sp-4);
    padding: var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .qbbewaar__titel {
    font-size: var(--awh-fs-sm);
    font-weight: 600;
  }

  .qbbewaar__tekst {
    margin-top: var(--awh-sp-1);
    font-size: var(--awh-fs-3xs);
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-ink-muted);
  }

  .qbbewaar__form {
    display: flex;
    gap: var(--awh-sp-2);
    margin-top: var(--awh-sp-3);
  }

  .qbbewaar__veld {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding-inline: var(--awh-sp-3);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
    font: inherit;
    font-size: var(--awh-fs-2xs);
  }

  .qbbewaar__stuur {
    flex: none;
    min-height: 44px;
    padding-inline: var(--awh-sp-4);
    border: 0;
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-ink);
    color: var(--awh-clr-ink-inverse);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    cursor: pointer;
  }

  .qbbewaar__stuur:hover { background: var(--awh-clr-accent); }

  /* Declining has to be as easy as accepting, or the block is a dark pattern
     with a friendly voice. Full 44px target, plainly worded. */
  .qbbewaar__nee {
    display: block;
    min-height: 44px;
    margin-top: var(--awh-sp-1);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--awh-fs-3xs);
    color: var(--awh-clr-ink-muted);
    text-decoration: underline;
    cursor: pointer;
  }

  .qbbewaar__klaar {
    margin-top: var(--awh-sp-4);
    padding: var(--awh-sp-3);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
    font-size: var(--awh-fs-3xs);
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-ink-muted);
  }

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

  @media (max-width: 1024px) {
    .qb__layout { padding-bottom: var(--awh-sp-20); }
  }

  .qb__koop { min-width: 0; }

  .qb__chosen-link {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-block-size: 44px;
    margin-block-start: var(--awh-sp-2);
    font-size: var(--awh-fs-3xs);
    font-weight: 600;
    color: var(--awh-clr-ink);
    text-decoration: none;
    border-block-end: 1px solid var(--awh-clr-line-strong);
  }

  .qb__chosen-link:hover { color: var(--awh-clr-accent); border-color: var(--awh-clr-accent); }

  /* --- shared bits --- */

  .qb__back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    margin-bottom: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qb__back:hover { color: var(--awh-orange); }

  .qb__note,
  .qb__maat-note {
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  .qb__usps { display: flex; flex-wrap: wrap; gap: var(--awh-sp-3) var(--awh-sp-5); margin: var(--awh-sp-6) 0 0; padding: 0; list-style: none; }

  .qb__usp {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    padding: var(--awh-sp-2) var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
  }

  .qb__usp svg { color: var(--awh-orange); flex: none; }

  /* --- categories --- */

  .qb__cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--awh-sp-4);
    margin: var(--awh-sp-8) 0 0;
    padding: 0;
    list-style: none;
  }

  .qbcat {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    text-align: start;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .qbcat:hover {
    border-color: var(--awh-clr-line-strong);
    box-shadow: var(--awh-shadow-md);
    transform: translateY(-3px);
  }

  .qbcat__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--awh-clr-surface-sunken); }

  .qbcat__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

  .qbcat__body { display: flex; flex-direction: column; gap: var(--awh-sp-1); padding: var(--awh-sp-4) var(--awh-sp-5) var(--awh-sp-5); }

  .qbcat__fit {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qbcat__label {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .qbcat__label svg { color: var(--awh-orange); transition: transform var(--awh-dur-base) var(--awh-ease-out); }

  .qbcat:hover .qbcat__label svg { transform: translateX(3px); }

  .qbcat__count { font-family: var(--awh-font-mono); font-size: var(--awh-fs-3xs); color: var(--awh-clr-ink-muted); }

  @media (max-width: 900px) { .qb__cats { grid-template-columns: repeat(2, 1fr); } }

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

  /* --- product grid --- */

  .qb__prodhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awh-sp-5) var(--awh-sp-6);
    margin-bottom: var(--awh-sp-6);
  }

  /* The heading side may shrink; without min-width:0 a long product-family
     name keeps its intrinsic width and pushes the controls out of the column. */
  .qb__prodhead > div:first-child { flex: 1 1 260px; min-width: 0; }

  .qb__search {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    flex: 1 1 180px;
    min-width: 0;
    padding-inline: var(--awh-sp-4);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    color: var(--awh-clr-ink-muted);
  }

  .qb__search input {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    border: 0;
    background: none;
    font-size: var(--awh-fs-sm);
  }

  .qb__search input:focus { outline: none; }

  .qb__search:focus-within { border-color: var(--awh-clr-ink); }

  /* Column count follows the available width rather than being fixed at three,
     so the grid actually uses the space the hidden rail gives back: four columns
     across the full 1280px container, three once the rail returns at 837px. */
  .qb__prods {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--awh-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .qbprod {
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
  }

  .qbprod:hover { border-color: var(--awh-clr-line-strong); box-shadow: var(--awh-shadow-sm); }

  .qbprod__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--awh-clr-surface-sunken); }

  .qbprod__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

  .qbprod__body { display: flex; flex-direction: column; gap: var(--awh-sp-1); padding: var(--awh-sp-4); flex: 1; }

  .qbprod__type {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
  }

  .qbprod__titel { font-size: var(--awh-fs-sm); font-weight: 600; line-height: 1.35; }

  .qbprod__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-3);
    margin-top: auto;
    padding-top: var(--awh-sp-4);
  }

  .qbprod__prijs {
    display: flex;
    flex-direction: column;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 800;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
  }

  .qbprod__vanaf {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 400;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qbprod__cta { min-height: 40px; padding-inline: var(--awh-sp-5); font-size: var(--awh-fs-2xs); }

  .qb__leeg { padding: var(--awh-sp-10) 0; color: var(--awh-clr-ink-muted); }

  .qb__leeg button { color: var(--awh-orange); text-decoration: underline; padding: 0; }

  @media (max-width: 900px) {
    .qb__prods { grid-template-columns: repeat(2, 1fr); }
    .qb__prodhead { flex-direction: column; align-items: stretch; }
    .qb__search { width: 100%; }
  }

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

  /* --- configure --- */

  /* Same split as the product page — see .pdp__inner. The gallery was pinned
     at 300px from when it held one cropped thumbnail; now that it carries the
     full set plus video it earns the same share it gets on the PDP, and both
     configure surfaces look like the same page rather than two designs. */
  .qb__cfg {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
  }

  /* Matches .pdp__media in styles/shop.css — no card, no border, just the
     gallery, sticky while the configurator column beside it scrolls. Same 108px
     offset, because both pages now have the same sticky chrome above them. */
  .qb__chosen {
    position: sticky;
    top: 108px;
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-sm);
  }

  /* Sits where the product page puts its <h1>, at the same size, so the two
     columns read identically. */
  .qb__chosen-titel {
    margin-block: var(--awh-sp-3) var(--awh-sp-2);
    font-family: var(--awh-font-display);
    font-size: clamp(var(--awh-fs-xl), 2.6vw, var(--awh-fs-2xl));
    font-weight: 800;
    letter-spacing: var(--awh-ls-display);
    line-height: var(--awh-lh-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .qb__groups {
    display: grid;
    gap: var(--awh-sp-8);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    padding: var(--awh-sp-6);
  }

  .qbgroep { display: grid; gap: var(--awh-sp-4); }

  .qbgroep__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--awh-sp-4);
  }

  .qbgroep__titel {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .qbgroep__n { color: var(--awh-orange); }

  .qbgroep__hint {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qb__maten { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--awh-sp-4); }

  .qb__maat { display: grid; gap: var(--awh-sp-2); }

  .qb__maat > span { font-size: var(--awh-fs-2xs); font-weight: 600; }

  .qb__maat select,
  .qbveld select,
  .qbveld input,
  .qbveld textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    font-size: var(--awh-fs-sm);
  }

  .qbveld textarea { min-height: 110px; resize: vertical; }

  .qbkeuzes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--awh-sp-3); }

  .qbkeuze {
    display: grid;
    gap: 2px;
    min-height: 68px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    align-content: center;
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    cursor: pointer;
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out), background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .qbkeuze:hover { border-color: var(--awh-clr-ink); }

  .qbkeuze:has(:focus-visible) { outline: 3px solid var(--awh-clr-focus); outline-offset: 2px; }

  /* Selected carries a checkmark as well as colour. */
  .qbkeuze.is-selected {
    border-color: var(--awh-orange);
    border-width: 2px;
    background: var(--awh-orange-tint);
    padding: calc(var(--awh-sp-3) - 1px) calc(var(--awh-sp-4) - 1px);
  }

  .qbkeuze__label { display: flex; align-items: center; gap: var(--awh-sp-2); font-size: var(--awh-fs-sm); font-weight: 600; }

  .qbkeuze.is-selected .qbkeuze__label::after {
    content: "";
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--awh-orange);
    border-bottom: 2px solid var(--awh-orange);
    transform: rotate(-45deg) translateY(-2px);
  }

  .qbkeuze__sub { font-family: var(--awh-font-mono); font-size: var(--awh-fs-3xs); letter-spacing: var(--awh-ls-mono); color: var(--awh-clr-ink-muted); }

  .qb__prijsbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding: var(--awh-sp-5);
    background: var(--awh-clr-dark-bg);
    color: var(--awh-clr-dark-ink);
    border-radius: var(--awh-radius-sm);
  }

  .qb__prijsbalk-label {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-dark-ink-muted);
    /* One line — a wrapped label made the bar noticeably taller. */
    white-space: nowrap;
  }

  .qb__prijsbalk-waarde {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 900px) {
    .qb__cfg { grid-template-columns: 1fr; }
    /* Plain stack. This used to be a 120px thumbnail beside the label; with a
       real gallery in the column that second track squeezed nine thumbnails
       into 204px of a 326px column. */
    .qb__chosen { position: static; }
    .qbkeuzes { grid-template-columns: 1fr; }
    .qb__groups { padding: var(--awh-sp-4); }
  }

  /* --- request form --- */

  .qbform { display: grid; gap: var(--awh-sp-5); max-width: 44rem; margin-top: var(--awh-sp-8); }

  .qbform__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--awh-sp-4); }

  .qbveld { display: grid; gap: var(--awh-sp-2); }

  /* Persistent labels — the live form uses placeholders as its only labels,
     which disappear the moment someone types. */
  .qbveld__label { font-size: var(--awh-fs-2xs); font-weight: 600; }

  .qbform__consent {
    display: flex;
    gap: var(--awh-sp-3);
    padding: var(--awh-sp-4);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-xs);
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  .qbform__consent input { flex: none; width: 20px; height: 20px; accent-color: var(--awh-orange); }

  .qbform__consent a { color: var(--awh-orange); text-decoration: underline; }

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

  /* --- confirmation + toast --- */

  .qb__klaar { max-width: 42rem; padding-block: var(--awh-sp-10); }

  .qb__klaar-bel { margin-top: var(--awh-sp-6); font-size: var(--awh-fs-sm); color: var(--awh-clr-ink-muted); }

  .qb__klaar-bel a { font-family: var(--awh-font-mono); color: var(--awh-orange); }

  /* ==========================================================================
     SERVER-RENDERED ASSORTMENT BLOCK
     The builder is client-side, so this is what crawlers and AI assistants
     read. It has to be real content, not a bare list of links.
     ========================================================================== */

  .cfgseo {
    padding-block: var(--awh-section-y);
    background: var(--awh-clr-surface);
    border-top: 1px solid var(--awh-clr-line);
  }

  .cfgseo__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awh-sp-6);
    margin-bottom: var(--awh-sp-8);
  }

  .cfgseo__lede { max-width: 34rem; }

  .cfgseo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--awh-sp-4);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cfgcat a {
    display: flex;
    gap: var(--awh-sp-4);
    height: 100%;
    padding: var(--awh-sp-3);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .cfgcat a:hover {
    border-color: var(--awh-orange);
    box-shadow: var(--awh-shadow-sm);
    transform: translateY(-2px);
  }

  .cfgcat__media {
    flex: none;
    width: 88px;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .cfgcat__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }

  .cfgcat__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-block: var(--awh-sp-1); }

  .cfgcat__naam {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .cfgcat__fit { font-size: var(--awh-fs-2xs); line-height: 1.4; color: var(--awh-clr-ink-muted); }

  .cfgcat__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-1) var(--awh-sp-3);
    margin-top: auto;
    padding-top: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .cfgcat__meta span:last-child { color: var(--awh-orange); }

  .cfgseo__veelgezocht {
    margin-top: var(--awh-sp-10);
    padding-top: var(--awh-sp-6);
    border-top: 1px solid var(--awh-clr-line);
  }

  .cfgseo__sub {
    margin-bottom: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .cfgseo__tags { display: flex; flex-wrap: wrap; gap: var(--awh-sp-2); margin: 0; padding: 0; list-style: none; }

  .cfgseo__tags a {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-height: 44px;
    padding-inline: var(--awh-sp-5);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out), background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .cfgseo__tags a:hover { border-color: var(--awh-orange); background: var(--awh-orange-tint); }

  .cfgseo__n {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 400;
    color: var(--awh-clr-ink-muted);
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 1024px) { .cfgseo__grid { grid-template-columns: repeat(2, 1fr); } }

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

  /* The intro paragraph was running wider than the heading above it, which is
     what made the two look unrelated. Shorter measure, so the block reads as
     one column of text. */
  .qb__lede { max-inline-size: var(--awh-measure-short); }

  /* The one line under the lede for a visitor who does not know which type of
     gate they want. It replaces a whole block of curated entry points, so it
     is deliberately quiet — a link, not a card.

     It had a negative top margin, which pulled it into the paragraph above:
     at two lines of lede the link sat 12px above the paragraph's own bottom
     and the two collided. Ordinary spacing instead. */
  .qb__hulp {
    margin-block: var(--awh-sp-4) 0;
    font-size: var(--awh-fs-sm);
  }

  .qb__hulp a {
    display: inline-flex;
    align-items: center;
    /* The Dutch runs to 44 characters; on a narrow phone an inline-flex row
       that cannot wrap overflows its column rather than breaking. */
    flex-wrap: wrap;
    gap: var(--awh-sp-2);
    color: var(--awh-clr-ink);
    text-decoration-line: underline;
    -webkit-text-decoration-color: var(--awh-orange);
    text-decoration-color: var(--awh-orange);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .qb__hulp a:hover { color: var(--awh-orange); }

  .qb__hulp svg { color: var(--awh-orange); }

  /* ==========================================================================
     SNELKEUZES — curated entry points at the top of stage 1
     --------------------------------------------------------------------------
     Retained but no longer placed: see the note in page.configurator.json.
     ========================================================================== */

  .snelkeuzes { margin-top: var(--awh-sp-8); }

  .snelkeuzes__titel {
    margin-bottom: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .snelkeuzes__lijst {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--awh-sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .snelkeuze {
    display: grid;
    gap: var(--awh-sp-1);
    width: 100%;
    min-height: 104px;
    padding: var(--awh-sp-4) var(--awh-sp-5);
    align-content: start;
    text-align: start;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-sm);
    transition:
      border-color var(--awh-dur-fast) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .snelkeuze:hover {
    border-color: var(--awh-orange);
    box-shadow: var(--awh-shadow-sm);
    transform: translateY(-2px);
  }

  .snelkeuze__label {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .snelkeuze__sub { font-size: var(--awh-fs-2xs); line-height: 1.4; color: var(--awh-clr-ink-muted); }

  .snelkeuze__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-3);
    margin-top: auto;
    padding-top: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .snelkeuze__foot svg { color: var(--awh-orange); transition: transform var(--awh-dur-base) var(--awh-ease-out); }

  .snelkeuze:hover .snelkeuze__foot svg { transform: translateX(3px); }

  /* A rule between "what this page is" and "start picking". Without it the
     page ran eyebrow, heading, paragraph, link, label, cards — six things in
     a column with nothing saying where the introduction stopped, and the two
     mono labels 250px apart read as a repeat rather than as two sections. */
  /* The separation goes on the wrapper, not on the label. .qb__catgroup has
     no padding or border of its own, so a top margin on its first child
     collapses straight through it and the rule ended up flush against the
     link above. */
  .qb__catgroup { margin-block-start: var(--awh-sp-5); }

  .qb__ofwel {
    margin: 0 0 var(--awh-sp-4);
    padding-block-start: var(--awh-sp-4);
    border-block-start: 1px solid var(--awh-clr-line);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qb__cats { margin-top: 0; }

  /* search + sort row. flex:none here previously let the select overflow the
     grid column and sit underneath the quote rail. */
  .qb__zoekrij {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-3);
    flex: 1 1 320px;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
  }

  .qb__sort { flex: 0 1 auto; min-width: 0; }

  .qb__sort select {
    width: 100%;
    max-width: 190px;
    min-height: 48px;
    padding: 0 var(--awh-sp-4);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
  }

  @media (max-width: 900px) {
    .snelkeuzes__lijst { grid-template-columns: repeat(2, 1fr); }
  }

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

  /* ==========================================================================
     OPTION RENDERING — swatches, colour chips, field types
     ========================================================================== */

  .qbkeuzes--swatch {
    /* Most swatch options have three values; 132px lets all three sit on one
       row instead of leaving an orphan on a second. */
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .qbkeuzes--swatch .qbkeuze { align-content: start; padding: 0; overflow: hidden; }

  .qbkeuzes--swatch .qbkeuze.is-selected { padding: 0; }

  /* Every swatch image the app supplies is 400×400 — a product shot on white,
     not a scene. A 4:3 frame with `cover` sliced 25% off the top and bottom,
     which decapitated the posts and cut the "INBEGREPEN" label out of the
     first one. Square frame, `contain`, white ground: the whole object shows. */
  .qbkeuze__foto {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    padding: var(--awh-sp-2);
  }

  .qbkeuzes--swatch .qbkeuze__foto { border-bottom: 1px solid var(--awh-clr-line); }

  .qbkeuzes:not(.qbkeuzes--swatch) .qbkeuze__tip {
    display: none;
  }

  .qbkeuzes--swatch .qbkeuze__label { padding: var(--awh-sp-3) var(--awh-sp-3) 0; }

  /* --- The name, as a tooltip -----------------------------------------------

     `title` was doing this and it was the wrong tool: the browser decides when
     it appears (about a second of stillness), where, and what it looks like.
     This is the same information on our own terms.

     It sits inside the card rather than floating above it. A tip above the top
     row covered the very question it was answering — "2. Kies de gewenste
     poortpalen" disappeared behind "120x120 palen" — and floating tips need
     edge handling at both ends of every row. A caption band over the foot of
     the picture has neither problem: it cannot escape, cannot collide, and
     needs no per-position rules.

     It is decoration and nothing reads it. The accessible name still comes from
     .qbkeuze__label, hidden but present, so the two never both speak. */
  .qbkeuzes--swatch .qbkeuze {
    position: relative;
  }

  .qbkeuze__tip {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 5px 6px;
    background: color-mix(in srgb, var(--awh-anthracite) 92%, transparent);
    color: var(--awh-paper);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    line-height: 1.25;
    text-align: center;
    /* Never intercept the click meant for the card underneath. */
    pointer-events: none;
    opacity: 0;
    translate: 0 100%;
    transition: opacity var(--awh-dur-fast) var(--awh-ease-out),
      translate var(--awh-dur-fast) var(--awh-ease-out);
  }

  /* Hover only where hovering exists, and keyboard focus only when the ring is
     showing — otherwise one tap on a phone leaves the band stuck open. */
  @media (hover: hover) {
    .qbkeuze:hover .qbkeuze__tip {
      opacity: 1;
      translate: 0 0;
    }
  }

  .qbkeuze:has(input:focus-visible) .qbkeuze__tip {
    opacity: 1;
    translate: 0 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .qbkeuze__tip {
      transition-duration: 1ms;
    }
  }

  /* The swatch-only rule that hid free price labels is gone: the renderer no
     longer emits a line when an option adds nothing, in any mode, so there is
     nothing left to hide. */

  .qbkeuzes--swatch .qbkeuze__foto:last-child {
    margin-block-end: 0;
  }

  .qbkeuzes--swatch .qbkeuze__sub { padding: 0 var(--awh-sp-3) var(--awh-sp-3); }

  /* Colour chips. A select gave five RAL names and no colour at all. */
  .qbkleur { margin-top: var(--awh-sp-5); }

  .qbkleur__label { display: block; margin-bottom: var(--awh-sp-3); font-size: var(--awh-fs-2xs); font-weight: 600; }

  .qbkleur__lijst { display: flex; flex-wrap: wrap; gap: var(--awh-sp-2); }

  .qbkleur__chip {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    min-height: 52px;
    padding: var(--awh-sp-2) var(--awh-sp-4) var(--awh-sp-2) var(--awh-sp-2);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    cursor: pointer;
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out), background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .qbkleur__chip:hover { border-color: var(--awh-clr-ink); }

  .qbkleur__chip:has(:focus-visible) { outline: 3px solid var(--awh-clr-focus); outline-offset: 2px; }

  .qbkleur__chip.is-selected {
    border-color: var(--awh-orange);
    border-width: 2px;
    background: var(--awh-orange-tint);
    padding: calc(var(--awh-sp-2) - 1px) calc(var(--awh-sp-4) - 1px) calc(var(--awh-sp-2) - 1px) calc(var(--awh-sp-2) - 1px);
  }

  .qbkleur__vlak {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--awh-radius-pill);
    border: 1px solid rgb(0 0 0 / 0.22);
    background: var(--awh-clr-surface-sunken);
  }

  /* "Andere RAL-kleur" has no single colour, so it must not pretend to. */
  .qbkleur__vlak--anders {
    background: conic-gradient(#c9463f, #d8a13a, #4e8f5a, #3b6ea8, #7a4f96, #c9463f);
  }

  .qbkleur__naam { display: grid; gap: 1px; font-size: var(--awh-fs-2xs); font-weight: 600; }

  .qbkleur__ral {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 400;
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  .qbkleur__note { margin-top: var(--awh-sp-3); font-size: var(--awh-fs-3xs); line-height: 1.5; color: var(--awh-clr-ink-muted); }

  /* The surcharge line. It appears when a chip is clicked, so it needs to look
     like an answer to that click rather than another grey paragraph arriving
     out of nowhere — hence the orange edge, the same device the configurator
     already uses for an unanswered required question. */
  .qbkleur__anders {
    margin-top: var(--awh-sp-3);
    padding: var(--awh-sp-3) var(--awh-sp-4);
    border-inline-start: 3px solid var(--awh-orange);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-orange-tint);
    font-size: var(--awh-fs-2xs);
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-ink);
  }

  .qbkleur__anders[hidden] { display: none; }

  .qbgroep__verplicht { color: var(--awh-orange); }

  .qbgroep__help { font-size: var(--awh-fs-2xs); line-height: 1.5; color: var(--awh-clr-ink-muted); }

  .qbgroep__select,
  .qbgroep__tekst {
    width: 100%;
    min-height: 48px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    background: var(--awh-clr-bg);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    font-size: var(--awh-fs-sm);
  }

  .qbgroep__tekst { min-height: 90px; resize: vertical; }

  /* ==========================================================================
     STICKY PRICE BAR
     Some option sets run to a dozen groups, so the price and the add button
     scrolled away while the customer was still configuring.
     ========================================================================== */

  /* One row, always: label + price on the left, action on the right. It must
     not wrap — a wrapped button doubles the height and eats the option list
     behind it. */
  .qb__prijsbalk {
    position: sticky;
    bottom: var(--awh-sp-4);
    z-index: 20;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--awh-sp-5);
    padding: var(--awh-sp-4) var(--awh-sp-5);
    box-shadow: var(--awh-shadow-lg);
  }

  .qb__prijsbalk-info { display: grid; gap: 1px; min-width: 0; margin: 0; }

  .qb__prijsbalk .btn { flex: none; }

  @media (max-width: 1024px) {
    .qb__prijsbalk {
      position: fixed;
      inset: auto 0 0 0;
      border-radius: 0;
      padding: var(--awh-sp-3) var(--awh-gutter);
      padding-bottom: calc(var(--awh-sp-3) + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -4px 24px rgb(20 24 26 / 0.28);
    }

    .qb--samenstellen .qb__layout { padding-bottom: var(--awh-sp-20); }
  }

  @media (max-width: 480px) {
    .qb__prijsbalk-label { font-size: 10px; }
    .qb__prijsbalk-waarde { font-size: var(--awh-fs-lg); }
    .qb__prijsbalk .btn { padding-inline: var(--awh-sp-5); font-size: var(--awh-fs-2xs); }
  }


  /* --------------------------------------------------------------------------
     Configurator in the product page column
     -------------------------------------------------------------------------- */

  /* Separation between option groups.
     This used to come from `.qb__groups`, whose grid gap spaced the groups
     directly. After the extraction that wrapper has a single child — the
     configurator — so the gap applied to nothing and consecutive groups sat
     flush: a heading like "4. Paalmuts" landed hard against the last row of
     choices above it, on the product page and the configurator alike.

     A rule as well as space, because with seven groups in a column, distance
     alone leaves it ambiguous whether a heading belongs to what is above or
     below it. */
  .pcfg {
    display: grid;
  }

  .pcfg > .qbgroep + .qbgroep,
  /* `display: contents` takes the mount and the block wrappers out of the
     layout but not out of the tree, so the sibling combinator above never
     reaches the option groups nested inside them. Every option group follows
     the size-and-colour group, so each one carries the separator. The price
     bar does not — it is not a `.qbgroep` in the prototype either. */
  .pcfg > .pcfg__options > .qbgroep {
    margin-block-start: var(--awh-sp-6);
    padding-block-start: var(--awh-sp-6);
    border-block-start: 1px solid var(--awh-clr-line);
  }

  /* Shopify wraps each block it renders; the wrapper is what the grid would
     otherwise lay out. */
  .pcfg > .shopify-block {
    display: contents;
  }

  /* --------------------------------------------------------------------------
     Size — width and height as chips
     -------------------------------------------------------------------------- */

  .maatkiezer { display: grid; gap: var(--awh-sp-5); }

  .maatkiezer__groep { border: 0; margin: 0; padding: 0; }

  .maatkiezer__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    inline-size: 100%;
    padding: 0;
    margin-block-end: var(--awh-sp-3);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
  }

  .maatkiezer__hint {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .maatkiezer__chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: var(--awh-sp-2);
  }

  /* Metres lead, because that is what a driveway is measured in; millimetres
     sit underneath so the catalogue value is still there to check. */
  .maatchip {
    display: grid;
    gap: 2px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
    cursor: pointer;
    transition:
      border-color var(--awh-dur-fast) var(--awh-ease-out),
      background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .maatchip:hover { border-color: var(--awh-clr-ink); }

  .maatchip.is-selected {
    border-color: var(--awh-clr-accent);
    background: var(--awh-orange-tint);
  }

  .maatchip:has(:focus-visible) {
    outline: 2px solid var(--awh-clr-focus);
    outline-offset: 2px;
  }

  .maatchip__maat {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-tight);
    font-variant-numeric: tabular-nums;
  }

  .maatchip__prijs {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  /* "vanaf € 4.079" is one fact and must not break across two lines. */
  .maatchip__prijs {
    color: var(--awh-clr-ink);
    white-space: nowrap;
  }

  .maatchip.is-selected .maatchip__prijs { color: var(--awh-orange-deep); }

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

  /* Clearance under the last option group. The price bar is sticky at
     bottom:16px, so without this it floats over the tail of whatever is last —
     on most sets that is the "Opmerkingen" textarea, whose bottom half it was
     covering. */
  .pcfg .qb__prijsbalk { margin-block-start: var(--awh-sp-5); }


  /* Placeholder while the model grid is fetched. The prototype renders its
     catalogue server-side and never needs one; here the grid arrives over the
     network, and without reserved space the pane collapses to a heading and
     the footer jumps. */
  .qbprod--skeleton {
    pointer-events: none;
  }

  .qbprod--skeleton .qbprod__media,
  .qbprod--skeleton .qbprod__titel,
  .qbprod--skeleton .qbprod__foot {
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-xs);
    animation: awh-pulse 1.4s ease-in-out infinite;
  }

  .qbprod--skeleton .qbprod__titel {
    block-size: 1.1em;
    inline-size: 80%;
  }

  .qbprod--skeleton .qbprod__foot {
    block-size: 2.4em;
    margin-block-start: auto;
  }

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

    50% {
      opacity: 0.55;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .qbprod--skeleton :is(.qbprod__media, .qbprod__titel, .qbprod__foot) {
      animation: none;
    }
  }

  /* Step 2 placeholder. The product arrives over the network here, where the
     prototype had the whole catalogue in memory. */
  .qb__cfg-skeleton {
    display: none;
  }

  .qb__cfg.is-loading {
    position: relative;
  }

  .qb__cfg.is-loading .qb__cfg-skeleton {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
  }

  .qb__cfg-skeleton-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--awh-radius-sm);
  }

  .qb__cfg-skeleton-buy {
    display: grid;
    gap: var(--awh-sp-4);
  }

  .qb__cfg-skeleton-line--title {
    block-size: 2.6em;
    inline-size: 70%;
  }

  .qb__cfg-skeleton-line--price {
    block-size: 1.2em;
    inline-size: 45%;
  }

  .qb__cfg-skeleton-card {
    block-size: 26rem;
    border-radius: var(--awh-radius-sm);
  }

  .qb__cfg-skeleton :is(.qb__cfg-skeleton-media, .qb__cfg-skeleton-line, .qb__cfg-skeleton-card) {
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-xs);
    animation: awh-pulse 1.4s ease-in-out infinite;
  }

  @media (max-width: 900px) {
    .qb__cfg.is-loading .qb__cfg-skeleton {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .qb__cfg-skeleton * {
      animation: none;
    }
  }

  /* ==========================================================================
     Smaller swatch cards — a deliberate divergence from the prototype
     --------------------------------------------------------------------------
     Yerveen, 24 Aug: the images are big; put the titles in a tooltip and show
     the chosen one after the group label instead.

     The card was 228px tall with 130px of picture and its name underneath.
     Three of them filled a phone screen to say one thing. The picture is now
     the control, the name is the heading's job, and the price stays because it
     is the only thing the picture cannot show.
     ========================================================================== */

  /* auto-fill with a capped track, not auto-fit with 1fr: three options in a
     row that can hold six must stay thumbnail-sized, not stretch to fill it. */
  .qbkeuzes--swatch {
    grid-template-columns: repeat(auto-fill, minmax(96px, 132px));
    justify-content: start;
    gap: var(--awh-sp-2);
  }

  .qbkeuzes--swatch .qbkeuze__foto {
    aspect-ratio: 1 / 1;
  }

  /* Hidden, not removed. A tooltip is a mouse affordance — it does not exist on
     a phone and it is not announced — so the name stays in the accessibility
     tree and on the `title` attribute for anyone hovering. */
  .qbkeuzes--swatch .qbkeuze__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .qbkeuzes--swatch .qbkeuze__sub {
    padding: var(--awh-sp-2) var(--awh-sp-2) var(--awh-sp-3);
    text-align: center;
    font-size: var(--awh-fs-3xs);
  }

  /* The name, where there is no hover to reveal it ---------------------------

     The band over the picture is a mouse affordance. On a phone it never
     appears, so the swatches were pictures with no names at all — and these
     names carry the choice: "120x120 mm palen inbegrepen" against "XL
     brievenbuspaal (450 × 300 mm)".

     Under the picture rather than over it. Those names run long, and a caption
     laid over a 96px thumbnail buries the thing it is describing. The card
     grows by two lines; that is the price of being readable.

     The tip goes away entirely here, so the name is never said twice. */
  @media (hover: none) {
    .qbkeuzes--swatch .qbkeuze__label {
      position: static;
      display: block;
      inline-size: auto;
      block-size: auto;
      margin: 0;
      padding: var(--awh-sp-2);
      overflow: visible;
      clip-path: none;
      white-space: normal;
      text-align: center;
      font-size: var(--awh-fs-3xs);
      line-height: 1.3;
    }

    .qbkeuzes--swatch .qbkeuze__sub { padding-block-start: 0; }

    .qbkeuze__tip { display: none; }
  }

  @media (max-width: 900px) {
    .qbkeuzes--swatch {
      grid-template-columns: repeat(auto-fill, minmax(84px, 108px));
    }
  }

  /* iOS Safari zooms the whole page in when a field takes focus and its text
     is smaller than 16px — and it does not zoom back out afterwards, so the
     visitor is left scrolling sideways through the rest of the form. Nothing
     here is a rendering bug; 16px is simply the threshold Apple picked.

     Only on touch pointers, so the desktop keeps the type size the design asks
     for. Written at the end of the file so it lands after the rules it raises,
     rather than relying on where this snippet falls in the compiled bundle. */
  @media (pointer: coarse) {
    .qbgroep__tekst,
    .qbveld textarea {
      font-size: 16px;
    }
  }
/* END_SNIPPET:awh-configurator-styles */

/* START_SNIPPET:awh-optionize-styles (INDEX:250) */
.shopify-app-block .oz__option-set,
  .shopify-app-block .oz__options,
  .shopify-app-block .oz__app,
  .shopify-app-block .optionize-app {
    display: none !important;
  }

  /* The prototype has no wrapper here — OptionizeOpties returns the
     `section.qbgroep` elements straight into `.pcfg`, which is what
     `.pcfg > .qbgroep + .qbgroep` spaces and rules between. A mount element is
     unavoidable in Liquid, so it is taken out of the layout instead: with
     `display: contents` the groups are laid out as direct children of `.pcfg`
     and inherit that separator exactly. A grid with its own gap put the groups
     one level down, where the rule never reached them. */
  .pcfg__options {
    display: contents;
  }

  /* Information blocks. Optionize calls them `html` options and hands over the
     merchant's own markup — an `.alert.alert-info` with a small `i` and a line
     of text. The app styles those classes itself; here its stylesheet is hidden
     along with the rest of its UI, so the notice arrived as bare text. These
     rules are the theme's own reading of it: a quiet panel, not a question.

     No number and no separator above it — a note is not a step, and the
     numbered questions keep counting straight past it. */
  .qbgroep--notitie {
    border-top: 0;
    padding-block: 0;
  }

  .qbnotitie .alert {
    display: flex;
    align-items: flex-start;
    gap: var(--awh-sp-3);
    padding: var(--awh-sp-4) var(--awh-sp-5);
    background: var(--awh-clr-surface-sunken);
    border-left: 2px solid var(--awh-clr-accent);
    color: var(--awh-clr-ink);
    font-size: var(--awh-fs-sm);
    line-height: var(--awh-lh-relaxed);
  }

  .qbnotitie .alert-sign {
    flex: none;
    inline-size: 18px;
    block-size: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--awh-clr-accent);
    color: var(--awh-clr-accent-ink);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-style: normal;
    line-height: 1;
  }

  .qbnotitie p:last-child {
    margin-bottom: 0;
  }
/* END_SNIPPET:awh-optionize-styles */

/* START_SNIPPET:awh-pages-styles (INDEX:252) */
/* ==========================================================================
     CONTENT PAGES
     Shared shell for over-ons, contact, showroom, the landing pages and the
     legal pages. One header shape, one prose measure, one closing CTA — the
     live GemPages templates each invent their own, and three of them ship with
     no H1 at all.
     ========================================================================== */

  .paghero { padding-block: var(--awh-sp-8) var(--awh-sp-10); }

  .paghero__inner { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }

  .paghero--media .paghero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .paghero__body > * { max-width: 40rem; }

  .paghero__titel {
    font-size: clamp(var(--awh-fs-2xl), 4.4vw, var(--awh-fs-4xl));
    margin-bottom: var(--awh-sp-5);
  }

  .paghero__acties { display: flex; flex-wrap: wrap; gap: var(--awh-sp-3); margin-top: 0; }

  /* Same reasoning as .tblok__media — a square source otherwise makes the hero
     image taller than the copy beside it. */
  .paghero__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .paghero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .paghero__tag {
    position: absolute;
    left: var(--awh-sp-4);
    bottom: var(--awh-sp-4);
    padding: var(--awh-sp-2) var(--awh-sp-3);
    background: rgb(35 40 43 / 0.82);
    backdrop-filter: blur(6px);
    color: #edeae5;
    border-radius: var(--awh-radius-xs);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  @media (max-width: 900px) {
    .paghero--media .paghero__inner { grid-template-columns: 1fr; }
    .paghero__media { order: -1; }
  }

  /* --- text block --------------------------------------------------------- */

  .tblok { padding-block: var(--awh-section-y); }

  /* Consecutive prose blocks share a surface, so their facing cushions are one
     gap and not two. Scoped to .tblok, which only the content templates use —
     the homepage is untouched. */
  .tblok + .tblok { padding-block-start: 0; }

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

  /* No image, no second column.
     .tblok__inner is a two-column grid, and TekstBlok only renders the media
     div when there is a media prop — so six of the advice sections filled the
     left half and left the right half of the page blank. Six because a section
     that is pure explanation does not always warrant a photograph; the layout
     should follow the content rather than demand it. */
  .tblok__inner:not(:has(.tblok__media)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .tblok__inner:not(:has(.tblok__media)) .tblok__tekst > * {
    max-width: var(--awh-measure);
  }

  .tblok--omgekeerd .tblok__media { order: -1; }

  /* 4:3, like every card in the system. Without a constraint the column takes
     whatever the source happens to be — the aluminium photo is 500×500, so it
     rendered 567 tall against 315 of text and left 252px of dead space beside
     the copy. The alt text stays meaningful because nothing is cropped that
     the caption refers to. */
  .tblok__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .tblok__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* A technical drawing is the one case where the 4:3 crop above is wrong: on
     the BP/PH/OH schema the dimension arrows run to the very edge of the
     canvas, so `cover` cuts off the thing the drawing exists to show. Natural
     ratio, contained, and no surface behind it — the diagrams are drawn on
     white and a sunken panel would box them in. */
  .tblok__media--schema {
    aspect-ratio: auto;
    background: none;
  }

  .tblok__media--schema img { height: auto; object-fit: contain; }

  .tblok__tekst .awh-section-title { margin-bottom: var(--awh-sp-5); }

  @media (max-width: 900px) {
    .tblok__inner { grid-template-columns: 1fr; }
    .tblok--omgekeerd .tblok__media { order: 0; }
  }

  /* --- facts table (the parent site's mono device) ------------------------- */

  /* The measure goes on the children, not on the element that also carries
     .awh-container. Narrowing .awh-container itself narrows the page box, whose
     `margin-inline: auto` then centres the whole block — which is why this
     section sat indented while every other one on the page started at the
     container edge. Same fix as .colhead__inner in styles/shop.css. */
  .feiten__wrap > * { max-width: 46rem; }

  .feiten__titel {
    margin-bottom: var(--awh-sp-4);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .feiten__lijst { display: grid; margin: 0; border-top: 1px solid var(--awh-clr-line); }

  .feiten__rij {
    display: flex;
    justify-content: space-between;
    gap: var(--awh-sp-5);
    padding-block: var(--awh-sp-3);
    border-bottom: 1px solid var(--awh-clr-line);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    letter-spacing: 0.03em;
  }

  .feiten__rij dt { color: var(--awh-clr-ink-muted); text-transform: uppercase; }
  .feiten__rij dd { margin: 0; text-align: end; }

  .feiten--donker .feiten__lijst,
  .feiten--donker .feiten__rij { border-color: var(--awh-clr-dark-line); }
  .feiten--donker .feiten__rij dd { color: var(--awh-clr-dark-ink); }

  /* Summary band: the promises on the left, the comparison table on the right.
     Two columns rather than two stacked sections. */
  .advies__kort {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

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

  /* --- checkmark list ------------------------------------------------------ */

  .punten { display: grid; gap: var(--awh-sp-3); margin: var(--awh-sp-5) 0 0; padding: 0; list-style: none; }
  .punten li { display: flex; align-items: flex-start; gap: var(--awh-sp-3); font-size: var(--awh-fs-sm); line-height: 1.5; }
  .punten svg { color: var(--awh-orange); flex: none; margin-top: 3px; }

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

  .slotcta { background: var(--awh-clr-dark-bg); color: var(--awh-clr-dark-ink); }

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

  .slotcta .lede { max-width: 44ch; }
  .slotcta__acties { display: flex; flex-wrap: wrap; gap: var(--awh-sp-3); }

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

  /* ==========================================================================
     CONTACT
     ========================================================================== */

  .contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .contact__kanalen { display: grid; gap: var(--awh-sp-3); }

  /* Direct routes come first — a form is the slowest way to get an answer and
     should not be the only option on the page. */
  .kanaal {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-4);
    padding: var(--awh-sp-4) var(--awh-sp-5);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out), transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .kanaal:hover { border-color: var(--awh-orange); transform: translateY(-2px); }

  .kanaal__icoon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--awh-radius-pill);
    background: var(--awh-orange-tint);
    color: var(--awh-orange-deep);
  }

  .kanaal__body { display: grid; gap: 1px; min-width: 0; }

  .kanaal__label {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .kanaal__waarde {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    overflow-wrap: anywhere;
  }

  .kanaal__sub { font-size: var(--awh-fs-2xs); color: var(--awh-clr-ink-muted); }

  .contact__kanalen .feiten__titel { margin-top: var(--awh-sp-5); }

  .contact__formulier .awh-section-title { margin-bottom: var(--awh-sp-3); }

  .cform { display: grid; gap: var(--awh-sp-5); margin-top: var(--awh-sp-6); }
  .cform__rij { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--awh-sp-4); }
  .cform__optioneel { font-weight: 400; color: var(--awh-clr-ink-muted); }
  .cform__note { font-size: var(--awh-fs-3xs); line-height: 1.5; color: var(--awh-clr-ink-muted); }

  .cform__klaar {
    margin-top: var(--awh-sp-6);
    padding: var(--awh-sp-6);
    background: var(--awh-orange-tint);
    border-left: 3px solid var(--awh-orange);
    border-radius: var(--awh-radius-xs);
  }

  .cform__klaar-titel { font-weight: 700; font-size: var(--awh-fs-lg); margin-bottom: var(--awh-sp-2); }
  .cform__klaar-tekst { color: var(--awh-clr-ink-muted); line-height: var(--awh-lh-normal); }

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

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

  /* ==========================================================================
     SHOWROOM
     ========================================================================== */

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

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

  /* A hero with no image is short, so it does not need the full section gap
     beneath it. */
  .paghero:not(.paghero--media) { padding-bottom: var(--awh-sp-6); }

  /* "Stuur een bericht" was rendering larger than the page's own H1 — an H2
     must never outrank the H1 it sits under. */
  .contact__formulier .awh-section-title,
  .showroom__grid .awh-section-title {
    font-size: clamp(var(--awh-fs-xl), 2.6vw, var(--awh-fs-2xl));
  }

  /* --- collection list --- */

  /* Each collection is represented by a real photograph of something in it.
     The catalogue carries no collection imagery of its own, so a card without
     one would be nine names in a list — which is what /collections was worth
     before, when it redirected into the configurator. */
  /* auto-fill lays four 280px tracks across 1200px whether or not there are
     four cards, so a two-card band left half the row empty. Below four, the
     track count follows the card count. */

  /* --- blog --- */

  .artgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--awh-sp-8) var(--awh-sp-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .artkaart__media {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .artkaart__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .artkaart__meta,
  .art__meta {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  /* Body fills the remaining height so every card in a row ends level, however
     long its excerpt runs. */
  .artkaart__body {
    display: flex;
    flex-direction: column;
    gap: var(--awh-sp-2);
    flex: 1;
    padding: var(--awh-sp-4) var(--awh-sp-5) var(--awh-sp-5);
  }

  .artkaart__titel {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    line-height: var(--awh-lh-snug);
  }

  /* The same card as .prodkaart and .colkaart. These were bare — no surface, no
     border, no hover — which made the blog index the one grid on the site that
     did not look like the others. */
  .artkaart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .artkaart:hover {
    border-color: var(--awh-clr-line-strong);
    box-shadow: var(--awh-shadow-md);
    transform: translateY(-3px);
  }

  .artkaart__media img { transition: transform var(--awh-dur-slow) var(--awh-ease-out); }
  .artkaart:hover .artkaart__media img { transform: scale(1.03); }

  .artkaart__titel a { color: inherit; text-decoration: none; }
  .artkaart__titel a:hover { color: var(--awh-clr-accent); }

  /* Stretched link, as on .prodkaart — the whole card is the target rather
     than an 18px line of text. */
  .artkaart__titel a::after { content: ''; position: absolute; inset: 0; }

  .artkaart__tekst {
    font-size: var(--awh-fs-2xs);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  /* Article body. A measure this narrow is the whole point of a long read —
     the 2,695-word piece is unreadable at full container width. */
  .art__kop,
  .art__body,
  .art__cta {
    max-width: var(--awh-measure);
  }

  .art__titel {
    margin-top: var(--awh-sp-3);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-3xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-display);
    line-height: var(--awh-lh-tight);
  }

  .art__intro { margin-top: var(--awh-sp-4); }

  .art__media {
    margin-block: var(--awh-sp-8);
    aspect-ratio: 16 / 9;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  .art__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .art__body > * + * { margin-top: var(--awh-sp-4); }

  .art__body h2 {
    margin-top: var(--awh-sp-10);
    font-size: var(--awh-fs-xl);
    line-height: var(--awh-lh-snug);
  }

  /* A long read earns bigger type. At 16px the measure ran to 78 characters a
     line, above the comfortable 65–75; 17px brings it to about 70 without
     narrowing the column. */
  .art__body p,
  .art__body li {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .art__body ul {
    padding-left: var(--awh-sp-5);
    display: grid;
    gap: var(--awh-sp-2);
  }



  .art__cta {
    margin-top: var(--awh-sp-12);
    padding: var(--awh-sp-6);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-orange-tint);
  }

  .art__cta p { margin-bottom: var(--awh-sp-4); font-size: var(--awh-fs-sm); }

  /* Body and outline side by side. The text holds its reading measure and the
     outline occupies the ~577px the article was leaving empty. */
  .art__grid {
    display: grid;
    grid-template-columns: minmax(0, var(--awh-measure)) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    margin-block-start: var(--awh-sp-8);
  }

  .art__zij {
    position: sticky;
    top: 110px;
  }

  /* Anchored inline for a jump list, sticky when it lives in the sidebar. */
  .art__toc {
    padding: var(--awh-sp-5) var(--awh-sp-6);
    border-left: 3px solid var(--awh-orange);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .art__toc-titel {
    margin-block-end: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .art__toc ol {
    display: grid;
    gap: var(--awh-sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
  }

  .art__toc li { counter-increment: toc; }

  .art__toc a {
    display: flex;
    gap: var(--awh-sp-3);
    min-block-size: 40px;
    align-items: center;
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink);
    text-decoration: none;
  }

  .art__toc a::before {
    content: counter(toc);
    flex: none;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    color: var(--awh-orange);
  }

  .art__toc a:hover { color: var(--awh-clr-accent); }

  /* Where you are, not just what exists. */
  .art__toc a.is-actief {
    color: var(--awh-clr-accent);
    font-weight: 600;
  }

  .art__toc a.is-actief::before { color: var(--awh-clr-accent); }

  @media (max-width: 1024px) {
    /* No spare column to sit in — the outline returns to the flow above the
       article and stops following the scroll. */
    .art__grid { grid-template-columns: 1fr; }
    .art__zij { position: static; order: -1; max-width: var(--awh-measure); }
  }

  /* Anchored headings must clear the sticky masthead when jumped to. */
  .art__body h2 { scroll-margin-block-start: 110px; }

  /* --- 404 --- */

  /* Inside .awh-container, never on it: .awh-container carries the page gutter and its
     own centring margins, so narrowing that same element centres the whole
     block instead of constraining the text. */
  .nf__inner {
    max-width: var(--awh-measure);
  }

  .nf__titel {
    margin-top: var(--awh-sp-3);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-3xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-display);
    line-height: var(--awh-lh-tight);
  }

  .nf__lede {
    margin-top: var(--awh-sp-4);
  }

  .nf__acties {
    display: flex;
    flex-wrap: wrap;
    gap: var(--awh-sp-3);
    margin-top: var(--awh-sp-8);
  }

  .colother__meta {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
    margin-top: var(--awh-sp-2);
  }

  /* --- overlay --- */

  .zoek__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--awh-z-scrim);
    background: rgb(20 22 24 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--awh-dur-base) var(--awh-ease-out);
  }

  .zoek__scrim.is-open { opacity: 1; pointer-events: auto; }

  /* Anchored near the top rather than centred: results grow downward, and a
     vertically centred panel jumps as they arrive. */
  .zoek {
    position: fixed;
    inset: 0;
    z-index: var(--awh-z-drawer);
    display: grid;
    justify-items: center;
    align-content: start;
    padding: clamp(var(--awh-sp-6), 8vh, 7rem) var(--awh-sp-5) var(--awh-sp-6);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--awh-dur-base) var(--awh-ease-out);
  }

  .zoek.is-open { opacity: 1; pointer-events: auto; }

  .zoek__paneel {
    display: flex;
    flex-direction: column;
    inline-size: min(720px, 100%);
    max-block-size: min(640px, 76vh);
    background: var(--awh-clr-surface);
    border-radius: var(--awh-radius-md);
    box-shadow: var(--awh-shadow-lg);
    overflow: hidden;
    translate: 0 -10px;
    transition: translate var(--awh-dur-base) var(--awh-ease-out);
  }

  .zoek.is-open .zoek__paneel { translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .zoek, .zoek__scrim, .zoek__paneel { transition: none; }
  }

  .zoek__balk {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    padding-inline: var(--awh-sp-5);
    border-block-end: 1px solid var(--awh-clr-line);
  }

  .zoek__balk > svg { flex: none; color: var(--awh-clr-ink-muted); }

  .zoek__balk input {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 64px;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--awh-fs-lg);
    color: var(--awh-clr-ink);
  }

  .zoek__balk input:focus { outline: none; }
  .zoek__balk input::-webkit-search-cancel-button { display: none; }

  .zoek__sluit {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--awh-clr-ink);
    cursor: pointer;
  }

  .zoek__sluit:hover { background: var(--awh-clr-surface-sunken); }

  .zoek__body { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; padding: var(--awh-sp-4) 0; }

  .zoek__kop {
    padding: var(--awh-sp-2) var(--awh-sp-5);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .zoek__groep + .zoek__groep { margin-block-start: var(--awh-sp-3); }

  .zoek__rij {
    display: grid;
    gap: 1px;
    padding: var(--awh-sp-3) var(--awh-sp-5);
    text-decoration: none;
    color: var(--awh-clr-ink);
  }

  .zoek__rij--product {
    grid-template-columns: 48px 1fr;
    gap: var(--awh-sp-4);
    align-items: center;
  }

  /* One highlight for hover and for keyboard, so the arrow keys and the mouse
     are visibly the same mechanism. */
  .zoek__rij:hover,
  .zoek__rij.is-actief { background: var(--awh-orange-tint); }

  .zoek__foto {
    inline-size: 48px;
    block-size: 48px;
    object-fit: cover;
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .zoek__rij-body { display: grid; gap: 1px; min-inline-size: 0; }
  .zoek__rij-titel { font-size: var(--awh-fs-2xs); font-weight: 600; }

  .zoek__rij-sub {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  .zoek__suggesties { padding-block-end: var(--awh-sp-2); }
  .zoek__tags { display: flex; flex-wrap: wrap; gap: var(--awh-sp-2); padding-inline: var(--awh-sp-5); }

  .zoek__tag {
    min-block-size: 40px;
    padding-inline: var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    background: var(--awh-clr-surface);
    font: inherit;
    font-size: var(--awh-fs-2xs);
    cursor: pointer;
  }

  .zoek__tag:hover { border-color: var(--awh-clr-ink); }

  .zoek__leeg {
    padding: var(--awh-sp-6) var(--awh-sp-5);
    font-size: var(--awh-fs-2xs);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .zoek__alles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-3);
    margin-block-start: var(--awh-sp-3);
    padding: var(--awh-sp-4) var(--awh-sp-5);
    border-block-start: 1px solid var(--awh-clr-line);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    color: var(--awh-clr-accent);
    text-decoration: none;
  }

  .zoek__alles:hover { background: var(--awh-clr-surface-sunken); }

  /* --- /search --- */

  .zoekpag__cats { display: flex; flex-wrap: wrap; gap: var(--awh-sp-2); margin-block: var(--awh-sp-5) var(--awh-sp-6); }

  .zoekpag__cat {
    display: inline-flex;
    align-items: center;
    gap: var(--awh-sp-2);
    min-block-size: 44px;
    padding-inline: var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    background: var(--awh-clr-surface);
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink);
    text-decoration: none;
  }

  .zoekpag__cat:hover { border-color: var(--awh-clr-accent); color: var(--awh-clr-accent); }

  .zoekpag__leeg {
    padding-block: var(--awh-sp-12);
    text-align: center;
    color: var(--awh-clr-ink-muted);
  }

  .zoekpag__leeg > svg { color: var(--awh-clr-line-strong); }

  .zoekpag__leeg-titel {
    margin-block: var(--awh-sp-4) var(--awh-sp-2);
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    color: var(--awh-clr-ink);
  }

  .zoekpag__leeg-tekst { max-inline-size: 46ch; margin: 0 auto var(--awh-sp-6); line-height: var(--awh-lh-relaxed); }

  @media (max-width: 640px) {
    .zoek { padding-block-start: 0; padding-inline: 0; }
    .zoek__paneel { inline-size: 100%; max-block-size: 100dvh; block-size: 100dvh; border-radius: 0; }
    .zoek__balk input { min-block-size: 56px; font-size: var(--awh-fs-md); }
  }

  /* The showroom variant leads with the spec table. Ordered rather than
     branched: a section may only contain one `content_for 'blocks'`, and both
     layouts are the same two-column grid. */
  .showroom__grid > .feiten {
    order: -1;
  }
/* END_SNIPPET:awh-pages-styles */

/* START_SNIPPET:awh-pdp-styles (INDEX:253) */
/* --- product grid --- */

  .prodgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--awh-sp-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .prodkaart {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    transition:
      border-color var(--awh-dur-base) var(--awh-ease-out),
      box-shadow var(--awh-dur-base) var(--awh-ease-out),
      transform var(--awh-dur-base) var(--awh-ease-out);
  }

  .prodkaart:hover {
    border-color: var(--awh-clr-line-strong);
    box-shadow: var(--awh-shadow-md);
    transform: translateY(-3px);
  }

  /* Landscape, not square. The live grid crops gates to 1:1 and the top row
     ends up showing gravel. */
  .prodkaart__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--awh-clr-surface-sunken); }

  .prodkaart__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    transition: transform var(--awh-dur-slow) var(--awh-ease-out);
  }

  .prodkaart:hover .prodkaart__media img { transform: scale(1.03); }

  .prodkaart__body { display: flex; flex-direction: column; gap: var(--awh-sp-1); padding: var(--awh-sp-4); flex: 1; }

  .prodkaart__titel {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-md);
    font-weight: 700;
    letter-spacing: var(--awh-ls-tight);
    font-variation-settings: "wdth" var(--awh-wdth-display);
  }

  .prodkaart__titel a::after { content: ""; position: absolute; inset: 0; }

  .prodkaart__code {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: var(--awh-clr-ink-muted);
  }

  .prodkaart__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--awh-sp-3);
    margin-top: auto;
    padding-top: var(--awh-sp-4);
  }

  .prodkaart__prijs {
    display: flex;
    flex-direction: column;
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-lg);
    font-weight: 800;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
  }

  .prodkaart__vanaf {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 400;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .prodkaart__cta {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-orange);
  }

  .prodkaart__cta svg { transition: transform var(--awh-dur-base) var(--awh-ease-out); }

  .prodkaart:hover .prodkaart__cta svg { transform: translateX(3px); }

  @media (max-width: 1024px) { .prodgrid { grid-template-columns: repeat(3, 1fr); } }

  @media (max-width: 760px)  { .prodgrid { grid-template-columns: repeat(2, 1fr); } }

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

  /* ==========================================================================
     PDP
     ========================================================================== */

  .pdp { padding-block: var(--awh-sp-8) var(--awh-sp-10); }

  /* The gallery gives width back to the configurator.
     It was the wider of the two columns (598px against 544px) from when the
     right-hand side held a price and a link. Now that the poort is configured
     there, that column carries a size select, a colour row, six to ten option
     groups and a price bar — so the ratio inverts. At 1200px this is roughly
     a 460px gallery against a 700px column, which is enough for four swatches
     across, exactly as on the configurator page. */
  .pdp__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
    gap: clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
  }

  /* Sticky, because the configure column beside it is now several times taller
     — without this the gallery scrolls away and leaves an empty column.
     No overflow:hidden here any more: ProductGallery rounds its own stage, and
     clipping a sticky element's own box is a good way to lose it.

     It was briefly centred in a viewport-tall box, to answer the 2000px of
     empty column under a 430px gallery. AW Hekken preferred it at the top:
     the photograph then sits level with the heading and the first step of the
     configurator, which is what a visitor is reading when they arrive. The
     empty column below is the price of that, and it is the cheaper price. */
  .pdp__media {
    position: sticky;
    top: 108px;
  }

  /* The sunken panel moved off .pdp__media, which is now viewport-tall and
     would have painted a full-height grey column beside the configurator. It
     belongs to the gallery, whose box it always matched exactly. */
  .galerij {
    background: var(--awh-clr-surface-sunken);
    border-radius: var(--awh-radius-sm);
  }

  .pdp__media img { width: 100%; height: auto; display: block; }

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

    /* Stacked, so there is nothing to stick to. */
    .pdp__media { position: static; }
  }

  .pdp__mediatag {
    position: absolute;
    left: var(--awh-sp-4);
    bottom: var(--awh-sp-4);
    padding: var(--awh-sp-2) var(--awh-sp-3);
    background: rgb(35 40 43 / 0.82);
    backdrop-filter: blur(6px);
    color: #edeae5;
    border-radius: var(--awh-radius-xs);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  .pdp__mediatag b { color: var(--awh-orange); font-weight: 500; }

  .pdp__titel { font-size: clamp(var(--awh-fs-xl), 3.4vw, var(--awh-fs-3xl)); margin-bottom: var(--awh-sp-5); }

  /* One line, not the old three-line price block. The configurator's sticky bar
     below carries the live price as it changes, so restating a range in large
     type above it just competes with the number that actually moves. */
  .pdp__vanaf {
    margin-bottom: var(--awh-sp-6);
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink-muted);
  }

  .pdp__vanaf strong {
    font-size: var(--awh-fs-lg);
    color: var(--awh-clr-ink);
  }

  .pdp__prijs { display: grid; gap: 2px; margin-bottom: var(--awh-sp-6); }

  .pdp__prijs-label,
  .pdp__prijs-tot {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .pdp__prijs-waarde {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-2xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--awh-ls-display);
    font-variation-settings: "wdth" var(--awh-wdth-display);
    font-variant-numeric: tabular-nums;
  }

  .pdp__slot {
    margin-block-start: var(--awh-sp-6);
    padding: var(--awh-sp-5);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-clr-surface);
  }

  /* The order → delivery sequence. The live site paints this #f6f7f6 with an
     #EE7F31 rule; both are tokens here, so it follows the theme instead of
     pinning two hex values into the product column. */
  .pdp__proces {
    margin-block-end: var(--awh-sp-4);
    padding: var(--awh-sp-2) var(--awh-sp-3);
    border-inline-start: 3px solid var(--awh-orange);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    line-height: 1.4;
    color: var(--awh-clr-ink-muted);
  }

  .pdp__usps {
    display: grid;
    gap: var(--awh-sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .pdp__usps li { display: flex; align-items: center; gap: var(--awh-sp-3); font-size: var(--awh-fs-sm); }

  .pdp__usps svg { color: var(--awh-orange); flex: none; }

  .pdp__acties { display: grid; gap: var(--awh-sp-3); }

  .pdp__pdf { margin-block-start: var(--awh-sp-4); }

  .pdp__note {
    margin-block: var(--awh-sp-4);
    padding-block-start: var(--awh-sp-4);
    border-block-start: 1px solid var(--awh-clr-line);
    font-size: var(--awh-fs-2xs);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

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

  /* --- specs --- */

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

  .spectabel { width: 100%; border-collapse: collapse; font-size: var(--awh-fs-sm); }

  .spectabel caption { text-align: start; }

  .spectabel th,
  .spectabel td { padding: var(--awh-sp-3) 0; border-bottom: 1px solid var(--awh-clr-line); text-align: start; }

  .spectabel thead th {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .spectabel tbody th { font-family: var(--awh-font-mono); font-weight: 400; }

  .spectabel td { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }

  .pdp__subkop {
    margin-top: var(--awh-sp-8);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    font-weight: 500;
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .kleurlijst { display: flex; flex-wrap: wrap; gap: var(--awh-sp-2); margin: var(--awh-sp-3) 0 0; padding: 0; list-style: none; }

  .kleurlijst li {
    padding: var(--awh-sp-2) var(--awh-sp-4);
    background: var(--awh-clr-surface);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-pill);
    font-size: var(--awh-fs-2xs);
  }

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

  /* --- gallery ------------------------------------------------------------
     The live theme disables thumbnails, so 74 of 126 products hide extra
     photos behind an arrow with no indication they exist. */

  /* Fixed stage.
     The media on a single product is not one shape: most photographs are 4:3,
     some are square, and the video is 9:16 portrait. Sizing the stage to each
     item made the whole buy column beside it jump — 449px for a 4:3 photo,
     598px for a square, 798px for the video. Pinning the box means switching
     thumbnails never moves anything. */
  .galerij__hoofd {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--awh-radius-sm);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
  }

  /* Photographs fill the box; the gate is centred in all of them, so the crop
     on the square ones takes background rather than product. Video does the
     opposite and is contained — see styles/video.css. */
  .galerij__hoofd img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .galerij__tag {
    position: absolute;
    left: var(--awh-sp-4);
    bottom: var(--awh-sp-4);
    padding: var(--awh-sp-2) var(--awh-sp-3);
    background: rgb(35 40 43 / 0.82);
    backdrop-filter: blur(6px);
    color: #edeae5;
    border-radius: var(--awh-radius-xs);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
  }

  /* The enlarge affordance. The photograph is inside this button, so the
     button is the stage. */
  .galerij__vergroot {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
  }

  .galerij__vergroot[hidden] { display: none; }

  /* The magnifier. Visible from the start on touch, where there is no hover to
     reveal it and an invisible affordance is no affordance. */
  .galerij__cue {
    position: absolute;
    inset-block-start: var(--awh-sp-4);
    inset-inline-end: var(--awh-sp-4);
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: rgb(35 40 43 / 0.82);
    backdrop-filter: blur(6px);
    color: #edeae5;
    pointer-events: none;
  }

  @media (hover: hover) {
    .galerij__cue {
      opacity: 0;
      scale: 0.9;
      transition:
        opacity var(--awh-dur-fast) var(--awh-ease-out),
        scale var(--awh-dur-fast) var(--awh-ease-out);
    }

    .galerij__hoofd:hover .galerij__cue,
    .galerij__vergroot:focus-visible .galerij__cue {
      opacity: 1;
      scale: 1;
    }
  }

  /* Stage arrows. Same reveal-on-hover rule as the magnifier, and the same
     reason for always showing them on touch. */
  .galerij__pijl {
    position: absolute;
    inset-block-start: 50%;
    translate: 0 -50%;
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    box-shadow: 0 1px 6px rgb(35 40 43 / 0.18);
    color: var(--awh-clr-ink);
    cursor: pointer;
    transition:
      opacity var(--awh-dur-fast) var(--awh-ease-out),
      background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .galerij__pijl:hover { background: #fff; }

  .galerij__pijl--terug { inset-inline-start: var(--awh-sp-3); }

  .galerij__pijl--verder { inset-inline-end: var(--awh-sp-3); }

  /* The icon is a chevron pointing down; a quarter turn each way makes the
     pair, rather than shipping two more paths for the same shape. */
  .galerij__pijl--terug svg { rotate: 90deg; }

  .galerij__pijl--verder svg { rotate: -90deg; }

  @media (hover: hover) {
    .galerij__pijl { opacity: 0; }

    .galerij__hoofd:hover .galerij__pijl,
    .galerij__pijl:focus-visible { opacity: 1; }
  }

  /* The strip: two scroll controls with the scrolling row between them. The
     controls take no width once everything fits, so a product with three
     photographs gets a plain row and no furniture. */
  .galerij__strip {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr) 0;
    align-items: center;
    gap: 0;
    margin-block-start: var(--awh-sp-3);
    transition: gap var(--awh-dur-base) var(--awh-ease-out);
  }

  .galerij__strip[data-scrollbaar='ja'] {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: var(--awh-sp-2);
  }

  /* Explicit columns, because the controls are removed with display:none when
     everything fits — and a display:none grid item occupies no cell, so the
     row slid into the 0px first column and measured zero. Every product with
     four photographs or fewer had an invisible thumbnail strip. */
  .galerij__strippijl--terug { grid-column: 1; }

  .galerij__thumbs { grid-column: 2; }

  .galerij__strippijl--verder { grid-column: 3; }

  .galerij__strippijl {
    display: none;
    place-items: center;
    inline-size: 30px;
    block-size: 30px;
    padding: 0;
    border: 1px solid var(--awh-clr-line);
    border-radius: 50%;
    background: var(--awh-clr-surface);
    color: var(--awh-clr-ink);
    cursor: pointer;
    transition:
      opacity var(--awh-dur-fast) var(--awh-ease-out),
      border-color var(--awh-dur-fast) var(--awh-ease-out);
  }

  .galerij__strip[data-scrollbaar='ja'] .galerij__strippijl { display: grid; }

  .galerij__strippijl:hover { border-color: var(--awh-clr-line-strong); }

  /* A control that cannot do anything says so, rather than sitting there
     looking pressable. */
  .galerij__strippijl:disabled {
    opacity: 0.28;
    cursor: default;
  }

  .galerij__strippijl--terug svg { rotate: 90deg; }

  .galerij__strippijl--verder svg { rotate: -90deg; }

  /* No arrows on touch: swiping the strip is the native gesture there, and two
     small round targets under the thumbnails would only crowd it. */
  @media (hover: none) {
    .galerij__strip[data-scrollbaar='ja'] {
      grid-template-columns: 0 minmax(0, 1fr) 0;
      gap: 0;
    }

    .galerij__strip[data-scrollbaar='ja'] .galerij__strippijl { display: none; }
  }

  /* One row, scrolled — not a wrapping grid. Twelve photographs used to stack
     into three rows and push the configurator down the page; AW Hekken flagged
     it. Fixed track width rather than 1fr so a product with four photographs
     and one with sixteen show the same size thumbnail.

     No scrollbar: the arrows, the edge fade and the look-ahead scroll all say
     the same thing more clearly, and a 6px bar under the images was the part
     desktop visitors were missing. */
  .galerij__thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84px;
    gap: var(--awh-sp-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: 2px;
  }

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

  /* The fade is the honest signal: it sits on the side that has more, so it
     says both "this scrolls" and "that way". A mask rather than a painted
     gradient, so it works over whatever the section background happens to be. */
  .galerij__thumbs[data-rand='verder'] {
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  }

  .galerij__thumbs[data-rand='terug'] {
    mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
  }

  .galerij__thumbs[data-rand='beide'] {
    mask-image: linear-gradient(
      to right,
      transparent,
      #000 44px,
      #000 calc(100% - 44px),
      transparent
    );
  }

  .galerij__thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--awh-radius-xs);
    overflow: hidden;
    background: var(--awh-clr-surface-sunken);
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out);
  }

  /* height:auto is load-bearing. The markup carries width="200" height="150"
     so the browser can reserve space before the image loads, and that attribute
     becomes a presentational `height: 150px` which beats `aspect-ratio`. The
     product page neutralised it by accident via `.pdp__media img { height: auto }

  `;
     the configurator had no such rule, so the same gallery rendered 154px
     thumbnails there and 66px ones here. Fixed on the component instead, so it
     is right wherever the gallery is used. */
  .galerij__thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .galerij__thumb:hover { border-color: var(--awh-clr-line-strong); }

  .galerij__thumb.is-active { border-color: var(--awh-orange); }

  .galerij__thumb:focus-visible {
    outline: 2px solid var(--awh-clr-focus);
    outline-offset: 2px;
  }

  /* --------------------------------------------------------------------------
     Gallery — lightbox
     -------------------------------------------------------------------------- */

  /* The dialog is the whole viewport and paints nothing itself; the photograph
     inside it is the only lit surface. */
  .galerij__licht {
    max-inline-size: 100vw;
    max-block-size: 100dvh;
    inline-size: 100vw;
    block-size: 100dvh;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
  }

  .galerij__licht::backdrop {
    background: rgb(20 22 24 / 0.93);
    backdrop-filter: blur(2px);
  }

  .galerij__licht-vlak {
    position: relative;
    block-size: 100%;
    display: grid;
    place-items: center;
    /* Was clamp(var(--awh-sp-4), 4vw, var(--awh-sp-7)). `--awh-sp-7` did not
       exist, so the whole clamp was invalid and the padding resolved to 0 —
       which is what shipped and was approved. Defining the step for the AW
       Nederland port would have retroactively padded this lightbox, so the
       shipped value is written out. Restore the clamp if the inset is wanted. */
    padding: 0;
  }

  /* Contained, never cropped. The stage above crops to 4:3 on purpose; this is
     the one place the visitor came to see the whole photograph. */
  /* Two selectors deep on purpose. Horizon's base sheet sizes images to their
     container, and at one class the box stretched to the full 1421×617 while
     `contain` letterboxed the photograph inside it — so the rounded corners
     landed on empty space and the bands either side of the photo swallowed the
     click-outside-to-close. */
  .galerij__licht .galerij__licht-foto {
    max-inline-size: min(94vw, 1600px);
    max-block-size: 86dvh;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    border-radius: var(--awh-radius-sm);
  }

  .galerij__licht-sluit,
  .galerij__licht-pijl {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.12);
    color: #f2f1ee;
    cursor: pointer;
    transition: background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .galerij__licht-sluit:hover,
  .galerij__licht-pijl:hover { background: rgb(255 255 255 / 0.24); }

  .galerij__licht-sluit {
    inset-block-start: var(--awh-sp-4);
    inset-inline-end: var(--awh-sp-4);
    inline-size: 44px;
    block-size: 44px;
  }

  .galerij__licht-pijl {
    inset-block-start: 50%;
    translate: 0 -50%;
    inline-size: 52px;
    block-size: 52px;
  }

  .galerij__licht-pijl--terug {
    inset-inline-start: var(--awh-sp-4);
  }

  .galerij__licht-pijl--terug svg { rotate: 90deg; }

  .galerij__licht-pijl--verder {
    inset-inline-end: var(--awh-sp-4);
  }

  .galerij__licht-pijl--verder svg { rotate: -90deg; }

  .galerij__licht-teller {
    position: absolute;
    inset-block-end: var(--awh-sp-4);
    inset-inline: 0;
    margin: 0;
    text-align: center;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    color: rgb(242 241 238 / 0.72);
  }

  /* On a phone the arrows would sit over the photograph itself. Moved to the
     bottom corners, beside the counter, where thumbs reach them. */
  @media (max-width: 600px) {
    .galerij__licht-pijl {
      inset-block-start: auto;
      inset-block-end: var(--awh-sp-3);
      translate: none;
      inline-size: 44px;
      block-size: 44px;
    }
  }

  /* --------------------------------------------------------------------------
     Gallery — video inside the PDP media stage
     -------------------------------------------------------------------------- */

  /* The stage keeps its 4:3 box whichever medium is showing, so switching
     thumbnails never reflows the buy column beside it. Portrait video is
     letterboxed into it against the dark surface rather than cropped. */
  .galerij__hoofd--video {
    background: var(--awh-clr-dark-bg);
    display: grid;
    place-items: center;
  }

  .galerij__hoofd--video .vspeler {
    /* 3:4 inside a 4:3 stage — as tall as the box allows, centred. */
    aspect-ratio: 3 / 4;
    block-size: 100%;
    inline-size: auto;
  }

  .galerij__thumb--video {
    position: relative;
  }

  .galerij__thumbvideo {
    position: absolute;
    inset-block-end: var(--awh-sp-1);
    inset-inline-end: var(--awh-sp-1);
    display: grid;
    place-items: center;
    inline-size: 22px;
    block-size: 22px;
    border-radius: 50%;
    background: var(--awh-clr-accent);
    color: var(--awh-clr-accent-ink);
    padding-inline-start: 2px;
  }
/* END_SNIPPET:awh-pdp-styles */

/* START_SNIPPET:awh-quote-styles (INDEX:255) */
/* `hidden` has to actually hide.

     The attribute's user-agent rule is `display: none` at the lowest possible
     specificity, so every class in this file that sets `display` silently beats
     it: `.qmodal__body { display: grid }` kept the whole form on screen
     underneath the success message, and the empty state showed at the same time
     as the summary. Restated with weight, scoped to this component. */
  .qmodal [hidden],
  .qform [hidden],
  .qsam [hidden] {
    display: none !important;
  }

  /* ==========================================================================
     Offerte — the site-wide quote
     --------------------------------------------------------------------------
     "Offerte aanvragen": the quote and the request for it in one panel, after
     the pattern already running on awhekken.nl. It replaces two earlier
     attempts — a 320px rail that only existed on the configurator page, and an
     off-canvas drawer that handed off to a separate form page.

     Panel geometry: form column left, summary right, both scrolling inside a
     fixed-height dialog so the submit button and the total never leave. Below
     900px it becomes a full-screen sheet with the summary collapsed into a bar,
     because two columns at 390px is not a layout.
     ========================================================================== */

  .qmodal__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--awh-z-scrim);
    background: rgb(20 22 24 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--awh-dur-base) var(--awh-ease-out);
  }

  .qmodal__scrim.is-open { opacity: 1; pointer-events: auto; }

  .qmodal {
    position: fixed;
    inset: 0;
    z-index: var(--awh-z-drawer);
    display: grid;
    place-items: center;
    padding: var(--awh-sp-6);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--awh-dur-base) var(--awh-ease-out);
  }

  .qmodal.is-open { opacity: 1; pointer-events: auto; }

  .qmodal__paneel {
    display: flex;
    flex-direction: column;
    inline-size: min(1080px, 100%);
    max-block-size: min(860px, 92vh);
    background: var(--awh-clr-surface);
    border-radius: var(--awh-radius-md);
    box-shadow: var(--awh-shadow-lg);
    overflow: hidden;
    translate: 0 12px;
    transition: translate var(--awh-dur-base) var(--awh-ease-out);
  }

  .qmodal.is-open .qmodal__paneel { translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .qmodal, .qmodal__scrim, .qmodal__paneel { transition: none; }
  }

  .qmodal__head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding: var(--awh-sp-5) var(--awh-sp-6);
    border-block-end: 1px solid var(--awh-clr-line);
  }

  .qmodal__titel {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
    letter-spacing: var(--awh-ls-display);
  }

  .qmodal__sluit {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    margin-inline-end: calc(var(--awh-sp-2) * -1);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--awh-clr-ink);
    cursor: pointer;
  }

  .qmodal__sluit:hover { background: var(--awh-clr-surface-sunken); }

  .qmodal__body {
    flex: 1 1 auto;
    min-block-size: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  }

  /* Each column scrolls on its own. One scroll region for the whole panel
     would drag the total out of view while someone fills in the form. */
  .qmodal__formkolom {
    overflow-y: auto;
    padding: var(--awh-sp-6);
  }

  /* The list scrolls, the totals do not.
     With four products the "Offerte totaal" scrolled off the bottom — the one
     number someone opening this panel is actually checking. So the column holds
     its height and only the item list moves inside it, which is the same
     arrangement the form column has with its pinned submit. */
  .qmodal__samkolom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--awh-sp-6);
    border-inline-start: 1px solid var(--awh-clr-line);
    background: var(--awh-clr-surface-sunken);
  }

  .qmodal__samkolom .qsam {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-block-size: 0;
  }

  .qmodal__samkolom .qsam__items {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .qmodal__samkolom .qsam__totalen {
    flex: none;
    margin-block-start: var(--awh-sp-4);
    padding-block-start: var(--awh-sp-4);
    border-block-start: 1px solid var(--awh-clr-line);
  }

  .qmodal__samkolom .qmodal__verder { flex: none; }

  .qmodal__verder {
    margin-block-start: var(--awh-sp-5);
    min-block-size: 44px;
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
    font: inherit;
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    color: var(--awh-clr-ink);
    cursor: pointer;
  }

  .qmodal__verder:hover { border-color: var(--awh-clr-ink); }

  /* Mobile summary bar — desktop has the column, so it is hidden there. */
  .qmodal__sambalk { display: none; }

  /* --- empty, success --- */

  .qmodal__leeg,
  .qmodal__klaar {
    padding: var(--awh-sp-12) var(--awh-sp-6);
    text-align: center;
    overflow-y: auto;
  }

  .qmodal__leeg-titel,
  .qmodal__klaar-titel {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
  }

  .qmodal__leeg-tekst,
  .qmodal__klaar-tekst {
    max-inline-size: 46ch;
    margin: var(--awh-sp-3) auto var(--awh-sp-6);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .qmodal__klaar-ico {
    display: grid;
    place-items: center;
    inline-size: 56px;
    block-size: 56px;
    margin-inline: auto;
    margin-block-end: var(--awh-sp-4);
    border-radius: 50%;
    background: var(--awh-clr-ok, var(--awh-orange));
    color: #fff;
  }

  /* --------------------------------------------------------------------------
     Summary — "Offerte overzicht"
     -------------------------------------------------------------------------- */

  .qsam__titel {
    font-size: var(--awh-fs-md);
    margin-block-end: var(--awh-sp-4);
  }

  .qsam__items {
    display: grid;
    gap: var(--awh-sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .qsam__item {
    display: flex;
    gap: var(--awh-sp-3);
    padding-block-end: var(--awh-sp-4);
    border-block-end: 1px solid var(--awh-clr-line);
  }

  .qsam__foto {
    flex: none;
    inline-size: 56px;
    block-size: 56px;
    object-fit: cover;
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
  }

  .qsam__body { min-inline-size: 0; flex: 1 1 auto; }

  .qsam__kop {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--awh-sp-2);
  }

  .qsam__naam { font-size: var(--awh-fs-2xs); font-weight: 600; line-height: 1.35; }

  .qsam__weg {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    margin: -6px -6px 0 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--awh-clr-ink-muted);
    cursor: pointer;
  }

  .qsam__weg:hover { background: var(--awh-clr-surface); color: var(--awh-orange-deep); }

  .qsam__variant,
  .qsam__inbegrepen {
    margin-block-start: 2px;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    line-height: 1.5;
    color: var(--awh-clr-ink-muted);
  }

  /* Priced options fold away. Six thousand euros deserves a breakdown, but not
     one that fills the panel before anyone has asked for it. */
  .qsam__addons { margin-block-start: var(--awh-sp-2); }

  .qsam__addons-knop {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-2);
    inline-size: 100%;
    min-block-size: 32px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink);
    cursor: pointer;
  }

  .qsam__chev { transition: rotate var(--awh-dur-fast) var(--awh-ease-out); }
  .qsam__chev.is-open { rotate: 180deg; }

  .qsam__addons-som { margin-inline-start: auto; color: var(--awh-clr-ink-muted); }

  .qsam__addonlijst {
    display: grid;
    gap: var(--awh-sp-1);
    margin: var(--awh-sp-2) 0 0;
    padding: var(--awh-sp-2) 0 0 var(--awh-sp-5);
    border-block-start: 1px dashed var(--awh-clr-line);
    list-style: none;
  }

  .qsam__addonlijst li {
    display: flex;
    justify-content: space-between;
    gap: var(--awh-sp-3);
    font-size: var(--awh-fs-3xs);
    line-height: 1.5;
  }

  .qsam__addon-waarde { color: var(--awh-clr-ink-muted); }
  .qsam__addon-prijs { flex: none; font-family: var(--awh-font-mono); }

  .qsam__prijs {
    margin-block-start: var(--awh-sp-2);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-2xs);
    font-weight: 500;
  }

  .qsam__totalen { margin-block-start: var(--awh-sp-5); }

  .qsam__rij {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--awh-sp-4);
    padding-block: var(--awh-sp-2);
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink-muted);
  }

  .qsam__rij--totaal {
    padding-block-start: var(--awh-sp-3);
    border-block-start: 1px solid var(--awh-clr-line-strong);
    font-size: var(--awh-fs-sm);
    color: var(--awh-clr-ink);
  }

  .qsam__rij--totaal strong {
    font-family: var(--awh-font-display);
    font-size: var(--awh-fs-xl);
    font-variation-settings: 'wdth' var(--awh-wdth-display);
  }

  .qsam__note {
    margin-block-start: var(--awh-sp-1);
    font-size: var(--awh-fs-3xs);
    color: var(--awh-clr-ink-muted);
  }

  /* --------------------------------------------------------------------------
     Request form
     -------------------------------------------------------------------------- */

  /* Reassurance, not instruction. It was 180px — a quarter of the visible form
     — before the first field, which pushed every input below the fold on a
     900px screen. Same words, tighter. */
  .qform__intro {
    padding: var(--awh-sp-3) var(--awh-sp-4);
    border-inline-start: 3px solid var(--awh-clr-ok, var(--awh-orange));
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .qform__intro p { font-size: var(--awh-fs-3xs); line-height: var(--awh-lh-normal); }
  .qform__intro p + p { margin-block-start: var(--awh-sp-2); }

  .qform__disclaimer {
    margin-block-start: var(--awh-sp-2);
    padding-block-start: var(--awh-sp-2);
    border-block-start: 1px solid var(--awh-clr-line);
    font-style: italic;
    color: var(--awh-clr-ink-muted);
  }

  .qform__verplicht {
    margin-block: var(--awh-sp-4) var(--awh-sp-2);
    font-size: var(--awh-fs-3xs);
    color: var(--awh-clr-ink-muted);
  }

  .qform__rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--awh-sp-4);
  }

  .qform > * + * { margin-block-start: var(--awh-sp-4); }

  .qveld { display: grid; gap: var(--awh-sp-2); }

  .qveld__label { font-size: var(--awh-fs-2xs); font-weight: 600; }
  .qveld__ster { color: var(--awh-orange-deep); }

  .qveld input,
  .qveld select,
  .qveld textarea {
    inline-size: 100%;
    min-block-size: 48px;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
    font: inherit;
    font-size: var(--awh-fs-2xs);
  }

  .qveld textarea { min-block-size: auto; line-height: var(--awh-lh-relaxed); }

  .qveld input:focus-visible,
  .qveld select:focus-visible,
  .qveld textarea:focus-visible {
    outline: 2px solid var(--awh-clr-focus);
    outline-offset: 1px;
  }

  .qform__hint {
    margin-block: var(--awh-sp-1) var(--awh-sp-3);
    font-size: var(--awh-fs-3xs);
    line-height: var(--awh-lh-snug);
    color: var(--awh-clr-ink-muted);
  }

  /* --- file upload --- */

  .qform__drop {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    flex-wrap: wrap;
    padding: var(--awh-sp-4);
    border: 1px dashed var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
    transition: border-color var(--awh-dur-fast) var(--awh-ease-out), background var(--awh-dur-fast) var(--awh-ease-out);
  }

  .qform__drop.is-over {
    border-color: var(--awh-clr-accent);
    background: var(--awh-orange-tint);
  }

  .qform__bladeren {
    min-block-size: 44px;
    padding-inline: var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface);
    font: inherit;
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    cursor: pointer;
  }

  .qform__bladeren:hover { border-color: var(--awh-clr-ink); }

  .qform__dropzone-tekst { font-size: var(--awh-fs-3xs); color: var(--awh-clr-ink-muted); }

  .qform__bestanden {
    display: grid;
    gap: var(--awh-sp-2);
    margin: var(--awh-sp-3) 0 0;
    padding: 0;
    list-style: none;
  }

  .qform__bestanden li {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    padding: var(--awh-sp-2) var(--awh-sp-3);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-xs);
    font-size: var(--awh-fs-3xs);
  }

  .qform__bestand-naam { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qform__bestand-grootte { flex: none; font-family: var(--awh-font-mono); color: var(--awh-clr-ink-muted); }

  .qform__bestand-weg {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--awh-clr-ink-muted);
    cursor: pointer;
  }

  .qform__bestand-weg:hover { background: var(--awh-clr-surface-sunken); color: var(--awh-orange-deep); }

  .qform__fout {
    margin-block-start: var(--awh-sp-2);
    font-size: var(--awh-fs-3xs);
    font-weight: 600;
    color: var(--awh-orange-deep);
  }

  /* --- consent, honeypot, actions --- */

  /* Was .qform__consent, a flex row with a checkbox. The checkbox is gone; the
     sentence stays as a quiet line under the button. */
  .qform__privacy {
    margin: 0;
    font-size: var(--awh-fs-3xs);
    line-height: var(--awh-lh-relaxed);
    color: var(--awh-clr-ink-muted);
  }

  .qform__privacy a { color: inherit; text-decoration-line: underline; text-underline-offset: 2px; }

  /* Off-screen rather than display:none — some bots skip anything hidden. */
  .qform__honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .qform__acties { margin-block-start: var(--awh-sp-6); }

  /* Pinned to the foot of the form column, as on the live modal.
     The panel is a fixed height and the form is longer than it, so left in the
     flow the submit button sat 133px below the fold — a request form whose
     primary action you have to go looking for. Modal only: on /offerte the page
     scrolls normally and there is nothing to pin against. */
  /* `bottom: 0`, not a negative offset. Desktop scrolls the form column and
     mobile scrolls the whole body, and a negative offset pins the bar that far
     *past* the scrollport's edge — which on mobile put it just off-screen. The
     column drops its own bottom padding and the bar supplies it instead, so the
     bar sits flush at the bottom in both. */
  .qmodal__formkolom {
    padding-block-end: 0;
    scrollbar-gutter: stable;
  }

  .qmodal__formkolom .qform__acties {
    position: sticky;
    inset-block-end: 0;
    margin-inline: calc(var(--awh-sp-6) * -1);
    padding: var(--awh-sp-4) var(--awh-sp-6) var(--awh-sp-6);
    background: var(--awh-clr-surface);
    border-block-start: 1px solid var(--awh-clr-line);
  }


  .qform__belofte {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--awh-sp-2);
    margin-block-start: var(--awh-sp-3);
    font-size: var(--awh-fs-3xs);
    color: var(--awh-clr-ink-muted);
  }

  .qform__belofte svg { color: var(--awh-clr-ok, var(--awh-orange)); }

  /* --------------------------------------------------------------------------
     Below 900px: full-screen sheet, summary in a bar
     -------------------------------------------------------------------------- */

  @media (max-width: 900px) {
    .qmodal { padding: 0; }

    .qmodal__paneel {
      inline-size: 100%;
      block-size: 100%;
      max-block-size: none;
      border-radius: 0;
    }

    .qmodal__body {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      overflow-y: auto;
    }

    .qmodal__sambalk {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--awh-sp-4);
      inline-size: 100%;
      min-block-size: 56px;
      padding-inline: var(--awh-sp-5);
      border: 0;
      border-block-end: 1px solid var(--awh-clr-line);
      background: var(--awh-clr-surface-sunken);
      font: inherit;
      font-size: var(--awh-fs-2xs);
      cursor: pointer;
    }

    .qmodal__sambalk-links,
    .qmodal__sambalk-rechts {
      display: flex;
      align-items: center;
      gap: var(--awh-sp-2);
    }

    .qmodal__sambalk-rechts { font-family: var(--awh-font-mono); font-weight: 500; }
    .qmodal__sambalk-rechts svg { transition: rotate var(--awh-dur-fast) var(--awh-ease-out); }
    .qmodal__sambalk-rechts .is-open { rotate: 180deg; }

    .qmodal__sambalk-badge {
      display: grid;
      place-items: center;
      min-inline-size: 22px;
      block-size: 22px;
      padding-inline: 5px;
      border-radius: var(--awh-radius-pill);
      background: var(--awh-clr-accent);
      color: var(--awh-clr-accent-ink);
      font-family: var(--awh-font-mono);
      font-size: var(--awh-fs-3xs);
    }

    /* Collapsed by default so the form is the first thing in reach. */
    .qmodal__samkolom {
      display: none;
      order: -1;
      border-inline-start: 0;
      border-block-end: 1px solid var(--awh-clr-line);
    }

    .qmodal__samkolom.is-open { display: flex; }

    .qmodal__formkolom { padding: var(--awh-sp-5) var(--awh-sp-5) 0; }
    .qmodal__formkolom .qform__acties {
      margin-inline: calc(var(--awh-sp-5) * -1);
      padding: var(--awh-sp-4) var(--awh-sp-5) var(--awh-sp-5);
    }
  }

  /* --------------------------------------------------------------------------
     Header count
     -------------------------------------------------------------------------- */

  .masthead__quote {
    position: relative;
    border: 1px solid var(--awh-clr-line-strong);
    background: var(--awh-clr-surface);
    cursor: pointer;
    font: inherit;
  }

  .masthead__quote-badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -6px;
    display: grid;
    place-items: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 5px;
    border-radius: var(--awh-radius-pill);
    background: var(--awh-clr-accent);
    color: var(--awh-clr-accent-ink);
    font-family: var(--awh-font-mono);
    font-size: 11px;
    line-height: 1;
  }

  /* --------------------------------------------------------------------------
     Toast
     -------------------------------------------------------------------------- */

  .otoast {
    position: fixed;
    inset-block-end: var(--awh-sp-6);
    inset-inline-start: 50%;
    z-index: var(--awh-z-drawer);
    translate: -50% 12px;
    padding: var(--awh-sp-3) var(--awh-sp-5);
    border-radius: var(--awh-radius-pill);
    background: var(--awh-clr-ink);
    color: var(--awh-clr-ink-inverse);
    font-size: var(--awh-fs-2xs);
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--awh-dur-fast) var(--awh-ease-out),
      translate var(--awh-dur-fast) var(--awh-ease-out);
  }

  .otoast.is-open {
    opacity: 1;
    translate: -50% 0;
  }

  /* --------------------------------------------------------------------------
     Maak de set compleet — the rest of the model family
     Ported from styles/offerte.css lines 881-1009.
     -------------------------------------------------------------------------- */

  .qbijp {
    flex: none;
    padding: var(--awh-sp-4) var(--awh-sp-6);
    border-block-end: 1px solid var(--awh-clr-line);
    background: var(--awh-orange-tint);
  }

  .qbijp__titel {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    margin-block-end: var(--awh-sp-3);
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    letter-spacing: var(--awh-ls-mono);
    text-transform: uppercase;
    color: var(--awh-clr-ink-muted);
  }

  .qbijp__code { color: var(--awh-orange-deep); }

  .qbijp__lijst {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--awh-sp-3);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .qbijp__kaart {
    display: flex;
    align-items: center;
    gap: var(--awh-sp-3);
    inline-size: 100%;
    min-block-size: 64px;
    padding: var(--awh-sp-2) var(--awh-sp-3);
    border: 1px solid var(--awh-clr-line-strong);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-clr-surface);
    text-align: start;
    cursor: pointer;
    transition:
      border-color var(--awh-dur-fast) var(--awh-ease-out),
      transform var(--awh-dur-fast) var(--awh-ease-out);
  }

  .qbijp__kaart:hover {
    border-color: var(--awh-clr-accent);
    transform: translateY(-1px);
  }

  .qbijp__media {
    flex: none;
    inline-size: 48px;
    block-size: 48px;
    overflow: hidden;
    border-radius: var(--awh-radius-xs);
    background: var(--awh-clr-surface-sunken);
  }

  .qbijp__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  .qbijp__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
    flex: 1 1 auto;
  }

  .qbijp__naam {
    font-size: var(--awh-fs-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--awh-ls-tight);
  }

  .qbijp__prijs {
    font-family: var(--awh-font-mono);
    font-size: var(--awh-fs-3xs);
    white-space: nowrap;
    color: var(--awh-clr-ink-muted);
  }

  .qbijp__plus {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 50%;
    background: var(--awh-clr-accent);
    color: var(--awh-clr-accent-ink);
  }

  /* On the /offerte page it sits under the summary in a narrow column, so the
     cards stack rather than sharing a row. */
  .qbijp--kolom {
    margin-block-start: var(--awh-sp-5);
    padding: var(--awh-sp-4);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
  }

  .qbijp--kolom .qbijp__lijst { grid-template-columns: 1fr; }

  @media (max-width: 900px) {
    .qbijp { padding: var(--awh-sp-4) var(--awh-sp-5); }
    /* One row that scrolls, not three stacked cards — the modal is the whole
       screen here and the form has to stay in reach. */
    .qbijp__lijst {
      grid-auto-flow: column;
      grid-auto-columns: minmax(224px, 1fr);
      grid-template-columns: none;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      margin-inline: calc(var(--awh-sp-5) * -1);
      padding-inline: var(--awh-sp-5);
    }

    .qbijp__lijst::-webkit-scrollbar { display: none; }
    .qbijp--kolom .qbijp__lijst { grid-auto-flow: row; margin-inline: 0; padding-inline: 0; }
  }

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

  /* ==========================================================================
     Panel refinements — a deliberate divergence from the prototype
     --------------------------------------------------------------------------
     Everything above this line is styles/offerte.css, renamed and otherwise
     untouched. Everything below is a change Yerveen asked for after seeing the
     panel with real data, and is kept separate so it stays reversible and so
     the port above remains a faithful copy to diff against.

     The panel had five surfaces stacked in one dialog — white header, peach
     upsell strip, grey intro box with a green rule, white form, grey summary —
     plus Chrome's blue focus ring. With a real quote in it that reads as noise.
     It is now paper, one tint for the summary, ink, and orange as the only
     chromatic accent.
     ========================================================================== */

  /* 1. The remove button is pulled 6px out of the flow to sit optically on the
        card edge. `.qsam__items` scrolls, so those 6px became a horizontal
        scrollbar under every quote line. Give the list that much room back
        rather than clipping the button: the pull is deliberate, the scrollbar
        was not. The column is only ever scrolled vertically. */
  .qmodal__samkolom .qsam__items {
    padding-inline-end: 6px;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }

  /* 2. The intro reads as an informational notice.

        History, because this rule has been both ways. The port carried the
        prototype's grey box with a green rule; the "too many colours" pass
        stripped it to quiet text behind a hairline; Yerveen then asked for an
        info or success colour here (24 Aug). It is the one block in the panel
        that tells the visitor what actually happens after they submit — that
        the price is an indication and a real quote follows — and unstyled it
        read as small print, which is the opposite of what it says.

        The green is --awh-clr-ok, already in the palette and already carrying
        the success state and the "Binnen 48 uur antwoord" check, so this adds
        no new hue. It stays off orange deliberately: orange is the action
        colour in this panel and the submit button is directly below.

        The tint is mixed from the surface rather than hard-coded, so it follows
        the dark theme without a second rule. */
  .qform__intro {
    position: relative;
    padding: var(--awh-sp-3) var(--awh-sp-4);
    padding-inline-start: calc(var(--awh-sp-4) + 22px);
    border-inline-start: 3px solid var(--awh-clr-ok);
    border-radius: var(--awh-radius-xs);
    background: color-mix(in srgb, var(--awh-clr-ok) 8%, var(--awh-clr-surface));
    color: color-mix(in srgb, var(--awh-clr-ok) 25%, var(--awh-clr-ink));
  }

  /* The icon is a mask, not an inline SVG, so it takes the token colour and
     costs no markup. */
  .qform__intro::before {
    content: '';
    position: absolute;
    inset-block-start: calc(var(--awh-sp-3) + 1px);
    inset-inline-start: var(--awh-sp-4);
    inline-size: 15px;
    block-size: 15px;
    background: var(--awh-clr-ok);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 4.4a1.3 1.3 0 110 2.6 1.3 1.3 0 010-2.6zM13.3 17.6h-2.6v-6.9h2.6z'/%3E%3C/svg%3E")
      center / contain no-repeat;
  }

  /* The hairline over the voorbehoud follows the notice, not the page. */
  .qform__intro .qform__disclaimer {
    border-block-start-color: color-mix(in srgb, var(--awh-clr-ok) 25%, transparent);
    color: color-mix(in srgb, var(--awh-clr-ok) 20%, var(--awh-clr-ink-muted));
  }

  /* 3. The upsell strip drops the peach fill. The orange model code is enough
        to mark it as a suggestion, and the fill was competing with the primary
        button directly below it. */
  .qbijp--strip {
    background: none;
    border-block-end: 1px solid var(--awh-clr-line);
  }

  /* 4. Focus. The prototype's --clr-focus is #1a73e8, which is Chrome's own
        blue: correct for contrast, wrong for a warm palette, and it landed on
        the close button every time the panel opened because opening moves focus
        there. Focus now goes to the panel itself — no ring on a container — and
        the first Tab reaches the close button with a proper one, in ink rather
        than blue. */
  .qmodal__paneel:focus {
    outline: none;
  }

  .qmodal :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--awh-clr-ink);
    outline-offset: 2px;
  }

  /* 5. Long variant lines. "4000x1200 / Zwart (verzinkt + RAL 9005)" is one
        mono string that has to break somewhere; without this it breaks mid-code
        or forces the column wider. */
  .qsam__variant,
  .qsam__inbegrepen {
    overflow-wrap: anywhere;
  }

  /* 6. "Nog een product toevoegen" was being clipped by the column's own
        scroll. It is the second action in the panel and must stay reachable. */
  .qmodal__samkolom {
    padding-block-end: var(--awh-sp-5);
  }

  /* 7. The summary column loses its fill too. With the intro and the upsell
        strip now on paper it was the last flat slab of grey, colouring half the
        dialog for no reason beyond "this part is different". The hairline where
        the two columns meet already says that, and the sticky total carries the
        weight. One surface for the whole panel. */
  .qmodal__samkolom {
    background: none;
  }

  /* 8. "Nog een product toevoegen" read as an empty text field — a white box
        with a thin border and a left-aligned label, sitting directly under the
        total. That is this port's own doing: the prototype uses a <button>,
        which centres its label for free, and this became an <a> so it could be
        a real link. It is the second action in the panel and now looks like an
        action. */
  .qmodal__verder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--awh-sp-2);
    background: none;
    border-color: var(--awh-clr-line-strong);
    text-decoration: none;
  }

  .qmodal__verder:hover {
    background: var(--awh-clr-surface);
    border-color: var(--awh-clr-ink);
  }

  /* 9. A scrollable list with nothing to say so.

        Three lines in a quote overflow the column, and macOS hides overlay
        scrollbars until you scroll — so the third item is simply sliced through
        and reads as a rendering fault rather than as "there is more". The class
        is set from #render, because CSS cannot ask whether a box overflows. */
  .qmodal__samkolom .qsam__items.is-scrollable {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }

  /* 10. The suggestion row collapses from its own heading. Open by default —
         a suggestion behind a closed disclosure is a suggestion nobody sees —
         with a section setting for merchants who would rather it started shut.
         The heading was a <p>; as a button it needs the chrome reset and the
         chevron pushed to the end, and it loses its bottom margin when closed
         so the collapsed strip is a single tidy line. */
  .qbijp__titel {
    inline-size: 100%;
    text-align: start;
    cursor: pointer;
  }

  .qbijp__chev {
    margin-inline-start: auto;
    color: var(--awh-clr-ink-muted);
    transition: rotate var(--awh-dur-fast) var(--awh-ease-out);
  }

  .qbijp__titel[aria-expanded='false'] {
    margin-block-end: 0;
  }

  .qbijp__titel[aria-expanded='false'] .qbijp__chev {
    rotate: -90deg;
  }

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

  /* 11. The quote line, reworked.

         It was a title over four lines of small muted mono — the raw variant
         string wrapping to two, then every included choice, then the
         disclosure, then the price. The price, the one thing being scanned
         for, sat last and lightest. Now: title, one meta line, one disclosure
         holding every choice, price. Ink rather than muted, because a summary
         a customer is asked to check has to be readable. */
  .qsam__variant {
    font-size: var(--awh-fs-2xs);
    color: var(--awh-clr-ink);
  }

  .qsam__prijs {
    font-size: var(--awh-fs-sm);
    font-weight: 700;
    color: var(--awh-clr-ink);
  }

  .qsam__addons-knop {
    color: var(--awh-clr-ink-muted);
  }

  /* 12. Skeleton rows, so the panel opens at the height it will keep.
         `prefers-reduced-motion` drops the shimmer but keeps the blocks. */
  .qsam__skelet {
    display: block;
    border-radius: var(--awh-radius-xs);
    background: linear-gradient(
      90deg,
      var(--awh-clr-line) 0%,
      var(--awh-clr-surface-sunken) 40%,
      var(--awh-clr-line) 80%
    );
    background-size: 300% 100%;
    animation: awh-skelet 1.4s ease-in-out infinite;
  }

  .qsam__item--skelet {
    pointer-events: none;
  }

  .qsam__item--skelet .qsam__body {
    display: grid;
    gap: var(--awh-sp-2);
  }

  .qsam__skelet--titel { block-size: 14px; inline-size: 70%; }
  .qsam__skelet--regel { block-size: 11px; inline-size: 90%; }
  .qsam__skelet--prijs { block-size: 16px; inline-size: 40%; }

  @keyframes awh-skelet {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .qsam__skelet { animation: none; }
  }

  /* 13. Busy buttons. Both the add-to-quote on the product page and the submit
         here are round trips; disabling alone reads as a dead click. The label
         stays put and a spinner takes the arrow's place, so the button does not
         change width mid-press. */
  .btn.is-busy {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  .btn.is-busy > * {
    visibility: hidden;
  }

  .btn.is-busy::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 18px;
    block-size: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentcolor;
    border-block-start-color: transparent;
    border-radius: 50%;
    color: var(--awh-clr-dark-ink, #fff);
    animation: awh-spin 0.7s linear infinite;
  }

  @keyframes awh-spin {
    to { rotate: 360deg; }
  }

  @media (prefers-reduced-motion: reduce) {
    .btn.is-busy::after { animation-duration: 2.4s; }
  }

  /* --------------------------------------------------------------------------
     The quote as a page, not a panel
     For anyone who lands on /cart directly. Ported from styles/offerte.css
     lines 815-880.
     -------------------------------------------------------------------------- */

  /* --------------------------------------------------------------------------
     /offerte
     -------------------------------------------------------------------------- */

  .offerte__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .offerte__samenvatting {
    position: sticky;
    top: 108px;
    padding: var(--awh-sp-5);
    border: 1px solid var(--awh-clr-line);
    border-radius: var(--awh-radius-sm);
    background: var(--awh-clr-surface-sunken);
  }

  .offerte__sam-titel {
    margin-block-end: var(--awh-sp-4);
    font-size: var(--awh-fs-lg);
  }

  .offerte__lijst {
    display: grid;
    gap: var(--awh-sp-4);
    margin: 0 0 var(--awh-sp-5);
    padding: 0;
    list-style: none;
  }

  .offerte__leeg {
    max-inline-size: var(--awh-measure);
  }

  .offerte__leeg-actie {
    margin-block-start: var(--awh-sp-6);
  }

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

    /* Summary first on a phone: confirm what you are requesting before being
       asked to type anything. */
    .offerte__samenvatting {
      position: static;
      order: -1;
    }
  }

  /* --------------------------------------------------------------------------
     BLOCK: qbijp — the rest of the model family, inside the quote panel

     AW 10.76 is a schuifpoort, a draaipoort and a looppoort. Somebody who has
     just added the schuifpoort is one tap from the matching looppoort, at the
     only moment they are certainly thinking about the set.

     Sits above the two columns rather than inside the summary: on a phone the
     summary is collapsed behind a toggle by default, and a suggestion nobody
     sees is not a suggestion.
     -------------------------------------------------------------------------- */

  /* 14. The summary column on a phone.

         `.qmodal__samkolom .qsam__items` is `flex: 1 1 auto; min-block-size: 0;
         overflow-y: auto` — right on desktop, where the column has a definite
         height and the list takes the space left over between the title and
         the totals. On a phone the column is `height: auto`, so there is no
         leftover space to take, `min-block-size: 0` lets the list collapse to
         nothing, and `overflow-y: auto` then clips what is inside it.

         Measured at 500px: `.qsam__items` 0px tall with a 135px item inside it,
         and `.qmodal__verder` starting at 390 while `.qsam__totalen` still ran
         to 423 — which is the "no items, and Add another product sitting on top
         of All prices include VAT" in the report.

         So on a phone the column stops being a scroller. The list takes its
         natural height and the panel behind it scrolls, which is what a sheet
         should do anyway. */
  @media (max-width: 900px) {
    .qmodal__samkolom {
      overflow: visible;
    }

    .qmodal__samkolom .qsam {
      flex: none;
      min-block-size: auto;
    }

    .qmodal__samkolom .qsam__items {
      flex: none;
      min-block-size: auto;
      overflow: visible;
      padding-inline-end: 0;
      scrollbar-gutter: auto;
    }

    /* The fade marks a scroll edge; there is no scroller here to mark. */
    .qmodal__samkolom .qsam__items.is-scrollable {
      mask-image: none;
    }
  }

  /* iOS Safari zooms the whole page in when a field takes focus and its text
     is smaller than 16px — and it does not zoom back out afterwards, so the
     visitor is left scrolling sideways through the rest of the form. Nothing
     here is a rendering bug; 16px is simply the threshold Apple picked.

     Only on touch pointers, so the desktop keeps the type size the design asks
     for. Written at the end of the file so it lands after the rules it raises,
     rather than relying on where this snippet falls in the compiled bundle. */
  @media (pointer: coarse) {
    .qveld input,
    .qveld select,
    .qveld textarea {
      font-size: 16px;
    }
  }
/* END_SNIPPET:awh-quote-styles */

/* START_SNIPPET:awh-tokens (INDEX:256) */
:root {
    /* --- brand ------------------------------------------------------------
       #EB5B25 verified from the vector logo artwork extracted from AW's own
       print catalogue. NOT the #F97316 (Tailwind orange-500) that the AW
       Hekken Shopify theme currently uses by accident. */
    --awh-orange: #eb5b25;
    --awh-orange-deep: #c9491a;
    --awh-orange-tint: #fdf0ea;

    /* --- neutrals ---------------------------------------------------------
       Anthracite is the RAL 7016 family — the colour AW actually powder-coats
       its gates and doors. The light ground is cool stone, deliberately not
       the warm cream that reads as generic. */
    --awh-anthracite: #23282b;
    --awh-anthracite-soft: #2f3538;
    --awh-steel: #5a6367;
    --awh-steel-light: #8b9297;
    --awh-concrete: #e4e2dd;
    --awh-paper: #f2f1ee;
    --awh-paper-light: #f7f6f4;
    --awh-white: #ffffff;

    /* --- semantic roles --------------------------------------------------- */
    --awh-clr-bg: var(--awh-paper);
    --awh-clr-bg-alt: var(--awh-paper-light);
    --awh-clr-surface: var(--awh-white);
    --awh-clr-surface-sunken: var(--awh-concrete);
    --awh-clr-ink: var(--awh-anthracite);
    --awh-clr-ink-muted: var(--awh-steel);
    --awh-clr-ink-inverse: var(--awh-white);
    --awh-clr-line: var(--awh-concrete);
    --awh-clr-line-strong: #cfccc5;
    --awh-clr-accent: var(--awh-orange);
    --awh-clr-accent-hover: var(--awh-orange-deep);
    --awh-clr-accent-ink: var(--awh-white);
    --awh-clr-dark-bg: var(--awh-anthracite);
    --awh-clr-dark-surface: var(--awh-anthracite-soft);
    --awh-clr-dark-ink: #edeae5;
    --awh-clr-dark-ink-muted: #a7adb1;
    --awh-clr-dark-line: #3a4145;
    --awh-clr-ok: #2e7d5b;
    --awh-clr-focus: #1a73e8;

    /* --- type -------------------------------------------------------------
       Archivo is a variable font with a width axis; the display role uses the
       expanded end for an engineered, machine-cut feel that echoes the hard
       skewed geometry of the AW logo mark. IBM Plex Mono carries the codes
       that are native to this business: RAL 7016, AW 10.06 DP, MakroPro 100. */
    --awh-font-display: 'AwhArchivo', Archivo, system-ui, sans-serif;
    --awh-font-body: 'AwhArchivo', Archivo, system-ui, sans-serif;
    --awh-font-mono: 'AwhPlexMono', 'IBM Plex Mono', ui-monospace, monospace;

    --awh-wdth-display: 112;
    --awh-wdth-body: 100;

    /* 1.25 scale */
    --awh-fs-3xs: 0.6875rem; /* 11 */
    --awh-fs-2xs: 0.75rem; /* 12 */
    --awh-fs-xs: 0.875rem; /* 14 */
    --awh-fs-sm: 0.9375rem; /* 15 */
    --awh-fs-md: 1rem; /* 16 */
    --awh-fs-lg: 1.25rem; /* 20 */
    --awh-fs-xl: 1.5625rem; /* 25 */
    --awh-fs-2xl: 1.9375rem; /* 31 */
    --awh-fs-3xl: 2.4375rem; /* 39 */
    --awh-fs-4xl: 3.0625rem; /* 49 */
    --awh-fs-5xl: 3.8125rem; /* 61 */

    --awh-lh-tight: 1.05;
    --awh-lh-snug: 1.2;
    --awh-lh-normal: 1.5;
    --awh-lh-relaxed: 1.65;

    --awh-ls-display: -0.022em;
    --awh-ls-tight: -0.012em;
    --awh-ls-mono: 0.08em;

    --awh-measure: 68ch;
    --awh-measure-short: 46ch;

    /* --- space (4px base) -------------------------------------------------- */
    --awh-sp-1: 0.25rem;
    --awh-sp-2: 0.5rem;
    --awh-sp-3: 0.75rem;
    --awh-sp-4: 1rem;
    --awh-sp-5: 1.25rem;
    --awh-sp-6: 1.5rem;
    --awh-sp-7: 1.75rem;
    --awh-sp-8: 2rem;
    --awh-sp-10: 2.5rem;
    --awh-sp-12: 3rem;
    --awh-sp-14: 3.5rem;
    --awh-sp-16: 4rem;
    --awh-sp-20: 5rem;
    --awh-sp-24: 6rem;
    --awh-sp-32: 8rem;

    --awh-section-y: clamp(3.5rem, 7vw, 6.5rem);

    /* --- layout ------------------------------------------------------------ */
    --awh-container: 1280px;
    --awh-container-wide: 1440px;
    --awh-gutter: clamp(1rem, 4vw, 2.5rem);

    /* --- geometry ----------------------------------------------------------
       Squarer than the rounded-everything consumer web. Closer to fabricated
       metal. Pills are reserved for buttons only. */
    --awh-radius-xs: 2px;
    --awh-radius-sm: 4px;
    --awh-radius-md: 6px;
    --awh-radius-pill: 999px;

    --awh-shadow-sm: 0 1px 2px rgb(35 40 43 / 0.06);
    --awh-shadow-md: 0 2px 4px rgb(35 40 43 / 0.05), 0 8px 24px rgb(35 40 43 / 0.06);
    --awh-shadow-lg: 0 4px 8px rgb(35 40 43 / 0.06), 0 20px 48px rgb(35 40 43 / 0.1);

    /* --- the slat motif ----------------------------------------------------
       A spijlenhek drawn to scale: bar width to gap ratio taken from AW's own
       fencing. Used for section dividers and the hero reveal. */
    --awh-slat-bar: 5px;
    --awh-slat-gap: 11px;
    --awh-slat-period: 16px; /* bar + gap */
    --awh-slat-band-h: 26px;

    /* --- motion ------------------------------------------------------------ */
    --awh-dur-fast: 130ms;
    --awh-dur-base: 220ms;
    --awh-dur-slow: 380ms;
    --awh-dur-gate: 700ms;
    --awh-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --awh-ease-gate: cubic-bezier(0.16, 0.84, 0.44, 1);

    /* --- z ------------------------------------------------------------------ */
    --awh-z-header: 100;
    --awh-z-mega: 110;
    --awh-z-scrim: 190;
    --awh-z-drawer: 200;

    /* --- Horizon overrides --------------------------------------------------
       The only two places we change Horizon's own variables rather than adding
       ours. Both are values Horizon hardcodes that the prototype sets. */
    --animation-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --narrow-page-width: 80rem; /* Horizon ships 90rem (~1400px); AW is 1280 */
  }

  /* Horizon generates every type size as clamp(min, Xvw, max)
     (theme-styles-variables.liquid:304). The prototype uses fixed rem, so the
     two agree at desktop and diverge on every heading as the viewport narrows.
     Pinned to the prototype's ladder. */
  :root {
    --font-size--3xs: var(--awh-fs-3xs);
    --font-size--2xs: var(--awh-fs-2xs);
    --font-size--xs: var(--awh-fs-xs);
    --font-size--sm: var(--awh-fs-sm);
    --font-size--md: var(--awh-fs-md);
    --font-size--lg: var(--awh-fs-lg);
    --font-size--xl: var(--awh-fs-xl);
    --font-size--2xl: var(--awh-fs-2xl);
    --font-size--3xl: var(--awh-fs-3xl);
    --font-size--4xl: var(--awh-fs-4xl);
    --font-size--5xl: var(--awh-fs-5xl);
    --font-size--paragraph: var(--awh-fs-md);
    --font-size--h1: var(--awh-fs-5xl);
    --font-size--h2: var(--awh-fs-4xl);
    --font-size--h3: var(--awh-fs-3xl);
    --font-size--h4: var(--awh-fs-2xl);
    --font-size--h5: var(--awh-fs-xl);
    --font-size--h6: var(--awh-fs-lg);
    --font-heading--family: var(--awh-font-display);
    --font-body--family: var(--awh-font-body);
  }

  /* Section-level theme flip. Applied to any block that sits on anthracite,
     so components inside never need to know which ground they are on. */
  .awh-is-dark {
    --awh-clr-bg: var(--awh-clr-dark-bg);
    --awh-clr-surface: var(--awh-clr-dark-surface);
    --awh-clr-surface-sunken: #1b1f22;
    --awh-clr-ink: var(--awh-clr-dark-ink);
    --awh-clr-ink-muted: var(--awh-clr-dark-ink-muted);
    --awh-clr-line: var(--awh-clr-dark-line);
    --awh-clr-line-strong: #4a5155;
  }
/* END_SNIPPET:awh-tokens */

/* START_SNIPPET:background-media (INDEX:257) */
.background-image-container {
    overflow: hidden;
    position: absolute;
    inset: 0;
    opacity: var(--image-opacity);
  }

  .background-image-container img,
  .background-image-container svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .background-image-fit img,
  .background-image-fit svg {
    object-fit: contain;
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:258) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

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

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:259) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:buy-buttons-styles (INDEX:264) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) shopify-accelerated-checkout {
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
  }

  .product-form-text__error {
    display: flex;
    flex: 1 0 100%;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
    color: var(--color, var(--color-foreground));
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    padding-inline: var(--theme-drawer-padding);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color, var(--color-foreground));
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
       where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:265) */
.card-gallery {
    position: relative;
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  @container (max-width: 70px) {
    .card-gallery:hover .quick-add__button {
      display: none;
    }
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: block;
  }

  .product-card-gallery__title-placeholder .title-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
  }

  .card-gallery[data-image-ratio='landscape'] .product-card-gallery__title-placeholder .title-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:card-hover-effect-styles (INDEX:266) */
.product-card:hover,
  .collection-card:hover,
  .predictive-search-results__card:hover {
    z-index: var(--layer-raised);
  }
/* END_SNIPPET:card-hover-effect-styles */

/* START_SNIPPET:cart-bubble (INDEX:267) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--cart-bubble-text, var(--cart-bubble-text-fallback));
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--cart-bubble-background, var(--cart-bubble-background-fallback));
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-disclosure-tooltip (INDEX:268) */
.cart-disclosure-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
  }

  .cart-disclosure-tooltip__button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    color: var(--color-foreground-secondary);
    line-height: 1;
    transition: color var(--animation-speed) var(--animation-easing);
    cursor: pointer;
  }

  .cart-items__title-row .cart-disclosure-tooltip {
    position: static;
    align-self: flex-start;
    width: 1em;
    height: 1em;
    margin-block-start: calc((1lh - 1em) / 2 + 0.3rem);
    line-height: calc(var(--font-size--md) * var(--font-paragraph--line-height));
  }

  .cart-page .cart-items__title-row .cart-disclosure-tooltip {
    margin-block-start: calc((1lh - 1em) / 2);
  }

  .cart-items__title-row .cart-disclosure-tooltip__button {
    position: relative;
    justify-content: center;
    width: 1em;
    height: 1em;
  }

  .cart-items__title-row .cart-disclosure-tooltip__button::before {
    content: '';
    position: absolute;
    inset-block: calc((1em - var(--minimum-touch-target)) / 2);
    inset-inline-start: 0;
    inset-inline-end: calc(1em - var(--minimum-touch-target));
  }

  .cart-disclosure-tooltip__button:hover {
    color: var(--color-foreground);
  }

  .cart-disclosure-tooltip__button .svg-wrapper,
  .cart-disclosure-tooltip__button .svg-wrapper > svg {
    width: 1em;
    height: 1em;
  }

  .cart-disclosure-tooltip__popover {
    --cart-disclosure-tooltip-popover-max-width: 280px;
    --cart-disclosure-tooltip-popover-spacing: 8px;
    --cart-disclosure-tooltip-popover-offset-block: -4px;
    --cart-disclosure-tooltip-popover-viewport-margin: 16px;
    --cart-disclosure-tooltip-symbol-inset-inline: var(--padding-md);
    --cart-disclosure-tooltip-popover-native-fallback-top: calc(
      anchor(bottom) + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );
    --cart-disclosure-tooltip-popover-fixed-fallback-top: calc(
      (var(--anchor-top) + var(--anchor-height)) * 1px + var(--cart-disclosure-tooltip-popover-spacing) +
        var(--cart-disclosure-tooltip-popover-offset-block)
    );

    inset: unset;
    top: var(--cart-disclosure-tooltip-popover-top, var(--cart-disclosure-tooltip-popover-native-fallback-top));
    left: max(
      var(--cart-disclosure-tooltip-popover-viewport-margin),
      min(
        calc(anchor(left) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
        calc(
          100vw - var(--cart-disclosure-tooltip-popover-max-width) -
            var(--cart-disclosure-tooltip-popover-viewport-margin)
        )
      )
    );
    min-inline-size: 240px;
    max-inline-size: var(--cart-disclosure-tooltip-popover-max-width);
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    overflow: hidden;
  }

  @supports not (position-anchor: --cart-disclosure-trigger) {
    .cart-disclosure-tooltip__popover {
      position: fixed;
      top: var(--cart-disclosure-tooltip-popover-fixed-fallback-top);
      left: max(
        var(--cart-disclosure-tooltip-popover-viewport-margin),
        min(
          calc((var(--anchor-left) * 1px) - var(--cart-disclosure-tooltip-symbol-inset-inline)),
          calc(
            100vw - var(--cart-disclosure-tooltip-popover-max-width) -
              var(--cart-disclosure-tooltip-popover-viewport-margin)
          )
        )
      );
    }
  }

  .cart-disclosure-tooltip__popover:popover-open {
    opacity: 1;
    translate: 0 0;
  }

  .cart-disclosure-tooltip__list {
    display: flex;
    flex-direction: column;
  }

  .cart-disclosure-tooltip__row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding-block: var(--padding-xs);
    padding-inline: var(--cart-disclosure-tooltip-symbol-inset-inline, var(--padding-md)) var(--padding-md);
    font-size: var(--font-size--sm);
    color: var(--color-foreground);
    background: var(--color-background);
    overflow-wrap: break-word;
  }

  .cart-disclosure-tooltip__row:has(> .cart-disclosure-tooltip__symbol) {
    --cart-disclosure-tooltip-symbol-height: 1em;
    --cart-disclosure-tooltip-symbol-slot-width: calc(
      var(--cart-disclosure-tooltip-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );

    display: grid;
    grid-template-columns: var(--cart-disclosure-tooltip-symbol-slot-width) minmax(0, 1fr);
    min-inline-size: 0;
  }

  .cart-disclosure-tooltip__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-tooltip-symbol-height, 1em);
    margin: 0;
    object-fit: contain;
    translate: 0 1px;
  }

  .cart-disclosure-tooltip__title {
    min-width: 0;
    margin: 0;
    line-height: var(--line-height--body-tight);
  }

  .cart-disclosure-tooltip__dialog {
    display: contents;
  }

  .cart-disclosure-modal {
    --cart-disclosure-modal-width: 28rem;
    --cart-disclosure-modal-max-height: 72dvh;
    --cart-disclosure-modal-border-radius: min(var(--style-border-radius-popover), 8px);

    position: fixed;
    top: 50%;
    left: 50%;
    width: min(var(--cart-disclosure-modal-width), calc(100vw - (var(--padding-2xl) * 2)));
    max-height: min(var(--cart-disclosure-modal-max-height), calc(100dvh - (var(--padding-2xl) * 2)));
    padding: 0;
    margin: 0;
    color: var(--color-foreground);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--cart-disclosure-modal-border-radius);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    isolation: isolate;
    translate: -50% -50%;
  }

  .cart-disclosure-modal.dialog-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .cart-disclosure-modal.dialog-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing);
  }

  .cart-disclosure-modal::backdrop {
    backdrop-filter: brightness(0.65) blur(2px);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-60));
  }

  .cart-disclosure-modal__content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    max-height: inherit;
    padding: var(--padding-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .cart-disclosure-modal .cart-disclosure-modal__heading {
    margin: 0;
    padding-inline-end: var(--minimum-touch-target);
    font-size: var(--font-size--2xl);
    font-weight: 700;
    line-height: 1.15;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .cart-disclosure-modal__item {
    --cart-disclosure-modal-symbol-height: 1.5em;
    --cart-disclosure-modal-symbol-slot-width: calc(
      var(--cart-disclosure-modal-symbol-height) * var(--cart-disclosure-symbol-aspect-ratio, 1)
    );
    --cart-disclosure-modal-heading-offset: calc((var(--cart-disclosure-modal-symbol-height) - 1em) / 2);

    display: grid;
    grid-template-columns: var(--cart-disclosure-modal-symbol-slot-width) minmax(0, 1fr);
    align-items: flex-start;
    column-gap: var(--gap-xs);
    row-gap: var(--gap-xs);
    min-width: 0;
    font-size: var(--font-size--md);
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:not(:has(> .cart-disclosure-modal__symbol)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .cart-disclosure-modal__symbol {
    justify-self: center;
    width: auto;
    max-inline-size: 100%;
    height: var(--cart-disclosure-modal-symbol-height);
    margin: 0;
    object-fit: contain;
  }

  .cart-disclosure-modal__item-content {
    display: contents;
  }

  .cart-disclosure-modal__item-heading {
    margin: 0;
    font-size: inherit;
    font-weight: 700;
    line-height: 1;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__item:has(> .cart-disclosure-modal__symbol) .cart-disclosure-modal__item-heading {
    grid-column: 2;
    padding-block-start: var(--cart-disclosure-modal-heading-offset);
  }

  .cart-disclosure-modal__body {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    overflow-wrap: break-word;
  }

  .cart-disclosure-modal__body > * {
    margin-block: 0;
  }

  .cart-disclosure-modal__close {
    position: absolute;
    inset-block-start: var(--padding-sm);
    inset-inline-end: var(--padding-sm);
    z-index: var(--layer-raised);
    overflow: visible;
  }

  @media screen and (min-width: 750px) {
    .cart-disclosure-modal__content {
      padding-block: var(--padding-2xl);
      padding-inline: var(--padding-2xl);
    }
  }

  @media screen and (max-width: 749px) {
    .cart-disclosure-modal {
      position: fixed;
      top: auto;
      left: 0;
      inset-block-start: auto;
      inset-block-end: 0;
      inset-inline: 0;
      width: 100%;
      height: fit-content;
      max-width: 100%;
      max-height: 100dvh;
      margin: auto 0 0;
      border-start-start-radius: var(--cart-disclosure-modal-border-radius);
      border-start-end-radius: var(--cart-disclosure-modal-border-radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      overflow: clip;
      translate: 0 0;
    }

    .cart-disclosure-modal__content {
      max-height: min(var(--modal-max-height), 100dvh);
    }
  }
/* END_SNIPPET:cart-disclosure-tooltip */

/* START_SNIPPET:cart-drawer (INDEX:269) */
cart-drawer-component {
    --cart-drawer-padding: var(--theme-drawer-padding);
    --font-paragraph--line-height: 1;
    display: contents;
  }

  .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .cart-drawer__inner > .cart-items-component {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  .cart-drawer__content {
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer__close-button--empty {
    margin-inline-start: auto;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .theme-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: auto;
  }

  .cart-drawer--empty .cart-drawer__items {
    padding-inline: 0;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  cart-drawer-component:not(:has(.cart-form)) .cart-drawer__items {
    padding-inline: 0;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .theme-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }
/* END_SNIPPET:cart-drawer */

/* START_SNIPPET:cart-items-component (INDEX:270) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer),
    html:active-view-transition-type(fill-cart-drawer) {
      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:271) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-items__wrapper {
    display: flex;
    flex-direction: column;
  }

  .cart-page--empty .cart-items__wrapper {
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-items__wrapper--drawer-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  .cart-items__details {
    grid-area: details;
    min-width: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__product-info {
    min-width: 0;
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row.adding {
    interpolate-size: allow-keywords;
    overflow: hidden;
    animation: addRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
  }

  @keyframes addRow {
    0% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }

    100% {
      opacity: 1;
      height: auto;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    margin-bottom: var(--cart-items-gap);
  }

  .cart-items--dividers .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title-row {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    max-width: 100%;
    min-width: 0;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: 0;
    min-width: 0;
    overflow-wrap: break-word;
  }

  .cart-items__variants {
    display: block;
  }

  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }

  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    margin-inline: auto;
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

  .cart-item__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
    margin-block-start: var(--margin-3xs);
  }

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart__subtotal-container, .cart__total-container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart__subtotal-container,
  .cart__subtotal-container * {
    font-size: var(--font-size--sm);
  }

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

  .cart__total-label {
    font-size: var(--font-size--sm);
  }

  .cart__total-value {
    font-size: var(--font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:272) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--margin-xl);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: var(--color-foreground-subdued);
  }

  .cart-totals__tax-note a {
    color: var(--color-foreground-subdued);
    text-decoration-line: underline;
    text-decoration-color: currentColor;

    &:hover {
      text-decoration-color: transparent;
    }
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

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

  .cart-discounts__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:cart-typography-styles (INDEX:273) */
.cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }
/* END_SNIPPET:cart-typography-styles */

/* START_SNIPPET:chat-drawer (INDEX:274) */
/* Pin the chat's mobile/desktop boundary so the theme and the chat agree
     on where standalone mode kicks in. Must stay in sync with the @media
     query below — @shopify/storefront-components reads this value once at
     init and uses it to decide when to force standalone mode. */
  shopify-chat {
    --shopify-chat-breakpoint: 768px;
  }

  shopify-chat[mode='managed'] {
    position: static;
    height: 100%;
  }

  .theme-drawer__dialog:has(shopify-chat[mode='standalone'][open]) {
    z-index: calc(var(--layer-menu-drawer) + 1);
  }

  /* Keep the panel rendered while closed so <shopify-chat>'s position-fixed
     "Ask anything" launcher stays visible. */
  .theme-drawer__dialog.chat-drawer:has(shopify-chat:defined) {
    display: flex;
  }
/* END_SNIPPET:chat-drawer */

/* START_SNIPPET:checkbox-styles (INDEX:275) */
.checkbox {
    --checkbox-path-opacity: 0;
    --checkbox-cursor: pointer;

    position: relative;
    display: flex;
    align-items: center;

    &.checkbox--disabled {
      --checkbox-cursor: not-allowed;
    }
  }

  .checkbox:has(.checkbox__input:checked) {
    --checkbox-path-opacity: 1;
  }

  .checkbox__input {
    position: absolute;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;

    /* Outline is on the SVG instead, to allow it to have border-radius */
    &:focus-visible {
      outline: none;
    }
  }

  .checkbox__label {
    position: relative;
    display: inline-flex;
    cursor: var(--checkbox-cursor);
    line-height: var(--checkbox-size);
    min-width: var(--minimum-touch-target);
  }

  .checkbox .icon-checkmark {
    height: var(--checkbox-size);
    width: var(--checkbox-size);
    flex-shrink: 0;
    border: var(--checkbox-border);
    border-radius: var(--checkbox-border-radius);
    background-color: var(--color-background);
  }

  .checkbox__input:focus-visible + .checkbox__label .icon-checkmark {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
  }

  .checkbox__input:disabled + .checkbox__label .icon-checkmark {
    background-color: var(--input-disabled-background-color);
    border-color: var(--input-disabled-border-color);
  }

  .checkbox__label-text {
    padding-inline-start: var(--checkbox-label-padding);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .checkbox .icon-checkmark path {
    stroke: var(--color-background);
    opacity: var(--checkbox-path-opacity);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  .checkbox__input:disabled + .checkbox__label {
    color: var(--input-disabled-text-color);
  }
/* END_SNIPPET:checkbox-styles */

/* START_SNIPPET:collection-card (INDEX:277) */
.collection-card {
    --fixed-card-height: var(--height-small);

    width: 100%;
    position: relative;
    height: 100%;
    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__link {
    position: absolute;
    inset: 0;

    /* allows focus outline to have radius in supported browsers */
    border-radius: var(--border-radius);
  }

  .collection-card__inner {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--layer-flat);
    pointer-events: none;
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    --flex-wrap: wrap;

    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    max-width: 100%;
    gap: var(--gap);
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    .collection-card__image {
      aspect-ratio: 99;
      height: 100%;
    }

    .collection-card__inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .collection-card__content {
      flex-shrink: 0;
    }

    &:not(.collection-card--image-bg) .collection-card__content {
      height: auto;
    }

    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:collection-wrapper-styles (INDEX:278) */
/* ------------------------------------------------------------------------------ */

  /* Collection Wrapper - Shared layout CSS for collection and search pages */

  /* ------------------------------------------------------------------------------ */

  .collection-wrapper {
    @media screen and (min-width: 750px) {
      --facets-vertical-col-width: 6;

      grid-template-columns:
        1fr repeat(
          var(--centered-column-number),
          minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
        )
        1fr;
    }

    @media screen and (min-width: 990px) {
      --facets-vertical-col-width: 5;
    }
  }

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

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

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

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

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

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

  .collection-wrapper--full-width .main-collection-grid__title {
    margin-left: var(--page-margin);
  }

  .collection-wrapper--full-width-on-mobile .main-collection-grid__title {
    @media screen and (max-width: 749px) {
      margin-left: var(--page-margin);
    }
  }

  .collection-wrapper--grid-full-width .facets--vertical:not(.facets--drawer) {
    @media screen and (min-width: 750px) {
      padding-inline-start: max(var(--padding-sm), var(--padding-inline-start));
    }
  }

  .collection-wrapper:has(.product-grid-mobile--large) .facets-mobile-wrapper.facets-controls-wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .collection-wrapper:has(> .facets--horizontal) .facets__panel[open] {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-open-z-index);
    }
  }
/* END_SNIPPET:collection-wrapper-styles */

/* START_SNIPPET:deferred-media-product-model-styles (INDEX:281) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }

  .product-media product-model {
    position: absolute;
  }

  .product-media-container--model {
    /* Usefull when view in your space is shown */
    flex-direction: column;
  }

  .shopify-model-viewer-ui__controls-area {
    bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
  }

  /* If the product media is already providing an image cover, hide images provided by sibling product-model */
  .product-media__image ~ product-model .deferred-media__poster-image {
    display: none;
  }

  /* If the product model is playing, hide the preview image */
  .product-media-container:has(product-model .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  product-model {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  product-model model-viewer,
  product-model > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  product-model > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  product-model > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .button-shopify-xr {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-md);
  }

  .button-shopify-xr > svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    margin-inline-end: var(--margin-md);
  }

  .button-shopify-xr[data-shopify-xr-hidden] {
    display: none;
  }

  product-model .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  product-model .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:deferred-media-product-model-styles */

/* START_SNIPPET:deferred-media-video-styles (INDEX:282) */
.product-media deferred-media {
    position: absolute;
  }

  /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
  .product-media__image ~ deferred-media .deferred-media__poster-image {
    display: none;
  }

  /* If the product media video is playing, hide the preview image */
  .product-media-container:has(deferred-media .deferred-media__playing) .product-media__image {
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  deferred-media {
    /* Height needed to make sure when it's set to be stretched, it takes the full height */
    height: 100%;
    width: 100%;
    position: relative;

    /* The overflow hidden in the deferred-media won't let the button show the focus ring */
    &:has(:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    @supports not selector(:focus-visible) {
      &:has(:focus) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: var(--focus-outline-offset);
      }
    }
  }

  /* Media that have a poster button sibling providing the size should be absolute-positioned.
  Otherwise, it should be a block to rely on its own size */
  deferred-media > .deferred-media__poster-button ~ *:not(template) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Required to make sure the absolute position respects the padding of the wrapper: */
    padding: inherit;
  }

  deferred-media.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  deferred-media > .deferred-media__poster-button {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--video-aspect-ratio, auto);
  }

  deferred-media > .deferred-media__poster-button.deferred-media__playing {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  deferred-media img {
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
  }

  deferred-media iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  deferred-media[data-media-loaded] img {
    opacity: 0;
  }

  deferred-media .deferred-media__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  deferred-media .deferred-media__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

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

  deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    /* only apply this on the video block not product media */
    object-fit: cover;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  .video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:deferred-media-video-styles */

/* START_SNIPPET:dialog-styles (INDEX:283) */
.dialog-modal {
    border: none;
    box-shadow: var(--shadow-popover);

    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      max-width: var(--normal-content-width);
    }

    @media screen and (max-width: 749px) {
      max-width: 100%;
      max-height: 100%;
      height: 100dvh;
      width: 100dvw;
      padding: var(--padding-md);
    }
  }

  .dialog-modal::backdrop {
    transition: backdrop-filter var(--animation-speed) var(--animation-easing);
    backdrop-filter: brightness(1);
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  :where(.dialog-modal)[open] {
    animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
      transition: opacity var(--animation-speed) var(--animation-easing);
    }
  }

  :where(.dialog-modal).dialog-closing {
    animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

    &::backdrop {
      opacity: 0;
    }
  }

  /* stylelint-disable value-keyword-case */
  .dialog-drawer {
    --dialog-drawer-opening-animation: move-and-fade;
    --dialog-drawer-closing-animation: move-and-fade;
  }
  /* stylelint-enable value-keyword-case */

  .dialog-drawer[open] {
    --start-x: var(--custom-transform-from, 100%);
    --end-x: var(--custom-transform-to, 0px);
    --start-opacity: 1;

    animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
  }

  .dialog-drawer[open].dialog-closing {
    --start-x: 0px;
    --end-x: 100%;
    --start-opacity: 1;
    --end-opacity: 1;

    animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
  }
/* END_SNIPPET:dialog-styles */

/* START_SNIPPET:divider (INDEX:284) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:285) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:286) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:287) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }

    /* Single-media cards skip the slideshow wrappers, so stretch the plain
     * media container directly to fill the editorial cell. The multi-media
     * container sits under slideshow-component and is unaffected. */
    .card-gallery > a > .product-media-container {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:288) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 16px;
      --variant-picker-swatch-height: 16px;

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:fly-to-cart-styles (INDEX:289) */
/* Fly to cart animation */
  fly-to-cart {
    --offset-y: 10px;

    position: fixed;
    width: var(--width, 40px);
    height: var(--height, 40px);
    left: 0;
    top: 0;
    z-index: calc(infinity);
    pointer-events: none;
    border-radius: var(--style-border-radius-buttons-primary);
    overflow: hidden;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    opacity: 0;
    background-color: var(--color-foreground);
    translate: var(--start-x, 0) var(--start-y, 0);
    transform: translate(-50%, -50%);
    animation-name: travel-x, travel-y, travel-scale;
    animation-timing-function: var(--x-timing), var(--y-timing), var(--scale-timing);
    animation-duration: 0.6s;
    animation-composition: accumulate;
    animation-fill-mode: both;
  }

  fly-to-cart.fly-to-cart--main {
    --x-timing: cubic-bezier(0.7, -5, 0.98, 0.5);
    --y-timing: cubic-bezier(0.15, 0.57, 0.9, 1.05);
    --scale-timing: cubic-bezier(0.85, 0.05, 0.96, 1);
  }

  fly-to-cart.fly-to-cart--quick {
    --x-timing: cubic-bezier(0, -0.1, 1, 0.32);
    --y-timing: cubic-bezier(0, 0.92, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);

    animation-duration: 0.6s;
  }

  fly-to-cart.fly-to-cart--sticky {
    --x-timing: cubic-bezier(0.98, -0.8, 0.92, 0.5);
    --y-timing: cubic-bezier(0.14, 0.56, 0.92, 1.04);
    --scale-timing: cubic-bezier(0.86, 0.08, 0.98, 0.98);
    --radius: var(--style-border-radius-buttons-primary);

    @media screen and (max-width: 749px) {
      --x-timing: cubic-bezier(0.98, -0.1, 0.92, 0.5);
    }

    animation-duration: 0.8s;
  }

  @keyframes travel-scale {
    0% {
      opacity: var(--start-opacity, 1);
    }

    5% {
      opacity: 1;
    }

    100% {
      border-radius: 50%;
      opacity: 1;
      transform: translate(-50%, calc(-50% + var(--offset-y))) scale(0.25);
    }
  }

  @keyframes travel-x {
    to {
      translate: var(--travel-x, 0) 0;
    }
  }

  @keyframes travel-y {
    to {
      translate: 0 var(--travel-y, 0);
    }
  }
/* END_SNIPPET:fly-to-cart-styles */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:294) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    color: var(--color, var(--color-foreground));
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:297) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

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

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type='radio']):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:298) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:299) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .header-actions__cart-icon .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-bubble.cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:300) */
.icon-caret--forward svg {
    transform: rotate(-90deg);
  }

  .icon-caret--backward svg {
    transform: rotate(90deg);
  }

  .header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

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

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    flex-direction: column;

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

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-overlay);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Submenu header with a centered, clickable title flanked by the back and
     close controls. */
  .menu-drawer__nav-buttons--with-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .menu-drawer__title {
    justify-self: center;
    min-width: 0;
    padding: var(--padding-md) var(--padding-sm);
    color: var(--color-foreground);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

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

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

    @media screen and (min-width: 750px) {
      margin-block-end: var(--margin-lg);
    }
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

    &:hover {
      color: var(--menu-top-level-font-color);
    }
  }

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  /* Match the menu links' focus style: a rectangular outline in the current color.
     These buttons sit flush against the drawer edges, so inset the outline to keep
     it from being clipped. */
  .menu-drawer__close-button.menu-drawer__close-button,
  .menu-drawer__back-button.menu-drawer__back-button {
    border-radius: 0;
    outline-offset: calc(var(--padding-2xs) * -1);
  }

  /* Safari < 16.4 draws the close focus ring via a pseudo-element; keep it
     rectangular there too. */
  .menu-drawer__close-button:focus-visible::after {
    border-radius: 0;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__back-button {
    width: fit-content;
    padding: var(--padding-lg);
    justify-self: start;
  }

  .menu-drawer__nav-buttons--with-title .menu-drawer__close-button {
    justify-self: end;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

  /* Drawer Localization Styles */
  .drawer-localization__button .icon-flag {
    width: var(--menu-localization-font-size, var(--icon-size-sm));
    height: var(--menu-localization-font-size, var(--icon-size-sm));
    clip-path: circle(50%); /* stylelint-disable-line */
    background-position: center;
    background-size: cover;
    margin-inline-end: 4px;
    position: relative;
  }

  .drawer-localization__button .icon-flag::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 var(--size-shadow) var(--color-shadow);
    border-radius: 50%;
  }

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

    &:hover {
      color: var(--color-foreground);
    }
  }

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

  .menu-drawer__localization:not(drawer-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
    right: 20px;
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:306) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:309) */
.facets__bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--variant-picker-swatch-height) / 1.5);
    min-width: 20px;
    padding: 0 6px;
    border-radius: 20px;
    font-family: var(--font-paragraph--family);
    font-size: var(--font-size--xs);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .facets__bubble svg {
    width: 12px;
    height: 12px;
  }

  .show-more__button {
    color: var(--color-foreground);
    cursor: pointer;
  }

  .show-more__button:hover {
    @media screen and (min-width: 750px) {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
    }
  }

  .show-more__label {
    text-align: start;
    font-size: var(--font-size--body-md);
    font-family: var(--font-paragraph--family);
  }

  .show-more__button .svg-wrapper {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .show-more[data-expanded='true'] .show-more__label--more,
  .show-more[data-expanded='false'] .show-more__label--less {
    display: none;
  }

  .show-more__button .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }

  .facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--color-foreground-subdued);
  }

  .facets .checkbox:not(.checkbox--disabled) .checkbox__label-text {
    color: var(--color-foreground-subdued);
  }
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: var(--color-foreground-rgb);
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input:not(:checked) + .facets__pill-label:hover {
    --pill-label-color-rgb: var(--color-foreground-rgb);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:310) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

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

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-foreground);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-foreground-subdued);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

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

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: var(--color-foreground-subdued);
  }

  .is-searching .localization-form__list-item .country {
    color: var(--color-foreground-subdued);
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector--top-shadow::before {
    content: '';
    box-shadow: 0 0 10px var(--color-shadow);
    position: absolute;
    z-index: var(--layer-lowest);
    inset: 0;
    clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
  }

  .language-selector__label {
    flex-shrink: 0;
    color: var(--color-foreground-subdued);
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

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

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:312) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:317) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:318) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
    isolation: isolate;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      )::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)
      ) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:319) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:payment-terms-styles (INDEX:320) */
form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: var(--color, rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text)));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }
/* END_SNIPPET:payment-terms-styles */

/* START_SNIPPET:pills-styles (INDEX:321) */
/* Pills (used in facets and predictive search) */

  .pills__pill {
    --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5-15));

    color: var(--color-foreground);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-sm);
    min-width: 48px;
    padding: 6px 12px;
    border-radius: var(--style-border-radius-pills);
    cursor: pointer;
    background-color: var(--pills-pill-background-color);
    transition: background-color var(--animation-speed) var(--animation-easing);

    &:hover {
      --pills-pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    }

    @media screen and (max-width: 749px) {
      padding: var(--padding-xs) var(--padding-md);
    }
  }

  .pills__pill > .svg-wrapper {
    --close-icon-opacity: 0.4;
    --icon-stroke-width: 1px;

    color: var(--color-foreground);
  }

  .pills__pill--swatch {
    @media screen and (max-width: 749px) {
      padding-inline-start: var(--padding-sm);
    }
  }

  .pills__pill--swatch .swatch {
    margin-right: -4px;
  }

  .pills__pill--desktop-small {
    @media screen and (min-width: 750px) {
      font-size: var(--font-size--xs);
    }
  }
/* END_SNIPPET:pills-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:325) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__inner {
    flex-grow: 1;
    overflow-y: auto;
    padding-block: var(--padding-lg);
    container-type: inline-size;
    color: var(--color-foreground);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: var(--color-foreground-subdued);
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

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

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

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

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

  .predictive-search-results__wrapper-products {
    animation-delay: 50ms;
  }

  /* Resource carousel styles */
  .predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

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

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-styles */

/* START_SNIPPET:price-filter (INDEX:326) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    color: var(--color-foreground-muted);
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:price-styles (INDEX:327) */
.price,
  .compare-at-price,
  .unit-price {
    white-space: nowrap;
  }

  .unit-price {
    display: block;
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note.tax-note.tax-note {
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .tax-note:empty {
    display: none;
  }

  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
    margin-block: 0;
  }

  /* Volume pricing note should match unit-price styling (small, grey text) */
  product-price .volume-pricing-note,
  product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
    display: block;
    font-family: var(--font-body--family);
    font-weight: normal;
    font-size: var(--font-size--xs);
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .compare-at-price {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    text-decoration-line: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
  }

  .price-item__group {
    display: inline-block;
  }
/* END_SNIPPET:price-styles */

/* START_SNIPPET:product-badges-styles (INDEX:329) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card-gallery-zoom-details-styles (INDEX:330) */
.product-grid-view-zoom-out--details {
    display: none;
  }

  .product-grid-view-zoom-out--details .h4,
  .product-grid-view-zoom-out--details span,
  .product-grid-view-zoom-out--details s {
    font-size: var(--font-size--xs);
    font-family: var(--font-paragraph--family);
  }

  .product-grid-view-zoom-out--details span {
    font-weight: 500;
  }

  .product-grid-view-zoom-out--details .h4 {
    line-height: 1.3;
    font-weight: 400;
  }

  .product-grid-view-zoom-out--details > span.h6,
  .product-grid-view-zoom-out--details > div.h6 > product-price {
    display: inline-block;
    line-height: 0;
    margin-top: var(--margin-2xs);
  }

  .product-grid-view-zoom-out--details > span.h6 > *,
  .product-grid-view-zoom-out--details > div.h6 > * > * {
    line-height: 1.2;
  }
/* END_SNIPPET:product-card-gallery-zoom-details-styles */

/* START_SNIPPET:product-card-styles (INDEX:331) */
.product-grid__card.product-grid__card {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--product-card-gap);
    align-items: var(--product-card-alignment);
    text-decoration: none;
    color: var(--color, var(--color-foreground));
    padding-block: var(--padding-block-start) var(--padding-block-end);
    padding-inline: var(--padding-inline-start) var(--padding-inline-end);
    overflow: hidden;
  }

  .product-grid__card .group-block > * {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  /* Collection and product list cards have equal heights */
  :is(.product-grid__item, .resource-list__item) .product-card {
    display: grid;
    height: 100%;
  }

  /* Product card title truncation - applied on mobile regardless of view */
  @media screen and (max-width: 749px) {
    :is(.product-card, .product-grid__card) :is(h4, .h4) {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
    }
  }

  .product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card-styles */

/* START_SNIPPET:product-grid (INDEX:333) */
/* Product grid */
  .product-grid-container {
    display: block;
    width: 100%;
    padding-block: var(--padding-block-start) var(--padding-block-end);

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

  [product-grid-view='default'] {
    --product-grid-gap: 16px;
    --padding-block-start: 24px;
    --padding-block-end: 24px;
    --padding-inline-start: 0px;
    --padding-inline-end: 0px;
  }

  .product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--product-grid-gap);
    margin: auto;
    padding: 0;
    list-style: none;
    isolation: isolate;

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

      grid-template-columns: var(--product-grid-columns-desktop);
    }
  }

  .product-grid :is(h3, p) {
    margin: 0;
  }

  .product-grid__item {
    border: var(--product-card-border-width) solid rgb(var(--color-border-rgb) / var(--product-card-border-opacity));
  }

  [product-grid-view='default'] .product-grid__item {
    padding-block: 0;
  }

  .product-grid--organic[product-grid-view='default'] .product-grid__item {
    height: fit-content;
  }

  [product-grid-view='zoom-out'] .product-grid__card.product-grid__card {
    row-gap: var(--padding-xs);
  }

  [product-grid-view='mobile-single'],
  .product-grid-mobile--large {
    @media screen and (max-width: 749px) {
      grid-template-columns: 1fr;
    }
  }

  ul[product-grid-view='zoom-out'] .product-grid__card > * {
    display: none;
  }

  [product-grid-view='zoom-out'] {
    --product-grid-columns-desktop: repeat(
      10,
      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    :root:active-view-transition-type(product-grid) {
      details[open] floating-panel-component {
        view-transition-name: panel-content;

        .checkbox *,
        .facets__pill-label {
          transition: none;
        }

        .facets--vertical & {
          view-transition-name: none;
        }
      }

      .product-grid {
        view-transition-name: product-grid;
      }

      footer {
        view-transition-name: footer;
      }

      .product-grid__item,
      floating-panel-component {
        transition: none;
      }
    }
  }

  ::view-transition-group(panel-content) {
    z-index: 1;
  }

  ::view-transition-new(product-grid) {
    animation-delay: 150ms;
    animation-name: fadeInUp;
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  results-list[initialized] {
    .product-grid__item {
      transition: opacity var(--animation-speed) var(--animation-easing),
        transform var(--animation-speed) var(--animation-easing);

      @starting-style {
        opacity: 0;
        transform: translateY(10px);
      }
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

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

  /* Product card title truncation - applied only to zoom-out view */
  [product-grid-view='zoom-out'] :is(.product-card, .product-grid__card) :is(h4, .h4) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:334) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

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

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-container-styles (INDEX:335) */
:where(:not(.dialog-zoomed-gallery)) > .product-media-container {
    --slide-width: 100%;

    display: flex;
    aspect-ratio: var(--gallery-aspect-ratio, var(--media-preview-ratio));
    max-height: var(--constrained-height);
    width: var(--slide-width, 100%);

    /* Relative position needed for video and 3d models */
    position: relative;
    overflow: hidden;

    &:where(.constrain-height) {
      /* arbitrary offset value based on average theme spacing and header height */
      --viewport-offset: 400px;
      --constrained-min-height: 300px;
      --constrained-height: max(var(--constrained-min-height), calc(100vh - var(--viewport-offset)));

      margin-right: auto;
      margin-left: auto;
    }

    @supports (--test: round(up, 100%, 1px)) {
      /* width and overflow forces children to shrink to parent width */
      --slide-width: round(up, 100%, 1px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-media-container.constrain-height {
      max-height: none;
    }
  }

  @media screen and (min-width: 750px) {
    .product-media-container.constrain-height {
      --viewport-offset: var(--header-height, 100px);
      --constrained-min-height: 500px;
    }

    body:has(header-component[transparent]) .product-media-container.constrain-height {
      --viewport-offset: 0px;
    }
  }

  .product-media-container img {
    aspect-ratio: inherit;
    object-fit: contain;
  }

  .product-media-container.media-fit-contain img {
    object-position: center center;
  }

  .product-media-container.media-fit {
    --product-media-fit: cover;

    img {
      object-fit: var(--product-media-fit);
    }
  }
/* END_SNIPPET:product-media-container-styles */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:336) */
/* Product Media */
  media-gallery {
    display: block;
    width: 100%;
  }

  :where(media-gallery, .product-grid__item) {
    .media-gallery__grid {
      grid-template-columns: 1fr;
      gap: var(--image-gap);
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--large-first-image .product-media-container:first-child,
    .media-gallery--two-column .product-media-container:only-child {
      /* First child spans 2 columns */
      grid-column: span 2;
    }
  }

  media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  zoom-dialog dialog {
    width: 100vw;
    height: 100vh;
    border: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    background: #fff;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    scrollbar-width: none;

    &[open] {
      opacity: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    &::backdrop {
      background: transparent;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:337) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-recommendations-styles (INDEX:339) */
.product-recommendations {
    display: block;
  }

  .product-recommendations__skeleton-item {
    aspect-ratio: 3 / 4;
    background-color: var(--color-foreground);
    opacity: var(--skeleton-opacity);
    border-radius: 4px;
  }

  @media screen and (max-width: 749px) {
    .product-recommendations__skeleton-item:nth-child(2n + 1) {
      display: none;
    }
  }

  product-recommendations:has([data-has-recommendations='false']) {
    display: none;
  }
/* END_SNIPPET:product-recommendations-styles */

/* START_SNIPPET:quantity-selector-styles (INDEX:340) */
/* Quantity selector */
  .quantity-selector {
    --quantity-selector-width: 124px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);
    flex: 1 1 var(--quantity-selector-width);
    align-self: stretch;
  }

  .product-form-buttons:has(.add-to-cart-button.button-secondary) .quantity-selector {
    border-radius: var(--style-border-radius-buttons-secondary);
  }

  .quantity-selector :is(.quantity-minus, .quantity-plus) {
    /* Unset button styles */
    padding: 0;
    background: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    flex-shrink: 0;
    color: var(--color-input-text);
  }

  .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-inputs);
    border-end-start-radius: var(--style-border-radius-inputs);
  }

  .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-inputs);
    border-end-end-radius: var(--style-border-radius-inputs);
  }

  .product-details .quantity-selector,
  .quick-add-modal .quantity-selector {
    border-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-minus,
  .quick-add-modal .quantity-selector .quantity-minus {
    border-start-start-radius: var(--style-border-radius-buttons-primary);
    border-end-start-radius: var(--style-border-radius-buttons-primary);
  }

  .product-details .quantity-selector .quantity-plus,
  .quick-add-modal .quantity-selector .quantity-plus {
    border-start-end-radius: var(--style-border-radius-buttons-primary);
    border-end-end-radius: var(--style-border-radius-buttons-primary);
  }

  .quantity-selector .svg-wrapper {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .quantity-selector svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  :is(.quantity-minus, .quantity-plus):active .svg-wrapper {
    transform: scale(0.9);
  }

  .quantity-selector input[type='number'] {
    margin: 0;
    text-align: center;
    border: none;
    appearance: none;
    max-width: calc(var(--quantity-selector-width) - var(--minimum-touch-target) * 2);
    border-radius: var(--style-border-radius-buttons);
    color: var(--color-input-text);
    background-color: transparent;
  }

  /* Chrome, Safari, Edge, Opera */
  .quantity-selector input[type='number']::-webkit-inner-spin-button,
  .quantity-selector input[type='number']::-webkit-outer-spin-button {
    appearance: none;
  }

  /* Firefox */
  .quantity-selector input[type='number'] {
    appearance: textfield;
  }
/* END_SNIPPET:quantity-selector-styles */

/* START_SNIPPET:quantity-selector (INDEX:341) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:342) */
#quick-add-dialog {
    display: contents;
  }

  /* Inputs inside the quick-add modal use the global Input Fields settings,
     not any per-block overrides set on the product page. */
  .quick-add-modal .quantity-selector-wrapper {
    --color-input-background: inherit;
    --color-input-text: inherit;
    --color-input-text-rgb: inherit;
    --color-input-border: inherit;
    --style-border-width-inputs: inherit;
    --style-border-radius-inputs: inherit;
    --style-border-radius-buttons-primary: var(--style-border-radius-inputs);
    --style-border-radius-buttons-secondary: var(--style-border-radius-inputs);
  }

  .quick-add-modal .product-details .quantity-selector {
    border-radius: var(--style-border-radius-inputs);
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

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

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:344) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));
    --quick-add-inset-inline-end: max(
      var(--quick-add-right),
      calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg)))
    );
    --quick-add-inset-block-end: max(
      var(--quick-add-bottom),
      calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg)))
    );

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  /* Hide "Add" button when "Choose" button is shown */
  [data-quick-add-button='choose'] add-to-cart-component {
    display: none;
  }

  /* Hide "Choose" button when "Add" button is shown */
  [data-quick-add-button='add'] .quick-add__button--choose {
    display: none;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;

    &:disabled {
      opacity: var(--opacity-muted-text);
    }
  }

  button.quick-add__button {
    --quick-add-collapsed-width: var(--button-size-md);
    --quick-add-icon-width: calc(var(--button-size-md) - 4px);
    --quick-add-expanded-width: max-content;

    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--quick-add-background, var(--color-background)) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    width: var(--quick-add-collapsed-width);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--quick-add-foreground, var(--color-foreground));
    pointer-events: all;
    position: absolute;
    inset-inline-end: var(--quick-add-inset-inline-end);
    inset-block-end: var(--quick-add-inset-block-end);
    max-inline-size: calc(100% - var(--quick-add-inset-inline-end));
    min-inline-size: 0;
    white-space: nowrap;
    backdrop-filter: blur(20px) saturate(180%);
    interpolate-size: allow-keywords;

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: flex;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;

      /* Explicit "disabled" rule is needed to beat the `.button:disabled { opacity: 0.5 }` rule in base.css */
      &:disabled {
        opacity: 0;
      }
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button > .add-to-cart-icon {
    flex-shrink: 0;
    width: var(--quick-add-icon-width);
    height: 100%;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  @media screen and (min-width: 750px) {
    .quick-add__button:is(:hover, :focus-visible) {
      width: var(--quick-add-expanded-width);
      padding-inline-end: var(--padding-sm);
    }
  }

  .quick-add__button[data-added='true'] {
    width: var(--quick-add-collapsed-width);
    color: transparent;
  }

  .quick-add__button[data-added='true'] > .add-to-cart-icon {
    opacity: 0;
  }

  .quick-add__button[data-added='true'] .add-to-cart__added {
    color: var(--quick-add-foreground, var(--color-foreground));
  }

  @media (prefers-reduced-motion: no-preference) {
    button.quick-add__button {
      transition-property: scale, translate, opacity, width;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:347) */
.resource-card__wrapper {
    display: block;
    height: 100%;
  }

  .resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

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

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:348) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:349) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

    /* Add padding to prevent hover animations from being clipped in slideshow
     15px accommodates:
     - Scale effect (9px on each side from 1.03 scale)
     - Lift effect (4px upward movement)
     - Shadow (15px spread with -5px offset)
     Using 16px for better alignment with our spacing scale */
    margin-block: -16px;
    padding-block: 16px;
  }

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:resource-list-styles (INDEX:350) */
.resource-list {
    --resource-list-mobile-gap-max: 9999px;
    --resource-list-column-gap: min(var(--resource-list-column-gap-desktop), var(--resource-list-mobile-gap-max));
    --resource-list-row-gap: min(var(--resource-list-row-gap-desktop), var(--resource-list-mobile-gap-max));

    width: 100%;

    @media screen and (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }

    @container resource-list (max-width: 749px) {
      --resource-list-mobile-gap-max: 12px;
    }
  }

  .resource-list--grid {
    display: grid;
    gap: var(--resource-list-row-gap) var(--resource-list-column-gap);
    grid-template-columns: var(--resource-list-columns-mobile);

    @media screen and (min-width: 750px) {
      grid-template-columns: var(--resource-list-columns);
    }

    @container resource-list (max-width: 449px) {
      grid-template-columns: var(--resource-list-columns-mobile);
    }

    @container resource-list(min-width: 450px) and (max-width: 749px) {
      --resource-list-columns-per-row: 3;

      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      /* Avoid orphan in last row when there are 4, 7, or 10 items */
      &:has(.resource-list__item:first-child:nth-last-child(3n + 1)),
      /* Clean two full rows when there are 8 items */
      &:has(.resource-list__item:first-child:nth-last-child(8n)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 750px) {
      grid-template-columns: repeat(var(--resource-list-columns-per-row), 1fr);

      &:has(.resource-list__item:first-child:nth-last-child(n + 9)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(n + 7):nth-last-child(-n + 8)) {
        --resource-list-columns-per-row: 4;
      }

      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 3;
      }

      &:has(.resource-list__item:first-child:nth-last-child(5)) {
        --resource-list-columns-per-row: 5;
      }

      &:has(.resource-list__item:first-child:nth-last-child(-n + 4)) {
        --resource-list-columns-per-row: 4;
      }
    }

    @container resource-list (min-width: 1200px) {
      &:has(.resource-list__item:first-child:nth-last-child(6)) {
        --resource-list-columns-per-row: 6;
      }
    }
  }

  .resource-list__item {
    height: 100%;
    color: var(--color-foreground);
    text-decoration: none;
  }
/* END_SNIPPET:resource-list-styles */

/* START_SNIPPET:search-modal (INDEX:353) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }
  }

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: var(--search-border-radius);
    box-shadow: var(--shadow-popover);

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--color-background);
    z-index: var(--layer-heightened);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0 0 var(--search-border-radius) var(--search-border-radius);
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    transform: translateZ(0);
    overflow: hidden;

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-foreground);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

    @media screen and (max-width: 749px) {
      padding: var(--padding-2xs) var(--padding-sm);
    }
  }

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

  input.search-input::placeholder {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-muted-text));
  }

  input.search-input,
  input.search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  input.search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

    &:hover {
      color: var(--color-foreground);
    }

    &:active {
      transform: scale(0.9);
      transition: transform 100ms var(--animation-timing-active);
    }

    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-2xs);
    }
  }

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

    &:active {
      transform: scale(0.8);
      transition: transform 100ms var(--animation-timing-active);
    }

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:354) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:355) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(#header-group > .header-section > #header-component[transparent]):not(
      :has(#header-group > .header-section + .shopify-section)
    )
    #MainContent
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:357) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:359) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:360) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:361) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

        &:hover {
          --color: var(--color-hover);
        }
      }

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

    &:hover {
      color: var(--color-hover);
    }

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:363) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover)
    > slideshow-container
    > slideshow-slides
    > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:365) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:summary-icon-styles (INDEX:371) */
details[open] > summary .icon-animated > svg {
    transform: rotate(180deg);
  }

  summary .svg-wrapper {
    margin-inline-start: auto;
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  /* Shared plus/minus icon animations */
  summary .icon-plus :is(.horizontal, .vertical) {
    transition: transform var(--animation-speed) var(--animation-easing);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    opacity: 1;
  }

  details[open] > summary .icon-plus .horizontal {
    transform: rotate(90deg);
  }

  details[open] > summary .icon-plus .vertical {
    transform: rotate(90deg);
    opacity: 0;
  }
/* END_SNIPPET:summary-icon-styles */

/* START_SNIPPET:swatch-styles (INDEX:372) */
/* Swatches */
  .swatch {
    --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
    --min-width-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height-unitless: 15.9999; /* want to avoid division by 0 */
    --min-height: 16px;
    --min-width: 16px;

    /* mobile values */
    --scaling-factor: 0.5;
    --max-swatch-size: 28px;
    --max-pill-size: 20px;
    --max-filter-size: 32px;

    /* From the settings */
    --offset-swatch-width: calc(var(--variant-picker-swatch-width-unitless) - var(--min-width-unitless));
    --offset-swatch-height: calc(var(--variant-picker-swatch-height-unitless) - var(--min-height-unitless));

    /**
    Offset values are obtained from the following formulas:
      offset-width = width - min-width
      offset-height = height - min-height

    The offset-scaled-width and heigth are obtained by extending the line from
    [min,min] to [W,H] and taking the intersection with a square that starts at
    [min,min] and ends at [max,max].

    The extending line forms right angle triangles with the [min,min]->[max,max]
    box that enable us to derive the following formulas

    We also want the result to always be smaller than the input (pdp > everywhere else)
    by some scaling factor.
  */
    --offset-scaled-width: calc(
      var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
    );
    --offset-scaled-height: calc(
      var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
    );
    --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));

    /* width = min(m + sU, (m + s * W'/H' * M'), M) */
    --swatch-width: min(
      calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
      calc(var(--min-width) + var(--offset-scaled-width)),
      var(--max-swatch-size)
    );

    /* height = min(m + sV, (m + s * H'/W' * M'), M) */
    --swatch-height: min(
      calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
      calc(var(--min-height) + var(--offset-scaled-height)),
      var(--max-swatch-size)
    );

    display: block;
    background: var(--swatch-background);
    background-position: var(--swatch-focal-point, center);
    border-radius: var(--variant-picker-swatch-radius);
    border: var(--style-border-swatch-width) var(--style-border-swatch-style) var(--color-border);
    width: var(--swatch-width);
    height: var(--swatch-height);

    /* This is different than `background-size: cover` because we use `box-sizing: border-box`,
   * doing it like makes the background clip under the border without repeating.
   */
    background-size: var(--swatch-width) var(--swatch-height);

    &.swatch--unavailable {
      border-style: dashed;
    }

    &.swatch--unscaled {
      /* for when you want fixed sizing (e.g. pdp) */
      --swatch-width: var(--variant-picker-swatch-width);
      --swatch-height: var(--variant-picker-swatch-height);
    }

    &.swatch--filter {
      --swatch-width: var(--max-filter-size);
      --swatch-height: var(--max-filter-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    &.swatch--pill {
      --swatch-width: var(--max-pill-size);
      --swatch-height: var(--max-pill-size);

      border-radius: var(--variant-picker-swatch-radius);
    }

    /* swatches in filters and pills always have a border  */
    &.swatch--filter,
    &.swatch--pill {
      --style-border-swatch-width: var(--variant-picker-border-width);
      --style-border-swatch-style: var(--variant-picker-border-style);
      --color-border: rgb(var(--color-foreground-rgb) / var(--variant-picker-border-opacity));
    }

    &.swatch--variant-image {
      background-size: cover;
    }

    @media screen and (min-width: 750px) {
      /* desktop values */
      --max-swatch-size: 32px;
      --max-pill-size: 16px;
      --max-filter-size: 28px;
      --scaling-factor: 0.65;
    }
  }
/* END_SNIPPET:swatch-styles */

/* START_SNIPPET:text-block-styles (INDEX:375) */
.text-block {
    width: var(--width, 100%);
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. The doubled class beats the global paragraph-link styles in base.css. */
  .text-block.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-line: none;
    color: currentColor;

    &:hover {
      text-decoration-line: none;
      color: currentColor;
    }
  }

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  /* The doubled class lets these edge resets beat heading/paragraph margins without relying on source order. */
  .text-block.text-block > *:last-child,
  .text-block.text-block > *:has(+ *:last-child:empty) {
    margin-block-end: 0;
  }

  .text-block.text-block > style + *,
  .text-block.text-block > *:first-child,
  .text-block.text-block > *:first-child:empty + * {
    margin-block-start: 0;
  }
/* END_SNIPPET:text-block-styles */

/* START_SNIPPET:text-component-shimmer-styles (INDEX:376) */
text-component {
    --shimmer-text-color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    --shimmer-color-light: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    --shimmer-speed: 1.25s;

    display: inline-block;
    position: relative;
    transition: color var(--animation-speed-slow) ease;
    line-height: 1;

    &::after {
      /* Empty alt text: the pseudo-element is a visual shimmer overlay, not announceable content.
        Without this, VoiceOver reads attr(value) in addition to the inner text node, doubling the announcement. */
      content: attr(value) / '';
      position: absolute;
      inset: 0;
      color: transparent;
      opacity: 0;
      transition: opacity var(--animation-speed-slow) var(--animation-easing);
      pointer-events: none;
      background-image: linear-gradient(
        -85deg,
        var(--shimmer-text-color) 10%,
        var(--shimmer-color-light) 50%,
        var(--shimmer-text-color) 90%
      );
      background-clip: text;
      background-size: 200% 100%;
      background-position: 100% 0;
      place-content: center;
    }

    &[shimmer] {
      color: transparent;

      &::after {
        opacity: 1;
        animation: text-shimmer var(--shimmer-speed) infinite linear;
      }
    }
  }

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

    100% {
      background-position: -100% 0;
    }
  }
/* END_SNIPPET:text-component-shimmer-styles */

/* START_SNIPPET:text (INDEX:377) */
:root {
    --text-align-default: left;
  }

  /* Base text-block sizing, spacing, wrapping, and helper classes live in text-block-styles.liquid. */
  .text-block {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
    color: var(--color, var(--color-foreground));
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block > * {
    width: var(--width, 100%);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:theme-drawer-styles (INDEX:379) */
theme-drawer {
    display: contents;
  }

  .theme-drawer__dialog {
    --theme-drawer-padding: var(--padding-xl);

    z-index: calc(var(--layer-sticky) + var(--drawer-stack-order, 0));
    position: fixed;
    inset: unset;
    top: 0;
    right: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
    flex-direction: column;
    width: var(--theme-drawer-width, var(--sidebar-width));
    max-width: 100%;
    max-height: none;
    height: 100dvh;
    padding: 0;
    border: none;
    border-left: var(--style-border-drawer);
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  .theme-drawer__dialog[open] {
    display: flex;
    right: 0;
  }

  .theme-drawer__dialog--opening {
    animation: drawer-slide-in var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--opening-inline-start {
    animation: drawer-slide-in-inline-start var(--animation-speed) var(--animation-timing-fade-in);
  }

  .theme-drawer__dialog--closing {
    animation: drawer-slide-out var(--animation-speed) var(--animation-timing-fade-out) forwards;
  }

  .theme-drawer__dialog-instant {
    animation: none;
  }

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

  @keyframes drawer-slide-in-inline-start {
    from {
      right: calc(var(--theme-drawer-width, var(--sidebar-width)) / 2);
    }
  }

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

  .theme-drawer__dialog::backdrop {
    background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
  }

  /* Exclude open drawers from the page navigation cross-fade so they
     stay frozen (visually unchanged) while the rest of the page transitions. */
  html:active-view-transition-type(page-navigation) .theme-drawer__dialog[open] {
    view-transition-name: theme-drawer;
  }

  ::view-transition-old(theme-drawer),
  ::view-transition-new(theme-drawer) {
    animation: none;
  }

  .theme-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--theme-drawer-padding);
    flex-shrink: 0;
    color: var(--color-foreground);
  }

  .theme-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin: 0;
  }

  .theme-drawer__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: var(--style-border-radius-lg);
    background-color: rgb(var(--color-foreground-rgb) / 0.1);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
    padding-inline: 0.5em;
    line-height: 1;
  }

  .theme-drawer__badge[data-maintain-ratio] {
    aspect-ratio: 1 / 1;
    padding-inline: 0.2em;
  }

  .theme-drawer__close-button {
    --private-button-size: 34px;
    --private-focus-ring-size: 2px;
    --private-motion-speed: 150ms;
    --private-motion-ease: cubic-bezier(0.25, 0, 0.1, 1);
    --private-border-width: 1px;
    --private-button-border-color: rgb(0, 0, 0, 0.06);
    --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: auto;
    width: var(--private-button-size);
    height: var(--private-button-size);
    border-radius: var(--private-button-size);
    background-color: var(--color-background);
    outline: var(--private-focus-ring-size) solid transparent;
    outline-offset: var(--private-focus-ring-size);
    transition-property: color, outline-color, background-color;
    transition-duration: var(--private-motion-speed);
    transition-timing-function: var(--private-motion-ease);

    /* Legacy non-contrast-aware color scheme */
    --button-icon-opacity: 0.8;
    color: var(--color-foreground);
    border: var(--private-border-width) solid var(--private-button-border-color);
    box-shadow: var(--private-button-shadow);

    &:hover:not(:active) {
      /* Legacy non-contrast-aware color scheme */
      --button-icon-opacity: 1;
    }

    &:focus-visible {
      outline-color: var(--color-foreground);
    }
  }

  @supports (color: oklch(from red l c h)) {
    .theme-drawer__close-button {
      --contrast-color: oklch(from var(--color-background) clamp(0, (0.6 / l - 1) * infinity, 1) 0 0);
      --button-icon-opacity: 1;
      --private-button-border-color: color-mix(in srgb, var(--contrast-color) 6%, transparent);
      --private-button-shadow: 0 2px 6px 0 var(--private-button-border-color);

      color: color-mix(in srgb, var(--contrast-color) 50%, transparent);

      &:hover:not(:active) {
        color: color-mix(in srgb, var(--contrast-color) 70%, transparent);
      }
    }

    .theme-drawer__close-button:hover:not(:active) {
      background-color: color-mix(in srgb, var(--contrast-color) 6%, var(--color-background));
    }
  }
/* END_SNIPPET:theme-drawer-styles */

/* START_SNIPPET:variant-picker-styles (INDEX:392) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-variant-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
    color: var(--color-variant-text);
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
    color: var(--color-variant-hover-text);
  }

  .variant-option__select-wrapper:hover .variant-option__select {
    background-color: var(--color-variant-hover-background);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    background-color: var(--color-variant-background);
    color: inherit;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }

  .variant-picker .variant-option--buttons label:has(.swatch) {
    border-radius: var(--variant-picker-swatch-radius);
  }

  /* Variant option component */
  .variant-option {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);
    --variant-option-padding-inline: var(--padding-md);
  }

  .variant-option + .variant-option {
    margin-top: var(--padding-lg);
  }

  .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: 100%;

    overflow-list::part(list) {
      padding-block: var(--overflow-list-padding-block, 0);
      padding-inline: var(--overflow-list-padding-inline, 0);
    }
  }

  .variant-option--swatches > overflow-list {
    justify-content: var(--product-swatches-alignment);

    @media screen and (max-width: 749px) {
      justify-content: var(--product-swatches-alignment-mobile);
    }
  }

  .variant-option--buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin: 0;
    padding: 0;
    border: none;
  }

  .variant-option--buttons legend {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .variant-option--buttons legend,
  .variant-option--dropdowns > label,
  .variant-option[data-testid='variant-option-single'] {
    color: var(--variant-option-label-color, var(--color-foreground));
  }

  .variant-option__swatch-value {
    padding-inline-start: var(--padding-xs);
    color: var(--variant-option-label-color-subdued, var(--color-foreground-subdued));
  }

  @media (prefers-reduced-motion: no-preference) {
    .variant-option__button-label,
    .variant-option__select-wrapper,
    .variant-option__button-label::before,
    .variant-option__button-label::after,
    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--animation-easing);
    }

    .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
      .variant-option__button-label__pill {
      transition-property: transform;
    }

    .variant-option__button-label::after {
      transition-property: clip-path;
    }

    .variant-option__button-label::before {
      transition-property: border-color;
    }

    .variant-option__select-wrapper,
    .variant-option__button-label {
      transition-property: background-color, border-color, color;
    }
  }

  .variant-option__button-label {
    --variant-picker-stroke-color: var(--color-variant-border);

    cursor: pointer;
    display: flex;
    flex: 0 0 3.25em;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--options-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    overflow: clip;
    justify-content: center;
    min-height: 3.25em;
    min-width: fit-content;
    white-space: nowrap;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    gap: 0;

    &:hover,
    &:hover:has([aria-disabled='true']):has([data-option-available='false']) {
      --variant-picker-stroke-color: var(--color-variant-hover-border);

      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }

    /* we need something like overflow-clip-margin to use the pseudoelement but it doesn't work in Safari */

    /* so instead use the layered background image trick */
    &:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) {
      border-width: 0;
    }

    /* ::after/::before act as a fake border for the button style variant */

    /* ::after is the unavailable variant border that clips in */
    &:not(.variant-option__button-label--has-swatch)::before,
    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::after {
      content: '';
      position: absolute;
      inset: 0;
      border: var(--options-border-width) solid var(--color-selected-variant-border);
      border-radius: inherit;
      pointer-events: none;
      z-index: 2;
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(var(--clip, 0 0 0 0));
    }

    &:has([data-option-available='false']):not(.variant-option__button-label--has-swatch)::before {
      inset: 0;
    }

    &:not(.variant-option__button-label--has-swatch)::before {
      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
      clip-path: inset(0 0 0 0);
      border-color: var(--color-variant-border);
      inset: calc(var(--options-border-width) * -1);
    }

    &:has(:checked):not(.variant-option__button-label--has-swatch, :has([data-option-available='false']))::before {
      border-color: var(--color-selected-variant-border);
    }

    /* setting left/right accounts for variant buttons of different widths */
    &:not(:has(:checked)):has(~ label > :checked),
    &:has(:checked):has(~ label > [data-previous-checked='true']) {
      .variant-option__button-label__pill {
        right: 0;
        left: unset;
      }
    }

    &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
    &:has(:checked) ~ label {
      .variant-option__button-label__pill {
        left: 0;
        right: unset;
      }
    }

    &:not(:has(:checked)):has(~ label > :checked) {
      --pill-offset: calc(100% + 1px);
    }

    &:has(:checked) ~ label {
      --pill-offset: calc(-100% - 1px);
    }

    &:has([data-current-checked='true']):first-of-type
      ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
    &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
      --clip: 0 0 0 100%;
    }

    &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
        .variant-option__button-label--has-swatch
      ),
    &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
      --clip: 0 100% 0 0;
    }

    &:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
      width: max(var(--pill-width-current, 100%), var(--pill-width-previous, 100%));
    }

    @media screen and (min-width: 750px) {
      padding: var(--padding-xs) var(--variant-option-padding-inline);
    }
  }

  /* wrap around only for 3 or more variants in a row */

  /* the more complex selector rules here produce the wrap around effect for first/last variants */
  .variant-option--buttons:has(:nth-of-type(3)) {
    .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
      --pill-offset: calc(100% + 1px);
    }

    .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
        ~ label:last-of-type > :checked
      ) {
      --pill-offset: calc(-100% - 1px);
    }
  }

  .variant-option__button-label__pill {
    background: var(--color-selected-variant-background);
    position: absolute;
    top: calc(var(--options-border-width) * -1);
    bottom: calc(var(--options-border-width) * -1);
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    transform: translateX(var(--pill-offset, 0));
  }

  .variant-option__button-label__text {
    pointer-events: none;
    text-align: start;
    text-wrap: auto;
    z-index: 2;
  }

  .variant-option--equal-width-buttons {
    --variant-min-width: clamp(44px, calc(var(--variant-option-padding-inline) * 2 + var(--variant-ch)), 100%);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--variant-min-width), 1fr));

    .variant-option__button-label {
      min-width: var(--variant-min-width);
    }

    .variant-option__button-label__text {
      text-align: center;
      text-wrap: balance;
    }
  }

  .variant-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch {
    --focus-outline-radius: var(--variant-picker-swatch-radius);

    padding: 0;
    border: none;
    flex-basis: auto;
    min-height: auto;
  }

  /* Override global label:has(input) display rule with higher specificity */
  .variant-option__button-label--has-swatch:has(input) {
    display: block;
  }

  .variant-option__button-label:has(:checked) {
    --variant-picker-stroke-color: var(--color-selected-variant-border);

    color: var(--color-selected-variant-text);
    border-color: var(--color-selected-variant-border);
  }

  .variant-option__button-label:has(:checked):hover {
    border-color: var(--color-selected-variant-hover-border);
    color: var(--color-selected-variant-hover-text);

    .variant-option__button-label__pill {
      background-color: var(--color-selected-variant-hover-background);
    }
  }

  .variant-option__button-label:has([data-option-available='false']) {
    color: rgb(var(--color-variant-text-rgb) / var(--opacity-60));
  }

  .variant-option__button-label--has-swatch:hover {
    outline: var(--focus-outline-width) solid var(--color-variant-hover-border);
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg,
  .variant-option__button-label--has-swatch:has([data-option-available='false']) .swatch {
    stroke: rgb(var(--color-variant-text-rgb) / var(--opacity-subdued-text));
  }

  /* Disable the duplicate overlay line so the subdued stroke doesn't double up */
  .variant-option__button-label--has-swatch:has([data-option-available='false']) svg line:last-of-type {
    stroke: none;
  }

  .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: var(--focus-outline-width) solid var(--color-selected-variant-border);

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
    .variant-option__button-label--has-swatch:has(:checked),
    .variant-option__button-label:has(:focus-visible) .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .variant-option__button-label--has-swatch:has(:checked)::after,
    .variant-option__button-label:has(:focus-visible) .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked) {
    --variant-strikethrough-color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));

    background-color: var(--color-selected-variant-background);
    color: rgb(var(--color-selected-variant-text-rgb) / var(--opacity-subdued-text));
  }

  .variant-option__button-label:has([data-option-available='false']):has(:checked):hover {
    background-color: var(--color-selected-variant-hover-background);
    color: var(--color-selected-variant-hover-text);
  }

  .variant-option__button-label input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .variant-option__button-label svg {
    position: absolute;
    left: var(--options-border-width);
    top: var(--options-border-width);
    height: calc(100% - (var(--options-border-width) * 2));
    width: calc(100% - (var(--options-border-width) * 2));
    cursor: pointer;
    pointer-events: none;
    stroke-width: var(--style-border-width);
    stroke: var(--variant-picker-stroke-color);
  }

  .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg {
    stroke: var(--variant-strikethrough-color, rgb(var(--color-variant-text-rgb) / var(--opacity-60)));

    line {
      stroke-width: var(--options-border-width);
    }

    /* The second stroke line exists for "motion overlay". Disabled for swatches, remove line to avoid overlapping lines  */
    line:last-of-type {
      stroke: none;
    }
  }

  /* Override for swatch labels to maintain block display */
  .variant-option__button-label--has-swatch:has(input[type='radio']) {
    display: block;
  }

  /* Swatches do not take a background-color since a transparent or missing swatch would end up filled */
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked),
  .variant-option__button-label--has-swatch:has([data-option-available='false']):has(:checked):hover {
    background-color: inherit;
  }
/* END_SNIPPET:variant-picker-styles */

/* START_SNIPPET:variant-swatches (INDEX:393) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video-background-styles (INDEX:394) */
.video-background,
  .video-background * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .video-background--cover * {
    object-fit: cover;
  }

  .video-background--contain * {
    object-fit: contain;
  }

  @media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:video-background-styles */

/* START_SNIPPET:video-placeholder-styles (INDEX:395) */
.video-placeholder-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--size-style-aspect-ratio, auto);
  }

  :not(deferred-media) > .video-placeholder-wrapper {
    width: var(--video-placeholder-width);
  }

  .video-placeholder-wrapper > * {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .video-placeholder-wrapper.border-style {
    /* Apply the border radius to the video */
    overflow: hidden;
  }

  .video-placeholder-wrapper__poster-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-placeholder-wrapper__poster-icon svg {
    width: var(--button-size);
    height: var(--button-size);
    color: var(--color-white);
    filter: drop-shadow(var(--shadow-button));

    &:hover {
      color: rgb(var(--color-white-rgb) / var(--opacity-80));
    }

    @media screen and (min-width: 750px) {
      width: 4rem;
      height: 4rem;
    }
  }
/* END_SNIPPET:video-placeholder-styles */

/* START_SNIPPET:volume-pricing-info (INDEX:397) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-foreground);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */