/** Shopify CDN: Minification failed

Line 14391: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:dynamic-image-grid (INDEX:6) */
/* =========================================================
     Dynamic Image Grid — dig
     ========================================================= */

  /* ─── Grid container ───────────────────────────────────── */

  /* EDGE-TO-EDGE: 16px section margin; grid placements below extended so the
     outermost items reach cols 1 & 12 instead of leaving them as empty margins. */
  .dig {
    --padding-inline: var(--gg-page-pad);
  }
  .dig__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--dig-gap, var(--gap-sm));
    align-items: stretch;
  }

  /* Mobile default: full-width stack */
  .dig__item {
    grid-column: 1 / -1;
    grid-row: span 1;
    min-width: 0;
    min-height: 0;
  }

  /* ─── Image block ──────────────────────────────────────── */

  .dig__item--image {
    display: flex;
    flex-direction: column;
  }

  .dig__media {
    position: relative;     /* required — .dig__img is absolute inset:0 */
    overflow: hidden;
    border-radius: var(--dig-radius, 0);
    flex: 1 1 auto;         /* fills space remaining after optional .dig__title */
  }

  .dig__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--dig-obj-pos, center center);
    display: block;
  }

  .dig__img--placeholder {
    background: var(--color-background-2, #f2f2f2);
  }

  .dig__link {
    display: contents;
  }

  /* ─── Text block ───────────────────────────────────────── */

  .dig__item--text {
    display: flex;
    flex-direction: column;
    justify-content: var(--dig-v-align, flex-end);
    overflow: hidden;
  }

  .dig__body {
    margin-block-start: var(--gg-space-sm, 10px);
    font-family: var(--gg-font);
    font-size: var(--gg-text-body);
    font-weight: 400;
    line-height: var(--gg-text-body--lh);
    letter-spacing: var(--gg-tracking-default);
  }

  /* ─── Title (shared, image + text blocks) ──────────────── */

  .dig__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0;
    margin-block-end: var(--gg-space-sm, 10px);
    line-height: 1;
    text-decoration: none;
    color: inherit;
  }

  .dig__media + .dig__title {
    margin-block-start: var(--gg-space-sm, 10px);
    margin-block-end: 0;
  }

  .dig__title .gg-dot-marker {
    margin-inline-end: 8px;
  }

  .dig__title-header {
    margin-inline-end: 0.3em;
  }

  .dig__item--text .dig__title {
    margin-block-end: 0;
  }

  .dig__title-header {
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--gg-tracking-default);
  }

  .dig__title-text {
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
  }

  /* ─── Mobile: image blocks ─────────────────────────────── */

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

    .dig__img {
      position: static;
      inset: unset;
      height: auto;
      width: 100%;
    }
  }

  /* ─── Tablet + Desktop: 12-col layout scales from 750px ── */

  @media screen and (min-width: 750px) {

    /* Container: aspect-ratio 5/3 gives the whole section a fixed shape.
       grid-template-rows in fr units divide that height predictably.
       No per-block aspect-ratios needed — cells fill via flex:1 1 auto. */
    .dig__grid {
      aspect-ratio: 5/3;
      grid-template-rows: 3fr 2fr;
    }

    /* Masonry uses equal rows (1:1 and 3:2 cell shapes emerge naturally) */
    .dig__grid--masonry {
      grid-template-rows: 1fr 1fr;
    }

    /* Portrait variants: row 1 gets 75% → B2 taller, B3/B4 nearly square */
    .dig__grid--portrait-left,
    .dig__grid--portrait-right {
      grid-template-rows: 3fr 1fr;
    }

    /* ── portrait-left ──────────────────────────────────── *
     *
     *  col:  1  2  3  4  5  6  7  8  9  10 11 12
     *        ·  ┌──────────────────┐ ┌──────────┐  ·
     *  row1  ·  │  B1 (anchor)     │ │    B2    │  ·
     *        ·  │  6 cols, 2 rows  │ ├────┬─────┤  ·
     *  row2  ·  │     ≈ 3:4        │ │ B3 │  B4 │  ·
     *        ·  └──────────────────┘ └────┴─────┘  ·
     * ─────────────────────────────────────────────────── */
    .dig__grid--portrait-left .dig__item:nth-child(1) { grid-column: 1 / 8;   grid-row: 1 / 3; }
    .dig__grid--portrait-left .dig__item:nth-child(2) { grid-column: 8 / 13;  grid-row: 1; }
    .dig__grid--portrait-left .dig__item:nth-child(3) { grid-column: 8 / 10;  grid-row: 2; }
    .dig__grid--portrait-left .dig__item:nth-child(4) { grid-column: 10 / 13; grid-row: 2; }

    /* ── portrait-right ─────────────────────────────────── *
     *
     *  col:  1  2  3  4  5  6  7  8  9  10 11 12
     *        ·  ┌────────┐ ┌──────────────────┐  ·
     *  row1  ·  │   B2   │ │  B1 (anchor)     │  ·
     *        ·  ├──┬─────┤ │  6 cols, 2 rows  │  ·
     *  row2  ·  │B3│ B4  │ │     ≈ 3:4        │  ·
     *        ·  └──┴─────┘ └──────────────────┘  ·
     * ─────────────────────────────────────────────────── */
    .dig__grid--portrait-right .dig__item:nth-child(1) { grid-column: 6 / 13; grid-row: 1 / 3; }
    .dig__grid--portrait-right .dig__item:nth-child(2) { grid-column: 1 / 6;  grid-row: 1; }
    .dig__grid--portrait-right .dig__item:nth-child(3) { grid-column: 1 / 4;  grid-row: 2; }
    .dig__grid--portrait-right .dig__item:nth-child(4) { grid-column: 4 / 6;  grid-row: 2; }

    /* ── feature-right ──────────────────────────────────── *
     *
     *  col:  1  2  3  4  5  6  7  8  9  10 11 12
     *        ·  ┌─────────────┐ ┌─────────────┐  ·
     *  row1  ·  │     B2      │ │   B1(anch)  │  ·
     *        ·  ├──────┬──────┤ │   5 cols    │  ·
     *  row2  ·  │  B3  │  B4  │ │   2 rows   │  ·
     *        ·  └──────┴──────┘ └─────────────┘  ·
     * ─────────────────────────────────────────── */
    .dig__grid--feature-right .dig__item:nth-child(1) { grid-column: 7 / 13; grid-row: 1 / 3; }
    .dig__grid--feature-right .dig__item:nth-child(2) { grid-column: 1 / 7;  grid-row: 1; }
    .dig__grid--feature-right .dig__item:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
    .dig__grid--feature-right .dig__item:nth-child(4) { grid-column: 5 / 7;  grid-row: 2; }

    /* ── feature-left ───────────────────────────────────── *
     *
     *  col:  1  2  3  4  5  6  7  8  9  10 11 12
     *        ·  ┌─────────────┐ ┌─────────────┐  ·
     *  row1  ·  │   B1(anch)  │ │     B2      │  ·
     *        ·  │   5 cols    │ ├──────┬──────┤  ·
     *  row2  ·  │   2 rows    │ │  B3  │  B4  │  ·
     *        ·  └─────────────┘ └──────┴──────┘  ·
     * ─────────────────────────────────────────── */
    .dig__grid--feature-left .dig__item:nth-child(1) { grid-column: 1 / 7;  grid-row: 1 / 3; }
    .dig__grid--feature-left .dig__item:nth-child(2) { grid-column: 7 / 13; grid-row: 1; }
    .dig__grid--feature-left .dig__item:nth-child(3) { grid-column: 7 / 10; grid-row: 2; }
    .dig__grid--feature-left .dig__item:nth-child(4) { grid-column: 10 / 13; grid-row: 2; }

    /* ── masonry ────────────────────────────────────────── *
     *  Alternating 2×2 — no spanning anchor.
     *
     *  col:  1  2  3  4  5  6  7  8  9  10 11 12
     *        ·  ┌──────────┐ ┌──────────────────┐  ·
     *  row1  ·  │    B1    │ │        B2        │  ·
     *        ·  │  ≈ 1:1   │ │     ≈ 3:2        │  ·
     *        ·  └──────────┘ └──────────────────┘  ·
     *        ·  ┌──────────────────┐ ┌──────────┐  ·
     *  row2  ·  │        B3        │ │    B4    │  ·
     *        ·  │     ≈ 3:2        │ │  ≈ 1:1   │  ·
     *        ·  └──────────────────┘ └──────────┘  ·
     * ─────────────────────────────────────────────────── */
    .dig__grid--masonry .dig__item:nth-child(1) { grid-column: 1 / 6;  grid-row: 1; }
    .dig__grid--masonry .dig__item:nth-child(2) { grid-column: 6 / 13; grid-row: 1; }
    .dig__grid--masonry .dig__item:nth-child(3) { grid-column: 1 / 8;  grid-row: 2; }
    .dig__grid--masonry .dig__item:nth-child(4) { grid-column: 8 / 13; grid-row: 2; }

    /* ── 3-block fill (toggled via dig__grid--fill-3) ───── */
    .dig__grid--fill-3.dig__grid--portrait-left  .dig__item:nth-child(3):last-child { grid-column: 8 / 13; }
    .dig__grid--fill-3.dig__grid--portrait-right .dig__item:nth-child(3):last-child { grid-column: 1 / 6; }
    .dig__grid--fill-3.dig__grid--feature-right  .dig__item:nth-child(3):last-child { grid-column: 1 / 7; }
    .dig__grid--fill-3.dig__grid--feature-left   .dig__item:nth-child(3):last-child { grid-column: 7 / 13; }
    .dig__grid--fill-3.dig__grid--masonry        .dig__item:nth-child(3):last-child { grid-column: 1 / 13; }

  }
  /* ─── Narrow tablet (750–999px): tighter gap ── */

  @media screen and (min-width: 750px) and (max-width: 999px) {
    .dig__grid {
      gap: var(--gap-sm);
    }
  }
/* END_SECTION:dynamic-image-grid */

/* START_SECTION:featured-product (INDEX:9) */
.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:10) */
.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:11) */
.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; }

  /* ── Newsletter (cols 8–12) ── */
  .gg-footer__nl-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-block-end: var(--gg-space-xl);
  }
  .gg-footer__nl {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-sm);
    padding: 8px 16px 14px;
    background-color: var(--gg-gray-light);
  }
  /* Spa pages: warm sand surface to sit on-tone with the orange page */
  [data-spa-mode] .gg-footer__nl {
    background-color: var(--gg-sand);
  }
  /* Title + orange dot */
  .gg-footer__nl-title {
    display: flex;
    align-items: center;
    gap: 5px;
    --font-paragraph--size: 0.875rem; /* 14px */
  }
  .gg-footer__nl-title::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gg-orange);
    flex-shrink: 0;
  }
  /* Form — input (full width) above, then bottom row.
     Shopify's form tag injects hidden inputs AND an hCaptcha/challenge
     container as direct children. Use plain block flow + explicit margins
     (no flex `gap`) so those injected nodes add no phantom spacing. */
  .gg-footer__nl-form {
    display: block;
    margin: 0;
  }
  /* hCaptcha renders an empty container until a challenge is required; with the
     form in block flow it collapses to 0 height. If a challenge DOES appear,
     give it a little breathing room above the bottom row. */
  .gg-footer__nl-form .h-captcha:not(:empty),
  .gg-footer__nl-form [class*='captcha']:not(:empty) {
    margin-block: var(--gg-space-sm);
  }
  /* Input — 0-2-0 to beat base.css `input:not(...)` (0-1-1) which forces
     --color-input-background + border-color. */
  .gg-footer .gg-footer__nl-input {
    box-sizing: border-box;
    width: 100%;
    height: 25px;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--gg-black);
    border-radius: 0;
    box-shadow: none;
    background-color: var(--gg-white);
    color: var(--gg-black);
    font: inherit;
    font-size: 10px;
    letter-spacing: var(--gg-tracking-default);
  }
  .gg-footer .gg-footer__nl-input:focus,
  .gg-footer .gg-footer__nl-input:hover,
  .gg-footer .gg-footer__nl-input:focus-visible {
    outline: none;
    box-shadow: none;
    background-color: var(--gg-white);
    border-bottom-color: var(--gg-black);
  }
  /* Bottom row — Abonnieren (left) + consent (right) on one line */
  .gg-footer__nl-bottom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gg-space-md);
    margin-block-start: var(--gg-space-lg);
  }
  /* Abonnieren — text link */
  .gg-footer__nl-submit {
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--gg-black);
    font: inherit;
    font-size: 0.875rem; /* 14px */
    letter-spacing: var(--gg-tracking-default);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  /* Consent — right, 11px, single line */
  .gg-footer__nl-consent {
    --font-paragraph--size: var(--gg-text-xs); /* 11px */
    --font-paragraph--line-height: var(--gg-text-xs--lh);
  }
  /* Use full width before wrapping; break only when out of space (no early
     balance-wrap, no forced nowrap). */
  .gg-footer__nl-consent,
  .gg-footer__nl-consent .text-block,
  .gg-footer__nl-consent .text-block * {
    max-inline-size: none;
    text-align: right;
    text-wrap: normal;
  }
  .gg-footer__nl-message {
    margin: 0;
    font-size: var(--gg-text-xs);
  }

  /* ── Titles row ── */
  .gg-footer__titles {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-block-end: var(--gg-space-sm);
  }
  .gg-footer__title--gg      { grid-column: 1; }
  .gg-footer__title--info    { grid-column: 4; }
  .gg-footer__title--links   { grid-column: 8; }
  .gg-footer__title--kontakt { grid-column: 10; }
  /* divider titles — medium weight, 13px (matches section dividers) */
  .gg-footer__title {
    --font-paragraph--size: var(--gg-text-base); /* 13px */
    --font-paragraph--weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
  }
  /* [gg] — thin, 8px */
  .gg-footer__title--gg {
    --font-paragraph--size: 0.5rem; /* 8px */
    --font-paragraph--weight: var(--gg-weight-light);
  }

  /* ── Full-page-width divider ── */
  .gg-footer__rule {
        border-bottom: 1px solid #0000003b;
    margin-block-end: var(--gg-space-md);
  }

  /* ── Main content row ── */
  .gg-footer__main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
  }
  /* link/contact lists — 13px */
  .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);
  }

  /* Starts at col 1 but is NOT bound to the col width — fixed natural size,
     allowed to overflow its 1/12 track. */
  .gg-footer__logo {
    line-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--gg-black);
    grid-column: 1 / 3;
  }
  .gg-footer__logo svg { width: 190px; height: auto; display: block; }

  /* col 4 — credits (top, 10px) + page-links (bottom) */
  .gg-footer__col4 {
    grid-column: 4 / span 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--gg-space-xl);
  }
  .gg-footer__credits .text-block {
    --font-paragraph--size: 0.55rem; /* 10px */
    --font-paragraph--line-height: 1.5;
  }
  /* Information links — menu-driven, rendered as a .text-block .paragraph (same
     hooks as the static Links/Kontakt columns) so size + leading come from
     `.gg-footer__main .text-block` above. Only layout lives here. */
  .gg-footer__links {
    margin-block-start: auto;
  }

  .gg-footer__socials { grid-column: 8 / span 2; }
  .gg-footer__contact { grid-column: 10 / span 3; }
  /* contact email + phone are links → underlined; address lines plain */
  .gg-footer__contact a { text-decoration: underline; text-underline-offset: 2px; }

  /* ── Tablet 750–989px ── */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .gg-footer__nl-row { grid-template-columns: 1fr; }
    .gg-footer__nl { grid-column: 1 / -1; }
    .gg-footer__titles,
    .gg-footer__main { grid-template-columns: repeat(6, 1fr); }
    .gg-footer__main { row-gap: 12px; }
    .gg-footer__title--gg      { grid-column: 1; }
    .gg-footer__title--info    { grid-column: 1; }
    .gg-footer__title--links   { grid-column: 3; }
    .gg-footer__title--kontakt { grid-column: 5; }
    .gg-footer__logo { grid-column: 1 / span 2; }
    .gg-footer__col4 { grid-column: 1 / span 2; }
    .gg-footer__socials { grid-column: 3 / span 2; }
    .gg-footer__contact { grid-column: 5 / span 2; }
  }

  /* ── Mobile <750px — single stack with dividers between blocks ── */
  @media screen and (max-width: 749px) {
    .gg-footer__nl-row { grid-template-columns: 1fr; }
    .gg-footer__nl { grid-column: 1 / -1; }
    /* stack Abonnieren then consent, left-aligned */
    .gg-footer__nl-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gg-space-md);
    }
    .gg-footer__nl-consent { text-align: left; }

    .gg-footer__titles { display: none; }
    .gg-footer__main {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .gg-footer__cell { grid-column: 1 / -1; }
    .gg-footer__cell + .gg-footer__cell {
      border-block-start: 1px solid var(--gg-gray-light);
      padding-block-start: var(--gg-space-md);
      margin-block-start: var(--gg-space-md);
    }
    .gg-footer__col4 { gap: var(--gg-space-lg); }
  }
/* END_SECTION:footer */

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

  .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-brand (INDEX:13) */
/* ═══ Same 12-col grid model as .product-information (the working reference) ═══
     The section is a real repeat(12,1fr) grid. The TEXT block gets a fixed
     max-width inside its track; the IMAGE just fills its track and scales with
     the grid (fixed widths on text, fluid on images). No margin offsets. */
  .gg-brand.section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-sm);
    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);
    /* GG: no top padding — Brand starts flush under the More Info section.
       Overrides the spacing-style padding-block-start setting (same pattern
       as .product-information). */
    --padding-block-start: 0;
  }

  /* Override .section > * { grid-column: 2 } — full width by default */
  .gg-brand > * {
    grid-column: 1 / -1;
  }

  /* Text — aligns to col1, fixed max-width (don't span). Image shares the same
     grid row to its right. (Same as Product Details: grid-column + max-width.) */
  .gg-brand__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gg-space-sm);
    grid-column: 1 / 8;
    grid-row: 2;
    max-width: 450px;
  }

  /* ── Desktop: text sticks below the header while the tall image scrolls past
     (same offset model as .product-information's sticky columns). align-self:
     start is load-bearing — it un-stretches the block so sticky has room to
     travel down its grid area (see css-grid-sticky-pitfalls). ── */
  @media (min-width: 750px) {
    .gg-brand__text {
      align-self: start;
      position: sticky;
      top: calc(var(--header-height) + 20px);
    }
  }

  .gg-brand__heading {
    font-family: var(--gg-font);
    font-size: 20px;
    line-height: 1.3;
    font-weight: var(--gg-weight-medium);
    letter-spacing: 0;
    color: var(--gg-black);
    margin: 0;
  }

  .gg-brand__body {
    font-family: var(--gg-font);
    font-size: 14px;
    line-height: 16.5px;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: 0;
  }

  .gg-brand__attribution {
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm); /* 12px */
    font-weight: var(--gg-weight-regular);
    line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
    margin: 0;
  }

  /* Image — cols 8–12, fills its grid track (scales with the grid like Product
     Media). Box owns the aspect ratio so the image fills the tall frame
     (Figma 878×1225 ≈ 0.72). Only rendered when brand_image is present. */
  .gg-brand__image {
    grid-column: 8 / -1;
    grid-row: 2;
    aspect-ratio: 878 / 1225;
    border-radius: var(--gg-radius-card);
    overflow: hidden;
  }

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

  /* ── Phone (≤749px): text over image, both full-width ──
     (side padding comes from --padding-inline above, all viewports) */
  @media (max-width: 749px) {
    .gg-brand__text,
    .gg-brand__image {
      grid-column: 1 / -1;
      grid-row: auto;
    }
    .gg-brand__text {
      max-width: 100%;
    }
    /* Image first, then text (the divider keeps order 0 → stays on top). The
       section's grid row-gap supplies the separation — no extra top margin. */
    .gg-brand__image { order: 1; }
    .gg-brand__text  { order: 2; }
  }
/* END_SECTION:gg-brand */

/* START_SECTION:gg-card-carousel (INDEX:14) */
/* ─── 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-category-showcase (INDEX:15) */
.gg-image-text.section {
    display: flex;
    flex-direction: column;
    gap: var(--gg-it-row-gap, 48px);
    --padding-inline: var(--gg-page-pad);
  }
  .gg-image-text > .gg-ed-divider {
    width: 100%;
  }
/* END_SECTION:gg-category-showcase */

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

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

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

/* START_SECTION:gg-editorial-gallery (INDEX:19) */
/* Section = a vertical stack of Rows (the "below" axis). The 12-col grid lives
     INSIDE each Row (.gg-ed-row). Full content width with the standard breathing
     margin (--padding-inline fed to spacing-style so it can't reset to 0). */
  .gg-image-text.section {
    display: flex;
    flex-direction: column;
    gap: var(--gg-it-row-gap, 48px);
    --padding-inline: var(--gg-page-pad);
  }
  .gg-image-text > .gg-ed-divider {
    width: 100%;
  }
/* END_SECTION:gg-editorial-gallery */

/* START_SECTION:gg-editorial (INDEX:20) */
/* EDGE-TO-EDGE: flat 16px page margin on all sizes; desktop grid placements
     below extended so Titel/Bilder reach cols 1 & 12 instead of empty margins. */
  .gg-ed {
    grid-column: 1 / -1;
    --padding-inline: var(--gg-page-pad);
    padding-inline: var(--gg-page-pad);
  }

  /* ── Mobile (≤1024px): columns stack ── */
  @media (max-width: 1024px) {
    .gg-ed {
      display: flex;
      flex-direction: column;
      gap: var(--ed-text-gap, 24px);
    }
  }

  /* ── Desktop (≥1025px): fixed 12-col layout ──
        text-left:   col1 empty · Titel 2–3 · gap 4 · Fließtext 5–6 · gap 7 · Bilder 9–11 · col12 empty
        text-right:  col1 empty · Bilder 2–4 · gap · Fließtext 7–8 · gap · Titel 10–11 · col12 empty
        text-center: col1 empty · Titel 2–3 · gap · Bilder 5–7 (centered) · gap · Fließtext 9–10 · col12 empty
        (left/right are exact mirrors; center pins the image column in the middle with text either side) */
  @media (min-width: 1025px) {
    .gg-ed {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gap-sm);
      align-items: start;
    }
    /* Each column sticks; the tallest (long Fließtext) is as tall as the row,
       so it scrolls while the shorter columns pin — pure CSS, like the PDP. */
    .gg-ed__slot {
      grid-row: 1;                 /* keep all columns in one row regardless of DOM vs visual order */
      position: sticky;
      top: calc(var(--header-group-height, 150px) + 24px);
      align-self: start;
    }

    .gg-ed--text-left  .gg-ed__slot--1 { grid-column: 1 / span 2; }   /* Titel (left edge) */
    .gg-ed--text-left  .gg-ed__slot--2 { grid-column: 5 / span 2; }   /* Fließtext */
    .gg-ed--text-left  .gg-ed__slot--3 { grid-column: 9 / span 4; }   /* Bilder (cols 9–12, right edge) */

    .gg-ed--text-right .gg-ed__slot--1 { grid-column: 10 / span 3; }  /* Titel (cols 10–12, right edge) */
    .gg-ed--text-right .gg-ed__slot--2 { grid-column: 7 / span 2; }   /* Fließtext */
    .gg-ed--text-right .gg-ed__slot--3 { grid-column: 1 / span 4; }   /* Bilder (cols 1–4, left edge) */

    /* Center: image column in the middle, text columns flank it left & right */
    .gg-ed--text-center .gg-ed__slot--1 { grid-column: 1 / span 2; }  /* Titel (left edge) */
    .gg-ed--text-center .gg-ed__slot--3 { grid-column: 5 / span 3; }  /* Bilder (centered) */
    .gg-ed--text-center .gg-ed__slot--2 { grid-column: 9 / span 4; }  /* Fließtext (cols 9–12, right edge) */
  }

  /* ── Up to 1920px: widen Fließtext by one column (XL ≥1921 keeps span 2) ── */
  @media (min-width: 1025px) and (max-width: 1920px) {
    .gg-ed--text-left   .gg-ed__slot--2 { grid-column: 4 / span 3; }  /* cols 4–6 */
    .gg-ed--text-right  .gg-ed__slot--2 { grid-column: 7 / span 3; }  /* cols 7–9 (mirror) */
    .gg-ed--text-center .gg-ed__slot--2 { grid-column: 9 / span 4; }  /* cols 9–12 (right edge) */
  }
/* END_SECTION:gg-editorial */

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

/* START_SECTION:gg-hero-statement (INDEX:22) */
/* 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-lookup (INDEX:23) */
.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:24) */
/* ════════════════════════════════════════════════════════════════════
     GG MARKEN — brand directory (bean wsj0)
     Edge-to-edge list that takes the place of the product grid. A two-title
     header divider, then A–Z blocks: each letter gets a single-title divider
     and brand rows beneath. Each row reveals an inline image+Beschreibung
     panel on hover (replaces the old absolute popover, which overlapped).
     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: A–Z blocks, 48px between blocks (no token at this size). */
  .gg-marken__list {
    display: flex;
    flex-direction: column;
    gap: 48px;
    margin-block-start: var(--gg-space-lg);
  }

  /* 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(--gap-sm);
    align-items: end;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
    margin-block-end: 48px;
  }
  .gg-marken__head-col--name    { grid-column: 1; min-width: 0; }
  .gg-marken__head-col--company { grid-column: 5 / -1; 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-gray-light);
  }

  .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 / Firmenname 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(--gap-sm);
    /* Top-align: when the Firmenname wraps to multiple lines, the short Marke
       name sits at the top of the row, not centered against the tall cell. */
    align-items: start;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
    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-company {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .gg-marken__brand-name    { grid-column: 1 / 5; }
  .gg-marken__brand-company { 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);
  }

  /* Mobile: name + Firmenname 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-company { grid-column: 7 / -1; }
    /* Keep the header "Firmenname" title over the SAME column the entries use
       on mobile (col7), so the title aligns with the company values below it. */
    .gg-marken__head-col--company { 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:25) */
/* ═══ Same 12-col grid model as .product-information (the working reference) ═══
     The section is a real repeat(12,1fr) grid; children place themselves on the
     tracks via grid-column. Fixed widths live on TEXT blocks (max-width inside
     their track); image/fluid blocks just fill their track. No margin offsets. */
  .gg-pdp-info.section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-sm);
    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);
  }

  /* Override .section > * { grid-column: 2 } — full width by default */
  .gg-pdp-info > * {
    grid-column: 1 / -1;
  }


  /* Divider spans the full edge-to-edge width */
  .gg-pdp-info > .gg-section-divider {
    margin-block-end: 12px;
  }

  /* ── Top two-label divider: full-width rule, label over each column ── */
  .gg-pdp-info__divider--top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap-sm);
    align-items: end;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
  }

  .gg-pdp-info__divider-label {
    font-family: var(--font-body--family);
    font-weight: var(--gg-weight-medium);
    font-size: var(--gg-text-base);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-pdp-info__divider-label--ingredients { grid-column: 1 / 4; }
  .gg-pdp-info__divider-label--reviews     { grid-column: 6 / -1; }

  /* The "Labels" divider lives inside the tags block; it naturally spans only
     that block's width (col 1–4). No extra rule needed here. */

  @media (max-width: 749px) {
    /* Phone: columns stack, so the two-label top rule becomes a single label
       (Key Ingredients). The reviews block stands alone below without a header
       rule — matching the stacked, label-light mobile layout. */
    .gg-pdp-info__divider--top {
      display: block;
    }
    .gg-pdp-info__divider-label--reviews { display: none; }
    /* No tags → no lead label → the top rule has no visible label on mobile (the
       reviews label is hidden above), so it would render as an empty border line.
       Drop it; the reviews block keeps its own divider below. */
    .gg-pdp-info__divider--top:not(:has(.gg-pdp-info__divider-label--ingredients)) {
      display: none;
    }
  }

  /* :empty misses whitespace-only nodes — :not(:has(*)) catches them too */
  .gg-pdp-info__col:not(:has(*)) { display: none; }

  /* Reviews header divider: phone only. Desktop keeps the two-label top rule.
     Match the Labels divider's distance to the content below it — that group uses
     a flex gap of --gap-sm, so feed the same value to this divider's gap hook. */
  .gg-pdp-info__reviews-divider {
    display: none;
    --gg-section-divider-gap: var(--gap-sm);
  }

  /* ── Desktop (≥750px) ──
     Tags + reviews place directly on the section's 12-col grid, sharing row 2.
     Tags align col1 (fixed-width block inside). Reviews spans cols 6–12 as a
     plain block; the .gg-reviews block inside rebuilds those 7 tracks with an
     explicit repeat(7,1fr) + the same gap (NO subgrid — it doesn't survive this
     environment) so overview lands col6 and preview col8. Blocks ALIGN to the
     grid but keep fixed widths; as the viewport grows the gaps grow. */
  @media (min-width: 750px) {
    .gg-pdp-info__col--tags {
      /* cols 1–4 (was 1/4): reclaims one column of the empty 4–5 gutter so long
         labels stop wrapping on laptops. Reviews still starts at col 6. */
      grid-column: 1 / 5;
      grid-row: 2;
    }
    .gg-pdp-info__col--reviews {
      grid-column: 6 / -1;
      grid-row: 2;
      /* Plain block (NOT a grid, NOT stretched content): its child .gg-reviews
         lays out at its own content height, so the bottom-pinned actions align
         to the preview's bottom edge — not to the tags column's row height. */
      min-width: 0;
    }
  }

  /* ── Phone (≤749px): each col spans full width, ordered by mobile_order ──
     (side padding comes from --padding-inline above, all viewports) */
  @media (max-width: 749px) {
    .gg-pdp-info__col {
      grid-column: 1 / -1;
      grid-row: auto;
      order: var(--block-order, 0);
    }
    /* Tags ↔ reviews: larger separation matching the group→group rhythm
       (--gg-space-lg). The base section gap (--gap-sm) keeps spacing the Key
       Ingredients divider from its content, so ONLY the reviews col gets the
       extra (gap-sm from row-gap + this margin = --gg-space-lg total). */
    /* Only when a tags column precedes it — no tags → reviews leads, no extra top.
       Uses the section-level block gap (--gg-space-xl) so tags↔reviews reads as a
       full section break; subtract the row-gap already between them. Increasing
       this only pushes reviews down — nothing above it moves. */
    .gg-pdp-info:has(.gg-pdp-info__col--tags) .gg-pdp-info__col--reviews {
      margin-block-start: calc(var(--gg-space-xl) - var(--gap-sm));
    }
    .gg-pdp-info__reviews-divider { display: block; }
  }
/* END_SECTION:gg-pdp-info */

/* START_SECTION:gg-product-title (INDEX:26) */
/* 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;
    gap: 7px;
  }

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

  .gg-product-title__headline {
    margin: 0;
    font-family: var(--gg-font);
    font-size: 28px;
    line-height: 1.2;
    font-weight: var(--gg-weight-regular);
    letter-spacing: 0px;
    color: var(--gg-black);
    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);
  }

  .gg-product-title__description {
    margin: 0;
    max-width: 350px;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-3xl--lh);
    font-weight: var(--gg-weight-light);
    color: var(--gg-black);
    margin: 0;
  }

  .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-results (INDEX:27) */
/* 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. */

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

  /* The product-tag filter must be enabled in Search & Discovery so the category
     pills can filter — but we drive tags through the pills, so hide the redundant
     (and very long) tag facet from the filter bar. Shopify ids this panel
     `Facet-Details-...-filter-p-tag`. */
  .facets__panel[id*="filter-p-tag"] {
    display: none !important;
  }

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

    .gg-collection-header {
      padding-block-start: 48px;
    }
  }
/* END_SECTION:gg-results */

/* START_SECTION:gg-smart-hero (INDEX:28) */
/* --- 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(--gap-sm);
    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-title-image (INDEX:29) */
/* ── 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(--gap-sm);
  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:gg-variant-selector (INDEX:30) */
/* Same full-width recipe as the adjacent .gg-pdp-info / .gg-brand sections:
     redefine the grid to 12 equal columns (the base .section grid has margin
     tracks that inset children), keep the 16px green gutter, and span children
     across all columns to override `.section > * { grid-column: 2 }`. */
  .gg-vs-section.section {
    grid-template-columns: repeat(12, 1fr);
    --padding-inline: var(--gg-page-pad);
  }

  .gg-vs-section > * {
    grid-column: 1 / -1;
  }

  /* Mobile: one selector is enough — the in-details picker stays, hide this. */
  @media screen and (max-width: 749px) {
    .gg-vs-section.section {
      display: none;
    }
  }
/* END_SECTION:gg-variant-selector */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* When top row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='top']:hover,
  [data-transparent-color-scheme='top']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-top-row: var(--color-background);
    }
  }

  /* When bottom row has transparent background, make underlay inherit colors from header component */
  [data-transparent-color-scheme='bottom']:hover,
  [data-transparent-color-scheme='bottom']:focus-within,
  [data-transparent-color-scheme='both']:hover,
  [data-transparent-color-scheme='both']:focus-within {
    :is(.header__underlay-open, .header__underlay-closed) {
      --color-scheme-bottom-row: var(--color-background);
    }
  }

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

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

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

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

    position: relative;

    /* Overwrite color from color scheme, background is controlled by the underlays */
    background-color: transparent;

    &:has(.mega-menu__list:hover),
    &:has(.menu-list__link[aria-haspopup]:is(:hover, [aria-expanded='true'])),
    &:has(.menu-list__list-item[slot='overflow'] .menu-list__link:is(:hover, [aria-expanded='true'])) {
      /* Only elevate the row when the submenu is open to avoid overlapping other elevated content */
      z-index: var(--layer-heightened);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* When the header is transparent, and when there is no header-section below it, offset the first main-section with
     * the height of the header
     */

  main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
    &.spacing-style,
    .spacing-style {
      --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

      /* Any nested sections should not be offset */
      :is(.spacing-style, .inherit-spacing) {
        --section-top-offset: 0px;
      }
    }

    /* Make sticky content immediately stick to the top of the page */
    .sticky-content {
      margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
    }
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .dropdown-localization .language-selector:where(:not(.top-shadow)) {
    font-weight: var(--menu-top-level-font-weight);
  }

  .dropdown-localization:not(dropdown-localization-component) .language-selector {
    font-family: var(--menu-localization-font);
    font-size: var(--menu-localization-font-size);
  }

  /* ==============================================================================
     GreenGlam Custom Header — single floating-pill style (clean rebuild)

     Architecture:
       .gg-header__row            transparent positioning track, inset 16px
         .gg-header__col--left    LEFT PILL — offset parent for the Menu panel
           .gg-header__bar        one flex row: Menu toggle + Shop + The Store
         .gg-header__col--right   RIGHT PILL — offset parent for the Cart dialog
           search + header-actions (Account, Cart)
       (no centre column — the logo is rendered at <body> level via
        snippets/gg-floating-logo.liquid so its mix-blend-mode:difference can reach
        the page content behind the header; .gg-header__logo styles it here.)

     Buttons are flat black text (the only style now). The two side pills carry the
     surface tint and animate cream→gray-light (default) / orange→orange-dark (spa)
     on scroll — driven by --gg-pill-bg-from/to so one keyframe serves both modes.
     The Menu + Cart panels anchor to the PILL (not an inner box) so they align to
     the pill edge on every breakpoint.
     ============================================================================== */

  /* Transparent track. The sticky .header-section stays edge-anchored at top:-1px
     so the IntersectionObserver still fires (see assets/header.js); the floating
     look is the two side pills, inset 16px via the row margin. */
  .gg-header__row {
    position: relative;    /* offset parent for the centered logo */
    display: flex;
    align-items: center;
    justify-content: space-between;   /* push the two side pills to the edges */
    margin: var(--gg-page-pad);
    height: 50px;
  }

  /* Side groups are shrink-to-content pills; the center logo floats free. */
  .gg-header__col {
    display: flex;
    align-items: center;
    flex: 0 0 auto;        /* shrink to content — compact pills, not full-width */
    width: fit-content;    /* belt-and-braces: never stretch to the row */
    position: relative;    /* offset parent for each side's dropdown panel */
    z-index: 1;
  }

  /* GG uses its OWN Menu toggle (in .gg-header__bar). Horizon's mobile drawer +
     menu live inside the left column too — hide them on EVERY breakpoint, else the
     drawer container stretches the left pill wide on desktop (the "huge pill" bug). */
  .gg-header__col--left :is(.header__drawer, .menu-drawer-container, header-drawer, .header__icon--menu, .header-menu) {
    display: none !important;
  }

  /* Left + right pills — rounded tinted surface, own padding. The scroll-driven
     tint animation was removed; the pills now hold a STATIC post-scroll colour
     (--gg-pill-bg-to): gray-light (default) / orange-dark (spa). */
  .gg-header__col--left,
  .gg-header__col--right {
    --gg-pill-bg-to: var(--gg-gray-light);
    padding: 0 var(--gg-page-pad);
    background-color: var(--gg-pill-bg-to);
    /* Fixed pill height so left + right are identical regardless of their inner
       content (left = text links, right = web-component actions). Content stays
       vertically centered via the columns' align-items:center. */
    height: 25px;
  }
  .gg-header__col--left  { justify-content: flex-start; }
  .gg-header__col--right { justify-content: flex-end; gap: var(--gg-header-bar-gap); }

  /* No centre column: the logo is rendered at <body> level (outside this section)
     so its mix-blend-mode:difference reaches the page behind the header — a logo
     inside the sticky header's stacking context can only blend against the header
     itself. The left/right pills are pushed to the edges by justify-content:
     space-between on .gg-header__row, so no centre slot is needed. The body-level
     logo is positioned over the row by .gg-header__logo below. */

  /* ── Bar buttons + links: flat black text, one weight, one gap ──────────────
     The only header style. No pill backgrounds, no per-button surfaces — the Menu
     toggle, the Shop/Store links, and the right-side Search/Account/Cart all read
     as evenly-spaced flat text. */
  .gg-header__bar {
    display: inline-flex;
    align-items: center;
    gap: var(--gg-header-bar-gap);
  }
  .gg-header__nav-link,
  .gg-menu-toggle,
  .gg-header__col--right .search-action,
  .gg-header__col--right .header-actions__action {
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: var(--gg-header-btn-weight);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    background: transparent;
    border: none;
    padding: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  /* Hairline divider between Menu and Shop — sits on the Menu toggle's right edge,
     with matching right padding so the line clears the text; the bar gap then adds
     the space to Shop. Desktop only — on mobile (<750px) the Shop/Store links
     collapse into the Menu panel, so the divider would dangle with nothing after it. */
  @media screen and (min-width: 750px) {
    .gg-menu-toggle {
      border-right: 1px solid #0000003b;
      padding-right: var(--gg-header-bar-gap);
    }
  }
  /* Right side: header-actions is a flex row sharing the one bar gap, so
     Search → Account → Cart spacing matches the left side exactly. */
  .gg-header__col--right header-actions {
    display: flex;
    align-items: center;
    gap: var(--gg-header-bar-gap);
  }
  /* The search-action wrapper holds an inner <button>; carry the type through. */
  .gg-header__col--right .search-action button {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  /* header-actions text spans default to --header-actions-font-* (Inter); pin them
     to the bar type so weight/letter-spacing match the rest of the bar. */
  .gg-header__col--right .header-actions__text-style,
  .gg-header__col--right .account-button__text {
    font-family: var(--gg-font) !important;
    font-size: 14px !important;
    font-weight: var(--gg-header-btn-weight) !important;
    letter-spacing: var(--gg-tracking-default) !important;
    text-transform: none !important;
    color: var(--gg-black);
  }
  /* Hover: subtle dim, no transform — for every bar item. */
  .gg-header__nav-link:hover,
  .gg-menu-toggle:hover,
  .gg-header__col--right .search-action:hover,
  .gg-header__col--right .header-actions__action:hover {
    opacity: 0.6;
    transform: none;
  }

  /* Hide the action icon glyphs on desktop; text labels carry the bar. */
  .gg-header__col--right .svg-wrapper[aria-hidden='true'],
  .gg-header__col--right cart-drawer-component > button .svg-wrapper {
    display: none;
  }
  .gg-header__col--right .desktop\:hidden { display: none !important; }
  .gg-header__col--right .mobile\:hidden  { display: inline !important; }

  /* Bag count: inline "(2)" beside the Warenkorb label — never a corner badge. */
  .gg-header__col--right cart-drawer-component > button .cart-bubble { width: auto; height: auto; background: transparent; }
  .gg-header__col--right cart-drawer-component > button .cart-bubble__background { display: none; }
  .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count::before { content: '('; }
  .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count::after  { content: ')'; }
  .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count { color: var(--gg-black); }

  /* ── Logo: body-level + white fill + difference blend (the reome.com recipe) ──
     The logo element is rendered at <body> level (snippets/gg-floating-logo.liquid),
     a sibling of #header-group — NOT inside this header section. That is what lets
     mix-blend-mode:difference reach the page content behind the header: a blend only
     composites against its own stacking context, and the sticky header forms one of
     its own, so a logo rendered inside it (even position:fixed) can only blend against
     the header's layers. Rendered in <body>, it sits in the top-level context with
     <main> and finally blends against the page. position:fixed + viewport-centring
     then lands it visually on the header row. White paint × difference inverts whatever
     is behind it → legible over the cream/grey pill AND over any page imagery showing
     through the transparent track. The element is content-width and centred with
     margin-inline:auto (not translate-50%), so it lands on whole pixels (no blur) and
     its hit area stays on the logo; the mobile query just grows its height to the
     taller bar. (theSPA wordmark hardcodes fill:#000001 on its paths — the `path`
     !important override is required.) */
  .gg-header__logo {
    /* Fixed, content-width, horizontally centred via left:0/right:0 + margin-inline:auto
       (NOT translate(-50%): translating by half the element's own odd width lands the
       fixed element on a sub-pixel and the browser smears it — margin:auto resolves to
       whole pixels, so the SVG stays crisp). Content width (not a full-viewport band)
       means the link's hit area is just the logo, so it never blocks clicks on the side
       pills behind it. Fixed height = row height, with align-items:center keeping the
       crown on the row's vertical midline. */
    position: fixed;
    top: var(--gg-page-pad);
    left: 0;
    right: 0;
    width: fit-content;
    height: 50px;
    margin-inline: auto;
    z-index: var(--layer-sticky, 100);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: auto;
  }
  .gg-header__logo svg,
  .gg-header__logo svg path {
    fill: #fff !important;
  }
  /* Spa: the orange background turns a white difference-blend into blue
     (|255-orange| ≈ blue). Drop the blend on Spa and paint the wordmark solid
     black — simple and high-contrast on orange. */
  [data-spa-mode] .gg-header__logo {
    mix-blend-mode: normal;
    color: var(--gg-black);
  }
  [data-spa-mode] .gg-header__logo svg,
  [data-spa-mode] .gg-header__logo svg path {
    fill: var(--gg-black) !important;
  }
  /* Override base.css .svg-wrapper size clamp — logo sizes by HEIGHT, width follows. */
  .gg-header__crown.svg-wrapper,
  .gg-header__wordmark.svg-wrapper {
    width: auto !important;
    height: auto !important;
    pointer-events: none;
  }
  .gg-header__crown.svg-wrapper svg {
    height: var(--gg-header-logo-h) !important;
    width: auto !important;
    display: block !important;
  }
  /* Wordmark is wide text — reads larger than the crown at equal height, so run it
     a touch shorter than the crown's full token height. */
  .gg-header__wordmark.svg-wrapper svg {
    height: calc(var(--gg-header-logo-h) * 0.8) !important;
    width: auto !important;
    display: block !important;
  }
  /* Spa wordmark IS the whole logo (no crown beside it) — full token height. */
  [data-spa-mode] .gg-header__wordmark.svg-wrapper svg {
    height: var(--gg-header-logo-h) !important;
  }

  /* Wordmark: desktop only — crown always on mobile. GG header collapses to
     compact mode below 1100px. */
  @media screen and (max-width: 1099px) {
    .gg-header__wordmark.svg-wrapper { display: none !important; }
    .gg-header__crown--desktop-hidden { display: inline-flex !important; }
    /* Spa mode: the wordmark IS the logo (no crown fallback) — keep it visible. */
    [data-spa-mode] .gg-header__wordmark.svg-wrapper { display: inline-flex !important; }
  }
  @media screen and (min-width: 1100px) {
    .gg-header__crown--desktop-hidden { display: none !important; }

    /* logo_type = 'crown' — show crown only on desktop too. The header section mirrors
       the editor setting onto header-component[data-gg-logo]; the body-level logo reads
       it from a shared ancestor. (Spa mode keeps its wordmark regardless.) */
    body:has(header-component[data-gg-logo='crown']:not([data-spa-mode])) .gg-header__wordmark.svg-wrapper {
      display: none !important;
    }
    body:has(header-component[data-gg-logo='crown']:not([data-spa-mode])) .gg-header__crown--desktop-hidden {
      display: inline-flex !important;
    }
  }

  /* ── Mobile/compact layout (max 1099px) ──────────────────────────────────── */
  @media screen and (max-width: 1099px) {
    /* Taller transparent track so the mobile crown has room (50px clipped it).
       Side pills keep their own bg + padding. */
    .gg-header__row {
      height: auto;
      min-height: 72px;
      --gg-header-logo-h: 44px;
      /* Hug the top edge on mobile (desktop keeps the symmetric 12px margin). */
      margin-block-start: 0;
    }
    /* Logo band matched to the taller mobile bar (72px) so flex-centring keeps the
       crown on the row's midline without a sub-pixel translate. */
    .gg-header__logo {
      height: 72px;
      /* Pull the fixed crown to the top edge to match the row's flush top. */
      top: 0;
    }
    /* Hide Horizon's redundant mobile drawer — GG uses its own Menu pill. */
    .gg-header__col--left .header__drawer { display: none !important; }
    /* Hide the Shop/Store text links on mobile; Menu toggle stays visible. */
    .gg-header__bar .gg-header__nav-link { display: none !important; }

    /* Right: hide Search + Account (they move into the Menu panel). */
    .gg-header__col--right .search-action,
    .gg-header__col--right .account-button {
      display: none !important;
    }

    /* Mobile cart: collapse to just the bracketed count "(0)" / "(1)" — hide the
       "Warenkorb" word, force-show the count even when empty (override Horizon's
       empty-cart hiding on both the bubble and the count span). */
    .gg-header__col--right cart-drawer-component > button .mobile\:hidden {
      display: none !important;
    }
    .gg-header__col--right cart-drawer-component > button .cart-bubble,
    .gg-header__col--right cart-drawer-component > button .cart-bubble.visually-hidden {
      position: static !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      background: transparent !important;
      clip: auto !important;
      clip-path: none !important;
      overflow: visible !important;
    }
    .gg-header__col--right cart-drawer-component > button .cart-bubble__background {
      display: none !important;
    }
    .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count {
      color: var(--gg-black) !important;
      font-size: inherit !important;
      font-weight: 600 !important;
    }
    .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count.hidden {
      display: inline !important;
    }
    .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count::before { content: '(' !important; }
    .gg-header__col--right cart-drawer-component > button .cart-bubble__text-count::after  { content: ')' !important; }
  }

  /* ==============================================================================
     Menu panel — anchored to the LEFT PILL
     ============================================================================== */

  .gg-menu-details {
    display: inline-flex;
    align-items: center;
  }
  .gg-menu-details > summary {
    list-style: none;
    cursor: pointer;
  }
  .gg-menu-details > summary::-webkit-details-marker { display: none; }

  /* Panel shell. Offset parent is .gg-header__col--left (the pill), so left:0 pins
     the panel flush to the pill's left edge — no inner anchor, no magic offset. */
  .gg-menu-panel {
    /* Interior band width — the pill column, the category divider, and the
       localization's left edge all reference it so the divider always ends exactly
       at the vertical localization divider, at every breakpoint. (Interior math
       only — it no longer doubles as the anchor offset.) */
    --gg-menu-pill-zone: 183px;

    display: none;
    position: absolute;
    top: calc(100% + 12px);   /* 12px below the pill's bottom edge */
    left: 0;                  /* flush with the left pill's left edge */
    right: auto;
    z-index: var(--layer-popover, 300);
    width: var(--gg-menu-pill-zone);
    background: var(--gg-gray-light);
    padding: 14px 0 30px;
    transition: width 0.2s ease;
    overflow: hidden;   /* clips loc-content to panel border-radius */
  }
  .gg-menu-details[open] .gg-menu-panel {
    display: flex;
    flex-direction: column;
  }
  @keyframes gg-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes gg-menu-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
  }
  .gg-menu-panel.gg-menu-opening {
    animation: gg-menu-in 0.15s ease both;
  }
  .gg-menu-panel.gg-menu-closing {
    display: flex;
    flex-direction: column;
    animation: gg-menu-out 0.15s ease forwards;
  }

  /* ── Top row ── */
  .gg-menu-panel__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 30px;
  }
  .gg-menu-panel__label {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.52px;
    color: var(--gg-black);
  }

  /* Localization trigger — "EUR/DE ▾" text */
  .gg-menu-panel__loc-trigger {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.52px;
    color: var(--gg-black);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
  }
  .gg-menu-panel__loc-trigger::-webkit-details-marker { display: none; }

  /* Loc content — scrollable country/language list */
  .gg-menu-panel__loc-content {
    position: absolute;
    top: 60px;   /* below the top row (14px padding + ~19px label + 10px gap = ~43px) */
    left: var(--gg-menu-pill-zone);   /* starts exactly at the pill band's right edge */
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 0 16px 20px;
    border-left: 1px solid rgba(0,0,0,0.08);
    display: none;

    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
  }
  
  .gg-menu-panel__loc-details[open] .gg-menu-panel__loc-content {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .gg-menu-panel__loc-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
  }
  .gg-menu-panel__loc-group + .gg-menu-panel__loc-group {
    /* Break out of the loc-content's 16px side padding so the divider runs
       edge-to-edge across the localization panel (no left/right gaps).
       Padding restores the text inset. */
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-inline: -16px;
    padding-top: 10px;
    padding-inline: 16px;
  }
  .gg-menu-panel__loc-option {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    background: none;
    border: none;
    padding: 2px 0;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    opacity: 0.55;
  }
  .gg-menu-panel__loc-option:hover { opacity: 1; }
  .gg-menu-panel__loc-option.is-active {
    opacity: 1;
    font-weight: 500;
  }

  /* Panel widens when loc is open — pill zone + localization column (~140px) */
  .gg-menu-panel--loc-open {
    width: calc(var(--gg-menu-pill-zone) + 140px);
  }

  .gg-menu-panel__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 30px;
    /* Pinned to the shared pill-zone width so its right edge always meets the
       localization's left edge — the panel widens for loc without stretching this. */
    flex: 0 0 auto;
    width: var(--gg-menu-pill-zone);
    box-sizing: border-box;
  }
  /* Pills inside panel inherit .gg-header__pill; constrain width */
  .gg-menu-panel__pill {
    width: fit-content;
  }

  /* Divider between Shop categories and the rest of the menu — matches the
     Warenkorb popup divider (1px hairline). Breaks out of the column's 30px side
     padding so it spans the full pill band: from the panel's left edge to the
     vertical localization divider (the column's right edge). */
  .gg-menu-panel__divider {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    width: auto;
    margin-block: 4px;
    margin-inline: -30px;
  }

  /* ── Shop sub-accordion ── */
  .gg-menu-panel__sub-details > summary {
    list-style: none;
    cursor: pointer;
  }
  .gg-menu-panel__sub-details > summary::-webkit-details-marker { display: none; }
  .gg-menu-panel__sub-details[open] > summary {
    opacity: 0.7;
  }
  .gg-menu-panel__sub-links {
    list-style: none;
    margin: 0;
    padding: 10px 0 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .gg-menu-panel__sub-link {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    text-decoration: none;
  }
  .gg-menu-panel__sub-link:hover { opacity: 0.6; }

  /* ── Hide hamburger globally (panel replaces it on all breakpoints) ── */
  .gg-header__col--left .header__icon--menu {
    display: none !important;
  }

  /* ── Mobile-only actions in menu panel (Search + Account) ── */
  .gg-menu-panel__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 30px 0;
  }

  @media screen and (min-width: 1100px) {
    .gg-menu-panel__mobile-actions {
      display: none;
    }
  }

  /* Account row inside the menu panel (mobile only) — flat text like every other
     menu item; the base flat-text rule above covers background/colour/weight. */
  .gg-menu-panel__account-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
  }
  .gg-menu-panel__account-pill shopify-account {
    display: flex;
    align-items: center;
    color: inherit;
  }
  .gg-menu-panel__account-pill .account-button__text {
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: var(--gg-header-btn-weight);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* ── Mobile/compact (max-width: 1099px) ──
     Panel widens to the viewport inset. Its left edge already sits at the pill's
     left edge (= the --gg-page-pad margin), so subtracting the inset on both sides
     keeps it flush left AND right — derived from the token, no magic numbers. */
  @media screen and (max-width: 1099px) {
    .gg-menu-panel {
      width: calc(100vw - 2 * var(--gg-page-pad));
    }
  }

  /* ── Menu panel items: flat black text in BOTH modes ────────────────────────
     The items carry .gg-header__pill / .gg-menu-panel__pill from the markup, but
     there are no pill surfaces anywhere now — they render as flat text. Only the
     PANEL surface carries colour (grey default / orange-dark spa). */
  .gg-menu-panel :is(.gg-header__pill, .gg-menu-panel__pill, .gg-menu-panel__account-pill) {
    font-family: var(--gg-font);
    font-size: 14px;
    font-weight: var(--gg-header-btn-weight);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    height: auto;
    cursor: pointer;
    text-decoration: none;
  }
  .gg-menu-panel .gg-menu-panel__account-pill .account-button__text {
    color: var(--gg-black);
  }
  .gg-menu-panel :is(.gg-header__pill, .gg-menu-panel__pill, .gg-menu-panel__account-pill):hover {
    transform: none;
    opacity: 0.6;
  }

  /* Cart (Warenkorb) drawer keeps its surface; the checkout CTA + quantity stepper
     flatten to bare black text/glyphs (no pill backgrounds). */
  .cart-drawer .cart__checkout-button {
    background: transparent;
    color: var(--gg-black);
    padding: 0;
    border-radius: 0;
    height: auto;
  }
  .cart-drawer .quantity-selector {
    background: transparent;
    border-radius: 0;
  }
  .cart-drawer .quantity-selector :is(button, input) {
    color: var(--gg-black);
  }
  .cart-drawer .quantity-selector > :first-child { padding-inline-start: 0; }
  .cart-drawer .quantity-selector > :last-child  { padding-inline-end: 0; }

  /* ==============================================================================
     Spa mode — the side pills go orange (orange→orange-dark on scroll, via the
     driver vars so the SAME tint keyframe runs); dropdown surfaces go orange-dark.
     Bar text stays black throughout. No per-item rectangles — items are flat text,
     exactly as in default mode (only the surface tone changes).
     ============================================================================== */
  [data-spa-mode] .gg-header__col--left,
  [data-spa-mode] .gg-header__col--right {
    --gg-pill-bg-from: var(--gg-orange);
    --gg-pill-bg-to:   var(--gg-orange-dark);
  }

  [data-spa-mode] .gg-menu-panel {
    background: var(--gg-orange-dark);
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:33) */
.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:34) */
.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:35) */
.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:37) */
.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:38) */
/**
   * 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:39) */
.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:41) */
/* 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 {
      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);
  }

  /* Title+count on the left, view toggle on the right, ONE shared bottom rule
     that runs full-width under both. The rule lives on the bar (not the inner
     divider snippet) so it extends past the title across the toolbar too. */
  .gg-collection-header__bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gg-space-md);
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
  }

  /* Neutralize the divider snippet's own rule + padding here — the bar owns the
     line now. Keep only the label typography. */
  .gg-collection-header__bar .gg-section-divider {
    flex: 1 1 auto;
    padding-block-end: 0;
    border-bottom: 0;
  }

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

  /* ── 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-start: var(--gg-space-sm);
  }
/* END_SECTION:main-collection */

/* START_SECTION:marquee (INDEX:43) */
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:44) */
.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:45) */
.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:46) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

  .password-content {
    text-align: center;
  }
/* END_SECTION:password */

/* START_SECTION:predictive-search (INDEX:48) */
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .search-action .predictive-search {
    z-index: calc(var(--layer-header-menu) + 2);
  }

  .search-action .search-modal .predictive-search {
    z-index: var(--layer-window-overlay);
  }

  .header__column--right .predictive-search-form__content-wrapper {
    right: 0;
    left: unset;
  }

  .search-modal .predictive-search-form__content-wrapper {
    width: 100%;

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

  .predictive-search:has(.predictive-search-dropdown) .search-input {
    outline-color: transparent;
  }

  /* (Vendor focus rules that re-added input borders/radius removed — the GG
     field is borderless with a single black underline; see search-modal.liquid.
     The header keeps its full-bleed bottom divider in all states.) */

  .dialog-modal[open] {
    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      /* Keep the X icon on mobile too — no "Löschen" text (avoids a 2nd Löschen). */
      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

      .predictive-search-form__content-wrapper {
        box-shadow: none;
      }

      .predictive-search-form__header {
        box-shadow: none;
      }

      .predictive-search-form__footer {
        padding-block: var(--padding-2xl);
      }
    }
  }

  .predictive-search-results__pill {
    font-weight: 400;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: var(--gg-space-xs);

    &:hover {
      transform: scale(1.02);
    }
  }

  .predictive-search-results__pill mark {
    background-color: transparent;
    font-weight: 200;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .predictive-search-results__pill:focus,
  .predictive-search-results__pill:hover,
  .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));

    background-color: var(--pill-background-color);
    outline: var(--border-width-sm) solid var(--color-border);
    border: var(--border-width-sm);
    text-decoration: none;
  }

  /* Section labels ("Zuletzt angesehen" / "Produkte") — standard editorial body
     style (cf. .gg-text__body): 14px / regular / black, not a bold heading. */
  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--gg-font);
    font-size: 14px;
    line-height: 16.5px;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

    &:first-of-type {
      margin-block-start: 0;
    }

    @media screen and (max-width: 749px) {
      margin-block: var(--margin-lg) var(--margin-sm);
    }
  }

  /* Align result sections (title + card grid) with the search field — both at
     the modal's inner padding edge, not double-indented. */
  .search-modal .predictive-search-results__products {
    padding-inline: 0;
  }

  .predictive-search-results__wrapper.predictive-search-results__wrapper-queries {
    margin-bottom: var(--margin-lg);
    padding-inline: var(--padding-xl);
    gap: var(--gap-2xs);
  }

  .predictive-search-results__card {
    --title-font-size: var(--font-size--md);
    --title-margin-block: var(--margin-xs);

    flex: 0 0 auto;
    scroll-snap-align: start;
    scroll-margin-block: calc(var(--title-font-size) + var(--title-margin-block) + var(--padding-sm))
      calc(var(--padding-xl) + var(--button-padding-block) * 2);
    transition: transform var(--animation-speed-medium) var(--animation-timing-default),
      background-color var(--animation-speed-medium) var(--animation-timing-hover),
      border-color var(--animation-speed-medium) var(--animation-timing-hover);

    &:nth-last-child(3) {
      scroll-snap-align: end;
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  .recently-viewed-wrapper .predictive-search-results__card {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }

  .predictive-search-results__card--product,
  .recently-viewed-wrapper .predictive-search-results__card--product {
    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
    }

    /* No rounded grey hover wash — Shop cards have none. Keyboard focus gets a
       flat outline only (no radius, no background). */
    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      outline: var(--border-width-sm) solid var(--gg-black);
      outline-offset: 2px;
    }
  }

  /* Result product list → small-card grid (info below), Shop gaps (5/32px),
     ~3–4 per row at the modal width. Scoped to the search modal. */
  .search-modal .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    column-gap: 5px;
    row-gap: 32px;
    align-items: start;
  }

  @media screen and (max-width: 749px) {
    .search-modal .predictive-search-results__wrapper-products {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .predictive-search-results__card:not(.predictive-search-results__card--product) {
    padding: var(--padding-sm);
    border: var(--border-width-sm) solid var(--color-border);
    border-radius: var(--card-corner-radius);
    width: 60cqi;
    content-visibility: visible;

    @media screen and (min-width: 750px) {
      width: 27.5cqi;
    }

    &:hover {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &[aria-selected='true'].keyboard-focus {
      border-color: var(--card-border-hover);
      background-color: var(--card-bg-hover);
    }

    &:active {
      transform: scale(0.97);
      transition: transform var(--animation-speed-medium) var(--animation-timing-active);
    }
  }

  @keyframes search-element-scale-in {
    0% {
      transform: scale(0.95);
      opacity: 0;
    }

    40% {
      opacity: 1;
    }

    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes search-element-scale-out {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes search-element-slide-in-top {
    from {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }

    to {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }
  }

  @keyframes search-element-slide-out-top {
    from {
      margin-top: var(--modal-top-margin);
      opacity: 1;
    }

    to {
      margin-top: calc(var(--modal-top-margin) + var(--padding-sm));
      opacity: 0;
    }
  }

  @keyframes content-slide {
    from {
      transform: translateY(var(--slide-from, 0));
      opacity: var(--slide-opacity-from, 1);
    }

    to {
      transform: translateY(var(--slide-to, 0));
      opacity: var(--slide-opacity-to, 1);
    }
  }

  .predictive-search-results__list {
    --slide-width: 27.5%;
    --slideshow-gap: var(--gap-md);

    /* Make space for the outline to be visible */
    padding-block-start: var(--border-width-sm);
  }

  .predictive-search-results__list slideshow-arrows {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  /* "Keine Ergebnisse" — standard editorial body style, not an oversized heading. */
  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
    font-family: var(--gg-font);
    font-size: 14px;
    line-height: 16.5px;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .predictive-search-results__no-results,
  .predictive-search-results__wrapper,
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation: search-element-slide-up var(--animation-speed-medium) var(--animation-timing-bounce) backwards;
  }

  .predictive-search-results__no-results:last-child {
    margin-block: var(--margin-lg);
    text-align: center;
  }

  slideshow-slide .resource-card {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__list,
  .predictive-search-results__wrapper {
    animation-duration: var(--animation-speed-medium);
  }

  .predictive-search-results__wrapper-queries {
    animation-delay: 50ms;
  }

  .predictive-search-results__list:nth-of-type(2) {
    animation-delay: 150ms;
  }

  .predictive-search-results__list:nth-of-type(3) {
    animation-delay: 200ms;
  }

  .predictive-search-results__list:nth-of-type(4) {
    animation-delay: 250ms;
  }

  .predictive-search-results__list:last-child {
    margin-block-end: 0;
  }

  [data-resource-type] {
    /* stylelint-disable-next-line declaration-no-important */
    animation-delay: 0ms !important;
  }

  .predictive-search-results__no-results.removing,
  .predictive-search-results__wrapper.removing {
    animation: search-element-slide-down var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__card.removing {
    animation: fadeOut var(--animation-speed-medium) var(--animation-timing-fade-out) forwards;
  }

  .predictive-search-results__wrapper {
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

  @keyframes search-element-slide-up {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes search-element-slide-down {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  .predictive-search-results__card--query {
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
    transform-origin: center;

    &:active {
      transform: scale(0.97);
    }
  }

  /* ─────────────────────────────────────────────────────────────────────
     Spa mode: predictive-search surfaces inside the search modal go orange.
     Mirrors the search-modal.liquid overrides; covers this file's own
     hardcoded greys + scheme vars so no surface stays grey. [data-spa-mode].
     ───────────────────────────────────────────────────────────────────── */
  [data-spa-mode] .search-modal .dialog-modal .predictive-search-form__header,
  [data-spa-mode] .search-modal .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    background-color: var(--gg-orange);
  }

  /* Scheme vars → orange so foreground-rgb / background-driven bits resolve right */
  [data-spa-mode] .search-modal .predictive-search {
    --color-background: var(--gg-orange);
    --color-foreground: var(--gg-black);
    --card-bg-hover: var(--gg-orange-dark);
  }

  /* Query/keyword pills inside results → deeper orange, black text */
  [data-spa-mode] .search-modal .predictive-search-results__pill {
    background-color: var(--gg-orange-dark);
    color: var(--gg-black);
  }
  [data-spa-mode] .search-modal .predictive-search-results__pill:focus,
  [data-spa-mode] .search-modal .predictive-search-results__pill:hover,
  [data-spa-mode] .search-modal .predictive-search-results__card--query:is([aria-selected='true'], :focus-within) .predictive-search-results__pill {
    --pill-background-color: var(--gg-orange-dark);
    background-color: var(--gg-orange-dark);
    color: var(--gg-black);
  }
/* END_SECTION:predictive-search */

/* START_SECTION:product-hotspots (INDEX:49) */
/* 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:50) */
.sticky-add-to-cart__bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    z-index: calc(var(--layer-sticky) - 1); /* Below sticky header */
    display: block;
    width: 600px;
    border-radius: calc(
      var(--style-border-radius-buttons-primary) + min(var(--padding-sm), var(--style-border-radius-buttons-primary))
    );
    box-shadow: var(--shadow-popover);
    padding: var(--padding-sm);
    /* Layout styling */
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    @starting-style {
      opacity: 0;
      transform: translateX(-50%) translateY(calc(100% + 40px));
    }

    &::before {
      --border: 2px;
      content: '';
      position: absolute;
      inset: calc(var(--border) * -1);
      background: linear-gradient(var(--color-background) 0 100%), linear-gradient(hsl(0 0% 0% / 0.15) 0 100%);
      background-clip: content-box, border-box;
      border: var(--border) solid #0000;
      border-radius: inherit;
      z-index: -1;
      backdrop-filter: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-add-to-cart__bar {
      transition-property: transform, opacity, display;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
      transition-behavior: allow-discrete;
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateX(-50%) translateY(0%);
    opacity: 1;
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    opacity: 0;
    transform: translateX(-50%) translateY(calc(100% + 40px));
    display: none;
  }

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

  .sticky-add-to-cart__image {
    flex-shrink: 0;
    aspect-ratio: 1;
    height: var(--height-buy-buttons);
    overflow: hidden;
    border-radius: var(--style-border-radius-buttons-primary);
    background: var(--color-background-secondary);
  }

  .sticky-add-to-cart__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .sticky-add-to-cart__info {
    flex: 1;
    min-width: 0; /* Allow text truncation */
  }

  .sticky-add-to-cart__button {
    height: var(--height-buy-buttons);
    position: relative;
  }

  /* ── GreenGlam sticky add-to-cart — match the PDP "added" banner language ── */
  /* Bar: grey, no radius, no border, no shadow; anchored to the right edge */
  .sticky-add-to-cart__bar {
    left: var(--gg-page-pad);
    right: auto;
    transform: translateY(calc(100% + 40px));
    background-color: var(--gg-gray-light);
    border-radius: 0;
    box-shadow: none;
    gap: var(--gg-space-sm);
    padding: var(--gg-space-sm);

    @starting-style {
      transform: translateY(calc(100% + 40px));
    }
  }

  .sticky-add-to-cart__bar[data-stuck='true'] {
    transform: translateY(0%);
  }

  sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__bar {
    transform: translateY(calc(100% + 40px));
  }

  /* Drop Horizon's gradient border pseudo-element */
  .sticky-add-to-cart__bar::before {
    display: none;
  }

  /* Thumbnail: GG card corners */
  .sticky-add-to-cart__image {
    border-radius: var(--gg-radius-card);
    background: transparent;
  }

  /* Info stack: variant (10px eyebrow) → brand → title */
  .sticky-add-to-cart__info {
    display: flex;
    flex-direction: column;
  }

  .sticky-add-to-cart__variant {
    order: -1; /* variant sits on top */
    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);
  }

  .sticky-add-to-cart__brand,
  .sticky-add-to-cart__title {
    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);
  }

  .sticky-add-to-cart__title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Button: no pill, transparent, black text, no icon */
  .sticky-add-to-cart__bar .sticky-add-to-cart__button {
    background-color: transparent;
    color: var(--gg-black);
    border-radius: 0;
    border: none;
    font-size: 14px;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    padding: 0 var(--gg-space-md);
  }

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

  .sticky-add-to-cart__bar .sticky-add-to-cart__button .add-to-cart-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gg-space-md);
    width: 100%;
    text-decoration: underline;
  }

  /* 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:51) */
@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:52) */
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:53) */
.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:58) */
.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:59) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:60) */
.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:61) */
.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:62) */
.blog-post-content {
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }
/* END_BLOCK:_blog-post-content */

/* START_BLOCK:_blog-post-description (INDEX:63) */
.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:64) */
.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:65) */
.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:66) */
.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:67) */
.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:68) */
.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:69) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:70) */
.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:71) */
.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:74) */
.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:76) */
.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:80) */
.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:81) */
.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:83) */
.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:86) */
.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:87) */
.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:88) */
.gg-manufacturer-address {
    font-style: normal;
  }
  .gg-mfr-sep {
    margin: 0 0.5em;
    opacity: 0.4;
  }
/* END_BLOCK:_gg-accordion-item */

/* START_BLOCK:_gg-category-hover (INDEX:89) */
/* 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. The
     `.gg-cat-hover >` prefix lifts specificity to (0,2,0) so it beats the leaked
     `.gg-shop-nav__kategorien { grid-column: 1 / 3 }` rule from gg-shop-nav-
     styles (the list also carries that class for its link styling), plus reset
     grid-row + max-width that rule pins for the Shop page. */
  .gg-cat-hover > .gg-cat-hover__list {
    grid-column: var(--cat-list-start, 7) / -1;
    grid-row: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: none;
  }
  @media screen and (min-width: 750px) {
    .gg-cat-hover > .gg-cat-hover__list {
      grid-column: var(--cat-list-start, 7) / -1;
      grid-row: auto;
      max-width: none;
    }
  }

  /* ── 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(--gap-sm);
    }
    .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:90) */
/* Span the full content width wherever it lands (grid or flex parent). */
  .gg-divider-block {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* Inside a section, the parent's own gap spaces the divider from the grid
     below — so zero the divider snippet's own bottom margin to avoid stacking
     two gaps. The section `gap` setting becomes the single source of spacing. */
  .gg-divider-block .gg-section-divider {
    --gg-section-divider-gap: 0px;
  }
/* END_BLOCK:_gg-divider */

/* START_BLOCK:_gg-ed-col (INDEX:91) */
/* Column = grid. Mobile: single track (everything full width, stacked). */
  .gg-ed__col {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--ed-text-gap, 24px);
    column-gap: var(--gap-sm);
  }
  .gg-ed__col > * { grid-column: 1 / -1; }   /* text + full images span the whole column */

  /* ── Eyebrow ── */
  .gg-ed__eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    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);
  }

  /* ── Title ── */
  .gg-ed__title {
    margin: 0;
    font-family: var(--gg-font, var(--font-body--family));
    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);
    white-space: pre-line;
  }
  .gg-ed__eyebrow + .gg-ed__title { margin-top: calc(16px - var(--ed-text-gap, 24px)); }
  /* No title: eyebrow sits directly above body — tighten to the PDP eyebrow→body
     gap (--gg-space-sm) instead of the full inter-element row gap. */
  .gg-ed__eyebrow + .gg-ed__body { margin-top: calc(var(--gg-space-sm, 10px) - var(--ed-text-gap, 24px)); }

  /* Responsive caps stay at or below the 28px desktop base so the title never
     renders larger on smaller screens than on desktop. */
  @media (max-width: 767px) {
    .gg-ed__title { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .gg-ed__title { font-size: clamp(1.5rem, 3.5vw, 1.75rem); }
  }

  /* ── Body ── */
  .gg-ed__body {
    font-family: var(--gg-font, var(--font-body--family));
    font-size: var(--gg-text-body);
    font-weight: 400;
    line-height: var(--gg-text-body--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--color-foreground);
  }
  .gg-ed__body p             { margin-block: 0.5em; }
  .gg-ed__body p:first-child { margin-block-start: 0; }
  .gg-ed__body p:last-child  { margin-block-end: 0; }

  /* Offset nudges an image down within the column (stagger). The whole column is
     sticky (set on the slot in the section), so images never overlap — plain grid. */
  .gg-ed__col .gg-ed__img-block { margin-top: var(--img-offset, 0px); }

  /* ── Desktop: images side by side (1–3 tracks), wrapping into rows ── */
  @media (min-width: 1025px) {
    .gg-ed__col {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* --img-col-start lets small/medium images pick their track (1–3);
       fallback `auto` keeps the original left-to-right auto-flow. */
    .gg-ed__col .gg-ed__img-block {
      grid-column: var(--img-col-start, auto) / span var(--img-span, 3);
      align-self: start;
    }
  }
/* END_BLOCK:_gg-ed-col */

/* START_BLOCK:_gg-editorial-col (INDEX:92) */
/* 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);
    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:93) */
/* 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:94) */
.gg-ed-divider {
    grid-column: 1 / -1;
  }

  /* The shared snippet already adds margin-block-end:12px; in the editorial
     grid the row flex-gap (--gg-it-row-gap, ~48px) would add on top, so negate
     it down to a tight 20px gap below the rule. */
  .gg-ed-divider .gg-section-divider {
    margin-block-end: calc(var(--gg-space-md) - var(--gg-it-row-gap, 48px));
  }
/* END_BLOCK:_gg-editorial-divider */

/* START_BLOCK:_gg-editorial-group (INDEX:95) */
/* 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(--gap-sm);
    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:96) */
/* The FIGURE is the grid child: it carries the column placement and (optional)
     sticky, and stacks the rounded image above its caption. */
  .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:97) */
/* 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
     (--gap-sm = the page'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(--gap-sm);
    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(--gap-sm);
    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(--gap-sm)) / 12)
      + (var(--ed-cols, 12) - 1) * var(--gap-sm)
    );
    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) {
    .gg-ed-row--split {
      flex-direction: column;
      align-items: flex-start;
      /* 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:98) */
/* 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;
    gap: var(--gg-space-sm);
    max-width: min(var(--ed-text-measure, 450px), 100%);
    min-width: min(var(--ed-text-measure, 450px), 100%);
  }

  .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;
  }
/* END_BLOCK:_gg-editorial-text */

/* START_BLOCK:_header-logo (INDEX:101) */
.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:102) */
.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:105) */
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:109) */
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:112) */
/* 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-orange-dark);
  }
/* END_BLOCK:_product-card-gallery */

/* START_BLOCK:_product-details (INDEX:115) */
/* 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 compact product title — left-aligned, sits above the buy block. */
  .gg-product-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 16px;
  }

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

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

  .gg-product-title__headline {
    margin: 0;
    font-family: var(--gg-font);
    font-size: 20px;
    line-height: 1.3;
    font-weight: var(--gg-weight-medium);
    letter-spacing: 0;
    color: var(--gg-black);
    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);
    }
  }


  .gg-product-title__description {
    max-width: 350px;
    font-family: var(--gg-font);
    font-size: 14px;
    line-height: 16.5px;
    font-weight: var(--gg-weight-regular);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: 0;
  }

  /* 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:120) */
.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:121) */
.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:122) */
/* --- 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 --- repointed to the LOCKED shared body spec (bean ged4):
     14px / lh 16.5px / regular 400 / ls default / --gg-font, matching
     snippets/gg-text-styles.liquid .gg-text__body (kills drift vs the old
     lh 1.45). 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: 14px;
    line-height: 16.5px;
    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:123) */
.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:124) */
.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:125) */
.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:128) */
/* ── 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;
    display: flex;
    gap: var(--gg-space-sm);
    align-items: center;
    padding: var(--gg-space-sm);
    background-color: var(--gg-gray-light);
    border-radius: 0;
    opacity: 0;
    pointer-events: none;
  }

  .buy-buttons-block .gg-atc-banner__thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--gg-radius-card);
    background: transparent;
  }

  .buy-buttons-block .gg-atc-banner__text {
    display: flex;
    flex-direction: column;
    min-width: 0; /* allow title to truncate */
  }

  .buy-buttons-block .gg-atc-banner__eyebrow {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
  }

  .buy-buttons-block .gg-atc-banner__brand,
  .buy-buttons-block .gg-atc-banner__title {
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .buy-buttons-block .gg-atc-banner__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Full choreography in one keyframe — 4s = 0.5s in · 3s hold · 0.5s out.
     Rises (translateY up) into place, holds, then dissolves with a slight zoom. */
  .buy-buttons-block .gg-atc-banner.is-visible {
    animation: gg-atc-banner-in 4s both;
  }

  @keyframes gg-atc-banner-in {
    0% {
      opacity: 0;
      transform: translateY(8px) scale(1);
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    12.5% {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation-timing-function: linear;
    }
    87.5% {
      opacity: 1;
      transform: translateY(0) scale(1);
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    100% {
      opacity: 0;
      transform: translateY(0) scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .buy-buttons-block .gg-atc-banner.is-visible {
      animation: gg-atc-banner-fade 4s both;
    }

    @keyframes gg-atc-banner-fade {
      0%   { opacity: 0; }
      10%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { 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:131) */
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:132) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:133) */
.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:135) */
.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:137) */
.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: 2px;      /* between entries within a group */
    --gg-facet-group-gap: 24px;   /* between filter groups */
    --gg-facet-gap-sm: 8px;       /* box↔label, header↔values */
  }

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

  /* Group header — clickable accordion toggle */
  .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-md);
    font-weight: var(--gg-weight-medium);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    padding-block: 0 var(--gg-space-xs);
    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;
  }

  /* No caret in the GreenGlam editorial accordion — the label + rule is the
     control; open/closed is read from the panel contents. */
  .facets--vertical .facets__summary .icon-caret {
    display: none;
  }

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

  /* ── Active-category cue ──────────────────────────────────────────────────
     With the group dividers gone, the only "this category is filtering" signal
     is an UNDERLINE on the category HEADER (not the individual value rows):
       • filter groups → underline when any value input is checked
         (`.facets__inputs :checked`);
       • Sort → the radio is ALWAYS checked, so :checked can't mean "active";
         underline only when a NON-DEFAULT order is applied, flagged by the
         `.facets__panel--sorted` class set in snippets/sorting.liquid.
     Thin underline (matches the old divider weight), header-only. */
  .facets--vertical .facets__panel:has(.facets__inputs :checked) .facets__label,
  .facets--vertical .facets__panel--sorted .facets__label {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: var(--gg-divider-width, 1px);
  }

  /* ── 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-gap-sm);
    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, tight rhythm under the rule ── */
  .facets--vertical .facets__inputs-wrapper {
    margin-block: var(--gg-facet-gap-sm) 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;
  }

  /* Spacing between groups */
  .facets--vertical .facets__inputs {
    gap: var(--gg-facet-group-gap);
  }

  /* 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:140) */
.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-quote (INDEX:141) */
.gg-brand-quote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gg-space-sm);
    text-align: left;
  }

  .gg-brand-quote__text {
    font-family: var(--gg-font);
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    margin: 0;
    padding: 0;
    border: none;
  }

  /* Meta / secondary role — matches .gg-meta */
  .gg-brand-quote__attribution {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-regular);
    line-height: 1.4;
    color: var(--gg-gray-dark);
    letter-spacing: var(--gg-tracking-default);
    margin: 0;
  }
/* END_BLOCK:gg-brand-quote */

/* START_BLOCK:gg-cta-button (INDEX:142) */
/* 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-ed-image (INDEX:144) */
.gg-ed__figure { margin: 0; }

  .gg-ed__img-frame {
    overflow: hidden;
    border-radius: var(--img-radius, 0);
  }

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

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

  .gg-ed__img-link { display: block; }

  /* Caption = descriptive meta text — sits in the 12px meta/fine-print tier
     (price, review meta), not the 13px UI-chrome tier (CTAs, badges). */
  .gg-ed__caption {
    margin-top: var(--gg-space-sm);
    font-family: var(--gg-font, var(--font-body--family));
    font-size: 12px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
  }
/* END_BLOCK:gg-ed-image */

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

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

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

  /* 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); /* 20 — group → group */
    /* 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__group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

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

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

  .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: CONTAINER-query driven ──
     This block sits in a column ~58% of the viewport (the PDP title takes the
     left), so a VIEWPORT breakpoint misjudges the real space — at "tablet" the
     7-track grid starved the overview and the score wrapped mid-word. We query
     the block's OWN width instead.
       • Default (narrow) = STACKED: the preview drops UNDER the overview so both
         get full width on small/medium.
       • ≥560px container = side-by-side (overview sized to content, preview takes
         the rest), equal height so the actions pin to the preview's bottom. */
  /* 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 = the ORIGINAL side-by-side, byte-for-byte (repeat(7,1fr), overview
     col6–7, preview col8–12, same gap + caps). Only the <1024 zone now stacks. */
  @media (min-width: 1024px) {
    .gg-reviews {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      column-gap: var(--gap-sm);
      align-items: start; /* items size to own content — overview does NOT stretch to the preview */
    }
    .gg-reviews__overview {
      grid-column: 1 / 3; /* col6–7 */
      grid-row: 1;
      max-width: 220px; /* fixed text column — "4.8 Bewertung" stays on one line */
    }
    .gg-reviews__preview {
      grid-column: 3 / -1; /* col8–12 */
      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);
  }

  .gg-reviews__rating {
    font-family: var(--gg-font);
    font-size: var(--gg-text-2xl);
    line-height: var(--gg-text-2xl--lh);
    letter-spacing: var(--gg-tracking-title);
    color: var(--gg-black);
    margin: 0;
    white-space: nowrap; /* never break "4.8 Bewertung" mid-word */
  }

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

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

  /* ── Empty state: a short, calm label (replaces the broken "– Bewertung") ── */
  .gg-reviews__rating--empty {
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    font-weight: var(--gg-weight-regular);
    color: var(--gg-gray-dark);
    white-space: normal;
  }

  .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:149) */
/* 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:151) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:152) */
.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:154) */
.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:155) */
.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:157) */
.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:158) */
.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:159) */
.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:160) */
.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:162) */
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:164) */
.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:165) */
.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:168) */
.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:170) */
.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:171) */
/* 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:172) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

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

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

/* START_SNIPPET:bento-grid (INDEX:178) */
.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:179) */
.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:181) */
.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:182) */
.card-gallery--img-contain .product-media-container.media-fit img {
    object-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:184) */
/* 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);
  }

  .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;
    }
  }
/* END_SNIPPET:cart-products */

/* START_SNIPPET:cart-summary (INDEX:185) */
.cart-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-block: 1px solid var(--color-border);
    padding-block: 0;
    margin-block-start: var(--margin-3xs);
  }

  .cart-actions__divider {
    border-block-start: 1px solid var(--color-border);
  }

  .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-xl);
    width: 100%;
    border-block-start: none;

    &:has(> :first-child:not(.cart-totals__original-container, .cart-totals__container)) {
      padding-block-start: 0;
      border-block-start: none;
    }

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

  .cart-totals__original-container,
  .cart-totals__original-container * {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total {
    align-items: baseline;
    font-weight: var(--font-weight-bold);
  }

  .cart-totals__total-label {
    font-size: var(--cart-font-size--sm);
  }

  .cart-totals__total-value {
    font-size: var(--cart-font-size--xl);

    @media screen and (max-width: 749px) {
      font-size: var(--font-size--lg);
    }
  }

  .cart-totals__installments {
    color: var(--color-foreground);
    font-size: var(--font-size--2xs);
  }

  .cart-note {
    width: 100%;
  }

  @starting-style {
    .cart-note[open-by-default-on-desktop][open-by-default-on-mobile] .details-content {
      block-size: auto;
      opacity: 1;
      overflow-y: visible;
    }
  }

  .cart-note__inner {
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-note__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-note__summary:hover {
    color: rgb(var(--color-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);
    }
  }

  .cart-discount__input {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    border-style: solid;
    border-radius: var(--style-border-radius-inputs);
    padding: var(--padding-sm) var(--padding-md);
    height: 100%;
    flex-grow: 1;
    min-width: 0;
    font-size: var(--font-size--sm);
  }

  .cart-discount__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__pill-code {
    overflow: hidden;
    max-width: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }

  .cart-discount {
    width: 100%;
  }

  .cart-discount__codes {
    display: none;
    gap: var(--padding-xs);
    flex-wrap: wrap;
    list-style: none;
    padding-inline: 0;
    margin: 0;
  }

  .cart-discount__codes:has(.cart-discount__pill) {
    display: flex;
  }

  .cart-discount__button {
    height: 100%;
  }

  .cart-discount__content {
    height: calc(var(--button-size) + var(--padding-2xs) + var(--padding-sm));
  }

  .cart-discount__pill {
    display: flex;
    color: var(--color-foreground);
    gap: var(--padding-xs);
    align-items: center;
    padding: var(--padding-xs) var(--padding-sm);
    border-radius: var(--style-border-radius-pills);
    background-color: var(--color-input-background);
    text-transform: uppercase;
  }

  .cart-discount__form {
    display: flex;
    gap: var(--padding-md);
    align-items: center;
    height: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  :is(.cart-discount__pill-remove, .cart-discount__pill-remove:hover) {
    --close-icon-opacity: 0.4;

    color: var(--color-foreground);
    background-color: transparent;
    pointer-events: all;
    cursor: pointer;
    height: 100%;
  }

  .cart-discount__error {
    display: flex;
    align-items: center;
    width: 100%;
    padding-block: var(--padding-2xs) var(--padding-sm);
  }

  .cart-discount__error .svg-wrapper {
    flex-shrink: 0;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    margin-inline: var(--margin-3xs) var(--margin-xs);
  }

  .cart-discount__error-text {
    margin-block-start: var(--margin-3xs);
  }

  .cart-discount__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cart-discount__summary:hover {
    color: rgb(var(--color-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: every cart divider draws from --color-border (near-white), which reads
     as stray pale strips on the orange popup. Re-tint the token once for the whole
     cart so all dividers (totals, summary, rows) become a soft dark line together. */
  [data-spa-mode] .cart-totals,
  [data-spa-mode] .cart-drawer__summary,
  [data-spa-mode] .cart-drawer .cart-items__table-row {
    --color-border: rgba(0, 0, 0, 0.18);
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:187) */
.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:189) */
.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:190) */
.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:191) */
.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:192) */
.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:193) */
/* 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:198) */
/* Fixed, top-right, directly under the header cart icon. Sits above the header
     content but is non-interactive (pointer-events: none) so it never blocks clicks. */
  .gg-cart-toast {
    position: fixed;
    top: calc(var(--header-height));
    right: var(--gg-page-pad);
    /* The cart drawer is a dropdown trapped inside the sticky header's stacking context
       (header is position:sticky; z-index:--layer-sticky/8). So to sit UNDER the drawer,
       the toast must sit under that whole context — i.e. below 8. --layer-heightened (4)
       keeps it above page content but below the header + its drawer. */
    z-index: var(--layer-heightened, 4);

    display: flex;
    gap: var(--gg-space-sm);
    align-items: center;
    width: min(320px, calc(100vw - (2 * var(--gg-page-pad))));
    padding: var(--gg-space-sm);
    background-color: var(--gg-gray-light);
    /* Square, shadowless — matches the old PDP "added" banner exactly. */
    border-radius: 0;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }

  /* Fully removed from the a11y tree / layout when idle. */
  .gg-cart-toast[data-hidden='true'] {
    visibility: hidden;
  }

  .gg-cart-toast__thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--gg-radius-card);
    background: transparent;
  }

  .gg-cart-toast__text {
    display: flex;
    flex-direction: column;
    min-width: 0; /* allow title to truncate */
  }

  .gg-cart-toast__eyebrow {
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-gray-dark);
  }

  .gg-cart-toast__brand,
  .gg-cart-toast__title {
    font-size: var(--gg-text-body);
    line-height: var(--gg-text-body--lh);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  .gg-cart-toast__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Full choreography in one keyframe so it's smooth everywhere (no GSAP dependency —
     the toast is global, GSAP isn't loaded on every template). Matches the old banner:
     push down + fade in (expo-out feel), long hold, then dissolve with a slight zoom.

     Total 4s = 0.5s in · 3s hold · 0.5s out. To retune, change only --toast-dur
     and the % stops below scale with it:
       in ends   ≈ 0.5s / 4s  = 12.5%
       hold ends ≈ 3.5s / 4s  = 87.5% */
  .gg-cart-toast.is-visible {
    animation: gg-cart-toast-in 4s both;
  }

  @keyframes gg-cart-toast-in {
    0% {
      opacity: 0;
      transform: translateY(-8px) scale(1);
      /* decelerate into place — expo-out feel, like the old banner */
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }
    12.5% {
      /* ≈0.5s — settled, fully visible */
      opacity: 1;
      transform: translateY(0) scale(1);
      animation-timing-function: linear; /* steady hold */
    }
    87.5% {
      /* hold until ≈3.5s */
      opacity: 1;
      transform: translateY(0) scale(1);
      /* ease the dissolve in and out */
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    100% {
      opacity: 0;
      transform: translateY(0) scale(1.04);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gg-cart-toast.is-visible {
      animation: gg-cart-toast-fade 4s both;
    }

    @keyframes gg-cart-toast-fade {
      0%   { opacity: 0; transform: none; }
      10%  { opacity: 1; transform: none; }
      85%  { opacity: 1; transform: none; }
      100% { opacity: 0; transform: none; }
    }
  }
/* END_SNIPPET:gg-cart-toast */

/* START_SNIPPET:gg-empty-state (INDEX:199) */
.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;
  }
/* END_SNIPPET:gg-empty-state */

/* START_SNIPPET:gg-eyebrow-label (INDEX:200) */
.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-pc-styles (INDEX:202) */
/* ── 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. Mixed row
     gaps come from adjacent-sibling top-margins (NOT a container gap) so an absent
     type/brand row leaves NO residual gap. */
  .gg-pc-info {
    display: flex;
    flex-direction: column;
    gap: var(--gg-pc-row-gap);          /* 8px uniform between rows */
    margin-top: var(--gg-pc-image-gap); /* 14px image → info */
  }

  /* 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 flex row gap. */
  .gg-pc-info__price {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Swatch dots are a wrapper-level sibling below .gg-pc-info; give them the same
     8px rhythm as the rows. */
  .gg-pc-swatches { margin-top: var(--gg-pc-row-gap); }

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

    /* Cap the product-list section header to the carousel track width so
     * space-between aligns "View all" with the carousel's right edge, not the viewport. */
    .gg-pc-section:not(.gg-pc-grid-inset) .section-resource-list__header > * {
      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:203) */
/* ── 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:205) */
/* ── 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-section-divider (INDEX:207) */
.gg-section-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body--family);
    font-weight: var(--gg-weight-medium);
    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);
    /* Spacing to the content below. Standalone callers (Brand, More Info,
       Quickadd) use this default; the _gg-divider block zeroes it so the
       section's own gap is the single source of spacing (no double gap). */
    margin-block-end: var(--gg-section-divider-gap, 0px);
  }

  /* "View all" sits at the right end of the divider row, same size/weight as the
     label so the two read as one rule. */
  .gg-section-divider__link {
    font: inherit;
    letter-spacing: inherit;
    color: var(--gg-black);
    text-decoration: none;
  }

  .gg-section-divider__link:hover {
    text-decoration: underline;
  }
/* END_SNIPPET:gg-section-divider */

/* START_SNIPPET:gg-shop-nav-styles (INDEX:208) */
/* ════════════════════════════════════════════════════════════════════
     GG EDITORIAL SHOP NAV  (bean sed2 → 5jk5 divider remap)
     12-col edge-to-edge grid (same recipe gg-pdp-info applies to .section).
     Base state: static Kategorien label + category list FIXED at col1;
     [Filter | Suche] toggle pair at col5 with the search field below it.
     Filter-open state (.gg-lookup--filters-open, JS-toggled): Filter facets
     at col5–6, the pair splits (Filter col5 / Suche col7), search slides to
     col7; the category column never moves.
     ════════════════════════════════════════════════════════════════════ */
  .gg-shop-nav {
    /* Breathing room before the collection header / product grid (was too tight) */
    margin-block-end: var(--gg-space-lg);
  }

  /* Mobile: flex column so the parts can be reordered. The divider COLLAPSES
     into TWO rules (single-stack makes one row of labels nonsensical): the
     [Filter | Suche] toggle bar over the search field, and a "Kategorien"
     label over the category block.

     display:contents on the divider promotes its two children (.tabs--center
     and .label--kategorien) to direct flex items of .gg-shop-nav, so each can
     take its own order + its own bottom rule. The divider element stays in the
     DOM, so the JS click delegation bound to .gg-shop-nav__divider still works
     (events bubble through a display:contents node). Final order:
       toggle bar → search field → Filter facets → Kategorien label → category list */
  @media screen and (max-width: 749px) {
    .gg-shop-nav {
      display: flex;
      flex-direction: column;
    }
    .gg-shop-nav__tabs--center      { order: 0; }
    .gg-shop-nav__suche             { order: 1; }
    .gg-shop-nav__filter            { order: 2; }
    .gg-shop-nav__label--kategorien { order: 3; }
    .gg-shop-nav__kategorien        { order: 4; }

    /* Each promoted group becomes its own divider rule over its block.
       Scoped under .gg-shop-nav (specificity 0,2,0) so the border-bottom beats
       the base .gg-shop-nav__tab { border: 0 } reset (0,1,0) that comes later
       in source — otherwise the toggle bar loses its rule. */
    .gg-shop-nav .gg-shop-nav__tabs--center,
    .gg-shop-nav .gg-shop-nav__label--kategorien {
      display: flex;
      align-items: end;
      padding-block-end: var(--gg-space-xs);
      border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
      margin-block-end: var(--gg-space-md);
    }
  }

  @media screen and (min-width: 750px) {
    .gg-shop-nav {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--gap-sm);
      align-items: start;
    }
  }

  /* ── Divider Navigation: full-width rule carrying the three labels ──
     Mirrors the PDP product-information__top-divider exactly (12-col grid,
     align-items:end, gg-space-xs padding, gg-divider-width hairline) so the
     Shop rule sits at the same height/weight as the PDP one. The Suche label
     is placed over the search-field column so it aligns with the input. */
  .gg-shop-nav__divider {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
    margin-block-end: var(--gg-space-md);
  }

  /* Mobile: the divider becomes a pass-through (display:contents) so its two
     children act as the two separate divider rules — see the reorder block
     above. Placed AFTER the base rule so it wins on source order. */
  @media screen and (max-width: 749px) {
    .gg-shop-nav__divider { display: contents; }
  }

  @media screen and (min-width: 750px) {
    .gg-shop-nav__divider {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--gap-sm);
    }
    /* Static Kategorien label fixed over the category column (col1) */
    .gg-shop-nav__label--kategorien {
      grid-column: 1 / 3;
      justify-self: start;
    }
    /* [Filter | Suche] toggle pair over the search-field column (col5) */
    .gg-shop-nav__tabs--center { grid-column: 5 / -1; }

    /* When Filter opens, promote the pair to direct grid items so each label
       sits over its own content: Filter stays at col5, Suche slides to col7
       with its field. Same display:contents trick the mobile divider uses. */
    .gg-lookup--filters-open .gg-shop-nav__tabs--center { display: contents; }
    .gg-lookup--filters-open .gg-shop-nav__tab--filter {
      grid-column: 5;
      justify-self: start;
    }
    .gg-lookup--filters-open .gg-shop-nav__tab--suche {
      grid-column: 7 / -1;
      justify-self: start;
    }
  }

  .gg-shop-nav__tabs--center {
    display: flex;
    gap: var(--gg-space-md);
  }

  .gg-shop-nav__tab {
    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-gray-dark);           /* inactive = dark grey */
    transition: color var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  /* Suche is the default-active tab (search is the resting state); Filter
     goes active when the panel opens. */
  .gg-shop-nav__tab.is-active {
    color: var(--gg-black);
  }

  /* Static, non-interactive section header over the category column. Not a
     .gg-shop-nav__tab, so it inherits none of the tab reset/hover rules. */
  .gg-shop-nav__label--kategorien {
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    font-weight: var(--gg-weight-medium);
    color: var(--gg-black);
    letter-spacing: var(--gg-tracking-default);
    cursor: default;
  }

  .gg-lookup--filters-open .gg-shop-nav__tab--filter { color: var(--gg-black); }
  .gg-lookup--filters-open .gg-shop-nav__tab--suche { color: var(--gg-gray-dark); }

  /* ── Kategorien column: vertical 32px Key-Tags type ──
     Mobile (base): full width, no cap. Desktop: capped so links don't stretch
     across the grid track (see the min-width:750 block). */
  .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;
  }

  @media screen and (min-width: 750px) {
    .gg-shop-nav__kategorien {
      grid-column: 1 / 3;
      grid-row: 2;
      /* Cap content width within the track; left-aligned. Desktop only —
         on mobile the column is full-width. */
      max-width: var(--gg-shop-cat-max);
    }
  }

  .gg-shop-nav__cat {
    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);
  }

  /* When a collection is active, dim the rest to mid-grey (Figma node-2) */
  .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);
  }

  .gg-shop-nav__cat--active { color: var(--gg-black); }

  .gg-shop-nav__cat:hover { color: var(--gg-gray-dark); }

  /* ── Filter column: hidden in base, shown at col1 when Filter tab open ── */
  .gg-shop-nav__filter {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .gg-shop-nav__filter {
      grid-column: 5 / 7;
      grid-row: 2;
    }
    .gg-lookup--filters-open .gg-shop-nav__filter {
      display: block;
    }
  }

  /* The vertical facets block defaults to display:none until ≥750px in Horizon. */
  .gg-shop-nav__filter .facets-block-wrapper--vertical {
    margin: 0;
  }

  /* Desktop only: keep filter rows + price fields readable when the grid track
     is narrow (min-width floor). No max — the filter content may fill its track.
     On mobile the column is full-width, so no min — it'd fight the stacked layout. */
  @media screen and (min-width: 750px) {
    .gg-shop-nav__filter .facets-block-wrapper--vertical {
      min-width: var(--gg-shop-filter-min);
    }
  }

  /* ── Suche column: right side, slides further right when Filter opens ── */
  @media screen and (min-width: 750px) {
    .gg-shop-nav__suche {
      grid-column: 5 / -1;
      grid-row: 2;
      /* Vertically centered against the Kategorien column height (per Figma) —
         overrides the row's align-items:start so the field floats to the middle
         of the tall category list rather than top-aligning. */
      align-self: center;
    }
    .gg-lookup--filters-open .gg-shop-nav__suche {
      grid-column: 7 / -1;
    }
  }

  /* ── Mid tier (750–1219px), Filter OPEN: not enough horizontal room for
     the facets + search side by side to the right of the fixed category
     column, so Filter widens to fill cols 5→end and Suche drops to its own
     full-width row below. Category stays fixed at col1 (no override).
     (Above 1220px the canonical editorial grid applies.) ── */
  @media screen and (min-width: 750px) and (max-width: 1219px) {
    .gg-lookup--filters-open .gg-shop-nav__filter {
      grid-column: 5 / -1;
      grid-row: 2;
    }
    .gg-lookup--filters-open .gg-shop-nav__suche {
      grid-column: 1 / -1;
      grid-row: 3;
      margin-block-start: var(--gg-space-md);
    }
  }

  /* ── Mobile (≤749px): columns stack; Filter shows the SAME inline facet
     column full-width (no drawer). Horizon hides .facets--vertical below 750px
     and routes to a drawer — we standardize on the inline column everywhere,
     so override that here and suppress the mobile drawer chrome. ── */
  @media screen and (max-width: 749px) {
    /* Even gap between every stacked part (DOM order: filter → kategorien →
       suche). Filter only takes part in the stack when open, so gate its gap on
       the open state — otherwise display:none leaves no stray margin. */
    .gg-lookup--filters-open .gg-shop-nav__filter,
    .gg-shop-nav__kategorien {
      margin-block-end: var(--gg-space-lg);
    }
    /* Extra breathing room below the search field before the Filter/Kategorien
       divider (single-stack reads tight at md). */
    .gg-shop-nav__suche { margin-block-end: var(--gg-space-lg); }
    .gg-lookup--filters-open .gg-shop-nav__filter { display: block; }

    /* Taller tap target on mobile — the desktop field is intentionally thin. */
    .gg-shop-nav__suche .gg-lookup__input { padding-block: 8px; }

    /* Show the vertical facet column inline (Horizon defaults it to none <750) */
    .gg-shop-nav__filter .facets--vertical {
      display: block;
      position: static;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }

    /* Suppress the mobile "Show filters" toggle bar — no drawer in our model */
    .gg-shop-nav__filter .facets-toggle {
      display: none;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     GG SEARCH FIELD — newsletter underline style  (bean sed3)
     White/transparent field, single black underline (mirrors the
     email-signup --underline variant), no box, no radius. The predictive
     search JS binds to .gg-lookup__input — markup/contract unchanged.
     ════════════════════════════════════════════════════════════════════ */
  .gg-lookup__form { width: 100%; }

  .gg-lookup__search-wrap {
    position: relative;
    width: 100%;
    /* the underline — single 1px hairline, matches the section dividers */
    box-shadow: 0 1px 0 var(--gg-black);
    transition: box-shadow var(--hover-transition-duration, 0.2s) var(--hover-transition-timing, ease);
  }

  .gg-lookup__search-wrap:focus-within {
    box-shadow: 0 var(--gg-divider-width) 0 var(--gg-black);
  }

  .gg-lookup__input {
    width: 100%;
    padding: 3px 5px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);          /* 12px — smaller search/placeholder */
    font-weight: var(--gg-weight-light);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
    -webkit-appearance: none;
  }

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

  .gg-lookup__input:focus-visible { outline: none; }

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

  /* Submit icon hidden — search is predictive/on-type (matches prior behavior) */
  .gg-lookup__submit { display: none; }

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

  .gg-lookup__ai-answer { display: none; }
  .gg-lookup__ai-answer[visible] { display: block; }
/* END_SNIPPET:gg-shop-nav-styles */

/* START_SNIPPET:gg-text-styles (INDEX:209) */
.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 IMAGE+TEXT SYSTEM — LOCKED type (bean ged1)
     Byte-matched from sections/gg-brand.liquid:93–121 ("those look great").
     Single source for: Text block (_gg-editorial-text), Card-Text body
     (_smart-hero-text), and gg-brand. Do NOT redesign without re-verifying
     gg-brand. These are intentionally hard-pinned (20px / 14px / 16.5px /
     12px) to match the existing Brand section pixel-for-pixel.
     ════════════════════════════════════════════════════════════════════ */
  .gg-text__heading {
    font-family: var(--gg-font);
    font-size: 20px;
    line-height: var(--gg-ed-heading-lh, 1.3);
    font-weight: var(--gg-weight-medium);
    letter-spacing: 0;
    color: var(--gg-black);
    margin: 0;
  }

  .gg-text__body {
    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);
    margin: 0;
  }

  .gg-text__fineprint {
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm); /* 12px */
    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;
  }

  /* Text-heavy "Essay" sections opt into looser leading by adding this class to
     the section root. CSS vars cascade, so every .gg-text__* descendant picks up
     the relaxed line-heights. Sizes stay locked; only leading changes. Sections
     WITHOUT this class fall back to the locked values above (gg-brand + the
     image-led Feature/Gallery/Category trio are unaffected). */
  .gg-image-text--relaxed {
    --gg-ed-heading-lh: var(--gg-ed-relaxed-heading-lh);
    --gg-ed-body-lh: var(--gg-ed-relaxed-body-lh);
    --gg-ed-fineprint-lh: var(--gg-ed-relaxed-fineprint-lh);
  }
/* END_SNIPPET:gg-text-styles */

/* START_SNIPPET:gg-variant-selector (INDEX:210) */
.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-gray-light);
    /* 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:212) */
.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:213) */
.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:214) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:header-actions (INDEX:215) */
.header {
    --account-offset-top: calc(
      var(--header-group-height) + (var(--header-height) * var(--transparent-header-offset-boolean))
    );

    &[data-sticky-state='active'] {
      --account-offset-top: calc(var(--header-height) - 1px);
    }
  }

  .account-button {
    /* Remove the background color from the color scheme, we want to inherit the color of the header */
    background: transparent;
  }

  .account-button__icon,
  .account-button__text {
    color: var(--color-account-icon);
    transition: color var(--header-content-transition-timing);
    -webkit-font-smoothing: antialiased;
  }

  .cart-drawer {
    --cart-drawer-padding: var(--padding-xl) var(--padding-xl);
    --cart-drawer-padding-desktop: var(--padding-xl) var(--padding-2xl);

    @media screen and (min-width: 750px) {
      margin-inline-end: calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .cart-drawer--text {
      display: flex;
      align-items: center;
    }
  }

  .cart-drawer__dialog {
    position: fixed;
    overflow: hidden;
    border-radius: 0;
    width: 100%;
    height: 100%;
    margin: 0 0 0 auto;
    padding: 0;
    border-left: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);

    @media screen and (min-width: 750px) {
      width: var(--sidebar-width);
      max-width: 95vw;
    }
  }

  .cart-drawer__inner {
    height: 100%;
    max-height: calc(100dvh - 100px);
    overflow: hidden;
  }

  /* Focus target on open — never show a ring on the container itself. */
  .cart-drawer__inner:focus,
  .cart-drawer__inner:focus-visible {
    outline: none;
  }

  /* Express wallets are not rendered in the cart (see cart-summary.liquid) — they live on
     Shopify's checkout page instead. No wallet CSS needed here. */

  .cart-drawer__content {
    height: calc(100% - var(--header-height));
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: var(--color-background);
    flex-grow: 1;
    overflow-y: auto;
  }

  .cart-drawer__heading {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: 0;
  }

  .cart-drawer__close-button {
    margin-right: calc(var(--padding-sm) * -1);
    top: var(--margin-sm);

    @media screen and (max-width: 749px) {
      top: var(--margin-2xs);
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: left;
    min-height: auto;
    padding: var(--drawer-padding, var(--gg-space-md));
  }

  .cart-drawer--empty .cart-drawer__heading {
    margin-bottom: var(--margin-md);
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:has(+ .cart-items__nested-line) {
    border-bottom: none;
    margin-bottom: 0;
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
  }

  .cart-drawer__summary {
    --cart-drawer-summary-padding: var(--padding-lg);

    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xl);
    padding: var(--cart-drawer-summary-padding);
    margin-top: auto;
    background-color: var(--color-background);
    /* stylelint-disable-next-line color-named */
    mask-image: linear-gradient(to bottom, transparent, black var(--cart-drawer-summary-padding));

    @media screen and (min-width: 750px) {
      --cart-drawer-summary-padding: var(--padding-2xl);
    }
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__summary {
    position: static;
    mask-image: none;
  }

  .cart-drawer__dialog[cart-summary-sticky='false'] .cart-drawer__items {
    overflow: unset;
  }

  .cart-actions summary {
    padding-inline: 0;
    padding-block: var(--padding-sm);
    line-height: 1.2;
    min-height: var(--minimum-touch-target);
  }

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid 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);
    }
  }

  .cart-drawer__heading--empty {
    display: flex;
    justify-content: center;
  }

  .cart-drawer__items {
    display: flex;
    flex-direction: column;
    padding-inline: var(--cart-drawer-padding);
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer__items .cart-items__table-row {
    padding-bottom: var(--gap-xl);
    border-bottom: var(--style-border-width) solid var(--color-border);
    margin-bottom: var(--gap-xl);
  }

  .cart-drawer__items .cart-items__table-row:last-child {
    border-bottom: none;
    padding-block-end: 0;
    margin-block-end: 0;
  }

  .cart-drawer--empty .cart-drawer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100dvh;
    margin-top: 0;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-drawer__content {
    justify-content: center;
  }

  .cart-drawer__header {
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--cart-drawer-padding);
    border-bottom: var(--style-border-width) solid none;
    position: sticky;
    top: 0;
    z-index: 1;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer--empty .cart-drawer__header {
    justify-content: right;
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-drawer--empty .cart-drawer__heading {
    text-align: center;
  }

  header-actions {
    display: flex;

    @media screen and (max-width: 749px) {
      justify-self: flex-end;
    }
  }

  @media screen and (min-width: 750px) {
    .header-actions--text {
      gap: var(--gap-xl);
    }

    .header-actions__text-style {
      font-size: var(--header-actions-font-size);
      font-family: var(--header-actions-font-family);
      font-weight: var(--header-actions-font-weight);
      text-transform: var(--header-actions-text-case);
    }
  }

  #header-component[data-menu-style='drawer'] header-actions {
    justify-self: flex-end;
  }

  .header__column--right header-actions {
    margin-inline-start: calc(var(--gap-md) * -1);
  }

  .header-actions__cart-icon {
    --cart-bubble-size: 20px;
    --cart-bubble-top: 4.5px;
    --cart-bubble-right: 2.5px;

    position: relative;
  }

  /* Pulse when an item lands in the cart — toggled by the global cart toast
     (assets/gg-cart-toast.js) so it reinforces where the item went. */
  @media (prefers-reduced-motion: no-preference) {
    .header-actions__cart-icon.gg-cart-pulse {
      animation: gg-cart-pulse 0.5s var(--ease-out-cubic, ease-out);
    }
  }

  @keyframes gg-cart-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }

  .header-actions__cart-icon .cart-bubble {
    position: absolute;
    width: var(--cart-bubble-size, 20px);
    top: var(--cart-bubble-top);
    right: var(--cart-bubble-right);
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text.header-actions__cart-icon .cart-bubble {
      position: relative;
      top: 0;
    }
  }

  .cart-drawer__heading .cart-bubble {
    width: fit-content;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

  .cart-drawer__heading .cart-bubble[data-maintain-ratio] {
    width: min(1lh, 22px);
    height: min(1lh, 22px);
  }

  .header-actions__cart-icon .cart-bubble__text,
  .cart-drawer__heading .cart-bubble__text {
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
  }

  .header-actions__cart-icon.header-actions__cart-icon--has-cart svg {
    /* Create donut mask where the cart bubble sits */
    mask: radial-gradient(
      calc(var(--cart-bubble-size) + 2px) at calc(100% - var(--cart-bubble-right)) var(--cart-bubble-top),
      transparent 45.45%,
      #fff 45.45%,
      #fff 100%
    );
  }

  .cart-drawer__heading .cart-bubble__background {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  }

  .cart-drawer__heading .cart-bubble__text {
    color: var(--color-foreground);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }

  .cart-bubble--animating .cart-bubble__background {
    animation: grow var(--animation-speed) var(--animation-easing);
  }

  .cart-bubble--animating .cart-bubble__text {
    --start-y: -1em;
    --start-opacity: 1;
    /* Set initial transform state before animation starts */
    transform: translate(0, var(--start-y, -1em));
    opacity: var(--start-opacity, 1);
    animation: move-and-fade var(--animation-speed) var(--animation-easing);
  }

  cart-icon:has(.cart-bubble__text-count:empty) {
    --cart-bubble-size: 10px;
    --cart-bubble-top: 9px;
    --cart-bubble-right: 9px;

    .svg-wrapper {
      --cart-bubble-top: 4px;
      --cart-bubble-right: 4px;
    }
  }

  @media screen and (min-width: 750px) {
    cart-icon.header-actions__cart-icon--text:has(.cart-bubble__text-count:empty) {
      --cart-bubble-right: 2.5px;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-drawer__close-button {
        view-transition-name: cart-drawer-close-button;
      }

      .cart-items-component {
        view-transition-name: cart-drawer-content;
      }
    }
  }

  :active-view-transition {
    .cart-drawer__header,
    .cart-drawer__content {
      background: transparent;
    }
  }

  ::view-transition-old(cart-drawer-content) {
    transform-origin: 50% 33%;
    animation: cart-contents-old var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  ::view-transition-new(cart-drawer-content) {
    transform-origin: top center;
    animation: cart-contents-new var(--spring-d280-b0-duration) var(--spring-d280-b0-easing) forwards;
  }

  @keyframes cart-contents-old {
    to {
      scale: 0.92;
      opacity: 0;
    }
  }

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
  .header-actions__text {
    display: flex;
    align-items: center;
  }

  @media screen and (min-width: 750px) {
    .header-actions__cart-icon--text {
      display: flex;
      align-items: center;
      gap: var(--gap-xs);
    }

    .header__column--right .header-actions--text {
      margin-inline-start: 0;
    }
  }

  /* ==============================================
     GreenGlam Cart Drawer
     ============================================== */

  /* The cart dialog anchors to the RIGHT PILL (.gg-header__col--right), not to
     cart-drawer-component — so keep this element static (a `position: relative`
     here would intercept the anchor and force the old `right: -15px` fudge). */
  cart-drawer-component {
    position: static;
  }

  /* Reset base theme negative margin (was for full-height right-edge side-drawer alignment) */
  .cart-drawer {
    @media screen and (min-width: 750px) {
      margin-inline-end: 0;
    }
  }

  /* Panel — absolute dropdown anchored to the RIGHT PILL (.gg-header__col--right
     is position:relative), mirroring the Menu panel on the left. right:0 pins it
     flush to the pill's right edge at every breakpoint — no magic offset. */
  .cart-drawer__dialog {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    left: auto;
    bottom: auto;
    margin: 0;

    width: 380px;
    height: auto;
    max-height: calc(100dvh - 120px);
    overflow: hidden;
    border: none;
    border-left: none;
    box-shadow: none;

    background-color: var(--gg-gray-light);
    border-radius: var(--gg-radius-card);
    padding: 0;
    z-index: var(--layer-popover, 300);

    /* Widen to the viewport inset; left edge sits at the pill's right edge minus
       the panel width, so subtracting the inset on both sides keeps it flush. */
    @media screen and (max-width: 1099px) {
      width: calc(100vw - 2 * var(--gg-page-pad));
    }
  }

  /* Shrink-wrap to content; scroll only when content exceeds max-height */
  .cart-drawer__inner {
    height: auto;
    max-height: inherit;
    overflow-y: auto;
  }

  .cart-drawer__content {
    height: auto;
    flex-grow: 0;
  }

  /* Empty state: give the panel enough room to breathe */
  .cart-drawer--empty .cart-drawer__inner {
    height: auto;
    min-height: 220px;
    padding-bottom: 32px;
  }

  /* Transparent backdrop so the page stays visible */
  .cart-drawer__dialog::backdrop {
    background: transparent;
  }

  /* Higher specificity to beat base.css */
  .cart-drawer__dialog.dialog-drawer {
    border-radius: 0px;
  }
  .cart-drawer__dialog.dialog-drawer[open] {
    animation: gg-cart-in 0.15s ease;
  }
  @keyframes gg-cart-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Closing animation — override base's rightward-slide (move-and-fade with --end-x: 100%) */
  @keyframes gg-cart-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-4px); }
  }
  .cart-drawer__dialog.dialog-drawer[open].dialog-closing {
    animation: gg-cart-out 0.15s ease forwards;
  }

  /* Content area — top padding replaces the removed header div gap */
  .cart-drawer__content {
    background-color: var(--gg-gray-light);
    padding-block-start: 22px;
  }

  /* Items area — bottom padding before summary border */
  .cart-drawer .cart-drawer__items {
    padding-block-end: 16px;
  }

  /* ─────────────────────────────────────────────────────────────────────────
     Cart-drawer product row — rebuilt grid.

     Three columns:
       media        — 4:5 thumbnail (white bg, contain, subtle grey overlay)
       content (1fr)— title → brand → variant (top), quantity stepper (bottom-left)
       side  (auto) — line price (top-right), Entfernen (bottom-right)
     Row height = the thumbnail; content & side are flex columns justified
     top↔bottom so the two bottom controls (stepper / Entfernen) share one
     baseline at the thumbnail's bottom edge. Uniform gaps; the row itself spans
     the full dialog width (horizontal inset lives on the row's own padding) so
     its bottom border reads as a FULL-BLEED divider, identical to the summary's.
     ───────────────────────────────────────────────────────────────────────── */
  .cart-drawer .cart-items .cart-items__table-row,
  .cart-drawer .cart-items .cart-items__table-row--full-width-variants {
    --cart-thumb-width: 4.5rem;
    --cart-row-height: calc(var(--cart-thumb-width) * 1.25); /* 4:5 portrait */

    grid-template-columns: var(--cart-thumb-width) minmax(0, 1fr) auto;
    /* Two rows: details (text block) on top, quantity stepper beneath it — each in
       its OWN row so a tall details block (variant + coupon tag) can never overlap
       the stepper. `media` and `side` span both rows. The 1fr top row absorbs slack
       so the stepper stays bottom-aligned with Entfernen; the fixed-height media
       sets the row's min height, and the row grows when details outgrows it. */
    grid-template-rows: 1fr auto;
    grid-template-areas:
      'media content  side'
      'media quantity side';
    column-gap: var(--gap-md);
    row-gap: var(--gap-xs, 4px);
    align-items: stretch;
  }

  /* Full-bleed divider between products: the items container drops its inline
     padding (moved onto the row) so the row — and its bottom border — reach the
     dialog's left and right edges, exactly like .cart-drawer__summary's top border. */
  .cart-drawer .cart-drawer__items {
    padding-inline: 0;

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

  /* Empty state has no product rows to carry the inset, so restore the inline
     padding on the items box itself — otherwise the empty message sits flush to
     the dialog edge. Keyed off the empty-state element (not the `cart-drawer--empty`
     dialog class, which the JS empty-swap leaves stale), so it's reliable however
     the cart was emptied. */
  .cart-drawer .cart-drawer__items:has(.gg-empty-state) {
    padding-inline: var(--cart-drawer-padding);

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  .cart-drawer .cart-items .cart-items__table-row,
  .cart-drawer .cart-items .cart-items__table-row--full-width-variants,
  .cart-drawer__items .cart-items__table-row,
  .cart-drawer .cart-items--dividers .cart-items__table-row {
    padding-inline: var(--cart-drawer-padding);
    padding-block: 0 var(--gap-xl); /* space below content, above the divider */
    margin-bottom: var(--gap-xl);   /* equal space below the divider — line sits centered */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;

    @media screen and (min-width: 750px) {
      padding-inline: var(--cart-drawer-padding-desktop);
    }
  }

  /* First row: no extra top gap (the content area already pads the top). */
  .cart-drawer .cart-items__table:first-child .cart-items__table-row:first-child {
    padding-block-start: 0;
  }

  /* Last row drops its own divider AND bottom gap — the summary's matching top
     border + padding already provide the single line and spacing down to the
     total (avoids a doubled divider and dead space). */
  .cart-drawer .cart-items .cart-items__table-row:last-child,
  .cart-drawer__items .cart-items__table-row:last-child {
    margin-bottom: 0;
    border-bottom: none !important;
  }

  /* 4:5 thumbnail — white surface, image contained (not cropped), subtle grey
     overlay, rounded like the product cards. */
  .cart-drawer .cart-items__media {
    grid-area: media;
    align-self: start;
    width: var(--cart-thumb-width);
    height: var(--cart-row-height);
  }

  .cart-drawer .cart-items__media-container {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: 100%;
    background-color: var(--gg-white, #fff);
    border-radius: var(--gg-radius-card);
    overflow: hidden;
    position: relative;
  }

  /* Subtle grey overlay on top of the image (matches product cards). */
  .cart-drawer .cart-items__media-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.03);
    pointer-events: none;
  }

  .cart-drawer .cart-items__media-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
  }

  /* ── Typography: Inter everywhere in the drawer ──────────────────────────── */
  .cart-drawer .cart-items,
  .cart-drawer .cart-items *,
  .cart-drawer__summary,
  .cart-drawer__summary * {
    font-family: var(--gg-font, 'Inter', sans-serif);
  }

  /* Content column — title → brand → variant, top-anchored. (Base sets the cell
     to `display: contents` in the drawer; we override so it's a real box again.) */
  .cart-drawer .cart-items__details {
    grid-area: content;
    display: flex !important;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    align-self: start;
  }

  /* Tight stack: title and brand share one product-info box — zero their <p>
     margins so they sit on consecutive lines, variant directly beneath. */
  .cart-drawer .cart-items__product-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .cart-drawer .cart-items__product-info p,
  .cart-drawer .cart-items__variants-wrapper p,
  .cart-drawer .cart-items__variants-wrapper dl {
    margin: 0;
  }

  .cart-drawer .cart-items__details > * + * {
    margin-block-start: 1px;
  }

  /* Side column — line price top-right, Entfernen pinned bottom-right. A flex
     column that spans the full row height so the two ends split apart. */
  .cart-drawer .cart-items__price {
    grid-area: side;
    align-self: stretch;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    text-align: end;
    min-width: 0;
    width: auto;
    height: 100%;
  }

  /* Quantity stepper lives in the content column, pinned to the bottom-left so it
     shares a baseline with Entfernen across the row. */
  .cart-drawer .cart-items__quantity {
    grid-area: quantity;
    align-self: end;
    justify-self: start;
    margin: 0;
  }

  .cart-drawer .cart-items__error {
    grid-area: quantity;
    align-self: end;
  }

  /* Product title — single line, truncated with "…" so title + brand + variant
     stay a tidy three-line stack and never crowd the row. */
  .cart-drawer .cart-items__title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--gg-black);
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Brand (vendor) — same size as title, lighter weight, same colour. */
  .cart-drawer .cart-items__details p:not(:has(.cart-items__title)),
  .cart-drawer .cart-items__variants {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--gg-black);
  }

  /* Variant (e.g. shade / size) — same style as brand, sits below it. */
  .cart-drawer .cart-items__variants-wrapper,
  .cart-drawer .cart-items__variants,
  .cart-drawer .cart-items__variants-wrapper * {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--gg-black);
  }

  /* ── Quantity stepper — plain black, semibold, a touch larger than the title.
     No pill background, minimal controls. ──────────────────────────────────── */
  .cart-drawer .cart-items__quantity-controls {
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0;
  }

  .cart-drawer .cart-items__quantity .volume-pricing-info {
    display: none;
  }

  .cart-drawer .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: 0;
  }

  .cart-drawer .cart-items__quantity .quantity-selector {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    box-shadow: none;
    height: auto;
    width: auto;
    padding: 0;
  }

  .cart-drawer .cart-items__quantity .quantity-selector button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: 0;
    color: var(--gg-black);
    cursor: pointer;
  }

  .cart-drawer .cart-items__quantity .quantity-selector button:hover {
    opacity: 0.6;
  }

  /* −/+ glyphs (inline SVG) — black, matched to the number beside them. */
  .cart-drawer .cart-items__quantity .quantity-selector .svg-wrapper {
    width: 13px;
    height: 13px;
    color: var(--gg-black);
  }

  .cart-drawer .cart-items__quantity .quantity-selector .svg-wrapper svg {
    width: 100%;
    height: 100%;
  }

  .cart-drawer .cart-items__quantity .quantity-selector input {
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
    min-width: 1.25rem;
    max-width: 2rem;
    padding: 0;
    text-align: center;
    color: var(--gg-black);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
  }

  /* Unit price (the /100ml measurement under the line total, and the per-item
     unit-price block) — removed; the line price is enough. */
  .cart-drawer .cart-items__price-unit,
  .cart-drawer .cart-items__unit-price-wrapper {
    display: none;
  }

  /* Line price — amount-first ("129,00 €"), top of the side column. */
  .cart-drawer .cart-items__price-value {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.25;
    color: var(--gg-black);
    white-space: nowrap;
  }

  /* ── Entfernen — bottom-right, right-aligned with the price, underlined,
     a smaller increment than the price. ────────────────────────────────────── */
  .cart-drawer .cart-items__remove {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    min-height: 0;
    box-shadow: none;
    justify-content: flex-end;
    text-align: end;
    transition: opacity 0.15s ease;
  }

  /* Kill Horizon's button fill pseudo so hover doesn't paint a black rectangle. */
  .cart-drawer .cart-items__remove::before,
  .cart-drawer .cart-items__remove::after {
    display: none;
  }

  .cart-drawer .cart-items__remove:hover {
    background: none;
    opacity: 0.6;
  }

  .cart-drawer .cart-items__remove-text {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: normal;
    color: var(--gg-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Summary area */
  .cart-drawer__summary {
    background-color: var(--gg-gray-light);
    mask-image: none;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }

  .cart-drawer .cart-totals__original-label,
  .cart-drawer .cart-totals__total-label {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 300;
    font-size: 12px;
    line-height: 1.2;
    color: var(--gg-gray-dark);
  }

  .cart-drawer .cart-totals__total-value {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--gg-black);
  }

  .cart-drawer .cart-totals__tax-note {
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 300;
    font-size: 11px;
    line-height: 1.3;
    color: var(--gg-gray-mid);
    max-width: 250px;
  }

  /* Checkout button — left-aligned pill, matches standard GG pill style.
     Column so the checkout button and the express wallets sit under each other
     (default row made them sit side-by-side and collapsed the wallet container). */
  .cart-drawer .cart__ctas {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .cart-drawer .cart__checkout-button {
    border-radius: var(--gg-radius-chip);
    padding: 0 0px;
    font-family: var(--gg-font, 'Vend Sans', sans-serif);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: var(--gg-tracking-default);
    border: none;
    box-shadow: none;
    width: auto;
    text-decoration: underline;
  }

  /* ─────────────────────────────────────────────────────────────────────
     Spa mode: the cart popup uses the dark-orange colorway so it stands out
     against the now-orange spa page. Contents are re-tinted for contrast.
     Scoped to [data-spa-mode] on <body> → spa-only.
     ───────────────────────────────────────────────────────────────────── */
  [data-spa-mode] .cart-drawer__dialog,
  [data-spa-mode] .cart-drawer__content,
  [data-spa-mode] .cart-drawer__summary {
    background-color: var(--gg-orange-dark);
  }

  /* Separators read as a darker line on orange */
  [data-spa-mode] .cart-drawer .cart-items__table-row {
    border-bottom-color: rgba(0, 0, 0, 0.18) !important;
  }
  [data-spa-mode] .cart-drawer__summary {
    border-top-color: rgba(0, 0, 0, 0.18);
  }

  /* Text: drop muted greys to near-black so they stay legible on orange */
  [data-spa-mode] .cart-drawer .cart-items__title,
  [data-spa-mode] .cart-drawer .cart-totals__total-value {
    color: var(--gg-black);
  }
  [data-spa-mode] .cart-drawer .cart-items__details p:not(:has(.cart-items__title)),
  [data-spa-mode] .cart-drawer .cart-items__variants,
  [data-spa-mode] .cart-drawer .cart-items__unit-price-wrapper,
  [data-spa-mode] .cart-drawer .cart-totals__original-label,
  [data-spa-mode] .cart-drawer .cart-totals__total-label,
  [data-spa-mode] .cart-drawer .cart-totals__tax-note {
    color: rgba(0, 0, 0, 0.72);
  }

  /* Remove (trash) icon: visible against orange */
  [data-spa-mode] .cart-drawer .cart-items__remove {
    color: rgba(0, 0, 0, 0.55);
  }
  [data-spa-mode] .cart-drawer .cart-items__remove:hover {
    color: var(--gg-black);
  }

  /* Drop the focus-outline box on the first item's image link (auto-focused when
     the drawer opens) — it reads as a stray dark rectangle on the orange popup. */
  [data-spa-mode] .cart-drawer .cart-items__media-container:focus-visible,
  [data-spa-mode] .cart-drawer .cart-items__media-container:focus {
    outline: none;
  }

  /* Quantity stepper + checkout CTA stay flat black text in spa mode too — same
     as default. The spa branch only changes the surface tone (orange-dark), it
     never re-introduces pill shapes the default mode flattened. */
  [data-spa-mode] .cart-drawer .quantity-selector button,
  [data-spa-mode] .cart-drawer .quantity-selector input,
  [data-spa-mode] .cart-drawer .cart__checkout-button {
    color: var(--gg-black);
  }
/* END_SNIPPET:header-actions */

/* START_SNIPPET:header-drawer (INDEX:216) */
.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:221) */
.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:224) */
.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:225) */
/* 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:226) */
.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:231) */
.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:232) */
.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:233) */
.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:predictive-search-products-list (INDEX:235) */
.predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

  .recently-viewed-wrapper {
    display: grid;
    grid-template-rows: auto auto;
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top center;
    transform: translateY(0);
  }

  .recently-viewed-wrapper.removing {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  /* Match the field's "Löschen" — underlined text, same size/weight. */
  .predictive-search-results__clear.button-unstyled {
    color: var(--gg-black);
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    line-height: var(--gg-text-sm--lh);
    font-weight: 400;
    letter-spacing: var(--gg-tracking-default);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    margin-left: var(--margin-sm);
    transition: opacity var(--animation-speed-medium) var(--animation-easing);

    &:hover {
      opacity: 0.7;
    }
  }

  .recently-viewed-wrapper.removing .predictive-search-results__card {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .recently-viewed-wrapper > * {
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* No staggered ramp — all result cards fade in together so fast responses
     feel instant rather than trickling in. */
  .predictive-search-results__wrapper-products .predictive-search-results__card {
    animation-delay: 0ms;
  }
/* END_SNIPPET:predictive-search-products-list */

/* START_SNIPPET:predictive-search-resource-carousel (INDEX:236) */
.predictive-search-results__wrapper {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block-end: var(--padding-sm);
    padding-inline: 0;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--padding-xl);
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-results__wrapper slideshow-slides {
    --gutter-slide-width: var(--padding-xl);

    /* Add padding to prevent hover animations from being clipped in slideshow
       15px accommodates:
       - Scale effect (9px on each side from 1.03 scale)
       - Lift effect (4px upward movement)
       - Shadow (15px spread with -5px offset)
       Using 16px for better alignment with our spacing scale */
    padding-block: var(--padding-xl);
    margin-block: calc(-1 * var(--padding-xl));
    gap: var(--gap-md);
  }

  .predictive-search-results__resource-header {
    display: flex;
    padding-inline: var(--padding-xl);
    justify-content: space-between;
    align-items: center;
    height: 32px;
  }

  .predictive-search-results__resource-header .svg-wrapper {
    width: var(--icon-size-xs);
  }

  .predictive-search-results__wrapper-products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-block-end: var(--padding-sm);
    gap: var(--gap-md);
    transition: height var(--animation-speed-medium) var(--animation-easing);

    @container (min-width: 550px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .predictive-search-results__wrapper-products:last-child {
    padding-block-end: var(--padding-lg);

    @media screen and (min-width: 750px) {
      padding-block-end: var(--padding-sm);
    }
  }

  .predictive-search-results__resource-header .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header:has(slideshow-controls) .predictive-search-results__title {
    margin-block-end: 0;
  }

  .predictive-search-results__resource-header slideshow-controls {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }
/* END_SNIPPET:predictive-search-resource-carousel */

/* START_SNIPPET:price-filter (INDEX:237) */
/* 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:239) */
.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:240) */
.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:241) */
/* ═══════════════════════════════════════════════════════════════════════════
     PDP 4.1 — 12-Column Grid (GreenGlam standard)
     ═══════════════════════════════════════════════════════════════════════════
     col:  1    2    3    4    5    6    7    8    9   10   11   12
          gutter├── Gallery (2–5) ──┤gutter├── Info Panel (7–11) ──┤gutter

     .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.
     EDGE-TO-EDGE PROTOTYPE: feed --padding-inline (the spacing-style var, so it
     isn't overridden to 0) to give the full-bleed grid a breathing margin off the
     viewport edge. Tune --gg-page-pad. Revert: remove the --padding-inline line. */
  .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));
    gap: var(--gap-sm);
    background-color: var(--gg-cream);
    --padding-inline: var(--gg-page-pad);
  }

  /* Override .section > * { grid-column: 2 } — children span full width by default */
  .product-information > * {
    grid-column: 1 / -1;
  }

  /* ── Two-label top divider: full-width rule, vendor over details (left),
     "Highlights" over media (right). Sub-grids the 12-col parent. ── */
  .product-information__top-divider {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap-sm);
    align-items: end;
    padding-block-end: var(--gg-space-xs);
    border-bottom: var(--gg-divider-width) solid var(--gg-gray-light);
  }

  .product-information__top-label {
    font-family: var(--font-body--family);
    font-weight: var(--gg-weight-medium);
    font-size: var(--gg-text-base);
    letter-spacing: var(--gg-tracking-default);
    color: var(--gg-black);
  }

  /* Vendor always leads at col 1. Highlights aligns to the media column start. */
  .product-information__top-label--vendor { grid-column: 1 / 4; }

  /* Vendor is a link to the brand's Shop page — inherit the label look (no default
     link colour), reveal a subtle underline on hover/focus to signal it's clickable. */
  .product-information__top-label--link {
    color: var(--gg-black);
    text-decoration: none;
    text-underline-offset: 3px;
    transition: opacity 0.15s ease;
    width: fit-content;
  }
  .product-information__top-label--link:hover,
  .product-information__top-label--link:focus-visible {
    text-decoration: underline;
  }

  @media (max-width: 749px) {
    /* Phone: columns stack; show the vendor only, single-column rule. */
    .product-information__top-divider { display: block; }
    .product-information__top-label--highlights { display: none; }
  }

  /* 750–1199px: media starts at col 7. */
  @media (min-width: 750px) {
    .product-information__top-label--highlights { grid-column: 7 / -1; }
  }

  /* ≥1200px: media starts at col 6. */
  @media (min-width: 1200px) {
    .product-information__top-label--highlights { grid-column: 6 / -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%;
  }

  /* EXPLORATORY: divider replaces the per-column media eyebrow labels.
     Hide both eyebrows; the eyebrow-height offset is also zeroed at its
     definition below (search --gg-pdp-eyebrow-h) so details no longer drops to
     the old image line. Revert: restore that calc + remove the divider render. */
  .product-information .gg-pdp-media__eyebrow {
    display: none;
  }

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

    .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: 12-col placement — details LEFT, media RIGHT ──
     750–1199px: 6/6 split. At ~1000px the ≥1200 5:2 media split would leave the
     secondary stack ~140px and only a gutter between the columns — too cramped.
     The media's inner layout stacks in this range (gallery snippet). */
  @media screen and (min-width: 750px) {
    /* Both columns share grid row 1. Without an explicit row, the second source
       item auto-flows to row 2 and drops to the bottom (the bug we hit last swap).
       Pinning both to row 1 keeps them side by side regardless of source order. */
    .product-details {
      grid-column: 1 / 7;
      grid-row: 1;
    }

    .product-information__media {
      grid-column: 7 / -1;
      grid-row: 1;
    }

    /* No media: info panel spans the full edge-to-edge area */
    .product-information__grid.product-information--media-none .product-details {
      grid-column: 1 / span 12;
    }
  }

  /* ── ≥1200px: details takes cols 1–8 (left) capped at 450px and pinned flush
     to the LEFT edge via margin-inline-end:auto; media on the right (cols 8–12). ── */
  @media screen and (min-width: 1200px) {
    .product-details {
      grid-column: 1 / 6;
      grid-row: 1;
      /* FIXED width, not max-width: max-width let the column collapse to its
         content (330px when all accordions are closed). A fixed 450px holds the
         panel constant regardless of accordion state. */
      width: 450px;
      /* Narrower than the track → pin it to the left edge of its column,
         mirroring how the media column is flush to the right edge. */
      margin-inline-end: auto;
      /* Align the details content with the top edge of the IMAGES, not the media
         column's eyebrow label. The eyebrow (line-box + its 10px net gap to the
         media) occupies this much above the first image; pushing details down by
         the same amount lines up the two columns at the image line. */
      padding-block-start: var(--gg-pdp-eyebrow-h);
    }

    .product-information__media {
      grid-column: 6 / -1;
      grid-row: 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;
  }

  /* GreenGlam: header is always sticky — single source of truth for the
     sticky top offset, shared by both columns below. */
  .product-information {
    --sticky-header-offset: calc(var(--header-height) + 20px);
    /* Vertical space the media-column eyebrow occupies above the first image:
       its line-box (base text size × line-height) + the 10px net gap to the media.
       Used to drop the details column to the image line (§4b).
       EXPLORATORY: zeroed while the eyebrows are hidden (divider above replaces
       them). Revert: restore the calc below.
       calc(var(--gg-text-base) * var(--gg-text-base--lh) + var(--gg-space-sm)) */
    --gg-pdp-eyebrow-h: 0px;
  }

  /* 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. */
  @media screen and (min-width: 750px) {
    .product-information__media,
    .product-details {
      position: sticky;
      top: var(--sticky-header-offset);
      align-self: start;
    }
  }

  /* ≥1200px: all three stick, and they self-balance via the existing dual-sticky
     model (shorter column pins, taller scrolls) PLUS the inner main-slot sticky:
     • Short secondary stack → media column is the shorter column, so it pins as a
       unit; the inner main-slot sticky is a harmless no-op. Both columns pinned.
     • Tall secondary stack → media column is taller, so it scrolls with the page
       (you can reach the low secondaries); the main slot, sticky within the media
       column's box, stays pinned as that stack scrolls past. Details still pins.
     No height cap / overflow needed — sticky-in-sticky handles both cases. The
     inner sticky lives on .gg-pdp-media__main-col (gallery snippet). */

  /* ── 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: reduce section top padding and recommendations bottom gap ── */
  @media screen and (max-width: 749px) {
    /* Two-class specificity beats .spacing-style alone — no !important needed */
    .product-information.spacing-style {
      padding-block-start: 16px;
    }

    /* 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:242) */
@media screen and (min-width: 750px) {
    /* GG: desktop-carousel media is square + contained (fit, not crop), matching
       product cards. Whole product always visible, letterboxed on white. Scoped to
       the slideshow so the .gg-pdp-media slot layout keeps its own rules below. */
    media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *) {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      background: #fff;
    }

    media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *) .product-media {
      aspect-ratio: 1 / 1;
    }

    media-gallery slideshow-component .product-media-container:not(.dialog-zoomed-gallery *) :is(img, .deferred-media__poster-image) {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  }

  /* ════ GG PDP media: main/secondary slot layout (Figma 2958:189) ════ */

  /* <750px: the swipe carousel owns mobile — slot layout hidden */
  @media screen and (max-width: 749px) {
    .gg-pdp-media {
      display: none;
    }
  }

  /* 750–1199px: stacked — main visually first (full media width), secondary
     slots 2-up below. DOM keeps stack-col first (desktop order); CSS reorders. */
  @media screen and (min-width: 750px) {
    .gg-pdp-media {
      display: flex;
      flex-direction: column;
      gap: var(--gap-sm);
    }

    .gg-pdp-media__main-col {
      order: -1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-sm);
    }

    .gg-pdp-media__stack-col {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--gap-sm);
    }

    .gg-pdp-media__stack-col > .gg-pdp-media__eyebrow {
      grid-column: 1 / -1;
    }

    /* ── Slots: presentation lives on the SLOT, not the image, so a swapped
       media adopts the slot's framing (Full View vs Click Images). Secondary
       slots are square; the main slot takes the first image's real ratio. ── */
    .gg-pdp-media__slot {
      position: relative;
      overflow: hidden;
      background: var(--gg-white);
      border-radius: 0;
    }

    .gg-pdp-media__slot .product-media {
      width: 100%;
      height: 100%;
    }

    /* Super-light gray tint over every media slot (matches the quickadd image). */
    .gg-pdp-media__slot::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--gg-gray-lightest);
      mix-blend-mode: multiply;
      pointer-events: none;
      z-index: 1;
    }

    /* Main slot: real aspect ratio of the first image (no letterbox/crop).
       --gg-main-ratio is set inline on the slot; falls back to square. */
    .gg-pdp-media__slot--main {
      aspect-ratio: var(--gg-main-ratio, 1 / 1);
      border-radius: 0;
    }

    .gg-pdp-media__slot--main :is(img.product-media__image, .deferred-media__poster-image) {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }

    .gg-pdp-media__slot--secondary {
      aspect-ratio: 1 / 1;
      border-radius: 0;
      cursor: pointer;
    }

    .gg-pdp-media__slot--secondary :is(img.product-media__image, .deferred-media__poster-image) {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    .gg-pdp-media__slot--secondary:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }

    /* ── Eyebrow labels: dot marker + two-tone text. The number prefix and the
       dot stay black; the descriptive words ("Click Images" / "Product View")
       are dark grey — so the base color is grey and prefix/dot opt back to black.
       Pulled close to the images: the parent column gap (--gap-sm) would otherwise
       leave a full row-gap below the eyebrow; a negative bottom margin nets it
       down to --gg-space-sm (10px) so the label sits just above the media. ── */
    .gg-pdp-media__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      margin-block-end: calc(var(--gg-space-sm) - var(--gap-sm));
      font-size: var(--gg-text-base);
      font-weight: var(--gg-weight-regular);
      letter-spacing: var(--gg-tracking-default);
      color: var(--gg-gray-dark);
    }

    .gg-pdp-media__eyebrow .gg-dot-marker {
      color: var(--gg-black);
    }

    .gg-pdp-media__eyebrow .gg-dot-marker svg {
      width: 10px;
      height: 8px;
    }

    .gg-pdp-media__eyebrow-prefix {
      color: var(--gg-black);
    }

    .gg-pdp-media__eyebrow--right {
      align-self: flex-end;
      text-align: right;
    }
  }

  /* ≥1200px: 2:5 split — inner 7 tracks with the page-grid gap, so the stack
     col aligns with page cols 6–7 and the main slot with cols 8–12. */
  @media screen and (min-width: 1200px) {
    .gg-pdp-media {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      align-items: start;
    }

    .gg-pdp-media__stack-col {
      grid-column: 7 / -1;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-sm);
    }

    .gg-pdp-media__main-col {
      grid-column: 1 / 7;
      grid-row: 1;
      order: 0;
    }
  }

  @media screen and (max-width: 749px) {
    /* ── Mobile gallery: square format, cover fill, rounded, gaps ── */
    /* 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 *) {
      aspect-ratio: 1 / 1;
      border-radius: 0; /* Radius experiment — was var(--gg-radius-gallery-md) */
      overflow: hidden;
      background: #fff;
    }

    media-gallery .product-media-container:not(.dialog-zoomed-gallery *) :is(img, .deferred-media__poster-image) {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }

    media-gallery .product-media-container:not(.dialog-zoomed-gallery *) .product-media {
      aspect-ratio: 1 / 1;
    }

    /* ── Mobile thumbnail controls: no own inline padding ──
       Inset is owned by the .product-information section (--gg-page-pad), so zero
       the thumbnails strip's padding-inline — else the controls inset twice
       (section 12px + strip --padding-sm). */
    .media-gallery__mobile-controls {
      --slideshow-thumbnails-padding-inline: 0;
    }

    /* Square the thumbnail corners. --thumbnail-radius is set inline on the
       controls element (slideshow-controls.liquid:70), so override border-radius
       directly rather than via the var. */
    .media-gallery__mobile-controls .slideshow-controls__thumbnails .slideshow-control,
    .media-gallery__mobile-controls .slideshow-controls__thumbnails .slideshow-control img {
      border-radius: 0;
    }

    /* ── Mobile thumbnail selection indicator: thin square black outline ── */
    .media-gallery__mobile-controls .slideshow-controls__thumbnails .slideshow-control:is([aria-selected='true']) {
      border: 1px solid var(--gg-black);
      border-radius: 0;
      outline: none;
    }

  }

  @media screen and (max-width: 749px) {
    .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;
  }

  /* Mobile thumbnails styling */
  @media screen and (max-width: 749px) {
    .media-gallery__mobile-controls[thumbnails] {
      --thumbnail-width: 44px;
    }

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:243) */
.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:244) */
.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:245) */
#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:246) */
/* 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);
    }
  }
/* END_SNIPPET:quick-add */

/* START_SNIPPET:resource-card (INDEX:247) */
.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;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

  .resource-card__media:empty {
    display: none;
  }

  .resource-card__image-placeholder {
    padding: var(--padding-sm);
    font-size: var(--font-size--lg);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    border-radius: var(--resource-card-corner-radius);
    color: var(--color-foreground);
  }

  .resource-card__title {
    margin-block: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .resource-card__title.paragraph {
    line-height: 1.3;
  }

  .resource-card--overlay {
    height: 100%;

    &::before {
      content: '';
      position: absolute;
      inset: 50% 0 0;
      background: var(--gradient-image-overlay);
      border-radius: var(--resource-card-corner-radius);
      pointer-events: none;
      z-index: var(--layer-flat);
    }
  }

  .resource-card--overlay .resource-card__image {
    height: 100%;
  }

  .resource-card--overlay .resource-card__content {
    position: absolute;
    inset: auto 0 0;
    padding: var(--padding-lg) var(--padding-lg) var(--padding-sm);
    z-index: var(--layer-raised);
  }

  .resource-card--overlay .resource-card__title {
    color: var(--color-white);
  }

  /* Collection images */
  .resource-card__image-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2xs);
  }

  .resource-card__collection-image {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--card-corner-radius) - (var(--padding-xs) / 2));
  }

  .resource-card__subtext {
    color: rgb(var(--color-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:248) */
.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-modal (INDEX:253) */
/* Search modal style */
  .search-modal__content {
    /* Floor the top offset so the dialog never centers above a sane gap on tall/4K screens */
    --modal-top-margin: max(2rem, calc(50dvh - var(--modal-max-height) / 2 - 2rem));
    --modal-width: min(66dvw, 760px);

    padding: var(--gg-space-md);
    background-color: var(--gg-gray-light);
    border: none;

    @media screen and (min-width: 750px) {
      width: var(--modal-width);
      margin-block-start: var(--modal-top-margin);
      overflow: hidden;
    }

    /* Mid-tier tablets: 66dvw is cramped — widen toward a readable cap */
    @media screen and (min-width: 750px) and (max-width: 1099px) {
      --modal-width: min(86vw, 720px);
    }
  }

  /* Neutralise the theme's default dim/brightness backdrop (base.css
     .dialog-modal::backdrop) so we get a clean blur, not a grey-out.
     Higher specificity (.dialog-modal too) to win the tie. */
  .search-modal__content.dialog-modal::backdrop,
  .search-modal__content.dialog-modal[open]::backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
  }

  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

  /* Real backdrop blur via a dedicated fixed element, toggled with pure CSS when
     the dialog is open. Lightweight (no GSAP), and reliable across browsers where
     ::backdrop blur is flaky. The dialog renders above it (top layer). */
  #gg-search-blur {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter var(--animation-speed-slow, 300ms) var(--ease-out-quad),
      -webkit-backdrop-filter var(--animation-speed-slow, 300ms) var(--ease-out-quad),
      opacity var(--animation-speed-slow, 300ms) var(--ease-out-quad);
  }

  @media screen and (min-width: 750px) {
    body:has(.search-modal__content[open]) #gg-search-blur {
      opacity: 1;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
  }

  .dialog-modal[open].search-modal__content {
    transform-origin: bottom center;
    animation: search-element-slide-in-bottom 300ms var(--ease-out-quad) forwards;
    border-radius: 0;
    box-shadow: none;
  }

  .dialog-modal.search-modal__content.dialog-closing {
    animation: search-element-slide-out-bottom 200ms var(--ease-out-quad) forwards;
  }

  .search-modal__content[open] {
    display: flex;
  }

  .search-modal__content :is(.predictive-search-dropdown, .predictive-search-form__content-wrapper) {
    position: relative;
  }

  /* (Removed the vendor vertical ::before divider between reset and close —
     the clean flex input row + a single field underline replace it.) */

  predictive-search-component {
    /* Square corners on result cards, like the Shop grid */
    --resource-card-corner-radius: 0;

    display: flex;
    width: 100%;
    position: relative;
    margin-inline: auto;
    align-items: center;
    background-color: var(--gg-gray-light);
    z-index: var(--layer-heightened);
  }

  /* Override scheme color so footer gradient and bg use grey, not scheme-1 white/cream */
  .search-modal predictive-search-component {
    --n: 217 217 217;
    background-color: var(--gg-gray-light);
  }

  /* Result cards: match the Shop "Small" grid card — 4:5 image, contain-on-white
     with the subtle grey multiply tint, square corners (incl. on hover). */
  .search-modal .resource-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0;
    background: var(--gg-white);
  }

  .search-modal .resource-card__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gg-gray-lightest);
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  .search-modal .resource-card__image {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    border-radius: 0;
  }

  /* Card typography → gg-pc sizes/weights (title 14/400, price 12/300). */
  .search-modal .resource-card__title {
    font-family: var(--gg-font);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--gg-black);
  }

  .search-modal .resource-card__content .price {
    font-family: var(--gg-font);
    font-size: var(--gg-text-sm);
    font-weight: 300;
    color: var(--gg-black);
  }

  .predictive-search-form__footer {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

  predictive-search-component:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    .predictive-search-form__footer {
    display: block;
  }

  .predictive-search-form {
    position: relative;
    width: 100%;
    align-self: flex-start;
  }

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--gg-gray-light);
    padding: var(--gg-space-md) 0 0;

    /* Firefox */
    scrollbar-width: none;

    /* Webkit browsers */
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .predictive-search-form__content-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: var(--layer-raised);
    display: flex;
    flex-direction: column;
    border-radius: 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      /* Bind the absolute dropdown to the space actually left below the input so
         the modal never runs off the bottom of the viewport. */
      max-height: min(var(--modal-max-height), calc(100dvh - var(--modal-top-margin) - 9rem));
    }
  }

  /* Add new rule to apply bottom padding only when search button exists */
  .predictive-search-form__content-wrapper:has([data-search-results]):not(:has(.predictive-search-results__no-results))
    > .predictive-search-form__content {
    padding-block-end: var(--padding-6xl);
  }

  /* Inset model (clean): the dialog's --gg-space-md padding is the ONE horizontal
     inset. The header flows naturally inside it (no breakout, no extra padding), so
     the field spans exactly the same left/right edges as the result card grid.
     Only the divider line breaks out — via ::after — to reach the dialog edges. */

  .predictive-search-form__header {
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    display: flex;
    align-items: center;
    background-color: var(--gg-gray-light);
    border: none;
    border-radius: 0;
    padding-block: var(--gg-space-sm);

    @media screen and (min-width: 750px) {
      padding-block: var(--gg-space-md);
    }
  }

  /* Full-bleed divider: breaks out of the dialog's --gg-space-md inline padding so
     it runs edge-to-edge of the dialog, while the field stays at the content inset. */
  .predictive-search-form__header::after {
    content: '';
    position: absolute;
    left: calc(var(--gg-space-md) * -1);
    right: calc(var(--gg-space-md) * -1);
    bottom: 0;
    border-bottom: var(--gg-divider-width) solid var(--gg-divider-color);
    pointer-events: none;
  }

  /* The search field: fills the header (box = same width as the card grid), white
     fill, black underline, no box/radius. The text/controls are inset from the box
     edges (padding) so nothing sits flush against the edge. */
  .predictive-search-form__header-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--gg-space-sm);
    background: var(--gg-white);
    border: 0;
    border-radius: 0;
    box-shadow: 0 1px 0 var(--gg-black);
    color: var(--gg-black);
    padding-inline: var(--gg-space-sm);
  }

  /* Keep the underline a hairline 1px (black) — no thickening on focus. */
  .predictive-search-form__header-inner:focus-within {
    outline: none;
    box-shadow: 0 1px 0 var(--gg-black);
  }

  input.search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--gg-black);
    font-family: var(--gg-font);
    font-size: var(--gg-text-base);
    line-height: var(--gg-text-base--lh);
    letter-spacing: var(--gg-tracking-default);
    padding-block: var(--gg-space-xs);
    padding-inline: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
  }

  .search-input::placeholder {
    color: rgb(0 0 0 / var(--opacity-70));
  }

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  /* Reset button removed from view — a single always-present "Löschen" (close) is
     all we want in the field. Kept in the DOM only for the JS ref. */
  .predictive-search__reset-button {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

    &:active {
      transform: scale(0.97);
      transition: transform 100ms var(--animation-timing-active);
      box-shadow: none;
    }
  }

  /* Close ("clear") — uses the canonical .gg-link-action underline tier;
     only the modal-specific layout/active state remains here. */
  .search-modal .predictive-search__close-modal-button {
    flex: 0 0 auto;

    &:active {
      transform: scale(0.95);
      transition: transform 100ms var(--animation-timing-active);
    }
  }

  /* No card-level hover wash — Shop cards have none (see also the rounded-hover
     reset in predictive-search.liquid). */

  /* Bigger gap between sections (Zuletzt angesehen → Produkte) */
  .search-modal .recently-viewed-wrapper {
    padding-block-end: var(--padding-xl);
  }

  .search-modal .predictive-search-results__products + .predictive-search-results__products .predictive-search-results__title {
    margin-block-start: var(--margin-lg);
  }

  /* ─────────────────────────────────────────────────────────────────────
     Spa mode: the whole search modal goes brand orange, black text.
     Every grey/scheme background surface is re-pointed to --gg-orange, and
     the color-scheme RGB var (--n) is set to orange so scheme-driven bits
     (footer gradient, card surfaces) follow. Scoped to [data-spa-mode] on
     <body> — the modal renders in the body's top layer.
     ───────────────────────────────────────────────────────────────────── */

  /* Modal shell + all inner surface backgrounds → orange */
  [data-spa-mode] .search-modal__content,
  [data-spa-mode] .search-modal predictive-search-component,
  [data-spa-mode] .search-modal predictive-search-component .predictive-search-form__content,
  [data-spa-mode] .search-modal .predictive-search-form__header {
    background-color: var(--gg-orange);
  }

  /* Color-scheme RGB → orange (233 90 12) so the footer gradient and any
     scheme-bg-driven surfaces resolve to orange, not grey/cream. */
  [data-spa-mode] .search-modal predictive-search-component {
    --n: 233 90 12;
    --color-background: var(--gg-orange);
    --color-foreground: var(--gg-black);
  }

  /* Search field stays white-fill / black-underline on orange (legible query);
     the base rules already handle fill, underline and placeholder. */
  [data-spa-mode] .search-modal input.search-input {
    color: var(--gg-black);
  }

  /* Result titles / text → black */
  [data-spa-mode] .search-modal .predictive-search-results__title,
  [data-spa-mode] .search-modal .resource-card__title,
  [data-spa-mode] .search-modal .resource-card__info,
  [data-spa-mode] .search-modal .predictive-search__reset-button,
  [data-spa-mode] .search-modal .predictive-search__close-modal-button,
  [data-spa-mode] .search-modal .predictive-search__close-modal-button:hover {
    color: var(--gg-black);
  }

  /* Full-bleed divider reads stronger on orange */
  [data-spa-mode] .search-modal .predictive-search-form__header {
    border-bottom-color: rgba(0, 0, 0, 0.22);
  }

  /* View-all / search button pill → deeper orange, black text */
  [data-spa-mode] .search-modal .predictive-search__search-button {
    background: var(--gg-orange-dark);
    color: var(--gg-black);
  }

  /* Footer fade overlay (gradient to the scheme bg) → fade to orange so the
     bottom of the results list blends into the orange modal, not grey/cream. */
  @media screen and (min-width: 750px) {
    [data-spa-mode] .search-modal .predictive-search-form__footer {
      background-image: linear-gradient(to top, var(--gg-orange) 0%, var(--gg-orange) 40%, rgba(233, 90, 12, 0) 100%);
    }
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:254) */
.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:255) */
.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:257) */
.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:259) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-controls (INDEX:261) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: 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 */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: initial;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  @media screen and (max-width: 749px) {
    .slideshow-controls__thumbnails .slideshow-control {
      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:263) */
slideshow-slides {
    align-items: var(--slideshow-align-items, normal);
  }

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }
/* END_SNIPPET:slideshow */

/* START_SNIPPET:sorting (INDEX:264) */
.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:272) */
: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:281) */
/* 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:282) */
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:283) */
.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:284) */
.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 */