/** Shopify CDN: Minification failed

Line 13752:17 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:collection-links (INDEX:2) */
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:8) */
.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:9) */
.utilities {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap);
    text-wrap: nowrap;
    border-top: var(--border-width) solid 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 {
    color: 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:10) */
.gg-footer {
    padding-inline: var(--gg-page-pad);
    /* text-block font-size is driven per-zone via --font-paragraph--size */
  }
  .gg-footer .text-block * { margin: 0; }
  .gg-footer a { color: var(--gg-black); text-decoration: none; font-size: var(--gg-text-sm); /* 12px */ }
  .gg-footer a:hover { text-decoration: underline; }

  /* ── Main row — two halves ─────────────────────────────────────────────────
     Measured off mouthwashmagazine.com: a 24-col grid, cols 1–12 logo + foot,
     cols 13–24 a NESTED 2-col grid of link columns, all bottom-aligned
     (place-items-end), no rule anywhere. On our 12-col grid that is 1–6 / 7–12.
     align-items:end is what makes the crown's baseline meet the link columns'
     last line — the single biggest reason the reference reads the way it does. */
  .gg-footer__main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: end;
    column-gap: var(--gg-gutter);
    /* The footer's largest rhythm, and the only one that opens up once the two
       halves stack. The reference carries it on the same wrapper (gap-y-40). */
    row-gap: var(--gg-gap-section);
  }

  /* Column labels. Type goes through --font-paragraph--size because each title
     is a Theme-Editor TEXT BLOCK: the size lands on the inner .paragraph, so a
     font-size on this wrapper is ignored. UPPERCASE + no gap to its list, both
     measured from the reference (.text-subtitle is text-transform:uppercase and
     the <h3> sits directly on the <ul>). The tightness is the look. */
  .gg-footer__title {
    --font-paragraph--size: var(--gg-text-sm); /* 12px */
    --font-paragraph--weight: var(--gg-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--gg-tracking-default);
  }

  /* link/contact lists — 12px, unchanged */
  .gg-footer__main .text-block {
    --font-paragraph--size: var(--gg-text-sm); /* 12px */
    --font-paragraph--line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
  }

  /* ── Brand half (cols 1–6): crown, then [gg] + credits at its foot ── */
  .gg-footer__brand {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Crown -> [gg] + credits. NOT a token: the reference's 8px reads far too
       tight against our crown, which is much larger than its logo, so this is a
       Theme-Editor setting (Abstand Logo) rather than a copied value. */
    gap: var(--gg-footer-brand-gap, 64px);
  }
  .gg-footer__mark {
    line-height: 0;
    color: var(--gg-black);
  }
  .gg-footer__mark svg { width: 190px; height: auto; display: block; }
  .gg-footer__brand-foot {
    display: flex;
    flex-direction: column;
    gap: var(--gg-gap-label);
  }

  /* [gg] — bespoke 8px light mark, not a label. */
  .gg-footer__title--gg {
    --font-paragraph--size: 0.5rem; /* 8px */
    --font-paragraph--weight: var(--gg-weight-light);
  }
  .gg-footer__credits {
    --font-paragraph--size: 0.55rem; /* 10px */
    --font-paragraph--line-height: 1.5;
  }
  /* The credits line is 10px, but `.gg-footer a` pins every footer link to 12px —
     which would make the linked name larger than the unlinked one beside it.
     Inherit instead, so the credit reads as part of the sentence. */
  .gg-footer__credits a {
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Spa: the GG crown stays, painted spa-ink (white) to read on the orange page. */
  [data-spa-mode] .gg-footer__mark svg,
  [data-spa-mode] .gg-footer__mark svg path {
    fill: var(--gg-spa-ink) !important;
  }

  /* ── Link half (cols 7–12): a SUBGRID of the page grid ──
     Information starts on col 7 and spans 3, so Links/Kontakt lands on col 10.
     Subgrid (not a nested 2-col grid) keeps both columns on the page's tracks
     and gutter. */
  .gg-footer__cols {
    grid-column: 7 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
  }
  .gg-footer__col:first-child { grid-column: span 3; }
  .gg-footer__col {
    display: flex;
    flex-direction: column;
    /* Groups within a column (Links above Kontakt) are separate units. */
    gap: var(--gg-gap-section);
  }
  .gg-footer__group {
    display: flex;
    flex-direction: column;
  }

  /* Underlined links: contact email + phone (address lines stay plain), and the
     Widerrufsbutton — the legally required withdrawal button must read as a
     button-like action at rest, not only on hover. It comes from the admin menu
     (no class hook), so it is matched by its page URL. */
  .gg-footer__contact a,
  .gg-footer__links a[href$="/pages/widerrufsformular"] { text-decoration: underline; text-underline-offset: 2px; }

  /* ── Tablet 750–989px ── */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .gg-footer__main { grid-template-columns: repeat(6, 1fr); row-gap: var(--gg-gap-section); }
    /* Brand takes its own row above the columns — the crown has no room beside
       them at this width, so the two halves stack instead of sitting side by side. */
    .gg-footer__brand { grid-column: 1 / -1; align-self: start; }
    .gg-footer__cols  { grid-column: 1 / -1; align-items: start; }
  }

  /* ── Mobile <750px — single stack with dividers between blocks ── */
  @media screen and (max-width: 749px) {
    .gg-footer__main {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .gg-footer__brand,
    .gg-footer__cols { grid-column: 1 / -1; }
    /* Hairlines BETWEEN stacked blocks — a different job from the head rule that
       was removed: these separate sibling groups in a single column. */
    .gg-footer__cols > .gg-footer__col + .gg-footer__col,
    .gg-footer__brand + .gg-footer__cols {
      border-block-start: var(--gg-divider-width) solid var(--gg-divider-color);
      padding-block-start: var(--gg-space-md);
      margin-block-start: var(--gg-space-md);
    }
    /* Brand first, smaller crown, foot directly under it. */
    .gg-footer__brand { align-self: start; }
    .gg-footer__mark svg { width: 140px; }
    /* Both link columns stack into one. */
    .gg-footer__col:first-child { grid-column: auto; }
    .gg-footer__cols {
      grid-template-columns: 1fr;
      gap: var(--gg-gap-section);
      align-items: start;
    }
  }

  /* ==============================================================================
     Spa mode — MONOCOLOR footer. The page is orange; everything turns spa-ink:
     titles, links, credits, contact and the [gg] mark.

     NOTHING HERE NAMES A LAYOUT CLASS. The whole layer works by remapping the
     colour TOKENS on .gg-footer, so the 2026-09-28 restructure (two halves,
     nested link columns, no head rule) needed no spa changes at all — the new
     elements inherit spa ink by construction. Keep it that way: if a new footer
     element needs a spa colour, give it a token to read rather than adding a
     [data-spa-mode] selector for it.
     ============================================================================== */

  /* ── Everything on the orange page → white ──
     The text blocks ([gg] mark, column titles, credits, contact) colour themselves
     from --color-foreground (the section's colour scheme), so per-selector overrides
     lose to the block's own cascade. Remap the scheme foreground vars on the footer
     to spa-ink instead — every text-block, link and title then inherits white by
     construction. --gg-black is also remapped for the few roles that read it. */
  [data-spa-mode] .gg-footer {
    --color-foreground: var(--gg-spa-ink);
    --color-foreground-heading: var(--gg-spa-ink);
    --gg-black: var(--gg-spa-ink);
    color: var(--gg-spa-ink);
  }
  [data-spa-mode] .gg-footer a,
  [data-spa-mode] .gg-footer .text-block,
  [data-spa-mode] .gg-footer .text-block > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--gg-spa-ink);
  }
  /* The mobile between-block hairlines read --gg-divider-color, which
     body[data-spa-mode] rebinds to rgba(spa-ink / 0.75) — so they follow the spa
     ink with no per-element override. The head rule they used to accompany is
     gone entirely (the footer has no divider any more). */
/* END_SECTION:footer */

/* START_SECTION:gg-brand-quote (INDEX:11) */
.gg-brand-quote-section {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
  }

  .gg-brand-quote {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
  }

  @media screen and (min-width: 750px) {
    .gg-brand-quote {
      grid-column: 4 / span 6;
    }
  }

  .gg-brand-quote__attribution {
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: var(--gg-tracking-default);
    margin: 0;
  }

  .gg-brand-quote__text {
    font-family: var(--gg-font-display, 'Vend Sans', sans-serif); /* ≥32px display header */
    font-size: clamp(3rem, 7vw, var(--quote-font-size, 72px));
    line-height: 1.2;
    font-weight: 400;
    color: var(--gg-black);
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
    border: none;
  }

  @media (max-width: 749px) {
    .gg-brand-quote-section {
      padding-inline: 24px;
    }

    .gg-brand-quote__text {
      font-size: clamp(1.75rem, 7vw, 2.5rem);
    }
  }
/* END_SECTION:gg-brand-quote */

/* START_SECTION:gg-card-carousel (INDEX:12) */
/* ─── Inner wrapper: col2–col11 inset ─────────────────────── */
  .gg-cc__inner {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg);
  }

  @media (min-width: 750px) {
    .gg-cc__inner {
      margin-inline: var(--gg-page-pad);
    }
  }

  @media (max-width: 749px) {
    .gg-cc__inner {
      padding-inline: var(--gg-page-pad);
    }
  }

  /* ─── Optional section heading ────────────────────────────── */
  .gg-cc__section-heading {
    font-family: var(--font-body--family);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: var(--gg-tracking-default);
    margin: 0;
    color: currentColor;
  }

  /* ─── Grid ──────────────────────────────────────────────────── */
  .gg-cc__grid {
    display: grid;
    gap: var(--gg-space-md);
    grid-template-columns: 1fr;
  }

  @media (min-width: 750px) {
    .gg-cc__grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .gg-cc__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (min-width: 1200px) {
    .gg-cc__grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }

  /* ─── Card ──────────────────────────────────────────────────── */
  .gg-cc__card {
    display: flex;
    flex-direction: column;
    gap: 19px;
    padding: 36px 40px 44px;
    box-sizing: border-box;
  }

  @media (max-width: 749px) {
    .gg-cc__card {
      padding: 20px 20px 24px;
    }
  }

  .gg-cc__card--align-center { align-items: center; }
  .gg-cc__card--align-right  { align-items: flex-end; }

  .gg-cc__card--align-center .gg-cc__body,
  .gg-cc__card--align-center .gg-cc__card-heading { text-align: center; }

  .gg-cc__card--align-right .gg-cc__body,
  .gg-cc__card--align-right .gg-cc__card-heading  { text-align: right; }

  /* ─── Pill ──────────────────────────────────────────────────── */
  .gg-cc__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 25px;
    padding: 0 10px;
    border-radius: var(--gg-radius-chip);
    background: var(--cc-pill-bg);
    color: var(--cc-pill-text);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
  }

  /* ─── Card heading ──────────────────────────────────────────── */
  .gg-cc__card-heading {
    font-family: var(--font-body--family);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--gg-tracking-default);
    margin: 0;
    color: var(--cc-body-color);
  }

  /* ─── Body ──────────────────────────────────────────────────── */
  .gg-cc__body {
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--cc-body-color);
    margin: 0;
  }

  /* ─── CTA ───────────────────────────────────────────────────── */
  .gg-cc__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    height: 25px;
    background: var(--cc-cta-bg);
    color: var(--cc-cta-color);
    padding: 0 10px 0 6px;
    border-radius: var(--gg-radius-chip);
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--gg-tracking-default);
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.18s ease;
  }

  .gg-cc__cta:hover { filter: brightness(0.88); }

  .gg-cc__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    background: var(--cc-cta-dot-bg);
    color: var(--cc-cta-color);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
  }
/* END_SECTION:gg-card-carousel */

/* START_SECTION:gg-contact (INDEX:14) */
/* The page's standard 12-col grid. Gutters come from --gg-page-pad fed through
     spacing-style (never ALSO a literal padding-inline — that doubles the gutter). */
  .gg-contact {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-lg);
    --padding-inline: var(--gg-page-pad);

    /* This container HAS a gap, so it must tell the divider. gg-divider subtracts
       --gg-parent-gap from its own margin so the divider-to-content distance is
       --gg-gap-tight (9px) in whatever container it lands in. Missing until
       2026-09-28, so the head rule sat 40 + 9 = 49px above the heading instead of
       9px — visible the moment Contact and FAQ were put side by side.
       Registered in the nested-reset :where() list in snippets/gg-divider.liquid
       too, so the cancellation does not leak into the form column below. */
    --gg-parent-gap: var(--gg-space-lg);
  }

  /* MANDATORY, not decorative: base.css sets .section > * { grid-column: 2 },
     which would drop every child into column 2 and silently defeat the track
     assignments below. gg-brand and gg-pdp-info carry the same reset. */
  .gg-contact > * {
    grid-column: 1 / -1;
  }

  /* The head is snippets/gg-divider — label type, 5px gap and full bleed all
     come from there; nothing to restate. */

  /* ── Left column: hours + CTA (cols 1–4) ── */
  /* No gap: this column carries .gg-stack, which owns the vertical rhythm. */
  .gg-contact__editorial {
    grid-column: 1 / 5;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Measure lives on the PARAGRAPH, not the column: the heading and the button
     keep their natural widths inside the track (the gg-brand idiom — span the
     track, cap the text). */
  .gg-contact__body {
    max-width: min(var(--gg-contact-measure, 340px), 100%);
  }

  /* Grey chip — the Warenkorb token pair (#D9D9D9 / black), measured off the
     Figma. Overriding the tokens, not adding a colour class. */
  .gg-contact__store-cta {
    --gg-pill-btn-bg: var(--gg-pill-btn-bg-warenkorb);
    --gg-pill-btn-color: var(--gg-pill-btn-color-warenkorb);
    text-decoration: none;
  }

  /* ── Right column: details + form (cols 5–12) ── */
  /* ONE measure for the whole column, not just the inputs. The Kontaktformular
     hairline, the details row and the fields all derive from it, so they share a
     right edge by construction — capping only the inputs would leave the rule
     running full width past them (the mistake .gg-spa-panel__home documents).
     The 8-col track is ~1000px+ at 2560; an unbounded name/email field that wide
     reads as a page-width rule rather than a field. */
  .gg-contact__form-col {
    grid-column: 5 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg);
    width: 100%;
    max-width: var(--gg-contact-form-measure, 880px);
  }

  /* The form sits clearly apart from the Tel/E-Mail row — they are two separate
     things, not one list. This one gap steps up to --gg-space-xl rather than
     inflating every gap in the column. Anchored to the form (the divider that
     used to carry it was removed), so the separation survives. */
  .gg-contact__details + .gg-contact__form {
    margin-block-start: calc(var(--gg-space-xl) - var(--gg-space-lg));
  }

  .gg-contact__details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-sm) var(--gg-space-xl);
    margin: 0;
  }

  .gg-contact__details a {
    color: inherit;
    text-decoration: none;
  }

  .gg-contact__details a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .gg-contact__form {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
    margin: 0;
  }

  /* ── Fields: white, black underline, square. ──────────────────────────────
     0-2-0 specificity to beat base.css `input:not(...)` and `input:hover`
     (both 0-1-1) — a single class loses and the field repaints a boxed
     background. `textarea` is named explicitly because base.css styles it
     alongside input, so it would otherwise stay boxed while the inputs went
     flat. Every state the base rules name is named here too. */
  .gg-contact .gg-contact__input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 0 4px;
    border: 0;
    border-bottom: var(--gg-divider-width) solid var(--gg-black);
    border-radius: 0;
    box-shadow: none;
    background-color: var(--gg-white);
    color: var(--gg-black);
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    letter-spacing: var(--gg-tracking-default);
    -webkit-appearance: none;
    appearance: none;
  }

  .gg-contact .gg-contact__input:hover,
  .gg-contact .gg-contact__input:focus,
  .gg-contact .gg-contact__input:focus-visible {
    outline: none;
    box-shadow: none;
    background-color: var(--gg-white);
    border-bottom-color: var(--gg-black);
  }

  /* The design shows grey placeholders; base.css paints them --color-input-text
     (a Horizon token), so set the GG grey explicitly. */
  .gg-contact .gg-contact__input::placeholder {
    color: var(--gg-gray-mid);
    opacity: 1;
  }

  /* Chrome paints its own autofill background over the field. The inset shadow
     is the only way to cover it and -webkit-text-fill-color the only way to keep
     the ink black. Name the hover/focus states too or they repaint on interaction.
     This form autofills name+email+phone, so it WILL be hit. */
  .gg-contact .gg-contact__input:-webkit-autofill,
  .gg-contact .gg-contact__input:-webkit-autofill:hover,
  .gg-contact .gg-contact__input:-webkit-autofill:focus {
    -webkit-box-shadow: inset 0 0 0 100px var(--gg-white);
    -webkit-text-fill-color: var(--gg-black);
  }

  .gg-contact .gg-contact__input--textarea {
    height: auto;
    min-height: 168px;
    padding: 8px 4px;
    resize: vertical;
    line-height: var(--gg-text-base--lh);
  }

  /* Button sizes to its label rather than stretching the flex column. */
  .gg-contact__submit-row {
    display: flex;
  }

  .gg-contact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
  }

  .gg-contact__banner {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xs);
  }

  .gg-contact__errors {
    margin: 0;
    padding-inline-start: 1.1em;
  }

  /* ── Stack at ≤1024px (not 749px): the form is unusable in a 4-col track, and
     the 1024 Figma frame shows the single column. grid-row: auto is required —
     without it the desktop row assignments survive and the columns overlap. ── */
  @media screen and (max-width: 1024px) {
    .gg-contact__editorial,
    .gg-contact__form-col {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .gg-contact__body {
      max-width: 100%;
    }
  }
/* END_SECTION:gg-contact */

/* START_SECTION:gg-faq (INDEX:19) */
/* The page's standard 12-col grid. Gutters come from --gg-page-pad fed through
     spacing-style (never ALSO a literal padding-inline — that doubles the gutter). */
  .gg-faq {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-lg);
    --padding-inline: var(--gg-page-pad);

    /* This container HAS a gap, so it must tell the divider — gg-divider subtracts
       --gg-parent-gap from its own margin so the divider-to-content distance is
       --gg-gap-tight no matter which container it lands in. Without this the head
       rule sits row-gap + 9px above the content instead of 9px. The name is also
       registered in the nested-reset :where() list in snippets/gg-divider.liquid so
       the cancellation does not leak into the question blocks below. */
    --gg-parent-gap: var(--gg-space-lg);

    /* Marker geometry — declared once here because BOTH the block's ::before
       (width + gap) and its answer indent (their sum) derive from it. */
    --gg-faq-marker-width: 10px;
    --gg-faq-marker-gap: 14px;
  }

  /* MANDATORY, not decorative: base.css sets .section > * { grid-column: 2 },
     which would drop every child into column 2 and silently defeat the track
     assignments below. gg-contact, gg-brand and gg-pdp-info carry the same reset. */
  .gg-faq > * {
    grid-column: 1 / -1;
  }

  /* The head is snippets/gg-divider — label type, 5px gap and full bleed all
     come from there; nothing to restate. */

  /* ── Left column: intro + CTA (cols 1–4) ── */
  /* No gap: this column carries .gg-stack, which owns the vertical rhythm. */
  .gg-faq__editorial {
    grid-column: 1 / 5;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Measure lives on the PARAGRAPH, not the column: the heading and the button
     keep their natural widths inside the track (the gg-brand idiom — span the
     track, cap the text). */
  .gg-faq__body {
    max-width: min(var(--gg-faq-measure, 340px), 100%);
  }

  /* Button + phone as one tight pair. --gg-gap-tight is the 9px "bonded" step. */
  .gg-faq__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gg-gap-tight);
  }

  .gg-faq__cta {
    text-decoration: none;
  }

  /* The Figma underlines the number — it is a link, and the only one in this
     column, so the underline is the affordance. */
  .gg-faq__phone {
    color: var(--gg-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ── Right column: the questions (cols 5–12) ── */
  /* No gap — each row's hairline is its own separator, so a gap would open a
     visible break in what the design draws as a continuous ruled list. */
  .gg-faq__list {
    grid-column: 5 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* ── Stack at ≤1024px, as the 1024 Figma frame shows: intro above, questions
     below. grid-row: auto is required — without it the desktop row assignments
     survive and the two columns overlap. ── */
  @media screen and (max-width: 1024px) {
    .gg-faq__editorial,
    .gg-faq__list {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .gg-faq__body {
      max-width: 100%;
    }
  }
/* END_SECTION:gg-faq */

/* START_SECTION:gg-header (INDEX:22) */
/* ── Tokens ────────────────────────────────────────────────────────────────
     Strip height = crown + the page inset above and below it (Figma 5115:230:
     61px, crown ink 9px from the top and from the rule). Links sit on the same
     9px floor. Rail widths and the list inset are measured off Figma 5115:241. */
  .gg-hd {
    --gg-hd-bg: var(--gg-cream);
    --gg-hd-ink: var(--gg-black);
    --gg-hd-muted: rgb(0 0 0 / 0.5); /* Figma 5147:94: inactive links = black 50% */
    --gg-hd-rule-color: var(--gg-divider-color);
    --gg-hd-rule: var(--gg-divider-width) solid var(--gg-hd-rule-color);
    --gg-hd-scrim: var(--gg-scrim);
    --gg-hd-rail: 221px;
    --gg-hd-rail-2: 214px;
    --gg-hd-pad: 32px;
    --gg-hd-speed: var(--gg-speed-roll);

    position: relative;
    display: block;
    color: var(--gg-hd-ink);
  }

  /* --gg-hd-h is the strip ABOVE the rule: crown + the page inset over and under it
     (9 · 43 · 9). The rule is added below it, never taken out of it.
     --header-height (what the rest of the theme reads: sticky offsets, hero heights,
     the cart toast) is the whole strip including the rule. Fixed token heights, so
     no JS measuring. */
  body {
    --gg-hd-logo-h: 43px;
    --gg-hd-h: calc(var(--gg-hd-logo-h) + 2 * var(--gg-inset));
    --header-height: calc(var(--gg-hd-h) + var(--gg-divider-width));
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

  /* Sticky: the group wrapper steps out of the box tree so the section itself can
     stick against the page (a sticky child of a header-tall wrapper cannot). */
  #header-group { display: contents; }

  .gg-hd-section {
    position: sticky;
    top: 0;
    z-index: var(--layer-sticky);
  }

  /* ── Bar ───────────────────────────────────────────────────────────────── */
  /* crown · links (fill) · actions, in source order at every width (Figma 5261:58;
     phones only change gaps and where the first link group sits). */
  .gg-hd__bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--gg-gap-text);
    box-sizing: content-box;
    block-size: var(--gg-hd-h);
    padding: 0 var(--gg-inset);
    background: var(--gg-hd-bg);
    border-block-end: var(--gg-hd-rule);
  }

  /* The link groups fill the strip's height and set the links on its 9px floor —
     the floor belongs to the links, not to the bar (on the bar it would shrink the
     row the crown centres in). */
  .gg-hd__nav {
    display: flex;
    align-items: flex-end;
    gap: var(--gg-gap-text);
    min-inline-size: 0;
    padding-block-end: var(--gg-inset);
  }

  .gg-hd__nav--end { justify-content: flex-end; }

  /* Figma 5147:92: Inter SemiBold 14, normal line, NO tracking. */
  .gg-hd__link {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    color: var(--gg-hd-ink);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
  }

  /* Black at rest, so the bar reads clearly (Johann 2026-10-11 — Figma's 50%
     resting grey was too faint). Grey only while a panel is open: then every
     link except the one that is open / hovered / current steps back — and the
     close link, which is only ever shown while a panel is open (Johann 2026-11-04). */
  .gg-hd:not([data-open='']) .gg-hd__link:not(:hover, :focus-visible, [aria-current], [aria-expanded='true'], .gg-hd__close) {
    color: var(--gg-hd-muted);
  }

  /* The crown: first in the bar, on the page inset; vertically centred in the
     strip → 9px ink gap top and bottom. */
  .gg-hd__logo {
    align-self: center;
    display: block;
    color: var(--gg-hd-ink);
    line-height: 0;
  }

  .gg-hd__logo svg {
    display: block;
    block-size: var(--gg-hd-logo-h);
    inline-size: auto;
  }

  /* ── Sheet: the roll-down ──────────────────────────────────────────────────
     0fr → 1fr animates to the content's own height with no JS measuring. The
     inner box clips during the roll; the scroll box caps tall panels (a full
     cart on a laptop) to the viewport and scrolls inside. */
  .gg-hd__sheet {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 1;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    background: var(--gg-hd-bg);
    transition:
      grid-template-rows var(--gg-hd-speed) var(--gg-ease-house),
      visibility 0s linear var(--gg-hd-speed);
  }

  .gg-hd[data-open]:not([data-open='']) .gg-hd__sheet {
    grid-template-rows: 1fr;
    visibility: visible;
    border-block-end: var(--gg-hd-rule);
    transition:
      grid-template-rows var(--gg-hd-speed) var(--gg-ease-house),
      visibility 0s;
  }

  .gg-hd__sheet-inner {
    position: relative; /* anchors the desktop close line */
    min-block-size: 0;
    overflow: hidden;
  }

  .gg-hd__scroll {
    max-block-size: calc(100dvh - var(--header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Close line: a bar link ("Schließen (×)", like "Warenkorb (N)") in the sheet's
     bottom-right corner on the 9px inset. Desktop: laid over the panels' own
     bottom padding, so the cell rules run to the sheet's edge. CONTRACT: no panel
     puts content in its bottom-right corner (the line needs ~35px, ~41px on the Spa's
     12px inset) — that is why Search's "Alle anzeigen" sits bottom-left. The header surface behind it masks
     cart rows scrolling under it. Phone: a ruled band of its own (phone block). */
  .gg-hd__close-row {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
    z-index: 1;
    display: flex;
    padding: var(--gg-inset);
    background: var(--gg-hd-bg);
  }

  /* Only the chosen panel is laid out; data-panel only changes on open or switch
     (never on close), so the panel stays visible while the sheet rolls up. */
  .gg-hd__panel { display: none; }

  .gg-hd[data-panel='menu'] [data-panel-id='menu'],
  .gg-hd[data-panel='search'] [data-panel-id='search'],
  .gg-hd[data-panel='cart'] [data-panel-id='cart'] {
    display: block;
    animation: gg-hd-panel-in 0.24s ease both;
  }

  @keyframes gg-hd-panel-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* ── Scrim: dims the page, never the header (it sits under bar and sheet). ─ */
  .gg-hd__scrim {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--gg-hd-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--gg-hd-speed) var(--gg-ease-house);
  }

  .gg-hd[data-open]:not([data-open='']) .gg-hd__scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Bento cells (shared by every panel) ───────────────────────────────────
     Cells side by side are split by one vertical rule; the stage is the free cell
     that holds a teaser (newsletter / category preview). */
  .gg-hd__cell + .gg-hd__cell { border-inline-start: var(--gg-hd-rule); }

  .gg-hd__stage {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: var(--gg-hd-pad) calc(2 * var(--gg-hd-pad));
    container-type: inline-size;
  }

  /* Teasers stack in one grid cell and cross-fade. The slot hugs the far edge of
     the stage (Menu: right, Cart: left) and, once the stage is wide, sits one rail
     width in from that edge — mirroring the rail on the other side (Figma: 221px
     at 1440 and 2560; the narrow 1440 cart stage falls back to the page inset). */
  .gg-hd__stage-slot {
    display: grid;
    align-items: end;
    padding-inline: var(--gg-inset);
  }

  @container (min-width: 900px) {
    .gg-hd__stage-slot { padding-inline: var(--gg-hd-rail); }
  }

  .gg-hd__stage--end .gg-hd__stage-slot { justify-items: end; }
  .gg-hd__stage--start .gg-hd__stage-slot { justify-items: start; }

  .gg-hd__teaser {
    grid-area: 1 / 1;
    inline-size: 100%;
    display: flex;
    justify-content: inherit;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  .gg-hd__stage--end .gg-hd__teaser { justify-content: flex-end; }

  .gg-hd__teaser.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
  }

  /* ── Phone: every link sits right, tighter gaps ─────────────────────────── */
  @media screen and (max-width: 749px) {
    .gg-hd__bar { column-gap: var(--gg-header-bar-gap); }
    .gg-hd__nav--start { justify-content: flex-end; }
    .gg-hd__nav { gap: var(--gg-header-bar-gap); }
    .gg-hd__link--wide { display: none; }

    /* The full-height sheet: the close line is a ruled band at the screen's foot,
       as tall as the header strip it mirrors, the link centred in it. */
    .gg-hd { --gg-hd-close-h: var(--gg-hd-h); }

    .gg-hd__close-row {
      position: static;
      align-items: center;
      justify-content: flex-end;
      box-sizing: content-box;
      block-size: var(--gg-hd-close-h);
      padding-block: 0;
      border-block-start: var(--gg-hd-rule);
    }

    /* The open sheet owns the screen: full height, the page underneath locked. */
    .gg-hd__scroll { block-size: calc(100dvh - var(--header-height) - var(--gg-hd-close-h) - var(--gg-divider-width)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-hd__sheet,
    .gg-hd[data-open]:not([data-open='']) .gg-hd__sheet,
    .gg-hd__scrim,
    .gg-hd__teaser { transition: none; }

    .gg-hd__panel { animation: none !important; }
  }

  /* ── Spa: the same header in orange + black ─────────────────────────────── */
  body[data-spa-mode] .gg-hd {
    --gg-hd-bg: var(--spa-orange);
    --gg-hd-ink: var(--gg-spa-ink);
    --gg-hd-muted: rgb(var(--gg-spa-ink-rgb) / 0.5);
    --gg-hd-rule-color: rgb(var(--gg-spa-ink-rgb) / 0.3);
  }
/* END_SECTION:gg-header */

/* START_SECTION:gg-hero-statement (INDEX:23) */
/* Mobile-first: the band sizes to its content so a short headline never floats
     in a tall, half-empty box. The author's padding is capped to --gg-space-lg (40px)
     on phones via min() — large 60–80px desktop settings collapse, smaller settings
     are respected. The 60vh hero height + full author padding return at ≥750px. */
  .gg-hero-statement {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding-block-start: min(var(--hs-pt, var(--gg-space-xl)), var(--gg-space-lg));
    padding-block-end:   min(var(--hs-pb, var(--gg-space-xl)), var(--gg-space-lg));
    text-align: center;
  }

  .gg-hero-statement__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(var(--gg-space-lg), 6vw, 72px);
    width: 100%;
    padding-inline: clamp(var(--gg-space-md), 5vw, var(--gg-space-xl));
    box-sizing: border-box;
  }

  /* Two-tier responsive type (mirrors gg-title-image--large): keep it huge on
     desktop, but give mobile its own floor/ceiling so shrunken type never gets
     lost inside the 60vh block, and long rotating words ("bling bling") still fit. */
  .gg-hero-statement__title {
    font-family: var(--gg-font-display, 'Vend Sans', sans-serif); /* ≥32px display header */
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: var(--gg-tracking-default);
    color: var(--color-foreground);
    margin: 0;
    /* Wrapping is driven by available width, not a char cap: on a wide 4K screen
       the column is wide enough for ONE line (with comfortable side air), and on
       narrower laptops the same headline wraps to two lines as space gets tight.
       max-width 80vw leaves ~10% air each side on big screens; it scales down so
       smaller viewports force the break naturally. */
    max-width: 80vw;
    margin-inline: auto;
    text-wrap: balance;
  }

  @media screen and (min-width: 750px) {
    .gg-hero-statement {
      min-height: 60vh;
      padding-block-start: var(--hs-pt, var(--gg-space-xl));
      padding-block-end:   var(--hs-pb, var(--gg-space-xl));
    }
    .gg-hero-statement__title { font-size: clamp(3.25rem, 7vw, 4rem); }
  }

  .gg-hero-statement__word {
    display: inline-block;
    will-change: transform, opacity;
    margin-left: 0.25em;
  }

  /* CTA zone — lays out one or more pill/button blocks, wraps on small screens. */
  .gg-hero-statement__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gg-space-md);
  }
/* END_SECTION:gg-hero-statement */

/* START_SECTION:gg-hero (INDEX:24) */
.gg-hero-landing {
    /* Warm white for BOTH overlay elements (statement + field surface) — one
       step warmer than the brand Cream White #FBFAF9 so it complements the
       photography instead of sitting clinically on it (approved 2026-07-06). */
    --hero-white: #faf7f1;
    /* Literal black for things that must NOT follow the text tone (the buttons,
       the search underline). --gg-black is rebound on the overlay, so reading it
       there would flip them with the tone — and in the black tone would cycle. */
    --hero-black: #000000;
    padding-block-start: var(--hero-pt, 12px);
    padding-block-end: var(--hero-pb, 40px);
  }

  /* --- Edge-to-edge card: full width with the flat page margin (smart-hero recipe) --- */
  .gg-hero-landing__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gg-gutter);
    padding-inline: var(--gg-page-pad);
  }

  /* Single-cell stack: image + overlay share the cell, so long content grows
     the card — text can never spill past the rounded edge.
     Mobile: portrait aspect from the setting (max-height as tall-viewport
     guard). Desktop: no fixed ratio — the card stretches to the bottom of the
     first viewport (100svh minus the in-flow header and the section's top
     padding); the crop lands around 16:9 on typical screens, wider on shallow
     ones, and object-fit absorbs it all. */
  .gg-hero-landing__image-wrap {
    grid-column: 1 / -1;
    display: grid;
    /* Explicit width: with width auto, a max-height would TRANSFER through an
       aspect-ratio into a max-width and shrink the card off the right edge.
       Definite width → a cap clamps height only; object-fit crops wider. */
    width: 100%;
    /* Even frame, every width: the card fills the first viewport and its bottom
       gap = the side page margin, so it floats in one consistent --gg-page-pad
       frame — the framed-card language of every other section, all four corners
       visible. (Trialed and rejected 2026-07-06: 80px/56px fold overhang —
       cropped opening card read as accident; desktop full-bleed w/o radius —
       generic, broke the framed-card system.) */
    min-height: calc(100svh - var(--header-height, 64px) - var(--hero-pt, 12px) - var(--gg-page-pad));
  }

  /* Phones may instead keep a fixed portrait ratio (setting "Seitenverhältnis
     (Mobil)" other than "Bildschirm füllen"); max-height guards tall viewports. */
  @media screen and (max-width: 749px) {
    .gg-hero-landing--ratio .gg-hero-landing__image-wrap {
      min-height: 0;
      aspect-ratio: var(--hero-ratio-mobile);
      max-height: 88svh;
    }
  }

  .gg-hero-landing__image-clip {
    grid-area: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--hero-radius);
    min-width: 0;
  }

  .gg-hero-landing__image-clip picture { display: block; }

  /* Absolute fill: the clip's height comes from the grid stretch, so the
     image tracks whatever the card resolves to. */
  .gg-hero-landing__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gg-hero-landing__img--placeholder { opacity: 0.4; }

  /* Video background. video_tag emits the <video> inside its own wrapper div, so
     the wrapper needs the absolute fill too — otherwise it collapses and the
     video sizes to its intrinsic dimensions instead of the card. */
  .gg-hero-landing__image-clip .video-wrapper,
  .gg-hero-landing__image-clip deferred-media {
    position: absolute;
    inset: 0;
    display: block;
  }

  .gg-hero-landing__video {
    object-fit: cover;
  }

  /* One of the pair renders per breakpoint (video_tag has no <source media>). */
  .gg-hero-landing__video--mobile { display: none; }

  @media screen and (max-width: 749px) {
    .gg-hero-landing__image-clip:has(.gg-hero-landing__video--mobile) .gg-hero-landing__video:not(.gg-hero-landing__video--mobile) {
      display: none;
    }
    .gg-hero-landing__video--mobile { display: block; }
  }

  /* Optional scrim for text legibility on bright images — inside the clip so
     it inherits the radius; sits above the image, below the overlay sibling. */
  .gg-hero-landing__image-clip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / var(--hero-scrim, 0%));
    pointer-events: none;
  }

  /* --- Overlay: the block host, stacked as a column on the image ---
     --hero-lift answers the "slightly above middle?" test via the Theme Editor
     and composes with either anchor (transform doesn't feed back into the card
     height).

     align-items is STRETCH, not center: the Editorial / Get-the-Look rules have
     to reach the card edge to line up with the rest of the page's dividers, and
     a shrink-wrapped block could never do that. The Statement block centres
     itself internally instead.

     --hero-overlay-pad is the single source for the inline padding. The overlay
     blocks' rule cancels it with a negative margin to reach the card edge; if
     these two ever stop reading the same var, the rule drifts off the page's
     divider line. Measured from the Figma at ~24px. */
  .gg-hero-landing__overlay {
    --hero-overlay-pad: 24px;
    /* Tone: rebinding the TOKENS flips the locked .gg-text__* roles and .gg-rule
       at once, with no per-role overrides and no edit to the locked shared
       stylesheet. Same technique the theme uses for spa mode. Anything that must
       stay black regardless (the buttons) reads --hero-black instead. */
    --gg-black: var(--hero-ink);
    --gg-divider-color: var(--hero-rule);
    grid-area: 1 / 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: var(--hero-justify, center);
    gap: var(--hero-block-gap, 40px);
    padding: var(--hero-overlay-pad);
    transform: translateY(calc(-1 * var(--hero-lift, 0px)));
  }

  /* Bottom-anchored content sits IN the lower third, not ON the bottom edge.
     Measured on the Figma card (1408x800): the button clears the bottom by 92px,
     nearly 4x the 24px side inset. Scoped to the bottom anchor only — adding it
     unconditionally would bias the CENTRED statement upward, since a flex box
     centres within its content box.
     Not a percentage: percentage padding resolves against the WIDTH even in a
     column, so it would swing with viewport width instead of tracking the card.
     svh tracks the card, whose desktop height is itself viewport-derived. */
  .gg-hero-landing__overlay--bottom {
    padding-block-end: clamp(40px, 11svh, 92px);
  }

  /* Two-tier type (mirrors gg-hero-statement): mobile floor/ceiling so the
     statement fits the portrait card, full display size from 750px. Cream on
     image instead of the statement band's foreground color. */
  .gg-hero-landing__title {
    font-family: var(--gg-font-display, 'Vend Sans', sans-serif);
    font-size: clamp(2rem, 8.5vw, 3rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: var(--gg-tracking-default);
    color: var(--hero-ink, var(--hero-white));
    margin: 0;
    max-width: 85%;
    text-wrap: balance;
  }

  @media screen and (min-width: 750px) {
    .gg-hero-landing__title { font-size: clamp(3.25rem, 7vw, 4rem); }
  }

  .gg-hero-landing__word {
    display: inline-block;
    will-change: transform, opacity;
    margin-left: 0.25em;
  }

  /* --- Search field: shared .gg-lookup__* look, hero-scoped tweaks only
     (same pattern as the Shop's own .gg-shop-nav__suche tweaks). On the image
     the field goes warm white, and the underline is always black at divider
     weight — the shop's soft resting tone disappears against photography. --- */
  .gg-hero-landing .gg-hero-landing__search { width: min(600px, 80%); }

  .gg-hero-landing .gg-lookup__search-wrap {
    background: var(--hero-white);
    /* The shared field draws its underline as a BORDER (it follows the rounded
       corners; a box-shadow paints outside the border box and cut across them).
       Override the colour, not the mechanism — restating a box-shadow here would
       put the old straight line back on top of the curve.

       --hero-black, NOT --gg-black: the field sits inside the overlay, where
       --gg-black is rebound to the text tone. Reading it here would turn the
       underline warm white on a warm-white field — i.e. invisible. */
    border-bottom-color: var(--hero-black);
  }

  .gg-hero-landing .gg-lookup__input {
    padding-block: 7px;
    /* Match the Shop's text inset: there the empty chips mount adds the wrap's
       5px flex-gap before the input's own 5px padding — here there are no
       chips, so the input carries the full 10px itself. */
    padding-inline-start: 10px;
  }

  @media screen and (min-width: 750px) {
    /* Viewport-proportional: ~26vw lands at 600px on 4K (unchanged there) but
       ~400–500px on laptops — a fixed 600px read too wide at 1440. */
    .gg-hero-landing .gg-hero-landing__search { width: clamp(400px, 26vw, 600px); }
  }
/* END_SECTION:gg-hero */

/* START_SECTION:gg-lookup (INDEX:25) */
.gg-lookup-will-animate .gg-lookup__pill {
    opacity: 0;
  }

  .gg-lookup__inner {
    display: grid;
    grid-template-columns: fit-content(100%);
    justify-content: center;
    gap: var(--gg-space-md);
    padding-inline: var(--gg-page-pad);
    padding-block: 0;
  }

  @media screen and (min-width: 750px) {
    .gg-lookup__inner {
      padding-inline: var(--gg-space-lg);
    }
  }

  .gg-lookup__form {
    width: 100%;
  }

  gg-lookup-component {
    display: block;
    width: 100%;
  }

  .gg-lookup__search-wrap {
    position: relative;
    width: 100%;
  }

  .gg-lookup__input {
    width: 100%;
    padding: 10px 22px;
    border-radius: var(--gg-radius-card);
    border: 1px solid var(--color-border);
    font-family: var(--font-primary--family);
    font-size: var(--gg-text-lg);
    background: var(--color-background);
    color: var(--color-foreground);
    -webkit-appearance: none;
  }

  .gg-lookup__input::placeholder {
    color: var(--gg-gray-light);
    opacity: 1;
  }

  .gg-lookup__input:focus-visible {
    outline: 1.5px solid var(--color-foreground);
    outline-offset: 0;
  }

  .gg-lookup__input::-webkit-search-cancel-button {
    display: none;
  }

  .gg-lookup__submit {
    display: none;
  }

  .gg-lookup__pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .gg-lookup__pill {
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 0 12px;
    border-radius: var(--gg-radius-chip);
    border: none;
    background: var(--gg-gray-light);
    font-family: var(--font-primary--family);
    font-size: var(--gg-text-sm);
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition:
      background var(--hover-transition-duration) var(--hover-transition-timing),
      color var(--hover-transition-duration) var(--hover-transition-timing),
      transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .gg-lookup__pill:hover {
    transform: scale(var(--hover-scale-amount));
  }

  /* When any pill is active, dim the rest — a hair lighter than --gg-gray-light
     so it stays visible on the cream page bg (no token for this exact step). */
  .gg-lookup__pills:has(.gg-lookup__pill--active) .gg-lookup__pill:not(.gg-lookup__pill--active) {
    background: #EBEBEB;
    color: var(--gg-gray-mid);
  }

  .gg-lookup__pill--active {
    background: var(--gg-gray-mid);
    color: var(--gg-black);
  }

  /* Loading state while search AJAX is in flight */
  .gg-lookup--loading .gg-lookup__input {
    opacity: 0.6;
  }

  /* AI answer block — hidden in Phase A; styled for Phase E */
  .gg-lookup__ai-answer {
    display: none;
  }

  .gg-lookup__ai-answer[visible] {
    display: block;
  }
/* END_SECTION:gg-lookup */

/* START_SECTION:gg-marken (INDEX:26) */
/* ════════════════════════════════════════════════════════════════════
     GG MARKEN — brand directory (bean wsj0; sticky-stage redesign Figma 3486:29)
     ≥990: 12-col grid — sticky brand image on cols 1–2 (pinned while the
     list scrolls, swapped on row hover/focus), A–Z list on cols 5–12, head
     divider titles Marken (col 1) / A-Z (col 5). Row hover expands the
     Beschreibung text-only (imagery lives in the stage).
     <990: the original single-column list — rows reveal an inline
     image+Beschreibung panel on hover; the stage is hidden.
     Nav CSS is shared via gg-shop-nav-styles.liquid.
     ════════════════════════════════════════════════════════════════════ */

  /* Page gutter at every size. Unlike the Shop page (whose full-width product
     grid stays flush to the edge), the Marken brand list is text — it needs the
     gutter on mobile too, so pad the whole section rather than just the nav.
     (main-collection's mobile-pad rule is now scoped to .product-grid-container,
     so it no longer leaks onto this nav — no cancel needed. review H3) */
  .gg-marken { padding-inline: var(--gg-page-pad); }

  /* List container: plain block at base — the ≥990 block turns it into the
     12-col grid. The letter-block rhythm lives on __groups (one owner at
     every width). */
  .gg-marken__list {
    margin-block-start: var(--gg-space-lg);
  }

  /* A–Z blocks: 48px between blocks at base (no token at this size);
     opened up to 80px in the ≥990 layout per Figma. */
  .gg-marken__groups {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  /* Sticky stage exists in the DOM at every width; it's a desktop construct. */
  .gg-marken__stage { display: none; }

  /* Loading / empty / error line (replaced by the brand list on success). */
  .gg-marken__state {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
    margin: 0;
  }

  /* ── Shared divider type for the header + letter rows ── */
  .gg-marken__head,
  .gg-marken__group-letter {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);          /* 13px */
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* Header divider: two column titles on the 12-col grid, hairline beneath. */
  .gg-marken__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    align-items: end;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
    margin-block-end: 48px;
  }
  .gg-marken__head-col--name { grid-column: 1; min-width: 0; }
  .gg-marken__head-col--az   { grid-column: 5; min-width: 0; }

  /* ── Letter block ── */
  .gg-marken__group {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xs);                 /* 5px: letter divider → first row */
  }

  /* Letter divider: single title + hairline (its own line above the rows). */
  .gg-marken__group-letter {
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  .gg-marken__group-brands {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xs);                 /* 5px between rows */
  }

  /* ── Brand row ──
     The <a> is a block so the hover panel can expand UNDER the row line in
     normal flow (pushing following rows down — no overlap). */
  .gg-marken__brand {
    display: block;
    color: var(--gg-black);
    text-decoration: none;
  }

  /* The visible line: name col1 / product count col5, hairline on THIS element so
     the rule stays put while the panel grows beneath it. */
  .gg-marken__brand-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    /* Top-align: keep the short Marke name at the top of the row rather than
       centered against a cell that could grow taller. */
    align-items: start;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);          /* 13px */
    font-weight: var(--gg-weight-light);
    /* Fixed line-height so the hover weight-change (light→medium) can't grow the
       row height or shift the gaps — only the glyph weight changes, nothing reflows. */
    line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
  }
  /* min-width:0 lets the grid cells shrink so long names/companies wrap instead
     of overflowing their track; overflow-wrap breaks unbreakable strings. */
  .gg-marken__brand-name,
  .gg-marken__brand-city {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .gg-marken__brand-name { grid-column: 1 / 5; }
  .gg-marken__brand-city { grid-column: 5 / -1; }

  /* Hover/focus: row text → medium weight (no transition on weight → no reflow
     animation, it just swaps; the fixed line-height keeps the row height constant).
     :focus-within mirrors :hover so keyboard users get the same affordance. */
  .gg-marken__brand:hover .gg-marken__brand-row,
  .gg-marken__brand:focus-within .gg-marken__brand-row {
    font-weight: var(--gg-weight-medium);
  }

  /* ── Hover panel: brand image (left) + Beschreibung (right) ──
     Collapsed by default; expands in flow on row hover.

     Height animates via grid-template-rows 0fr → 1fr (NOT max-height): 1fr
     resolves to the panel's REAL content height, so the transition runs at a
     constant, content-matched speed the whole way — no fast-snap-then-empty-
     drift that a fixed max-height ceiling (e.g. 600px over ~180px of content)
     produced. The inner wrapper carries overflow:hidden so the clipped content
     slides in cleanly.

     No hard delay: the OPEN uses a slow-start cubic-bezier (ease-in-ish) so the
     first ~third of the motion is gentle — it READS like a brief pause, so a
     quick fly-over barely moves the panel before the cursor leaves, but an
     intentional hover then accelerates open smoothly. CLOSE is the default
     ease-out (no delay) so leaving a row collapses promptly. */
  .gg-marken__brand-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  /* :focus-within mirrors :hover so keyboard/screen-reader users can open the
     panel (Tab to the brand link reveals its image + Beschreibung). */
  .gg-marken__brand:hover .gg-marken__brand-panel,
  .gg-marken__brand:focus-within .gg-marken__brand-panel {
    grid-template-rows: 1fr;
    opacity: 1;
    /* slow-start curve (gentle first, then accelerates) over a slightly longer
       duration — the easing itself supplies the "delay" feel, continuously. */
    transition:
      grid-template-rows 0.5s cubic-bezier(0.7, 0, 0.4, 1),
      opacity 0.45s cubic-bezier(0.7, 0, 0.4, 1);
  }

  /* The single grid row — min-height:0 lets it collapse fully to 0fr; the
     image+text flex layout lives inside. overflow:hidden clips during the slide.
     The top padding rides INSIDE the clipped row (not on the container) so there's
     no residual gap when the panel is closed. */
  .gg-marken__brand-panel-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    gap: var(--gg-space-xs);                 /* 5px image → text */
    align-items: flex-start;
    padding-block-start: var(--gg-space-xs);
  }

  .gg-marken__brand-image {
    flex: 0 0 auto;
    width: 123px;
    aspect-ratio: 123 / 172;
    background-color: #E8E8E8;
    overflow: hidden;
  }
  .gg-marken__brand-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .gg-marken__brand-desc {
    flex: 1 1 auto;
    max-width: 580px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);          /* 13px — testing (was --gg-text-xs 11px) */
    font-weight: var(--gg-weight-medium);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* ── ≥990: sticky-stage layout (Figma 3486:29) ──
     The list becomes the page's 12-col grid: head divider full width, sticky
     image on cols 1–2, letter groups on cols 5–12. The stage's grid area
     spans the full (tall) content row while align-self:start keeps the box
     content-sized — that difference is the sticky travel range. */
  @media screen and (min-width: 990px) {
    .gg-marken__list {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gg-gutter);
      row-gap: 0;
    }

    /* Divider hugs the list now — the 48px base margin was the old airy gap. */
    .gg-marken__head {
      grid-column: 1 / -1;
      margin-block-end: var(--gg-space-sm);
    }

    /* Loading/empty/error line must span the grid, not sit in the col-1 track. */
    .gg-marken__state { grid-column: 1 / -1; }

    .gg-marken__stage {
      display: block;
      grid-column: 1 / 3;
      align-self: start;
      position: sticky;
      /* same pin line as the shop nav (below the floating header); the nav's
         centered band (cols 3–11) never overlaps this col 1–2 slot */
      top: calc(var(--header-height) + 2 * var(--gg-space-md));
    }

    /* The ratio box lives on the IMG (not the stage) so the fine-print
       caption below isn't clipped by the fixed-ratio surface. */
    .gg-marken__stage img {
      width: 100%;
      aspect-ratio: 123 / 172;                 /* same ratio as the old row thumb */
      object-fit: cover;
      background-color: #E8E8E8;               /* surface while an image loads */
      display: block;
    }

    /* Fine print under the image — echoes the shown brand's name; swapped by
       the JS together with the image. */
    .gg-marken__stage-caption {
      display: block;
      margin-block-start: var(--gg-space-xs);
      font-family: var(--gg-font);
      font-size: var(--gg-text-xs);
      line-height: var(--gg-text-xs--lh);
      font-weight: var(--gg-weight-light);
      letter-spacing: var(--gg-tracking-default);
      color: var(--gg-gray-dark);
    }

    /* Swap entrance — image + caption fade as one; retriggered by the JS
       class toggle on each change. */
    @keyframes gg-marken-stage-in {
      from { opacity: 0.25; }
      to   { opacity: 1; }
    }

    .gg-marken__stage--fade img,
    .gg-marken__stage--fade .gg-marken__stage-caption {
      animation: gg-marken-stage-in 0.35s var(--gg-ease-house) both;
    }

    @media (prefers-reduced-motion: reduce) {
      .gg-marken__stage--fade img,
      .gg-marken__stage--fade .gg-marken__stage-caption { animation: none; }
    }

    /* Letter blocks get more air between each other than at base (Figma). */
    .gg-marken__groups {
      grid-column: 5 / -1;
      gap: 80px;
    }

    /* Desktop shows imagery ONLY in the sticky stage — but the panel thumb
       must keep a 1px box instead of display:none: removing the box makes
       Chrome eagerly fetch every loading="lazy" brand image at once (up to
       the 1000-brand cap). A clipped 1px box keeps lazy-loading proximity-
       based exactly like the base layout, and those same 480px URLs warm the
       cache for the stage swaps. */
    .gg-marken__brand-panel-inner { position: relative; }

    .gg-marken__brand-image {
      position: absolute;
      width: 1px;
      height: 1px;
      aspect-ratio: auto;
      overflow: hidden;
      clip-path: inset(50%);
    }
  }

  /* Mobile: name + city stay 2-up but tighter; panel stacks image over text. */
  @media screen and (max-width: 749px) {
    .gg-marken__brand-name { grid-column: 1 / 7; }
    .gg-marken__brand-city { grid-column: 7 / -1; }
    .gg-marken__brand-panel-inner { flex-direction: column; }
    .gg-marken__brand-desc { max-width: none; }
  }
/* END_SECTION:gg-marken */

/* START_SECTION:gg-pdp-info (INDEX:27) */
/* Two rows, stacked. --gg-space-xl is the token for exactly this step
     ("section-level row gap, e.g. PDP info blocks"). */
  .gg-pdp-info.section {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xl);
    background-color: var(--gg-cream);
    /* Same edge-to-edge breathing margin as .product-information — feed the
       spacing-style var so .spacing-style can't reset it to 0 */
    --padding-inline: var(--gg-page-pad);
  }

  /* Each row is the page's 12-col grid (same model as .product-information). */
  .gg-pdp-info__row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    align-items: start;
  }

  /* ── Panel: rule on row 1, columns auto-placed side by side on row 2. No row-gap:
     the divider brings its own 9px to the content it heads. ── */
  .gg-pdp-info__divider {
    --gg-divider-label-start: 1 / 5;
    --gg-divider-label-end: 6 / -1;
  }
  .gg-pdp-info__col--tags  { grid-column: 1 / 5; }
  .gg-pdp-info__col--brand { grid-column: 6 / -1; }

  /* ── Reviews: tracks 1–7 = the block's own repeat(7) grid ── */
  .gg-pdp-info__reviews > * { grid-column: 1 / 8; }

  .gg-pdp-info__brand-divider { display: none; }

  /* ── Phone: everything stacks full width ── */
  @media (max-width: 749px) {
    .gg-pdp-info__row > *,
    .gg-pdp-info__reviews > * {
      grid-column: 1 / -1;
    }
    /* The rule keeps its start label only; the brand column gets its own rule. */
    .gg-pdp-info__divider .gg-divider__labels--grid { display: block; }
    .gg-pdp-info__divider .gg-divider__label--end { display: none; }
    /* Brand only (no tags): the rule would have no visible label — drop it, the
       brand column's own rule takes over. */
    .gg-pdp-info__divider:not(:has(.gg-divider__label:not(.gg-divider__label--end))) {
      display: none;
    }
    .gg-pdp-info__brand-divider { display: block; }
    .gg-pdp-info__col--tags + .gg-pdp-info__col--brand {
      margin-block-start: var(--gg-gap-section);
    }
  }
/* END_SECTION:gg-pdp-info */

/* START_SECTION:gg-product-title (INDEX:28) */
/* Centered title block — mirrors GG Hero Statement on the landing page
     EXACTLY: 60vh centered band with symmetric 80/80 padding, so the gap above
     and below the title is equal and matches the landing-page rhythm. The
     content sits centered; the band below it is the negative space the Product
     Information starts after. */
  .gg-product-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* NO gap: the element carries .gg-stack, which owns the rhythm. A gap here
       would ADD to it — and because blocks/_product-details.liquid emits the same
       .gg-product-title class, a gap in this file silently doubled the PDP's
       title→description step to 48px. */
  }

  .gg-product-title__headline,
  .gg-product-title__brand-row,
  .gg-product-title__description {
    max-width: 100%;
    text-align: center;
  }

  /* Type comes from the shared .gg-text__heading role (added on the element), so
     this only adds what is specific to the hero treatment. Do NOT restate
     font-size/line-height here: this stylesheet and _product-details both emit
     .gg-product-title__headline, and a size here would override the shared role on
     the PDP too. */
  .gg-product-title__headline {
    margin: 0;
    text-wrap: balance;
  }

  /* One-time silver shimmer sweep on page load. The gradient is black with a
     narrow silver highlight, sized 200% so the black always fills the whole
     word at every frame (no off-screen parking → nothing cuts off). We just
     slide the highlight across once; forwards parks it past the text = solid
     black resting state. */
  .gg-product-title__headline {
    background-image: linear-gradient(
      100deg,
      var(--gg-black) 40%,
      #9a9a9a 49%,
      #bdbdbd 50%,
      #9a9a9a 51%,
      var(--gg-black) 60%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gg-title-shimmer 2.6s ease-in-out 0.25s 1 forwards;
  }

  @keyframes gg-title-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-product-title__headline {
      animation: none;
      background-image: none;
      -webkit-text-fill-color: var(--gg-black);
      color: var(--gg-black);
    }
  }

  .gg-product-title__brand-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }

  .gg-product-title__size-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--gg-gray-light);
    padding: 4px 8px;
    border-radius: 0;
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-product-title__vendor {
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    font-weight: var(--gg-weight-semibold);
    color: var(--gg-black);
  }

  /* Type comes from .gg-text__body on the element — only the measure is local. */
  .gg-product-title__description {
    max-width: 350px;
  }

  .gg-product-title__meta {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: var(--gg-text-xs);
    line-height: var(--gg-text-base--lh);
    font-weight: var(--gg-weight-light);
    color: var(--gg-black);
  }

  .gg-product-title__sku-part {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
  }

  .gg-product-title__sku-value {
    color: var(--gg-gray-dark);
  }

  /* Collapse the meta row entirely (no stray column gap) when neither the
     variant title nor the SKU part is visible. */
  .gg-product-title__meta:not(:has(> :not([hidden]))) {
    display: none;
  }
/* END_SECTION:gg-product-title */

/* START_SECTION:gg-smart-hero (INDEX:29) */
/* --- EDGE-TO-EDGE: content spans full width with a flat 16px page margin --- */
  .gg-smart-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 var(--gg-gutter);
    padding-inline: var(--gg-page-pad);
  }

  .gg-smart-hero__inner {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  /* --- Image layer --- */
  .gg-smart-hero__image-wrap {
    position: relative;
    aspect-ratio: var(--smh-ratio);
  }

  .gg-smart-hero__image-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--smh-radius);
  }

  .gg-smart-hero__image-clip picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .gg-smart-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gg-smart-hero__img--placeholder {
    opacity: 0.4;
  }

  /* --- Text overlay — 5 positions over the image --- */
  .gg-smart-hero__text-overlay {
    position: absolute;
    z-index: var(--layer-flat);
  }

  .gg-smart-hero__text-overlay--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .gg-smart-hero__text-overlay--top-left     { top: 56px;    left: 56px;  }
  .gg-smart-hero__text-overlay--top-right    { top: 56px;    right: 56px; }
  .gg-smart-hero__text-overlay--bottom-left  { bottom: 56px; left: 56px;  }
  .gg-smart-hero__text-overlay--bottom-right { bottom: 56px; right: 56px; }

  /* --- Alignment wrappers — above/below and all overlay positions --- */
  .gg-smart-hero__text,
  .gg-smart-hero__text-overlay {
    display: flex;
    flex-direction: column;
  }

  .gg-smart-hero__text--align-center,
  .gg-smart-hero__text-overlay--align-center { align-items: center; }

  .gg-smart-hero__text--align-left,
  .gg-smart-hero__text-overlay--align-left   { align-items: flex-start; }

  .gg-smart-hero__text--align-right,
  .gg-smart-hero__text-overlay--align-right  { align-items: flex-end; }

  /* --- Hotspot container --- */
  .gg-smart-hero__hotspots {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    overflow: clip;
  }

  /* Dialog overrides — scoped to Smart Hero, colors driven by --smh-dialog-* */
  .gg-smart-hero .hotspot-dialog {
    background: var(--smh-dialog-bg);
    border-radius: 20px;
  }

  .gg-smart-hero .hotspot-dialog__product-image {
    border-radius: var(--gg-radius-card);
  }

  .gg-smart-hero .hotspot-dialog__product-title,
  .gg-smart-hero .hotspot-dialog__product-price {
    color: var(--smh-dialog-text);
  }

  .gg-smart-hero .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    color: var(--smh-dialog-text);
    background: var(--smh-dialog-btn-bg);
  }

  .gg-smart-hero .hotspot-dialog .quick-add__button {
    background: var(--smh-dialog-btn-bg);
    color: var(--smh-dialog-text);
    border-color: transparent;
  }

  .gg-smart-hero .hotspot-dialog .quick-add__button .add-to-cart-text {
    background: transparent;
  }

  /* --- Mobile: image full-width, remove column gutters --- */
  @media screen and (max-width: 749px) {
    .gg-smart-hero__inner { grid-column: 1 / -1; }
    .gg-smart-hero__grid  { gap: 0; }

    /* When text is overlaid inside the image: let the container grow
       to fit the text block — image fills behind via position:absolute */
    .gg-smart-hero__image-wrap:has(.gg-smart-hero__text-overlay) {
      aspect-ratio: unset;
      min-height: 320px;
      display: flex;
      align-items: flex-end;
    }

    /* Pull all inside text positions back into flow */
    .gg-smart-hero__text-overlay {
      position: relative;
      inset: auto;
      transform: none;
      width: 100%;
      padding: 16px;
      z-index: var(--layer-flat);
    }
  }
/* END_SECTION:gg-smart-hero */

/* START_SECTION:gg-spa-menu (INDEX:30) */
/* ══ Section shell: flex column — header divider, then the 12-col grid body. ══ */
  .gg-spa-menu.section {
    display: flex;
    flex-direction: column;
    gap: 19px;                       /* Figma: divider → menu */
    --gg-parent-gap: 19px;           /* the divider restates its own distance (gg-divider) */
    --padding-inline: var(--gg-page-pad);
  }

  /* Shared hairline: snippets/gg-rule-styles.liquid (rendered above). The spa look
     comes from the divider TOKENS rebinding under body[data-spa-mode], not from a
     spa-scoped selector — so the promoted, unscoped .gg-rule renders identically
     here while other surfaces can reuse it. */

  /* Divider labels: one weight for the whole role. Each label that sits above a
     hairline is the same role as the editorial divider label, so it takes the same
     weight token -- one step above body copy, which is what separates a label from
     the text under it.

     EACH SELECTOR IS SCOPED TO A PARENT ON PURPOSE. These labels also carry
     .gg-text__body, whose own font-weight declaration lives in gg-text-styles and
     compiles LATER in the bundle at the SAME specificity (0-1-0), so a bare
     .gg-spa-*-label rule loses the cascade and silently does nothing. Adding the
     parent takes each rule to 0-2-0 so it wins. Same reason .gg-spa-panel__info
     scopes its spacing rules -- see the note on __title below. */
  .gg-spa-panel__home .gg-spa-panel__home-label {
    font-weight: var(--gg-weight-medium);
  }
  .gg-spa-panel__aside .gg-spa-panel__aside-label {
    font-weight: var(--gg-weight-medium);
  }
  /* Body: the 12-col grid, menu at col 1, panel at col 6. */
  .gg-spa-menu__body {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    align-items: start;
    width: 100%;
  }

  /* ── LEFT MENU: single accordion column at cols 1–5. Each category + its
     sublist is one group; the active category's sublist expands (inset) below it. ── */
  .gg-spa-menu__nav {
    grid-column: 1 / span 5;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xs);         /* 5px between categories */
    align-items: stretch;
  }
  .gg-spa-group {
    display: flex;
    flex-direction: column;
  }

  /* Button reset — categories/treatments are <button> for a11y. */
  .gg-spa-cat,
  .gg-spa-treat {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    letter-spacing: var(--gg-tracking-default);
  }

  .gg-spa-cat {
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-4xl);   /* 32px */
    line-height: 1.3;
    color: var(--gg-spa-ink-muted);
    transition: color 0.2s ease;
  }
  .gg-spa-cat--active { color: var(--gg-spa-ink); }
  @media (hover: hover) {
    .gg-spa-cat:hover { color: var(--gg-spa-ink); }
  }

  /* Brand-axis divider: label ABOVE a hairline. Narrower than the full menu
     column — sized to the category block, not the whole nav width. */
  .gg-spa-menu__axis {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);          /* 10px: label → hairline */
    margin-block: var(--gg-space-md) var(--gg-space-xs);
    width: 450px;
    max-width: 100%;
  }
  .gg-spa-menu__axis-label {
    color: var(--gg-spa-ink-muted);
  }

  /* Treatment sublist: expands INSET under its category with a smooth animation.
     The grid-template-rows 0fr→1fr trick animates height without a fixed value.
     Opens ONLY when the category is committed by a click (--active, set by JS).
     Keyboard focus also opens it (a11y). Only one --active at a time. */
  .gg-spa-treatlist {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
  }
  .gg-spa-treatlist__inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xs);         /* 5px */
    padding-inline-start: var(--gg-space-md);  /* the slight inset */
  }
  .gg-spa-treatlist--active,
  .gg-spa-group:focus-within .gg-spa-treatlist {
    grid-template-rows: 1fr;
  }
  /* Vertical breathing room only when open (padding on the inner so it collapses
     to true zero height when closed). */
  .gg-spa-treatlist--active .gg-spa-treatlist__inner,
  .gg-spa-group:focus-within .gg-spa-treatlist__inner {
    padding-block: var(--gg-space-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .gg-spa-treatlist { transition: none; }
  }
  .gg-spa-treat {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-regular);
    font-size: var(--gg-text-lg);    /* 16px */
    line-height: 1.3;
    color: var(--gg-spa-ink-muted);
    transition: color 0.2s ease;
    text-align: left;
  }
  .gg-spa-treat--active { color: var(--gg-spa-ink); }
  @media (hover: hover) {
    .gg-spa-treat:hover { color: var(--gg-spa-ink); }
  }

  /* ══ RIGHT: panel spans cols 6–12 and is itself a SUBGRID, so panel children
     land on the SAME page gridlines as Figma (image 6–9, aside 6–11, long 6–12).
     Widths come from the grid tracks — never hardcoded px — so they scale. ══ */
  .gg-spa-menu__panels {
    grid-column: 6 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
  }
  .gg-spa-panel { display: none; }
  .gg-spa-panel--active {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;             /* the 7 panel tracks (page cols 6–12) */
    row-gap: 38px;                   /* info block → image row */
    align-content: start;
  }
  /* Graceful reveal on select — reuses the theme's fadeInUp motion + fade-in
     easing. JS toggles --reveal (with a reflow) so it replays on every select.
     The SSR-active panel also carries --reveal for a nice first-load entrance. */
  .gg-spa-panel--reveal {
    animation: gg-spa-panel-in 0.75s var(--animation-timing-fade-in, cubic-bezier(0.16, 1, 0.3, 1)) both;
  }
  @keyframes gg-spa-panel-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .gg-spa-panel--reveal { animation: none; }
  }

  /* Info block wrapper: aligns to page col 6 (panel track 1). Children keep a
     FIXED width and just align to this gridline — they do NOT span.

     ONE MEASURE for the whole block. Title, meta, shorts and the Auswaehlen bar all
     derive their width from --gg-spa-info-measure, so the bar's right edge, the shorts'
     right hairline and the meta price land on the SAME vertical line by construction.
     Previously each child carried its own hand-summed number (215 + 20 + 219 = 454,
     plus an unrelated 359 on the title) which had to be re-derived by hand on every
     width change and could silently drift apart.

     The span is 6 tracks (page cols 6–11) to SEAT the measure, not to be filled:
     measured at 1440 the 4-track box was only 461.33px, which cannot hold 626. */
  .gg-spa-panel__info {
    grid-column: 1 / span 6;
    --gg-spa-info-measure: 626px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Spacing uses .gg-spa-panel__info descendant selectors so these win over
     .gg-text__body { margin:0 } (which loads later at equal specificity). */
  .gg-spa-panel__info .gg-spa-panel__title {
    width: var(--gg-spa-info-measure);
    max-width: 100%;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-4xl);   /* 32px */
    /* Without this the <h3> inherits Horizon's h3 preset (--font-subheading--weight
       = 500), a step heavier than intended. --gg-weight-book pins a true 400:
       --gg-weight-regular is re-scoped to 320 inside spa mode, so it would land
       too light here. */
    font-weight: var(--gg-weight-book);
    line-height: 1.3;
    color: var(--gg-spa-ink);
    margin: 0 0 var(--gg-space-md);  /* title → meta: tight, the row reads as a caption */
  }
  /* Meta row: duration / category / brand pinned left, PRICE pushed to the right edge.
     Carries the block measure so the price has a right edge to reach — it then lands on
     exactly the Auswaehlen bar's right edge, because both share the same measure. */
  .gg-spa-panel__info .gg-spa-panel__meta {
    width: var(--gg-spa-info-measure);
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-lg);         /* 40px — the tags need air to read as separate
                                        items now that the · separators are gone */
    margin: 0 0 64px;                /* meta → shorts */
  }
  .gg-spa-panel__meta-price { margin-inline-start: auto; }

  /* Two short descriptions: two EQUAL halves of the block measure — align, don't span.
     A 2-col grid rather than two hand-set widths, so the columns cannot drift out of
     agreement with each other or with the bar below them. It also fixes a latent bug:
     the old .gg-spa-panel__short:first-child / :last-child rules were not scoped to
     __shorts, so a treatment with only ONE short matched BOTH and took the 219px
     (last-declared) width instead of 215px.
     align-items:stretch makes both columns the tallest one's height so the two
     hairlines land on the SAME bottom line regardless of text length. */
  .gg-spa-panel__info .gg-spa-panel__shorts {
    width: var(--gg-spa-info-measure);
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: var(--gg-space-lg);         /* 40px */
    margin: 0 0 64px;                /* shorts → Auswählen */
  }
  .gg-spa-panel__short {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);         /* 10px: text → hairline, sits close to its text */
  }
  /* Push the TEXT down so it sits at the bottom (above the aligned hairline);
     both columns' text + hairline then bottom-align regardless of length. */
  .gg-spa-panel__short > :first-child { margin-block-start: auto; }

  /* Auswählen bar: ink fill, orange label left, price right. Thin (Figma h27).
     Takes the block measure (aligns to col 6, does not span).
     The bar is the LAST child of __info, so the space below it is the panel's
     row-gap (38px). The 26px bottom margin tops that up to the 64px the bar wants
     above AND below it — matching the 64px shorts → bar gap. */
  .gg-spa-panel__info .gg-spa-panel__choose {
    width: var(--gg-spa-info-measure);
    max-width: 100%;
    margin-block-end: 26px;          /* + the panel's 38px row-gap = 64px */
  }
  .gg-spa-panel__choose {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gg-space-md);
    padding: 6px 20px;               /* Figma-exact */
    background-color: var(--gg-spa-ink);
    color: var(--spa-orange);
    text-decoration: none;
    font-family: var(--gg-font);
    /* One step ABOVE the page body. This chip is the inverse of the page — orange
       text on the black ink — and inverted type loses more stroke than black-on-orange
       does: the dark fill closes in on the glyph from every side. At the body weight
       the label and price were barely legible here. --gg-weight-book is the spa's
       "one step up" token, so this follows the body if that is ever re-tuned. */
    font-weight: var(--gg-weight-book);
    font-size: var(--gg-text-base);  /* 13px — matches PDP add button */
    line-height: 1.3;
    letter-spacing: var(--gg-tracking-default);
  }
  .gg-spa-panel__choose--static { cursor: default; }
  /* Price in the Auswaehlen bar: one step above the bar label, matching the card
     CTA price. Same reasoning -- inverted chip, and it is the number people scan for.
     Scoped under .gg-spa-panel__choose so it outranks the bar rule at equal specificity. */
  .gg-spa-panel__choose .gg-spa-panel__choose-price {
    font-weight: var(--gg-weight-semibold);
  }

  /* Long description spans all 7 panel tracks (page cols 6–12). */
  .gg-spa-panel__long {
    grid-column: 1 / -1;
    margin: 0;
  }

  /* Image (4 tracks: 6–9) + products (right) share one row. */
  .gg-spa-panel__mediarow {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }
  .gg-spa-panel__figure {
    grid-column: 1 / span 4;         /* page cols 6–9 */
    margin: 0;
  }
  .gg-spa-panel__img {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 7;             /* Figma 453×633 */
    object-fit: cover;
  }
  /* Aligns to page col 10 and keeps a FIXED Figma width — same pattern as
     .gg-spa-panel__info, whose children all derive from one measure
     (--gg-spa-info-measure) so their hairlines and their content share it.
     Without this the column
     stretches across tracks 10–12 and the .gg-rule hairlines overrun the cards'
     right edge (the Add button). */
  .gg-spa-panel__home {
    grid-column: 5 / -1;             /* page cols 10–12 */
    width: 250px;                    /* Figma fixed */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Advisory (above image) + brand (below image) blocks: span 6 panel tracks (page cols 6–11). */
  .gg-spa-panel__aside {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
  }

  /* ══ ≥2000 (2560): grid columns widen naturally; menu keeps fixed width. ══ */

  /* ══ <750 mobile (Figma node 127:2, ~411px frame): panel stacks below the menu.
     Fixed widths from the mobile frame — NOT stretched full-width. ══ */
  @media screen and (max-width: 749px) {
    .gg-spa-menu__body {
      display: flex;
      flex-direction: column;
      align-items: stretch;             /* children fill width (override desktop `start`) */
      gap: var(--gg-space-lg);
    }
    .gg-spa-menu__nav { gap: var(--gg-space-sm); }
    .gg-spa-cat { font-size: var(--gg-text-2xl); }

    /* Panels column: no grid, just a block. */
    .gg-spa-menu__panels {
      display: block;
      grid-column: auto;
    }
    /* Active panel: flex column, full width so the top hairline spans the whole
       content width (children keep their own fixed widths). */
    .gg-spa-panel--active {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      grid-column: auto;
      gap: var(--gg-space-md);          /* 20px between blocks (Figma) */
      padding-block-start: var(--gg-space-md);
      border-block-start: var(--gg-divider-width) solid var(--gg-divider-color);
    }
    /* Take every child off the desktop grid. */
    .gg-spa-panel__info,
    .gg-spa-panel__long,
    .gg-spa-panel__mediarow,
    .gg-spa-panel__figure,
    .gg-spa-panel__home,
    .gg-spa-panel__aside {
      grid-column: auto;
    }

    /* Info block: body group 331 wide (Figma). Extra space below the block
       (button → long desc) on mobile.
       Redeclaring the measure re-points every child at the mobile block width —
       no per-child width override needed. */
    .gg-spa-panel__info { --gg-spa-info-measure: 100%; display: flex; flex-direction: column; width: 100%; max-width: 331px; margin-block-end: var(--gg-space-md); }
    .gg-spa-panel__info .gg-spa-panel__title { width: 234px; max-width: 100%; margin-block-end: 64px; }
    /* Meta stacks vertically, tight, on mobile (brand / category / duration) —
       no overflow risk on narrow phones. The price joins the stack rather than
       floating right, so its desktop auto-margin is reset. */
    .gg-spa-panel__info .gg-spa-panel__meta {
      flex-direction: column;
      gap: var(--gg-space-xs);          /* 5px, tight */
      margin-block-end: 44px;
    }
    .gg-spa-panel__info .gg-spa-panel__meta-price { margin-inline-start: 0; }
    /* Shorts STACK vertically on mobile, 217px wide (Figma). One grid column —
       the desktop rule is a 2-col grid, so flex-direction would no longer apply. */
    .gg-spa-panel__info .gg-spa-panel__shorts {
      grid-template-columns: 1fr;
      width: 217px;
      max-width: 100%;
      gap: var(--gg-space-md);
      margin-block-end: 44px;
    }
    .gg-spa-panel__info .gg-spa-panel__choose { margin-block-end: 0; }

    /* Long desc: 331 wide (Figma). */
    .gg-spa-panel__long { width: 331px; max-width: 100%; }

    /* Mobile hides the treatment image + the BRAND block to cut vertical scroll
       (desktop keeps both). The CONTRA block is deliberately NOT hidden: it carries
       contraindications and booking notes, which are safety information and must not
       disappear on the viewport most people book from. Products keep the SAME 450px
       measure as every other viewport — no mobile-specific width. The base rule's
       `max-width: 100%` is what shrinks it on narrow screens. */
    .gg-spa-panel__figure,
    .gg-spa-panel__aside--brand { display: none; }
    .gg-spa-panel__mediarow { display: flex; flex-direction: column; gap: var(--gg-space-md); }
  }
/* END_SECTION:gg-spa-menu */

/* START_SECTION:gg-spa-treatments (INDEX:31) */
.gg-spa-treatments.section {
    display: flex;
    flex-direction: column;
    gap: var(--gg-it-row-gap, 48px);
    --padding-inline: var(--gg-page-pad);
  }
  .gg-spa-treatments > .gg-ed-divider {
    width: 100%;
  }
/* END_SECTION:gg-spa-treatments */

/* START_SECTION:gg-title-image (INDEX:32) */
/* ── Section base ──
   EDGE-TO-EDGE: flat 16px page margin on all sizes; grid placements below
   extended so title/images reach cols 1 & 12 instead of empty margins. */
.gg-ti {
  grid-column: 1 / -1;
  --padding-inline: var(--gg-page-pad);
  padding-inline: var(--gg-page-pad);
}

/* ── Grid container ── */
.gg-ti__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gg-gutter);
  row-gap: var(--ti-row-gap, 48px);
}

/* ── Title cell ── */
.gg-ti__title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Eyebrow label ──
   Self-contained copy of .gg-key-tags__label styles.
   IMPORTANT: Do NOT use .gg-key-tags__label here. That class is defined inside
   blocks/gg-key-tags.liquid's stylesheet block — it's only output when that block
   is on the page. .gg-ti__eyebrow is defined here so the section is self-contained. */
.gg-ti__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--gg-font, var(--font-body--family));
  font-size: 14px;
  font-weight: 600;
  color: var(--gg-black);
  letter-spacing: var(--gg-tracking-default);
  margin: 0;
}

/* .gg-dot-marker is globally defined in snippets/theme-styles-variables.liquid — no repeat needed. */

/* ── Title text (Brand Quote font scale) ──
   Large display header (≥32px) → Vend Sans (--gg-font-display). The small (16px)
   variant is a deliberately small title, so it opts back to Inter below. */
.gg-ti__title-text {
  font-family: var(--gg-font-display, 'Vend Sans', sans-serif);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--color-foreground);
  white-space: pre-line;
  margin: 0;
}

@media (max-width: 767px) {
  .gg-ti__title-text { font-size: clamp(1.5rem, 6.5vw, 2rem); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .gg-ti__title-text { font-size: clamp(2rem, 4vw, 2.5rem); }
}

@media (min-width: 1400px) {
  .gg-ti__title-text { font-size: calc(32px * 1.25); }
}

/* ── Title size: Klein (16px, all breakpoints) — small title uses body font ── */
.gg-ti__title-text.gg-ti__title-text--small {
  font-size: 16px;
  font-family: var(--gg-font, sans-serif);
}

/* ── Title size: Groß (88px desktop, fluid down) ── */
.gg-ti__title-text--large { font-size: 88px; }

@media (max-width: 767px) {
  .gg-ti__title-text--large { font-size: clamp(2.5rem, 12vw, 3.75rem); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .gg-ti__title-text--large { font-size: clamp(3.5rem, 8vw, 5.5rem); }
}

@media (min-width: 1400px) {
  .gg-ti__title-text--large { font-size: calc(88px * 1.15); }
}

/* ── Image element ── */
.gg-ti__image {
  overflow: hidden;
  border-radius: var(--ti-img-radius, 0);
  min-height: 200px;
  max-width: var(--ti-img-width, 100%);
}

/* height: auto — the image's natural dimensions drive the grid row height.
   In split mode, the row expands to fit the taller of title or image;
   align-self on .gg-ti__title then positions the title within that height.
   NEVER use height: 100% — .gg-ti__image has no explicit height to anchor against. */
.gg-ti__img {
  display: block;
  width: 100%;
  height: auto;
}

.gg-ti__img--placeholder {
  opacity: 0.4;
  height: 200px;
  width: 100%;
}

/* ── Mobile-first defaults: all cells full-width, stacked ──
   No media query = applies everywhere; desktop min-width rules override below.
   grid-row is not set — auto stacking in source order. */
.gg-ti__title,
.gg-ti__image {
  grid-column: 1 / -1;
}

/* Mobile visual order: image always appears above title.
   Title is first in DOM, image is second. Without order:-1 on the image,
   title would appear above image on mobile (wrong). */
.gg-ti__grid--split .gg-ti__image { order: -1; }

/* Stack default (image above title via grid-row: 1 on desktop):
   Same logic — restore visual order on mobile via order:-1. */
.gg-ti__grid--stack:not(.gg-ti__grid--image-below) .gg-ti__image { order: -1; }
/* image_below: title is first in DOM — matches desired visual order. No override needed. */


/* ── Desktop (≥1025px): activate 12-col layout ── */
@media (min-width: 1025px) {

  /* Reset mobile order overrides */
  .gg-ti__grid--split .gg-ti__image,
  .gg-ti__grid--stack .gg-ti__image { order: 0; }

  /* ─────────────────────────────────────────────────
     SPLIT MODE
     col:  1  │  2  3  4  5  │  6  │  7  8  9  10 11  │  12
               └── content ──┘ gap  └─── content ──────┘
     Col 1 and col 12 are gutters — content lives in cols 2–11.
     ───────────────────────────────────────────────── */

  /* LEFT: title cols 2–5 (span 4), gap col 6, image cols 7–11 (span 5).
     justify-self: end — image shrinks toward col 11 (outer right edge).
     align-self: start — container never stretches taller than the image (prevents overflow: hidden crop). */
  .gg-ti__grid--split.gg-ti__grid--align-left .gg-ti__title {
    grid-column: 1 / span 4;
    grid-row: 1;
  }
  .gg-ti__grid--split.gg-ti__grid--align-left .gg-ti__image {
    grid-column: 7 / span 6;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }

  /* RIGHT: mirror of left — title cols 8–11 (span 4), image cols 2–6 (span 5).
     justify-self: start — image shrinks toward col 2 (outer left edge).
     align-self: start — same crop prevention. */
  .gg-ti__grid--split.gg-ti__grid--align-right .gg-ti__title {
    grid-column: 8 / span 5;
    grid-row: 1;
  }
  .gg-ti__grid--split.gg-ti__grid--align-right .gg-ti__image {
    grid-column: 1 / span 6;
    grid-row: 1;
    justify-self: start;
    align-self: start;
  }

  /* CENTER: no image — title spans full content zone, text centred. */
  .gg-ti__grid--split.gg-ti__grid--align-center .gg-ti__title {
    grid-column: 4 / span 6;
    grid-row: 1;
    text-align: center;
    align-items: center;
  }

  /* ─────────────────────────────────────────────────
     STACK MODE
     Title spans full content zone (cols 2–11, row 2).
     Image row 1, positioned left/center/right within cols 2–11.
     justify-self mirrors the alignment direction so image
     shrinks toward its anchored edge, not toward the title.
     ───────────────────────────────────────────────── */
  .gg-ti__grid--stack .gg-ti__title {
    grid-column: 1 / span 12;
    grid-row: 2;
  }

  /* Image: ~4-col cell, justify-self matches alignment direction */
  .gg-ti__grid--stack.gg-ti__grid--align-left   .gg-ti__image { grid-column: 1 / span 4; grid-row: 1; justify-self: start; }
  .gg-ti__grid--stack.gg-ti__grid--align-center .gg-ti__image { grid-column: 5 / span 4; grid-row: 1; justify-self: center; }
  .gg-ti__grid--stack.gg-ti__grid--align-right  .gg-ti__image { grid-column: 8 / span 5; grid-row: 1; justify-self: end; }

  /* image_below: flip title and image rows.
     Only grid-row overrides are needed — grid-column assignments are unchanged. */
  .gg-ti__grid--stack.gg-ti__grid--image-below .gg-ti__title { grid-row: 1; }
  .gg-ti__grid--stack.gg-ti__grid--image-below .gg-ti__image { grid-row: 2; }

  /* No-image mode: title spans full content zone regardless of layout/alignment. */
  .gg-ti__grid--no-image .gg-ti__title {
    grid-column: 1 / span 12;
    grid-row: 1;
  }

  /* ─────────────────────────────────────────────────
     MULTI-IMAGE SPLIT MODE (2 or 3 images)
     Image zone stays cols 7–11 (left) / cols 2–6 (right) — 5 cols total.
     2 images: primary 3 cols + secondary 2 cols, side by side in one row.
     3 images: primary 3 cols spanning both rows + secondary/tertiary 2 cols stacked.
     ───────────────────────────────────────────────── */

  /* Multi-image: row gap matches column gutters */
  .gg-ti__grid--imgs-2,
  .gg-ti__grid--imgs-3 {
    row-gap: var(--gap-sm);
  }

  /* Multi-image: images fill their grid cell fully */
  .gg-ti__grid--imgs-2 .gg-ti__image,
  .gg-ti__grid--imgs-3 .gg-ti__image {
    max-width: 100%;
    align-self: stretch;
  }
  .gg-ti__grid--imgs-2 .gg-ti__img,
  .gg-ti__grid--imgs-3 .gg-ti__img {
    height: 100%;
    object-fit: cover;
  }

  /* ── LEFT alignment ── */

  /* 2 images — left */
  .gg-ti__grid--split.gg-ti__grid--align-left.gg-ti__grid--imgs-2 .gg-ti__image {
    grid-column: 7 / span 3;
    grid-row: 1;
    justify-self: stretch;
  }
  .gg-ti__grid--split.gg-ti__grid--align-left.gg-ti__grid--imgs-2 .gg-ti__image--2 {
    grid-column: 10 / span 3;
    grid-row: 1;
  }

  /* 3 images — left */
  .gg-ti__grid--split.gg-ti__grid--align-left.gg-ti__grid--imgs-3 .gg-ti__image {
    grid-column: 7 / span 3;
    grid-row: 1 / span 2;
    justify-self: stretch;
  }
  .gg-ti__grid--split.gg-ti__grid--align-left.gg-ti__grid--imgs-3 .gg-ti__image--2 {
    grid-column: 10 / span 3;
    grid-row: 1;
  }
  .gg-ti__grid--split.gg-ti__grid--align-left.gg-ti__grid--imgs-3 .gg-ti__image--3 {
    grid-column: 10 / span 3;
    grid-row: 2;
  }

  /* ── RIGHT alignment (mirror) ── */

  /* 2 images — right */
  .gg-ti__grid--split.gg-ti__grid--align-right.gg-ti__grid--imgs-2 .gg-ti__image {
    grid-column: 4 / span 3;
    grid-row: 1;
    justify-self: stretch;
  }
  .gg-ti__grid--split.gg-ti__grid--align-right.gg-ti__grid--imgs-2 .gg-ti__image--2 {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  /* 3 images — right */
  .gg-ti__grid--split.gg-ti__grid--align-right.gg-ti__grid--imgs-3 .gg-ti__image {
    grid-column: 4 / span 3;
    grid-row: 1 / span 2;
    justify-self: stretch;
  }
  .gg-ti__grid--split.gg-ti__grid--align-right.gg-ti__grid--imgs-3 .gg-ti__image--2 {
    grid-column: 1 / span 3;
    grid-row: 1;
  }
  .gg-ti__grid--split.gg-ti__grid--align-right.gg-ti__grid--imgs-3 .gg-ti__image--3 {
    grid-column: 1 / span 3;
    grid-row: 2;
  }

  /* Title grid-row spans both rows when 3 images are present */
  .gg-ti__grid--split.gg-ti__grid--imgs-3 .gg-ti__title {
    grid-row: 1 / span 2;
  }

}
/* END_SECTION:gg-title-image */

/* START_SECTION:header-announcements (INDEX:33) */
.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:hero (INDEX:34) */
.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 {
    display: none;
  }

  .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:35) */
.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:36) */
.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:38) */
/* Artikel-Kopf teilt sich die 1050px-Spalte mit .blog-post-content
     (gg-campaigns.css). Abstand zum Inhalt: exakt 80px — der Flex-Gap des
     Section-Wrappers (--gap, Editor-Slider) wird herausgerechnet, damit der
     Rhythmus unabhängig von der Einstellung stimmt. */
  /* Artikel-Kopf: volle Seitenbreite, Randabstand = Standard --gg-page-pad ab
     Viewport-Kante. grid-column 1/-1 entkommt der Center-Spalte des
     .section-Grids (deren --page-margin-Tracks sind NICHT unser Randmaß) —
     Standard-Vollbreiten-Rezept wie gg-pc-styles. Bewusst breiter als die
     820px-Artikel-Spalte (Johann 2026-07-12). */
  .gg-article-header {
    grid-column: 1 / -1;
    width: 100%;
    padding-inline: var(--gg-page-pad);
    /* Luft zum Seiten-Header — gleicher 60px-Rhythmus wie zwischen den
       Artikel-Blöcken (--gg-block-gap in gg-campaigns.css). */
    margin-block-start: calc(var(--gg-space-lg) + var(--gg-space-md));
    /* Distance to the article below. The divider no longer carries a bottom margin
       of its own, so the header (its only child) owns it. */
    margin-block-end: var(--gg-space-lg);
  }

  .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:39) */
/**
   * 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);
  }

  /**
   * 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:40) */
.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);
    }
  }

  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: none;
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:42) */
/* Removed the GG .product-grid gap overrides (column-gap:5px / row-gap:100px) —
     they fought Horizon's base container-query grid once the container went
     edge-to-edge, packing too many cards. Base grid now drives columns + gaps. */

  /* #ResultsList (rendered by snippets/product-grid.liquid) carries this class
     and relies on it for its grid-column placement in the section's 12-col grid.
     Do NOT remove — without it the grid collapses to a single column. */
  .main-collection-grid {
    grid-column: var(--grid-column--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  #shopify-section-main {
    position: relative;
  }

  @media screen and (min-width: 750px) {
    results-list.product-grid-container {
      padding-inline: var(--gg-page-pad);
    }
  }

  /* Mobile gutter: the edge-to-edge migration dropped the inline padding below
     750px, leaving the nav + header flush to the screen edge. Restore the page
     gutter on the chrome (nav + header) while the full-width product grid stays
     edge-to-edge. (bean sed: mobile-pad)

     Scoped under .product-grid-container (the results-list class ONLY this Shop
     section renders) so it can't leak globally onto the Marken nav, which uses
     the same .gg-shop-nav class but supplies its own gutter. Section stylesheet
     CSS is merged globally by Shopify, so an unscoped .gg-shop-nav rule here would
     double-pad Marken. (review H3) */
  @media screen and (max-width: 749px) {
    .product-grid-container .gg-shop-nav,
    .product-grid-container .gg-collection-header,
    .product-grid-container .gg-filter-panel {
      padding-inline: var(--gg-page-pad);
    }
  }

  /* ── Collection header → standard divider + grid-density toggle row ──
     (Shop-nav + search-field CSS moved to snippets/gg-shop-nav-styles.liquid.) */
  .gg-collection-header {
    margin-block: var(--gg-space-md) var(--gg-space-sm);
  }

  /* Query echo beside the count („creme“) — filled by gg-lookup.js during an
     active search, empty otherwise. Muted so the count stays the anchor. */
  .gg-collection-header__query {
    color: var(--gg-gray-dark);
    font-weight: var(--gg-weight-light);
  }

  /* ── Count reveal: make the number's change VISIBLE ──
     Switching Alle → Gesicht, or running a search, changes the result total in
     the header, but an in-place textContent write is completely silent — the
     eye has no reason to look there. gg-lookup.js (#replayCount) re-triggers
     this on every real change.

     Scoped to the COUNT, deliberately not to .gg-divider__label: the
     label holds the collection title as a bare TEXT NODE, so a label-level
     animation could never exclude the title, and the count changes on every
     keystroke — the 24px desktop title would strobe while typing.

     Reuses gg-float-in (the chips/tags/cards entrance) rather than adding
     another keyframe, so the header moves in the same family as the nav. That
     keyframe is defined in gg-shop-nav-styles.liquid, which this section
     renders — hence the rule lives HERE and not in the site-wide
     gg-divider snippet, where the name would be undefined on every
     non-Shop page. inline-block is required: the count is an inline <span>,
     and transforms do not apply to inline boxes. */
  .gg-collection-header__count {
    display: inline-block;
  }

  .gg-collection-header__count--in {
    animation: gg-float-in 0.5s var(--gg-ease-house) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-collection-header__count--in { animation: none; }
  }

  /* ── Live no-match note (Phase A): message above the grid; when fallback
     suggestions are shown, their clearly-separating heading sits below the
     message (reuses .main-collection-grid__title styling). ── */
  .gg-lookup__result-note {
    padding-block: var(--gg-space-md);
  }

  .gg-lookup__result-note-msg {
    margin: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* base.css indents the grid title by --page-margin inside full-width
     wrappers — inside the note it must align with the message. */
  .gg-lookup__result-note .main-collection-grid__title {
    margin-inline-start: 0;
  }

  /* ── No-match FILTER LEAD: "no matches for X — but there is a filter".
     Sits ABOVE the empty-state message because for these queries it is the
     answer, not a footnote: a facet value can never be found by free-text
     search (Shopify's index cannot read metafields), so the filter is the only
     route to those products. The tags are the same .gg-shop-tag--suggestion
     objects as the typing row, so nothing here restyles them. ── */
  .gg-lookup__result-lead {
    margin-block-end: var(--gg-space-md);
  }

  .gg-lookup__result-lead-msg {
    margin: 0 0 var(--gg-space-sm);
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-lookup__result-lead-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-xs);
  }

  /* ── Grid-swap entrance (Phase B polish): swapped-in cards cascade with a
     soft rise so the change reads. Compositor-only (opacity/transform, no
     layout), one-shot, ~24 nodes. gg-lookup adds .product-grid--gg-enter when
     IT paints (server-rendered initial load is untouched) and sets --gg-i per
     card (capped) for the stagger. House easing = the chip curve. ── */
  @keyframes gg-cards-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* 0.6s + the house curve = the same float the tags have; slightly wider
     stagger so the cascade breathes. */
  .product-grid--gg-enter .product-grid__item {
    animation: gg-cards-in 0.6s var(--gg-ease-house) both;
    animation-delay: calc(var(--gg-i, 0) * 30ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .product-grid--gg-enter .product-grid__item {
      animation: none;
    }
  }

  /* ── Header bar (bean sf87): title+count left, Filter link + grid-size right.
     Base = a simple flex row (mobile AND the 750–989 mid-tier, where 12 narrow
     tracks would collide the Filter link with the toolbar). From 990px the bar
     snaps onto the page's 12-col rhythm: label 1–9 (PDP-title size), Filter on
     col 10 (aligned with the facet panel's Sortieren column below), toolbar
     right-aligned on 11–12. ONE shared bottom rule runs under all three. ── */
  .gg-collection-header__bar {
    display: flex;
    align-items: flex-end;
    gap: var(--gg-space-md);
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* The bar draws the line itself (it spans the filter + toolbar too), so the
     divider contributes only its label here. */
  .gg-collection-header__bar .gg-divider {
    flex: 1 1 auto;
    min-width: 0;
  }
  .gg-collection-header__bar .gg-divider__rule {
    display: none;
  }

  /* Divider label at PDP-title size (the .gg-title--display spec) — the
     collection name is the page's H1-weight anchor now. Shop bar only; the
     site-wide gg-divider snippet is untouched. */
  @media screen and (min-width: 750px) {
    .gg-collection-header__bar .gg-divider__label {
      font-size: var(--gg-text-2xl);
      line-height: var(--gg-text-2xl--lh);
      font-weight: var(--gg-weight-medium);
      letter-spacing: var(--gg-tracking-title);
    }
  }

  /* Filter toggle — text link, mirrors the grid-size legend typography. */
  .gg-collection-header__filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--gg-space-xs);
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  /* "+"/"−" marker in front of the label — same glyph pair as the facet group
     headers (.facets__summary::after in blocks/filters.liquid), flipped by the
     toggle's own aria-expanded state. currentColor so it follows the hover dim. */
  .gg-collection-header__filter::before {
    content: "+";
    font-size: var(--gg-text-lg);
    font-weight: var(--gg-weight-light);
    line-height: 1;
  }

  .gg-collection-header__filter[aria-expanded="true"]::before {
    content: "\2212";
  }

  .gg-collection-header__filter:hover { color: var(--gg-gray-dark); }

  .gg-grid-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
  }

  @media screen and (min-width: 990px) {
    .gg-collection-header__bar {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gg-gutter);
      align-items: end;
    }
    .gg-collection-header__bar .gg-divider { grid-column: 1 / 10; }
    .gg-collection-header__filter { grid-column: 10 / 11; justify-self: start; }
    .gg-grid-toolbar { grid-column: 11 / -1; justify-self: end; }
  }

  /* Mobile: label + Filter link only (no grid-size control — density is fixed
     single/double column there). */
  @media screen and (max-width: 749px) {
    .gg-collection-header__bar { justify-content: space-between; }
    .gg-grid-toolbar { display: none; }
  }

  /* ── Grid-size text toggle: "Grid size: Normal Small" ── */
  .gg-grid-size {
    display: flex;
    align-items: baseline;
    gap: var(--gg-space-sm);
    margin: 0;
    white-space: nowrap;
  }

  .gg-grid-size__legend {
    padding: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-grid-size__option {
    position: relative;
    display: inline-flex;
    cursor: pointer;
  }

  /* Hide the native radio; the text label is the control */
  .gg-grid-size__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }

  .gg-grid-size__label {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-mid);
    transition: color var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  .gg-grid-size__option:hover .gg-grid-size__label {
    color: var(--gg-gray-dark);
  }

  /* Selected size reads black */
  .gg-grid-size__input:checked ~ .gg-grid-size__label {
    color: var(--gg-black);
    font-weight: var(--gg-weight-regular);
  }

  .gg-grid-size__input:focus-visible ~ .gg-grid-size__label {
    outline: 1.5px solid var(--gg-black);
    outline-offset: 2px;
  }

  .gg-collection-header .rte {
    margin-block: var(--gg-space-sm);
    font-family: var(--gg-font);
    font-size: 14px;
    line-height: var(--gg-ed-body-lh, 16.5px);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    max-width: 550px;
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:44) */
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:45) */
.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:46) */
.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-primary);
    cursor: pointer;
    text-decoration: underline;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration: none;
    }
  }
/* END_SECTION:password-footer */

/* START_SECTION:password (INDEX:47) */
/* Vertically centre the page content between the (absent) header and the
     password footer — .password-main-content is a flex column (flex:1). */
  .section-password {
    flex-grow: 1;
    display: flex;
    align-items: center;
  }
  .section-password > .section {
    width: 100%;
  }

  /* The page's standard 12-col grid. Section is full-width, so restore the
     page gutters (--gg-page-pad, same as the footer) instead of letting
     content touch the viewport edges. */
  .gg-pw {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-md);
    align-items: end;
    padding-inline: var(--gg-page-pad);
  }

  /* Wordmark — left-aligned in the right region, bottom-aligned to the rule. */
  /* Logo shares the divider's row and bottom-aligns, so it sits just above the
     rule (cols 8–12) — overlapping the full-width divider in the same grid cell. */
  .gg-pw__logo {
    grid-row: 1;
    grid-column: 8 / -1;
    align-self: end;
    justify-self: start;
    margin-block-end: var(--gg-space-sm);
    display: inline-flex;
    color: var(--gg-black);
  }
  .gg-pw__wordmark {
    display: inline-flex;
  }
  /* Plain span (not .svg-wrapper) so base.css's icon-size clamp never applies. */
  .gg-pw__wordmark svg {
    display: block;
    width: auto;
    height: 44px;
  }

  /* Newsletter divider — label (left) + full-width hairline. */
  .gg-pw__divider {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: end;
  }

  /* Signup form — left half. */
  .gg-pw__form {
    grid-row: 2;
    grid-column: 1 / 7;
    align-self: start;
    display: block;
    margin: 0;
  }
  /* hCaptcha renders an empty node until challenged; give it room if it appears. */
  .gg-pw__form .h-captcha:not(:empty),
  .gg-pw__form [class*='captcha']:not(:empty) {
    margin-block: var(--gg-space-sm);
  }
  .gg-pw__field {
    display: flex;
    align-items: stretch;
    gap: var(--gg-space-sm);
  }
  /* Underscore input — same border-bottom style as the footer newsletter.
     0-2-0 specificity to beat base.css `input:not(...)` (0-1-1). */
  .gg-pw .gg-pw__input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 4px;
    border: 0;
    border-bottom: var(--gg-divider-width) solid var(--gg-black);
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
    color: var(--gg-black);
    font: inherit;
    font-size: var(--gg-text-base); /* 13px */
    letter-spacing: var(--gg-tracking-default);
  }
  .gg-pw .gg-pw__input:focus,
  .gg-pw .gg-pw__input:hover,
  .gg-pw .gg-pw__input:focus-visible {
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border-bottom-color: var(--gg-black);
  }
  /* Squared black button — match the input height, centre the label. */
  .gg-pw__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .gg-pw__message {
    margin: var(--gg-space-sm) 0 0;
    font-size: var(--gg-text-xs);
    letter-spacing: var(--gg-tracking-default);
  }

  /* Brand text — right region. Caps its line length so it ALIGNS within the
     column instead of spanning it (editorial text behaviour). */
  .gg-pw__text {
    grid-row: 2;
    grid-column: 8 / -1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
    max-width: min(460px, 100%);
  }
  /* WILLKOMMEN10 (and any emphasis in the body copy) reads as an underlined code. */
  .gg-pw__body u {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ── Mobile: single column, source order (logo → divider → form → text) ── */
  @media screen and (max-width: 749px) {
    .gg-pw {
      grid-template-columns: 1fr;
      align-items: start;
    }
    .gg-pw__logo,
    .gg-pw__divider,
    .gg-pw__form,
    .gg-pw__text {
      grid-row: auto;
      grid-column: 1 / -1;
    }
    .gg-pw__wordmark svg {
      height: 38px;
    }
    .gg-pw__text {
      max-width: 100%;
    }
  }
/* END_SECTION:password */

/* START_SECTION:product-hotspots (INDEX:48) */
/* 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: 0px;
    --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[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

    .quick-add__button {
      position: relative;
      padding-block: 0;
      box-shadow: none;
      align-items: center;
      justify-self: flex-end;
      height: fit-content;
      translate: var(--padding-2xs) 0;
      border: none;
      color: var(--color-foreground);
      background-color: var(--color-background);
      overflow: visible;
      pointer-events: all;
      opacity: 1;
      animation: elementSlideInTop var(--animation-speed) var(--animation-easing);
      transition-property: translate;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      &::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: calc(50px + 2px);
        border: 2px solid transparent;
        pointer-events: none;
        transition-property: border-color;
        transition-duration: 0s;
        transition-timing-function: var(--ease-out-cubic);
      }

      &:is(:hover, :focus, :focus-visible, :active) {
        translate: 0 0;
        transition-delay: var(--animation-speed-slow);

        &::before {
          border-color: rgb(var(--color-foreground-rgb) / var(--opacity-15));
          transition-duration: var(--animation-speed);
          transition-delay: var(--animation-speed-slow);
        }
      }
    }
  }
/* END_SECTION:product-hotspots */

/* START_SECTION:product-information (INDEX:49) */
/* ── GreenGlam sticky add-to-cart (Figma 5215:132) ──
     A full-width strip pinned flush to the viewport bottom — no inset, no gap —
     with the house hairline on its TOP edge (it sits under the page, so the
     line faces up). Surface, thumb and type come from snippets/gg-item-card-styles;
     this block owns only placement, motion, the hairline and the button. */
  .sticky-add-to-cart__bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: calc(var(--layer-sticky) - 1); /* below the sticky header */
    border-block-start: var(--gg-divider-width) solid var(--gg-divider-color);
    opacity: 0;
    transform: translateY(100%);

    @starting-style {
      opacity: 0;
      transform: translateY(100%);
    }
  }

  @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'] {
    opacity: 1;
    transform: translateY(0);
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    display: none;
  }

  .sticky-add-to-cart__info[data-has-image='false'] {
    padding-left: var(--padding-lg);
  }

  /* Variant sits above brand + title (eyebrow), whatever the DOM order. */
  .sticky-add-to-cart__variant { order: -1; }

  /* The house black button. .button IS that button (theme-styles-variables:
     padding, 12px type, hover) — this rule adds only what differs here:
     • colour: every .add-to-cart-button is toned grey through the pill tokens
       (the Warenkorb exception); this one re-points the pair back to black.
     • height: .add-to-cart-button (buy-buttons) gives the PDP buy button its tall
       fixed height; the sticky one sizes from the house padding instead. */
  .sticky-add-to-cart__bar .sticky-add-to-cart__button {
    --gg-pill-btn-bg: var(--gg-black);
    --gg-pill-btn-color: var(--gg-cream);
    position: relative;
    height: auto;
  }

  .sticky-add-to-cart__bar .add-to-cart-icon {
    display: none;
  }

  /* No sticky add-to-cart bar on mobile */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart {
      display: none;
    }
  }

  /* GreenGlam PDP — accordion rows (heading + body roles) */
  .product-information .accordion .details__header {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-semibold);
    font-size: var(--gg-text-base);
    line-height: 1.3;
    letter-spacing: var(--gg-tracking-default);
  }

  .product-information .accordion .details-content {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-light);
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    color: var(--gg-gray-dark);
    letter-spacing: var(--gg-tracking-default);
  }
/* END_SECTION:product-information */

/* START_SECTION:product-list (INDEX:50) */
@media (min-width: 750px) {
    /* Slide width: 3-col card = 3+peek layout in 10-col track */
    [data-testid="product-list"] .resource-list.force-full-width .resource-list__slide {
      width: calc(3 * var(--gg-col) + 2 * var(--gg-space-md));
      flex-shrink: 0;
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:product-recommendations (INDEX:51) */
product-recommendations {
    display: block;
    min-height: 420px;
  }

  @media (min-width: 750px) {
    .product-recommendations .resource-list.force-full-width .resource-list__slide {
      width: calc(3 * var(--gg-col) + 2 * var(--gg-space-md));
      flex-shrink: 0;
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:quick-order-list (INDEX:52) */
.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:57) */
.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:_accordion-row (INDEX:58) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:59) */
.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).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

  /* Hide underline unless text is using paragraph styles. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .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 > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .text-block--align-center,
  .text-block--align-center > * {
    margin-inline: auto;
  }

  .text-block--align-right,
  .text-block--align-right > * {
    margin-inline-start: auto;
  }
/* END_BLOCK:_announcement */

/* START_BLOCK:_blog-post-card (INDEX:60) */
.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 .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;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:_blog-post-card */

/* START_BLOCK:_blog-post-content (INDEX:61) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:62) */
.blog-post-card__content-text a {
    color: var(--color-primary);
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_BLOCK:_blog-post-description */

/* START_BLOCK:_blog-post-featured-image (INDEX:63) */
.blog-post-featured-image {
    --width: 100%;
    --custom-width: 100%;

    display: block;
    position: relative;
    width: var(--width);
  }

  .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:64) */
.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:65) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    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:66) */
.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:67) */
.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:68) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:69) */
.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 {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      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);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: 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;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:70) */
.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;
    border-radius: var(--style-border-radius-buttons-primary);
    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__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:73) */
.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:75) */
.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:79) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

  .featured-blog-posts-card__inner {
    gap: var(--gap);
  }

  .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__content {
      --flex-wrap: nowrap;
    }
  }

  @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;
  }

  .featured-blog-posts-card__content h4 {
    margin: 0;
  }
/* END_BLOCK:_featured-blog-posts-card */

/* START_BLOCK:_featured-blog-posts-image (INDEX:80) */
.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:82) */
.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:85) */
.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:86) */
.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:_gg-accordion-item (INDEX:87) */
.gg-manufacturer-address {
    font-style: normal;
    /* The --wide panel drops the container's 350px cap so the EU label can be
       legible; the address is running text and keeps the text measure. */
    max-width: 350px;
  }
  .gg-mfr-sep {
    margin: 0 0.5em;
    opacity: 0.4;
  }
/* END_BLOCK:_gg-accordion-item */

/* START_BLOCK:_gg-category-hover (INDEX:88) */
/* The block spans its columns on the Row's 12-col grid, and lays its two parts
     (image + list) on its OWN sub-grid so they align to the global columns. */
  .gg-cat-hover {
    grid-column: var(--ed-col-start, 1) / span var(--ed-cols);
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    min-width: 0;
  }

  .gg-cat-hover__media {
    grid-column: 1 / span var(--cat-img-span);
    position: relative;
    /* Fixed 4:5 PORTRAIT box — collection images vary in ratio, so crop to fill. */
    aspect-ratio: 4 / 5;
    border-radius: var(--cat-img-radius, 0);
    overflow: hidden;
    min-width: 0;
  }

  /* Layers absolute-fill the portrait box; the resting one (data-i=1) shows, the
     rest fade in on hover. */
  .gg-cat-hover__layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }
  .gg-cat-hover__layer[data-i="1"] { opacity: 1; }

  .gg-cat-hover__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .gg-cat-hover__img--placeholder { background: var(--gg-gray-lightest); }

  /* The list sits to the right of the image, starting at --cat-list-start.
     Self-owned styling since the Shop nav moved to compact tags (sf87): this
     block KEEPS the original editorial recipe (32px list, hover grey) and no
     longer renders or shares gg-shop-nav-styles — the two looks diverged by
     design, and the landing page stops shipping the whole Shop nav CSS. */
  .gg-cat-hover__list {
    grid-column: var(--cat-list-start, 7) / -1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .gg-cat-hover__link {
    /* Links size to their text, not the column, so the hover area fits the word */
    align-self: flex-start;
    font-family: var(--gg-font);
    font-size: var(--gg-text-4xl);          /* 32px */
    line-height: var(--gg-text-4xl--lh);
    font-weight: var(--gg-weight-regular);  /* 400 */
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: none;
    overflow-wrap: break-word;
    transition: color var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  .gg-cat-hover__link:hover { color: var(--gg-gray-dark); }

  /* ── HOVER SWAP (pure CSS) ── hovering link data-i=N reveals layer data-i=N
     and hides the resting layer 1. :has() scopes it to THIS block. Covers up to
     12 categories (extra rules are inert when fewer are present). */
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="2"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="3"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="4"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="5"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="6"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="7"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="8"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="9"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="10"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="11"]:hover) .gg-cat-hover__layer[data-i="1"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="12"]:hover) .gg-cat-hover__layer[data-i="1"] {
    opacity: 0;
  }
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="2"]:hover) .gg-cat-hover__layer[data-i="2"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="3"]:hover) .gg-cat-hover__layer[data-i="3"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="4"]:hover) .gg-cat-hover__layer[data-i="4"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="5"]:hover) .gg-cat-hover__layer[data-i="5"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="6"]:hover) .gg-cat-hover__layer[data-i="6"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="7"]:hover) .gg-cat-hover__layer[data-i="7"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="8"]:hover) .gg-cat-hover__layer[data-i="8"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="9"]:hover) .gg-cat-hover__layer[data-i="9"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="10"]:hover) .gg-cat-hover__layer[data-i="10"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="11"]:hover) .gg-cat-hover__layer[data-i="11"],
  .gg-cat-hover:has(.gg-cat-hover__link[data-i="12"]:hover) .gg-cat-hover__layer[data-i="12"] {
    opacity: 1;
  }

  /* ── DISTRIBUTE (reorder) fallback ──────────────────────────────────────
     When this block sits in a Row with "Distribute" on, the Row is a FLEX
     container, so the subgrid above has no parent grid tracks to map to (same
     trap as the Editorial Column — see gg-editorial-flex-distribute-gotchas #4).
     Recreate the image-left / list-right split as a horizontal flex at the SAME
     proportions baked into the subgrid: media = image_span/col_span of the
     block, list = its trailing columns, and the leftover column(s) fall between
     them via space-between (the gap). Desktop only — the block already collapses
     to a vertical stack under 750px (below), and scoping to min-width:750px keeps
     that mobile rule from being out-specified. */
  @media screen and (min-width: 750px) {
    .gg-ed-row--split .gg-cat-hover {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: start;
      column-gap: var(--gg-gutter);
    }
    .gg-ed-row--split .gg-cat-hover .gg-cat-hover__media {
      /* image keeps its share; never shrinks — the leftover becomes the gap. */
      flex: 0 0 calc(var(--cat-img-span) / var(--ed-cols) * 100%);
    }
    .gg-ed-row--split .gg-cat-hover > .gg-cat-hover__list {
      flex: 0 1 calc((var(--ed-cols) - var(--cat-list-start) + 1) / var(--ed-cols) * 100%);
    }

    /* List-on-left: flip the two via `order` (image + list can't be dragged apart
       — one block — so this is the swap). space-between then puts the list flush
       left, the image flush right, the leftover column as the gap between. */
    .gg-ed-row--split .gg-cat-hover--list-left .gg-cat-hover__media {
      order: 2;
    }
    .gg-ed-row--split .gg-cat-hover--list-left > .gg-cat-hover__list {
      order: 1;
    }
  }

  /* Mobile: stack the image over the list, both full width. */
  @media screen and (max-width: 749px) {
    .gg-cat-hover {
      display: flex;
      flex-direction: column;
      gap: var(--gg-space-md);
    }
    .gg-cat-hover__media,
    .gg-cat-hover__list { width: 100%; }

    /* Fixed mobile order for the Category section: the large image + categories
       unit ALWAYS stacks first, then the small-image column — no matter how the
       two units were drag-reordered on desktop (Distribute). order:-1 floats this
       unit ahead of the default-order sibling column. Scoped to .gg-cat-hover, so
       only the Category section is affected; other editorial sections untouched. */
    .gg-ed-row--split .gg-cat-hover { order: -1; }
  }
/* END_BLOCK:_gg-category-hover */

/* START_BLOCK:_gg-divider (INDEX:89) */
/* Span the full content width wherever it lands (grid or flex parent). */
  .gg-divider-block {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* No spacing rule here on purpose: the divider no longer carries a bottom margin
     of its own, so the parent section's gap is the single source of spacing. */
/* END_BLOCK:_gg-divider */

/* START_BLOCK:_gg-editorial-col (INDEX:90) */
/* The Column occupies --ed-cols of the parent Row's REAL 12-col grid (via the
     Row's `grid-column: span N` rule), and uses SUBGRID so its own children
     inherit those exact N gridlines — i.e. a stacked image + text under the row
     align to the SAME global 12-col grid as everything else (the page design
     system), not a private local grid. Children stack vertically (each spans the
     full N columns by default) with row-gap. */
  .gg-ed-col {
    display: grid;
    grid-template-columns: subgrid;
    grid-auto-rows: max-content;
    row-gap: var(--ed-col-gap, 20px);
    /* Declare it so a divider inside can cancel it (see snippets/gg-divider.liquid). */
    --gg-parent-gap: var(--ed-col-gap, 20px);
    align-content: start;
    min-width: 0;
  }

  /* Children fill the Column's N subgrid columns by default and stack in rows.
     A child with its own --ed-cols (a narrower Width) still snaps to the shared
     gridlines because the subgrid columns ARE the global ones. */
  .gg-ed-col > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* Fallback for the rare browser without subgrid: behave like a plain stack so
     the layout still reads correctly (alignment falls back to full-width). */
  @supports not (grid-template-columns: subgrid) {
    .gg-ed-col {
      display: flex;
      flex-direction: column;
    }
    .gg-ed-col > * { width: 100%; }
  }

  .gg-ed-col--align-center { justify-items: center; }
  .gg-ed-col--align-end { justify-items: end; }

  /* Mobile: the Column is itself a proportionally-sized child of the (flex) Row
     — its outer width carries the desktop balance. Internally it becomes a plain
     vertical stack so its image+text fill the Column's width (subgrid has no
     parent grid tracks to map to once the Row is flex on mobile). */
  @media screen and (max-width: 749px) {
    .gg-ed-col {
      display: flex;
      flex-direction: column;
    }
    .gg-ed-col > * { width: 100%; }
  }
/* END_BLOCK:_gg-editorial-col */

/* START_BLOCK:_gg-editorial-collection-list (INDEX:91) */
/* The shared .gg-shop-nav__kategorien rule (gg-shop-nav-styles) is globally
     scoped and, at ≥750px, hard-pins `grid-column: 1 / 3; grid-row: 2;
     max-width: …` for the Shop page. Inside an editorial Row that placement is
     wrong, so override it here. The `.gg-ed-row >` prefix lifts specificity to
     (0,1,1) so it beats the leaked (0,1,0) rule regardless of snippet load
     order, and re-applies this block's own column span from --ed-cols. */
  .gg-ed-collection-list {
    min-width: 0;
  }
  .gg-ed-row > .gg-ed-collection-list {
    grid-column: var(--ed-col-start, auto) / span var(--ed-cols);
    grid-row: auto;
  }
  /* Inside a Column it fills the Column's subgrid columns. */
  .gg-ed-col > .gg-ed-collection-list {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  @media screen and (min-width: 750px) {
    .gg-ed-row > .gg-ed-collection-list {
      grid-column: var(--ed-col-start, auto) / span var(--ed-cols);
      grid-row: auto;
      max-width: none;
    }
    .gg-ed-col > .gg-ed-collection-list {
      grid-column: 1 / -1;
      max-width: none;
    }
  }
  /* Mobile: inside a Column it fills the Column's width. Directly in a Row it
     keeps its proportional width (from the Row's mobile rule reading --ed-cols),
     so the desktop balance carries through — no full-width override here. */
  @media screen and (max-width: 749px) {
    .gg-ed-col > .gg-ed-collection-list {
      width: 100%;
    }
  }
/* END_BLOCK:_gg-editorial-collection-list */

/* START_BLOCK:_gg-editorial-divider (INDEX:92) */
/* Wrapper exists only to carry the optional heading above the shared divider and
     to span the parent grid. The rule, the label type and the 5px label gap all
     live in snippets/gg-divider.liquid — this block must not restate them.

     The old stylesheet also cancelled the section's row-gap with
     `margin-block-end: calc(var(--gg-space-md) - var(--gg-it-row-gap, 48px))`.
     That existed only because the divider had no say in its own spacing; the
     parent's gap now owns it, so the hack is deleted rather than ported. */
  .gg-ed-divider {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    /* Optional heading → the shared divider below it: the same 9px a divider keeps
       to the content it heads. */
    gap: var(--gg-gap-tight);
    /* This wrapper, not the divider inside it, is the section's flex child, so IT
       carries the distance to the content below and the inner divider stays flush. */
    margin-block-end: calc(var(--gg-gap-tight) - var(--gg-parent-gap, 0px));
  }

  .gg-ed-divider:has(+ .gg-text__body),
  .gg-ed-divider:has(+ *:not(:has(.gg-text__heading)) .gg-text__body) {
    margin-block-end: calc(var(--gg-gap-text) - var(--gg-parent-gap, 0px));
  }

  /* The inner divider is not the flow sibling of the content — zero its own. */
  .gg-ed-divider > .gg-divider {
    margin-block-end: 0;
  }
/* END_BLOCK:_gg-editorial-divider */

/* START_BLOCK:_gg-editorial-group (INDEX:93) */
/* Horizontal pair: children grow in proportion to their Width (--ed-cols), so a
     2-col image + a 4-col text split this 6-col pair as 2:4 of the page grid. */
  .gg-ed-group {
    display: flex;
    align-items: var(--ed-group-valign, start);
    /* column-gap = the horizontal gutter on desktop; row-gap kicks in when the pair
       stacks on mobile so the items don't collapse together. */
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-md);
    min-width: 0;
  }
  .gg-ed-group > * {
    flex: var(--ed-cols, 1) 1 0;
    min-width: 0;
  }

  /* Mobile: the pair stacks like everything else. */
  @media screen and (max-width: 749px) {
    .gg-ed-group {
      flex-direction: column;
      align-items: flex-start;
    }
    .gg-ed-group > * {
      flex-basis: auto;
      width: 100%;
    }
  }
/* END_BLOCK:_gg-editorial-group */

/* START_BLOCK:_gg-editorial-image (INDEX:94) */
/* The FIGURE is the grid child: it carries the column placement and (optional)
     sticky, and stacks the rounded image above its caption. */
  /* An image block with no image set renders an empty figure. Left in the flow it
     still claims its parent's row-gap, pushing the text below it down by that gap
     (measured 20px under the Category Showcase divider). Take it out of the flow. */
  .gg-ed-figure:not(:has(img, picture, svg, video)) {
    display: none;
  }

  .gg-ed-figure {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
  }

  /* Caption defaults to the image width; cap it (Caption width setting) so it
     doesn't run one long line under a huge image. Stays left-aligned. */
  .gg-ed-figure__caption {
    max-width: var(--ed-caption-w, 100%);
  }

  /* The image fills its column WIDTH (set by grid-column span) and its HEIGHT
     follows the dropped image's OWN aspect ratio — no fixed box, no cropping.
     Drop any image and it keeps its natural proportions. */
  .gg-ed-image {
    border-radius: var(--ed-img-radius, 0);
    overflow: hidden;
    min-width: 0;
  }

  .gg-ed-image__img {
    display: block;
    width: 100%;
    height: auto; /* natural height from the image's intrinsic ratio */
  }

  /* Optional image link: transparent wrapper, no layout change. */
  .gg-ed-image-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Aspect-locked (the "Landscape image" presets): the box holds a FIXED ratio
     and the real image is cropped to fill it, so any photo becomes a landscape
     band. Overrides the natural-height rule above. */
  .gg-ed-image--locked {
    aspect-ratio: var(--ed-img-ratio, 16 / 10);
  }
  .gg-ed-image--locked .gg-ed-image__img {
    height: 100%;
    object-fit: cover;
  }

  /* Placeholder (no image set): an SVG has no intrinsic ratio, so give the box a
     fallback ratio (--ed-img-ratio, an editor-only aspect setting) just so the
     editor shows a sensibly-shaped frame until a real image is dropped in. */
  .gg-ed-image--placeholder {
    aspect-ratio: var(--ed-img-ratio, 4 / 5);
    background: var(--gg-gray-lightest);
  }
  .gg-ed-image--placeholder .gg-ed-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_BLOCK:_gg-editorial-image */

/* START_BLOCK:_gg-editorial-row (INDEX:95) */
/* The REAL, CONSTANT 12-col grid — the page's design system, identical in
     every Row and every preset. Children consume columns via `grid-column:
     span N` (set from their plain Width dropdown) and auto-flow left→right in
     drag order, so every edge snaps to a shared 12-col gridline. Gutter
     (--gg-gutter = the page margin, the grid's standard column gap) is fixed so the rhythm never
     drifts. Tip: a Row's block Widths normally sum to 12 to fill it edge to
     edge; summing to less leaves trailing columns empty (a deliberate gap). */
  .gg-ed-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-md);
    align-items: var(--ed-row-valign, start);
  }

  /* Placement: a child sets --ed-cols (span) and optionally --ed-col-start (the
     1-indexed column it begins at). With a start, the child lands EXACTLY there
     — this is how the Figma frames' intentional empty gutter columns (e.g. a
     blank column between a text block and the next image) are reproduced. With
     start:auto (the default), children auto-flow left→right in drag order. */
  .gg-ed-row > * {
    --ed-cols: 12;
    --ed-col-start: auto;
    grid-column: var(--ed-col-start) / span var(--ed-cols);
    min-width: 0;
    box-sizing: border-box;
  }

  /* ── "Distribute" (Essay text-heavy layout) ─────────────────────────────
     A flex row on the SAME 12-col rhythm: each child keeps its column WIDTH
     (flex-basis derived from --ed-cols so edges still land on the 12-col grid),
     but a child flagged "Separate before" (.gg-ed--push) gets margin-inline-start:
     auto. In flex, auto margins eat ALL the free space — i.e. the leftover columns
     (12 − sum of widths) — and turn it into a gap BEFORE that child. So:
       • adjacent blocks (no flag) stay glued at the standard gutter — the pair;
       • the flagged block is pushed away by exactly the leftover columns — the gap;
       • TWO flagged blocks split the leftover into two equal gaps (the airy look);
       • it is all relational: reorder the blocks and the gap follows, never breaks.
     Widths should sum to ≤ 12; the remainder is the gap. */
  .gg-ed-row--split {
    display: flex;
    flex-wrap: wrap;
    align-items: var(--ed-row-valign, start);
    /* The units sit at the two ends and ALL leftover columns fall BETWEEN them —
       order-independent, so reordering the units never moves the gap to an edge.
       Two units → one gap; three units → two equal gaps (the airy look). */
    justify-content: space-between;
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-md);
  }
  .gg-ed-row--split > * {
    /* Exact width of N of the 12 columns, gutters included — matches the grid.
       0 1 (shrinkable) + min-width:0 so a tight line never overflows or wraps. */
    flex: 0 1 calc(
      var(--ed-cols, 12) * ((100% - 11 * var(--gg-gutter)) / 12)
      + (var(--ed-cols, 12) - 1) * var(--gg-gutter)
    );
    min-width: 0;
  }
  /* The Text block's measure (min/max-width:min(measure,100%)) assumes its parent
     is a fixed grid CELL. In a flex row that measure would cap the flex ITEM —
     shrinking it frees space that flex redistributes (the image grows, the gap
     shifts, the page can even widen and nudge the header). So here the COLUMN width
     comes only from flex-basis (col_span), and the measure caps just the text LINES
     inside — fully decoupled from layout. */
  .gg-ed-row--split .gg-ed-text {
    min-width: 0;
    max-width: none;
  }
  .gg-ed-row--split .gg-ed-text > * {
    max-width: var(--ed-text-measure, 450px);
  }
  /* Same story for the Card-Text: its min-width:400px assumes a grid cell and would
     overflow a narrow flex column (~750–1000px). Let the column width (flex-basis)
     own it so the card fills its unit instead. */
  .gg-ed-row--split .gg-smh-text__card,
  .gg-ed-row--split .gg-smh-text__bare {
    min-width: 0;
    /* Fill a narrow column, but never stretch past the card's design width on big
       screens (the leftover just widens the gap). */
    max-width: var(--smh-card-w, 400px);
  }
  /* A Column (vertical stack) uses subgrid, which needs a GRID parent. In this flex
     row it has none, so force it to a plain vertical stack at its own column width
     — it reads as one reorderable unit (e.g. "image with text below"). */
  .gg-ed-row--split .gg-ed-col {
    display: flex;
    flex-direction: column;
  }
  .gg-ed-row--split .gg-ed-col > * {
    width: 100%;
  }

  /* Mobile: the split row stacks like everything else (full-width, no pushed gap). */
  @media screen and (max-width: 749px) {
    /* Stacked media sits --gg-gap-tight (9px) below the text it belongs to — the
       same value as the page inset, so the stack reads as one tight unit
       (Figma 5083:6277: text bottom 282 → figure top 291). */
    .gg-ed-row {
      row-gap: var(--gg-gap-tight);
    }
    .gg-ed-row--split {
      flex-direction: column;
      align-items: flex-start;
      row-gap: var(--gg-gap-tight);
      /* main axis is vertical when stacked — don't spread blocks down the page. */
      justify-content: flex-start;
    }
    .gg-ed-row--split > * {
      flex-basis: auto;
      width: var(--ed-mobile-w, 100%);
    }
    .gg-ed-row--split > .gg-ed--push {
      margin-inline-start: 0;
    }
  }

  /* Bottom-trailing sticky (the "Landscape image + card/text" presets): the tall
     image governs the row height; the card/text PINS to the bottom of the
     viewport and trails along the image as you scroll, releasing at the row's
     top edge. Pure CSS sticky.

     `position: sticky; bottom:` only engages on an element that is being scrolled
     UP past the bottom line — i.e. one whose resting position is LOW in its
     containing block. A grid item with `align-self: start` rests at the TOP, so a
     bottom-sticky never triggers and it just sits at the top (the bug we hit).
     `align-self: end` parks the card at the bottom of the tall image, so as the
     section scrolls up into view the card reaches the bottom line and pins there,
     trailing the image until the row's top reaches it.

     Disabled under 750px (the row stacks — nothing to pin against).

     The toggle lives on each block (Card-Text and Text both expose a 3-way
     selector emitting `.gg-smh-text--sticky-bottom` or `--sticky-top`), so a
     block owns its own behaviour — no row-level switch. */
  .gg-smh-text--sticky-bottom {
    position: sticky;
    bottom: 16px;
    align-self: end;
  }

  /* Top-pin sticky (classic column-pin, like the PDP info panel): the card rests
     at the TOP of the tall row, then pins to the viewport top once scrolled to,
     staying until the row scrolls past. Offset by the sticky header group so it
     clears the header (same var header.js sets; fallback for other pages). */
  .gg-smh-text--sticky-top {
    position: sticky;
    top: calc(var(--header-group-height, 150px) + 16px);
    align-self: start;
  }

  /* Overlay: children stack on one cell; image fills, Card-Text floats centered
     on top. */
  .gg-ed-row--overlay {
    grid-template-columns: 1fr;
  }
  .gg-ed-row--overlay > * {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .gg-ed-row--overlay > .gg-smh-text__card,
  .gg-ed-row--overlay > .gg-smh-text__bare {
    align-self: center;
    justify-self: center;
    z-index: 1;
  }

  /* Mobile: single stack. Each block declares its own --ed-mobile-w. Almost
     everything is full width (100%); only the Card-Text insets to ~78%
     left-aligned when it's a secondary (narrow-span) card, so it reads as
     supporting without getting tiny. (The inset used to also apply to small
     images/columns but looked wrong on photos, so it's now Card-Text only —
     those blocks just hardcode 100%.) */
  @media screen and (max-width: 749px) {
    .gg-ed-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .gg-ed-row > * {
      width: var(--ed-mobile-w, 100%);
      grid-column: auto;
      grid-row: auto;
    }
    /* No row height to pin against once stacked — release the sticky child. */
    .gg-smh-text--sticky-bottom,
    .gg-smh-text--sticky-top {
      position: static;
    }
    /* Overlay stays overlaid on mobile (card centered on the full image). */
    .gg-ed-row--overlay {
      display: grid;
      grid-template-columns: 1fr;
      align-items: center;
    }
    .gg-ed-row--overlay > * {
      width: 100%;
      grid-column: 1 / -1;
      grid-row: 1;
    }
    .gg-ed-row--overlay > .gg-smh-text__card,
    .gg-ed-row--overlay > .gg-smh-text__bare {
      width: auto;
    }
  }
/* END_BLOCK:_gg-editorial-row */

/* START_BLOCK:_gg-editorial-text (INDEX:96) */
/* Fixed-but-shrinkable, like the Card-Text: the text PREFERS its measure width
     and only narrows when the available space is smaller than that. max-width
     caps the line length; min-width keeps the grid track from strangling it
     below the measure while there's still room (it reflows to the column/viewport
     only when that's the smaller value). Images SPAN; text holds its measure. */
  .gg-ed-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(var(--ed-text-measure, 450px), 100%);
    min-width: min(var(--ed-text-measure, 450px), 100%);
  }

  /* Fill the grid column (no reading-measure cap on the block). The block fills
     its column; the paragraph inside runs to the column edge by default (the
     editorial two-text needs this to reach col 12 at 2560). */
  .gg-ed-text--fill {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
  .gg-ed-row--split .gg-ed-text--fill > *,
  .gg-ed-text--fill > * {
    max-width: 100%;
  }

  /* Divider + N Texts (no image in the row): keep a readable max line width so a
     very wide column at 2560 doesn't run one endless line. Only image-less rows
     get this cap, so the image+two-text editorial still fills to the edge.

     SCOPE — this and the 2000px rule below are for TEXT-ONLY sections (the
     "Divider + N Texts" presets). The test must be made on the SECTION, not the
     row: in a stacked image/text layout the image lives in its OWN row, so the
     text row has no figure and would wrongly qualify, pinning the paragraph to
     520px however many columns the block spans. At ≥2000px that turned the grid
     into a flex line of equal 520px items, which silently disabled col_span
     entirely (a 6-col block rendered no wider than a 3-col one). Keying off
     .gg-image-text:not(:has(.gg-ed-figure)) means: no image anywhere in the
     section → text-only → apply the reading cap and the flex line. */
  .gg-image-text:not(:has(.gg-ed-figure)) .gg-ed-row .gg-ed-text--fill > * {
    max-width: 520px;
  }

  /* 2560: with the reading cap, spread-out grid columns (1/5/9) leave huge gaps.
     Switch the image-less multi-text row to an auto-flow of capped columns with a
     fixed gap, so the blocks sit next to each other instead of edge-to-edge. */
  @media screen and (min-width: 2000px) {
    .gg-image-text:not(:has(.gg-ed-figure)) .gg-ed-row:has(.gg-ed-text--fill) {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      column-gap: calc(var(--gap-sm) * 3);
      row-gap: var(--gg-space-lg);
    }
    .gg-image-text:not(:has(.gg-ed-figure)) .gg-ed-row .gg-ed-text--fill {
      flex: 0 1 520px;
    }
  }

  /* Tablet (Figma 960): in an IMAGE + two-text row (the Spa editorial), the two
     fill-columns stack into one right-hand column (cols 7–12) beside the image.
     Scoped to rows that contain an image figure, so the image-less Divider + N
     Texts presets keep their own column placement at the tablet tier. */
  @media screen and (min-width: 750px) and (max-width: 1099px) {
    .gg-ed-row:has(.gg-ed-figure) .gg-ed-text--fill { grid-column: 7 / span 6; }
  }

  .gg-ed-text--align-center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .gg-ed-text--align-right {
    align-items: flex-end;
    text-align: right;
    margin-inline-start: auto;
  }

  /* First-line indent (opt-in). Only the first visual line of the body indents. */
  .gg-ed-text--indent .gg-text__body {
    text-indent: 5.5em;
  }

  /* Pin fine print to the bottom of the column (opt-in): stretch to the row height
     and push the last child (the fineprint) down. Needs a taller sibling in the
     same row to have height to fill. Releases when the row stacks (mobile). */
  .gg-ed-text--pin-fineprint {
    height: 100%;
    align-self: stretch;
  }
  .gg-ed-text--pin-fineprint .gg-text__fineprint {
    margin-block-start: auto;
  }
  @media screen and (max-width: 749px) {
    .gg-ed-text--pin-fineprint {
      height: auto;
    }
    .gg-ed-text--pin-fineprint .gg-text__fineprint {
      margin-block-start: 0;
    }
  }

  /* Italic fine print (opt-in) — e.g. a signature line. */
  .gg-ed-text__fineprint--italic {
    font-style: italic;
  }
/* END_BLOCK:_gg-editorial-text */

/* START_BLOCK:_gg-faq-item (INDEX:97) */
/* Each row is a hairline-separated band — the gg-divider stroke and colour, so
     the FAQ rows and the section's head rule are visibly the same line. The PDP
     copy of this pattern hardcodes --gg-gray-light; the token is correct. */
  .gg-faq__item {
    display: block;
  }

  .gg-faq__item .details {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Closed-row pitch: 10px above + 10px below the 19px line ≈ the 48px the Figma
     draws, expressed in the token rather than as a literal height. */
  .gg-faq__trigger {
    padding-block: var(--gg-space-sm);
  }

  /* The rule under the QUESTION stays visible while the item is open, so an open
     row still reads as a divider band rather than losing its top edge. */
  .gg-faq__item .details[open] > .gg-faq__trigger {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* summary is display:flex from base.css — this fills it as a flex item. */
  .gg-faq__header {
    flex: 1;
    display: flex;
    align-items: center;
    text-align: left;
  }

  /* Inter Medium 14 — --gg-text-md. The Figma draws 16, but the frame predates
     the 9/5/24/48 type rebuild; 14 is the size this scale gives the role. */
  .gg-faq__question {
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-medium);
    line-height: var(--gg-text-md--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* + / − marker LEFT of the question. order:-1 places it ahead of the flex:1
     header. Glyph only, no box. The 10px width + 14px gap are the Figma's
     measurements and together make the 24px the answer indents by. */
  .gg-faq__trigger::before {
    content: '+';
    order: -1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--gg-faq-marker-width);
    margin-inline-end: var(--gg-faq-marker-gap);
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-regular);
    line-height: 1;
    color: var(--gg-black);
  }

  .gg-faq__item .details[open] > .gg-faq__trigger::before {
    content: '−'; /* U+2212 minus — matches the + visual weight, as on the PDP */
  }

  /* 24px question → answer (--gg-gap-text, the canonical step), and the answer
     aligns under the QUESTION rather than the marker: marker + its gap. */
  .gg-faq__answer {
    padding-block: var(--gg-gap-text);
    padding-inline-start: calc(var(--gg-faq-marker-width) + var(--gg-faq-marker-gap));
    max-width: var(--gg-faq-answer-measure, 580px);
  }

  /* Richtext from the editor can arrive with its own block elements; the answer
     is one type role, so flatten them rather than letting an <h3> repaint. */
  .gg-faq__answer :is(h1, h2, h3, h4, h5, h6, strong, b) {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
  }

  .gg-faq__answer > :first-child { margin-block-start: 0; }
  .gg-faq__answer > :last-child { margin-block-end: 0; }

  .gg-faq__answer a {
    color: inherit;
    text-underline-offset: 2px;
  }
/* END_BLOCK:_gg-faq-item */

/* START_BLOCK:_gg-hero-products (INDEX:99) */
/* This overlay is a LIST, not a text stack: the mini-cards and their separators
     sit tight so they read as one list. The divider above them keeps the standard
     9px from .gg-stack — only the card-to-card step is overridden here.
     (The old version set a container `gap` and then cancelled it again on the head;
     with .gg-stack owning the rhythm, one override replaces both.) */
  .gg-hero-ovl--products > * + * {
    margin-block-start: var(--gg-space-sm);
  }
  /* ...but the divider keeps the shared 9px — it heads the list, it is not in it. */
  .gg-hero-ovl--products > .gg-divider + * {
    margin-block-start: var(--gg-gap-tight);
  }

  /* Cards fill the block width (unlike the Spa's fixed 250px column), so the CTA
     sits out at the right with the meta on the left. */
  .gg-hero-ovl--products .gg-mini-card {
    width: 100%;
  }
/* END_BLOCK:_gg-hero-products */

/* START_BLOCK:_gg-hero-statement (INDEX:100) */
/* Centres itself rather than relying on the overlay: the overlay is now
     align-items:stretch so the Editorial/Get-the-Look rules can reach the card
     edge. The statement keeps its own centring and its own wider padding. */
  .gg-hero-stmt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(64px, 14svh, 160px);
    padding: clamp(0px, 5vw - 24px, 32px);
  }

  @media screen and (min-width: 750px) {
    .gg-hero-stmt { gap: clamp(56px, 12svh, 128px); }
  }
/* END_BLOCK:_gg-hero-statement */

/* START_BLOCK:_gg-spa-wordmark (INDEX:101) */
/* The block is the grid child (carries placement). The SVG scales to the full
     column width; height follows so it keeps the artwork's aspect ratio. Bottom-
     aligned so it sits on the baseline of the row (Figma: mark hugs the bottom,
     next to the image card). */
  .gg-spa-wordmark {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
  }
  .gg-spa-wordmark svg {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Asset hardcodes fill:#000001 on every path — force the spa off-white so the
     mark reads on the orange page (mirrors the header spa-logo override). */
  body[data-spa-mode] .gg-spa-wordmark svg,
  body[data-spa-mode] .gg-spa-wordmark svg path {
    fill: var(--gg-spa-ink) !important;
  }

  /* ── Column placement (Figma) ───────────────────────────────────────────────
     The mark occupies cols 5–11 (col 5 / span 7) on every desktop + tablet size —
     it never reaches the right edge (col 12). The preset bakes this; the rule
     below just guarantees it across the tablet tier too. Mobile: full width (the
     row stacks). Placement is grid-column so col_start is honored. */
  @media screen and (min-width: 750px) {
    .gg-ed-row .gg-spa-wordmark { grid-column: 5 / span 7; }
  }

  /* ── Landing fills the first viewport, content BOTTOM-anchored ───────────────
     The landing section (the .gg-image-text that contains the wordmark row) is at
     least a full viewport tall, minus the in-flow header, and pushes its single
     row to the BOTTOM — so the negative space falls at the TOP. Works on every
     viewport; on mobile the image→wordmark gap grows with the viewport so the
     mark still lands at the bottom. Scoped via :has() so only the landing reacts. */
  .gg-image-text.section:has(.gg-spa-wordmark) {
    /* Below the mark: one page margin — the same frame as the sides and as the
       landing hero's bottom gap (was a fixed 80px until 2026-11-04). */
    --gg-spa-landing-air: var(--gg-inset); /* the Spa rebinds --gg-inset to 12px on body; --gg-page-pad stays 9 (resolved at :root) */
    min-height: calc(100svh - var(--header-height, 64px));
    justify-content: flex-end;
    padding-block-end: var(--gg-spa-landing-air);
  }
  /* Mobile: the row stacks (image above wordmark). Fill the section height and
     SPACE them apart — image stays at the top, wordmark drops to the bottom, and
     the gap between them grows with the viewport (Figma mobile). The section's
     bottom padding keeps the mark off the very edge. */
  @media screen and (max-width: 749px) {
    .gg-image-text.section:has(.gg-spa-wordmark) .gg-ed-row {
      min-height: calc(100svh - var(--header-height, 64px) - var(--gg-spa-landing-air, 40px));
      justify-content: space-between;
    }
  }

  /* Desktop: the landing image is 2½ columns (Johann 2026-11-04: 2 too small, 3 too
     big). Grid items span whole columns, so the preset gives it a 3-column cell
     (col_span 3) and this takes half a column off: 100% − ½ column, where one
     column = (cell − 2 gutters) / 3. Its right edge lands mid-column by design. */
  .gg-ed-row:has(.gg-spa-wordmark) .gg-ed-figure {
    width: calc(100% - (100% - 2 * var(--gg-gutter)) / 6);
  }

  /* Mobile: the landing image is a feature card at top-left — two-thirds of the
     row (8 of 12 columns, the editorial row's own span formula, so its edge lands
     on a grid line), NOT full width like a normal stacked editorial image. The
     wordmark below runs full width. (Was a fixed 137px from Figma 24:82; enlarged
     2026-11-04.) Targets the figure that shares a row with the wordmark, so only
     the landing is affected. */
  @media screen and (max-width: 749px) {
    .gg-ed-row:has(.gg-spa-wordmark) .gg-ed-figure {
      width: calc(8 * ((100% - 11 * var(--gg-gutter)) / 12) + 7 * var(--gg-gutter));
    }
  }
/* END_BLOCK:_gg-spa-wordmark */

/* START_BLOCK:_header-logo (INDEX:102) */
.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;

    /* Make sure the logo visually hugs the left edge of the column when it is the first item in the left column */
    margin-inline: calc(-1 * var(--padding-inline-start));

    &[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:103) */
.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;

    &:hover,
    &:focus {
      color: var(--menu-top-level-font-color);
    }

    @media screen and (min-width: 750px) {
      font-size: var(--menu-top-level-font-size-desktop);
    }
  }

  .menu-list__link-title {
    padding-inline: calc(var(--gap-xl) / 2);
  }
  [slot='overflow'] .menu-list__link-title {
    padding-inline: 0;
  }

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::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[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    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 {
    background-color: transparent;
    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.color-scheme-matches-parent,
    .overflow-menu.color-scheme-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);

    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 starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

  [data-submenu-overlap-bottom-row] {
    .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
    .overflow-menu::part(overflow) {
      clip-path: rect(var(--top-row-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    }
  }

  /* 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;

    .menu-list__link {
      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;
    }

    .menu-list__link[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;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:106) */
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:110) */
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-card-gallery (INDEX:113) */
/* Shared inset for the absolutely-positioned card overlays (badges + quick-add)
     so they sit the same distance from the image edge. Tightened from the old
     --padding-xs + card padding. quick-add.liquid reads the same var. */
  .card-gallery {
    --gg-card-edge: 8px;
    --gg-card-badge-height: 25px;
  }

  /* Badge = the SAME visual build as the quick-add bar (snippets/quick-add.liquid):
     full-width (minus the shared edge inset), centered, same height/font/grey/squared.
     It sits in the SAME bottom slot as the quick-add bar; on card hover the bar fades
     in over it (higher z-index) and the badge fades out, so the quick-add "takes its
     place". It's only a badge (no add-to-cart). Sold-out adds orange text. */
  .product-badges {
    position: absolute;
    bottom: var(--gg-card-edge);
    left: var(--gg-card-edge);
    width: calc(100% - (2 * var(--gg-card-edge)));
    z-index: var(--layer-flat);
    transition: opacity var(--animation-speed) var(--animation-easing);
  }

  /* On hover the quick-add bar takes this slot — fade the badge out underneath it. */
  product-card:is(:hover, :focus-within) .product-badges {
    opacity: 0;
  }

  .product-badges__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--gg-card-badge-height);
    padding: 0;
    background: var(--gg-gray-light);
    color: var(--gg-black);
    border-radius: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);          /* 12px */
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    line-height: 1;
    text-transform: none;
  }

  /* Sold-out: orange text — the only difference from the Sale badge. */
  .product-badges__badge--sold-out {
    color: var(--gg-gray-lightest);
    background: var(--gg-gray-mid);
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:116) */
/* MOB-C: the two part wrappers are layout-transparent by default, so the leaf
     items (title, spacer, buy, variant, quick-add, accordions) flow in the single
     .group-block-content flex column exactly as before. Mobile (≤749) overrides
     them to real flex columns in product-information-content.liquid. */
  .pd-part {
    display: contents;
  }

  @media (min-width: 750px) {
    .product-details__spacer {
      height: 110px;
      flex-shrink: 0;
    }
  }

  /* GG product title — left-aligned, sits above the buy block. Heading → body is
     --gg-gap-text, identical to an editorial text block; type comes from the shared
     .gg-text__* roles on the elements themselves. */
  .gg-product-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--gg-gap-text);
  }

  .gg-product-title__headline,
  .gg-product-title__description {
    text-align: left;
  }

  /* Brand divider: spans the panel (the title stack is align-items:flex-start) and
     stays panel-width — like the Größe rule, not a page-bleeding section divider.
     --gg-divider-bleed is the divider's own documented parameter for this. */
  .gg-product-title__brand {
    align-self: stretch;
    --gg-divider-bleed: 0px;
  }

  /* ── Static "Größe" indicator (single-size products) ──────────────────────
     Mirrors gg-variant-selector's size grid so single-size products match the
     selectable variant look. Self-contained here because the gg-vs snippet CSS
     is only output when that snippet renders (multi-variant products). */
  .gg-vs--static-size {
    display: block;
    width: 100%;
  }

  .gg-vs--static-size .gg-vs__indicator {
    display: flex;
    align-items: center;
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-light);
    font-size: var(--gg-text-base);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
    margin: 0 0 var(--gg-space-sm);
  }

  .gg-vs--static-size .gg-vs__indicator-value {
    font-weight: var(--gg-weight-medium);
    margin-inline-start: 0.35em;
  }

  .gg-vs--static-size .gg-vs__grid--size {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
  }

  /* Static pill = the variant pill's REST look (grey, unselected). */
  .gg-vs--static-size .gg-vs__pill--static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gg-gray-light);
    color: var(--gg-black);
    border-radius: 0;
    height: 28px;
    padding-inline: var(--gg-space-sm);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* Type comes from .gg-text__heading on the element — restating it here is what
     kept the PDP title out of step with every other editorial heading. */
  .gg-product-title__headline {
    margin: 0;
    text-wrap: balance;
  }

  /* One-time silver shimmer sweep on page load. Gradient is black with a narrow
     silver highlight, sized 300% so black always fills the whole word at every
     frame; we slide the highlight across once and forwards parks it off-text. */
  .gg-product-title__headline {
    background-image: linear-gradient(
      100deg,
      var(--gg-black) 40%,
      #9a9a9a 49%,
      #bdbdbd 50%,
      #9a9a9a 51%,
      var(--gg-black) 60%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gg-title-shimmer 2.6s ease-in-out 0.25s 1 forwards;
  }

  @keyframes gg-title-shimmer {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-product-title__headline {
      animation: none;
      background-image: none;
      -webkit-text-fill-color: var(--gg-black);
      color: var(--gg-black);
    }
  }


  /* Type comes from .gg-text__body on the element — only the reading measure is
     specific to the details column. Scoped to the block: sections/gg-product-title
     emits the same class name, and an unscoped rule in either file would decide the
     other's width by source order. */
  .product-details .gg-product-title__description {
    max-width: min(350px, 100%);
  }

  /* 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;
  }

  /* GG: the details column width must NOT depend on accordion content. DevTools
     showed the inner .group-block-content.layout-panel-flex shrinking to content
     (330px closed → 410px open). Pin both the outer group-block AND the inner
     content panel to full width so the panel holds a constant 410px regardless of
     which accordion is open. */
  .product-details > .group-block,
  .product-details > .group-block > .group-block-content {
    width: 100%;
  }

  @media screen and (min-width: 750px) {
    .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:121) */
.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:122) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
  }

  .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;
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_smart-hero-text (INDEX:123) */
/* --- Pill — colors driven by --smh-pill-bg / --smh-pill-text set inline --- */
  .gg-smh-text__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: 25px;
    padding: 0 10px;
    border-radius: 0; /* square pill (bean ged4) */
    background: var(--smh-pill-bg);
    color: var(--smh-pill-text);
    font-family: var(--font-body--family);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
  }

  /* --- Body text --- reads the shared body TOKENS rather than copying their
     values. It used to restate 14px / 16.5px, which is exactly how it fell out of
     step when the spec moved to 14/17. Color stays driven by --smh-body-color
     (combo logic); max-width stays the card measure. */
  .gg-smh-text__body {
    font-family: var(--gg-font);
    font-size: var(--gg-ed-body-size);
    line-height: var(--gg-ed-body-lh, var(--gg-ed-body-lh-fig));
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--smh-body-color);
    margin: 0;
    /* Fill the card's content box — the line length is governed by the CARD
       width (one source of truth), not a second independent cap that fought it
       and produced the cramped 2–3-word lines. */
    max-width: 100%;
  }

  /* --- CTA dotted pill — same architecture as Ausverkauft badge --- */
  .gg-smh-text__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    height: 25px;
    background: var(--smh-cta-bg);
    color: var(--smh-cta-color);
    padding: 0 10px 0 6px;
    border-radius: var(--gg-radius-chip);
    font-family: var(--font-body--family);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: var(--gg-tracking-default);
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.18s ease;
  }

  .gg-smh-text__cta:hover { filter: brightness(0.88); }

  /* 18×13px capsule dot */
  .gg-smh-text__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    background: var(--smh-cta-dot-bg);
    color: var(--smh-cta-color);
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
  }

  /* --- Card (with background) ---
     Fixed-but-shrinkable: the card PREFERS --smh-card-w and only narrows when the
     available space is smaller (min() picks the smaller). The grid track it sits
     in (Editorial usage) can't strangle it below that width while there's room
     (matching min-width). One padding token (--smh-card-pad) drives all four
     sides proportionally — slightly more bottom for optical balance — and the
     body fills the resulting content box, so line length, padding and width are
     ONE coherent system instead of three independent magic numbers. */
  .gg-smh-text__card {
    --smh-card-w: 400px;
    --smh-card-pad: 32px;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
    padding: var(--smh-card-pad) var(--smh-card-pad) calc(var(--smh-card-pad) + 6px);
    width: min(var(--smh-card-w), 100%);
    min-width: min(var(--smh-card-w), 100%);
    box-sizing: border-box;
  }

  @media screen and (max-width: 749px) {
    .gg-smh-text__card {
      /* Padding scales down on a phone. Width follows the inset the Row hands
         this card via --ed-mobile-w (78% for a secondary/narrow-span card, 100%
         for a feature one) instead of hardcoding 100% — hardcoding it cancelled
         the two-tier inset so the card never went slimmer on mobile. min-width:0
         lets it actually shrink to that inset. */
      --smh-card-pad: 22px;
      width: var(--ed-mobile-w, 100%);
      min-width: 0;
    }
  }

  /* Alignment: propagated from section wrapper class into card/bare */
  .gg-smart-hero__text--align-center .gg-smh-text__card,
  .gg-smart-hero__text-overlay--align-center .gg-smh-text__card { align-items: center; }

  .gg-smart-hero__text--align-center .gg-smh-text__body,
  .gg-smart-hero__text-overlay--align-center .gg-smh-text__body { text-align: center; }

  .gg-smart-hero__text--align-right .gg-smh-text__card,
  .gg-smart-hero__text-overlay--align-right .gg-smh-text__card  { align-items: flex-end; }

  .gg-smart-hero__text--align-right .gg-smh-text__body,
  .gg-smart-hero__text-overlay--align-right .gg-smh-text__body  { text-align: right; }

  /* --- Bare (no card background) --- */
  .gg-smh-text__bare {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
  }

  .gg-smart-hero__text--align-center .gg-smh-text__bare,
  .gg-smart-hero__text-overlay--align-center .gg-smh-text__bare { align-items: center; }

  .gg-smart-hero__text--align-center .gg-smh-text__bare .gg-smh-text__body,
  .gg-smart-hero__text-overlay--align-center .gg-smh-text__bare .gg-smh-text__body { text-align: center; }

  .gg-smart-hero__text--align-right .gg-smh-text__bare,
  .gg-smart-hero__text-overlay--align-right .gg-smh-text__bare  { align-items: flex-end; }

  .gg-smart-hero__text--align-right .gg-smh-text__bare .gg-smh-text__body,
  .gg-smart-hero__text-overlay--align-right .gg-smh-text__bare .gg-smh-text__body { text-align: right; }
/* END_BLOCK:_smart-hero-text */

/* START_BLOCK:_social-link (INDEX:124) */
.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:accelerated-checkout (INDEX:125) */
.accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

  more-payment-options-link {
    font-size: smaller;
  }

  more-payment-options-link a {
    --button-color: var(--color-primary);
  }

  more-payment-options-link a:hover {
    --button-color: var(--color-primary-hover);
  }

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_BLOCK:accelerated-checkout */

/* START_BLOCK:accordion (INDEX:126) */
.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);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:buy-buttons (INDEX:129) */
/* ── Price-in-button: label left, price right ── */
  .buy-buttons-block .add-to-cart-button .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* Inherit the button's 13px — base.css renders the label larger otherwise,
       which made the buy button taller than the quantity bar. */
    font-size: 12px;
    line-height: inherit;
  }

  .buy-buttons-block .gg-atc-price-inline {
    font-weight: inherit;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }

  /* On-sale: struck original price before the current price (matches the card). */
  .buy-buttons-block .gg-atc-price-compare {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    font-weight: inherit;
  }

  /* ── "Added" feedback: flip the button label, drop the Horizon checkmark ── */
  /* Hide Horizon's checkmark burst on the PDP (neutralized in GG scope, base.css untouched) */
  .buy-buttons-block .add-to-cart__added {
    display: none;
  }

  /* Flip label — sibling of .add-to-cart-text, centered over the button. Horizon
     collapses .add-to-cart-text on [data-added] (opacity:0 + clip-path); this label
     fades in over it. */
  .buy-buttons-block .add-to-cart-text--added {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gg-cream);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-out-cubic);
  }

  .buy-buttons-block .add-to-cart-button[data-added='true'] .add-to-cart-text--added {
    opacity: 1;
  }

  /* ── "Added" banner: rises above the quantity selector + buy button, then dissolves.
     PDP-only (the global header toast covers every other add path). Same square,
     shadowless look + choreography as the global toast (snippets/gg-cart-toast.liquid). */
  .buy-buttons-block .product-form-buttons {
    position: relative;
  }

  .buy-buttons-block .gg-atc-banner {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% + var(--gg-space-sm));
    z-index: 2;
    /* Surface, thumb and type: snippets/gg-item-card-styles. Hairline on the
       bottom edge, same as the global toast. */
    border-block-end: var(--gg-divider-width) solid var(--gg-divider-color);
    opacity: 0;
    pointer-events: none;
  }

  /* 0.5s in (rise into place) · 3s hold · 0.5s out (dissolve with a slight zoom).
     Two animations with NOTHING running during the hold — a running transform
     animation keeps the banner on an unsnapped compositor layer and blurs its
     hairline (same cause and fix as snippets/gg-cart-toast.liquid). The script
     below hides it when the -out animation ends. */
  .buy-buttons-block .gg-atc-banner.is-visible {
    opacity: 1;
    transform: none;
    animation:
      gg-atc-banner-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards,
      gg-atc-banner-out 0.5s cubic-bezier(0.4, 0, 0.2, 1) 3.5s forwards;
  }

  @keyframes gg-atc-banner-in {
    from { opacity: 0; transform: translateY(8px); }
  }

  @keyframes gg-atc-banner-out {
    to { opacity: 0; transform: scale(1.04); }
  }

  @media (prefers-reduced-motion: reduce) {
    .buy-buttons-block .gg-atc-banner.is-visible {
      animation:
        gg-atc-banner-fade-in 0.4s backwards,
        gg-atc-banner-fade-out 0.6s 3.4s forwards;
    }

    @keyframes gg-atc-banner-fade-in { from { opacity: 0; } }
    @keyframes gg-atc-banner-fade-out { to { opacity: 0; } }
  }

  /* ── Hide payment / accelerated-checkout buttons ──
     The accelerated-checkout static block IS rendered (see the parked
     content_for above) but kept hidden here. Remove the
     shopify-accelerated-checkout-button rule to re-enable it. */
  .buy-buttons-block [data-shopify="payment-button"],
  .buy-buttons-block .shopify-payment-button,
  .buy-buttons-block shopify-accelerated-checkout-button {
    display: none;
  }

  /* ── Hide the cart icon inside the add-to-cart button ── */
  .buy-buttons-block .add-to-cart-icon {
    display: none;
  }

  /* ── Buy block stack: ATC → quantity → meta, full-width rows, gap 8px
     (Figma node 2958:206) ── */
  .buy-buttons-block .product-form-buttons {
    position: relative; /* positioning context for the "added" banner */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  /* DOM renders quantity before add-to-cart — ATC goes first visually */
  .buy-buttons-block .product-form-buttons > span:has(add-to-cart-component) {
    order: -1;
    min-width: 0;
  }

  .buy-buttons-block .quantity-selector-wrapper {
    display: flex;
    width: 100%;
  }

  /* ── Grundpreis + Versand note row ── */
  .buy-buttons-block .gg-buy-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 42px;
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-light);
    line-height: var(--gg-text-sm--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .buy-buttons-block .gg-buy-meta a {
    color: inherit;
    text-decoration: underline;
  }

  .buy-buttons-block .gg-buy-meta__grundpreis[hidden] {
    display: none;
  }

  /* Empty error placeholder must not reserve a row */
  .buy-buttons-block .product-form-text__error.hidden {
    display: none;
  }

  /* ── Quantity selector: full-width gray-dark bar, "+" left / value / "−" right.
     Same 6px padding + line-height as the ATC button so the two bars match. ── */
  .buy-buttons-block .quantity-selector {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    height: auto;
    min-height: 0;
    background-color: var(--gg-gray-light);
    border-radius: 0;
    border: none;
    padding: 5px 18px;
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
  }

  /* Visual flip only — DOM order (minus → input → plus), aria labels and the
     increment logic stay untouched. Shared snippet not modified (cart uses it). */
  .buy-buttons-block .quantity-selector .quantity-plus {
    order: 1;
  }

  .buy-buttons-block .quantity-selector input {
    order: 2;
    flex: 1;
    text-align: center;
    color: inherit;
    background: transparent;
    /* Height comes from the bar's own padding + line-height (matches ATC).
       Strip the input's intrinsic min-height so it doesn't make the bar taller. */
    height: auto;
    min-height: 0;
    padding-block: 0;
    line-height: inherit;
  }

  .buy-buttons-block .quantity-selector .quantity-minus {
    order: 3;
  }

  /* Plus/minus buttons: inherit color; override base.css's 44px touch-target
     height (--minimum-touch-target) — that fixed height was inflating the bar.
     Collapsing to auto lets the bar's own 6px padding + line-height set the
     height, identical to the ATC button. */
  .buy-buttons-block .quantity-selector .quantity-plus,
  .buy-buttons-block .quantity-selector .quantity-minus {
    color: inherit;
    height: auto;
    min-height: 0;
    padding-block: 0;
  }

  /* The +/− icon box carries intrinsic height that out-sizes the bar. Pin the
     wrapper + svg to the text line so the bar matches the ATC button exactly. */
  .buy-buttons-block .quantity-selector .svg-wrapper {
    height: 0.75em;
    width: 0.75em;
  }

  .buy-buttons-block .quantity-selector svg {
    width: 0.75em;
    height: 0.75em;
  }

  /* ── add-to-cart-component fills its <span> wrapper ── */
  .buy-buttons-block add-to-cart-component {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── Button appearance: Cart + Checkout — black bar, square, label left /
     price right (Figma: padding 6px 20px, cream text, medium) ── */
  .buy-buttons-block .add-to-cart-button,
  .buy-buttons-block .gg-info__checkout-btn {
    display: block;
    width: 100%;
    height: auto;
    background-color: var(--gg-black);
    color: var(--gg-cream);
    border-radius: 0;
    border: none;
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    padding: 7px 18px;
    white-space: nowrap;
    overflow: hidden;
  }

  /* ── No hover effect on the add-to-cart button ── */
  .buy-buttons-block .add-to-cart-button:hover,
  .buy-buttons-block .add-to-cart-button:focus,
  .buy-buttons-block .add-to-cart-button:focus-visible {
    background-color: var(--gg-black);
    color: var(--gg-cream);
    transform: none;
    box-shadow: none;
    opacity: 1;
  }

  .buy-buttons-block .gg-info__checkout-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }

  .buy-buttons-block {
    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: 4px;
    }
  }

  .product-form-buttons > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing) {
    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) {
    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-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);
  }

  .product-form-text__error {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-block-end: var(--gap-xs);
  }

  .product__pickup-availabilities {
    width: 100%;
  }

  .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);
    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__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

  .pickup-location__dialog:modal {
    max-height: 100dvh;
  }

  .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-primary);
    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: var(--color-primary-hover);
  }

  .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;
  }

  .pickup-location__close-button {
    top: calc(var(--padding-2xl) - (var(--icon-size-xs) / 2));
    right: calc(var(--padding-2xl) - var(--icon-size-xs));
  }

  .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;
  }
/* END_BLOCK:buy-buttons */

/* START_BLOCK:comparison-slider (INDEX:132) */
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);
    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:133) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:134) */
.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:email-signup (INDEX:136) */
.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 {
    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);

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

  .email-signup__input-group--integrated .email-signup__input {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }

  .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__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;
    }

    &.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 {
    color: rgb(var(--color-input-text-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:filters (INDEX:138) */
.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: var(--font-size--h6);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Double class (.facets-toggle.facets-toggle--no-filters, specificity 0,2,0)
     beats the base .facets-toggle justify-content (0,1,0) without !important. */
  .facets-toggle.facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      justify-content: unset;

      & > .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;
  }

  @media screen and (min-width: 750px) {
    dialog-component.facets-block-wrapper {
      position: absolute;
      width: 0;
      height: 0;
    }
  }

  .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%;

    top: auto;
    bottom: 0;
    height: var(--drawer-height);
    max-height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    box-shadow: none;
    padding-block: 0;

    &:not(.facets--drawer) {
      @media screen and (min-width: 750px) {
        padding-inline: var(--padding-inline-start) var(--padding-inline-end);
        width: 100%;
        max-width: 100%;
      }
    }
  }

  .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 {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

  .facets--drawer[open] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .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-muted);
    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: 14px;
      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 - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* 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(--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;
    }
  }

  /* GreenGlam vertical column does NOT use Horizon's between-item ::before
     separator — every filter/sort group draws its own rule UNDER its header
     (.facets__summary border-bottom). So this generated separator is scoped to
     the drawer only; the vertical branch is removed here at the source rather
     than overridden downstream. (Horizon shipped .facets--vertical here too.) */
  .facets--drawer :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

  /* 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: var(--color-primary-hover);

    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(--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__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);

    @media screen and (min-width: 750px) {
      --variant-picker-swatch-width: 26px;
      --variant-picker-swatch-height: 26px;
    }
  }

  .facets-drawer__close {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    cursor: pointer;
  }

  /* 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);
  }

  .facets-horizontal-remove {
    display: flex;
    align-items: center;
  }

  .facets-horizontal-remove--active::before {
    content: '';
    border-inline-start: var(--style-border-width) solid var(--color-border);
    height: var(--font-paragraph--size);
    position: absolute;
  }

  /* ─── Inline filter drawer ─── */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-wrap: wrap;
    }
  }

  .facets--horizontal details .facets__panel-content {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .gg-facets-inline-panel {
    display: none;
  }

  /* Animation wrapper — full-width flex row, no visual styling */
  .facets--horizontal .gg-facets-inline-panel {
    @media screen and (min-width: 750px) {
      display: grid;
      flex: 0 0 100%;
      order: 999;
      grid-template-rows: 1fr;
      width: 100%;
      margin-block-start: 8px;
      transition: grid-template-rows 0.28s ease, margin-block-start 0.28s ease;
    }
  }

  .facets--horizontal .gg-facets-inline-panel[hidden] {
    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: 0fr;
      margin-block-start: 0;
    }
  }

  .gg-facets-inline-panel__inner {
    overflow: hidden;
    min-height: 0;
    padding-block: 4px;
    display: flex;
    align-items: flex-start;
  }

  .gg-facets-inline-panel[data-align="right"] .gg-facets-inline-panel__inner {
    justify-content: flex-end;
  }

  /* Visual card — shrinks to fit the columns, no border */
  .gg-facets-inline-panel .facets__panel-content {
    @media screen and (min-width: 750px) {
      display: block;
      width: fit-content;
      position: static;
      max-width: none;
      min-width: 0;
      max-height: none;
      overflow-y: visible;
      box-shadow: none;
      border: none;
      background-color: var(--gg-gray-lightest);
      border-radius: var(--style-border-radius-lg);
      padding: var(--gg-page-pad) var(--gg-space-md);
      z-index: auto;
    }
  }

  .gg-facets-inline-panel .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: none;
      overflow: visible;
      padding: 0;
    }
  }

  /* Column-first layout: items fill a column top-to-bottom, then wrap to the next.
     Flex column + wrap shrinks to actual content height (no ghost row gaps). */
  .gg-facets-inline-panel .facets__inputs-list:not(.facets__inputs-list--swatches):not(.facets__inputs-list--grid):not(.facets__inputs-list--images) {
    @media screen and (min-width: 750px) {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      column-gap: 32px;
      row-gap: 6px;
    }
  }

  /* 14px text for all filter content in the inline drawer */
  .gg-facets-inline-panel {
    @media screen and (min-width: 750px) {
      font-size: 14px;
    }
  }

  /* Sort inside the inline drawer: override floating popup defaults.
     opacity: 1 needed because the panel is moved out of details, so details[open] rule no longer applies.
     top/left need !important because floating-panel.js sets them as inline styles. */
  .gg-facets-inline-panel .sorting-filter__options {
    @media screen and (min-width: 750px) {
      position: static;
      /* stylelint-disable-next-line declaration-no-important */
      top: auto !important;
      /* stylelint-disable-next-line declaration-no-important */
      left: auto !important;
      opacity: 1;
      display: block;
      box-shadow: none;
      border: none;
      width: fit-content;
      min-width: 0;
      transition: none;
    }
  }

  .gg-facets-inline-panel .sorting-filter__options-inner {
    @media screen and (min-width: 750px) {
      overflow: visible;
      padding: 0;
      gap: 6px;
    }
  }

  /* Match sort option row to filter checkbox items: no extra padding, tight line-height */
  .gg-facets-inline-panel .sorting-filter__option {
    @media screen and (min-width: 750px) {
      padding: 0;
      min-width: 0;
      max-width: none;
    }
  }

  .gg-facets-inline-panel .sorting-filter__label {
    @media screen and (min-width: 750px) {
      line-height: 1;
    }
  }

  /* Right-side group: Availability + Price + Sort in a rounded gray pill */
  .gg-filter-right-group {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-shrink: 0;
      background-color: var(--gg-gray-lightest);
      border-radius: 10px;
      padding: 0 6px;
      height: 30px;
      overflow: visible;
      align-self: center;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     GG EDITORIAL VERTICAL FACETS  (Shop page redesign — bean sed1)
     Restyles Horizon's vertical facet column to the GreenGlam editorial
     look: each filter group = a semibold label (no divider rule), then
     light-weight value rows at 12px. An ACTIVE category's label is underlined
     (the only "this group is filtering" cue, since the dividers are gone).
     Behavior (AJAX, price slider, swatches, clear) is Horizon's — this is
     styling only. Scoped to .facets--vertical so drawer/horizontal are untouched.
     ════════════════════════════════════════════════════════════════════ */

  /* (The horizontal controls bar — count/sort/grid-density — is not rendered in
     vertical mode; see the Liquid comment in this block. Count → header divider,
     Sort → peer accordion in the form, grid-density → above the grid.) */

  /* ════════════════════════════════════════════════════════════════════
     UNIFORM ACCORDION GROUPS  (.facets__item: list, price, AND sort)
     One pattern for every group: a clickable header (label + rotating caret)
     over its panel content (no divider rule). Sort inherits this
     because it now renders the same accordion-custom/<details>/.facets__summary
     structure as list-filter (snippets/sorting.liquid vertical branch).
     ════════════════════════════════════════════════════════════════════ */

  /* The GreenGlam vertical column is inline at ALL breakpoints (never a real
     drawer), so it must not carry Horizon's mobile drawer inline padding
     (.facets__panel padding: 0 var(--drawer-padding)). The section + nav already
     supply the page gutter — keeping the drawer padding here double-gapped the
     filters on mobile. Zero it everywhere for vertical. */
  /* Compact rhythm tokens for the vertical column. `.facets.facets--vertical`
     wins the same-element tie with `.facets` (both classes sit on one element).
     ONE size token now drives BOTH the value checkbox and the sort checkmark, so
     they can't drift; the gaps are single-sourced too. Tune the column here. */
  .facets.facets--vertical {
    --checkbox-size: 10px;        /* was 13px globally */
    --checkbox-pad: 2px;          /* inner square padding */
    --gg-facet-row-gap: 6px;      /* between entries within a group (loosened from 2px) */
    --gg-facet-gap-sm: 5px;       /* box↔label */
    --gg-facet-header-gap: 12px;  /* header → first value row (single source for ALL groups) */
    --gg-facet-item-pad: 10px;    /* per-group breathing room above/below the hairline */
  }

  .facets--vertical .facets__panel {
    padding-inline: 0;
  }

  /* ── 3-column facet layout (bean sf87 — Figma 3437:2256): the vertical
     facets render as three column groups on the section's 12-col rhythm —
     Marke/Zertifizierung/Cruelty Free/Verpackung on 1–2, the big middle group
     on 3–5, Sortieren/Verfügbarkeit/Preis on 10–12 (under the header bar's
     Filter link, same 990px snap point). The 750–989 mid-tier gets three
     equal columns (12 narrow tracks would cram them). Below 750px the three
     divs stack naturally = the whole mobile filter layout. The buckets are
     assigned in this block's Liquid. ── */
  @media screen and (min-width: 750px) {
    .facets--vertical .gg-facet-cols {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--gg-space-lg);
      margin-inline-end: 0; /* the generic filters-wrapper margin is column-era */
    }
  }

  @media screen and (min-width: 990px) {
    .facets--vertical .gg-facet-cols {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gg-gutter);
    }
    .gg-facet-col--1 { grid-column: 1 / 3; }
    .gg-facet-col--2 { grid-column: 3 / 6; }
    .gg-facet-col--3 { grid-column: 10 / -1; }
  }

  /* Every column keeps the uniform hairline rows; an empty bucket simply
     renders as an empty track (no stray divider). */
  .gg-facet-col { min-width: 0; }

  /* ── Uniform group rows: every .facets__item (Sort + filters) is a block child of
     .facets__filters-wrapper (Sort is promoted to a peer via display:contents below).
     One full-width hairline UNDER each group + symmetric vertical padding gives the
     airy, evenly-divided rhythm. Matches the nav/header dividers used site-wide. ── */
  .facets--vertical .sorting-filter {
    display: contents;
  }

  .facets--vertical .facets__item {
    /* accordion-custom is a custom element → defaults to display:inline, on which
       vertical padding + border-bottom do nothing. Block makes the padding and the
       full-width hairline actually render as row dividers. */
    display: block;
    padding-block: var(--gg-facet-item-pad);
    /* black @ low opacity (not --gg-gray-light) so the hairline shows on BOTH the
       white inline rail AND the grey docked card (same-as-bg grey would vanish). */
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Group header — clickable accordion toggle. Padding now lives on .facets__item
     (above), so the summary itself carries none — they must not compound. */
  .facets--vertical .facets__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-sm);
    font-family: var(--gg-font);
    font-size: var(--gg-text-smd);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    padding-block: 0;
    cursor: pointer;
    list-style: none;
  }

  .facets--vertical .facets__summary::-webkit-details-marker { display: none; }

  .facets--vertical .facets__label {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-medium);
    color: var(--gg-black);
    cursor: pointer;
  }

  /* Keep header solid black (defeat Horizon's hover/open opacity dim) */
  .facets--vertical .facets__filters-wrapper:hover .facets__summary,
  .facets--vertical .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary,
  .facets--vertical .facets__summary:hover {
    opacity: 1;
  }

  /* Hide Horizon's chevron caret; we use a "+"/"−" marker instead (matches the
     reference: a plus on the right of every group row, minus when expanded). */
  .facets--vertical .facets__summary .icon-caret {
    display: none;
  }

  .facets--vertical .facets__summary::after {
    content: "+";
    margin-inline-start: auto;        /* always pin to the right edge */
    font-family: var(--gg-font);
    font-size: var(--gg-text-lg);     /* a touch larger so the + reads clearly */
    font-weight: var(--gg-weight-light);
    line-height: 1;
    color: var(--gg-black);
  }

  .facets--vertical .facets__panel[open] .facets__summary::after {
    content: "\2212";                 /* minus sign when the group is open */
  }

  /* Hide the active-count status bubble in the header (minimal look) */
  .facets--vertical .facets__status { display: none; }

  /* Active-group cue: none on the header. The hairline dividers carry the
     structure, the active-filter pills at the top of the form show what's
     selected, and the "+"/"−" marker shows open/closed — so the header label
     stays clean (no underline) when a value is checked. */

  /* ── Sort options (inside its accordion panel) → same row style as values ── */
  .facets--vertical .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gg-facet-row-gap);
    padding: 0;
    margin-block-start: var(--gg-facet-header-gap);
    overflow: visible;
  }

  .facets--vertical .sorting-filter__options-inner label { cursor: pointer; }

  .facets--vertical .sorting-filter__option {
    display: grid;
    grid-template-columns: var(--checkbox-size) 1fr;
    gap: var(--gg-facet-gap-sm);
    align-items: center;
    min-width: 0;
    max-width: none;
    padding: 0;
  }

  .facets--vertical .sorting-filter__option:hover { background: none; }

  .facets--vertical .sorting-filter__input { display: none; }

  .facets--vertical .sorting-filter__checkmark {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 1px solid var(--gg-black);
    border-radius: 0;
    background-color: transparent;
    padding: var(--checkbox-pad);
    background-clip: content-box;
    color: transparent;
  }

  .facets--vertical .sorting-filter__checkmark > * { display: none; }

  .facets--vertical .sorting-filter__input:checked ~ .sorting-filter__checkmark {
    background-color: var(--gg-black);
    border-color: var(--gg-black);
  }

  .facets--vertical .sorting-filter__label {
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    pointer-events: none;
  }

  .facets--vertical .sorting-filter__input:checked ~ .sorting-filter__label {
    font-weight: var(--gg-weight-regular);
  }

  /* ── Value list: plain text rows under the header, unified header→values gap ── */
  .facets--vertical .facets__inputs-wrapper {
    margin-block: var(--gg-facet-header-gap) 0;
  }

  /* Marken (and any show-more facet) ships a focus-ring inset trick (negative
     margin + matching padding) that cancels the header→values gap, leaving it
     tighter than the others. Neutralize it in the vertical column so every group
     shares the SAME --gg-facet-header-gap. Alignment is unchanged (the inline
     negative margin + padding cancelled to zero anyway). */
  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    margin: 0;
    margin-block-start: var(--gg-facet-header-gap);
    padding: 0;
  }

  .facets--vertical .facets__inputs-list:not(.facets__inputs-list--swatches):not(.facets__inputs-list--images) {
    display: flex;
    flex-direction: column;
    gap: var(--gg-facet-row-gap);
  }

  .facets--vertical .facets__inputs-list-item { width: 100%; }

  /* Checkbox BOX styling is canonical in list-filter.liquid (square-in-square).
     Here we only handle the row layout around it. */
  .facets--vertical .checkbox {
    gap: var(--gg-facet-gap-sm);
    align-items: center;
  }

  .facets--vertical .checkbox__label {
    min-width: 0;
    line-height: 1.4;
    width: 100%;
    align-items: center;
    gap: var(--gg-facet-gap-sm);
  }

  .facets--vertical .checkbox__label-text,
  .facets--vertical .facets__pill-label,
  .facets--vertical .facets__image-label {
    padding-inline-start: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);       /* 300 */
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    white-space: normal;                       /* allow long labels to wrap */
  }

  /* Active value reads stronger */
  .facets--vertical .checkbox__input:checked + .checkbox__label .checkbox__label-text,
  .facets--vertical .facets__pill-input:checked + .facets__pill-label {
    font-weight: var(--gg-weight-regular);     /* 400 */
  }

  /* "Short value" pills also flatten to text rows (no pill chrome) */
  .facets--vertical .facets__inputs-list--grid {
    display: flex;
    flex-direction: column;
    gap: var(--gg-facet-row-gap);
  }

  .facets--vertical .facets__pill-label {
    border: none;
    background: none;
    padding: 0;
    border-radius: 0;
    min-height: 0;
  }

  /* "Mehr anzeigen" → plain text link (drop the + icon + button chrome) */
  .facets--vertical .show-more__button {
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    box-shadow: none;
  }

  .facets--vertical .show-more__button .icon-plus,
  .facets--vertical .show-more__button .svg-wrapper {
    display: none;
  }

  .facets--vertical .show-more__label {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* ── Price filter → underline fields, like the search field ── */
  .facets--vertical .price-facet__inputs-wrapper {
    padding: 0;
    gap: var(--gg-space-md);
  }

  .facets--vertical .price-facet .field {
    --input-height: auto;
  }

  .facets--vertical .price-facet__field { background: transparent; }

  .facets--vertical .price-facet__input,
  .facets--vertical .price-facet__input:is(:focus, :hover, :focus-visible) {
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: 0 var(--gg-divider-width) 0 var(--gg-black);
    padding-block: 6px;
    padding-left: calc(2.5 * var(--input-padding-x));
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    color: var(--gg-black);
  }

  .facets--vertical .price-facet__label {
    color: var(--gg-black);
  }

  .facets--vertical .price-facet__separator,
  .facets--vertical .price-facet__highest-price {
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    color: var(--gg-gray-dark);
  }

  /* Clear link → plain text */
  .facets--vertical .facets__clear,
  .facets--vertical .clear-filter {
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    color: var(--gg-gray-dark);
    text-decoration: underline;
  }

  /* Empty-state message when a collection/locale has no configured facets. */
  .gg-facets-empty {
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
    padding-block: var(--gg-space-sm);
  }
/* END_BLOCK:filters */

/* START_BLOCK:footer-policy-list (INDEX:141) */
.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:gg-brand (INDEX:142) */
/* Seven tracks = the section's columns 6–12, so the image snaps to the page grid. */
  .gg-brand {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gg-space-sm);
    align-items: start;
  }

  /* No image → no modifier: the text simply starts on the first track. */
  .gg-brand__text {
    grid-column: 1 / -1;
    /* Same fixed measure as the Product Details panel (--pdp-info-width). */
    max-width: 450px;
  }

  .gg-brand__image {
    display: block;
    width: 100%;
    height: auto;
  }

  .gg-brand--image-beside .gg-brand__image { grid-column: 1 / 3; }
  .gg-brand--image-beside .gg-brand__text  { grid-column: 3 / -1; }

  .gg-brand--image-below .gg-brand__text  { grid-column: 1 / -1; }
  .gg-brand--image-below .gg-brand__image { grid-column: 1 / 5; }

  /* Phone: one column, in source order (beside: image → text; below: text → image). */
  @media (max-width: 749px) {
    .gg-brand {
      grid-template-columns: minmax(0, 1fr);
      row-gap: var(--gg-gap-tight);
    }
    .gg-brand .gg-brand__text,
    .gg-brand .gg-brand__image {
      grid-column: 1;
      max-width: none;
    }
  }
/* END_BLOCK:gg-brand */

/* START_BLOCK:gg-cta-button (INDEX:143) */
/* Plain-button style: align inner padding/centering with the hero tiers while
     inheriting all colour + squared geometry from the canonical .gg-button. */
  .gg-cta-button--plain {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--pill-pad-out, 16px);
  }

  /* Copy-coupon button: label → code (hover/focus) → "Kopiert!" (after click).
     All three states are stacked in one grid cell so the button width stays the
     width of its widest state and never jumps as the text swaps. */
  .gg-coupon-copy {
    display: inline-grid;
    place-items: center;
    cursor: pointer;
  }

  .gg-coupon-copy > span {
    grid-area: 1 / 1;
    transition: opacity 120ms ease;
  }

  .gg-coupon-copy__code,
  .gg-coupon-copy__done {
    opacity: 0;
    visibility: hidden;
  }

  /* Hover / keyboard focus reveals the code. */
  .gg-coupon-copy:hover .gg-coupon-copy__label,
  .gg-coupon-copy:focus-visible .gg-coupon-copy__label {
    opacity: 0;
    visibility: hidden;
  }
  .gg-coupon-copy:hover .gg-coupon-copy__code,
  .gg-coupon-copy:focus-visible .gg-coupon-copy__code {
    opacity: 1;
    visibility: visible;
  }

  /* After a click the confirmation wins over both other states for ~1.6s. */
  .gg-coupon-copy.is-copied .gg-coupon-copy__label,
  .gg-coupon-copy.is-copied .gg-coupon-copy__code {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .gg-coupon-copy.is-copied .gg-coupon-copy__done {
    opacity: 1 !important;
    visibility: visible !important;
  }
/* END_BLOCK:gg-cta-button */

/* START_BLOCK:gg-info-accordions (INDEX:145) */
/* ── Vertical layout (grid / default) ────────────────────────────────── */
  .gg-info-accordions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .gg-info-accordions__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.3;
    color: var(--color-foreground);
    letter-spacing: var(--gg-tracking-default);
    margin: 0;
  }

  /* Card shell around each accordion item */
  .gg-info-accordions .details {
    background: var(--gg-gray-lightest);
    border-radius: var(--gg-radius-card);
    overflow: hidden;
  }

  /* summary is display:flex from base.css — .gg-accordion__header fills it as a flex item */
  .gg-accordion__header {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  .gg-accordion__trigger {
    padding: 20px 24px;
  }

  /* Subtle divider between header and body only when open */
  .gg-info-accordions .details[open] > .gg-accordion__trigger {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Heading role — matches .gg-heading */
  .gg-accordion__label {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.3;
    color: var(--color-foreground);
    letter-spacing: var(--gg-tracking-default);
  }

  /* Body role (light) — matches .gg-body--light */
  .gg-accordion__content {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base); /* 14px */
    line-height: 1.3;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: 0;
    padding: 20px 24px 24px;
  }

  /* Chevron base */
  .gg-accordion__chevron {
    flex-shrink: 0;
    color: var(--gg-black);
    transition: transform 0.2s ease;
  }

  .gg-info-accordions .details[open] > .gg-accordion__trigger .gg-accordion__chevron {
    transform: rotate(180deg);
  }

  /* ── Inside product details panel: lighter, more compact feel ─────────── */
  .product-details .gg-info-accordions {
    gap: 4px;
    padding-block-start: 32px;
  }

  .product-details .gg-info-accordions .details {
    background: transparent;
    border-radius: 0;
  }

  .product-details .gg-info-accordions .details[open] > .gg-accordion__trigger {
    border-bottom: none;
  }

  .product-details .gg-accordion__trigger {
    padding: 5px 0;
  }

  .product-details .gg-accordion__label {
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-medium);
  }

  .product-details .gg-accordion__content {
    font-size: var(--gg-text-sm);
    padding: 8px 0 14px;
    max-width: 350px;
  }

  /* 350px above is a TEXT MEASURE (readable line length). Panels holding a
     fixed-size legal graphic opt out via this modifier: the EU
     Gewährleistungslabel is a 1240×1754 A4 document that renders illegibly at
     350px, and its legibility is a legal requirement. The modifier is set in
     Liquid (_gg-accordion-item.liquid) rather than inferred in CSS, so the
     opt-out is explicit and greppable. See snippets/gg-legal-guarantee.liquid. */
  .product-details .gg-accordion__content--wide {
    max-width: none;
  }

  /* Flatten any HTML the product description field may contain */
  .gg-accordion__content :is(h1, h2, h3, h4, h5, h6, strong, b) {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
  }

  /* ── EXPLORATORY: divider-style accordion in the product details panel ───────
     Each row reads as a gg-section-divider: full-width 1px bottom rule on every
     row, medium-weight label, and a + / − toggle on the right instead of the
     chevron. Layers on top of the compact .product-details rules above.
     Revert: delete this block (the compact styling above is the fallback). */
  .product-details .gg-info-accordions {
    gap: 0;
  }

  .product-details .gg-info-accordions .details {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Match the Quickadd divider rhythm: --gg-space-sm vertical padding per row. */
  .product-details .gg-info-accordions .gg-accordion__trigger {
    padding-block: var(--gg-space-sm);
  }

  /* Keep the rule under the title visible when open (header keeps its border). */
  .product-details .gg-info-accordions .details[open] > .gg-accordion__trigger {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Indent the content to start under the TITLE, not the marker:
     marker width (18px) + its right margin (10px) = 28px. */
  .product-details .gg-info-accordions .gg-accordion__content {
    padding: 0px;
  }

  /* Swap the chevron SVG for a CSS + / − marker on the right edge */
  .product-details .gg-info-accordions .gg-accordion__chevron {
    display: none;
  }

  /* + / − marker on the LEFT, before the title. order:-1 places it ahead of
     .gg-accordion__header (flex:1) which holds the label. No box — glyph only. */
  .product-details .gg-info-accordions .gg-accordion__trigger::before {
    content: '+';
    order: -1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    margin-inline-end: 10px;
    font-family: var(--gg-font);
    font-size: 16px;
    font-weight: var(--gg-weight-regular);
    line-height: 1;
    color: var(--gg-black);
  }

  .product-details .gg-info-accordions .details[open] > .gg-accordion__trigger::before {
    content: '−'; /* U+2212 minus, matches the + visual weight */
  }

  /* ── Tab UI (JS-enhanced; replaces the stacked accordion once gg-tabs--ready) ──
     Hide the un-upgraded element so the raw stacked accordion never paints (no
     FOUC). gg-info-tabs.js adds .gg-tabs--ready once the tab strip is built.
     A <noscript> block below reveals the accordion fallback for no-JS clients. */
  gg-info-tabs:not(.gg-tabs--ready) {
    display: none;
  }

  .gg-tabs.gg-tabs--ready {
    display: block;
  }

  .gg-tabs__strip {
    display: flex;
    gap: 24px;
    position: relative;               /* anchor the baseline pseudo-element */
    overflow-x: auto;
    scrollbar-width: none;            /* Firefox */
  }
  .gg-tabs__strip::-webkit-scrollbar { display: none; }  /* WebKit */

  /* Thin full-width baseline under the whole strip (does not get clipped by overflow) */
  .gg-tabs__strip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.12);
  }

  .gg-tabs__tab {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 10px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: 500;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
    white-space: nowrap;
    position: relative;
    z-index: 1;                       /* thick active underline sits above the baseline */
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .gg-tabs__tab:hover { color: var(--gg-black); }

  .gg-tabs__tab[aria-selected='true'] {
    color: var(--gg-black);
    border-bottom-color: var(--gg-black);
  }

  .gg-tabs__panels {
    padding-block-start: 16px;
  }

  /* Panels reuse the existing content typography (.gg-accordion__content moved inside) */
  .gg-tabs__panel .gg-accordion__content {
    padding: 0;
  }
/* END_BLOCK:gg-info-accordions */

/* START_BLOCK:gg-key-tags (INDEX:146) */
.gg-key-tags {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg); /* list → list */
    /* Fixed text column inside its track (like Product Details / the review
       blocks): aligns to col1 but doesn't scale with the grid — on larger
       viewports the gap to the review block grows instead. */
    width: 100%;
    max-width: 820px; /* wider so long single tags stay on one line (was 580) */
    min-width: 0;
  }

  .gg-key-tags__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* tag → tag */
  }

  /* ── Tag: 32px plain text, no pill background/radius ── */
  .gg-tag {
    display: block;
    font-family: var(--gg-font);
    font-size: var(--gg-text-4xl); /* 32px / 2rem */
    line-height: var(--gg-text-4xl--lh);
    font-weight: var(--gg-weight-regular);
    color: var(--gg-black);
    /* Paired with the 4xl step: display sizes ship tight tracking by default. */
    letter-spacing: var(--gg-text-4xl--tracking);
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .gg-tag--hidden {
    display: none;
  }

  /* Phone: step the tags down one size (4xl → 3xl) with their paired metrics. */
  @media (max-width: 749px) {
    .gg-tag {
      font-size: var(--gg-text-3xl);
      line-height: var(--gg-text-3xl--lh);
      letter-spacing: var(--gg-text-3xl--tracking);
    }
  }
/* END_BLOCK:gg-key-tags */

/* START_BLOCK:gg-quickadd-products (INDEX:147) */
.gg-quickadd {
    font-family: var(--font-body--family);
  }

  .gg-quickadd__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 100%;
  }

  /* ── Rows: thumb left, text column right, dividers between rows ── */
  .gg-quickadd__card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--gg-space-sm);
    padding-block: var(--gg-space-sm);
  }

  /* The first row sits directly under the section divider, whose 9px is the whole
     intended gap — the row's own top padding would add to it (measured 19px). The
     padding exists to separate rows FROM EACH OTHER, so the first one doesn't need it. */
  .gg-quickadd__grid > :first-child .gg-quickadd__card,
  .gg-quickadd__card:first-child {
    padding-block-start: 0;
  }

  .gg-quickadd__card:not(:last-child) {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  .gg-quickadd__image {
    position: relative;
    display: block;
    width: 84px;
    min-width: 84px;
    aspect-ratio: 4 / 5;
    flex-shrink: 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--gg-white);
  }

  /* Super-light gray tint over the image */
  .gg-quickadd__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gg-gray-lightest);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .gg-quickadd__img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
    background: var(--gg-white);
  }

  /* Text column: title/vendor top, CTA pinned to the bottom */
  .gg-quickadd__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
  }

  .gg-quickadd__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .gg-quickadd__title {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-light);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-quickadd__vendor {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-regular);
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* ── CTA: black square button, price in the label ── */
  .gg-quickadd__cta {
    background-color: var(--gg-black);
    color: var(--gg-cream);
    border: none;
    border-radius: 0;
    padding: 4px 12px;
    font-family: var(--font-body--family);
    font-weight: var(--gg-weight-regular);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
    cursor: pointer;
  }

  .gg-quickadd__cta:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
/* END_BLOCK:gg-quickadd-products */

/* START_BLOCK:gg-reviews (INDEX:148) */
/* ── Responsive ──
     • <1024px viewport = STACKED: the preview drops under the overview.
     • ≥1024px = side by side on the block's own grid (see the rule below).
     (An older note here described container queries; the code never used them.) */
  /* Default = STACKED (small/medium): the preview drops under the overview so
     both get full width — fixes the cramped tablet zone. */
  .gg-reviews {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg);
  }

  /* Phone: tighten the oversized overview→preview gap (40px → 20px). Tablet
     (750–1023) and the ≥1024 side-by-side grid are untouched. */
  @media (max-width: 749px) {
    .gg-reviews {
      gap: var(--gg-space-md);
    }
    /* The expand region (view-all list / write-review form) opens with an 80px
       top margin — too tall on phone. Match the region's own internal rhythm. */
    .gg-reviews__expand {
      margin-top: var(--gg-space-lg);
    }
  }

  /* ≥1024px = side by side. The block sits on 7 page tracks (gg-pdp-info 1/8).
     Two columns:
       overview  = two of those tracks, but NEVER narrower than its own content —
                   the rating is a non-wrapping display line, so a fluid column
                   alone let it run into the preview on laptops;
       preview   = the rest, capped at its text measure.
     When the rating fits, the preview starts exactly on track 3; when it doesn't,
     it starts one gutter after the rating instead of overlapping it. */
  @media (min-width: 1024px) {
    .gg-reviews {
      --gg-reviews-track: calc((100% - 6 * var(--gg-gutter)) / 7);
      display: grid;
      grid-template-columns:
        minmax(max-content, calc(2 * var(--gg-reviews-track) + var(--gg-gutter)))
        minmax(0, 1fr);
      column-gap: var(--gg-gutter);
      align-items: start; /* items size to own content — overview does NOT stretch to the preview */
    }
    .gg-reviews__overview {
      grid-column: 1;
      grid-row: 1;
    }
    .gg-reviews__preview {
      grid-column: 2;
      grid-row: 1;
      max-width: 354px; /* fixed text column cap (Figma 531px ÷ 1.5) */
    }
  }

  /* ── Overview: summary top, actions pinned bottom ── */
  .gg-reviews__overview {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md); /* fixed gap score → actions (no longer tied to preview height) */
  }

  .gg-reviews__summary {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
  }

  /* Same display step as the key tags beside it (4xl, 3xl on phone). */
  .gg-reviews__rating {
    font-family: var(--gg-font);
    font-size: var(--gg-text-4xl);
    line-height: var(--gg-text-4xl--lh);
    letter-spacing: var(--gg-text-4xl--tracking);
    color: var(--gg-black);
    margin: 0;
    white-space: nowrap; /* never break "4.8 Bewertung" mid-word */
  }

  /* Phone: one step down, like the tags (must follow the base rule above). */
  @media (max-width: 749px) {
    .gg-reviews__rating {
      font-size: var(--gg-text-3xl);
      line-height: var(--gg-text-3xl--lh);
      letter-spacing: var(--gg-text-3xl--tracking);
    }
  }

  .gg-reviews__score {
    font-weight: var(--gg-weight-semibold);
  }

  .gg-reviews__rating-suffix {
    font-weight: var(--gg-weight-regular);
  }

  .gg-reviews__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  /* Write Review — same black square button as Quickadd CTA */
  .gg-reviews__write {
    background-color: var(--gg-black);
    color: var(--gg-cream);
    border: none;
    border-radius: 0;
    padding: 4px 12px;
    font-family: var(--font-body--family);
    font-weight: var(--gg-weight-regular);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
    cursor: pointer;
  }

  /* Show All — 11px underlined link */
  .gg-reviews__show-all {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    font-weight: var(--gg-weight-regular);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ── Preview ── */
  .gg-reviews__preview {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
    min-width: 0;
  }

  .gg-reviews__item-head {
    display: flex;
    align-items: center;
    gap: var(--gg-space-md);
  }

  .gg-reviews__item-title {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-style: italic;
    font-weight: var(--gg-weight-medium);
    color: var(--gg-black);
    margin: 0;
  }

  .gg-reviews__stars {
    display: flex;
    gap: 0;
  }

  .gg-star {
    font-size: var(--gg-text-base); /* 13px — standard; the form's star PICKER overrides to 18px */
    line-height: 1;
    color: var(--gg-black);
  }

  .gg-star--half {
    opacity: 0.45;
  }

  .gg-star--empty {
    color: var(--gg-gray-mid);
  }

  .gg-reviews__body {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base); /* 14px */
    line-height: var(--gg-text-3xl--lh);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: 0;
  }

  /* The preview-card wrapper holds the rotating server-rendered card so the
     expand region below it is a separate flex child. */
  .gg-reviews__preview-card {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
    transition: opacity 0.3s ease;
  }
  .gg-reviews__preview-card.is-fading {
    opacity: 0;
  }

  /* ── Inline expand (rv-C): grows the preview column downward; no popup ── */
  .gg-reviews__expand {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg);
    margin-top: var(--gg-space-xl); /* breathing room below the preview card */
  }
  .gg-reviews__expand[hidden],
  .gg-reviews__list-region[hidden],
  .gg-reviews__form[hidden],
  .gg-reviews__more[hidden],
  .gg-reviews__form-msg[hidden] {
    display: none;
  }

  /* The overview sizes to its OWN content and TOP-aligns — it must NOT stretch
     to the preview's height. The preview rotates through reviews of different
     lengths; pinning the actions to that shifting bottom edge made the
     "Bewertung schreiben" button jump around. Now it sits at the bottom of the
     overview's own area (right under the score) and stays put. */
  @media (min-width: 1024px) {
    .gg-reviews__overview {
      align-self: start;
    }
    /* Expanded: widen the preview to its full column for the list/form. */
    .gg-reviews.is-expanded .gg-reviews__preview {
      max-width: 640px;
    }
  }

  /* ── Review list (rv-D) ── */
  .gg-reviews__sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--gg-space-sm);
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }
  .gg-reviews__sort {
    appearance: none;
    -webkit-appearance: none;
    background: transparent
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' fill='none'/%3E%3C/svg%3E")
      no-repeat right 8px center;
    border: 1px solid var(--gg-gray-light);
    border-radius: 0;
    padding: 4px 24px 4px 8px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    color: var(--gg-black);
    cursor: pointer;
  }
  .gg-reviews__sort:focus-visible {
    outline: none;
    border-color: var(--gg-black);
  }

  .gg-reviews__list {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg);
  }
  .gg-reviews__card {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
  }
  /* List-card body uses the comfortable line-height, not the tight preview one. */
  .gg-reviews__card .gg-reviews__body {
    line-height: var(--gg-text-base--lh);
  }
  .gg-reviews__card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gg-space-sm);
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-mid);
  }
  .gg-reviews__verified {
    color: var(--color-success, var(--gg-black));
  }
  .gg-reviews__helpful {
    background: none;
    border: 1px solid var(--gg-gray-light);
    border-radius: 0;
    padding: 2px 8px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    color: var(--gg-black);
    cursor: pointer;
  }
  .gg-reviews__helpful[disabled] {
    opacity: 0.5;
    cursor: default;
  }

  /* Store reply (rv-G) */
  .gg-reviews__reply {
    border-left: 2px solid var(--gg-gray-light);
    padding-left: var(--gg-space-md);
    margin-top: var(--gg-space-xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .gg-reviews__reply-label {
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    font-weight: var(--gg-weight-semibold);
    color: var(--gg-black);
  }
  .gg-reviews__reply-body {
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    color: var(--gg-black);
    margin: 0;
  }

  /* ── Rating distribution bars (rv-G; degrades to hidden without data) ── */
  .gg-reviews__distribution {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--gg-space-md);
  }
  .gg-reviews__dist-row {
    display: grid;
    grid-template-columns: 28px 1fr 32px;
    align-items: center;
    gap: var(--gg-space-sm);
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    color: var(--gg-black);
    text-align: left;
  }
  .gg-reviews__dist-row.is-active .gg-reviews__dist-track {
    outline: 1px solid var(--gg-black);
  }
  .gg-reviews__dist-track {
    height: 6px;
    background: var(--gg-gray-light);
    position: relative;
  }
  .gg-reviews__dist-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--gg-black);
  }
  .gg-reviews__dist-count {
    text-align: right;
    color: var(--gg-gray-mid);
  }

  /* ── Write form (rv-E) ── */
  .gg-reviews__form {
    flex-direction: column;
    gap: var(--gg-space-md);
    border: none;
    margin: 0;
    padding: 0;
  }
  .gg-reviews__form:not([hidden]) {
    display: flex;
  }
  .gg-reviews__form-stars {
    display: flex;
    gap: 6px;
    border: none;
    margin: 0;
    padding: 0;
  }
  .gg-reviews__star-pick {
    background: none;
    border: none;
    padding: 0;
    font-size: 18px; /* matches the read-only stars, not an oversized picker */
    line-height: 1;
    color: var(--gg-gray-mid);
    cursor: pointer;
  }
  .gg-reviews__star-pick.is-active {
    color: var(--gg-black);
  }
  .gg-reviews__star-pick:focus-visible {
    outline: 2px solid var(--gg-black);
    outline-offset: 2px;
  }
  /* Inputs = the site's standard field: white, no box, black underline, square.
     `.gg-reviews` prefix (0-2-0) beats base.css's input rule (0-1-1) that would
     otherwise force a border + input background. */
  .gg-reviews .gg-reviews__field {
    box-sizing: border-box;
    width: 100%;
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    color: var(--gg-black);
    border: 0;
    border-bottom: 1px solid var(--gg-black);
    border-radius: 0;
    box-shadow: none;
    padding: 4px 2px;
    background-color: var(--gg-white);
    -webkit-appearance: none;
    appearance: none;
  }
  .gg-reviews .gg-reviews__field::placeholder {
    color: var(--gg-gray-mid);
    opacity: 1;
  }
  .gg-reviews .gg-reviews__field:focus,
  .gg-reviews .gg-reviews__field:focus-visible {
    outline: none;
    box-shadow: none;
    background-color: var(--gg-white);
    border-bottom-color: var(--gg-black);
  }
  .gg-reviews .gg-reviews__field--body {
    resize: vertical;
    min-height: 88px;
  }
  /* Honeypot — kept in the layout flow but invisible to humans. */
  .gg-reviews__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .gg-reviews__submit {
    align-self: flex-start;
  }
  .gg-reviews__form-msg {
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    margin: 0;
    padding: 8px 10px;
  }
  .gg-reviews__form-msg--success {
    color: var(--color-success, var(--gg-black));
    border: 1px solid var(--color-success, var(--gg-gray-light));
  }
  .gg-reviews__form-msg--error {
    color: var(--color-error, var(--gg-black));
    border: 1px solid var(--color-error, var(--gg-gray-light));
  }

  /* Collapse control at the bottom of the expanded region. */
  .gg-reviews__collapse,
  .gg-reviews__more {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    font-weight: var(--gg-weight-regular);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Phone & narrow tablet stacking is now the DEFAULT (above) — the container
     query only ADDS the side-by-side layout once the block is ≥560px wide. */
/* END_BLOCK:gg-reviews */

/* START_BLOCK:gg-variant-picker (INDEX:150) */
/* The tab strip mirrors gg-info-accordions' tab look: a horizontal label row
     with a thin full-width baseline divider (the same divider used on the
     Beschreibung / Anwendung tabs). Built by gg-variant-tabs.js from each
     option's name; panels are the .gg-vs__option fieldsets shown one at a time. */
  .gg-vp-block {
    display: block;
    width: 100%;
  }

  /* The picker fills the panel — drop its own top padding (the tab strip owns the
     spacing now) and the form gap (only one option shows at a time). */
  .gg-vp-block .gg-vs {
    padding-block-start: 0;
  }
  .gg-vp-block .gg-vs__form {
    gap: 0;
  }

  .gg-vp-block .gg-vt__strip {
    display: flex;
    gap: 24px;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gg-vp-block .gg-vt__strip::-webkit-scrollbar { display: none; }

  /* Thin full-width baseline under the whole strip — the shared divider look. */
  .gg-vp-block .gg-vt__strip::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--gg-divider-width);
    background: var(--gg-gray-light);
  }

  .gg-vp-block .gg-vt__tab {
    flex: 0 0 auto;
    appearance: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 10px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: 500;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
    white-space: nowrap;
    position: relative;
    z-index: 1;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  /* Space between the strip and the active panel below it. */
  .gg-vp-block.gg-vt--ready .gg-vt__strip {
    margin-block-end: var(--gg-space-md);
  }

  .gg-vp-block .gg-vt__tab:hover { color: var(--gg-black); }

  .gg-vp-block .gg-vt__tab[aria-selected='true'] {
    color: var(--gg-black);
    border-bottom-color: var(--gg-black);
  }

  /* Static (single-size) pill — matches the original standalone Größe pill
     exactly (grey, unselected REST look): square corners, 12px. */
  .gg-vp-block .gg-vs__pill--static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gg-gray-light);
    color: var(--gg-black);
    border-radius: 0;
    height: 28px;
    padding-inline: var(--gg-space-sm);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* ── Panel visibility ─────────────────────────────────────────────────────
     Only the active panel shows. [hidden] must win over the selector's
     .gg-vs__option { display:flex } and survive the native picker morph — hence
     !important. JS also re-applies the hidden state after each morph. */
  .gg-vp-block.gg-vt--ready [hidden] { display: none !important; }

  /* Before JS upgrades the markup, stack the options as a plain list so there is
     no flash of every-option-at-once styled oddly; JS adds gg-vt--ready. */
  .gg-vp-block:not(.gg-vt--ready) .gg-vt__static { margin-block-end: var(--gg-space-md); }

  /* The tab strip already owns the baseline divider, so the selected-value
     indicator here is just a plain label above its swatches — drop the
     indicator's own divider line + divider padding (it keeps its bottom margin
     for spacing to the tiles). Standalone gg-variant-selector keeps its divider. */
  .gg-vp-block .gg-vs__indicator {
    border-bottom: none;
    padding-block-end: 0;
  }
/* END_BLOCK:gg-variant-picker */

/* START_BLOCK:icon (INDEX:152) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

  .icon-block__media {
    height: auto;
  }
/* END_BLOCK:icon */

/* START_BLOCK:image (INDEX:153) */
.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:155) */
.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:156) */
.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);
    }
  }

  .menu--caret .icon-plus,
  .menu--plus .icon-caret {
    display: none;
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:158) */
.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:159) */
.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:160) */
.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:price (INDEX:161) */
.tax-note:empty {
    display: none;
  }

  form.payment-terms {
    padding-top: 0.5em;
    font-size: min(0.85em, var(--font-paragraph--size));
    font-weight: var(--font-paragraph--weight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .installments:not(:has(shopify-payment-terms)) {
    display: none;
  }

  /* 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-foreground-rgb) / var(--opacity-subdued-text));
  }
/* END_BLOCK:price */

/* START_BLOCK:product-custom-property (INDEX:163) */
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-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:165) */
.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:166) */
.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:169) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

  .rating-color--primary {
    --star-fill-color: var(--color-primary);
    --star-fill-color-rgb: var(--color-primary-rgb);
    --color: var(--color-primary);
  }

  .rating-color--foreground {
    --star-fill-color: var(--color-foreground);
    --star-fill-color-rgb: var(--color-foreground-rgb);
    --color: var(--color-foreground);
  }

  .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:171) */
.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:172) */
/* 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;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

/* START_BLOCK:swatches (INDEX:173) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

/* START_BLOCK:video (INDEX:176) */
.placeholder-video {
    aspect-ratio: 5 / 3;
  }
/* END_BLOCK:video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:background-media (INDEX:178) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:179) */
.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:180) */
.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:button (INDEX:182) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

    &:hover {
      color: var(--color-primary-hover);
      text-decoration-color: transparent;
    }
  }
/* END_SNIPPET:button */

/* START_SNIPPET:card-gallery (INDEX:183) */
/* Honor each slide's --product-media-fit (set per slide in the loop above): main image
     + variant shots = contain (on white), generic lifestyle photos = cover (fill the frame).
     Falls back to contain if the var is ever absent, so it can't render worse than before. */
  .card-gallery--img-contain .product-media-container.media-fit img {
    object-fit: var(--product-media-fit, contain);
  }

  .card-gallery--img-contain .product-media,
  .card-gallery--img-contain .product-media-container {
    background: #ffffff;
  }

  /* Subtle grey tint over the image cell only (matches the PDP media slot, see
     snippets/product-media-gallery-content.liquid). Scoped to .product-media-container
     — NOT .card-gallery — so hover-carousel arrows and badges (which live in
     .card-gallery, outside the media cell) stay untinted and clickable. We set
     position/overflow here so the ::after is guaranteed to anchor. */
  .card-gallery--img-contain .product-media-container {
    position: relative;
    overflow: hidden;
  }

  .card-gallery--img-contain .product-media-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gg-gray-lightest);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
  }

  .card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .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: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @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;
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-products (INDEX:185) */
/* Applied discount code, shown per line item as a small removable tag —
     lightest-gray rectangle, smaller font, with an X to remove it. */
  .gg-cart-coupons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gg-space-xs, 5px);
    margin-top: 4px;
  }

  .gg-cart-coupon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 7px;
    background: var(--gg-gray-mid, #b0afaf);
    border-radius: 2px;
    line-height: 1;
    color: var(--gg-black, #000);
    white-space: nowrap;
  }

  /* Font-size needs extra specificity: the cart drawer sets
     `.cart-drawer .cart-items__variants-wrapper *` to 14px (0,2,0), which would
     otherwise win. This 0,3,0 chain beats it in both drawer and cart page. */
  .cart-items__details .cart-items__variants-wrapper .gg-cart-coupon,
  .cart-items__details .cart-items__variants-wrapper .gg-cart-coupon * {
    font-size: 0.625rem; /* 10px — one step below --gg-text-xs */
  }

  .gg-cart-coupon__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: none;
    color: currentColor;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--hover-transition-duration, 0.1s) ease;
  }

  .gg-cart-coupon__remove:hover {
    opacity: 1;
  }

  .gg-cart-coupon__remove svg {
    width: 9px;
    height: 9px;
  }

  .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-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    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.5px;
  }

  .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 drawer: separate grid areas for variants and unit price */
  .cart-drawer .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:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    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 {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .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 {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .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);
  }

  /* Struck-through original line total when a discount (customer code or promo)
     reduced this line — mirrors checkout + matches the PDP .compare-at-price
     treatment (opacity 0.4, 1.5px line-through). Sits right-aligned under the
     discounted total. */
  .cart-items__price-original {
    display: block;
    margin: 0; /* beat .cart-items__table * { margin: 0.5px } — sit snug under the total */
    text-align: end;
    white-space: nowrap;
    font-size: var(--font-size--xs);
    line-height: 1.1;
    opacity: 0.3;
    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
  }

  .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-bottom var(--margin-md);
    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-drawer .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-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);
  }

  .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-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;
    }
  }

  /* ─────────────────────────────────────────────────────────────────────
     Spa mode: line items INVERT to orange text on the white cart surface.
     The item details (variant "50ml", vendor, unit price) draw from
     --color-foreground-rgb at reduced opacity, and the remove button + title
     from --color-foreground — retint both tokens at the cart-items root so the
     whole line item goes orange (title solid, secondary lines lighter) and no
     black spots remain. Dividers → translucent orange too.
     ───────────────────────────────────────────────────────────────────── */
  [data-spa-mode] .cart-items {
    --color-foreground: var(--spa-orange);
    --color-foreground-rgb: var(--spa-orange-rgb);
    --color-border: rgba(var(--spa-orange-rgb) / 0.18);
    /* Set `color` directly, not just the var: the price (text-component
       .cart-items__price-value) declares NO color of its own, so it inherits the
       nearest ancestor's COMPUTED color. Retinting only --color-foreground never
       reaches it (no ancestor re-resolves `color: var(--color-foreground)` on the
       price). A direct color here cascades to every uncoloured node → orange. */
    color: var(--spa-orange);
  }
  /* The price element sits in its own grid cell; pin it explicitly too so it
     never falls back to a scheme colour set closer than .cart-items. */
  [data-spa-mode] .cart-items .cart-items__price,
  [data-spa-mode] .cart-items .cart-items__price-value,
  [data-spa-mode] .cart-items .cart-items__price-unit {
    color: var(--spa-orange);
  }
  /* "Entfernen" text + its underline → orange (the remove control is a .button). */
  [data-spa-mode] .cart-items__remove,
  [data-spa-mode] .cart-items__remove-text {
    color: var(--spa-orange);
    text-decoration-color: rgba(var(--spa-orange-rgb) / 0.6);
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:186) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  /* No rule between the note and the discount block. It was drawn with
     --color-border, which is near-invisible on the default cream drawer but resolves
     to a hard line on spa's white surface — so the same markup read as "no divider"
     off-spa and a visible seam on spa. The accordions already separate themselves;
     the element is kept (Horizon markup) but draws nothing in either mode. */
  .cart-actions__divider {
    border-block-start: none;
  }

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
  }

  .cart-totals__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .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-xs);
    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-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 var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

  /* GreenGlam discount UI: the input is the shared underline field (gg-field-underline,
     same as the note, the newsletter and the header) — Enter submits, no button. */
  .cart-discount {
    width: 100%;
  }

  /* Single child (the input) — there is no apply button; Enter submits. The field
     therefore spans the full row width where the button used to sit. */
  .cart-discount__form {
    display: flex;
    align-items: center;
    height: auto;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  /* The look is the shared underline field (gg-field-underline); only the row sizing
     lives here. */
  .cart-discount__input {
    flex: 1 1 100%;
    min-width: 0;
  }


  .cart-discount__codes {
    display: none;
    gap: var(--gg-space-xs, 5px);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
    margin-block-start: var(--margin-xs);
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__content {
    height: auto;
  }

  /* Applied code = small grey tag, same as the cart line-item tags, with an X. */
  .cart-discount__pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 2px;
    background-color: var(--gg-gray-mid, #b0afaf);
    color: var(--gg-black, #000);
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
  }

  .cart-discount__pill-code {
    font-size: 0.6875rem; /* 11px — line-item tag scale */
    letter-spacing: 0.02em;
    overflow: hidden;
    max-width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.55;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    color: currentColor;
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--hover-transition-duration, 0.1s) ease;
  }

  .cart-discount__pill-remove:hover {
    opacity: 1;
  }

  .cart-discount__pill-remove svg {
    width: 9px;
    height: 9px;
  }

  .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-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%;
    }
  }

  /* ─────────────────────────────────────────────────────────────────────
     Spa mode: the cart INVERTS to a white (spa-ink) surface with ORANGE text
     (matches header pills / search modal / newsletter). Retint every scheme-
     driven token once at the cart root so dividers, foreground text and inputs
     all follow: --color-border → translucent orange, --color-foreground and the
     input/text vars → orange. --color-foreground-rgb keeps the subdued-opacity
     tiers (tax note, hover) reading as lighter orange, not lighter black.
     ───────────────────────────────────────────────────────────────────── */
  [data-spa-mode] .cart-totals,
  [data-spa-mode] .cart-drawer__summary,
  [data-spa-mode] .cart-actions,
  [data-spa-mode] .cart-drawer .cart-items__table-row {
    --color-border: rgba(var(--spa-orange-rgb) / 0.18);
    --color-foreground: var(--spa-orange);
    --color-foreground-rgb: var(--spa-orange-rgb);
    --color-input-text: var(--spa-orange);
    --color-input-text-rgb: var(--spa-orange-rgb);
    /* Direct `color` too — uncoloured nodes (values rendered as text-component)
       inherit the computed color, not the var, so the var alone never reaches them. */
    color: var(--spa-orange);
  }

  /* Checkout ("Auschecken") — orange text + orange underline on the white summary. */
  [data-spa-mode] .cart__checkout-button {
    color: var(--spa-orange);
    text-decoration-color: rgba(var(--spa-orange-rgb) / 0.6);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:188) */
.collection-card {
    --fixed-card-height: var(--height-small);

    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__inner {
    gap: var(--gap);

    a,
    button {
      /* only allow interactive elements to be clickable separate from .collection-card__link */
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* 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 .image-block__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%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:190) */
.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:191) */
.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:192) */
.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:193) */
.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 {
      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:194) */
/* 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:gg-cart-toast (INDEX:199) */
/* Covers the header bar's padding box exactly (the bar is position: relative):
     same height, and the bar's own rule stays visible below it. The header's
     surface, so it reads as the header itself (cream; orange in the Spa).
     Non-interactive (pointer-events: none) so it never blocks clicks. */
  .gg-cart-toast {
    --gg-item-card-bg: var(--gg-hd-bg);
    --gg-item-card-pad: var(--gg-inset); /* the page gutter, like the bar */
    --gg-item-card-thumb: var(--gg-hd-logo-h); /* crown height → 9px floor and ceiling */

    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Fully removed from the a11y tree when idle. */
  .gg-cart-toast[data-hidden='true'] {
    visibility: hidden;
  }

  /* ── Ticker: the header's own content slides up out of the bar while the toast
     slides up in from below; after the hold it reverses. The bar never moves and
     clips both only while the toast shows (focus rings stay unclipped otherwise).
     0.42s house ease each way, 3s hold, nothing running during the hold.
     Both halves carry `forwards`, the later one winning, so nothing snaps back
     before gg-cart-toast.js removes .is-visible on the toast's -out animationend. */
  .gg-hd__bar:has(> .gg-cart-toast.is-visible) {
    overflow: clip;
  }

  .gg-hd__bar:has(> .gg-cart-toast.is-visible) > :not(.gg-cart-toast) {
    animation:
      gg-cart-toast-bar-out 0.42s var(--gg-ease-house) forwards,
      gg-cart-toast-bar-in 0.42s var(--gg-ease-house) 3.42s forwards;
  }

  .gg-cart-toast.is-visible {
    animation:
      gg-cart-toast-in 0.42s var(--gg-ease-house) backwards,
      gg-cart-toast-out 0.42s var(--gg-ease-house) 3.42s forwards;
  }

  @keyframes gg-cart-toast-bar-out {
    to { transform: translateY(calc(-1 * var(--header-height))); }
  }

  @keyframes gg-cart-toast-bar-in {
    from { transform: translateY(calc(-1 * var(--header-height))); }
    to { transform: none; }
  }

  @keyframes gg-cart-toast-in {
    from { transform: translateY(100%); }
  }

  @keyframes gg-cart-toast-out {
    to { transform: translateY(100%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-hd__bar:has(> .gg-cart-toast.is-visible) > :not(.gg-cart-toast) {
      animation:
        gg-cart-toast-fade-out 0.4s forwards,
        gg-cart-toast-fade-in 0.6s 3.4s forwards;
    }

    .gg-cart-toast.is-visible {
      animation:
        gg-cart-toast-fade-in 0.4s backwards,
        gg-cart-toast-fade-out 0.6s 3.4s forwards;
    }

    @keyframes gg-cart-toast-fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes gg-cart-toast-fade-out { to { opacity: 0; } }
  }
/* END_SNIPPET:gg-cart-toast */

/* START_SNIPPET:gg-divider (INDEX:200) */
.gg-divider {
    display: flex;
    flex-direction: column;
    gap: var(--gg-gap-label);
    /* Span the full track when dropped into a grid section (PDP, Contact, Brand). */
    grid-column: 1 / -1;

    /* ── DISTANCE TO THE CONTENT IT HEADS ──────────────────────────────────
       9px by default — a divider sits tight above whatever it introduces, be it a
       heading, a carousel, a product grid, an image or a review list. 24px only
       when body copy follows with no heading between (the body then takes the gap
       the heading would have had); that case is handled further down.

       This lives on the DIVIDER, not on each section, because dividers appear in at
       least six different containers (editorial sections, resource-list headers, the
       PDP info grid, the collection header bar, review panels, the hero overlay) and
       every one of them sets its own gap. A rule per container is six chances to
       miss one — which is exactly what happened to the PDP. Instead the divider
       cancels whatever gap its parent applies and restates the value it wants:
       --gg-parent-gap is set by the few containers that have one, and defaults to 0
       for those that don't, so the arithmetic is always right.

       --gg-parent-gap is INHERITED, so a divider nested deeper (the quick-add list
       inside the PDP grid) would otherwise cancel a gap that is not its own. Every
       container therefore resets it for its descendants (rule below), leaving it in
       force only for that container's direct children. */
    margin-block-end: calc(var(--gg-gap-tight) - var(--gg-parent-gap, 0px));
  }

  /* Stop the cancellation leaking into nested subtrees: any element that is not
     itself a divider re-zeroes the value for everything below it, so only a
     container's DIRECT children see the gap that container declared. */
  .gg-divider :not(.gg-divider),
  :where(.gg-image-text, .gg-ed-section, .gg-pdp-info, .gg-hero-ovl, .gg-ed-col, .gg-faq, .gg-contact) > :not(.gg-divider, .gg-ed-divider) {
    --gg-parent-gap: 0px;
  }

  /* Body copy follows with no heading in between → 24px. */
  .gg-divider:has(+ .gg-text__body),
  .gg-divider:has(+ *:not(:has(.gg-text__heading)) .gg-text__body) {
    margin-block-end: calc(var(--gg-gap-text) - var(--gg-parent-gap, 0px));
  }

  /* A divider used as a plain header INSIDE a component (review panels, the
     collection bar) keeps its own spacing out of the way — the component lays its
     children out itself. */
  .gg-divider--flush {
    margin-block-end: 0;
  }

  .gg-divider__labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Two labels placed on the section's 12-col grid (PDP "Key Ingredients" / "Reviews").
     Callers set the tracks; defaults keep it sane if they don't. */
  .gg-divider__labels--grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gap-sm);
    align-items: end;
  }
  .gg-divider__labels--grid .gg-divider__label {
    grid-column: var(--gg-divider-label-start, 1 / 4);
  }
  .gg-divider__labels--grid .gg-divider__label--end {
    grid-column: var(--gg-divider-label-end, 6 / -1);
  }

  /* Figma: Inter Medium 13 / 20.8 / 0.52px — the 0.52px is 0.04em at 13px, i.e.
     --gg-tracking-default, so it is NOT restated as a literal here. */
  .gg-divider__label {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-medium);
    font-size: var(--gg-ed-label-size);
    line-height: var(--gg-ed-label-lh-fig);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-divider__link {
    text-decoration: none;
  }
  .gg-divider__link:hover {
    text-decoration: underline;
  }

  /* FULL BLEED.
     width:auto is LOAD-BEARING — never width:100%. A percentage resolves against the
     PARENT content box, so the negative margins would only shift a fixed-width box and
     leave a 2x-inset shortfall on the right. This exact bug is documented in
     snippets/gg-hero-overlay-styles.liquid and fixed the same way in header.liquid. */
  .gg-divider__rule {
    display: block;
    width: auto;
    height: 0;
    /* Per-side so an ASYMMETRICALLY padded parent still lands edge to edge. The
       product-list header, for instance, is inset 9px at the start and 0 at the end
       (so "Alle anzeigen" aligns to the carousel's right edge) — a single value
       would overshoot one side and undershoot the other by exactly that 9px. */
    margin-inline-start: calc(-1 * var(--gg-divider-bleed-start, var(--gg-divider-bleed, var(--gg-inset))));
    margin-inline-end: calc(-1 * var(--gg-divider-bleed-end, var(--gg-divider-bleed, var(--gg-inset))));
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* A divider nested inside a narrow COLUMN (the PDP details column) still spans
     the page: the container tells it how far its own left edge sits from the page
     edge via --gg-divider-bleed-start, and how far the right edge is via -end.
     Those are grid positions the section already knows, so no measurement is
     needed and nothing depends on 100vw (which would include the scrollbar
     gutter and overhang by ~15px on Windows — this theme has no overflow guard). */

  /* A hairline that does NOT bleed — a separator BETWEEN rows of a list (hero
     product rows, spa panel rows), not a section divider. Same stroke, no escape
     from the parent's padding. Keeping the two apart is deliberate: a bleeding
     rule between two list rows would run out past the content it separates. */
  .gg-hairline {
    display: block;
    width: 100%;
    height: 0;
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }
/* END_SNIPPET:gg-divider */

/* START_SNIPPET:gg-editorial-section (INDEX:201) */
.gg-image-text.section,
  .gg-ed-section {
    display: flex;
    flex-direction: column;
    gap: var(--gg-row-gap, var(--gg-gap-section));
    /* Feed the spacing-style var, never a literal padding-inline — a literal would
       double up against .spacing-style's own padding-inline. */
    --padding-inline: var(--gg-inset);
  }

  /* A DIVIDER IS NOT A ROW. The section gap separates content rows; a divider is a
     header bonded to whatever follows it, so it sits far closer (9px, or 24px before
     bare body copy). The divider cancels this gap itself — see gg-divider.liquid —
     so all this section has to do is DECLARE what its gap is. */
  .gg-image-text,
  .gg-ed-section {
    --gg-parent-gap: var(--gg-row-gap, var(--gg-gap-section));
  }

  .gg-image-text > .gg-divider,
  .gg-image-text > .gg-ed-divider,
  .gg-ed-section > .gg-divider,
  .gg-ed-section > .gg-ed-divider {
    width: 100%;
  }
/* END_SNIPPET:gg-editorial-section */

/* START_SNIPPET:gg-empty-state (INDEX:202) */
.gg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--gg-space-md);
    width: 100%;
  }

  /* Default heading is intentionally small — a 13px semibold label, NOT a big
     title (big titles are reserved for the 404 hero, below). */
  .gg-empty-state__heading {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-semibold);
    font-size: var(--gg-text-base); /* 13px */
    line-height: 1.3;
    letter-spacing: var(--gg-tracking-default);
    color: var(--color-foreground);
    margin: 0;
  }

  /* 404-only hero token (Vend Sans display, mirrors .gg-hero-statement__title). */
  .gg-empty-state--huge .gg-empty-state__heading {
    font-family: var(--gg-font-display, 'Vend Sans', sans-serif);
    font-weight: 400;
    font-size: clamp(3.25rem, 7vw, 4rem);
    line-height: 1.05;
  }

  .gg-empty-state__body {
    max-width: 48ch;
  }

  /* Links embedded in the body copy (e.g. the "Logge dich ein" login link from
     the log_in_html translation) are bare <a> tags that otherwise fall to the
     global link colour. Make them follow the body's own foreground so they read
     as one sentence — and inherit the spa orange remap on the cart's white
     surface instead of showing up as a black spot. */
  .gg-empty-state__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
/* END_SNIPPET:gg-empty-state */

/* START_SNIPPET:gg-eyebrow-label (INDEX:203) */
.gg-eyebrow {
    display: flex;
    align-items: baseline;
    gap: 3px; /* dot-to-text — UI-specific, intentionally not a spacing token */
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-semibold);
    color: var(--gg-black);
    letter-spacing: var(--gg-tracking-default);
    margin: 0;
  }
/* END_SNIPPET:gg-eyebrow-label */

/* START_SNIPPET:gg-field-underline-styles (INDEX:204) */
/* 0-2-0 via the doubled class: base.css `input:not(...)` (0-1-1) forces
     --color-input-background + a border, and must not win here. */
  .gg-field-underline.gg-field-underline {
    --gg-field-h: 25px;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: var(--gg-field-h);
    min-block-size: 0;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-block-end: 1px solid var(--gg-field-line, var(--gg-black));
    border-radius: 0;
    box-shadow: none;
    background-color: var(--gg-field-bg, var(--gg-gray-lightest));
    color: var(--gg-field-ink, var(--gg-black));
    font-family: var(--gg-font);
    font-size: 0.625rem; /* 10px — Figma "Semantic/Input" */
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    outline: none;
    appearance: none;
  }

  .gg-field-underline.gg-field-underline:is(:hover, :focus, :focus-visible) {
    box-shadow: none;
    outline: none;
    background-color: var(--gg-field-bg, var(--gg-gray-lightest));
    border-block-end-color: var(--gg-field-line, var(--gg-black));
  }

  /* Multi-line (the cart note): same field, grows from two lines, no drag handle. */
  textarea.gg-field-underline.gg-field-underline {
    block-size: auto;
    min-block-size: calc(2 * var(--gg-field-h));
    padding-block: 6px;
    line-height: 1.4;
    resize: none;
  }

  .gg-field-underline::placeholder {
    color: var(--gg-field-ink, var(--gg-black));
    opacity: 1;
  }

  /* type=search: drop the UA clear button / decoration so the line stays clean. */
  .gg-field-underline::-webkit-search-decoration,
  .gg-field-underline::-webkit-search-cancel-button {
    appearance: none;
  }

  /* Spa: the page is orange, so the field fill and ink come from the shared spa
     field tokens (theme-styles-variables) rather than per-form overrides. */
  body[data-spa-mode] .gg-field-underline {
    --gg-field-bg: rgb(var(--gg-spa-ink-rgb) / 0.08);
    --gg-field-ink: var(--gg-spa-ink);
    --gg-field-line: var(--gg-spa-ink);
  }
/* END_SNIPPET:gg-field-underline-styles */

/* START_SNIPPET:gg-hd-cart (INDEX:205) */
/* stage | cart column. The column is ≈ a third of the width but never narrower
     than 600px (Figma: 603 @1440, 849 @2560). */
  .gg-hd-cart {
    --gg-hd-cart-pad: 28px; /* Figma 5147:124 — content inset inside the column */
    --gg-hd-cart-thumb: 74px; /* Figma 5147:126 — 74 × 98, radius 15 */
    --gg-hd-cart-gap: 12px;   /* thumb → text (Figma 5147:125) */
    display: grid;
    grid-template-columns: minmax(0, 1fr) max(600px, 33.333%);
  }

  .gg-hd-cart__col {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .gg-hd-cart__engine {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Every cart text is the house sans, untracked (Figma: no letter-spacing anywhere). */
  .gg-hd-cart__col,
  .gg-hd-cart__col * {
    font-family: var(--gg-font);
    letter-spacing: 0;
  }

  /* ── Line items ─────────────────────────────────────────────────────────── */
  .gg-hd-cart__items {
    padding: var(--gg-space-md) var(--gg-hd-cart-pad) var(--gg-gap-text);
  }

  .gg-hd-cart .cart-items__table,
  .gg-hd-cart .cart-items__table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
  }

  .gg-hd-cart .cart-items__table * { margin: 0; }

  /* Row: thumb | details over quantity | price over Entfernen. */
  .gg-hd-cart .cart-items__table-row {
    display: grid;
    grid-template-columns: var(--gg-hd-cart-thumb) minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      'media content  side'
      'media quantity side';
    column-gap: var(--gg-hd-cart-gap);
    row-gap: var(--gg-gap-label);
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .gg-hd-cart .cart-items__media {
    grid-area: media;
    align-self: start;
    inline-size: var(--gg-hd-cart-thumb);
  }

  .gg-hd-cart .cart-items__media-container {
    position: relative;
    display: block;
    aspect-ratio: 74 / 98;
    overflow: hidden;
    border-radius: var(--gg-radius-card);
    background: var(--gg-hd-cart-plate, var(--gg-white));
  }

  .gg-hd-cart .cart-items__media-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gg-hd-cart-tint, var(--gg-gray-lightest));
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .gg-hd-cart .cart-items__media-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    border-radius: 0;
  }

  .gg-hd-cart .cart-items__details {
    grid-area: content;
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    align-self: start;
  }

  .gg-hd-cart .cart-items__product-info {
    display: flex;
    flex-direction: column;
  }

  /* Title 14 SemiBold, single line; brand + size 14 regular underneath (Figma 5147:127). */
  .gg-hd-cart .cart-items__title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.2;
    color: var(--gg-hd-ink);
    text-decoration: none;
  }

  .gg-hd-cart .cart-items__details p:not(:has(.cart-items__title)),
  .gg-hd-cart .cart-items__variants-wrapper,
  .gg-hd-cart .cart-items__variants-wrapper * {
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-regular);
    line-height: 1.2;
    color: var(--gg-hd-ink);
  }

  .gg-hd-cart .cart-items__variants-wrapper { margin-block-start: 3px; }

  /* The applied-coupon tag keeps its own small size (cart-products stylesheet). */
  .gg-hd-cart .cart-items__variants-wrapper .gg-cart-coupon,
  .gg-hd-cart .cart-items__variants-wrapper .gg-cart-coupon * {
    font-size: 0.625rem;
  }

  /* Quantity − 1 + : plain glyphs, bottom-left. */
  .gg-hd-cart .cart-items__quantity {
    grid-area: quantity;
    align-self: end;
    justify-self: start;
  }

  .gg-hd-cart .cart-items__error { grid-area: quantity; align-self: end; }

  .gg-hd-cart .cart-items__quantity .volume-pricing-info { display: none; }

  .gg-hd-cart .cart-items__quantity-controls {
    justify-content: flex-start;
    gap: 0;
    padding: 0;
  }

  .gg-hd-cart .quantity-selector {
    display: inline-flex;
    align-items: center;
    gap: var(--gg-space-sm);
    inline-size: auto;
    block-size: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .gg-hd-cart .quantity-selector button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: auto;
    block-size: auto;
    min-inline-size: 0;
    min-block-size: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--gg-hd-ink);
    cursor: pointer;
  }

  .gg-hd-cart .quantity-selector button:hover { color: var(--gg-hd-muted); }

  .gg-hd-cart .quantity-selector .svg-wrapper {
    inline-size: 11px;
    block-size: 11px;
    color: currentColor;
  }

  .gg-hd-cart .quantity-selector input {
    inline-size: 2ch;
    min-inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-semibold);
    line-height: 1;
    color: var(--gg-hd-ink);
  }

  /* Price top-right, Entfernen bottom-right. */
  .gg-hd-cart .cart-items__price {
    grid-area: side;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    min-inline-size: 0;
    text-align: end;
  }

  .gg-hd-cart .cart-items__price-unit,
  .gg-hd-cart .cart-items__unit-price-wrapper { display: none; }

  .gg-hd-cart .cart-items__price-value {
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    color: var(--gg-hd-ink);
  }

  .gg-hd-cart .cart-items__remove {
    inline-size: auto;
    block-size: auto;
    min-block-size: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .gg-hd-cart .cart-items__remove::before,
  .gg-hd-cart .cart-items__remove::after { display: none; }

  .gg-hd-cart .cart-items__remove-text {
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-regular);
    line-height: 1.2;
    color: var(--gg-hd-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .gg-hd-cart .cart-items__remove:hover .cart-items__remove-text { color: var(--gg-hd-muted); }

  /* ── Free gift (gg-promotions carries its own row rules) ─────────────────── */
  .gg-hd-cart .gg-promo--cart {
    --promo-bleed: var(--gg-hd-cart-pad);
    padding-inline: var(--gg-hd-cart-pad);
  }

  /* ── Summary: Notiz / Rabatt, total, tax note, checkout ──────────────────── */
  /* Figma 5147:178: the totals block, then 32px, then the checkout button. */
  .gg-hd-cart__summary {
    display: flex;
    flex-direction: column;
    gap: var(--gg-hd-pad);
    padding: var(--gg-space-lg) var(--gg-hd-cart-pad);
    border-block-start: var(--gg-hd-rule);
  }

  .gg-hd-cart .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
    border: 0;
    padding: 0;
  }

  .gg-hd-cart .cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
  }

  .gg-hd-cart .cart-actions__divider { display: none; }

  .gg-hd-cart :is(.cart-note__summary, .cart-discount__summary) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 0;
    padding: 0;
    cursor: pointer;
  }

  .gg-hd-cart :is(.cart-note__label, .cart-discount__label) {
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-medium);
    color: var(--gg-hd-ink);
  }

  /* The "+" reads at the 16px glyph size of the Figma (5147:182). */
  .gg-hd-cart .cart-totals__icon {
    inline-size: 12px;
    block-size: 12px;
    color: var(--gg-hd-ink);
  }

  .gg-hd-cart .cart-note__inner { padding-block: var(--gg-space-sm) 0; }

  .gg-hd-cart .cart-totals__container {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-md);
  }

  .gg-hd-cart .cart-totals__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gg-space-md);
  }

  .gg-hd-cart .cart-totals__total-label,
  .gg-hd-cart .cart-totals__original-label {
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-regular);
    color: var(--gg-hd-muted);
  }

  .gg-hd-cart .cart-totals__total-value {
    font-size: var(--gg-text-2xl);
    font-weight: var(--gg-weight-semibold);
    line-height: var(--gg-text-2xl--lh);
    color: var(--gg-hd-ink);
  }

  /* Figma 5147:189: 12 regular at black 25%. */
  .gg-hd-cart .cart-totals__tax-note {
    max-inline-size: 260px;
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-regular);
    line-height: var(--gg-text-sm--lh);
    color: rgb(0 0 0 / 0.25); /* header ink is black in both modes */
  }

  .gg-hd-cart .cart-totals__tax-note a { color: inherit; }

  /* Checkout — the standard black GG button (Figma "Auschecken"). */
  .gg-hd-cart .cart__ctas {
    display: flex;
    justify-content: flex-start;
  }

  .gg-hd-cart .cart__checkout-button {
    inline-size: auto;
    block-size: auto;
    min-block-size: 0;
    padding: 5px var(--gg-space-sm);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--gg-pill-btn-bg);
    color: var(--gg-pill-btn-color);
    font-size: var(--gg-text-lg);
    font-weight: var(--gg-weight-medium);
    letter-spacing: 0; /* .button tracks its label — Figma 5147:191 has none */
  }

  .gg-hd-cart .cart__checkout-button::before,
  .gg-hd-cart .cart__checkout-button::after { display: none; }

  .gg-hd-cart .cart__checkout-button:hover { background: var(--gg-hd-ink); opacity: 0.8; }

  /* Empty cart: the shared empty state, inset like the rows. */
  .gg-hd-cart__empty { padding: var(--gg-space-lg) var(--gg-hd-cart-pad); }

  /* Tablet + phone: one column — the cart first, the newsletter under it. */
  @media screen and (max-width: 989px) {
    .gg-hd-cart { grid-template-columns: minmax(0, 1fr); }
    .gg-hd-cart__col { order: -1; border-inline-start: 0; }
    .gg-hd-cart .gg-hd__stage { border-block-start: var(--gg-hd-rule); }
  }

  @media screen and (max-width: 749px) {
    .gg-hd-cart { --gg-hd-cart-pad: var(--gg-inset); }
  }

  /* Spa: duotone thumbs on the ramp's light end, no tint (as the product cards). */
  body[data-spa-mode] .gg-hd-cart {
    --gg-hd-cart-plate: var(--gg-spa-duotone-plate);
    --gg-hd-cart-tint: transparent;
  }

  body[data-spa-mode] .gg-hd-cart .cart-items__media-image {
    filter: var(--gg-spa-duotone-filter);
    mix-blend-mode: multiply;
  }

  body[data-spa-mode] .gg-hd-cart .cart__checkout-button {
    background: var(--gg-spa-ink);
    color: var(--spa-orange);
  }
/* END_SNIPPET:gg-hd-cart */

/* START_SNIPPET:gg-hd-menu (INDEX:206) */
/* rail A | rail B | stage — Figma 221 / 214 / rest. */
  .gg-hd-menu {
    display: grid;
    grid-template-columns: var(--gg-hd-rail) var(--gg-hd-rail-2) minmax(0, 1fr);
  }

  .gg-hd-menu__rail {
    display: flex;
    flex-direction: column;
  }

  .gg-hd-menu__locale {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0;
  }

  /* A group: 32px in, 10px between links, 32px out; groups split by the rule.
     The last group absorbs the leftover height so the rail's column rule runs
     to the panel floor. */
  .gg-hd-menu__group {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
    margin: 0;
    padding: var(--gg-hd-pad) var(--gg-hd-pad) var(--gg-hd-pad) var(--gg-hd-cell-inset, var(--gg-hd-pad));
    list-style: none;
  }

  .gg-hd-menu__group:last-child { flex: 1; }

  .gg-hd-menu__group + .gg-hd-menu__group {
    border-block-start: var(--gg-hd-rule);
  }

  /* Rail A starts on the page gutter, like the bar's first link. */
  .gg-hd-menu__rail--links { --gg-hd-cell-inset: var(--gg-inset); }

  /* Figma 5147:211: the same type as the bar — Inter SemiBold 14, NO tracking. */
  .gg-hd-menu__link {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--gg-hd-ink);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  /* Hover focus: pointing at one link greys the rest of its rail (Figma 5146:38). */
  .gg-hd-menu__rail--links:has(.gg-hd-menu__link:is(:hover, :focus-visible))
    .gg-hd-menu__link:not(:hover, :focus-visible) {
    color: var(--gg-hd-muted);
  }

  /* Locale rail: the current language / market is black, the alternatives grey. */
  .gg-hd-menu__rail--locale .gg-hd-menu__link { color: var(--gg-hd-muted); }
  .gg-hd-menu__rail--locale .gg-hd-menu__link:is([aria-current], :hover, :focus-visible) { color: var(--gg-hd-ink); }

  .gg-hd-menu__mobile-only { display: none; }

  /* Phone: rails side by side (50/50), the stage (newsletter only — there is no
     hover to preview with) full width underneath. */
  @media screen and (max-width: 749px) {
    .gg-hd-menu {
      grid-template-columns: 1fr 1fr;
    }

    .gg-hd-menu .gg-hd__stage {
      grid-column: 1 / -1;
      border-inline-start: 0;
      border-block-start: var(--gg-hd-rule);
    }

    .gg-hd-menu__mobile-only { display: list-item; }
    .gg-hd-menu [data-teaser]:not([data-teaser='default']) { display: none; }
  }
/* END_SNIPPET:gg-hd-menu */

/* START_SNIPPET:gg-hd-search-row (INDEX:207) */
/* ONE track formula for the row AND the search body around it (gg-hd-search), so
     the field above can span exactly two card tracks. The track minimum is the
     largest of:
       · 200px                      — the card's own minimum (auto-fill packs them)
       · a tenth of the row         — never more tracks than the 10 results predictive
                                      search can return, so wide screens stretch the
                                      ten cards across the full width instead of
                                      leaving empty tracks (Figma: full-width row)
     and below 410px the 200px floor yields to half the width: always two cards. */
  :root {
    --gg-hd-search-tracks: repeat(
      auto-fill,
      minmax(max(min(200px, 50% - 5px), (100% - 9 * var(--gg-space-sm)) / 10), 1fr)
    );
  }

  .gg-hd-search-row {
    container: gg-hd-search-row / inline-size;
  }

  .gg-hd-search-row__list {
    display: grid;
    grid-template-columns: var(--gg-hd-search-tracks);
    gap: var(--gg-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @container gg-hd-search-row (width < 620px) { .gg-hd-search-row__item:nth-child(n + 3) { display: none; } }
  @container gg-hd-search-row (620px <= width < 830px) { .gg-hd-search-row__item:nth-child(n + 4) { display: none; } }
  @container gg-hd-search-row (830px <= width < 1040px) { .gg-hd-search-row__item:nth-child(n + 5) { display: none; } }
  @container gg-hd-search-row (1040px <= width < 1250px) { .gg-hd-search-row__item:nth-child(n + 6) { display: none; } }
  @container gg-hd-search-row (1250px <= width < 1460px) { .gg-hd-search-row__item:nth-child(n + 7) { display: none; } }
  @container gg-hd-search-row (1460px <= width < 1670px) { .gg-hd-search-row__item:nth-child(n + 8) { display: none; } }
  @container gg-hd-search-row (1670px <= width < 1880px) { .gg-hd-search-row__item:nth-child(n + 9) { display: none; } }
  @container gg-hd-search-row (1880px <= width < 2090px) { .gg-hd-search-row__item:nth-child(n + 10) { display: none; } }

  /* Entrance: the cards rise into place one after another, so a new result set reads
     as "these changed" instead of popping in. Tight on purpose — a short 8px lift, a
     30ms stagger (ten cards land within ~0.6s). It runs whenever the row is inserted
     (a new result set) or the panel opens (display none → block restarts it);
     gg-header.js skips the swap when a keystroke returns the same products, so typing
     never re-plays it for nothing. */
  @media (prefers-reduced-motion: no-preference) {
    .gg-hd-search-row__item {
      animation: gg-hd-card-in 0.36s var(--gg-ease-house) both;
      animation-delay: calc(var(--i, 0) * 30ms);
    }
  }

  @keyframes gg-hd-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  .gg-hd-search-row__empty {
    margin: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }
/* END_SNIPPET:gg-hd-search-row */

/* START_SNIPPET:gg-hd-search (INDEX:208) */
/* Header tone for the house search field: the panel's grey form surface, square
     corners — set through the field's own tokens (gg-lookup-field-styles), so its
     loading state reads the same surface. */
  .gg-hd-search {
    --gg-lookup-field-bg: var(--gg-gray-lightest);
    --gg-lookup-field-radius: 0;
    container: gg-hd-search / inline-size;
  }

  body[data-spa-mode] .gg-hd-search {
    --gg-lookup-field-bg: rgb(var(--gg-spa-ink-rgb) / 0.08);
  }

  /* The body runs the SAME track template as the card row (gg-hd-search-row), so the
     field spans exactly three card tracks at any width. */
  .gg-hd-search__body {
    display: grid;
    grid-template-columns: var(--gg-hd-search-tracks);
    gap: var(--gg-space-sm);
    padding: var(--gg-hd-pad) var(--gg-inset) calc(var(--gg-hd-pad) * 3);
  }

  /* Right-aligned: the field spans the LAST three tracks, flush with the row's
     right edge. */
  .gg-hd-search__form {
    grid-column: span 3 / -1;
    margin: 0;
  }

  .gg-hd-search__results { grid-column: 1 / -1; }

  /* Fewer than three tracks fit (body < 3 × 200 + 2 × 10 = 620px, plus the 2 × 9px
     inset): the field takes the full row instead — a span of 3 in a 2-track grid
     would invent a phantom column. */
  @container gg-hd-search (width < 638px) {
    .gg-hd-search__form { grid-column: 1 / -1; }
  }

  /* "Alle anzeigen" sits LEFT, under the first card: the bottom-right corner belongs
     to the sheet's close line (gg-header), which floats over every panel's corner. */
  .gg-hd-search__foot {
    display: flex;
    justify-content: flex-start;
    padding: var(--gg-hd-pad) var(--gg-inset);
    border-block-start: var(--gg-hd-rule);
  }

  /* The black GG button (same token pair as the cart checkout). */
  .gg-hd-search__all {
    display: inline-block;
    padding: 4px var(--gg-space-sm);
    background: var(--gg-pill-btn-bg);
    color: var(--gg-pill-btn-color);
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-regular);
    line-height: 1.2;
    letter-spacing: var(--gg-tracking-default);
    text-decoration: none;
  }

  .gg-hd-search__all:hover { opacity: 0.8; }

  @media screen and (max-width: 749px) {
    .gg-hd-search__body { padding-block-end: var(--gg-hd-pad); }
  }

  body[data-spa-mode] .gg-hd-search__all {
    background: var(--gg-spa-ink);
    color: var(--spa-orange);
  }
/* END_SNIPPET:gg-hd-search */

/* START_SNIPPET:gg-hero-overlay-styles (INDEX:209) */
/* align-items must stay STRETCH. With flex-start the head shrink-wraps to its
     label and the rule's negative margin starts from a too-narrow edge — invisible
     on desktop, where a wide body masks it, but obvious on mobile. Children that
     must not run full width (the body, the button) cap themselves instead. */
  .gg-hero-ovl {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* NO gap here: the overlay carries .gg-stack, which owns the vertical rhythm
       (see gg-text-styles). A gap would ADD to the stack's margins. */

    /* ── THE ALIGNMENT RULE ────────────────────────────────────────────────
       The overlay pads itself by --hero-overlay-pad (24px), not by the page
       inset, so the shared divider is told how far to pull out. One parameter,
       no override: snippets/gg-divider owns the mechanism, this names the value.
       These MUST stay the same var — two literals that happen to match will
       drift the moment one is tuned, and a rule a few px off is easy to miss. */
    --gg-divider-bleed: var(--hero-overlay-pad);
  }

  .gg-hero-ovl__label {
    font-weight: var(--gg-weight-medium);
  }

  /* Only the body copy is measured; the rule above stays full width. */
  .gg-hero-ovl__body {
    max-width: min(var(--hero-ovl-measure, 340px), 100%);
  }

  /* The button does NOT follow the text tone — it stays a black chip with a cream
     label in both tones (design requirement). --hero-black is defined on the
     section root; --gg-black is rebound on the overlay and would flip with it. */
  .gg-hero-ovl__cta {
    --gg-pill-btn-bg: var(--hero-black, #000000);
    --gg-pill-btn-color: var(--gg-cream);
    text-decoration: none;
    /* The column stretches its children so the rule can span; the button opts back
       out and sizes to its label. */
    align-self: flex-start;
  }
/* END_SNIPPET:gg-hero-overlay-styles */

/* START_SNIPPET:gg-item-card-styles (INDEX:210) */
.gg-item-card {
    display: flex;
    align-items: center;
    gap: var(--gg-space-sm);
    padding: var(--gg-item-card-pad, var(--gg-space-sm));
    background-color: var(--gg-item-card-bg, var(--gg-cream));
    border-radius: 0;
    box-shadow: none;
  }

  /* Works on an img itself or on a wrapper around one. */
  .gg-item-card__thumb {
    flex: 0 0 auto;
    width: var(--gg-item-card-thumb, 52px);
    height: var(--gg-item-card-thumb, 52px);
    overflow: hidden;
    object-fit: cover;
    border-radius: var(--gg-radius-card);
    background: transparent;
  }

  .gg-item-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gg-item-card__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0; /* let the title truncate */
  }

  /* End-aligned row: the row hugs the inline end and the text aligns to it, taking
     only its own width (still truncating when space runs out). The owner puts the
     thumb LAST in its markup so the image is the outermost element. */
  .gg-item-card--end { justify-content: flex-end; }
  .gg-item-card--end .gg-item-card__text { flex: 0 1 auto; text-align: end; }

  .gg-item-card__eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1.4;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
  }

  .gg-item-card__line {
    margin: 0;
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-item-card__line--clip {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
/* END_SNIPPET:gg-item-card-styles */

/* START_SNIPPET:gg-legal-guarantee (INDEX:211) */
/* WIDTH — why this escapes the 350px measure.

     .product-details .gg-accordion__content is capped at 350px
     (blocks/gg-info-accordions.liquid:117), mirroring _product-details.liquid's
     min(350px, 100%). That measure is correct for the running text it was built
     for, but this label is a fixed 1240 × 1754 A4 graphic: at 350px its body
     type renders ~7px — below --gg-text-xs (11px) and not legible.

     Legibility is a legal requirement here ("in hinreichender Größe"), so the
     panel opts out of the text measure via .gg-accordion__content--wide and the
     label fills the details column up to 600px; body type then lands ~12-13px.
     From 1200px the panel is a fixed --pdp-info-width (450px, set in
     product-information-content.liquid), so in practice the column width
     governs and the 600px ceiling is just a backstop. The Hersteller address
     above keeps the 350px measure (see _gg-accordion-item.liquid). */
  .gg-legal-guarantee {
    margin-block-start: var(--gg-space-md);
    width: 100%;
    max-width: 600px;
  }

  .gg-legal-guarantee__img {
    display: block;
    width: 100%;
    height: auto;
    /* Binding colours must survive untouched — never let a theme filter,
       blend mode or duotone treatment reach this element. */
    filter: none;
    mix-blend-mode: normal;
  }
/* END_SNIPPET:gg-legal-guarantee */

/* START_SNIPPET:gg-lookup-field-styles (INDEX:212) */
.gg-lookup__form { width: 100%; }

  .gg-lookup__search-wrap {
    position: relative;
    /* Flex row: context extras (e.g. the Shop's scope chips) sit INSIDE the
       field, left of the input. */
    display: flex;
    align-items: center;
    gap: var(--gg-space-xs);
    width: 100%;
    /* The WRAP is the white field (the input paints white via base.css anyway —
       see memory stylesheet-override-ordering): anything inside must sit on the
       white surface, not push it aside. */
    background: var(--gg-lookup-field-bg, var(--gg-white));

    /* THE FIELD IS ALWAYS A LIGHT SURFACE, so it re-anchors the ink for everything
       inside it. Tone-swapping parents (the hero overlay rebinds --gg-black to the
       hero's warm white for light-on-image text) would otherwise be inherited by the
       input, which reads that token for its colour — typed text and caret came out
       #faf7f1 on white, i.e. invisible. Re-binding here rather than hardcoding a
       colour on the input keeps one source of truth and fixes every child at once
       (placeholder, chips, prompt). */
    --gg-black: var(--gg-true-black, #000000);
    /* Soft corners on the FIELD SURFACE. The wrap is the only element in this
       stack that paints a background (the input is transparent, the input-wrap
       and prompt paint nothing), so it is the one that owns the corner — a
       radius on the input too would be a second corner inside this one, free to
       drift from it. --gg-radius-chip is the house's small-surface radius
       (nav pills, footer links, qty/cart buttons); the field joins that family. */
    border-radius: var(--gg-lookup-field-radius, var(--gg-radius-chip));
    /* THE UNDERLINE IS A BORDER, NOT A BOX-SHADOW. It used to be
       `box-shadow: 0 1px 0`, which paints OUTSIDE the border box — the one
       region a border-radius does not govern — so once the field gained corners
       the line ran straight past them. A border is inside the box and follows
       the curve by construction, which is also what lets the loading state
       animate this very line instead of parking a second object on top of it
       (see --loading below).

       Transparent on three sides so only the bottom edge shows; the 1px inline
       and top borders cost nothing visually and keep the box model symmetric,
       so the field's height does not shift between this and any future state
       that borders more of it. */
    border: 1px solid transparent;
    border-bottom-color: var(--gg-divider-color);
    transition: border-color var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  .gg-lookup__search-wrap:focus-within {
    border-bottom-color: var(--gg-black);
  }

  /* ── THE UNDERLINE IS THE PROGRESS BAR ──
     A travelling segment on the field's own hairline, painted only while a
     search request is genuinely in flight — gg-lookup.js's #setBusy already
     toggles .gg-lookup--loading for exactly that window, so this is CSS reading
     a signal that exists, not new state.

     Indeterminate on purpose: the fetch has no knowable duration, so a filling
     bar would be inventing progress. This says "working", not "62%".

     APPROACHES THAT FAILED, so they are not retried: a pseudo-element band
     (any element drawn OVER the field is a second object, and its geometry can
     only approximate the border's — at inset: 0 it sits one pixel inside the
     border and border-radius: inherit then gives it the wrong arc, so the two
     curves visibly diverged at the corners); a mask-composite ring plus
     clip-path (same overlay problem, and the clip window had to be as tall as
     the radius, so the bar climbed the full corner); and border-image (it
     replaces the border but paints the border box as a RECTANGLE, ignoring
     border-radius entirely — the corners snapped square while loading). */
  /* THE BORDER KEEPS ITS RESTING TONE WHILE LOADING — deliberately.
     The animated line covers only the FLAT span of the bottom edge; the two
     corner arcs are still drawn by the border itself, and blanking it would
     leave the field's corners visibly open. The gradient's own ends are
     --gg-divider-color for the same reason: they meet those arcs in the same
     tone, so the join is invisible and the underline reads as one continuous
     line whose middle darkens and travels.

     :focus-within must be beaten explicitly, not by source order — both it and
     a plain descendant rule are 0-2-0, and the field is ALWAYS focused while
     typing, which is exactly when loading runs. Pinning it to the resting tone
     here (0-3-0) also stops focus's black underline from out-darkening the
     travelling head and flattening the whole effect. */
  .gg-lookup--loading .gg-lookup__search-wrap,
  .gg-lookup--loading .gg-lookup__search-wrap:focus-within {
    border-bottom-color: var(--gg-divider-color);
  }

  /* THE LINE IS A BACKGROUND ON THE WRAP, NOT AN ELEMENT OVER IT.
     No pseudo-element, no mask, no clip-path — those are what produced a second
     stroke every time, because anything drawn on top of the field is by
     definition a second object and its geometry can only ever approximate the
     border's.

     Instead the wrap paints a 1px line as its own background layer, sitting on
     the bottom edge. A background is clipped by border-radius automatically, so
     it physically cannot escape the field's shape — there is no second geometry
     to diverge from, which is what every previous attempt got wrong.

     WHY IT NEVER CLIMBS A CORNER: the bar's two ends fade to
     --gg-divider-color, the exact tone the border's own arcs are drawn in. So
     when the bar arrives at either corner, the part of it over the curve is
     already indistinguishable from the arc beneath. The line and the arcs meet
     invisibly and no dark pixel ever lands on a curve.

     The border keeps painting the arcs throughout, so the field's shape is
     continuous. One line, one geometry, no overlay. */
  .gg-lookup--loading .gg-lookup__search-wrap {
    /* ONE SHORT SEGMENT, not a wide gradient. A layer three times the field's
       width put most of its own length on screen at all times, so what the eye
       saw was a slow tonal smear with no clear start or end — unreadable as
       progress. This is a discrete 28%-wide bar with brief fades at its two
       ends: it has a definite head and tail, so "a thing is crossing the field"
       is legible at a glance.

       The fades are to the resting divider tone, never to transparent, so the
       bar's ends dissolve into the underline instead of stopping dead — and so
       that when it reaches either corner it is already exactly the tone the
       border's arcs are drawn in. */
    background-image: linear-gradient(
      to right in oklab,
      var(--gg-divider-color) 0%,
      var(--gg-black) 25%,
      var(--gg-black) 75%,
      var(--gg-divider-color) 100%
    );
    /* 1px tall — the same weight as the border it stands in for, which is what
       stops it reading as a second, heavier stroke. */
    background-size: 28% 1px;
    background-repeat: no-repeat;
    /* border-box for both, so the layer is measured against and painted into the
       same box the border occupies — the default padding-box would place the
       line one pixel inside the border, which is exactly the 1px offset that
       made the two strokes diverge at the corners in the previous attempt.
       The radius clips this layer automatically; nothing else is needed. */
    background-clip: border-box;
    background-origin: border-box;
    background-position: 0 100%; /* vertical 100% pins it to the bottom edge */
    /* The base rule sets `background: var(--gg-white)` — the SHORTHAND, which
       also resets background-image to none. These longhands run later and add
       the gradient as a second layer without disturbing the colour, so the field
       stays white and the line paints over it. Keep them as longhands: a
       shorthand here would drop the white and the field would go transparent. */
    background-color: var(--gg-lookup-field-bg, var(--gg-white));
    /* LINEAR, and deliberately so. An ease curve makes a looping bar accelerate
       out of the left edge and decelerate into the right, then restart at full
       speed — read as a stutter rather than as steady work. Constant speed is
       what makes a repeating indicator legible. */
    animation: gg-underline-sweep 1.1s linear infinite;
  }

  /* LEFT TO RIGHT — the direction was inverted before, and that is most of why
     it read as unclear. A percentage background-position is resolved against
     (container − layer), so with the old 300%-wide layer that quantity was
     NEGATIVE: raising the percentage slid the layer the other way, and the
     content appeared to crawl right-to-left. With a 28% layer the quantity is
     positive again, so 0% (bar at the left edge) → 100% (bar at the right edge)
     travels the way a progress indicator is read.

     background-position-x only (not the shorthand) so the vertical 100% set
     above — which is what pins the line to the bottom edge — is preserved. */
  @keyframes gg-underline-sweep {
    from { background-position-x: 0%; }
    to   { background-position-x: 100%; }
  }

  /* Reduced motion: the field simply darkens its underline for the duration —
     the same "working" signal, stated rather than animated. */
  @media (prefers-reduced-motion: reduce) {
    .gg-lookup--loading .gg-lookup__search-wrap {
      background-image: none;
      animation: none;
      border-bottom-color: var(--gg-black);
    }
  }

  /* Positioning context for the rotating-prompt overlay, and the flex child the
     input used to be. The overlay MUST anchor here rather than to
     .gg-lookup__search-wrap: that wrap gains conditional padding while a chip
     is visible (:has() rule in gg-shop-nav-styles) and its chips take up to 45%
     of the width, so the input's left edge moves and no fixed offset against
     the wrap stays correct. Anchoring to the input's own box makes alignment
     automatic. Only the Shop renders the overlay; on Marken this is an inert
     wrapper that simply carries the flex sizing. */
  .gg-lookup__input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
  }

  .gg-lookup__input {
    flex: 1;
    min-width: 0; /* let the input shrink next to a wide chip */
    width: 100%;
    /* Taller/weightier field so it harmonizes with the airier filter rhythm
       (was 3px 5px / 12px). Shared with Marken — consistent there too. */
    padding: 6px 5px;
    border: none;
    border-radius: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);          /* 14px — matches facet header type */
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    -webkit-appearance: none;
  }

  /* THE INPUT MUST PAINT NOTHING. base.css gives every text input an opaque
     background at a specificity a single class cannot beat:

       base.css:1396  input:not([type='checkbox'],[type='radio'])  → 0-1-1
       base.css:60    input:hover                                  → 0-1-1
       .gg-lookup__input                                           → 0-1-0  (loses)

     So the input painted its own SQUARE white box on top of the wrap's rounded
     one. That is why the field read square at rest but rounded on focus (the
     focus rule below used to be the only selector heavy enough to win), why the
     Shop showed a corner only on the left (the chips sit left of the input, so
     the wrap's own corner was visible there and nowhere else), and why the
     loading sweep was invisible — it is a background on the wrap, and this
     opaque input was painted over it.

     .gg-lookup__input.gg-lookup__input is 0-2-0 and beats all of them. The
     doubled class is deliberate and load-bearing; do not "tidy" it to one.
     Every state is listed because base.css re-asserts the background on hover
     and autofill, and an unlisted state would repaint the square box. */
  .gg-lookup__input.gg-lookup__input,
  .gg-lookup__input.gg-lookup__input:hover,
  .gg-lookup__input.gg-lookup__input:focus,
  .gg-lookup__input.gg-lookup__input:focus-visible {
    background: transparent;
  }

  .gg-lookup__input::placeholder {
    color: var(--gg-gray-mid);
    opacity: 1;
  }

  /* ── Rotating prompt overlay (placeholder_style: reveal) ──
     A real element, because a `placeholder` attribute cannot be animated. It
     impersonates the placeholder exactly — same font, size, weight, tracking,
     colour and padding box as .gg-lookup__input above — so the swap between the
     static placeholder (on focus) and the rotating prompt is invisible.
     pointer-events: none is mandatory: there is no click-to-focus handler on
     the field, so a clickable overlay would swallow clicks meant for the input.
     Empty until JS fills it, so it is inert when JS is unavailable. */
  .gg-lookup__prompt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 6px 5px;
    pointer-events: none;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
  }

  /* The gg-key-tags entrance: rise + de-blur on that block's curve. Softer than
     character-typing, and the same motion the PDP key tags already use. */
  @keyframes gg-prompt-in {
    from { opacity: 0; transform: translateY(-12px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
  }
  @keyframes gg-prompt-out {
    from { opacity: 1; transform: translateY(0);    filter: blur(0); }
    to   { opacity: 0; transform: translateY(10px); filter: blur(5px); }
  }

  .gg-lookup__prompt--in {
    animation: gg-prompt-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .gg-lookup__prompt--out {
    animation: gg-prompt-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* Reduced motion: gg-lookup.js never starts the rotation, so the native
     static placeholder stays and the overlay must not linger visible. */
  @media (prefers-reduced-motion: reduce) {
    .gg-lookup__prompt,
    .gg-lookup__prompt--in,
    .gg-lookup__prompt--out { animation: none; opacity: 0; }
  }

  .gg-lookup__input:focus-visible { outline: none; }

  .gg-lookup__input::-webkit-search-cancel-button { display: none; }

  /* Submit icon hidden — Enter submits; the Shop is predictive/on-type anyway */
  .gg-lookup__submit { display: none; }
/* END_SNIPPET:gg-lookup-field-styles */

/* START_SNIPPET:gg-newsletter-popup (INDEX:213) */
/* The drawer: full width on the page foot, cream like the header, one rule on top.
     Resets the UA dialog box (centred, max-sized, bordered). The display is set only
     while [open] — the UA's dialog:not([open]) { display: none } must keep winning. */
  .gg-nl-pop {
    /* The close link is the header's link (.gg-hd__link) — feed it the header ink. */
    --gg-hd-ink: var(--gg-black);

    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: 100dvh;
    margin: auto 0 0;
    padding: 0 var(--gg-inset) var(--gg-gap-stagger);
    overflow-y: auto;
    border: 0;
    border-block-start: var(--gg-divider-width) solid var(--gg-divider-color);
    background: var(--gg-cream);
    color: var(--gg-black);
  }

  .gg-nl-pop[open] {
    display: flex;
    flex-direction: column;
    gap: var(--gg-gap-stagger);

    /* Roll up from below the fold (base.css move-and-fade), the header sheet's speed + curve. */
    --start-y: 100%;
    --start-opacity: 1;
    animation: move-and-fade var(--gg-speed-roll) var(--gg-ease-house) both;
  }

  .gg-nl-pop.dialog-closing {
    --start-y: 0px;
    --end-y: 100%;
    --end-opacity: 1;
  }

  .gg-nl-pop::backdrop {
    background: var(--gg-scrim);
  }

  .gg-nl-pop[open]::backdrop {
    animation: fadeIn var(--gg-speed-roll) var(--gg-ease-house) both;
  }

  .gg-nl-pop.dialog-closing::backdrop {
    animation-name: fadeOut;
  }

  /* Close line: top-right on the 9px inset, like the header's close line. The bar
     holds no other item, so the bar's inset is the link's. */
  .gg-nl-pop__bar {
    display: flex;
    justify-content: flex-end;
    padding-block-start: var(--gg-inset);
  }

  /* Display header ≥32px → Vend Sans (house rule; Figma draws Inter). */
  .gg-nl-pop__title {
    margin: 0;
    font-family: var(--gg-font-display);
    font-size: var(--gg-text-4xl);
    font-weight: var(--gg-weight-semibold);
    line-height: 1;
    letter-spacing: 0;
    color: var(--gg-black);
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-nl-pop[open],
    .gg-nl-pop[open]::backdrop { animation: none; }
  }

  /* Spa: the header's ground — orange with ink (--gg-black and the divider already
     resolve to the ink on spa pages). */
  body[data-spa-mode] .gg-nl-pop {
    background: var(--spa-orange);
  }
/* END_SNIPPET:gg-newsletter-popup */

/* START_SNIPPET:gg-newsletter (INDEX:214) */
/* Shopify's form tag injects hidden inputs and an hCaptcha container as direct
     children, so the form uses block flow + explicit margins (no flex gap): injected
     nodes then add no phantom spacing. Figma 5147:105: title → field 10px, field →
     foot 40px. */
  .gg-newsletter__form {
    display: block;
    margin: 0;
  }

  .gg-newsletter__form .h-captcha:not(:empty),
  .gg-newsletter__form [class*='captcha']:not(:empty) {
    margin-block: var(--gg-space-sm);
  }

  /* ● title — Figma 5147:111: Inter SemiBold 14, line 22.4px (the shared Figma
     "line height/22_4" = 1.4rem), NO tracking, with the 7px orange marker dot. */
  .gg-newsletter__title {
    display: flex;
    align-items: center;
    gap: var(--gg-gap-label);
    margin: 0 0 var(--gg-space-sm);
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.4rem;
    letter-spacing: 0;
    color: var(--gg-black);
  }

  .gg-newsletter__title::before {
    content: '';
    flex-shrink: 0;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--gg-newsletter-dot, var(--gg-orange));
  }

  /* Abonnieren (left) + consent (right), baseline-aligned on one row. */
  .gg-newsletter__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gg-space-md);
    margin-block-start: var(--gg-space-lg);
  }

  .gg-newsletter__submit {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gg-black);
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .gg-newsletter__submit:hover {
    color: var(--gg-hover-tint);
  }

  /* Figma 5147:121 "Inter/Light": 11 / 15.4, letter-spacing 0. */
  .gg-newsletter__consent,
  .gg-newsletter__message {
    margin: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    font-weight: var(--gg-weight-light);
    line-height: var(--gg-text-xs--lh);
    letter-spacing: 0;
    color: var(--gg-black);
  }

  .gg-newsletter__consent {
    text-align: end;
  }

  .gg-newsletter__message {
    margin-block-start: var(--gg-space-sm);
  }

  /* Spa: black on orange — the marker dot turns ink like the rest of the palette. */
  body[data-spa-mode] .gg-newsletter {
    --gg-newsletter-dot: var(--gg-spa-ink);
  }
/* END_SNIPPET:gg-newsletter */

/* START_SNIPPET:gg-pc-styles (INDEX:215) */
/* ── Divider → carousel / grid ───────────────────────────────────────────────
     A carousel or product grid is no different from a heading: the divider sits 9px
     above it. The header div (not the divider inside it) is the section's grid
     child, so it carries the distance and cancels the section's own row-gap — the
     merchant "gap" setting, which would otherwise add to it. */
  .gg-pc-section .section-resource-list__header {
    margin-block-end: calc(var(--gg-gap-tight) - var(--gap, 0px));
  }
  .gg-pc-section .section-resource-list__header > .gg-divider-block .gg-divider {
    margin-block-end: 0;
  }

  /* ── Unified Product Card info block ─────────────────────────────────────────
     Rendered by snippets/gg-product-card-info.liquid via the card wrapper. One
     vertical stack: (sold-out badge) → type → title → brand → price.

     The rows do NOT share one gap (Figma 5082:2567 measures three different ones:
     type→title 6, title→brand 3, brand→price 12 — the name and its brand read as
     one unit, the price sits apart). They come from adjacent-sibling top-margins
     rather than a container gap so an absent type or brand row leaves NO residual
     space. A container gap cannot do that. */
  .gg-pc-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--gg-pc-image-gap); /* image → info */
  }

  .gg-pc-info__title  { margin-block-start: var(--gg-pc-gap-type); }
  .gg-pc-info__brand  { margin-block-start: var(--gg-pc-gap-brand); }
  .gg-pc-info__price  { margin-block-start: var(--gg-pc-gap-price); }

  /* First row never carries a top margin, whichever row happens to be first. */
  .gg-pc-info > :first-child { margin-block-start: 0; }

  /* All four rows are black; only the WEIGHT differs (type/price light 300,
     title/brand regular 400). line-height:1 on single-line rows so the visual gap
     equals the flex gap; title gets a looser lh so wrapped titles don't collide. */
  .gg-pc-info__type {
    font-family: var(--gg-font);
    font-size: var(--gg-pc-type-size);     /* 12px */
    font-weight: var(--gg-pc-type-weight); /* light 300 */
    line-height: 1;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-pc-info__title {
    display: block;
    font-family: var(--gg-font);
    font-size: var(--gg-pc-title-size);    /* 14px */
    font-weight: var(--gg-pc-title-weight); /* regular 400 */
    line-height: 1.2;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: none;
  }

  .gg-pc-info__brand {
    font-family: var(--gg-font);
    font-size: var(--gg-pc-brand-size);    /* 14px */
    font-weight: var(--gg-pc-brand-weight); /* regular 400 */
    line-height: 1;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* Price — product-price wrapper from gg-product-card-info / blocks/price.liquid */
  .gg-pc-info__price,
  .gg-pc-info__price .price,
  .gg-pc-section product-price,
  .gg-pc-section product-price .price {
    font-family: var(--gg-font);
    font-size: var(--gg-pc-price-size);    /* 12px */
    font-weight: var(--gg-pc-price-weight); /* light 300 */
    line-height: 1;
    color: var(--gg-black);
  }

  /* product-price is display:block with base spacing; strip it so the only space
     above it is the row margin set above (margin-block-start must survive, so this
     zeroes the other three sides rather than using the `margin` shorthand). */
  .gg-pc-info__price {
    display: block;
    margin-block-end: 0;
    margin-inline: 0;
    padding: 0;
  }

  /* Swatch dots are a wrapper-level sibling below .gg-pc-info. */
  .gg-pc-swatches { margin-top: var(--gg-pc-gap-price); }

  /* Sold-out badge — sits below image, above vendor/title/price */
  /* Grey out the info text rows when sold out. The sold-out badge itself now lives
     in the card image, top-right beside the Sale badge (see
     blocks/_product-card-gallery.liquid); .gg-pc-info--sold-out is set by
     snippets/gg-product-card-info.liquid when the product is unavailable. */
  .gg-pc-info--sold-out .gg-pc-info__type,
  .gg-pc-info--sold-out .gg-pc-info__title,
  .gg-pc-info--sold-out .gg-pc-info__brand,
  .gg-pc-info--sold-out .gg-pc-info__price,
  .gg-pc-info--sold-out .gg-pc-info__price .price {
    color: var(--gg-gray-mid);
  }

  /* Product card image corners — squared off (radius experiment) */
  .gg-pc-section .card-gallery {
    border-radius: 0;
    overflow: hidden;
  }

  /* Collection card image corners — squared off (radius experiment) */
  .gg-pc-section .collection-card__image {
    border-radius: 0;
    overflow: hidden;
  }

  @media (min-width: 750px) {
    /* Heading aligns to col 2 in carousel / editorial / bento modes.
     * grid-column: 1/-1 escapes the page-width center column so padding-inline-start
     * is measured from the viewport edge, matching the carousel track's margin-inline-start. */
    .gg-pc-section:not(.gg-pc-grid-inset) .section-resource-list__content,
    .gg-pc-section:not(.gg-pc-grid-inset) .section-resource-list__header {
      grid-column: 1 / -1;
      padding-inline-start: var(--gg-page-pad);
      /* Padded on the START side only, so a divider inside bleeds asymmetrically. */
      --gg-divider-bleed-start: var(--gg-page-pad);
      --gg-divider-bleed-end: 0px;
    }

    /* Align "Alle anzeigen" with the carousel track's right edge.
     * The cap goes on the LABEL ROW, never on the divider block: capping the block
     * also shrinks the rule inside it, and a shortened rule cannot reach the page
     * edge no matter what its margins say. Labels align to the track; the rule
     * spans the page. They are different jobs and need different widths. */
    .gg-pc-section:not(.gg-pc-grid-inset) .section-resource-list__header > *:not(.gg-divider-block),
    .gg-pc-section:not(.gg-pc-grid-inset) .gg-divider-block .gg-divider__labels {
      max-width: calc(100% - 2 * var(--gg-page-pad));
    }

    /*
     * Editorial and bento: same col-2 inset on both sides as grid-inset.
     * These layout classes are produced by resource-list.liquid for editorial/bento modes.
     */
    .gg-pc-section .resource-list--editorial,
    .gg-pc-section .resource-list--bento {
      grid-column: 1 / -1;
      padding-inline: var(--gg-page-pad);
    }

    /*
     * Carousel track: same symmetric page-pad inset as the grid, square corners.
     * force-full-width is produced by resource-list.liquid only in carousel mode —
     * grid/editorial/bento never produce this class, so this rule is safely scoped.
     * No border-radius / overflow:clip — those rounded the track corners and clipped
     * the squared cards. Padding (not margin) keeps both edges aligned to the grid.
     */
    .gg-pc-section .resource-list.force-full-width {
      width: 100%;
      margin-inline: 0;
      padding-inline: var(--gg-page-pad);
    }

    /*
     * Grid inset: escape page-width grid constraint (mirrors force-full-width),
     * then indent heading + grid to col 2 from the viewport edge.
     * grid-column: 1/-1 is required so padding-inline is measured from 100vw,
     * not from the narrower page-width center column.
     */
    .gg-pc-grid-inset .section-resource-list__content,
    .gg-pc-grid-inset .section-resource-list__header,
    .gg-pc-grid-inset .resource-list--grid {
      grid-column: 1 / -1;
      padding-inline: var(--gg-page-pad);
    }
  }

  @media (max-width: 749px) {
    .gg-pc-section .section-resource-list__content,
    .gg-pc-section .section-resource-list__header {
      padding-inline: var(--gg-page-pad);
    }

    .gg-pc-section .resource-list.force-full-width {
      margin-inline: 0;
      padding-inline: var(--gg-page-pad);
    }
  }

  /* ── Unified 5px card gap, everywhere ────────────────────────────────────────
     The product card is used identically on every surface, so the gap between
     cards is a fixed 5px on both axes — pinned in CSS here (the single source of
     truth) so it can't drift per section.

     - Main collection / search use .product-grid (its own --product-grid-gap var).
     - Recommendations / product-list use .resource-list (column/row gap vars from
       snippets/resource-list.liquid, grid AND carousel modes).
     Mobile main-grid caps its gap at 12px upstream, and 5 < 12, so mobile is 5px. */
  .gg-pc-section .product-grid {
    gap: 5px;
    row-gap: 32px;
  }

  .gg-pc-section .resource-list {
    --resource-list-column-gap-desktop: 5px;
    --resource-list-row-gap-desktop: 5px;
  }
/* END_SNIPPET:gg-pc-styles */

/* START_SNIPPET:gg-pill-styles (INDEX:216) */
/* ── Dual segment pill ── */
  .gg-dual-pill {
    display: inline-flex;
    align-items: center;
    height: var(--pill-height, 25px);
    background: var(--pill-bg, var(--gg-black));
    border-radius: var(--pill-radius, 0);
  }

  .gg-dual-pill__seg {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--pill-pad-in, 11px);
    color: var(--pill-color, var(--gg-cream));
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-size: var(--pill-font, 14px);
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    text-decoration: none;
    white-space: nowrap;
  }

  /* Padding model: base --pill-pad-in on the outer edges, larger --pill-pad-out
     on the SEAM (where segments meet) — matches header + original hero pill,
     creating visual separation between the two labels. */
  .gg-dual-pill__seg:first-child {
    border-radius: var(--pill-radius, 0) 0 0 var(--pill-radius, 0);
    padding-right: var(--pill-pad-out, 22px);
  }

  .gg-dual-pill__seg:last-child {
    border-radius: 0 var(--pill-radius, 0) var(--pill-radius, 0) 0;
    padding-left: var(--pill-pad-out, 22px);
  }

  /* ── Single CTA button (e.g. "Read more") with + capsule icon ──
     Same icon architecture as .gg-smh-text__cta / .gg-reviews__write. */
  .gg-cta-button {
    display: inline-flex;
    align-items: center;
    gap: var(--pill-icon-gap, var(--gg-space-sm));
    height: var(--pill-height, 25px);
    padding: 0 var(--pill-pad-out, 22px);
    background: var(--pill-bg, var(--gg-black));
    color: var(--pill-color, var(--gg-cream));
    border-radius: var(--pill-radius, 0);
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-size: var(--pill-font, 14px);
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
  }

  /* Icon capsule scales with the button via --pill-icon-* (set by size tier). */
  .gg-cta-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pill-icon-w, 18px);
    height: var(--pill-icon-h, 13px);
    background: var(--pill-color, var(--gg-cream));
    color: var(--pill-bg, var(--gg-black));
    border-radius: 9999px;
    font-size: var(--pill-icon-font, 12px);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
  }
/* END_SNIPPET:gg-pill-styles */

/* START_SNIPPET:gg-policy-styles (INDEX:218) */
/* ── 12-col page grid: menu (cols 1–2) · gap (col 3) · content (cols 4–12) ── */
  .gg-policy-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    row-gap: var(--gg-space-md);
    padding-inline: var(--gg-page-pad);
    padding-block-start: 240px;
    padding-block-end: var(--gg-space-xl);
  }

  /* ── Divider: two heads that meet at the col-4 line → one continuous rule.
        menu-head spans cols 1–3, title-head cols 4–12. ── */
  .gg-policy-head {
    grid-row: 1;
    display: flex;
    align-items: end;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }
  .gg-policy-head--menu  { grid-column: 1 / 7; }
  .gg-policy-head--title { grid-column: 7 / -1; }
  .gg-policy-head__label {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base); /* 13px — same as gg-section-divider label */
    font-weight: var(--gg-weight-medium);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* ── Sidebar menu (cols 1–2) — 14px medium, body leading ── */
  .gg-policy-menu {
    grid-column: 1 / 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xs);
  }
  .gg-policy-menu__link {
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs); /* 11px */
    font-weight: var(--gg-weight-medium);
    line-height: var(--gg-text-xs--lh); /* like body copy */
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: none;
  }
  .gg-policy-menu__link:hover { text-decoration: underline; text-underline-offset: 2px; }
  .gg-policy-menu__link.is-active { text-decoration: underline; text-underline-offset: 2px; }

  /* ── Content column (cols 4–12) ── */
  .gg-policy-layout .shopify-policy__container {
    grid-column: 7 / -1;
    grid-row: 2;
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* Title lives in the divider now — hide Shopify's own. */
  .gg-policy-layout .shopify-policy__title { display: none; }

  /* Body — 14px readable measure, left-aligned long-form prose. */
  .shopify-policy__body {
    max-width: 30rem;
    margin: 0;
    text-align: left;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md); /* 14px */
    line-height: var(--gg-text-md--lh); /* 1.35 — same as normal body copy */
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .shopify-policy__body > .rte > :first-child { margin-block-start: 0; }
  .shopify-policy__body > .rte > :last-child  { margin-block-end: 0; }

  .shopify-policy__body p { margin: 0 0 var(--gg-space-md); }

  /* Headings the merchant may use inside the policy HTML. */
  .shopify-policy__body :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: var(--gg-space-lg) 0 var(--gg-space-sm);
  }
  .shopify-policy__body :is(h1, h2) {
    font-size: var(--gg-text-lg); /* 16px */
    line-height: var(--gg-text-lg--lh);
  }
  .shopify-policy__body :is(h3, h4, h5, h6) {
    font-size: var(--gg-text-md); /* 14px */
    line-height: var(--gg-text-md--lh);
  }

  /* Lists. */
  .shopify-policy__body :is(ul, ol) {
    margin: 0 0 var(--gg-space-md);
    padding-inline-start: 1.25rem;
  }
  .shopify-policy__body li { margin-block-end: var(--gg-space-xs); }

  /* Links — underlined, brand colour (no default blue). */
  .shopify-policy__body a {
    color: var(--gg-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .shopify-policy__body a:hover { text-decoration: none; }

  .shopify-policy__body :is(strong, b) { font-weight: var(--gg-weight-medium); }

  /* Tables / blockquotes / rules the editor may insert. */
  .shopify-policy__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--gg-space-md);
  }
  .shopify-policy__body :is(td, th) {
    border: var(--gg-divider-width) solid var(--gg-divider-color);
    padding: var(--gg-space-xs) var(--gg-space-sm);
    text-align: left;
  }
  .shopify-policy__body blockquote {
    margin: 0 0 var(--gg-space-md);
    padding-inline-start: var(--gg-space-md);
    border-inline-start: 2px solid var(--gg-divider-color);
    color: var(--gg-gray-dark);
  }
  .shopify-policy__body hr {
    border: 0;
    border-block-start: var(--gg-divider-width) solid var(--gg-divider-color);
    margin: var(--gg-space-lg) 0;
  }

  /* ── Mobile (<750px): single stack — Menü divider, menu, title divider, content.
        Each head becomes its own full-width divider. ── */
  @media screen and (max-width: 749px) {
    .gg-policy-layout {
      grid-template-columns: 1fr;
      padding-block-start: var(--gg-space-xl);
      padding-block-end: var(--gg-space-lg);
    }
    .gg-policy-head--menu  { grid-column: 1 / -1; grid-row: 1; }
    .gg-policy-menu        { grid-column: 1 / -1; grid-row: 2; }
    .gg-policy-head--title { grid-column: 1 / -1; grid-row: 3; }
    .gg-policy-layout .shopify-policy__container { grid-column: 1 / -1; grid-row: 4; }
    .shopify-policy__body { max-width: none; }
  }
/* END_SNIPPET:gg-policy-styles */

/* START_SNIPPET:gg-product-card-mini (INDEX:220) */
.gg-pc-mini {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .gg-pc-mini__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--gg-pc-mini-plate, var(--gg-white));
  }

  /* The grey tint multiplies over image AND plate so they read as one surface. */
  .gg-pc-mini__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gg-pc-mini-tint, var(--gg-gray-lightest));
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .gg-pc-mini__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  /* Second image: stacked over the first, invisible until a MOUSE hovers the card —
     then the two swap instantly (the big card's previewImage uses animate:false).
     The first one hides too, so in the Spa each image multiplies onto the plate,
     never onto the other image. */
  .gg-pc-mini__media .gg-pc-mini__hover {
    position: absolute;
    inset: 0;
    opacity: 0;
  }

  .gg-pc-mini__media .gg-pc-mini__hover--cover { object-fit: cover; }

  @media (hover: hover) and (pointer: fine) {
    .gg-pc-mini:hover .gg-pc-mini__media:has(.gg-pc-mini__hover) img:not(.gg-pc-mini__hover) { opacity: 0; }
    .gg-pc-mini:hover .gg-pc-mini__hover { opacity: 1; }
  }

  .gg-pc-mini .gg-pc-info__title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Spa: duotone packshot on the ramp's light end, no tint (the tint would darken
     the plate and bring back letterbox bands — see gg-product-mini-card). */
  body[data-spa-mode] .gg-pc-mini {
    --gg-pc-mini-plate: var(--gg-spa-duotone-plate);
    --gg-pc-mini-tint: transparent;
  }

  body[data-spa-mode] .gg-pc-mini__media img {
    filter: var(--gg-spa-duotone-filter);
    mix-blend-mode: multiply;
  }
/* END_SNIPPET:gg-product-card-mini */

/* START_SNIPPET:gg-product-mini-card (INDEX:221) */
/* ── Row: thumb left, text column right — same layout as the PDP quick-add. ──
     Palette comes from these four vars; a caller sets a variant class to change
     them, never the rules below. */
  .gg-mini-card {
    --mini-card-ink: var(--gg-black);
    /* White plate + the grey tint overlay below, NOT an opaque grey plate:
       packshots ship with a baked-in white background, so a grey plate under a
       `contain`-fitted image just frames a white rectangle in grey. The tint
       multiplies over image AND plate, so the two read as one surface. */
    --mini-card-plate: var(--gg-white);
    --mini-card-tint: var(--gg-gray-lightest);
    --mini-card-cta-bg: var(--gg-black);
    --mini-card-cta-color: var(--gg-cream);
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--gg-space-sm);
  }

  /* Spa: white plate matching the duotone ramp's LIGHT END (since the 2026-09
     black-on-orange flip that is the spa ORANGE). A `contain`-fitted packshot
     letterboxes, so any mismatch here shows as bands top and bottom. */
  .gg-mini-card--spa {
    --mini-card-ink: var(--gg-spa-ink);
    --mini-card-plate: var(--gg-spa-duotone-plate);
    /* No tint: .gg-spa-duotone already maps the image through the gradient ramp,
       and the plate is deliberately the ramp's light end. Multiplying grey over
       that would darken both and reintroduce the letterbox banding the plate
       colour exists to prevent. */
    --mini-card-tint: transparent;
    --mini-card-cta-bg: var(--gg-spa-ink);
    --mini-card-cta-color: var(--spa-orange);
  }

  /* Hero: text follows the overlay's tone, but the plate stays OPAQUE grey — the
     packshot must read cleanly whatever the hero photograph is doing behind it.
     The CTA keeps the neutral black/cream default in BOTH tones (by design). */
  .gg-mini-card--hero {
    --mini-card-ink: var(--hero-ink, var(--gg-black));
    --mini-card-cta-bg: var(--hero-black, #000000);
  }

  .gg-mini-card__image {
    position: relative;
    display: block;
    width: 84px;
    min-width: 84px;
    aspect-ratio: 4 / 5;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--mini-card-plate);
  }
  /* Super-light grey tint over the WHOLE tile — the packshot's white background
     and the plate multiply to the same grey, so there is no visible box-in-a-box.
     Inherited from the PDP quick-add card, which is where this treatment was
     tuned. Spa sets --mini-card-tint to transparent: its duotone filter already
     maps the image, and a tint on top would double-darken it. */
  .gg-mini-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mini-card-tint, transparent);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  /* The IMG MUST NOT carry the plate colour. In the spa it also carries
     .gg-spa-duotone, and a CSS filter applies to the element's whole rendered box
     -- background included -- so a painted background here gets pushed through the
     gradient map along with the pixels. The orange plate (luminance 0.45) came out
     of the ramp as #4E2006, drawing dark brown letterbox bars above and below every
     contain-fitted packshot. The plate lives on the unfiltered wrapper above; this
     stays transparent and shows it through. */
  .gg-mini-card__img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
  }

  /* Text column: title/vendor top, CTA pinned to the bottom. */
  .gg-mini-card__body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
  }
  .gg-mini-card__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  /* The brand is the dominant line; the product name (which carries the size) is
     secondary — hence the lighter, smaller title above a heavier vendor. */
  .gg-mini-card__title {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-light);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--mini-card-ink);
    text-decoration: none;
  }
  .gg-mini-card__vendor {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-regular);
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--mini-card-ink);
  }

  .gg-mini-card__form .shopify-product-form { margin: 0; }

  /* ── CTA: squared chip, price in the label. ── */
  .gg-mini-card .gg-mini-card__cta.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mini-card-cta-bg);
    color: var(--mini-card-cta-color);
    border: none;
    border-radius: 0;
    padding: 4px 12px;
    min-height: 0;
    height: auto;
    font-family: var(--gg-font);
    /* Inverted chip: a light label on the dark fill loses more stroke than the
       reverse, so this runs one step above the page body. The price is
       concatenated INTO this label (see mini_cta_label above), so there is no
       separate price element -- this one weight carries both. */
    font-weight: var(--gg-weight-book);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .gg-mini-card__cta .add-to-cart-icon,
  .gg-mini-card__cta .add-to-cart__added { display: none; }
  .gg-mini-card__cta .add-to-cart-text {
    display: inline-flex;
    align-items: center;
    gap: 0;
  }
  .gg-mini-card__cta .add-to-cart-text__content > span span { padding: 0; }
  .gg-mini-card__cta[disabled] { opacity: 0.4; cursor: not-allowed; }
  /* Price inside the CTA label: one step above the label itself. It sits on the
     inverted chip AND is the number people scan for, so it carries the most stroke
     of anything in the button. Scoped under .gg-mini-card__cta so it outranks the
     button rule above at equal specificity. */
  .gg-mini-card__cta .gg-mini-card__cta-price {
    font-weight: var(--gg-weight-semibold);
  }
/* END_SNIPPET:gg-product-mini-card */

/* START_SNIPPET:gg-promotion-banner (INDEX:222) */
/* Floating chrome cloned from .gg-cart-toast — same tokens, mirrored to the left.
     z-index --layer-heightened (4): above page content, BELOW the header + open cart
     drawer (drawer lives in the sticky header's stacking context at 8) so a persistent
     left banner never overlaps the drawer on the right. */
  .gg-promo-banner {
    position: fixed;
    top: calc(var(--header-height));
    left: var(--gg-page-pad);
    z-index: var(--layer-heightened, 4);

    display: flex;
    gap: var(--gg-space-sm);
    align-items: stretch; /* body fills the media height so its bar can bottom-align (see body rule) */
    width: min(420px, calc(100vw - (2 * var(--gg-page-pad))));
    padding: var(--gg-space-sm);
    background-color: var(--gg-gray-light);
    border-radius: 0;
    /* Banner bg is --gg-gray-light; bump the progress track to gray-mid so the empty
       bar is visible against it (same fix as the cart surface). */
    --gg-promo-track: var(--gg-gray-mid);

    /* Motion mirrors gg-cart-toast (same family). ENTRANCE (base → .is-visible): push down
       from -8px + fade, expo-out decelerate. EXIT (.is-leaving): dissolve IN PLACE — fade +
       a slight zoom, NO upward slide (that slide is what made it feel jumpy/aggressive). */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1), transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .gg-promo-banner[hidden] { display: none; }

  .gg-promo-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Exit: from the visible resting position, fade + gentle zoom in place (no translate),
     matching the toast's dissolve curve. */
  .gg-promo-banner.is-leaving {
    opacity: 0;
    transform: translateY(0) scale(1.04);
    transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1), transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Media: product image · gift icon · "%" — smaller than cart rows (52px, per Figma) */
  .gg-promo-banner__media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 60px;
    background: var(--gg-white);
    overflow: hidden;
  }

  .gg-promo-banner__media img { width: 100%; height: 100%; object-fit: contain; }
  .gg-promo-banner__media .promo-media__icon { width: 55%; }

  .gg-promo-banner__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* children hug the left (like cart/PDP) — button doesn't stretch full-width */
    gap: var(--gg-space-xs);
    flex: 1;
    min-width: 0;
  }

  /* Same vertical distribution as the cart/PDP: title at top, progress bar + caption
     (or claim button) pinned to the bottom of the media. */
  .gg-promo-banner__body > .promo-progress,
  .gg-promo-banner__body > .promo-action {
    margin-block-start: auto;
  }

  .gg-promo-banner__close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    padding: 2px;
    line-height: 1;
    font-size: var(--gg-text-md);
    color: var(--gg-gray-dark);
    cursor: pointer;
  }

  @media (prefers-reduced-motion: reduce) {
    /* .promo-progress__fill transition:none is already global (gg-promotions.liquid). */
    .gg-promo-banner { transition: opacity 300ms linear; transform: none; }
    .gg-promo-banner.is-visible { transform: none; }
  }
/* END_SNIPPET:gg-promotion-banner */

/* START_SNIPPET:gg-promotions (INDEX:223) */
/* ─────────────────────────────────────────────────────────────────────────
     Shared promo system — cart / PDP / banner all compose these classes.
     Values are existing --gg-* tokens only (see theme-styles-variables.liquid).
     Row anatomy mirrors .gg-quickadd__* so the three surfaces read as one system.
     ───────────────────────────────────────────────────────────────────────── */
  .gg-promo:empty { display: none; } /* fail-safe: no promo → no chrome, no layout jump */

  /* Row: image left, tight text stack right, top-aligned (per Figma). */
  .gg-promo__row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gg-space-md);
    padding-block: var(--gg-space-md);
  }

  .gg-promo__row:not(:last-child) {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Vertical distribution (per Figma): in a TOP-LEVEL promo row, the title + product/Choose
     pin to the TOP of the image and the progress bar + caption (or the claim button) pin to
     the BOTTOM. Stretch the row so the body fills the image height, then give the bottom
     cluster `margin-block-start:auto` to push it down — everything above stays top-aligned.
     Picker-list rows are excluded (they keep their own tighter flush-left rhythm). */
  .gg-promo > .gg-promo__row { align-items: stretch; }
  .gg-promo > .gg-promo__row .gg-promo__body > .promo-progress,
  .gg-promo > .gg-promo__row .gg-promo__body > .promo-action {
    margin-block-start: auto;
  }

  /* No double line where a row is immediately followed by the picker window:
     the picker's own top frame is the divider. */
  .gg-promo__row:has(+ .gg-promo__picker) { border-bottom: none; }

  /* Media slot: product photo · gift icon · "%". ~69px portrait per Figma.
     Corners are surface-specific: rounded in the cart, square on the PDP. */
  .promo-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 69px;
    min-width: 69px;
    aspect-ratio: 69 / 85;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--gg-white);
  }

  .promo-media__img { object-fit: contain; width: 100%; height: 100%; display: block; }

  /* Canonical product-image treatment (identical to .gg-pdp-media__slot::after and
     card-gallery): WHITE plate + a super-light multiply tint so the product photo's
     white background reads as the site's standard light-grey wash — plate stays white,
     tint sits over the image. Scoped with :has() to slots holding a real product IMAGE;
     the gift icon + "%" glyph stay clean on the white plate, untinted. */
  .promo-media:has(.promo-media__img)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gg-gray-lightest);
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
  }

  /* Gift icon / % is a centered glyph on the white plate, not a fill. */
  .promo-media__icon { width: 34px; height: 34px; }

  .promo-media__percent {
    font-family: var(--gg-font-display);
    font-weight: var(--gg-weight-semibold);
    font-size: var(--gg-text-2xl);
    line-height: 1;
    color: var(--gg-black);
    letter-spacing: var(--gg-tracking-default);
  }

  /* Text column — tight vertical stack, top-aligned. */
  .gg-promo__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: 6px;
  }

  /* Title row: green dot + bold headline ("FREE GIFT!", "2 für 1"). */
  .promo-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-semibold);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .promo-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gg-promo-dot);
    flex-shrink: 0;
  }

  /* Subtitle: fixed gift's "title, brand, size" (one line), or tier label. */
  .promo-detail {
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-light);
    font-size: var(--gg-text-xs);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
  }

  /* Progress bar — thin, full-width, tight under the text (Figma ≈ 6px). */
  .promo-progress {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: var(--gg-promo-track);
    overflow: hidden;
    margin-block-start: 2px;
  }

  .promo-progress__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--promo-pct, 0%);
    background: var(--gg-promo-fill);
    border-radius: 999px;
    transition: width 900ms var(--gg-ease-house);
  }

  /* Caption under the bar: "12,00 € / 16,00 €  bis zu deinem Geschenk". */
  .promo-progress-label {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
  }

  .promo-progress-label strong { font-weight: var(--gg-weight-regular); color: var(--gg-black); }

  /* Action: black square button (claim / Auswählen) — mirrors quickadd CTA. */
  .promo-action {
    background-color: var(--gg-black);
    color: var(--gg-cream);
    border: none;
    border-radius: 0;
    padding: 4px 12px;
    font-family: var(--font-body--family);
    font-weight: var(--gg-weight-regular);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
    cursor: pointer;
  }

  .promo-action:disabled { opacity: 0.4; cursor: not-allowed; }

  /* "Choose" is an underlined text link (Figma), not a filled button. */
  .promo-action--link {
    background: none;
    border: none;
    color: var(--gg-black);
    padding: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    letter-spacing: var(--gg-tracking-default);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .promo-oos {
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    color: var(--gg-gray-mid);
    letter-spacing: var(--gg-tracking-default);
  }

  /* ── Cart surface: rounded media. Full-width dividers that span the whole drawer,
     matching the between-product rules. The summary pads 24px (--padding-xl) inline,
     so we bleed by that exact amount to reach both edges. ── */
  .gg-promo--cart {
    display: block;
    /* The cart summary is `display:flex; align-items:center`, so children shrink to content
       and center unless told to stretch — without this the widget renders ~256px wide and
       inset, and the bleed below pulls from the wrong edge. Match the sibling CTAs/totals. */
    width: 100%;
    align-self: stretch;
    /* The cart-drawer summary pads --padding-2xl (24px) inline on desktop, --padding-xl
       on mobile. Bleed by the same so dividers reach the true drawer edges. */
    --promo-bleed: var(--padding-2xl, 24px);
    /* Cart summary bg is --gg-gray-light; the default track (also gray-light) would be
       invisible. Bump the track to gray-mid so the empty bar reads on the grey surface. */
    --gg-promo-track: var(--gg-gray-mid);
  }

  @media (max-width: 749px) {
    .gg-promo--cart { --promo-bleed: var(--padding-xl, 20px); }
  }

  .gg-promo--cart .promo-media { border-radius: var(--gg-radius-card); }

  /* Top-level promo rows break out to the true drawer edges.
     (Picker's INNER rows are excluded — the window already spans full width.) */
  .gg-promo--cart > .gg-promo__row {
    margin-inline: calc(var(--promo-bleed) * -1);
    padding-inline: var(--promo-bleed);
  }

  /* The picker window spans edge-to-edge (frame lines full width) but insets its
     CONTENT from the left, so the choice list visibly sits "under" the header. */
  .gg-promo--cart > .gg-promo__picker {
    margin-inline: calc(var(--promo-bleed) * -1);
    padding-inline-end: var(--promo-bleed);
    padding-inline-start: calc(var(--promo-bleed) + var(--gg-space-xl));
  }

  .gg-promo--cart > .gg-promo__row:first-child {
    border-block-start: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* ── PDP surface: match the sibling quickadd cards EXACTLY so the promo row + the recs
     below read as ONE list. quickadd uses: 84px/4:5 media, --gg-space-sm gap + padding,
     --gg-gray-light divider. (The cart/banner keep the base Figma rhythm.) ── */
  .gg-promo--pdp .promo-media {
    border-radius: 0;
    background: var(--gg-white);
    width: 84px;
    min-width: 84px;
    aspect-ratio: 4 / 5;
  }

  .gg-promo--pdp .gg-promo__row {
    gap: var(--gg-space-sm);
    padding-block: var(--gg-space-sm);
  }

  /* quickadd's between-row divider colour/weight (not the translucent cart divider). */
  .gg-promo--pdp .gg-promo__row:not(:last-child) {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* The promo block and the recs block are separate elements → the last promo row's
     :not(:last-child) rule leaves NO line before the recs. Add it on the PDP host so the
     promo→recs seam matches the card-to-card dividers. display:block is required — the
     host is a custom element (defaults to inline, where border-bottom only underlines the
     inline text run, not a full-width row). See [[custom-element-inline-display]]. */
  .gg-promo--pdp:not(:empty) {
    display: block;
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Picker list (expanded): an enclosed "window" — INSET from the left + tighter row
     rhythm than the promotions, framed top/bottom, so it clearly reads as "you are
     inside the Choose list". No background change — same drawer surface. */
  .gg-promo__picker {
    display: flex;
    flex-direction: column;
    border-block: var(--gg-divider-width) solid var(--gg-divider-color);
    margin-block: 0;
  }

  /* Tighter row rhythm inside the list (vs the looser --gg-space-md promo rows). */
  .gg-promo__picker .gg-promo__row {
    gap: var(--gg-space-sm);
    padding-block: var(--gg-space-sm);
  }

  .gg-promo__picker .gg-promo__row:not(:last-child) {
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Choice row: title line 1, brand line 2, black Auswählen button below. */
  .promo-detail--title { color: var(--gg-black); }

  .gg-promo__picker .promo-action { align-self: flex-start; margin-block-start: 4px; }

  @media (prefers-reduced-motion: reduce) {
    .promo-progress__fill { transition: none; }
  }
/* END_SNIPPET:gg-promotions */

/* START_SNIPPET:gg-rule-styles (INDEX:224) */
.gg-rule {
    display: block;
    width: 100%;
    height: 0;
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }
/* END_SNIPPET:gg-rule-styles */

/* START_SNIPPET:gg-shop-nav-styles (INDEX:227) */
/* ════════════════════════════════════════════════════════════════════
     GG EDITORIAL SHOP NAV  (epic sf87 — tag-nav model; sticky-top since wuhq)
     12-col edge-to-edge grid (same recipe gg-pdp-info applies to .section).
     Centered search field over the category TAG rows (subrows on hover),
     the whole nav sticky below the floating header while the page scrolls;
     on the Shop, filters live in the external #gg-filter-panel under the
     collection header (.gg-lookup--filters-open on the component = the ONE
     open/closed state, mirrored as .is-open on the panel).
     ════════════════════════════════════════════════════════════════════ */
  .gg-shop-nav {
    /* Breathing room before the collection header / product grid (was too tight) */
    margin-block-end: var(--gg-space-lg);
  }

  /* Mobile: flex column — the band passes through (display:contents, further
     down) so suche/cats stack directly with their order rules. */
  @media screen and (max-width: 749px) {
    .gg-shop-nav {
      display: flex;
      flex-direction: column;
    }
  }

  @media screen and (min-width: 750px) {
    .gg-shop-nav {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--gg-gutter);
      align-items: start;
    }
  }

  /* ── Kategorien: the category tag rows. Mobile (base): vertical stack.
     Desktop: wrapping row — see the row engine below. ── */
  .gg-shop-nav__kategorien {
    display: flex;
    flex-direction: column;
  }

  /* Links size to their text, not the column, so hover/active area fits the word */
  .gg-shop-nav__cat {
    align-self: flex-start;
  }

  /* ════════════════════════════════════════════════════════════════════
     TAG NAV  (bean sf87 — Figma 3438:3354; shared by Shop AND Marken)
     Main categories render as TAGS in a row under the centered search field;
     each main's subcategories live in an always-rendered subrow that the
     hover model (desktop) or active state (mobile) reveals.
     ════════════════════════════════════════════════════════════════════ */

  /* The tag — one visual family with the search-field chips (same height,
     surface, type). Links, so color/decoration resets matter. Surface scale:
     lightest at rest → light on hover → mid when active (Figma states). */
  .gg-shop-tag {
    display: inline-flex;
    align-items: center;
    height: var(--gg-tag-h);
    padding: 0 var(--gg-tag-pad-x);
    background-color: var(--gg-gray-lightest);
    color: var(--gg-black);
    border-radius: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    line-height: 1;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  .gg-shop-tag:hover { background-color: var(--gg-gray-light); }

  /* Color stays black in every state — active/hover live on the BACKGROUND:
     lightest at rest, light on hover AND when active (Figma states — never
     mid). After .gg-shop-tag:hover in source so the active surface wins the
     same-specificity tie on a hovered active tag. */
  .gg-shop-nav__cat--active,
  .gg-shop-nav__subcat--active { background-color: var(--gg-gray-light); }

  .gg-shop-tag-group { display: contents; }

  .gg-shop-tag-subrow { display: none; }

  /* Row engine (desktop): mains flow as one wrapping row; each group is
     display:contents so its main tag joins the row while the group still owns
     its subrow (the :hover/:focus-within scope). The container is the
     positioning anchor for the hover-overlay subrows (below). BOTH gaps stay
     0 — the vertical gap is the subrow's own padding, and the horizontal gap
     between mains is a transparent border ON the tags (below): a column-gap
     was a hover DEAD ZONE — a pointer decelerating there while aiming
     diagonally at a subcategory read as "left the group", armed the grace
     close and wiped the panel out from under the click. Mobile keeps the
     base column stack. */
  @media screen and (min-width: 750px) {
    .gg-shop-nav__kategorien {
      position: relative;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      column-gap: 0;
      row-gap: 0;
    }
  }

  /* Sub tags float in with the house stagger (--gg-i is set inline per tag)
     whenever the subrow's display flips from none. */
  .gg-shop-tag-subrow .gg-shop-tag--sub {
    animation: gg-float-in 0.6s var(--gg-ease-house) both;
    animation-delay: calc(var(--gg-i, 0) * 30ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-shop-tag-subrow .gg-shop-tag--sub { animation: none; }
  }

  /* ── FILTER SUGGESTIONS ───────────────────────────────────────────────────
     Tags offered while typing; a click applies one. They REPLACE the category
     pills rather than adding a row: the band is already search + pills + the
     hover subrow, and a fourth element would be too much at once.

     Deliberately built from .gg-shop-tag, so a suggestion IS the same object as
     a category pill — the swap then reads as the row changing its contents, not
     as a different component appearing over it.

     Mobile-first here (this rule is outside the ≥750 block): a horizontal
     SCROLLING row. The pills below the field are a vertical stack of 9 on
     mobile; swapping that for a vertical list would push the grid off-screen
     with the keyboard up, leaving the shopper unable to see whether the search
     already found what they wanted. A ranked list of ≤6 is not a 9-item menu,
     so a single scrollable row fits its shape and stays above the fold. */
  .gg-shop-nav__suggestions {
    display: flex;
    gap: var(--gg-space-xs);
    margin-block-start: var(--gg-space-xs);
    overflow-x: auto;
    scrollbar-width: none;
    /* Bleed to the page edge so the row can scroll past the field's inset
       instead of clipping mid-tag. */
    scroll-padding-inline: var(--gg-page-pad);
  }

  .gg-shop-nav__suggestions::-webkit-scrollbar { display: none; }

  /* TOUCH TAP TARGET. --gg-tag-h is 28px, which is right for a dense pill row
     a pointer aims at but under the ~44px a finger needs. Raised only on
     coarse pointers, and only for SUGGESTIONS: a category pill has the hover
     panel and the Filter drawer as alternative routes, while a suggestion is
     the sole way to reach that filter by touch — a missed tap here has no
     fallback. Padding, not height, so the text stays optically centred. */
  @media (pointer: coarse) {
    .gg-shop-tag--suggestion {
      min-height: 44px;
      padding-block: 0;
    }
  }

  .gg-shop-tag--suggestion {
    flex: 0 0 auto;
    gap: 0.35em;
    border: 0;
    cursor: pointer;
    /* Same staggered entrance as the subrow tags (--gg-i set inline per tag).
       The row wipes once on enter; re-ranking as the shopper keeps typing must
       NOT replay the wipe — only this float-in carries the change, or the row
       strobes on every keystroke. */
    animation: gg-float-in 0.6s var(--gg-ease-house) both;
    animation-delay: calc(var(--gg-i, 0) * 30ms);
  }

  /* KEYBOARD HIGHLIGHT (↑/↓). Focus never moves — the input keeps it so the
     shopper can go on typing — so the browser paints no focus ring here and
     this class is the ONLY thing showing where Enter would land. It therefore
     uses the darker active surface rather than the hover tint: it has to read
     as a committed selection, not as a hover the pointer happens to be over.
     Same surface as an active category pill, so the visual vocabulary holds. */
  .gg-shop-tag--suggestion.gg-shop-tag--active {
    background-color: var(--gg-gray-light);
    box-shadow: inset 0 0 0 1px var(--gg-black);
  }

  /* The facet name is the disambiguation, not decoration: "Creme · Farbe" is
     what tells a shopper the tag is a makeup shade and not a face cream.
     Quieter than the value so the value still reads first. */
  .gg-shop-tag--suggestion .gg-shop-tag__facet {
    color: var(--gg-gray-mid);
  }

  .gg-shop-tag--suggestion .gg-shop-tag__facet:not(:empty)::before {
    content: '·';
    margin-inline-end: 0.35em;
  }

  /* THE EXIT. Leaving the field plays the same float-out a chip plays — the row
     is a tag row, so it belongs to the same motion family, and reusing the
     keyframe is what keeps them from drifting. Without this the tags vanished in
     one frame while the pills faded back over 200ms: the swap was animated in
     one direction only. JS holds `hidden` until this finishes
     (#clearSuggestions), so the pills never return over a tag still fading.
     Duration must stay under the 400ms backstop timer there. */
  .gg-shop-tag--suggestion.gg-shop-tag--out {
    animation: gg-float-out 0.3s var(--gg-ease-house) both;
    animation-delay: 0ms;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-shop-tag--suggestion,
    .gg-shop-tag--suggestion.gg-shop-tag--out { animation: none; }
  }

  /* ── Hover reveal (desktop pointers only): hovering/focusing anywhere in a
     group shows ITS subrow as an OVERLAY — absolutely positioned under ALL
     main rows (top:100% of the kategorien anchor, so wrapped main rows can't
     misplace it). A single-row subrow paints inside the reserved band; a
     two-row one (Körper, Lifestyle) overflows ON TOP of the divider/grid
     instead of pushing them down — the page never jumps on hover. Solid page
     background so overlaid content can't shine between the tags. The bridge:
     the subrow starts flush at the mains' bottom edge and its
     padding-block-start IS the visual gap — the pointer's straight path from
     main tag down into the subrow never leaves the group. Subcats are
     hover-only on desktop even for the active main (Figma). ── */
  /* The overlay's entrance: the box wipes open downwards while the sub tags
     float in with their stagger. One motion: "the container extends, the
     tags appear with it". The exit plays the same wipe in reverse
     (--closing, JS-orchestrated: display can't animate, so #initSubrowHover
     holds the class until animationend).

     The wipe is a MASK, deliberately NOT clip-path: clip-path clips HIT
     TESTING too, so during the reveal the not-yet-wiped region was a hover
     hole — a pointer diving toward a subcategory faster than the wipe
     (~150ms) hit-tested to the grid BEHIND the panel, the nav read it as
     "pointer left", armed the grace close and wiped the panel out from
     under the first click (verified via elementFromPoint mid-reveal,
     2026-07-06). A mask affects paint only — the panel's full box is
     hoverable from frame one. */
  @keyframes gg-subrow-reveal {
    from { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; }
    to   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
  }

  @keyframes gg-subrow-conceal {
    from { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
    to   { -webkit-mask-size: 100% 0%; mask-size: 100% 0%; }
  }

  @media screen and (min-width: 750px) and (hover: hover) {
    /* --open is JS-managed hover-intent (gg-lookup.js #initSubrowHover):
       opening is immediate, closing has a grace period — pure :hover flashed
       shut every time the pointer crossed the gap between two main tags.
       --closing keeps the panel laid out while it wipes shut.
       :focus-within keeps the keyboard path CSS-only. */
    .gg-shop-tag-group--open .gg-shop-tag-subrow,
    .gg-shop-tag-group--closing .gg-shop-tag-subrow,
    .gg-shop-tag-group:focus-within .gg-shop-tag-subrow {
      display: flex;
      position: absolute;
      top: 100%;
      left: 0;
      /* Hug the tag rows so the header hairline spans exactly as far as the
         tags do (Figma 3440:6373); a wrapping row caps at the band width. */
      right: auto;
      width: fit-content;
      max-width: 100%;
      z-index: 2;
      flex-wrap: wrap;
      gap: var(--gg-space-xs);
      /* The gap to the main row — also the hover bridge (see row engine). */
      padding-block-start: calc(var(--gg-space-md) + var(--gg-space-xs));
      padding-block-end: var(--gg-space-xs);
      background: var(--color-background);
      /* solid-black mask layer the reveal/conceal keyframes resize (top-down
         wipe); default mask-size auto = fully visible when no animation runs
         (--handover, reduced motion). */
      -webkit-mask-image: linear-gradient(#000, #000);
      -webkit-mask-repeat: no-repeat;
      mask-image: linear-gradient(#000, #000);
      mask-repeat: no-repeat;
      animation: gg-subrow-reveal 0.35s var(--gg-ease-house) both;
    }

    /* Closing is PURELY VISUAL: pointer-events off so the wiping panel's
       (invisible, full-size) box can't intercept the pointer — without this,
       leaving the nav downward re-opened the panel behind the cursor and
       briefly blocked hovers/clicks on the grid beneath. Legit approaches
       never enter --closing anymore (the mask wipe keeps the whole panel
       hit-testable from frame one), so nothing is lost; re-hovering a MAIN
       tag mid-close still rescues without a wipe (#initSubrowHover). */
    .gg-shop-tag-group--closing .gg-shop-tag-subrow {
      animation: gg-subrow-conceal 0.3s var(--gg-ease-house) both;
      pointer-events: none;
    }

    /* Handover between two open categories (JS-set): the panel is already
       open — no box wipe, the incoming tags' float-in carries the change. */
    .gg-shop-tag-group--handover .gg-shop-tag-subrow {
      animation: none;
    }
  }

  /* Panel header: the hovered main's name over a hairline that closes the
     full panel width (= the tag extent, via fit-content above). */
  .gg-shop-tag-subrow__label {
    flex-basis: 100%;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    padding-block-end: var(--gg-space-xs);
    margin-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
  }

  /* Mobile's expanded list has its own compact rhythm — no panel header. */
  @media screen and (max-width: 749px) {
    .gg-shop-tag-subrow__label { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-shop-tag-subrow { animation: none !important; }
  }

  /* Touch tablets (≥750, no hover): no hover trap — a tap on a main navigates
     (making it active), and the ACTIVE group's subrow renders statically.
     IN-FLOW here (full-width row after the mains), not an overlay: it's a
     permanent part of the page on touch, so it must own real space. */
  @media screen and (min-width: 750px) and (hover: none) {
    .gg-shop-tag-group--active .gg-shop-tag-subrow {
      display: flex;
      flex-basis: 100%;
      order: 99;
      flex-wrap: wrap;
      gap: var(--gg-space-xs);
      padding-block-start: calc(var(--gg-space-md) + var(--gg-space-xs));
    }
  }

  /* ── Mobile (<750): search first, then the vertical tag stack. Groups are
     display:contents, so each subrow follows its main in the column naturally.
     The ACTIVE group's subrow renders expanded + indented; once a scope is
     active the other mains dim to mid-grey text (Figma 3434:38 — :has()
     degradation = simply no dim). ── */
  @media screen and (max-width: 749px) {
    /* The band wrapper is a desktop construct (stuck container anchor) — on
       mobile it passes through so suche/cats join the component's flex stack
       directly and the order rules below keep working. */
    .gg-shop-nav__band { display: contents; }

    .gg-shop-nav__suche { order: 0; }
    .gg-shop-nav__cats-wrap { order: 1; }

    .gg-shop-nav__kategorien {
      align-items: flex-start;
      gap: var(--gg-space-xs);
    }

    .gg-shop-tag-group--active .gg-shop-tag-subrow {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gg-space-xs);
      padding-block: var(--gg-space-xs);
      padding-inline-start: var(--gg-space-md);
    }

    .gg-shop-nav__kategorien:has(.gg-shop-nav__cat--active)
      .gg-shop-nav__cat:not(.gg-shop-nav__cat--active) {
      color: var(--gg-gray-mid);
    }
  }

  /* ── Placement (≥750): search centered over the tags, both on the
     3/11 band of the component's 12-col grid. The cats-wrap reserves the
     hover subrow's height so revealing it never shifts the page below
     (Figma: divider Y identical in base and hover states). ── */
  @media screen and (min-width: 750px) {
    /* ── STICKY-TOP LOOKUP (bean wuhq — replaces the docked bottom card) ──
       The inline lookup itself pins below the floating header bar and rides
       along while you scroll the page: search + tag rows, nothing else. Same
       element, zero JS — position:sticky inside the section (results-list on
       the Shop, .gg-marken on Marken) releases naturally at the section's
       end (never overlaps the footer).
       Margins sit OUTSIDE the sticky box (they scroll away as intended); the
       padding is what breathes around the pinned bar, so it's subtracted from
       the resting band to keep the initial layout identical. The solid page
       background masks grid content passing underneath; hovering a tag while
       stuck can't grow the box (the cats-wrap min-height reserves the subrow).
       Generous resting band per Figma: the search is the hero of the page.
       DOCKED (2026-11-04): pins directly on the header rule and becomes a
       full-width band (the ::before surface below) — the header's continuation.
       At rest: no surface, centred, all the negative space. */
    .gg-shop-nav {
      position: sticky;
      top: var(--header-height); /* directly under the sticky site header */
      z-index: calc(var(--layer-sticky) - 1); /* under the site header (layer 8) */
      /* container for the docked subrow's edge-to-edge span (cqw) */
      container-type: inline-size;
      /* The docked band's breathing over the field is padding INSIDE the sticky
         box; the same amount comes off the top margin, so the resting position
         is unchanged. */
      padding-block-start: var(--gg-space-md);
      margin-block: calc(var(--gg-space-xl) + var(--gg-space-lg) - var(--gg-space-md))
        calc(var(--gg-space-xl) + var(--gg-space-lg));
      /* scroll-direction hide/reveal (transform only — the sticky flow slot
         never changes, so hiding can't shift the grid) */
      transition:
        transform 0.35s var(--gg-ease-house),
        opacity 0.35s var(--gg-ease-house);
    }

    /* Scrolling down while stuck slides the bar fully out above the viewport
       (own height + the sticky offset); any deliberate up-scroll brings it
       back (gg-lookup.js #initSticky). */
    .gg-shop-nav.gg-lookup--stuck.gg-lookup--hidden {
      transform: translateY(calc(-100% - var(--header-height)));
      opacity: 0;
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .gg-shop-nav { transition: none; }
    }

    /* ── The band: search + tags as ONE centered unit (wrapper div — the
       anchor for the suggestion row and the hover subrow). Mid-tier
       (750–989) spans 2/12 so the tag row barely wraps; from 990 the Figma
       3/11 band with the ≈960px cap takes over. Visual order search→tags via
       flex order (DOM keeps cats-wrap first — JS hooks find it there). ── */
    .gg-shop-nav__band {
      grid-column: 2 / 12;
      grid-row: 1;
      justify-self: center;
      width: 100%;
      /* cap: 60rem on large screens (binds from ~1780px viewports); 54vw reins
         it in on laptops — a 13-inch viewport otherwise gets a nearly
         full-width band. ~690px at 1280, ~780px at 1440; the 9 main tags
         (~630px) keep a single row throughout. */
      max-width: min(60rem, 54vw);
      position: relative;
      display: flex;
      flex-direction: column;
    }

    .gg-shop-nav__band .gg-shop-nav__suche {
      order: 0;
      /* full-width field inside the band's flex column */
      align-self: stretch;
    }

    .gg-shop-nav__band .gg-shop-nav__cats-wrap {
      order: 1;
      margin-block-start: var(--gg-space-sm);
      /* main tag row (incl. its transparent bridge border) + subrow gap +
         subrow — hover must never shift the page */
      min-height: calc(2 * var(--gg-tag-h) + var(--gg-space-md) + 2 * var(--gg-space-xs));
    }

    /* Suggestions render exactly where the category pills sit. They live in the
       SEARCH column for morph safety (that subtree carries
       data-skip-subtree-update; cats-wrap must stay refreshable per collection,
       so JS-inserted nodes there are wiped by the first facet render), and are
       positioned into the pills' row rather than moved in the DOM.

       Absolute inside the band's existing positioning context, into the space
       cats-wrap ALREADY reserves for its hover subrow — so this costs zero
       layout and can never shift the grid below. No wrapping: the row scrolls
       instead, which keeps the band exactly one line taller as designed. */
    /* The search column becomes the containing block so the row anchors to the
       FIELD's bottom edge. Anchoring to the band instead would resolve
       `top: 100%` against the band's full height and drop the row below the
       pills — past the very space it is meant to occupy. */
    .gg-shop-nav__band .gg-shop-nav__suche {
      position: relative;
    }

    .gg-shop-nav__band .gg-shop-nav__suggestions {
      position: absolute;
      /* the gap cats-wrap uses between the field and its pill row */
      top: calc(100% + var(--gg-space-sm));
      left: 0;
      right: 0;
      margin-block-start: 0;
      z-index: 3; /* above the subrow panel (z-index: 2) while typing */
      /* DESKTOP WRAPS; MOBILE SCROLLS. The base rule above is a one-line
         horizontal scroller, which is right on touch (the swipe is native) but
         wrong on a pointer: a mouse has no swipe and no scrollbar here, so
         anything past the right edge was invisible AND unreachable. That is why
         the JS capped the list at 4 — a cap that silently hid options the row
         exists to show. Wrapping removes the reason for the cap.

         It costs no layout: cats-wrap already reserves TWO tag rows (its
         min-height, for the hover subrow), which is the same reservation that
         lets this row be positioned here at all. */
      flex-wrap: wrap;
      row-gap: var(--gg-space-xs);
      /* overflow-x:auto is inherited from the mobile rule; the shorthand cancels
         it, so the desktop row wraps instead of being a scroller that wraps. */
      overflow: hidden;
      /* Two lines, hard — a third would paint past the reserve and over the
         grid. The JS limit (8) is set so this clips only in the extreme. */
      max-height: calc(2 * var(--gg-tag-h) + var(--gg-space-xs));
    }

    /* The right-edge scroll-hint fade that used to live here is DELETED. It
       existed solely because the desktop row was a one-line scroller a mouse
       could not scroll; now the row wraps, nothing is cut off, and a fade would
       be dimming the edge of a row that no longer scrolls. */

    /* While suggestions are up, the category pills step aside — the row is
       showing what you could add, not where you are. The ACTIVE pill stays:
       it is the only "where am I" indicator in the band.

       ASYMMETRIC BY DESIGN. Leaving is immediate (the pills must be gone before
       the tags land on top of them), but the RETURN waits: the tags play their
       float-out first, and pills fading up underneath tags still fading down
       reads as two things colliding rather than one row changing hands. The
       delay lives on the resting rule, which is the state being transitioned
       TO, so it applies only on the way back. */
    .gg-shop-nav__band .gg-shop-nav__cat {
      transition: opacity 0.3s var(--gg-ease-house) 0.15s;
    }

    /* EVERY pill fades, the ACTIVE one included. The suggestion row is
       position:absolute over this exact strip (measured: both at the same top/
       left/width), so any pill left painted shows through the gaps BETWEEN the
       tags. The :not(--active) exemption this replaced belongs to the RESTING
       state, where the active pill is the shopper context and must stay lit;
       while the row owns the strip there is nothing for it to sit in. Symptom:
       on a collection page (never on /collections/all, which has no active
       pill) the category label bled through behind the suggestion tags. */
    .gg-shop-nav__band:has(.gg-shop-nav__suggestions:not([hidden])) .gg-shop-nav__cat {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s var(--gg-ease-house);
    }


    /* ── Docked band (Figma 5215:108 tones; full width since 2026-11-04): the
       header's cream with the house hairline on its bottom edge, edge to edge
       (bleeds through the section's page gutter), fading in only when docked —
       it costs zero layout, so stick/unstick can't shift the page. Painted
       behind the band content but above everything scrolling under it (the
       nav's own stacking context contains the -1). ── */
    .gg-shop-nav::before {
      content: "";
      position: absolute;
      /* Tucks one rule-width up UNDER the header (which paints above, layer 8):
         --header-height carries the raw 1.3px rule while the browser draws the
         header's rule at 1px, so the pinned band sits 0.3px low and products
         showed through the slit on retina (measured 2026-11-04). */
      inset-block-start: calc(-1 * var(--gg-divider-width));
      inset-inline: calc(-1 * var(--gg-page-pad));
      /* The nav's height INCLUDES the hover-subrow reserve (kept in BOTH
         states so stick/unstick never changes the sticky element's height —
         a height delta here shifted the whole grid). The band must still end
         under the tags, so its bottom edge pulls UP past the reserve:
         reserve − mains row − pad = tag-h + xs above the nav bottom. */
      bottom: calc(var(--gg-tag-h) + var(--gg-space-xs));
      z-index: -1;
      background: var(--gg-cream);
      border-block-end: var(--gg-divider-width) solid var(--gg-divider-color);
      opacity: 0;
      /* symmetric fade — safe now that the geometry is state-constant */
      transition: opacity 0.45s var(--gg-ease-house);
      pointer-events: none;
    }

    .gg-lookup--stuck::before {
      opacity: 1;
    }

    /* Docked tones (Figma 5215:108): on the cream card the field turns grey
       (through the field's own token, as in the header search) and the tags
       rest one step darker — the resting lightest grey barely reads on cream. */
    .gg-lookup--stuck {
      --gg-lookup-field-bg: var(--gg-gray-lightest);
    }

    .gg-lookup--stuck .gg-shop-tag {
      background-color: var(--gg-gray-light);
    }

    /* Hover and active step up to mid, so they still read against the
       docked resting tone. After the rest rule: active ties it at 0-2-0. */
    .gg-lookup--stuck .gg-shop-tag:hover,
    .gg-lookup--stuck .gg-shop-nav__cat--active,
    .gg-lookup--stuck .gg-shop-nav__subcat--active {
      /* background-COLOR, never the shorthand: the shorthand resets
         background-clip and floods the mains' transparent bridge border
         (= the "active tag is taller" bug). */
      background-color: var(--gg-gray-mid);
    }

    @media (prefers-reduced-motion: reduce) {
      .gg-shop-nav::before { transition: none; }
    }

    /* Docked + hover: the subrow is the band EXTENDING downwards — same
       surface, stretched edge to edge, closed with padding. The sub tags sit
       on it exactly like the main tags on the band (inline padding puts them
       back on the tag column). The hairline moves with the bottom edge: the
       extension draws it, the band's own line steps aside while it is open,
       so there is only ever one. Edge to edge from inside the centred tag
       column: kategorien is centred in the nav, so 50% − 50cqw is the nav's
       edge (cqw = the nav container) and the page gutter bleeds it out.

       EVERY STATE THAT OPENS THE PANEL MUST BE LISTED, not just --open.
       The base rule above opens the subrow on THREE selectors — --open,
       --closing and :focus-within — and sets `background: var(--color-background)`
       plus `right: auto` on all of them. This rule is the same specificity
       (0-2-0), so a bare `.gg-lookup--stuck .gg-shop-tag-subrow` only wins the
       properties the base rule declares LATER in source order; on the others the
       base rule keeps them.

       CLICKING a main category focuses its link, which matches :focus-within and
       re-opens the panel through that branch — measured on dev while stuck:
       background rgb(251,251,251) (--gg-cream, near-white) and right: 25.47px
       instead of the card's grey at -20px. That is the white rectangle: the
       panel painted on its BASE look, narrower than the card, for the moment the
       click holds focus. Naming the states here (0-3-0) makes this rule outrank
       the base one in every branch that can open the panel. */
    .gg-lookup--stuck .gg-shop-tag-group--open .gg-shop-tag-subrow,
    .gg-lookup--stuck .gg-shop-tag-group--closing .gg-shop-tag-subrow,
    .gg-lookup--stuck .gg-shop-tag-group:focus-within .gg-shop-tag-subrow,
    .gg-lookup--stuck .gg-shop-tag-subrow {
      left: calc(50% - 50cqw - var(--gg-page-pad));
      right: calc(50% - 50cqw - var(--gg-page-pad));
      /* reset the inline fit-content — the extension spans the band */
      width: auto;
      max-width: none;
      padding-inline: calc(50cqw - 50% + var(--gg-page-pad));
      padding-block-end: var(--gg-space-md);
      background: var(--gg-cream);
      border-block-end: var(--gg-divider-width) solid var(--gg-divider-color);
    }

    .gg-lookup--stuck:has(.gg-shop-tag-group--open)::before,
    .gg-lookup--stuck:has(.gg-shop-tag-group--closing)::before,
    .gg-lookup--stuck:has(.gg-shop-tag-group:focus-within)::before {
      border-block-end-color: transparent;
    }

    /* ALL spacing around a main tag lives INSIDE its hit area as transparent
       borders (background-clip keeps the grey off them):
       • block-end = the vertical breathing between wrapped rows AND the hover
         bridge down into the subrow;
       • inline-end = the horizontal gap to the next main (replaces the row
         engine's column-gap, which was a dead zone that dropped the group
         hover mid-aim — see the row-engine comment).
       Margin/gap variants of either are dead zones that close the panel.
       border-box sizing would swallow the border out of the 28px surface —
       add it back so mains and subs paint the exact same tag height. */
    .gg-shop-nav__cat {
      border: 0;
      border-block-end: var(--gg-space-xs) solid transparent;
      border-inline-end: var(--gg-space-xs) solid transparent;
      background-clip: padding-box;
      height: calc(var(--gg-tag-h) + var(--gg-space-xs));
    }
  }

  @media screen and (min-width: 990px) {
    .gg-shop-nav__band {
      grid-column: 3 / 11;
    }
  }

  /* The sticky stuck-sensor (1px, rendered right above the component on both
     pages): absolute so it adds no grid track; the JS IntersectionObserver
     (gg-lookup.js #initSticky) reads it. */
  .gg-shop-nav-sentinel {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  @media screen and (max-width: 749px) {
    .gg-shop-nav {
      /* Top gap comes from the section's own padding-block-start (48px setting)
         — an extra lg margin on top of it pushed the search too far from the
         header on mobile. Keep only the bottom margin toward the header bar. */
      margin-block: 0 var(--gg-space-lg);
    }
  }

  /* ── Filter panel (#gg-filter-panel, OUTSIDE the component, between the
     collection header and the grid): closed by default, .is-open expands via
     the 0fr→1fr grid-track transition (the inner div is the overflow-hidden
     track). visibility gates tab order + paint while closed; its 0s/0.35s
     transition delays the hide until the collapse finishes. ── */
  .gg-filter-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--gg-ease-house);
  }

  .gg-filter-panel.is-open {
    grid-template-rows: 1fr;
  }

  .gg-filter-panel__inner {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s 0.35s;
  }

  .gg-filter-panel.is-open .gg-filter-panel__inner {
    visibility: visible;
    transition: visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-filter-panel { transition: none; }
    .gg-filter-panel__inner { transition: none; }
  }

  /* Space the expanded facets between header bar and grid. On the panel's
     CONTENT (not the wrapper) so the closed track stays truly 0. */
  .gg-filter-panel__inner .facets-block-wrapper--vertical {
    margin: 0;
    padding-block: var(--gg-space-xs) var(--gg-space-lg);
  }

  /* The vertical facet column renders inline at EVERY width (Horizon defaults
     it to none <750 and routes to a drawer — we standardize on inline). */
  .gg-filter-panel .facets--vertical {
    display: block;
    position: static;
    height: auto;
    max-height: none;
    width: auto;
    overflow: visible;
  }

  /* Suppress the mobile "Show filters" drawer toggle — no drawer in our model. */
  .gg-filter-panel .facets-toggle {
    display: none;
  }

  /* Mobile: comfortable tap target + breathing room below the search field
     (md, not lg — lg opened a hole between search and the tag stack). */
  @media screen and (max-width: 749px) {
    .gg-shop-nav__suche { margin-block-end: var(--gg-space-md); }
    /* The prompt overlay impersonates the placeholder, so it must take the
       taller mobile padding with the input — listed together so the two can
       never drift apart. */
    .gg-shop-nav__suche .gg-lookup__input,
    .gg-shop-nav__suche .gg-lookup__prompt { padding-block: 11px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     GG SEARCH FIELD  (bean sed3) — the shared underline field base
     (.gg-lookup__form/__search-wrap/__input/__submit) moved to
     gg-lookup-field-styles (bean fpsh), rendered above. The predictive
     search JS binds to .gg-lookup__input — markup/contract unchanged.
     Below: shop-only extras (scope chips, loading state).
     ════════════════════════════════════════════════════════════════════ */

  /* ── Scope chips (epic fttx) — GreenGlam standard tag: header look ──
     Squared, gray-light, 14px/500, dot-free; × sits LEFT of the label.
     Chips are URL-projections: removal REMOVES the node (after the --out exit
     animation); they re-enter via gg-float-in when their param returns. */
  .gg-lookup__chips {
    display: flex;
    gap: var(--gg-space-xs);
    flex-shrink: 0;
    max-width: 45%;
  }

  /* ── GG float in/out — THE shared entrance/exit for chips and tag rows.
     Pure opacity + rise on the house curve (--gg-ease-house: slow start into
     an extreme terminal deceleration) so tags, chips and the grid cards read
     as one motion family. Stagger via --gg-i (set inline per element; chips
     default to 0 = no stagger). IN plays whenever a node is freshly inserted
     or its display flips from none ('both' holds the from-state during the
     delay). OUT is a class the JS adds; the node is removed on animationend. */
  @keyframes gg-float-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes gg-float-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(8px); }
  }
  .gg-lookup__chip {
    animation: gg-float-in 0.6s var(--gg-ease-house) both;
    animation-delay: calc(var(--gg-i, 0) * 30ms);
  }
  .gg-lookup__chip--out {
    animation: gg-float-out 0.45s var(--gg-ease-house) both;
    animation-delay: 0ms;
    pointer-events: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .gg-lookup__chip,
    .gg-lookup__chip--out { animation: none; }
  }

  .gg-lookup__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--gg-tag-h);
    padding: 0 var(--gg-tag-pad-x) 0 calc(var(--gg-tag-pad-x) - 2px);
    /* Black chip, white text/× — the active scope is the strongest element in
       the field (approved 2026-07-05). */
    background: var(--gg-black);
    color: var(--gg-white);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: var(--gg-font);
    font-size: var(--gg-text-md);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    white-space: nowrap;
    min-width: 0;
  }

  /* Label span (not the button) carries the ellipsis — flex buttons don't
     truncate bare text nodes. */
  .gg-lookup__chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Dainty ×: smaller than svg-wrapper--smaller's 0.6rem, hairline stroke. */
  .gg-lookup__chip .svg-wrapper {
    width: 7px;
    height: 7px;
    --icon-stroke-width: 0.75px;
  }

  /* With a visible chip the row gets breathing room so the chip floats INSIDE
     the white field instead of sitting flush on the underline (Figma 3418-529).
     The inline inset used to mirror the input's own 5px padding; with the field
     rounded (--gg-radius-chip on the wrap) 5px no longer READS as 5px — the
     chip's flat left edge lands where the corner is still turning, so the gap
     looks collapsed. Inset by the radius instead: that is the distance at which
     the wrap's edge has become vertical again, so the gap is measured from the
     straight part of the field rather than from the curve. */
  .gg-lookup__search-wrap:has(.gg-lookup__chip:not([hidden])) {
    padding-block: 4px;
    padding-inline-start: var(--gg-radius-chip);
  }

  /* Acknowledge a no-op: typing a value whose filter is ALREADY applied lifts
     the token (input clears) but changes nothing, so without this the query
     would just silently vanish. Reuses the float curve rather than inventing a
     motion — same family as the entrance, just a nudge. */
  @keyframes gg-chip-pulse {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
  }
  .gg-lookup__chip--pulse {
    animation: gg-chip-pulse 0.45s var(--gg-ease-house) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .gg-lookup__chip--pulse { animation: none; }
  }

  /* ══ Busy + pending ══════════════════════════════════════════════════════
     Two strengths of "the grid is not trustworthy right now", both driven from
     gg-lookup.js's #setBusy. The classes live on THIS component (it carries
     data-skip-node-update, so facet morphs can't wipe them) and reach the grid
     through .product-grid-container, the results-list wrapper that is the
     common ancestor of the nav and the grid.

       --loading  the user is typing and previous results are still meaningful
                  context: dim them, don't destroy them.
       --pending  we arrived with ?q= and the server painted the WHOLE
                  collection, which is simply wrong: never show it. Blank the
                  cards to placeholders until the real results land.          */

  .gg-lookup--loading .gg-lookup__input { opacity: 0.6; }

  /* Dim, don't hide — and keep it non-interactive so a click can't land on a
     card that is about to be replaced. */
  .product-grid-container:has(.gg-lookup--loading) .product-grid {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s var(--gg-ease-house);
  }

  /* The skeleton REUSES the grid's own cells — it never injects nodes.

     Two constraints force this shape. (1) gg-lookup.js caches the grid's
     innerHTML as the browse baseline (#originalGridHTML) and restores it when
     the search is cleared, so injected skeleton <li>s would be cached as that
     baseline and come back as a grid full of skeletons. (2) The card grid's
     column geometry is defined in base.css and varies per breakpoint and per
     grid-size setting; rebuilding it here would duplicate it and drift.

     Styling the existing <li> solves both: the real cells already sit in the
     real tracks, so hiding their CONTENT and painting the cell itself gives a
     correctly-aligned skeleton with no DOM change and no geometry copy. */
  .product-grid-container:has(.gg-lookup--pending) .product-grid__item > * {
    visibility: hidden;
  }

  .product-grid-container:has(.gg-lookup--pending) .product-grid__item {
    /* Match the product card: same aspect, and SQUARE — gg-pc-styles sets
       border-radius: 0 on card images (the deliberate "radius experiment"), so
       a rounded placeholder would misrepresent what lands in its place. */
    aspect-ratio: 3 / 4;
    /* base.css's --skeleton-opacity (0.025) is tuned for a small recommendation
       strip; across a full grid it reads as nothing. */
    background-color: color-mix(in srgb, var(--gg-black) 6%, transparent);
  }

  @media (prefers-reduced-motion: reduce) {
    .product-grid-container:has(.gg-lookup--loading) .product-grid {
      transition: none;
    }
  }
/* END_SNIPPET:gg-shop-nav-styles */

/* START_SNIPPET:gg-spa-gradient-map (INDEX:228) */
:root {
    /* The ramp's light end = the plate behind every duotoned image. */
    --gg-spa-duotone-plate: var(--spa-orange);
    --gg-spa-duotone-filter: grayscale(1) brightness(0.952) contrast(1.4);
  }

  /* Composable: opt any spa image into the duotone. */
  .gg-spa-duotone {
    filter: var(--gg-spa-duotone-filter);
    mix-blend-mode: multiply;
  }
/* END_SNIPPET:gg-spa-gradient-map */

/* START_SNIPPET:gg-teaser-styles (INDEX:231) */
.gg-teaser {
    --gg-teaser-img-w: 186px;
    --gg-teaser-body-max: 629px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gg-gap-section);
    inline-size: 100%;
    max-inline-size: var(--gg-teaser-body-max);
  }

  .gg-teaser__media {
    inline-size: var(--gg-teaser-img-w);
    /* 5:6 frame by default (category previews: mixed collection images). A teaser
       whose picture is art-directed passes its own ratio → shown uncropped. */
    aspect-ratio: var(--gg-teaser-ratio, 5 / 6);
    overflow: hidden;
    background: var(--gg-gray-lightest);
  }

  .gg-teaser__media img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .gg-teaser__body {
    inline-size: 100%;
  }

  /* Row: the cap moves from the whole teaser to the body (picture + gap sit
     beside it, not inside the 629px). 64px = two staggers — no 64 token. */
  @media screen and (min-width: 750px) {
    .gg-teaser--row {
      flex-direction: row;
      align-items: flex-end;
      gap: calc(2 * var(--gg-gap-stagger));
      max-inline-size: none;
    }

    .gg-teaser--row .gg-teaser__media { flex-shrink: 0; }
    .gg-teaser--row .gg-teaser__body { max-inline-size: var(--gg-teaser-body-max); }
  }

  /* Text teaser (category preview) — Figma 5146:85: title Inter SemiBold 12 on the
     22.4px (1.4rem) line, description Inter/Light 11 / 15.4, 5px apart, NO tracking. */
  .gg-teaser--text { --gg-teaser-body-max: 416px; }

  .gg-teaser__title {
    margin: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.4rem;
    letter-spacing: 0;
    color: var(--gg-black);
  }

  .gg-teaser__text {
    margin: var(--gg-gap-label) 0 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    font-weight: var(--gg-weight-light);
    line-height: var(--gg-text-xs--lh);
    letter-spacing: 0;
    color: var(--gg-black);
  }

  body[data-spa-mode] .gg-teaser__media {
    background: var(--gg-spa-duotone-plate);
  }

  body[data-spa-mode] .gg-teaser__media img {
    filter: var(--gg-spa-duotone-filter);
    mix-blend-mode: multiply;
  }
/* END_SNIPPET:gg-teaser-styles */

/* START_SNIPPET:gg-text-styles (INDEX:232) */
.gg-body,
  .gg-body--light {
    font-family: var(--gg-font);
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--color-foreground);
  }
  .gg-body        { font-weight: var(--gg-weight-regular); }
  .gg-body--light { font-weight: var(--gg-weight-light); }

  .gg-body p { margin-block: 0.5em; }
  .gg-body p:first-child,
  .gg-body--light p:first-child { margin-block-start: 0; }
  .gg-body p:last-child,
  .gg-body--light p:last-child  { margin-block-end: 0; }

  .gg-eyebrow-text {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.2;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-meta {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-regular);
    line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
  }

  .gg-heading {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-semibold);
    line-height: 1.3;
    letter-spacing: var(--gg-tracking-default);
    color: var(--color-foreground);
  }

  /* Editorial display title (28px) */
  .gg-title {
    font-family: var(--gg-font);
    font-size: var(--gg-text-3xl);
    font-weight: var(--gg-weight-regular);
    line-height: var(--gg-text-3xl--lh);
    letter-spacing: var(--gg-tracking-title);
    color: var(--color-foreground);
    margin: 0;
  }

  /* PDP-scale display title/price (24px) */
  .gg-title--display {
    font-family: var(--gg-font);
    font-size: var(--gg-text-2xl);
    font-weight: var(--gg-weight-medium);
    line-height: var(--gg-text-2xl--lh);
    letter-spacing: var(--gg-tracking-title);
    color: var(--color-foreground);
    margin: 0;
  }

  /* ════════════════════════════════════════════════════════════════════
     EDITORIAL TEXT ROLES — the GG spacing/type spec (Figma 5082:2927)
     Single source for every editorial surface: the Text block
     (_gg-editorial-text), Card-Text body (_smart-hero-text), gg-brand, the
     PDP, Spa, Shop and Contact. Heading moved 20px → 24px with the 2026-09
     spec; body and fineprint are unchanged.
     Gaps BETWEEN these roles are not set here — they belong to the parent
     (--gg-gap-text, 24px). Every role keeps margin:0 so gap is the only
     spacing mechanism.
     ════════════════════════════════════════════════════════════════════ */
  .gg-text__heading {
    font-family: var(--gg-font);
    font-size: var(--gg-ed-heading-size);
    line-height: var(--gg-ed-heading-lh, var(--gg-ed-heading-lh-fig));
    font-weight: var(--gg-weight-medium);
    /* Figma sets NO tracking on the heading — display type at 24px doesn't want
       the 0.04em the 13/14px roles carry. Not an oversight; keep it at 0. */
    letter-spacing: var(--gg-tracking-title);
    color: var(--gg-black);
    margin: 0;
  }

  .gg-text__body {
    font-family: var(--gg-font);
    font-size: var(--gg-ed-body-size);
    line-height: var(--gg-ed-body-lh, var(--gg-ed-body-lh-fig));
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: 0;
  }

  .gg-text__fineprint {
    font-family: var(--gg-font);
    font-size: var(--gg-ed-fineprint-size);
    font-weight: var(--gg-weight-regular);
    line-height: var(--gg-ed-fineprint-lh, 1.4);
    letter-spacing: var(--gg-tracking-default);
    /* transparent-black equivalent of gg-gray-dark — survives colored bg (Spa) */
    color: var(--gg-fineprint-color);
    margin: 0;
  }

  /* NOTE: the Essay sections used to opt into looser leading via
     .gg-image-text--relaxed. It is gone: the Figma spec frame is itself a
     long-form essay and pins body copy at 14/17, so a second "relaxed" leading
     only made the spec'd pages disagree with each other. One body leading,
     everywhere. The class may still sit on those section roots (harmless) —
     nothing reads it. */

  /* ══════════════════════════════════════════════════════════════════════
     THE EDITORIAL STACK — one vertical rhythm for every surface.

     Every editorial surface is the same stack of the same roles:
        divider → 9px → heading → 24px → body → 24px → fineprint/button
     Landing, PDP, Spa, Contact, Shop and the hero overlay all opt in with
     class="gg-stack" instead of each declaring its own gap. Before this, ~80
     separate gap declarations across five scales meant the same three elements
     spaced differently on every page.

     Owl selector (> * + *) rather than flex gap ON PURPOSE: gap is uniform, but
     this rhythm is not — the step after a divider is 9px while every other step
     is 24px. The owl lets each pair differ, works in flow AND flex, and a row
     that renders nothing leaves no residual space.
     ══════════════════════════════════════════════════════════════════════ */

  .gg-stack > * + * {
    margin-block-start: var(--gg-gap-text);
  }

  /* A divider bonds to what it heads: 9px, not the 24px of a normal step. */
  .gg-stack > .gg-divider + *,
  .gg-stack > .gg-ed-divider + * {
    margin-block-start: var(--gg-gap-tight);
  }

  /* ...unless body copy follows it directly with no heading between, in which case
     the body takes the gap the heading would have had. A TIGHT divider
     (.gg-divider--tight) is exempt: it is a label that belongs to the copy right
     under it (the PDP brand divider between title and short description), so it
     keeps the 9px bond to body copy too. */
  .gg-stack > .gg-divider:not(.gg-divider--tight) + .gg-text__body,
  .gg-stack > .gg-ed-divider + .gg-text__body {
    margin-block-start: var(--gg-gap-text);
  }

  /* The stack owns the spacing, so a divider inside one adds none of its own. */
  .gg-stack > .gg-divider,
  .gg-stack > .gg-ed-divider {
    margin-block-end: 0;
  }
/* END_SNIPPET:gg-text-styles */

/* START_SNIPPET:gg-variant-selector (INDEX:234) */
.gg-vs {
    display: block;
    width: 100%;
    padding-block-start: 32px;
  }

  .gg-vs__form {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-lg);
  }

  .gg-vs__option {
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
  }

  /* ── Indicator + divider (lockstep with snippets/gg-section-divider.liquid) ── */
  .gg-vs__indicator {
    display: flex;
    align-items: center;
    font-family: var(--gg-font);
    font-weight: var(--gg-weight-light);
    font-size: var(--gg-text-base);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
    /* Indicator now sits OUTSIDE the picker/form, so it owns the gap to the
       tiles below (the form's gap no longer applies to it). */
    margin: 0 0 var(--gg-space-sm);
  }

  .gg-vs__indicator-value {
    font-weight: var(--gg-weight-medium);
    margin-inline-start: 0.35em;
  }

  .gg-vs__fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }

  /* ── Color tiles ── */
  .gg-vs__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    max-width: 1000px;  
  }

  .gg-vs__label-wrap {
    cursor: pointer;
    display: inline-flex;
  }

  .gg-vs__tile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--gg-white);
    border: 1px solid var(--gg-gray-light);
    padding: 2px;
    box-sizing: content-box;
    transition: border-color 0.15s ease;
  }

  .gg-vs__label-wrap:hover .gg-vs__tile {
    border-color: var(--gg-gray-dark);
  }

  /* Selected tile gets the strong border. Keyed off :checked so it survives the
     native morph (no JS class toggling). */
  .gg-vs__input:checked ~ .gg-vs__tile {
    border-color: var(--gg-black);
  }

  .gg-vs__bar {
    --w-rest: 16px;
    --w-selected: 72px;
    display: block;
    width: var(--w-rest);
    height: 11px;
    border-radius: 3px;
    transition: width 0.2s ease;
  }

  /* Horizontal growth ONLY — height never changes. */
  .gg-vs__input:checked ~ .gg-vs__tile .gg-vs__bar {
    width: var(--w-selected);
  }

  /* ── Size pills (preserved from the original block) ── */
  .gg-vs__grid--size {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
  }

  .gg-vs__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gg-gray-light);
    height: 28px;
    padding-inline: var(--gg-space-sm);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    border: 1.5px solid transparent;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .gg-vs__option--size .gg-vs__label-wrap:hover .gg-vs__pill {
    border-color: var(--gg-gray-mid);
  }

  .gg-vs__input:checked ~ .gg-vs__pill {
    height: 38px;
    padding-inline: var(--gg-space-md);
    font-weight: 500;
  }

  .gg-vs__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
/* END_SNIPPET:gg-variant-selector */

/* START_SNIPPET:gift-card-recipient-form (INDEX:236) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    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 {
    /* 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;
    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;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    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, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &: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 */

/* START_SNIPPET:grid-density-controls (INDEX:237) */
.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-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-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:238) */
.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-drawer (INDEX:239) */
.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);
    box-shadow: var(--shadow-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-heightened);
    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;
  }

  .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;
  }

  .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);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .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);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:244) */
.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:247) */
.facets input:checked + label {
    font-weight: 500;
  }

  /* ── GreenGlam filter checkbox: ultra-simple square-in-square ──
     Canonical filter checkbox style (single source of truth). Small black
     outline square; unchecked = empty (transparent); checked = a centered
     smaller solid black square. The SVG checkmark glyph is removed — the
     inner square is the selected state. (Shop redesign.) */
  .facets {
    --checkbox-size: 13px;
    --checkbox-pad: 3px;                     /* inner square padding (vertical overrides) */
    --checkbox-border: 1px solid var(--gg-black);
  }

  .facets .checkbox .icon-checkmark {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 1px solid var(--gg-black);
    border-radius: 0;                       /* square */
    background-color: transparent;          /* unchecked = empty */
    padding: var(--checkbox-pad);
    background-clip: content-box;           /* inner square shows through padding */
    transition: background-color 0.2s ease;
  }

  /* Remove the default check glyph entirely (nothing grey can show through) */
  .facets .checkbox .icon-checkmark > * {
    display: none;
  }

  /* Checked = centered smaller solid black square */
  .facets .checkbox .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: var(--gg-black);
    border-color: var(--gg-black);
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: var(--gg-black);
  }

  .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 {
    &: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:248) */
/* 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-primary);
    --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-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-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: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .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__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-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:249) */
.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__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:254) */
.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:255) */
.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;
  }

  .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:256) */
.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:price-filter (INDEX:257) */
/* 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 .field {
    --input-height: 38px;
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
    padding-block: 6px;
  }

  .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 {
    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: 50%;
    left: 0;
    color: var(--facets-input-label-color);
    padding-inline: var(--input-padding-x);
    padding-block: 0;
    transform: translateY(-50%);
    line-height: 1;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-card (INDEX:259) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:260) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

    @media screen and (min-width: 750px) {
      --product-grid-gap: var(--product-grid-gap-desktop);
    }
  }

  .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 {
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      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: flex-start;
    text-align: left;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:261) */
/* ═══════════════════════════════════════════════════════════════════════════
     PDP — 12-Column Grid (GreenGlam standard, Figma 5117:393 / 5114:4)
     ═══════════════════════════════════════════════════════════════════════════
     col:  1    2    3    4    5    6  │  7    8    9   10   11   12
          ├──── Main image ──────┤▯thumbs ├ lead ┤├─ Info panel 450 ─┤  ≥1200
          ├──── Main image ──────┤▯thumbs       ├ lead ┤├ panel ┤       ≥1920
                                           (container starts col 9)

     The main image (cols 1–5) sits flush under the header; the fixed-size
     thumbnail column hangs one gutter to its right. The info container starts
     on a grid line, pads itself by --pdp-info-lead (the gap to the gallery) and
     sits --gg-gap-stagger lower than the gallery. Gutter = --gg-gutter (= the
     page margin).

     .product-information is the 12-col grid parent. Its direct children
     (.product-information__grid and additional_blocks) are grid items that
     declare their own grid-column spans.
     ═══════════════════════════════════════════════════════════════════════════ */

  /* Section container → 12-col grid, overrides .section's 3-col margin grid.
     Feed --padding-inline (the spacing-style var, so it isn't overridden to 0)
     to give the full-bleed grid its page margin. */
  .product-information {
    /* minmax(0, 1fr) not 1fr: the default 1fr is minmax(auto, 1fr), whose `auto`
       min lets a track grow to fit long unbreakable content — so opening an
       accordion widened the whole details column. minmax(0,…) pins the tracks. */
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gg-gutter);
    row-gap: var(--gap-sm);
    background-color: var(--gg-cream);
    --padding-inline: var(--gg-page-pad);

    /* Info panel metrics — named once, read by the placement rules below. */
    --pdp-info-lead: 124px;   /* Figma "PDP Info" paddingLeft: the gap to the gallery */
    --pdp-info-width: 450px;  /* the panel itself; FIXED so it never collapses to its
                                 content (330px with every accordion closed) */

    /* One sticky offset for BOTH columns: the header edge. The gallery is flush
       there; the details column carries its stagger as its own padding (below), so
       its stuck position equals its in-flow position. base.css .sticky-content
       (the block's sticky toggle) reads the same variable. */
    --sticky-header-offset: var(--header-height);
  }

  /* Override .section > * { grid-column: 2 } — children span full width by default */
  .product-information > * {
    grid-column: 1 / -1;
  }

  /* 2-col split wrapper: subgrids the 12-col parent so children can span named cols */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* ── Mobile: all areas stack full-width ── */
  @media screen and (max-width: 749px) {
    .product-information__media,
    .product-details {
      grid-column: 1 / -1;
    }
    /* Inset is owned by .product-information (--padding-inline → --gg-page-pad),
       so the whole stack — gallery + details — insets exactly once. No child
       padding here or it would double up. */

    /* MOB-C reorder: Title+Buy → Gallery → rest. Flatten the details wrappers so
       the two .pd-part blocks become grid items of .product-information__grid,
       siblings of the media — then `order` interleaves the gallery between them.
       The details `group` preset has no border/padding/scheme, so nothing visible
       is lost when its box is collapsed. */
    /* Ancestor-prefixed so these beat the equal-specificity base rules
       (.product-details{display:flex}, .pd-part{display:contents}) regardless of
       cross-file stylesheet concatenation order — a media query adds no specificity. */
    .product-information .product-details,
    .product-information .product-details > .group-block,
    .product-information .product-details > .group-block > .group-block-content {
      display: contents;
    }

    /* The subgrid carries no row-gap (only columns are subgridded), so once the
       three blocks (top / media / rest) become its rows, give them a consistent
       separation matching the parts' own internal rhythm. */
    .product-information__grid {
      row-gap: var(--gg-space-md);
    }

    /* An EMPTY grid item still occupies a row and still claims a row-gap. The
       details group always emits this media wrapper; when the group has no media it
       renders at zero height but still sat above the title and pushed it a full 20px
       down.
       :not(:has(*)) is not enough — the wrapper can hold an empty child, so it has an
       element child while rendering nothing. :has(img, picture, svg, video) tests for
       actual media instead.
       No child combinator from __grid: the wrapper sits inside a display:contents
       ancestor, so it is a GRID ITEM without being a DOM child. */
    .product-information__grid .group-block__media-wrapper:not(:has(img, picture, svg, video)) {
      display: none;
    }

    .product-information .pd-part {
      display: flex;
      flex-direction: column;
      gap: var(--gg-space-md);
      grid-column: 1 / -1;
    }

    .pd-part--top                { order: 1; }
    .product-information__media  { order: 2; }
    .pd-part--rest               { order: 3; }

    /* The 110px spacer is a desktop-only device (its height is gated ≥750); on the
       flattened mobile stack it would only inject an empty gap. */
    .product-details__spacer { display: none; }
  }

  /* ── Desktop: gallery LEFT (cols 1–6), info RIGHT ──
     750–1199px: 6/6 split, info fluid, no lead — 124 + 450 does not fit here; the
     gutter alone separates the columns. The media's inner layout stacks in this
     range (gallery snippet). */
  @media screen and (min-width: 750px) {
    /* Both columns share grid row 1, so neither can auto-flow to row 2. */
    .product-information__media {
      grid-column: 1 / 7;
      grid-row: 1;
    }

    .product-details {
      grid-column: 7 / -1;
      grid-row: 1;
      /* The stagger against the flush gallery. Padding, not margin: it sits inside
         the sticky box, so the panel keeps this offset while stuck. */
      padding-block-start: var(--gg-gap-stagger);
    }

    /* No media: the info panel starts at the page edge. */
    .product-information--media-none .product-details {
      grid-column: 1 / -1;
    }
  }

  /* ── ≥1200px: the info CONTAINER starts on its grid line (col 7) and is exactly
     lead + panel wide: content-box width = the panel, padding = the lead. The lead
     only exists because a gallery sits beside it, so it is keyed to media-left. ── */
  @media screen and (min-width: 1200px) {
    /* The media box is the MAIN image: cols 1–5, scaling with the grid. The
       fixed-size thumbnail column hangs one gutter to its right (base.css
       .media-gallery--carousel thumbnails grid), in the col-6 zone. */
    .product-information__media {
      grid-column: 1 / 6;
    }

    .product-details {
      justify-self: start;
      box-sizing: content-box;
      width: var(--pdp-info-width);
    }

    .product-information--media-left .product-details {
      padding-inline-start: var(--pdp-info-lead);
    }
  }

  /* ── ≥1920px: the gallery keeps growing with cols 1–6; the info container moves
     to col 9 (Figma 2560 frame), leaving cols 7–8 as air between the two. ── */
  @media screen and (min-width: 1920px) {
    .product-information--media-left .product-details {
      grid-column: 9 / -1;
    }
  }

  /* ── Commented out: Horizon 2-col grid (preserved for reference) ────────────
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    .product-information__grid:not(.product-information--media-none) {
      &.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; }
      }

      &.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; }
      }

      &.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; }
        }
      }
    }

    .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; }
        }
      }
    }
  }

  @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;
    }
  }

  .product-details { order: 1; }
  .product-information__media { order: 0; width: 0; min-width: 100%; }
  ─────────────────────────────────────────────────────────────────────────── */

  /* Sold-out buttons — uniform light grey, no hover effect */
  .product-details .add-to-cart-button:disabled,
  .product-details .gg-info__checkout-btn[aria-disabled='true'] {
    background-color: var(--gg-gray-lightest) !important;
    color: var(--gg-gray-mid) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: none;
  }

  /* Dual-sticky columns: whichever is shorter pins, the taller one scrolls.
     BOTH must be sticky + align-self:start with the SAME top offset. Previously
     only .product-information__media was hardcoded sticky while .product-details
     was sticky only when the per-block `sticky_details_desktop` toggle was on —
     when it was off, details stretched to the grid-row height and its top edge
     drifted, so columns looked aligned on some products and not others. Forcing
     both sticky here makes the top edges consistent regardless of that toggle.
     The offset (--sticky-header-offset) is set once on .product-information. */
  @media screen and (min-width: 750px) {
    .product-information__media,
    .product-details {
      position: sticky;
      top: var(--sticky-header-offset);
      align-self: start;
    }
  }

  /* ── CEO Quote — standalone below main grid ──────────────────────────── */
  .product-information__quote-standalone {
    grid-column: 1 / -1;
  }

  @media screen and (min-width: 750px) {
    .product-information__quote-standalone {
      grid-column: 4 / span 6;
      padding-block-start: clamp(80px, 10vw, 160px);
      padding-block-end: clamp(200px, 22vw, 360px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-information__quote-standalone {
      padding-block: 60px;
      padding-inline: 24px;
    }
  }

  /* ── Mobile: section top gap and recommendations bottom gap ── */
  @media screen and (max-width: 749px) {
    /* The product template is flush-top (base.css .content-for-layout), so this
       section owns its gap to the header. On desktop the gallery touches the
       header; on the phone the title leads, so it takes the section rhythm.
       Two-class specificity beats .spacing-style alone — no !important needed. */
    .product-information.spacing-style {
      padding-block-start: var(--gg-gap-section);
    }

    /* tag + two-class specificity beats single .spacing-style rule */
    product-recommendations .section.spacing-style {
      padding-block-end: 20px;
    }
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content (INDEX:262) */
/* ════ GG PDP gallery (Figma 5117:393 / 5114:4) ════
     Horizon's carousel + thumbnails, restyled — no custom swap layer. The
     thumbnails ARE the selection UI: every image (the shown one included) sits
     in the thumbnail column, the selected one carries a hairline, and the main
     image just shows it (slideshow `select`).
       ≥1200    main = page cols 1–5 (scales with the grid); fixed-size portrait
                thumbnails hang one gutter to its right. Layout: base.css
                (.media-gallery--carousel … thumbnails) + slideshow-controls.
       750–1199 the same thumbnails in a row under the main image.
       <750     swipe carousel + 44px square thumbnails (unchanged).
     Thumbnail size, gap, portrait ratio and the selected hairline live in
     snippets/slideshow-controls.liquid; the main-image box lives here. */

  /* ── Every width: each slide keeps its OWN image ratio; the gallery is as tall
     as the SELECTED image. Phones used to force a shared 1:1 box, which squeezed
     portrait images into a square (2026-11-04). ── */
  /* The track's height = the SELECTED image's ratio (--gg-slide-ratio, set by
     the per-image rules emitted inline after the slideshow) against the
     track width (100cqi — slideshow-container is Horizon's inline-size
     container). A length, so it transitions WITH the horizontal slide: same
     slideshow easing, ~ the length of the native smooth scroll. Taller
     inactive slides are clipped, never scrolled vertically. Without a ratio
     (single image) the calc is invalid and the height stays auto. */
  media-gallery slideshow-slides {
    overflow-y: hidden;
    height: calc(100cqi / var(--gg-slide-ratio));
    transition: height 0.45s var(--animation-slideshow-easing);
  }

  @media (prefers-reduced-motion: reduce) {
    media-gallery slideshow-slides {
      transition: none;
    }
  }

  media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *) {
    background: var(--gg-white);
  }

  media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *) .product-media {
    width: 100%;
    height: 100%;
  }

  media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *) :is(img, .deferred-media__poster-image) {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    /* Each slide keeps its OWN image ratio (Horizon's per-slide
       --media-preview-ratio) — no shared box, so no letterbox bars. The slides
       are top-aligned (slide_position: 'top' on the slideshow render), so a
       shorter image leaves plain page background below it, not a grey box. */

    /* Main image ↔ thumbnails = the page gutter, in both layouts: the column
       gap beside the thumbnail column (≥1200) and the row gap above the
       thumbnail row (750–1199). */
    media-gallery slideshow-component {
      gap: var(--gg-gutter);
    }

    /* Super-light grey tint over the main image and every thumbnail (matches the
       quick-add images). */
    media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *)::after,
    media-gallery .slideshow-controls__thumbnail::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gg-gray-lightest);
      mix-blend-mode: multiply;
      pointer-events: none;
      z-index: 1;
    }
  }

  @media screen and (max-width: 749px) {
    /* ── Mobile gallery: swipe, gaps (ratio + contain fill are shared, above) ── */
    /* Inset is owned by the .product-information section (--padding-inline →
       --gg-page-pad), so the slideshow adds NO inline padding of its own — else
       the gallery would inset twice (section 12px + slideshow 12px = 24px). */
    media-gallery slideshow-slides {
      --slideshow-gap: 12px;
      padding-inline: 0;
      scroll-padding-inline-start: 0;
    }

    media-gallery slideshow-slide {
      --slide-width: calc(100vw - 64px);
      scroll-snap-align: start;
    }

    media-gallery .product-media-container:not(.dialog-zoomed-gallery *) {
      border-radius: 0;
      overflow: hidden;
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:263) */
.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;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:264) */
.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;
  }

  /* ── GG PDP: smaller +/- buttons. The buttons size off --minimum-touch-target
     (44px in base.css), and the input's max-width calc reads the same var — so
     overriding it locally shrinks the buttons AND keeps the input width coherent
     in one move. Desktop only: mobile keeps the 44px touch target for a11y. ── */
  @media screen and (min-width: 750px) {
    .product-details .quantity-selector {
      --minimum-touch-target: 32px;
    }
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal (INDEX:265) */
#quick-add-dialog {
    display: contents;
  }

  @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
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::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 */

/* START_SNIPPET:quick-add (INDEX:266) */
/* 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));

    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;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  /* Full-width bar pinned to the bottom of the card image; revealed on card hover
     (no right-expand, no scale). Text label only — the cart icon is hidden below. */
  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    justify-content: center;
    background: var(--gg-gray-light);
    padding: 0;
    border-radius: 0;
    border: none;
    /* Match the card badges: same height, font, and inset from the image edge. */
    height: var(--gg-card-badge-height, 25px);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--gg-black);
    pointer-events: all;
    position: absolute;
    left: var(--gg-card-edge, 8px);
    bottom: var(--gg-card-edge, 8px);
    /* Full width minus the inset on both sides. (left+right won't stretch here
       because the form's container-type establishes the containing block.) */
    width: calc(100% - (2 * var(--gg-card-edge, 8px)));
    backdrop-filter: none;

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gg-gray-light);
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  /* Text label only — hide the bag/cart-plus icon. */
  .quick-add__button .add-to-cart-icon {
    display: none;
  }

  /* "Hinzufügen – €price": dash separator before the inline price (add button only). */
  .quick-add__button--add .gg-atc-price-inline::before {
    content: '–';
    margin-inline: 0.4ch;
  }

  /* Lock the label to the SAME fixed values as the card badges (see
     blocks/_product-card-gallery.liquid). The `.quick-add` ancestor makes this
     (0,2,0), out-specifying base.css's `.button` (0,1,0) — which is what sets the
     contextual --font-paragraph--* values. Inner text spans inherit from here. */
  .quick-add .quick-add__button {
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);          /* 12px */
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    line-height: 1;
    text-transform: none;
  }

  /* Text always visible (no grid collapse / blur-in animation). */
  .quick-add__button .add-to-cart-text__content {
    display: block;

    & > span span {
      padding: 0;
      opacity: 1;
      display: inline-block;
      filter: none;
      translate: 0;
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .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;
  }

  /* Quick-add is text-only now, so show the label on every viewport (the base
     class visually-hides it on mobile for the icon-only treatment we dropped). */
  .quick-add__button .add-to-cart-text__content.is-visually-hidden-mobile {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: nowrap;
  }

  /* Smooth fade of the bar as the card is hovered. */
  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition: opacity var(--animation-speed) var(--ease-out-cubic);
    }
  }

  /* ───────────────────────── Inline variant panel ─────────────────────────
     The PDP variant selector (gg-variant-selector) popped in OVER the card
     image. Inset to the same edge as the badges/bar (--gg-card-edge); the
     bottom stops above the bar with a small gap so the two never overlap.
     Hidden until <quick-add-component> gets [expanded] (handleChoose). */
  .gg-qa-panel {
    display: none;
    position: absolute;
    inset: var(--gg-card-edge, 8px) var(--gg-card-edge, 8px)
      calc(var(--gg-card-edge, 8px) + var(--gg-card-badge-height, 25px) + 6px)
      var(--gg-card-edge, 8px);
    z-index: var(--layer-raised);
    flex-direction: column;
    gap: var(--gg-space-sm);
    padding: var(--gg-space-sm) var(--gg-space-md);
    background: var(--gg-gray-light);
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: all;
    -webkit-overflow-scrolling: touch;
  }

  .quick-add[expanded] .gg-qa-panel {
    display: flex;
  }

  /* Keep the bar lit while the panel is open (don't depend on :hover, since the
     pointer is over the panel/tiles, not the bar). */
  .quick-add[expanded] .quick-add__button {
    opacity: 1;
  }

  /* Compact the PDP selector for the small card panel. Scoped to .quick-add so
     the PDP/standalone instances are untouched. Reuses every gg-vs__* rule;
     only neutralises the PDP top padding and tightens the indicator. */
  .quick-add .gg-vs {
    padding-block-start: 0;
    width: 100%;
  }

  .quick-add .gg-vs__form {
    gap: var(--gg-space-md);
  }

  .quick-add .gg-vs__indicator {
    font-size: var(--gg-text-sm); /* 12px — the card panel is tight */
    padding-block-end: 4px;
    margin-block-end: var(--gg-space-xs);
    /* The panel is gray-light; the default gray-light divider would vanish into it.
       Bump it to mid-gray so the "Variant: …" line stays visible. */
    border-bottom-color: var(--gg-gray-mid);
  }

  /* Size pills default to gray-light — invisible on the gray-light panel. Use mid-gray
     here so the size options read against the background. Scoped to .quick-add. */
  .quick-add .gg-vs__pill {
    background-color: var(--gg-gray-mid);
  }

  /* With every pill now mid-gray, the selected one only differed by size/weight. Give it
     a thin, soft dark outline so it reads as selected without shouting. */
  .quick-add .gg-vs__input:checked ~ .gg-vs__pill {
    border-width: 1px;
    border-color: var(--gg-gray-dark);
  }


  /* Enlarge the touch target on phones — the resting color bar is only 16px. */
  @media screen and (max-width: 749px) {
    .quick-add .gg-vs__tile {
      padding: 4px;
    }

    .quick-add .gg-vs__pill {
      height: 32px;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add[expanded] .gg-qa-panel {
      animation: gg-qa-panel-in var(--animation-speed) var(--ease-out-cubic);
    }

    @keyframes gg-qa-panel-in {
      from {
        opacity: 0;
        translate: 0 6px;
      }
      to {
        opacity: 1;
        translate: 0 0;
      }
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:267) */
.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-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;
    inset: 0;
    width: 100%;
    height: 100%;
    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-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-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:268) */
.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-block__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:search (INDEX:272) */
.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:273) */
.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)
    )
    > main
    > .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:275) */
.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:277) */
.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);
    }
  }

  /* GG: the small glyph (PDP gallery arrows over the main image). The button
     keeps its full touch target; only the drawn icon shrinks. */
  .slideshow-control--small {
    .svg-wrapper,
    svg {
      width: var(--icon-size-2xs);
      height: var(--icon-size-2xs);
    }
  }

  /* Slideshow control shape — GreenGlam: shaped arrows render as the STANDARD GG
     black button (the canonical .button / .gg-button: squared, --gg-pill-btn-bg /
     --gg-pill-btn-color) carrying a "Previous"/"Next" text label, not an icon box.
     Restated at this specificity because base's `slideshow-arrows .slideshow-control`
     rules (white text, opacity:0, fixed touch-target box) would otherwise win. Bare
     (shape:none) arrows are untouched and keep their icon glyph. */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 4px 12px;
    opacity: 1;
    background-color: var(--gg-gray-mid);
    color: var(--gg-black);
    border-radius: 0;
    font-family: var(--gg-font);
    font-size: var(--gg-text-xs);
    line-height: var(--gg-text-xs--lh);
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    text-transform: uppercase;
    white-space: nowrap;
    gap: 4px;
  }

  .slideshow-control.slideshow-control--shape-square:hover,
  .slideshow-control.slideshow-control--shape-circle:hover {
    opacity: 0.88;
  }

  /* Mobile: no Previous/Next controls at all. Carousels are swiped on touch, so the
     buttons only take up room. Hidden rather than removed in Liquid because the same
     snippet renders the desktop controls, which stay.
     The selector repeats the shape classes ON PURPOSE: the shaped-arrow rule above is
     a compound (0-2-0) emitted later in this same stylesheet, so a plain
     `slideshow-arrows .slideshow-control` (also 0-2-0) loses on source order and only
     the unshaped arrow disappeared — "Weiter" stayed visible while "Zurück" went. */
  @media screen and (max-width: 749px) {
    slideshow-arrows .slideshow-control,
    .slideshow-control.slideshow-control--shape-square,
    .slideshow-control.slideshow-control--shape-circle {
      display: none;
    }
  }

  /* Arrow glyph beside the label — sized to the (small) text, inherits its colour. */
  .slideshow-control__glyph {
    display: inline-flex;
    align-items: center;
    width: 0.85em;
    height: 0.85em;
    color: inherit;
  }

  .slideshow-control__glyph svg {
    width: 100%;
    height: 100%;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-controls (INDEX:279) */
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;
  }

  /* GG: a side (left/right) thumbnail COLUMN only from 1200px — the PDP's
     side-by-side layout starts there. Below it the thumbnails fall back to the
     default row under the media (Horizon was 750). Mirrors the matching grid
     rule in assets/base.css (.media-gallery--carousel … thumbnails). The GG
     thumbnail style draws focus/selection INSIDE the tile, so the column needs
     none of Horizon's outline-clearance padding. */
  @media screen and (min-width: 1200px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      /* No sticky on the thumbnail stack (Horizon had one): the GG PDP media
         column is itself sticky, so the thumbnails travel WITH the main image.
         A second, inner sticky let them slide down against the image as the
         column released. */
      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }
  }

  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: none;
    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 — GG style (Figma 5117:393). The only thumbnail
     controls in the theme are the PDP gallery's, so the look is set here at its
     source rather than overridden per breakpoint:
     - flush strip: no Horizon padding (that padding only made room for an
       OUTSIDE focus ring; GG draws selection and focus inside the tile)
     - gap = the page gutter
     - width = --thumbnail-size when the gallery sets one (PDP: the setting at the
       1440 frame, scaling down below it), else the thumbnail_width setting;
       phones keep Horizon's 44px floor
     - selected = 1px black hairline inside the tile */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding: 0;
    gap: var(--gg-gutter);
    margin-inline: initial;
    height: fit-content;

    .slideshow-control {
      flex-shrink: 0;
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: var(--thumbnail-size, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: 1px solid var(--gg-black);
        outline-offset: -1px;
      }

      &:focus-visible {
        outline-offset: calc(-1 * var(--focus-outline-width));
      }
    }
  }

  @media screen and (max-width: 749px) {
    .slideshow-controls__thumbnails .slideshow-control {
      width: clamp(44px, 7vw, var(--thumbnail-width));
      aspect-ratio: 1;
    }
  }

  .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;
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow (INDEX:281) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:282) */
.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: 16px 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;
  }

  /* Checkbox-style indicator — always visible, empty box when unchecked.
     16px matches the size of standard filter checkboxes (.facets .checkbox .icon-checkmark). */
  .sorting-filter__checkmark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgb(var(--color-foreground-rgb) / 0.35);
    border-radius: 3px;
    background-color: rgb(var(--color-foreground-rgb) / 0.08);
    color: transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  /* Filled + white checkmark when selected */
  .sorting-filter__input:checked ~ .sorting-filter__checkmark {
    background-color: var(--color-foreground);
    border-color: var(--color-foreground);
    color: var(--color-background);
  }

  .sorting-filter__input:checked ~ .sorting-filter__label {
    font-weight: 500;
  }

  .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:text (INDEX:290) */
:root {
    --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;
  }

  [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);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .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. */
  .text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) a {
    text-decoration-color: transparent;
  }

  .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);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

  .text-block > *:last-child {
    margin-block-end: 0;
  }

  .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);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:299) */
/* 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-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .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);
  }

  .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;
    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;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:300) */
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);
    }
  }

  .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 (INDEX:301) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:302) */
.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-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-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */