/** Shopify CDN: Minification failed

Line 6418:24 Unexpected "{"
Line 6418:33 Expected ":"
Line 6424:24 Unexpected "{"
Line 6424:33 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0) */
.announcement-bar__content {
    container-type: inline-size;
    width: 100%;
  }

  .announcement-bar__timer-row {
    max-width: 100%;
  }

  /* Scale down text on very small screens */
  @container (max-width: 400px) {
    .announcement-bar__timer-row {
      font-size: 0.75rem;
      gap: 0.25rem;
    }
  }

  @container (max-width: 320px) {
    .announcement-bar__timer-row {
      font-size: 0.65rem;
      gap: 0.125rem;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article-byline (INDEX:2) */
/* Optional surface + text color, driven by the CSS custom properties emitted
     above only when a merchant sets a color. Fallbacks keep the default look:
     transparent background (no surface unless set) and inherited text color. */
  .article-byline {
    background: var(--byline-bg, transparent);
    border-radius: var(--r-lg, 16px);
    color: var(--byline-text, inherit);
  }
  .article-byline--filled {
    padding: var(--s-4, 16px) var(--s-5, 20px);
  }
  /* Invisible ring by default (transparent); becomes a visible avatar border
     only when --byline-avatar-border is set. */
  .article-byline-row__avatar-img {
    box-shadow: 0 0 0 2px var(--byline-avatar-border, transparent);
  }
/* END_SECTION:article-byline */

/* START_SECTION:article-hero (INDEX:3) */
/* Surface — matches `.shopify-section--hero-tq` padding/background so the article
     hero sits on the same surface treatment as the homepage hero. Full-bleed (block
     child of the section wrapper), and it carries the per-instance color variables,
     so a merchant's `bg_color` reaches the rule that paints it.
     Shared inner layout lives in components/hero-tq.css. */
  .article-hero__surface {
    background: var(--bg-surface, #ffffff);
    /* Top gap kept in sync with .shopify-section--hero-tq (announcement-bar
       padding: 8px desktop / 6px mobile). Bottom spacing preserved. NGE-8051. */
    padding: 0.5rem 0 var(--s-8, 40px);
    overflow: hidden;
  }
  @media (max-width: 40rem) {
    .article-hero__surface {
      padding: 0.375rem 0 var(--s-7, 32px);
    }
  }

  /* Full-width variant: image spans the container at its natural ratio (no
     cover-crop), headline + lead stacked below — mirrors the campaign LP hero
     (plp-intro --image-full). NGE-7761. */
  .article-hero-full {
    display: flex;
    flex-direction: column;
    gap: var(--s-6, 24px);
  }
  .article-hero-full__media {
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
  }
  /* Capped banner height (not the image's full natural height) so a tall source
     doesn't fill the viewport — cover-crop toward the focal point. Matches the
     compact full-width hero band on campaign pages. NGE-7761. */
  .article-hero-full__media img {
    width: 100%;
    height: clamp(200px, 40vh, 440px);
    object-fit: cover;
    object-position: center var(--focal-y, 35%);
    display: block;
  }
  .article-hero-full__copy {
    max-width: 720px;
  }

  /* Headline: replicate the shared `.hero-copy h1` treatment on a dedicated
     class so the merchant-chosen heading tag (h1–h4, for SEO) always keeps the
     hero look. The shared rules in hero-tq.css still style the h1 default. */
  .shopify-section--article-hero .article-hero__headline {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 60px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 14px 0 var(--s-6, 24px);
    color: var(--ink, #4a4a4a);
    text-wrap: balance;
  }
  .shopify-section--article-hero .article-hero__headline em {
    font-style: normal;
    font-weight: 700;
    color: var(--teal-cta, #35B2B6);
    letter-spacing: -0.025em;
  }
  @media (max-width: 40rem) {
    .shopify-section--article-hero .article-hero__headline {
      margin: 8px 0 var(--s-4, 16px);
    }
  }

  /* Optional CTA spacing below the copy. */
  .article-hero__cta {
    margin-top: var(--s-5, 20px);
  }

  /* Optional fixed image ratio (applied only when a ratio is chosen). Cover-crops
     toward the focal point on both the split and full-width layouts. */
  .article-hero__media--ratio {
    aspect-ratio: var(--hero-ratio);
    overflow: hidden;
    border-radius: var(--r-lg, 16px);
  }
  .article-hero__media--ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center var(--focal-y, 35%);
    display: block;
  }
/* END_SECTION:article-hero */

/* START_SECTION:bestsellers (INDEX:5) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  /* Section sits on white by default; subtle variant uses warm beige. */
  .shopify-section--bestsellers {
    background: var(--bg-surface, #ffffff);
  }
  .shopify-section--bestsellers.shopify-section--bestsellers--subtle {
    background: var(--bg-subtle, #FAF7F4);
  }
  

  /* .section-head, h2, .lead, .section-link — global rules in snippets/theme-turquoise.liquid */

  /* Grid */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-7, 32px) var(--s-5, 20px);
  }
  @media (max-width: 56.25rem) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 30rem) {
    .product-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--s-4, 16px);
    }
  }

  /* Card */
  .product-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .product-card:hover { transform: translateY(-3px); }
  .product-card .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Media */
  .product-media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    background: var(--bg-hover, #F0E9DF);
    margin-bottom: var(--s-4, 16px);
  }
  .product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .product-card:hover .product-media img { transform: scale(1.04); }

  /* Badge pill */
  .product-tag {
    position: absolute;
    top: var(--s-3, 12px);
    left: var(--s-3, 12px);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--ink, #4a4a4a);
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: var(--r-pill, 999px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid rgba(15, 21, 27, 0.08);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,21,27,0.04));
  }
  .product-tag.new {
    background: var(--teal-cta, #35B2B6);
    color: #fff;
    border-color: transparent;
  }
  .product-tag.sale {
    background: var(--price-500, #E11D48);
    color: #fff;
    border-color: transparent;
  }

  /* Info */
  .product-info { padding: 0 var(--s-1, 4px); }
  .product-name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.015em;
    color: var(--ink, #4a4a4a);
    margin: 0 0 4px;
    line-height: 1.25;
  }
  .product-detail {
    font-size: 13px;
    color: var(--ink-4, #939393);
    margin: 0 0 var(--s-3, 12px);
    flex: 1;
  }

  /* Price */
  .product-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-2, 8px);
    flex-wrap: wrap;
  }
  .product-price .from { font-size: 13px; color: var(--ink-4, #939393); }
  .product-price .now {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.018em;
  }
  .product-price .now.sale { color: var(--price-500, #E11D48); }
  .product-price .was {
    font-size: 14px;
    color: var(--ink-5, #b8b8b8);
    text-decoration: line-through;
    font-weight: 500;
  }

  /* "Make yours" outline pill, flips to solid teal on card hover */
  .product-make {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--s-3, 12px);
    padding: 8px 14px;
    border: 1.5px solid var(--teal-cta, #35B2B6);
    color: var(--teal-cta, #35B2B6);
    background: transparent;
    border-radius: var(--r-pill, 999px);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    align-self: flex-start;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .product-make svg {
    width: 12px;
    height: 12px;
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .product-card:hover .product-make {
    background: var(--teal-cta, #35B2B6);
    color: #fff;
  }
  .product-card:hover .product-make svg { transform: translateX(2px); }

  /* Mobile typography tightening (mockup parity) */
  @media (max-width: 40rem) {
    .product-name { font-size: 14px; }
    .product-detail { font-size: 12px; margin-bottom: var(--s-2, 8px); }
    .product-price .now { font-size: 16px; }
    .product-price .from,
    .product-price .was { font-size: 12px; }
    .product-make {
      font-size: 11.5px;
      padding: 6px 11px;
      margin-top: var(--s-2, 8px);
    }
    .product-make svg { width: 10px; height: 10px; }
    .product-tag {
      font-size: 10px;
      padding: 3px 8px;
    }
  }
/* END_SECTION:bestsellers */

/* START_SECTION:breadcrumbs (INDEX:7) */
.breadcrumbs {
    font-size: 13px;
    line-height: 1.3;
    gap: 6px;
    letter-spacing: -0.003em;
  }
  .breadcrumbs li {
    gap: 6px;
  }
  .breadcrumbs [aria-current='page'] {
    color: var(--ink, #4a4a4a);
    font-weight: 700;
  }
  @media (max-width: 40rem) {
    /* Condensed: smaller text, single line, scroll horizontally if the trail
       is long instead of wrapping or clipping. */
    .breadcrumbs {
      font-size: 12.5px;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .breadcrumbs::-webkit-scrollbar {
      display: none;
    }
    .breadcrumbs li {
      white-space: nowrap;
    }
  }
/* END_SECTION:breadcrumbs */

/* START_SECTION:call-to-action (INDEX:8) */
.section-call-to-action .container__divider {
    width: 3rem;
    border-top-width: 2px;
  }
/* END_SECTION:call-to-action */

/* START_SECTION:campaign-color-switcher (INDEX:11) */
/* Row: text beside media, matching the visual rhythm of the surrounding
     campaign-content-sections rows (same columns/gap/breakpoint idiom). */
  .campaign-color-switcher__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 40px);
    align-items: center;
  }
  .campaign-color-switcher__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px);
  }
  .campaign-color-switcher__heading {
    margin: 0;
  }
  .campaign-color-switcher__body {
    max-width: 640px;
  }
  .campaign-color-switcher__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5, 20px);
  }
  /* `<color-switcher>` is a custom element, so its default display is `inline` — and the
     class was never given a rule. An inline box around a block frame and a flex swatch row
     means the frame sits at the start of the box while the swatch row, wider than the
     frame's 22rem, centres its own contents: the two never line up. The parent's
     `align-items: center` cannot help, it only centres this box. NGE-9799. */
  .campaign-color-switcher__widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-5, 20px);
    width: 100%;
  }
  /* Fixed-ratio frame (native 458x595) — width/height on the <img> plus this
     aspect-ratio box keeps the swap between swatch images CLS-safe. */
  .campaign-color-switcher__preview-frame {
    width: 100%;
    max-width: 22rem;
    aspect-ratio: 458 / 595;
    overflow: hidden;
    border-radius: var(--r-lg, 16px);
    background: var(--bg-subtle, #faf7f4);
  }
  .campaign-color-switcher__preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .campaign-color-switcher__swatches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3, 12px);
  }
  .campaign-color-switcher__swatch {
    --swatch-size: 2.5rem;
    width: var(--swatch-size);
    height: var(--swatch-size);
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--color-white, #fff);
    border-radius: var(--r-pill, 999px);
    background-color: var(--swatch-color, var(--line, #e5e7eb));
    box-shadow: 0 0 0 1px var(--line, #e5e7eb);
    transition:
      box-shadow var(--dur-fast, 160ms) var(--ease-out, ease),
      transform var(--dur-fast, 160ms) var(--ease-out, ease);
  }
  .campaign-color-switcher__swatch:hover {
    transform: translateY(-2px);
  }
  .campaign-color-switcher__swatch:focus-visible {
    outline: 2px solid var(--color-primary, #35b2b6);
    outline-offset: 2px;
  }
  .campaign-color-switcher__swatch--selected {
    box-shadow:
      0 0 0 2px var(--color-white, #fff),
      0 0 0 4px var(--color-primary, #35b2b6);
  }
  @media (prefers-reduced-motion: reduce) {
    .campaign-color-switcher__swatch {
      transition: none;
    }
    .campaign-color-switcher__swatch:hover {
      transform: none;
    }
  }

  @media screen and (max-width: 48rem) {
    .campaign-color-switcher__row {
      grid-template-columns: 1fr;
      gap: var(--s-4, 16px);
    }
  }
/* END_SECTION:campaign-color-switcher */

/* START_SECTION:campaign-comparison (INDEX:12) */
.campaign-comparison__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78vw, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    gap: var(--s-4, 16px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s-4, 16px);
    padding-bottom: var(--s-2, 8px);
    scrollbar-width: thin;
  }

  @media screen and (min-width: 48rem) {
    .campaign-comparison__grid {
      grid-auto-flow: row;
      grid-auto-columns: unset;
      grid-template-columns: repeat(var(--cc-columns, 3), minmax(0, 1fr));
      overflow-x: visible;
      scroll-snap-type: none;
      padding-bottom: 0;
    }
  }

  .campaign-comparison__column {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    gap: var(--s-4, 16px);
    scroll-snap-align: start;
    padding: var(--s-5, 20px);
    background: var(--bg-surface, #fff);
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-lg, 16px);
  }

  .campaign-comparison__column--featured {
    border-color: var(--cc-accent, var(--teal-cta, #35b2b6));
    border-width: 2px;
    box-shadow: 0 16px 36px -12px rgba(15, 21, 27, 0.18);
  }

  .campaign-comparison__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--r-md, 10px);
    background: var(--bg-subtle, #f6f1ea);
  }
  .campaign-comparison__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .campaign-comparison__title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .campaign-comparison__badge {
    background: var(--cc-accent, var(--teal-cta, #35b2b6));
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill, 999px);
  }
  .campaign-comparison__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink, #4a4a4a);
  }
  .campaign-comparison__caption {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3, #757575);
  }

  .campaign-comparison__price-row {
    display: flex;
    align-items: baseline;
  }
  .campaign-comparison__price {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-primary, var(--teal-cta, #35b2b6));
  }

  .campaign-comparison__specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-content: start;
    gap: 10px;
  }
  .campaign-comparison__spec {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--ink-3, #757575);
  }
  .campaign-comparison__spec-icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin-top: 2px;
    color: var(--cc-accent, var(--teal-cta, #35b2b6));
  }

  .campaign-comparison__cta-row {
    display: flex;
    align-items: end;
  }
  .campaign-comparison__cta {
    width: 100%;
    justify-content: center;
  }
/* END_SECTION:campaign-comparison */

/* START_SECTION:campaign-content-sections (INDEX:13) */
/* Grid: image sections span both columns (full-width image+text); text-only
     sections take ONE column each → a 2-col text grid (legacy "…con le tue foto"
     2x2 block). NGE-7761 (Yashit review). */
  .campaign-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-8, 40px) var(--s-10, 64px);
    align-items: start;
  }
  .campaign-content-sections__intro {
    max-width: 720px;
  }
  .campaign-section {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px);
  }
  .campaign-section--text {
    grid-column: span 1;
  }
  /* Image sections: image BESIDE content, full row width, alternating side. */
  .campaign-section--with-media {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 40px);
    align-items: center;
  }
  .campaign-section--media-right .campaign-section__media {
    order: 2;
  }
  .campaign-section__cta {
    margin-top: var(--s-2, 8px);
    align-self: start;
  }
  .campaign-section__media {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* Image size rule: editorial media never exceeds --content-media-max-h, so a
     tall or square image (e.g. the star-map circle) can't dwarf its text. Wide
     images fill the column; tall ones cap by height and centre. NGE-7761. */
  .campaign-section__media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--content-media-max-h, 440px);
    display: block;
    border-radius: var(--r-lg, 16px);
  }
  .campaign-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px);
  }
  .campaign-section__heading {
    margin: 0;
  }
  .campaign-section__body {
    max-width: 720px;
  }
  /* Single column on narrow screens (text grid + image sections stack). */
  @media (max-width: 48rem) {
    .campaign-sections {
      grid-template-columns: 1fr;
      gap: var(--s-7, 32px);
    }
    .campaign-section--with-media {
      grid-template-columns: 1fr;
      gap: var(--s-4, 16px);
    }
    .campaign-section--media-right .campaign-section__media {
      order: 0;
    }
  }

  /* Carousel layout: each content_section is one slide (image + own heading +
     body + CTA). Legacy repeated feature blocks (acrilico "Cosa rende…",
     mappa "Il regalo"), presented as a Türkis carousel. NGE-7761. */
  .campaign-sections-carousel {
    display: block;
  }
  .campaign-sections-carousel__swiper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: var(--r-lg, 16px);
  }
  /* Slide: image beside text on desktop, stacked on mobile. Equal-height slides
     so the carousel doesn't jump between differing content lengths. */
  .campaign-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 40px);
    align-items: center;
    height: auto;
  }
  .campaign-slide__media {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .campaign-slide__media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--content-media-max-h, 440px);
    display: block;
    border-radius: var(--r-lg, 16px);
  }
  .campaign-slide__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px);
  }
  .campaign-slide__heading {
    margin: 0;
  }
  .campaign-slide__body {
    max-width: 640px;
  }
  .campaign-slide__cta {
    margin-top: var(--s-2, 8px);
    align-self: start;
  }
  .campaign-sections-carousel__controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--s-4, 16px);
    margin-top: var(--s-5, 24px);
  }
  .campaign-sections-carousel__pagination {
    position: relative;
    inset: 0;
    min-width: 4ch;
    text-align: center;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
  }

  /* ---- Carousel: fixed-height slides (CLS-safe) + slide variants ----
     Every slide is the SAME fixed height so the carousel never reflows as it
     advances or as media loads — applied to BOTH the PDP product carousel and the
     page campaign carousels (consistent height, no variable jumps). Media fills
     its area with object-fit: cover; overlong copy scrolls within the slide.
     Works with all three variants (full-bleed / split / text-only). NGE-7761.
     Desktop height honours the section's "Carousel slide height" setting via
     --campaign-slide-h-setting (defaults to today's 440px when unset). */
  .campaign-sections-carousel {
    --carousel-slide-h: var(--campaign-slide-h-setting, 440px);
  }
  .campaign-sections-carousel .campaign-slide {
    height: var(--carousel-slide-h);
  }
  .campaign-sections-carousel .campaign-slide__media {
    height: 100%;
    overflow: hidden;
  }
  .campaign-sections-carousel .campaign-slide__media img,
  .campaign-sections-carousel .campaign-slide__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .campaign-sections-carousel .campaign-slide--split .campaign-slide__content {
    padding-inline: var(--s-8, 40px);
    overflow-y: auto;
  }
  /* Full-bleed: media fills the whole (fixed-height) slide, heading on a scrim.
     Scrim colours fall back to today's literals unless the section overrides
     --campaign-scrim-strong / --campaign-scrim-soft / --campaign-scrim-text. */
  .campaign-slide--full {
    position: relative;
    display: block;
  }
  .campaign-slide--full .campaign-slide__media {
    height: 100%;
  }
  .campaign-slide__scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--s-6, 28px) var(--s-8, 40px);
    background: linear-gradient(
      to top,
      var(--campaign-scrim-strong, rgba(20, 30, 30, 0.85)),
      var(--campaign-scrim-soft, rgba(20, 30, 30, 0.35)) 55%,
      transparent
    );
  }
  .campaign-slide__scrim .campaign-slide__heading {
    color: var(--campaign-scrim-text, #fff);
    margin: 0;
  }
  /* Text-only: centered copy within the same fixed height. */
  .campaign-slide--text {
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--s-8, 40px);
  }
  .campaign-slide--text .campaign-slide__content {
    max-width: 52ch;
  }

  @media (max-width: 48rem) {
    .campaign-slide {
      grid-template-columns: 1fr;
      gap: var(--s-4, 16px);
    }
    .campaign-sections-carousel {
      --carousel-slide-h: 540px;
    }
    .campaign-sections-carousel .campaign-slide--split {
      grid-template-rows: 1fr auto;
    }
    .campaign-sections-carousel .campaign-slide--split .campaign-slide__content {
      padding: 20px 22px 24px;
    }
  }
/* END_SECTION:campaign-content-sections */

/* START_SECTION:campaign-image-columns (INDEX:14) */
.campaign-image-columns__heading {
    margin: 0 0 var(--s-6, 24px);
  }
  .campaign-image-columns__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4, 16px);
  }
  .campaign-image-columns__item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--r-lg, 16px);
    background: var(--bg-subtle, #faf7f4);
  }
  .campaign-image-columns__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .campaign-image-columns__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--s-7, 32px);
  }

  @media screen and (min-width: 48rem) {
    .campaign-image-columns__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--s-8, 40px);
    }
  }
/* END_SECTION:campaign-image-columns */

/* START_SECTION:campaign-media-carousel (INDEX:15) */
/* Mobile-first: single column, media above the text (image-led, like legacy).
     The two-column desktop layout is the override below. */
  .campaign-media-carousel__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6, 24px);
    align-items: center;
  }
  .campaign-media-carousel__layout .campaign-media-carousel__media {
    order: -1;
  }
  .campaign-media-carousel__layout--text-only {
    grid-template-columns: 1fr;
  }
  /* Media-left: place the carousel column before the text on desktop. */
  .campaign-media-carousel__layout--media-left .campaign-media-carousel__media {
    order: -1;
  }
  .campaign-media-carousel__text {
    display: flex;
    flex-direction: column;
    gap: var(--s-6, 24px);
  }
  .campaign-media-carousel__item {
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
  }
  .campaign-media-carousel__heading {
    margin: 0;
  }
  .campaign-media-carousel__body {
    max-width: 640px;
  }
  .campaign-media-carousel__cta {
    align-self: start;
    margin-top: var(--s-1, 4px);
  }
  .campaign-media-carousel__media {
    min-width: 0;
  }
  .campaign-media-carousel__swiper {
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
  }
  /* CLS-safe: every slide is the SAME fixed height so space is reserved before
     the image/iframe loads and the carousel never reflows between slides (LCP
     playbook — no variable heights). Media fills with object-fit: cover. Mirrors
     campaign-content-sections' --carousel-slide-h pattern. */
  .campaign-media-carousel__slide {
    height: 320px;
    overflow: hidden;
    border-radius: var(--r-lg, 16px);
    background: var(--color-surface-2, #f4f4f4);
  }
  .campaign-media-carousel__slide img,
  .campaign-media-carousel__slide iframe,
  .campaign-media-carousel__slide .campaign-media-carousel__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }
  /* Controls below the carousel (prev / fraction / next) — scroll like legacy. */
  .campaign-media-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4, 16px);
    margin-top: var(--s-4, 16px);
  }
  /* Desktop override. Mobile-first `screen and (min-width: …)` per the theme's CSS
     rules — the previous `@media (max-width: 48rem)` was both max-width-first and
     missing the `screen` media type. Identical rendering at both ends. */
  @media screen and (min-width: 48rem) {
    .campaign-media-carousel__layout {
      grid-template-columns: 1fr 1fr;
      gap: var(--s-8, 40px) var(--s-10, 64px);
    }
    /* Re-declared inside the query: `--text-only` sits BEFORE it in source order at
       equal specificity (0,1,0), so without this the desktop base rule above would
       win and a slideless section (slide_count == 0) would render its text at half
       width with an empty second column. */
    .campaign-media-carousel__layout--text-only {
      grid-template-columns: 1fr;
    }
    .campaign-media-carousel__layout .campaign-media-carousel__media {
      order: 0;
    }
    /* media-left keeps its explicit ordering on desktop. */
    .campaign-media-carousel__layout--media-left .campaign-media-carousel__media {
      order: -1;
    }
    .campaign-media-carousel__slide {
      height: var(--mc-slide-h, 440px);
    }
  }
/* END_SECTION:campaign-media-carousel */

/* START_SECTION:category-tiles (INDEX:18) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  /* Section sits on warm beige ground (mockup parity). */
  .shopify-section--category-tiles {
    background: var(--bg-subtle, #FAF7F4);
  }
  

  /* .section-head, h2, .lead, .section-link — global rules in snippets/theme-turquoise.liquid */

  /* Categories grid — 4 columns; AI tile spans cols 3-5 / rows 1-2 */
  .categories-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4, 16px);
  }
  @media (max-width: 56.25rem) {
    .categories-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--s-4, 16px);
    }
  }
  @media (max-width: 30rem) {
    .categories-grid { grid-template-columns: 1fr; }
  }

  /* Tile base */
  .category-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(15, 21, 27, 0.04);
    box-shadow: 0 2px 6px -3px rgba(15, 21, 27, 0.06);
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
    cursor: pointer;
    color: inherit;
  }
  .category-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -10px rgba(15, 21, 27, 0.16),
                0 4px 10px -4px rgba(15, 21, 27, 0.08);
  }

  /* Tile bg-tint variants */
  .category-tile--book { background: var(--bg-subtle, #FAF7F4); }
  .category-tile--gift { background: rgba(244, 181, 168, 0.16); }
  .category-tile--home { background: var(--bg-subtle, #FAF7F4); }

  /* Media */
  .category-media {
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
    background: #fff;
  }
  .category-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .category-tile:hover .category-media img { transform: scale(1.04); }

  /* Pills */
  .category-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 11px;
    border-radius: var(--r-pill, 999px);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--teal-cta, #35B2B6);
    box-shadow: 0 2px 8px -2px rgba(15, 21, 27, 0.18);
  }
  .category-pill--blush { background: var(--blush-700, #D88A7A); }
  .category-pill--ai {
    background: #FFD66B;
    color: #1a1410;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 10px -2px rgba(255, 214, 107, 0.5);
  }

  /* Info bar overlaid at bottom of regular tile */
  .category-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--s-4, 16px) var(--s-5, 20px);
    gap: var(--s-3, 12px);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid rgba(15, 21, 27, 0.04);
  }
  .category-info .name {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.018em;
    line-height: 1.18;
  }
  /* Mockup parity: the "da"/"from" prefix stays light + regular weight,
     only the amount (<strong>) is emphasised — bold in a dark slate, not
     pure black. */
  .category-info .price {
    font-size: 13px;
    color: var(--ink-3, #757575);
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .category-info .price strong {
    font-weight: 700;
    color: #2a323b;
    font-size: 14px;
  }
  /* Strike / compare price of the same cheapest product — muted + struck. */
  .category-info .price .was {
    margin-left: 6px;
    color: var(--ink-5, #b8b8b8);
    font-weight: 500;
    text-decoration: line-through;
  }
  /* Colour logic (ported from Bestseller .now.sale): when a strike is present
     the amount flips to the global price colour (--price-color, a theme setting);
     with no strike it stays the default dark. EU shops always strike -> coloured,
     US shops without strike -> dark. */
  .category-info .price:has(.was) strong {
    color: var(--price-color, #E11D48);
  }

  /* AI tile — tall hero on the right, spans cols 3-5 / rows 1-2 */
  .category-tile--ai {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
    background: linear-gradient(160deg, #084B4D 0%, #0D6A6D 60%, #0a5557 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px -6px rgba(8, 75, 77, 0.4);
  }
  .category-tile--ai:hover {
    box-shadow: 0 16px 36px -10px rgba(8, 75, 77, 0.45),
                0 6px 14px -4px rgba(8, 75, 77, 0.2);
  }
  .category-ai-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }
  .category-ai-visual {
    flex: 1 1 auto;
    display: block;
    padding: 0;
    min-height: 0;
    overflow: hidden;
  }
  .category-ai-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .category-tile--ai:hover .category-ai-photo { transform: scale(1.03); }
  .category-ai-text {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    padding: var(--s-5, 20px) var(--s-6, 24px) var(--s-6, 24px);
  }
  .ai-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFD66B;
    margin-bottom: 2px;
  }
  .ai-eyebrow svg { width: 14px; height: 14px; color: #FFD66B; }
  .ai-headline {
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.12;
    color: #fff;
    margin: 0;
  }
  .ai-headline em {
    font-style: normal;
    color: #FFD66B;
  }
  .ai-sub {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    margin: 4px 0 0;
  }
  .ai-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--s-2, 8px);
    font-size: 13.5px;
    font-weight: 700;
    color: #FFD66B;
    letter-spacing: -0.005em;
    transition: gap var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .ai-link svg { width: 14px; height: 14px; }
  .category-tile--ai:hover .ai-link { gap: 12px; }

  /* Tablet — AI hero spans full width below 2x2 umbrellas */
  @media (max-width: 56.25rem) {
    .category-tile--ai {
      grid-column: 1 / -1;
      grid-row: auto;
    }
  }
/* END_SECTION:category-tiles */

/* START_SECTION:collection-product-gallery (INDEX:21) */
/* Hero extras (prototype): eyebrow · accent heading tail · subheading */
  .collection-product-gallery__eyebrow {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gray-800);
  }
  .collection-product-gallery__heading-accent {
    color: var(--color-primary);
  }
  .collection-product-gallery__subheading {
    margin-top: 0.5rem;
    max-width: 40rem;
    font-size: 0.9375rem;
    color: var(--color-gray-500);
  }

  /* Filter row: same background as the page (per QA), just breathing room */
  .collection-product-gallery__filter {
    padding: 0.875rem 0;
    margin-bottom: 0.5rem;
  }
  .collection-product-gallery__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .collection-product-gallery__tab {
    cursor: pointer;
    border: 1px solid var(--color-gray-300);
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: var(--color-white, #fff);
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .collection-product-gallery__tab[aria-selected='true'] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
  }
  .collection-product-gallery__panel[aria-hidden='true'] {
    display: none;
  }
  .collection-product-gallery__count {
    margin: 0.25rem 0 1rem;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
  }
  .collection-product-gallery__count strong {
    color: var(--color-gray-800);
  }

  /* Card grid: 1 col mobile → 2 → 4 desktop (whole category at a glance) */
  .collection-product-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  @media screen and (min-width: 768px) {
    .collection-product-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media screen and (min-width: 1024px) {
    .collection-product-gallery__grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* Horizontal card: small photo · name · meta */
  .collection-product-gallery__card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.75rem;
    background: var(--color-white, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .collection-product-gallery__card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 1px 6px rgb(0 0 0 / 8%);
  }
  /* While a product window is open, clicking another card must only
     light-dismiss the open window — not switch to the next one. Cards stop
     hit-testing for that pointerdown, so the click lands on the backdrop. */
  .collection-product-gallery:has(.collection-product-gallery__window:popover-open)
    .collection-product-gallery__card {
    pointer-events: none;
  }
  .collection-product-gallery__card-thumb {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
  }
  .collection-product-gallery__card-img { width: 100%; height: 100%; object-fit: cover; }
  .collection-product-gallery__card-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }
  .collection-product-gallery__card-name {
    font-weight: 600;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .collection-product-gallery__card-meta { color: var(--color-gray-500); font-size: 0.8125rem; }

  /* Product window: native popover, centered panel, 2-col on desktop */
  .collection-product-gallery__window {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(92vw, 960px);
    height: fit-content;
    max-height: 88vh;
    overflow-y: auto;
    border: none;
    border-radius: 12px;
    background: var(--color-background, #fff);
    color: inherit;
    padding: 0;
  }
  .collection-product-gallery__window::backdrop {
    background: rgb(0 0 0 / 50%);
  }
  /* In-flow + sticky: reserves its own strip above the image (no overlap on
     mobile) and stays visible while a long window scrolls. Chip background
     keeps it legible over content sliding underneath. */
  .collection-product-gallery__close {
    position: sticky;
    top: 0.5rem;
    z-index: 1;
    display: block;
    width: fit-content;
    margin: 0.5rem 0.5rem 0 auto;
    padding: 0.375rem;
    cursor: pointer;
    color: inherit;
    background: var(--color-background, #fff);
    border-radius: 9999px;
  }
  .collection-product-gallery__window-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  @media screen and (min-width: 1024px) {
    .collection-product-gallery__window-body { grid-template-columns: 2fr 3fr; }
  }
  .collection-product-gallery__window-img {
    width: 100%;
    border-radius: 0.75rem;
    object-fit: cover;
  }
  .collection-product-gallery__window-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
  .collection-product-gallery__window-title { margin-bottom: 0.75rem; }
  .collection-product-gallery__group-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gray-800);
  }
  /* Orientation glyph mirrors the group's shape (per ZU prototype):
     square/round/landscape/portrait/panoramic each get their own outline. */
  .collection-product-gallery__group-heading::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border: 1.5px solid var(--color-gray-400);
    border-radius: 2px;
  }
  .collection-product-gallery__group-heading--landscape::before,
  .collection-product-gallery__group-heading--rectangular::before {
    width: 1rem;
    height: 0.7rem;
  }
  .collection-product-gallery__group-heading--portrait::before {
    width: 0.7rem;
    height: 1rem;
  }
  .collection-product-gallery__group-heading--panoramic::before {
    width: 1.25rem;
    height: 0.55rem;
  }
  .collection-product-gallery__group-heading--round::before {
    border-radius: 50%;
  }
  /* Add-on type headings: plain sentence-case label, no glyph (per prototype) */
  .collection-product-gallery__group-heading--option {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--color-gray-600);
  }
  .collection-product-gallery__group-heading--option::before {
    display: none;
  }
  .collection-product-gallery__rows + .collection-product-gallery__group-heading {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-gray-200);
  }
  .collection-product-gallery__rows {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .collection-product-gallery__row {
    display: flex;
    align-items: baseline;
    border-top: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
  }
  /* Format selector: the whole row is a radio label; the checked size drives
     the add-on prices (gallery-format-selector element). Negative side margins
     let the selected background bleed while text stays aligned with headings. */
  .collection-product-gallery__row-label {
    position: relative;
    flex: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
  }
  .collection-product-gallery__row-label:hover {
    background: var(--color-gray-100);
  }
  .collection-product-gallery__row-label:has(.collection-product-gallery__row-radio:checked) {
    background: var(--color-gray-100);
  }
  .collection-product-gallery__row-label:has(.collection-product-gallery__row-radio:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }
  .collection-product-gallery__row-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .collection-product-gallery__row-radio:checked ~ .collection-product-gallery__row-size {
    color: var(--color-gray-800);
    font-weight: 600;
  }
  .collection-product-gallery__row-price { white-space: nowrap; }
  /* Tier-price hydration (NGE-8705): the global campaigns-and-channels.js
     strips the literal `loading` class once the channel/campaign is resolved
     (and swaps this wrapper's innerHTML after a refetch when they changed).
     While loading: show the shimmer bar, hide the server-rendered price. */
  .collection-product-gallery__price-skeleton {
    display: none;
    width: 4.5rem;
    height: 1em;
    border-radius: 4px;
    background: var(--color-gray-100);
  }
  .collection-product-gallery__row-price.loading .collection-product-gallery__price-skeleton {
    display: inline-block;
  }
  .collection-product-gallery__row-price.loading .collection-product-gallery__price-data {
    display: none;
  }
  .collection-product-gallery__row-size { color: var(--color-gray-700); }
  .collection-product-gallery__ratio {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-gray-400);
  }
  .collection-product-gallery__price-old {
    text-decoration: line-through;
    color: var(--color-gray-400);
    margin-right: 0.375rem;
  }
  .collection-product-gallery__price-new {
    font-weight: 700;
  }
  /* Red ink only applies when a struck old price precedes it (sale state);
     regular prices keep the default ink color. */
  .collection-product-gallery__price-old + .collection-product-gallery__price-new {
    color: var(--color-error, #d02e2e);
  }
  /* Add-ons as tiles (per ZU prototype): image card, name + price below */
  .collection-product-gallery__options { margin-top: 1rem; }
  .collection-product-gallery__options-title {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500);
  }
  .collection-product-gallery__option-tiles {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .collection-product-gallery__option-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 5.5rem;
    text-align: center;
  }
  .collection-product-gallery__option-thumb {
    width: 5.5rem;
    height: 5.5rem;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid var(--color-gray-100);
    background: var(--color-white, #fff);
  }
  .collection-product-gallery__option-name {
    font-size: 0.75rem;
    line-height: 1.25;
    color: var(--color-gray-700);
  }
  .collection-product-gallery__option-price {
    font-size: 0.75rem;
    font-weight: 700;
  }
  /* Muted price states: included in the price / not linked to the format */
  .collection-product-gallery__option-price--included,
  .collection-product-gallery__option-price--na {
    font-weight: 500;
    color: var(--color-gray-400);
  }
  .collection-product-gallery__option-tile--unavailable {
    opacity: 0.45;
  }
  .collection-product-gallery__cta { margin-top: 1.25rem; }
/* END_SECTION:collection-product-gallery */

/* START_SECTION:collection-product-tabs (INDEX:22) */
.collection-tabs__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  .collection-tabs__tab {
    cursor: pointer;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .collection-tabs__tab[aria-selected='true'] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
  }

  .collection-tabs__panel[aria-hidden='true'] {
    display: none;
  }

  .cp-products {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .cp-product {
    border: 1px solid var(--color-gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
  }
  .cp-product__summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
  }
  .cp-product__summary::-webkit-details-marker { display: none; }
  .cp-product__media {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: 0.5rem;
  }
  .cp-product__img { width: 100%; height: 100%; object-fit: cover; }
  .cp-product__title { font-weight: 600; }
  .cp-product__from { color: var(--color-gray-500); font-size: 0.875rem; }
  .cp-product__chevron {
    margin-left: auto;
    display: inline-flex;
    transition: transform 0.2s;
  }
  .cp-product[open] .cp-product__chevron { transform: rotate(180deg); }

  .cp-product__table {
    width: 100%;
    border-collapse: collapse;
  }
  .cp-product__table th,
  .cp-product__table td {
    border-top: 1px solid var(--color-gray-100);
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.875rem;
  }
  .cp-product__table th { font-weight: 600; color: var(--color-gray-500); }
  .cp-product__link {
    display: inline-block;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--color-primary);
  }

  .price-old { text-decoration: line-through; color: var(--color-gray-400); margin-right: 0.25rem; }
  .price-new { font-weight: 700; color: var(--color-primary); }

  /* Format groups (pricing_table_group) — sub-heading per format above its size table */
  .cp-format-group + .cp-format-group { margin-top: 0.5rem; }
  .cp-format-group__title {
    padding: 0.75rem 1rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-700);
  }

  /* Add-ons (Opzioni aggiuntive) — reuses product-addon-item cards in a grid */
  .cp-addons {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--color-gray-100);
  }
  .cp-addons__title {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-700);
  }
  .cp-addons__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
  }
/* END_SECTION:collection-product-tabs */

/* START_SECTION:content-popover (INDEX:25) */
.content-popover {
    text-align: center;
  }

  .content-popover__trigger {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font: inherit;
  }

  .content-popover__dialog {
    position: fixed;
    inset: 0;
    width: min(92vw, var(--content-popover-max, 640px));
    height: fit-content;
    max-height: 85vh;
    margin: auto;
    overflow-y: auto;
    padding: 1.5rem;
    border: none;
    border-radius: 12px;
    background: var(--color-background, #fff);
    color: inherit;
  }

  .content-popover__dialog::backdrop {
    background: rgb(0 0 0 / 50%);
  }

  .content-popover__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .content-popover__close {
    flex: none;
    padding: 0.25rem;
    margin: -0.25rem -0.25rem 0 0;
    cursor: pointer;
    color: inherit;
  }

  .content-popover__item-heading {
    margin-top: 1.25rem;
  }
/* END_SECTION:content-popover */

/* START_SECTION:cta-banner (INDEX:26) */
.cta-banner .container__divider {
    width: 3rem;
    border-top-width: 2px;
  }
  .cta-banner .rte {
    max-width: none;
  }
  .cta-banner .rte :where([id]) {
    scroll-margin-top: calc(var(--header-height, 0px) + var(--margin-container));
  }
/* END_SECTION:cta-banner */

/* START_SECTION:dynamic-form (INDEX:28) */
.dynamic-form__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 560px;
  }

  /* Hidden inputs (CRM params) must not occupy a flex slot — else the row `gap`
     reserves empty space around each one. They still submit when display:none. */
  .dynamic-form__form input[type='hidden'] {
    display: none;
  }

  /* Invisible reCAPTCHA anchor out of layout flow — the badge is fixed-position
     (body-appended); this also clips Google's tall "invalid domain" error box
     that renders here on non-registered domains. No-op on the live domain. */
  .dynamic-form__recaptcha {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .dynamic-form__intro {
    margin-bottom: 16px;
  }

  .dynamic-form__actions {
    margin-top: 8px;
  }
/* END_SECTION:dynamic-form */

/* START_SECTION:editorial-tiles (INDEX:31) */
.editorial-tiles .tile-grid {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Category tab filter (NGE-869eaehzc) — legacy #category-filter parity. */
  .editorial-tiles__filter {
    display: block;
  }
  .editorial-tiles__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--s-5, 20px);
  }
  .editorial-tiles__tab {
    appearance: none;
    border: 1px solid rgba(15, 21, 27, 0.12);
    background: #fff;
    color: var(--ink, #4a4a4a);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    padding: 9px 16px;
    border-radius: var(--r-pill, 999px);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .editorial-tiles__tab:hover {
    border-color: var(--teal-cta, #35B2B6);
    color: var(--teal-600, #0D6A6D);
  }
  .editorial-tiles__tab.is-active {
    background: var(--teal-cta, var(--color-primary, #35B2B6));
    border-color: var(--teal-cta, var(--color-primary, #35B2B6));
    color: #fff;
  }
  /* `.tile-card` sets display:flex, which out-specifies the UA [hidden] rule —
     restore display:none for filtered-out tiles. */
  .editorial-tiles__filter .tile-card[hidden] {
    display: none;
  }

  .tile-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 2px 6px -3px rgba(15, 21, 27, 0.06);
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
    color: inherit;
  }
  .tile-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -10px rgba(15, 21, 27, 0.18), 0 6px 14px -4px rgba(15, 21, 27, 0.08);
  }

  .tile-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: block;
    background: var(--bg-subtle, #f6f1ea);
  }
  .tile-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms cubic-bezier(.2,.6,.2,1);
  }
  .tile-card:hover .tile-card__media img { transform: scale(1.04); }

  /* Optional image-ratio modifiers (default keeps 4/3). NGE-7761. */
  .editorial-tiles--ratio-1-1 .tile-card__media { aspect-ratio: 1 / 1; }
  .editorial-tiles--ratio-3-4 .tile-card__media { aspect-ratio: 3 / 4; }

  .editorial-tiles__intro {
    margin-top: 6px;
    color: var(--ink, #4a4a4a);
  }

  /* Caption pill — blush-700 background + white text (plp-intro parity) */
  .tile-card__caption {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 11px;
    background: var(--blush-700, #D88A7A);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--r-pill, 999px);
    box-shadow: 0 2px 8px -2px rgba(15, 21, 27, 0.18);
  }

  .tile-card__body {
    padding: var(--s-4, 16px) var(--s-5, 20px) var(--s-5, 20px);
    background: #fff;
    border-top: 1px solid rgba(15, 21, 27, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .tile-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
  }
  .tile-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-top: 2px;
  }
  /* Sale/from price in the theme primary (matches price.liquid current-price
     `.text-secondary`); original struck-through in muted grey. */
  .tile-card__price {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, var(--teal-cta, #35B2B6));
    letter-spacing: -0.005em;
  }
  .tile-card__compare {
    font-size: 13px;
    text-decoration: line-through;
    color: var(--ink-3, #757575);
    font-weight: 500;
  }
  .tile-card__arrow {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-subtle, #f6f1ea);
    color: var(--teal-600, #0D6A6D);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .tile-card__arrow svg { width: 14px; height: 14px; }
  .tile-card:hover .tile-card__arrow {
    background: var(--teal-cta, #35B2B6);
    color: #fff;
    transform: translateX(2px);
  }

  /* Comparison-tile extras (campaign-multiproduct) — spec bullets + CTA button.
     Only present when the tile carries specs/cta_label, so category/product
     tiles are unaffected. NGE-7761. */
  .tile-card__specs {
    list-style: none;
    padding: 0;
    margin: 2px 0 4px;
    display: grid;
    gap: 7px;
  }
  .tile-card__specs li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    color: var(--ink-3, #757575);
    line-height: 1.35;
  }
  .tile-card__specs li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.35em;
    width: 11px;
    height: 6px;
    border-left: 2.4px solid var(--teal-cta, #35B2B6);
    border-bottom: 2.4px solid var(--teal-cta, #35B2B6);
    transform: rotate(-45deg);
  }
  .tile-card__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-cta, var(--color-primary, #35B2B6));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 16px;
    border-radius: var(--r-pill, 999px);
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .tile-card:hover .tile-card__cta { background: var(--teal-600, #0D6A6D); }
/* END_SECTION:editorial-tiles */

/* START_SECTION:footer (INDEX:44) */
/* =================================================================
     Green layout — scoped under .footer-tq so Classic + Reduced
     layouts stay byte-identical. Token-driven; falls back to literal
     values when the Türkis design tokens aren't injected.
     ================================================================= */
  .footer-tq {
    background: var(--bg-subtle, #faf7f4);
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    padding: var(--s-10, 80px) 0 var(--s-7, 32px);
    /* flow-root prevents `.container .my-container` margin from collapsing
       through the wrapper — without this the beige bg would shrink to just
       the container's content height. */
    display: flow-root;
  }

  /* Top grid: brand (1.4fr) + 4 link columns (1fr). Collapses 5→2→1. */
  .footer-tq .footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: var(--s-7, 32px);
    padding-bottom: var(--s-7, 32px);
    border-bottom: 1px solid var(--line, rgba(15, 21, 27, 0.08));
  }
  @media (max-width: 56.25rem) {
    .footer-tq .footer-top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--s-6, 24px);
    }
    .footer-tq .footer-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 30rem) {
    .footer-tq .footer-top { grid-template-columns: 1fr; }
  }

  /* Brand column */
  .footer-tq .footer-logo {
    display: inline-block;
    margin-bottom: var(--s-3, 12px);
  }
  .footer-tq .footer-logo__img {
    height: 24px;
    width: auto;
    display: block;
  }
  .footer-tq .footer-logo--text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink, #4a4a4a);
    text-transform: uppercase;
    font-size: 16px;
  }
  .footer-tq .footer-logo__square {
    width: 14px;
    height: 14px;
    background: var(--teal-cta, #35B2B6);
    display: inline-block;
  }
  .footer-tq .footer-brand p {
    font-size: 14px;
    color: var(--ink-3, #757575);
    line-height: 1.55;
    max-width: 280px;
    margin: 0 0 var(--s-5, 20px);
  }

  /* Social row — 36px circular buttons, teal on hover. */
  .footer-tq .social-row {
    display: flex;
    gap: var(--s-2, 8px);
  }
  .footer-tq .social-row a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    color: var(--ink-2, #5c5c5c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast, 150ms) var(--ease-out, ease),
                color var(--dur-fast, 150ms) var(--ease-out, ease),
                border-color var(--dur-fast, 150ms) var(--ease-out, ease);
  }
  .footer-tq .social-row a:hover {
    background: var(--teal-cta, #35B2B6);
    border-color: var(--teal-cta, #35B2B6);
    color: #fff;
  }
  .footer-tq .social-row svg {
    width: 16px;
    height: 16px;
  }
  /* The shared `icon` snippet wraps the SVG in a `<div class="icon flex …">`.
     Without explicit sizing, the SVG collapses to 0×16 in the flex container
     and renders invisible. Force-fill the wrapper. */
  .footer-tq .social-row .icon {
    width: 16px;
    height: 16px;
    align-items: center;
  }
  .footer-tq .social-row .icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Link columns — uppercase tracked heading, soft body links. */
  .footer-tq .footer-col h5 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink, #4a4a4a);
    margin: 0 0 var(--s-4, 16px);
  }
  .footer-tq .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
  }
  .footer-tq .footer-col a {
    font-size: 14px;
    color: var(--ink-3, #757575);
    text-decoration: none;
    transition: color var(--dur-fast, 150ms) var(--ease-out, ease);
  }
  .footer-tq .footer-col a:hover {
    color: var(--teal-700, #0c5e60);
  }

  /* Middle row — payment + delivery chip groups. */
  .footer-tq .footer-mid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-5, 20px);
    padding: var(--s-5, 20px) 0;
    border-bottom: 1px solid var(--line, rgba(15, 21, 27, 0.08));
  }
  .footer-tq .footer-mid-group {
    display: flex;
    align-items: center;
    gap: var(--s-3, 12px);
    flex-wrap: wrap;
  }
  .footer-tq .footer-mid-group .label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-4, #939393);
    margin-right: var(--s-2, 8px);
  }
  /* Mobile: stack each group — heading stays on its own line (left), logos
     become a centered, evenly-wrapping row beneath. Tidier than the inline
     label+chips row when a group has many logos (esp. payment). Desktop keeps
     the inline layout. NGE-8051. */
  @media (max-width: 56.25rem) {
    .footer-tq .footer-mid-group {
      width: 100%;
      justify-content: flex-start;
    }
    .footer-tq .footer-mid-group .label {
      flex-basis: 100%;
      margin-right: 0;
      text-align: left;
    }
  }
  .footer-tq .payment-chip,
  .footer-tq .ship-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-sm, 6px);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2, #5c5c5c);
  }
  .footer-tq .ship-chip svg {
    width: 14px;
    height: 14px;
  }

  /* SVG / Image logo chips — drop chip frame entirely so the logo stays the
     visual focus. Larger height (24px) reads at parity with the mockup's
     text-based chips. Identical sizing across payment + delivery for visual
     consistency, per Türkis design system rules. */
  .footer-tq .payment-chip--svg,
  .footer-tq .ship-chip--img {
    background: transparent;
    border: none;
    padding: 0;
    height: auto;
    gap: 0;
  }
  .footer-tq .payment-chip__svg,
  .footer-tq .ship-chip__img {
    height: 24px;
    width: auto;
    max-width: 80px;
    object-fit: contain;
    display: block;
  }

  /* When wrapped in <a> (link to /pages/payment or /pages/shipping), keep
     the same dimensions and add a subtle hover-fade. */
  a.footer-tq__chip-link,
  .footer-tq a.payment-chip,
  .footer-tq a.ship-chip {
    text-decoration: none;
    transition: opacity var(--dur-fast, 150ms) var(--ease-out, ease);
  }
  .footer-tq a.payment-chip:hover,
  .footer-tq a.ship-chip:hover {
    opacity: 0.7;
  }

  /* Bottom row — copyright left + legal links right. */
  .footer-tq .footer-bottom {
    padding-top: var(--s-5, 20px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3, 12px);
    font-size: 12px;
    color: var(--ink-4, #939393);
  }
  .footer-tq .footer-bottom a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast, 150ms) var(--ease-out, ease);
  }
  .footer-tq .footer-bottom a:hover {
    color: var(--ink-2, #5c5c5c);
  }
  .footer-tq .legal-links {
    display: flex;
    gap: var(--s-5, 20px);
    flex-wrap: wrap;
  }

  /* Editor-only empty-state hint (only rendered when request.design_mode) */
  .footer-tq .footer-tq__editor-hint {
    padding: var(--s-6, 24px);
    margin-bottom: var(--s-6, 24px);
    border: 1px dashed rgba(15, 21, 27, 0.18);
    border-radius: var(--r-md, 10px);
    background: rgba(255, 255, 255, 0.6);
    color: var(--ink-3, #757575);
    font-size: 13px;
    line-height: 1.55;
  }
  .footer-tq .footer-tq__editor-hint strong { color: var(--ink, #4a4a4a); }
  .footer-tq .footer-tq__editor-hint p { margin: 8px 0 0; }
  .footer-tq .footer-tq__editor-hint ol { margin: 8px 0 0 20px; }
  .footer-tq .footer-tq__editor-hint code {
    background: rgba(15, 21, 27, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
  }
/* END_SECTION:footer */

/* START_SECTION:fullwidth-banner (INDEX:48) */
.fullwidth-banner {
    min-height: var(--banner-min-height, 500px);
  }

  .fullwidth-banner__image img {
    min-height: var(--banner-min-height, 500px);
  }

  .fullwidth-banner--mobile-stacked {
    min-height: auto;
  }

  .fullwidth-banner--mobile-stacked .fullwidth-banner__image-container img {
    min-height: auto;
  }

  /* Horizontal offset for content box (desktop only) */
  .fullwidth-banner .container__content {
    padding-left: var(--content-offset-x, 0);
    padding-right: var(--content-offset-x, 0);
  }

  /* When upload overlay is active, reduce price badge z-index so overlay appears on top */
  .fullwidth-banner:has(.uploader-cover.-visible) .price-badge-wrapper {
    z-index: 5;
  }
/* END_SECTION:fullwidth-banner */

/* START_SECTION:help-center-v2 (INDEX:51) */
.help-center-v2 {
    text-align: left;
  }

  /* Hero */
  .help-center-v2__hero {
    padding-bottom: 24px;
  }

  .help-center-v2__section-heading {
    font-weight: 400;
    color: var(--color-gray-800);
    margin: 0 0 16px;
  }

  /* Chat / search slot */
  .help-center-v2__assistant {
    margin: 0 0 32px;
  }

  .help-center-v2__chat-frame {
    display: block;
    width: 100%;
    height: 600px;
    border: none;
    border-radius: var(--r-lg, 16px);
  }

  .help-center-v2__search-field {
    position: relative;
    width: 100%;
    max-width: 490px;
  }

  .help-center-v2__search-icon {
    position: absolute;
    top: 50%;
    right: 0.875rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-gray-400);
  }

  .help-center-v2__search-input {
    width: 100%;
    padding: 10px 50px 10px 14px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--r-sm, 6px);
    font-size: 14px;
    background: var(--color-white, #fff);
    outline-offset: 2px;
  }

  .help-center-v2__search-input:focus {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Quick links */
  .help-center-v2__quick-links {
    margin: 0 0 40px;
  }

  .help-center-v2__quick-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .help-center-v2__quick-link-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    background: var(--color-white, #fff);
    border-radius: var(--r-md, 10px);
    text-align: center;
  }

  .help-center-v2__quick-link-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
  }

  .help-center-v2__quick-link-icon svg {
    width: 100%;
    height: 100%;
  }

  .help-center-v2__quick-link-icon svg path {
    fill: var(--color-primary);
  }

  .help-center-v2__quick-link-image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .help-center-v2__quick-link-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gray-800);
    text-decoration: none;
  }

  .help-center-v2__quick-link-label:hover {
    text-decoration: underline;
  }

  /* Categories layout: sidebar (desktop) / wrapped pills (mobile) + content pane */
  .help-center-v2__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .help-center-v2__category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .help-center-v2__category-btn {
    display: block;
    width: 100%;
    font-weight: 400;
    font-size: 15px;
    color: var(--color-gray-700);
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-bottom: 3px solid transparent;
    background: none;
    padding: 6px 4px;
    text-align: left;
    transition:
      color 0.2s,
      border-color 0.2s;
  }

  .help-center-v2__category-btn:hover {
    color: var(--color-primary);
  }

  .help-center-v2__category-btn[aria-selected='true'] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 500;
  }

  .help-center-v2__content-heading {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-gray-800);
    margin: 0 0 16px;
  }

  .help-center-v2__panel[aria-hidden='true'] {
    display: none;
  }

  /* Accordion questions (native <details>) */
  .help-center-v2__questions {
    display: flex;
    flex-direction: column;
  }

  .help-center-v2__question {
    border-bottom: 1px solid var(--color-gray-200);
    scroll-margin-top: 120px;
  }

  .help-center-v2__question-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-gray-800);
    cursor: pointer;
    list-style: none;
  }

  .help-center-v2__question-summary::-webkit-details-marker {
    display: none;
  }

  .help-center-v2__question-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
    transition: transform 0.2s;
  }

  .help-center-v2__question[open] .help-center-v2__question-chevron {
    transform: rotate(180deg);
  }

  .help-center-v2__question-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-gray-800);
    padding: 0 40px 20px 0;
  }

  .help-center-v2__question-body p {
    margin: 0 0 10px;
  }

  /* Search results */
  .help-center-v2__search-results {
    margin-top: 1.5rem;
  }

  .help-center-v2__search-results[aria-hidden='true'] {
    display: none;
  }

  .help-center-v2__no-results {
    color: var(--color-gray-400);
    font-size: 15px;
    margin-top: 1.5rem;
  }

  .help-center-v2__no-results[aria-hidden='true'] {
    display: none;
  }

  /* Contact CTA banner — full-bleed warm background */
  .help-center-v2__cta {
    margin-top: 40px;
    margin-left: calc(-50vw + 50%);
    width: 100vw;
    padding: 40px calc(50vw - 50%);
    background-color: var(--bg-hover, #f0e9df);
    text-align: center;
  }

  .help-center-v2__cta .help-center-v2__section-heading {
    text-align: center;
  }

  @media screen and (min-width: 640px) {
    .help-center-v2__quick-links-grid {
      grid-template-columns: repeat(4, 1fr);
    }

    .help-center-v2__layout {
      grid-template-columns: 240px 1fr;
      gap: 40px;
    }

    .help-center-v2__category-list {
      flex-direction: column;
      flex-wrap: nowrap;
    }

    .help-center-v2__category-btn {
      border-bottom: none;
      border-left: 3px solid transparent;
      padding: 8px 12px;
    }

    .help-center-v2__category-btn[aria-selected='true'] {
      border-bottom-color: transparent;
      border-left-color: var(--color-primary);
    }
  }
/* END_SECTION:help-center-v2 */

/* START_SECTION:help-center (INDEX:52) */
.help-center {
    text-align: center;
  }

  /* Hero */
  .help-center__hero {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--color-gray-200);
  }

  /* Section headings */
  .help-center__section-heading {
    font-weight: 400;
    color: var(--color-gray-800);
    text-align: center;
    margin: 20px 0 20px;
  }

  /* Suggested answers - left-aligned within centered block */
  .help-center__suggested {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 0 20px;
    margin: 0 auto 0;
    list-style: none;
    width: fit-content;
  }

  /* Full-width divider after suggested answers via wrapper */
  .help-center__suggested-wrap {
    border-bottom: 1px solid var(--color-gray-200);
  }

  .help-center__suggested-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2px 0;
  }

  .help-center__suggested-image {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }

  .help-center__suggested-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
  }

  /* Recolor the scraped inline SVG (its paths carry no fill) to the brand color */
  .help-center__suggested-icon svg {
    width: 100%;
    height: 100%;
  }

  .help-center__suggested-icon svg path {
    fill: var(--color-primary);
  }

  .help-center__suggested-link {
    font-size: 15px;
    color: var(--color-gray-400);
    text-decoration: none;
  }

  .help-center__suggested-link:hover {
    text-decoration: underline;
  }

  /* Search */
  .help-center__search-wrap {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-gray-200);
  }

  .help-center__search-field {
    position: relative;
    width: 100%;
    max-width: 490px;
    margin: 0 auto;
  }

  .help-center__search-icon {
    position: absolute;
    top: 50%;
    right: 0.875rem;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-gray-400);
  }

  .help-center__search-input {
    width: 100%;
    padding: 6px 50px 6px 10px;
    border: 1px solid var(--color-gray-200);
    border-radius: 2px;
    font-size: 14px;
    background: var(--color-white, #fff);
    outline-offset: 2px;
  }

  .help-center__search-input:focus {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* Tabs section */
  .help-center__tabs-section {
    padding: 20px 0;
  }

  .help-center__tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
  }

  .help-center__tab-btn {
    display: block;
    font-weight: 400;
    color: var(--color-gray-700);
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-bottom: 4px solid transparent;
    background: none;
    transition:
      color 0.2s,
      border-color 0.2s;
    white-space: nowrap;
  }

  .help-center__tab-btn:hover {
    color: var(--color-primary);
  }

  .help-center__tab-btn[aria-selected='true'] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  /* TOC - table of contents within tab panel (collapsible) */
  .help-center__toc-details {
    margin: 0 0 30px;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
  }

  .help-center__toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    font-size: 17px;
    font-weight: 500;
    color: var(--color-gray-800);
    cursor: pointer;
    list-style: none;
  }

  .help-center__toc-summary::-webkit-details-marker {
    display: none;
  }

  .help-center__toc-chevron {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
    transition: transform 0.2s;
  }

  .help-center__toc-details[open] .help-center__toc-chevron {
    transform: rotate(180deg);
  }

  .help-center__toc {
    list-style: none;
    padding: 0 0 14px;
    margin: 0;
    text-align: left;
  }

  .help-center__toc-link {
    font-size: 15px;
    color: var(--color-gray-400);
    text-decoration: underline;
    line-height: 1.8;
  }

  .help-center__toc-link:hover {
    color: var(--color-gray-500);
  }

  /* First CTA (between TOC and questions) */
  .help-center__mid-cta {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid var(--color-gray-200);
  }

  /* Questions wrapper - full-width background, gray by default */
  .help-center__questions-wrap {
    background-color: var(--color-gray-100);
    margin-left: calc(-50vw + 50%);
    width: 100vw;
    padding: 30px calc(50vw - 50%) 42px;
  }

  .help-center__questions-wrap.color-scheme-primary {
    background-color: var(--color-primary-50);
  }

  /* Tab panels */
  .help-center__panel {
    display: block;
  }

  .help-center__panel[aria-hidden='true'] {
    display: none;
  }

  /* Questions */
  .help-center__questions {
    text-align: left;
  }

  .help-center__question {
    margin-bottom: 0;
    /* Sticky-header offset for native anchor jumps (JS scroll has its own offset) */
    scroll-margin-top: 120px;
  }

  .help-center__question-heading {
    font-weight: 500;
    color: var(--color-gray-800);
    margin: 20px 0 10px;
  }

  .help-center__question-text {
    font-size: 14px;
    line-height: 1.33;
    color: var(--color-gray-800);
    margin: 0 0 10px;
  }

  .help-center__question-text p {
    margin: 0 0 10px;
  }

  /* "Vers le haut" link */
  .help-center__back-to-top {
    margin: 4px 0 10px;
    text-align: left;
  }

  .help-center__back-to-top-link {
    font-size: 14px;
    color: var(--color-gray-400);
    text-decoration: none;
  }

  .help-center__back-to-top-link svg {
    color: var(--color-success);
  }

  .help-center__back-to-top-link:hover {
    text-decoration: underline;
  }

  .help-center__back-to-top-icon {
    display: inline-block;
    width: 10px;
    height: 11px;
    margin-left: 4px;
    vertical-align: middle;
  }

  /* Search results */
  .help-center__search-results {
    text-align: left;
    margin-top: 1.5rem;
  }

  .help-center__search-results[aria-hidden='true'] {
    display: none;
  }

  .help-center__no-results {
    text-align: center;
    color: var(--color-gray-400);
    font-size: 15px;
    margin-top: 1.5rem;
  }

  .help-center__no-results[aria-hidden='true'] {
    display: none;
  }

  /* CTA bottom */
  .help-center__cta {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid var(--color-gray-400);
  }

  /* Mobile defaults — override for desktop */
  .help-center__tab-list {
    gap: 4px;
  }

  .help-center__tab-btn {
    font-size: 14px;
    padding: 4px 8px;
  }

  .help-center__section-heading {
    font-size: 22px;
  }

  .help-center__question-heading {
    font-size: 20px;
  }

  @media screen and (min-width: 640px) {
    .help-center__tab-list {
      gap: 0;
    }

    .help-center__tab-btn {
      font-size: 18px;
      padding: 4px 12px;
    }

    .help-center__section-heading {
      font-size: 30px;
    }

    .help-center__question-heading {
      font-size: 24px;
    }
  }
/* END_SECTION:help-center */

/* START_SECTION:hero (INDEX:54) */
/* === Hero section — wrapper-scoped padding/background ===
     The shared inner layout (.hero__container, .hero-grid, .hero-copy,
     .hero-visual, .btn-primary, .hero-slide*, etc.) lives in
     src/assets/css/_tailwind/components/hero-tq.css so the same look + feel
     applies to article-hero.liquid too. Keep only the per-section wrapper
     rules here. */
  .shopify-section--hero-tq {
    background: var(--bg-surface, #ffffff);
    /* Top gap matches the announcement bar's vertical padding (lg:py-2 = 8px)
       so the hero sits as tight under the header as the bar does. Bottom
       spacing before the next section is kept. NGE-8051. */
    padding: 0.5rem 0 var(--s-8, 40px);
    overflow: hidden;
  }
  @media (max-width: 40rem) {
    .shopify-section--hero-tq {
      /* match announcement bar py-1.5 = 6px on mobile */
      padding: 0.375rem 0 var(--s-7, 32px);
    }
    /* Hide the lead on phones when `show_lead_mobile` is off, so the CTA stays
       above the fold. Desktop always shows it. NGE-8562. */
    .lead.hide-on-mobile { display: none; }
  }

  /* === Hero checklist — optional checkmark bullet list below the lead ===
     1:1 with the PDP `.console-usps`. Lives in this section {% stylesheet %}
     (unlayered) ON PURPOSE so it beats the @tailwindcss/typography `.rte`
     rules — those sit in a CSS @layer that any rule in hero-tq.css (@layer
     components) cannot override, which is why the default list bullet + wide
     prose margins leaked through. Same escape hatch the PDP uses. NGE-8051. */
  .hero-checklist {
    margin: 0 0 var(--s-7, 32px);
  }
  /* Reset BOTH ul and ol — the rich-text editor may produce either; never show
     the prose list marker (checkmarks come from li::before). */
  .hero-checklist ul,
  .hero-checklist ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }
  /* Checkmark absolutely positioned (hanging indent) so the rich-text <strong>
     and the trailing text stay on one inline flow. */
  .hero-checklist li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink-2, #5c5c5c);
    letter-spacing: -0.005em;
  }
  .hero-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 18px;
    height: 18px;
    background-color: var(--teal-cta, #35b2b6);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center / contain no-repeat;
  }
  .hero-checklist strong {
    font-weight: 700;
    color: var(--ink, #4a4a4a);
  }
/* END_SECTION:hero */

/* START_SECTION:logo-section (INDEX:57) */
.logo-section__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  @media screen and (min-width: 768px) {
    .logo-section__grid {
      gap: 1.5rem;
      grid-template-columns: repeat(var(--logos-per-row, 5), 1fr);
    }
  }

  .logo-section__grid--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .logo-section__grid--centered > li {
    width: calc((100% - 2rem) / 3);
  }

  @media screen and (min-width: 768px) {
    .logo-section__grid--centered {
      gap: 1.5rem;
    }

    .logo-section__grid--centered > li {
      width: calc((100% - (var(--logos-per-row, 5) - 1) * 1.5rem) / var(--logos-per-row, 5));
    }
  }
/* END_SECTION:logo-section */

/* START_SECTION:main-collection (INDEX:69) */
/* PLP filter bar — sticky, matches mockup .plp-filter-bar */
  .plp-filter-bar {
    position: sticky;
    top: var(--header-h, 64px);
    z-index: 50;
    background: var(--bg-surface, #ffffff);
    border-bottom: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    transition: box-shadow var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  /* The filter bar's `.container` is nested one level inside `.plp-filter-bar`,
     so `section-spacing`'s `#shopify-section > .container` direct-child margin
     reset never reaches it, leaving its `--margin-container` (24/48px) block
     margin as a stray gap above the product grid. Zero it here. NGE-7761 (#3.4). */
  .plp-filter-bar > .container {
    margin-block: 0;
  }
  .plp-filter-bar.is-stuck {
    box-shadow: 0 4px 12px -8px rgba(15, 21, 27, 0.10);
  }
  .plp-filter-bar-inner {
    display: flex;
    align-items: center;
    gap: var(--s-4, 16px);
    /* Block-only — don't wipe container__content's px-site (site horizontal
       padding), otherwise the bar reaches further left/right than the grid. */
    padding-block: var(--s-3, 12px);
    min-height: 60px;
  }

  .plp-results-count {
    font-size: 13px;
    color: var(--ink-3, #757575);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -0.003em;
  }
  .plp-results-count strong {
    color: var(--ink, #4a4a4a);
    font-weight: 700;
  }

  .plp-filter-chips {
    display: flex;
    align-items: center;
    gap: var(--s-2, 8px);
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--s-2, 8px));
    padding: var(--s-1, 4px) var(--s-2, 8px);
  }
  .plp-filter-chips::-webkit-scrollbar { display: none; }

  .plp-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 36px;
    border: 1.5px solid var(--teal-cta, #35B2B6);
    color: var(--teal-cta, #35B2B6);
    background: transparent;
    border-radius: var(--r-pill, 999px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .plp-filter-chip:hover {
    background: var(--teal-cta, #35B2B6);
    color: #fff;
  }
  .plp-filter-chip[aria-pressed='true'] {
    background: var(--teal-cta, #35B2B6);
    color: #fff;
  }
  .plp-filter-chip[aria-pressed='true']:hover {
    background: var(--teal-700, #0D6A6D);
    border-color: var(--teal-700, #0D6A6D);
  }

  .plp-filter-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ink-3, #757575);
    flex-shrink: 0;
    white-space: nowrap;
  }
  .plp-filter-meta svg {
    width: 16px;
    height: 16px;
    color: var(--teal-cta, #35B2B6);
  }
  .plp-filter-meta strong {
    color: var(--ink, #4a4a4a);
    font-weight: 700;
  }

  .plp-sort {
    flex-shrink: 0;
    margin-left: auto;
  }
  /* The shared sort-by snippet renders label + select through form-group
     (a stacked grid) — lay them out as the mockup's inline row instead. */
  .plp-sort .form-group {
    display: flex;
    align-items: center;
    gap: var(--s-2, 8px);
  }
  /* form-select ships its own chevron icon; the mockup select carries one
     as a background-image below, so drop the snippet's to avoid doubling. */
  .plp-sort .form-select__icon-wrapper {
    display: none;
  }
  .plp-sort label {
    font-size: 12.5px;
    color: var(--ink-3, #757575);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .plp-sort select {
    appearance: none;
    -webkit-appearance: none;
    width: auto;
    background: transparent;
    border: 1px solid var(--line, rgba(15, 21, 27, 0.12));
    border-radius: var(--r-md, 10px);
    padding: 6px 28px 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #4a4a4a);
    cursor: pointer;
    font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .plp-sort select:hover { border-color: var(--ink-4, #939393); }

  /* Product grid — mockup .plp-grid-section + .product-grid.
     OUTER section padding (above filter-bar / below grid) comes from the
     `section-spacing` snippet via container_spacing. The INTERNAL gap
     between the filter-bar and the grid is a fixed design value (mockup
     parity) — not user-tunable, because shrinking it collapses the visual
     hierarchy.

     The `container` snippet that wraps the grid emits an inner
     `.container__content` element with its own `lg:py-8` (≈32 px) padding,
     so we zero the outer .plp-grid-section padding and tighten the inner
     to keep the filter-to-grid distance compact (mockup ~12 px). */
  .plp-grid-section {
    padding-block: 0;
  }
  .plp-grid-section > .container__content {
    padding-block: var(--s-3, 12px);
  }
  .product-grid {
    display: grid;
    gap: var(--s-5, 20px);
  }

  /* Card-height alignment across the grid. The product loop wraps each card
     in <li>, so the grid item is the <li> (not the <a class='product-card'>
     like in bestsellers). Without these rules the <a> sizes to its own
     content and `.product-info` doesn't get a stretched parent, so
     `margin-top: auto` on .product-price has no space to claim → CTAs
     stack at different heights across cards in the same row.

     Make <li> a flex column, let the card flex-grow to its full height,
     then pin .product-price + .product-make to the card bottom via
     auto-margin. Works whether or not the card has a .product-detail
     subtitle (cards with one keep using bestsellers' `flex: 1`; cards
     without one fall back to this auto-margin). */
  .plp-grid-section .product-grid > li {
    display: flex;
  }
  .plp-grid-section .product-grid > li > .product-card {
    flex: 1;
  }
  .plp-grid-section .product-price {
    margin-top: auto;
  }
  /* Keep each money value (amount + €) on one line — never break the currency
     symbol onto the next line on narrow cards. NGE-9097. */
  .plp-grid-section .product-price .now,
  .plp-grid-section .product-price .was {
    white-space: nowrap;
  }

  /* Optional heading / intro above the filter bar */
  .plp-intro-inner {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    padding-block: var(--s-4, 16px);
  }

  /* Empty state — shown when the collection/filter yields zero products */
  .plp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3, 12px);
    text-align: center;
    padding-block: var(--s-10, 80px);
  }

  /* Promo tile — merchant editorial cell inside the product grid */
  .plp-promo-tile {
    display: flex;
  }
  .plp-promo-tile__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s-2, 8px);
    overflow: hidden;
    border-radius: var(--r-lg, 16px);
    background: var(--bg-subtle, rgba(15, 21, 27, 0.04));
    text-decoration: none;
    color: var(--ink, #4a4a4a);
  }
  .plp-promo-tile__inner img {
    width: 100%;
    height: auto;
    display: block;
  }
  .plp-promo-tile__content {
    padding: var(--s-3, 12px);
  }

  /* View-all clear-filter button */
  .plp-view-all-wrap {
    display: flex;
    justify-content: center;
    padding: var(--s-6, 24px) 0 var(--s-3, 12px);
  }
  .plp-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: transparent;
    color: var(--teal-cta, #35B2B6);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    border: 1.5px solid var(--teal-cta, #35B2B6);
    border-radius: var(--r-pill, 999px);
    text-decoration: none;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .plp-view-all:hover {
    background: var(--teal-cta, #35B2B6);
    color: #fff;
  }

  @media (max-width: 45rem) {
    .plp-filter-bar-inner {
      flex-wrap: wrap;
      gap: var(--s-2, 8px);
      /* Block-only — the `padding: … 0` shorthand here was wiping container__content's
         px-site (padding-inline), so the count clipped at the left edge and the
         chips' negative margin overflowed the viewport. Match the desktop rule. */
      padding-block: var(--s-2, 8px);
      min-height: 0;
    }
    .plp-filter-meta { display: none; }
    .plp-sort label { display: none; }
    .plp-filter-chips { order: 99; flex: 1 0 100%; }
  }
/* END_SECTION:main-collection */

/* START_SECTION:menu-drawer (INDEX:80) */
/* Two-level drill-down mobile menu (turquoise only). Scoped to the drawer
     modifier so the legacy accordion drawer is untouched. NGE-8051. */
  .menu-drawer--drilldown .mdd {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    display: block;
  }
  /* Leave a strip of the page visible on the right so the drawer reads as an
     overlay (mockup `min(88vw,380px)`). NGE-8051. */
  .menu-drawer--drilldown .drawer__body {
    max-width: min(86vw, 360px);
  }
  .mdd-level {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-surface, #ffffff);
    padding: var(--s-4, 16px);
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .mdd-l0 {
    transform: translateX(0);
  }
  .mdd.is-drilled .mdd-l0 {
    transform: translateX(-100%);
  }

  /* L1 sub-panels: render ONLY the active one. A transform-only hide proved
     unreliable in production — inactive panels stayed at x=0 and stacked, so the
     last panel in the DOM (Fotolibri) always painted on top regardless of which
     opener was tapped. Using `display` makes stacking impossible: exactly one
     panel is ever in the render tree. Extra selector depth beats any generic
     rule and the level base styles. NGE-8051. */
  .menu-drawer--drilldown .mdd .mdd-l1 {
    display: none;
    transform: none;
  }
  .menu-drawer--drilldown .mdd.is-drilled .mdd-l1.is-active {
    display: flex;
    animation: mdd-l1-in var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1))
      both;
  }
  @keyframes mdd-l1-in {
    from {
      transform: translateX(14%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Search */
  .mdd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    margin-bottom: var(--s-3, 12px);
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-pill, 999px);
    background: var(--bg-subtle, #faf7f4);
  }
  .mdd-search__icon {
    color: var(--ink-4, #939393);
    flex-shrink: 0;
  }
  .mdd-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ink, #4a4a4a);
    outline: none;
  }

  /* Category rows */
  .mdd-list {
    display: flex;
    flex-direction: column;
  }
  .mdd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink, #4a4a4a);
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-2, rgba(15, 21, 27, 0.06));
    cursor: pointer;
    text-decoration: none;
  }
  .mdd-item:hover {
    color: var(--teal-600, #0d6a6d);
  }
  .mdd-chevron {
    color: var(--ink-4, #939393);
    flex-shrink: 0;
  }

  /* Account / help / cart — directly after the nav list (mockup parity), not
     pinned to the bottom of the screen. NGE-8051. */
  .mdd-icons {
    margin-top: var(--s-2, 8px);
    padding-top: var(--s-3, 12px);
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    display: flex;
    flex-direction: column;
  }

  /* Level 1 — back (category headline in accent green) + image sub-items */
  .mdd-back {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 8px 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--teal-cta, #35b2b6);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    cursor: pointer;
  }
  .mdd-sub {
    display: flex;
    flex-direction: column;
  }
  /* Row: thumbnail · bold label · arrow (links to the sub-category). */
  .mdd-subitem {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 4px;
    font-size: 15px;
    color: var(--ink, #4a4a4a);
    text-decoration: none;
    border-bottom: 1px solid var(--line-2, rgba(15, 21, 27, 0.06));
  }
  .mdd-subitem:hover {
    color: var(--teal-600, #0d6a6d);
  }
  .mdd-subitem__media {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--r-sm, 8px);
    overflow: hidden;
    background: var(--bg-subtle, #faf7f4);
  }
  .mdd-subitem__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .mdd-subitem__label {
    flex: 1;
    min-width: 0;
    font-weight: 700;
  }
  .mdd-subitem__arrow {
    color: var(--ink-4, #939393);
    flex-shrink: 0;
  }
/* END_SECTION:menu-drawer */

/* START_SECTION:multi-product-configurator (INDEX:81) */
.section-multi-product-configurator {
    min-height: 80dvh;
  }

  .section-multi-product-configurator #root {
    min-height: 70dvh;
  }

  /* Loading state */
  .section-multi-product-configurator.loading {
    pointer-events: none;
    opacity: 0.7;
  }

  .section-multi-product-configurator.loading::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #000;
    border-radius: 50%;
    animation: mpc-spin 0.8s linear infinite;
    z-index: 9999;
  }

  @keyframes mpc-spin {
    to {
      transform: rotate(360deg);
    }
  }
/* END_SECTION:multi-product-configurator */

/* START_SECTION:newsletter-welcome (INDEX:82) */
.shopify-section--newsletter-welcome {
    background: var(--bg-surface, #ffffff);
    /* Vertical padding driven by `container_spacing` via the
       `section-spacing` snippet — don't hardcode here. */
  }

  .welcome-newsletter {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: var(--teal-panel, #00787B);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 12px -2px rgba(15,21,27,0.06));
    min-height: 280px;
  }
  @media (max-width: 56.25rem) {
    .welcome-newsletter { grid-template-columns: 1fr; min-height: 0; }
    /* Stacked: image on top, copy below (UX). Desktop keeps image-right. NGE-8051. */
    .welcome-newsletter__visual { order: -1; }
    .welcome-newsletter__copy { order: 0; }
  }

  .welcome-newsletter__copy {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  @media (max-width: 45rem) {
    .welcome-newsletter__copy { padding: var(--s-6, 24px) var(--s-5, 20px); }
  }

  .welcome-newsletter__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3, 12px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #FFB3B8;
    margin: 0 0 var(--s-3, 12px);
  }
  .welcome-newsletter__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: #FFB3B8;
  }

  .welcome-newsletter__heading {
    color: #fff;
    font-weight: 700;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.15;
    margin: 0 0 var(--s-2, 8px);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .welcome-newsletter__heading em,
  .welcome-newsletter__heading strong {
    font-style: normal;
    font-weight: 700;
    color: #FFB3B8;
  }
  @media (max-width: 45rem) {
    .welcome-newsletter__heading { font-size: 22px; line-height: 1.2; }
    /* Stack input + submit vertically and let the submit fill the row so it
       reads as a full-width CTA on mobile per design rule "every button
       full-width on mobile where it makes sense section-wise". */
    .welcome-newsletter__form > div > div:first-child {
      flex-direction: column;
      align-items: stretch;
      gap: var(--s-3, 12px);
    }
    .welcome-newsletter__submit { width: 100%; }
  }

  .welcome-newsletter__lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--s-4, 16px);
    max-width: 480px;
  }

  /* Form overrides — newsletter-form snippet outputs Tailwind grids; we
     restyle its children for the mockup pill input + pill button. Styling
     piggybacks on the snippet's BEM classes (form-input__field,
     form-checkbox__field) so we don't bleed pill styles onto the
     consent checkbox. */
  .welcome-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    margin: 0;
    max-width: 440px;
  }
  .welcome-newsletter__form > div {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
  }
  /* Email row: input + submit side-by-side */
  .welcome-newsletter__form > div > div:first-child {
    display: flex;
    gap: var(--s-2, 8px);
    align-items: center;
  }
  /* Hide the "Email" label entirely — the placeholder is the only label needed */
  .welcome-newsletter__form .form-group__inner { display: none; }
  .welcome-newsletter__form .form-group,
  .welcome-newsletter__form .form-group__container,
  .welcome-newsletter__form .form-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    width: 100%;
  }

  /* Email input — pill style */
  .welcome-newsletter__form .form-input__field {
    width: 100%;
    height: 44px;
    padding: 0 var(--s-4, 16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--r-pill, 999px);
    font: inherit;
    font-size: 14px;
    color: var(--ink, #4a4a4a);
    background: #fff;
    transition: border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .welcome-newsletter__form .form-input__field:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
  }
  .welcome-newsletter__form .form-input__field::placeholder { color: var(--ink-5, #b8b8b8); }

  .welcome-newsletter__submit {
    background: #fff;
    color: var(--teal-cta, #35B2B6);
    height: 44px;
    padding: 0 22px;
    border: none;
    border-radius: var(--r-pill, 999px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .welcome-newsletter__submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  .welcome-newsletter__submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
  }
  .welcome-newsletter__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* GDPR consent checkbox — small native checkbox + inline label.
     Global theme CSS adds margin-left:8px on .form-checkbox__inner and
     padding-left:24px / margin-left:-24px on .form-checkbox__label
     (legacy "offset-label" pattern). We zero those so the checkbox sits
     directly next to its text. */
  .welcome-newsletter__form .form-checkbox {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
  }
  .welcome-newsletter__form .form-checkbox__container {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    align-self: center;
  }
  .welcome-newsletter__form .form-checkbox__field {
    /* Native checkbox — reset any pill styles that may bleed through. */
    width: 13px;
    height: 13px;
    min-width: 13px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    background: transparent;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: #FFB3B8;
    cursor: pointer;
  }
  .welcome-newsletter__form .form-checkbox__inner {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    align-self: center;
  }
  .welcome-newsletter__form .form-checkbox__label {
    color: rgba(255, 255, 255, 0.75);
    font-size: 11.5px;
    line-height: 1.4;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: inline;
  }

  .welcome-newsletter__note {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    margin: 10px 0 0;
    letter-spacing: 0.01em;
  }

  /* Right visual */
  .welcome-newsletter__visual {
    height: 100%;
    min-height: 180px;
    position: relative;
    overflow: hidden;
    background: var(--bg-subtle, #FAF7F4);
  }
  .welcome-newsletter__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .welcome-newsletter:hover .welcome-newsletter__visual img { transform: scale(1.03); }
  @media (max-width: 56.25rem) {
    .welcome-newsletter__visual { aspect-ratio: 16 / 9; min-height: 220px; }
  }

  /* Posted-successfully state — center the success message on the teal panel */
  .welcome-newsletter__form .form__success {
    color: #fff;
    font-weight: 600;
    margin: 0;
    padding: var(--s-3, 12px) 0;
  }
  .welcome-newsletter__form .form__errors {
    color: #FFD7D9;
    font-size: 13px;
    margin: 0 0 var(--s-2, 8px);
  }

  /* =================================================================
     SLIM PRE-FOOTER BAND — non-homepage pages
     Full-bleed teal band (mockup `.nl-prefooter`): copy left, form right,
     vertically centred. Reuses `.welcome-newsletter__form` for the pill
     input + consent fine print, so only the band layout is new here.
     ================================================================= */
  .slim-newsletter {
    background: var(--teal-panel, #00787B);
    padding: var(--s-4, 16px) 0;
  }
  @media (max-width: 56.25rem) {
    .slim-newsletter { padding: var(--s-6, 24px) 0; }
  }

  .slim-newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-8, 40px);
    flex-wrap: wrap;
  }

  .slim-newsletter__copy {
    flex: 1 1 320px;
    min-width: 0;
  }

  .slim-newsletter__heading {
    color: #fff;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
  }
  .slim-newsletter__heading em,
  .slim-newsletter__heading strong {
    font-style: normal;
    font-weight: 700;
    color: #FFB3B8;
  }

  .slim-newsletter__action {
    flex: 0 0 auto;
    width: 440px;
    max-width: 100%;
    /* Stay right-aligned even when the copy column is omitted
       (both slim_heading and heading blank). */
    margin-left: auto;
  }

  @media (max-width: 56.25rem) {
    .slim-newsletter__inner {
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: var(--s-5, 20px);
    }
    .slim-newsletter__copy { flex: 0 0 auto; width: 100%; }
    .slim-newsletter__action { width: 100%; }
  }
/* END_SECTION:newsletter-welcome */

/* START_SECTION:newsletter (INDEX:83) */
.newsletter--fullwidth {
    min-height: var(--newsletter-min-height, 500px);
  }

  .newsletter--fullwidth__image img {
    min-height: var(--newsletter-min-height, 500px);
  }

  .newsletter--fullwidth--mobile-stacked {
    min-height: auto;
  }

  .newsletter--fullwidth--mobile-stacked .newsletter--fullwidth__image-container img {
    min-height: auto;
  }
/* END_SECTION:newsletter */

/* START_SECTION:occasion-picker (INDEX:84) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  /* Section: warm beige ground, tighter vertical rhythm than full sections */
  .shopify-section--occasion-picker {
    background: var(--bg-subtle, #FAF7F4);
  }
  

  /* .section-head, h2 (incl. --compact variant), .section-link — global rules in snippets/theme-turquoise.liquid */

  /* Pills grid */
  .occasion-pills {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4, 16px);
  }
  @media (max-width: 45rem) {
    .occasion-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3, 12px); }
  }

  .occasion-pill {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .occasion-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(53, 178, 182, 0.3);
    box-shadow: 0 12px 28px -10px rgba(15, 21, 27, 0.18),
                0 4px 10px -4px rgba(15, 21, 27, 0.08);
  }

  .occasion-pill .occ-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bg-subtle, #FAF7F4);
    position: relative;
  }
  .occasion-pill .occ-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .occasion-pill:hover .occ-img img { transform: scale(1.04); }

  .occasion-pill .text { padding: 14px 18px 16px; }
  .occasion-pill .label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 2px;
  }
  .occasion-pill .suggestion {
    font-size: 12px;
    color: var(--ink-3, #757575);
    letter-spacing: -0.002em;
    line-height: 1.3;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .occasion-pill .suggestion::after {
    content: '→';
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
    display: inline-block;
  }
  .occasion-pill:hover .suggestion::after { transform: translateX(3px); }

  @media (max-width: 45rem) {
    .occasion-pill .text { padding: 12px 14px 14px; }
    .occasion-pill .label { font-size: 14px; }
    .occasion-pill .suggestion { font-size: 11.5px; }
  }
/* END_SECTION:occasion-picker */

/* START_SECTION:payment-methods (INDEX:85) */
.payment-methods__list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
  }
  /* In-content tiles (not the footer's micro chips): white card, thin border —
     same visual language as the gallery's add-on tiles. */
  .payment-methods__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200);
    border-radius: 0.5rem;
  }
  .payment-methods__svg {
    height: 32px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    display: block;
  }
/* END_SECTION:payment-methods */

/* START_SECTION:pdp-about (INDEX:86) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-about {
    background: var(--bg-surface, #ffffff);
  }
  /* Per-campaign background override — paints the content wrapper only when a
     merchant sets a color (blank keeps the section's --bg-surface band). NGE-7761. */
  .pdp-about-section {
    background: var(--about-bg, transparent);
  }

  .about-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-10, 80px);
    align-items: center;
  }
  /* No about image → copy spans full width (no empty media column). NGE-7761. */
  .about-grid--no-media {
    grid-template-columns: 1fr;
  }
  .about-grid--no-media .about-copy {
    max-width: 72ch;
  }
  /* Grid items default to min-width:auto, so the media slider's track expanded
     the column past the viewport (~7px overflow on mobile). Let them shrink. */
  .about-grid > * {
    min-width: 0;
  }
  @media (max-width: 60rem) {
    .about-grid {
      grid-template-columns: 1fr;
      gap: var(--s-6, 24px);
    }
    /* Image first on mobile, copy below (mockup .about-media order:-1). Covers
       both the single-image (.about-media) and slider (.about-media-slider)
       grid children. NGE-8051. */
    .about-media,
    .about-media-slider {
      order: -1;
    }
  }

  .about-copy .eyebrow {
    margin-bottom: var(--s-3, 12px);
    display: inline-block;
  }
  .about-copy h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 var(--s-4, 16px);
    color: var(--about-heading, var(--ink, #4a4a4a));
    font-weight: 700;
    text-wrap: balance;
  }
  .about-copy h2 em {
    font-style: italic;
    color: var(--about-accent, var(--teal-700, #084b4d));
    font-weight: 700;
  }
  .about-copy .lead {
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--ink-3, #757575);
    margin: 0 0 var(--s-6, 24px);
    max-width: 56ch;
  }
  /* The lead can now be structured copy: `light-markdown` turns the entry's `####`
     sub-headings into h4/h5/h6 and its blank-line paragraphs into <p>. Styled HERE rather
     than by adding `.rte` to the container — `.rte` would pull the whole typography-plugin
     prose reset over a lead that has its own size, colour and measure, and main.css
     already fights that plugin over `.rte`'s max-width. NGE-9614. */
  .about-copy .lead p {
    margin: 0 0 var(--s-4, 16px);
  }
  .about-copy .lead p:last-child {
    margin-bottom: 0;
  }
  .about-copy .lead :is(h4, h5, h6) {
    color: var(--about-heading, var(--ink, #4a4a4a));
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: var(--s-5, 20px) 0 var(--s-2, 8px);
  }
  /* No leading margin on the first sub-heading — the h2 above already spaced it. */
  .about-copy .lead > :is(h4, h5, h6):first-child {
    margin-top: 0;
  }
  .about-copy .lead h4 {
    font-size: 18px;
  }
  .about-copy .lead h5 {
    font-size: 17px;
  }
  .about-copy .lead h6 {
    font-size: 16.5px;
  }

  /* Headline above the checklist. Sized between the h2 and the lead so it reads as a
     sub-head, not a second section title; margin pairs with .about-bullets' own
     bottom margin. */
  .about-copy .about-bullets-headline {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--about-heading, var(--ink, #4a4a4a));
    margin: 0 0 var(--s-3, 12px);
  }
  .about-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-6, 24px);
    display: grid;
    gap: var(--s-3, 12px);
  }
  .about-bullets li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2, #5e5e5e);
  }
  .about-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    background: var(--teal-50, #eaf6f6);
    border-radius: 50%;
  }
  .about-bullets li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--about-accent, var(--teal-cta, #35b2b6));
    border-bottom: 2px solid var(--about-accent, var(--teal-cta, #35b2b6));
    transform: rotate(-45deg);
  }

  .about-cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3, 12px);
  }
  .about-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--about-cta-bg, var(--teal-cta, #35b2b6));
    color: var(--about-cta-text, #fff);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    border-radius: var(--r-pill, 999px);
    text-decoration: none;
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .about-cta:hover {
    background: var(--teal-600, #0d6a6d);
    transform: translateY(-1px);
  }
  /* Secondary CTA — outlined variant of the pill, inherits the accent color. */
  .about-cta--secondary {
    background: transparent;
    color: var(--about-accent, var(--teal-700, #084b4d));
    border: 1px solid var(--about-accent, var(--teal-cta, #35b2b6));
  }
  .about-cta--secondary:hover {
    background: var(--teal-50, #eaf6f6);
    color: var(--about-accent, var(--teal-700, #084b4d));
    transform: translateY(-1px);
  }
  /* `.about-cta` goes full width on mobile via the central rule in theme-turquoise
     (NGE-9614). The copy that used to sit here is why the design rule held for this
     section and for the hero, and nowhere else. */

  .about-media {
    position: relative;
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    background: var(--bg-subtle, #faf7f4);
    /* One frame height for every slide (NGE-9799). The frame carried no ratio at all, so
       `.about-media img { height: 100% }` resolved against an auto-height parent and each
       image dictated its own — the column jumped on every dot click, and a square image
       next to a wide one made the band twice as tall. The video overlay below already
       solved this for itself and its comment states the intent; the frame never did.
       5/4 is what that comment names as the about-image ratio, so live PDPs barely move. */
    aspect-ratio: 5 / 4;
  }
  .about-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
  }

  /* Video tile (NGE-9614). Overlays the image frame so the media column keeps one
     height across slides — the about image is 5:4, a YouTube embed 16:9, and letting
     the frame resize made the whole grid jump on every dot click. `display: none`
     (not opacity) keeps the lazy iframe unfetched until the dot is clicked. */
  .about-media-video {
    position: absolute;
    inset: 0;
    display: none;
    z-index: 2;
    /* Opaque: the image stays in the DOM underneath, and an MP4 that letterboxes must
       not show it through the bars. */
    background: #000;
  }
  .about-media--slider.is-video-active .about-media-video {
    display: block;
  }
  /* The shared video-embed snippet locks itself to 16/9 with its own radius. Inside
     the media frame the frame owns both, so the embed just fills it. */
  .about-media-video .video-embed,
  .about-media--video-only .video-embed {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* Video as the ONLY media: no frame to match, so it keeps its own 16/9 box and the
     section's corner radius. */
  .about-media--video-only {
    aspect-ratio: 16 / 9;
    max-height: 520px;
  }
  /* The arrows sit above the video panel so a visitor can always leave the video
     slide; the panel itself must not swallow those clicks. */
  .about-media--slider .about-media-arrows {
    z-index: 3;
  }
  /* The video dot is a plain `.about-media-dot`, identical to the image bars. It briefly
     carried a round 12px `--video` modifier to read as a different kind of destination;
     that made it the odd element in a row of bars without telling a visitor anything they
     could act on. One row, one shape. NGE-9614. */

  /* Two-up variant — editorial images shown side by side (no slider).
     Each image locks to a 4/3 frame and cover-fills it, so a pair of
     differently-proportioned images still aligns cleanly. */
  .about-media--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3, 12px);
    background: transparent;
  }
  .about-media--pair .about-media-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--r-md, 10px);
  }
  /* Dots BELOW the image, identical to the homepage hero dots (.hero-slide-dot):
     28×4 bar, teal + 42px when active. No overlay pill, no arrows — the old
     .about-media-nav arrow styles were dropped (the slider has no arrows). NGE-8051. */
  .about-media-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--s-5, 20px);
  }
  .about-media-dot {
    width: 28px;
    height: 4px;
    padding: 0;
    background: rgba(15, 21, 27, 0.18);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
    transition:
      background var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      width var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .about-media-dot:hover {
    background: rgba(15, 21, 27, 0.32);
  }
  .about-media-dot.is-active {
    background: var(--teal-cta, #35b2b6);
    width: 42px;
  }

  /* Prev/next arrows overlaid on the slider image (NGE-8562). The overlay spans
     the image; only the buttons capture pointer events so the image stays
     interactive. Hidden when there is a single image (no .about-media-arrows
     rendered). */
  .about-media-arrows {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-3, 12px);
    pointer-events: none;
  }
  .about-media-arrow {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink, #4a4a4a);
    box-shadow: 0 2px 8px rgba(15, 21, 27, 0.15);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .about-media-arrow:hover {
    background: #fff;
    transform: scale(1.08);
  }

  @media (max-width: 40rem) {
    .about-media--pair {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:pdp-about */

/* START_SECTION:pdp-cross-sell (INDEX:87) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-cross-sell {
    background: var(--bg-subtle, #faf7f4);
  }

  /* Optional per-instance background override (falls through to the
     section band when --cross-section-bg is unset). */
  .pdp-cross-section {
    background: var(--cross-section-bg, transparent);
  }

  .section-head:has(.section-head__right) {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4, 16px);
  }
  .section-head__right {
    align-self: center;
  }

  .cross-grid {
    display: grid;
    grid-template-columns: repeat(var(--cross-columns, 3), minmax(0, 1fr));
    gap: var(--s-5, 20px);
  }
  @media (max-width: 56.25rem) {
    .cross-grid {
      grid-template-columns: 1fr;
      gap: var(--s-4, 16px);
    }
  }

  .cross-card {
    background: var(--cross-card-bg, #fff);
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition:
      transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      box-shadow var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .cross-card:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 21, 27, 0.12);
    box-shadow: var(--shadow-lg, 0 12px 28px -8px rgba(15, 21, 27, 0.1));
  }

  .cross-media {
    position: relative;
    aspect-ratio: var(--cross-media-ratio, 4 / 3);
    overflow: hidden;
    background: var(--bg-hover, #f0e9df);
  }
  .cross-badge {
    position: absolute;
    top: var(--s-3, 12px);
    left: var(--s-3, 12px);
    z-index: 1;
    padding: 4px 10px;
    border-radius: var(--r-pill, 999px);
    background: var(--cross-accent, var(--teal-cta, #35b2b6));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .cross-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .cross-card:hover .cross-media img {
    transform: scale(1.04);
  }

  .cross-body {
    padding: var(--s-5, 20px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .cross-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.15;
  }
  .cross-detail {
    font-size: 13px;
    color: var(--ink-3, #757575);
    margin: 0;
    flex: 1;
    line-height: 1.45;
  }
  .cross-bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--s-3, 12px);
    margin-top: 4px;
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
  }
  .cross-price {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }
  .cross-price .from {
    font-size: 12px;
    color: var(--ink-4, #939393);
  }
  .cross-price .now {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.018em;
    font-variant-numeric: tabular-nums;
  }
  .cross-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--cross-accent, var(--teal-700, #084b4d));
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .cross-link svg {
    width: 13px;
    height: 13px;
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .cross-card:hover .cross-link {
    gap: 8px;
  }
  .cross-card:hover .cross-link svg {
    transform: translateX(2px);
  }
/* END_SECTION:pdp-cross-sell */

/* START_SECTION:pdp-edges (INDEX:88) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-edges {
    background: var(--bg-surface, #ffffff);
  }

  /* Optional editor background override, applied on the container root only
     when `bg_color` is set (falls back to transparent → section bg shows). */
  .pdp-edges-section {
    background: var(--edge-bg, transparent);
  }

  /* Centred section-head variant — like .section-head--compact but kept centred */
  .pdp-edges-section .section-head--center {
    text-align: center;
    justify-content: center;
  }
  .pdp-edges-section .section-head--center .section-head__left {
    margin: 0 auto;
  }

  .edge-info-grid {
    display: grid;
    grid-template-columns: repeat(var(--edge-cols-desktop, 5), minmax(0, 1fr));
    gap: var(--s-5, 20px);
    margin-top: var(--s-8, 40px);
  }
  @media (max-width: 60rem) {
    .edge-info-grid {
      grid-template-columns: repeat(var(--edge-cols-mobile, 2), minmax(0, 1fr));
      gap: var(--s-4, 16px);
    }
    /* Last card alone in its row → span full width and stay centred */
    .edge-info-card:nth-child(5):last-child {
      grid-column: 1 / -1;
      max-width: 50%;
      margin: 0 auto;
    }
  }
  /* Keep the 2-column layout (with the centred 5th card from the ≤60rem block)
     down to the smallest phones — matches the v20 mockup, no 1-column collapse.
     NGE-8051. */

  .edge-info-card {
    display: flex;
    flex-direction: column;
  }
  /* Clickable card variant (per-block `url`) — inherit card layout, drop
     underline/inherit color so the card reads as a card, not a link. */
  .edge-info-card--link {
    text-decoration: none;
    color: inherit;
  }
  .edge-info-thumb {
    aspect-ratio: var(--edge-thumb-ratio, 1 / 1);
    background: var(--edge-thumb-bg, var(--bg-subtle, #faf7f4));
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    margin-bottom: var(--s-4, 16px);
  }
  .edge-info-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .edge-info-name {
    font-size: var(--edge-name-size, 17px);
    font-weight: 700;
    color: var(--edge-name-color, var(--ink, #4a4a4a));
    margin: 0 0 var(--s-2, 8px);
    letter-spacing: -0.01em;
  }
  .edge-info-desc {
    font-size: var(--edge-desc-size, 14px);
    line-height: 1.55;
    color: var(--edge-desc-color, var(--ink-3, #757575));
    margin: 0;
  }
  .edge-info-desc p {
    margin: 0;
  }
/* END_SECTION:pdp-edges */

/* START_SECTION:pdp-faq (INDEX:89) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-faq {
    background: var(--bg-surface, #ffffff);
  }

  .pdp-faq-section .section-head--center {
    text-align: center;
  }
  .pdp-faq-section .section-head--center .section-head__left {
    margin: 0 auto;
  }

  .faq-shell {
    max-width: 800px;
    margin: var(--s-7, 32px) auto 0;
  }

  /* Search input */
  .faq-search {
    position: relative;
    margin-bottom: var(--s-4, 16px);
  }
  .faq-search input {
    width: 100%;
    height: 52px;
    padding: 0 var(--s-5, 20px) 0 48px;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink, #4a4a4a);
    border: 1.5px solid var(--line, rgba(15, 21, 27, 0.08));
    background: var(--bg-surface, #ffffff);
    border-radius: var(--r-md, 10px);
    letter-spacing: -0.005em;
    outline: none;
    transition:
      border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .faq-search input:focus {
    border-color: var(--faq-accent, var(--teal-cta, #35b2b6));
    box-shadow: 0 0 0 4px rgba(53, 178, 182, 0.18);
  }
  .faq-search input::placeholder {
    color: var(--ink-4, #939393);
  }
  .faq-search svg {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ink-4, #939393);
    stroke-width: 1.8;
    pointer-events: none;
  }

  /* Category pill row */
  .faq-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--s-4, 16px);
  }
  .faq-cat-btn {
    height: 32px;
    padding: 0 14px;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-pill, 999px);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3, #757575);
    cursor: pointer;
    transition: all var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .faq-cat-btn:hover {
    border-color: var(--ink-4, #939393);
    color: var(--ink, #4a4a4a);
  }
  .faq-cat-btn.is-active {
    background: var(--ink, #4a4a4a);
    border-color: var(--ink, #4a4a4a);
    color: #fff;
  }

  /* Accordion list */
  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .faq-item {
    background: var(--faq-item-bg, var(--bg-subtle, #faf7f4));
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    transition: border-color var(--dur-fast, 160ms)
      var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .faq-item[open] {
    border-color: var(--faq-accent, var(--teal-300, #6ec1c4));
    background: var(--bg-surface, #ffffff);
  }
  .faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 56px 18px 22px;
    position: relative;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .faq-item summary::-webkit-details-marker {
    display: none;
  }
  .faq-item summary::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background:
      linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat,
      linear-gradient(currentColor, currentColor) center/1.5px 14px no-repeat;
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
    color: var(--ink-3, #757575);
  }
  .faq-item[open] summary::after {
    transform: rotate(90deg);
    background: linear-gradient(currentColor, currentColor) center/14px 1.5px no-repeat;
    color: var(--teal-700, #084b4d);
  }
  .faq-item summary:hover {
    color: var(--teal-700, #084b4d);
  }

  .faq-top-flag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-700, #084b4d);
    background: var(--teal-50, #eaf6f6);
    padding: 3px 7px;
    border-radius: 3px;
  }

  .faq-content {
    padding: 0 22px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--faq-text, var(--ink-3, #757575));
  }
  .faq-content p {
    margin: 0 0 8px;
  }
  .faq-content p:last-child {
    margin: 0;
  }
  .faq-content strong {
    color: var(--ink, #4a4a4a);
    font-weight: 700;
  }
  .faq-content a {
    color: var(--teal-700, #084b4d);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .faq-empty {
    display: none;
    padding: 28px 22px;
    text-align: center;
    font-size: 14px;
    color: var(--ink-3, #757575);
    background: var(--bg-subtle, #faf7f4);
    border: 1px dashed var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-md, 10px);
    margin-top: var(--s-4, 16px);
  }
  .faq-empty.is-visible {
    display: block;
  }
  .faq-empty strong {
    color: var(--ink, #4a4a4a);
  }

  /* Optional merchant color overrides (set via inline custom properties on the
     wrapper). Unset -> transparent/currentColor, so the theme default wins. */
  .pdp-faq {
    background: var(--faq-section-bg, transparent);
  }
  .faq-heading {
    color: var(--faq-heading, currentColor);
  }

  /* Footer conversion CTA */
  .faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4, 16px);
    margin-top: var(--s-6, 28px);
    padding: var(--s-6, 28px) var(--s-5, 20px);
    text-align: center;
    background: var(--faq-item-bg, var(--bg-subtle, #faf7f4));
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-lg, 16px);
  }
  .faq-cta__text {
    font-size: 15px;
    font-weight: 700;
    color: var(--faq-heading, var(--ink, #4a4a4a));
    letter-spacing: -0.005em;
  }
/* END_SECTION:pdp-faq */

/* START_SECTION:pdp-format-preview (INDEX:90) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-format-preview {
    background: var(--bg-subtle, #faf7f4);
    /* Track the dynamic header height (set in header-element.js) like the shared
       container does, instead of a hardcoded 88px — so #format-preview jumps land
       below the sticky header at any header state. */
    scroll-margin-top: calc(var(--header-height, 88px) + var(--margin-container, 0px));
  }

  /* While the Picturator upload is in progress the SDK shows a full-screen
     `.uploader-cover` and theme.css demotes the sticky header to z-index:0 so the
     cover can sit above it. This section's heading lives in a `.reveal` element
     (transform → its own root-level stacking context), which would then paint OVER
     the demoted header. Hide the heading while the cover is up — it's behind the
     full-screen cover anyway. Mirrors the fullwidth-banner / cart__summary handling
     of the same overlay state (theme.css). NGE-7761. */
  html:has(.uploader-cover.-visible) .shopify-section--pdp-format-preview .section-head {
    visibility: hidden;
  }

  .format-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 40px);
    align-items: start;
    margin-top: var(--s-8, 40px);
  }
  @media (max-width: 60rem) {
    .format-preview-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--s-6, 24px);
    }
  }

  /* ── LEFT: wall preview with centred canvas overlay + upload glyph ── */
  /* NOT sticky (NGE-9614). It used to be `position: sticky; top: 100px` on desktop, so
     the wall image followed the page down while the size grid scrolled past it — which
     reads as the image drifting rather than as a helpful preview. It now sits at the top
     of the section and scrolls away like any other content; `align-items: start` on
     `.format-preview-grid` is what keeps it top-aligned next to the taller right column. */
  .format-preview-stage-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .format-preview-stage-wrap .format-preview-wall {
    width: 100%;
  }

  .format-preview-wall {
    aspect-ratio: 16 / 11;
    border-radius: var(--r-lg, 16px);
    background: #ece5da;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(15, 21, 27, 0.05);
  }
  .format-preview-wall-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  /* Canvas placeholder centred on the wall, anchored at 43% from top so it
     sits above the imaginary sofa baseline (mockup parity). */
  .format-preview-canvas-mock {
    position: absolute;
    top: 43%;
    left: 50%;
    width: 38%;
    aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%);
    z-index: 2;
    border-radius: 2px;
    overflow: hidden;
    /* Mockup-faithful abstract placeholder behind the upload CTA — replaced
       by the user's uploaded photo via img.format-preview-canvas-photo on top.
       URL is set per-section via the `--canvas-placeholder` CSS variable on
       the element so each shop can configure its own default (theme setting
       `format_preview_placeholder` or section `canvas_placeholder`). */
    background-color: var(--bg-subtle, #f6f1ea);
    background-image: var(--canvas-placeholder);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow:
      0 24px 48px -16px rgba(15, 21, 27, 0.4),
      0 8px 16px -4px rgba(15, 21, 27, 0.18);
    transition:
      width var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      aspect-ratio var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      border-radius var(--dur-slow, 400ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  /* Round products (Foto Rotonda): circular mask. overflow:hidden on the mock
     already clips the placeholder + uploaded photo, so 50% radius = a circle. */
  .format-preview-canvas-mock.is-round {
    border-radius: 50%;
  }
  .format-preview-canvas-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    display: block;
  }
  .format-preview-canvas-photo[hidden] {
    display: none;
  }

  /* Small X button — top-right corner of the canvas, lets the user clear the
     uploaded photo and reveal the upload prompt again. */
  .format-preview-clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(15, 21, 27, 0.55);
    color: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .format-preview-clear-btn[hidden] {
    display: none;
  }
  .format-preview-clear-btn:hover {
    background: rgba(15, 21, 27, 0.78);
  }
  .format-preview-clear-btn svg {
    width: 12px;
    height: 12px;
    display: block;
  }

  /* Replace button — sits centered below the wall preview once a photo is
     loaded so it never blocks the photo itself. Subtle text-button styling. */
  .format-preview-replace-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px auto 0;
    padding: 8px 14px;
    background: transparent;
    color: var(--ink-3, #757575);
    border: 1.5px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-pill, 999px);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition:
      color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .format-preview-replace-btn[hidden] {
    display: none;
  }
  .format-preview-replace-btn:hover {
    color: var(--ink, #4a4a4a);
    border-color: var(--ink-4, #939393);
  }
  .format-preview-replace-btn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .format-preview-upload-prompt {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
  }
  .format-preview-upload-prompt svg {
    max-width: 200px;
    width: 60%;
    height: auto;
    display: block;
  }
  @media (max-width: 40rem) {
    .format-preview-upload-prompt svg {
      max-width: 140px;
    }
  }

  /* In-canvas loader — covers the canvas mock while the SDK uploads the photo.
     The SDK renders its own progress UI inside our hidden widget host, so we
     surface a visible loader here. */
  .format-preview-loader {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(15, 21, 27, 0.55);
    color: #fff;
    backdrop-filter: blur(2px);
  }
  .format-preview-loader[hidden] {
    display: none;
  }
  .format-preview-loader-spinner {
    width: 32px;
    height: 32px;
    animation: format-preview-spin 0.8s linear infinite;
  }
  .format-preview-loader-text {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 0 12px;
  }
  @keyframes format-preview-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Full-page redirect overlay — covers everything while we navigate to the
     configurator so the user gets immediate feedback during the network
     roundtrip until the configurator page renders its own loader. */
  .format-preview-redirect-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 21, 27, 0.65);
    backdrop-filter: blur(4px);
  }
  .format-preview-redirect-overlay[hidden] {
    display: none;
  }
  .format-preview-redirect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: #fff;
    border-radius: var(--r-lg, 16px);
    padding: 32px 40px;
    box-shadow: 0 24px 64px -16px rgba(15, 21, 27, 0.4);
    max-width: 360px;
    text-align: center;
  }
  .format-preview-redirect-spinner {
    width: 40px;
    height: 40px;
    color: var(--fp-accent, var(--teal-cta, #35b2b6));
    animation: format-preview-spin 0.8s linear infinite;
  }
  .format-preview-redirect-text {
    font-size: 17px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
  }
  .format-preview-redirect-sub {
    font-size: 13px;
    color: var(--ink-3, #757575);
    font-weight: 500;
    line-height: 1.4;
  }

  /* ── RIGHT: controls (orientation tabs + size grid + CTA) ── */
  .format-preview-controls {
    display: flex;
    flex-direction: column;
    gap: var(--s-4, 16px);
  }

  .format-preview-step {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-md, 10px);
    padding: 18px 20px;
  }
  .format-preview-step-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--s-3, 12px);
    gap: var(--s-3, 12px);
  }
  .format-preview-step-head--inner {
    margin-top: var(--s-5, 20px);
  }
  .format-preview-step-head .left {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .format-preview-step-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink, #4a4a4a);
    margin: 0;
  }
  .format-preview-step-value {
    font-size: 13px;
    color: var(--ink-3, #757575);
    font-weight: 600;
  }

  /* Orientation pill row */
  .format-preview-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .format-preview-pill {
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--line, rgba(15, 21, 27, 0.08));
    background: #fff;
    border-radius: var(--r-pill, 999px);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3, #757575);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
    letter-spacing: -0.005em;
  }
  .format-preview-pill:hover {
    border-color: var(--ink-4, #939393);
    color: var(--ink, #4a4a4a);
  }
  .format-preview-pill.is-active {
    border-color: var(--fp-accent, var(--teal-cta, #35b2b6));
    background: var(--teal-50, #eaf6f6);
    color: var(--teal-700, #084b4d);
  }
  .format-preview-pill-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: currentColor;
  }
  /* Mobile: centre the orientation tabs (wrapping to >1 row is fine). NGE-8051. */
  @media (max-width: 40rem) {
    .format-preview-pill-group {
      justify-content: center;
    }
  }

  /* Size grid (one per orientation, only one visible at a time) */
  .format-preview-size-grid {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .format-preview-size-grid.is-visible {
    display: grid;
  }

  .format-preview-size-card {
    position: relative;
    padding: 14px 14px 12px;
    border: 1.5px solid var(--line, rgba(15, 21, 27, 0.08));
    background: #fff;
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    text-align: left;
    /* Mockup: size on row 1, strike-price + price on row 2 (stacked, left). */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transition:
      border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
    gap: 4px;
  }
  .format-preview-size-card:hover {
    border-color: var(--ink-4, #939393);
  }
  .format-preview-size-card.is-active {
    border-color: var(--fp-accent, var(--teal-cta, #35b2b6));
    background: var(--teal-50, #eaf6f6);
  }
  .format-preview-size-card.has-badge {
    margin-top: 8px;
  }
  .format-preview-size-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-sm, 6px);
    white-space: nowrap;
    /* "Most popular" + default — teal */
    background: var(--fp-badge-popular, var(--teal-cta, #35b2b6));
    color: #fff;
  }
  .format-preview-size-badge--value {
    /* "Best value" — sale red, same token as price-sale */
    background: var(--fp-badge-value, var(--price-500, #e11d48));
    color: #fff;
  }
  .format-preview-size-dim {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .format-preview-size-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    flex-shrink: 0;
    /* Keep each money value intact — Italian prices ("71,00 €") must not break
       at the space between number and currency symbol in the narrow card. */
    white-space: nowrap;
  }
  .format-preview-size-price .was {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-5, #b8b8b8);
    text-decoration: line-through;
  }
  .format-preview-size-card.is-active .format-preview-size-price .was {
    color: var(--ink-4, #939393);
  }
  .format-preview-size-price .now {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.01em;
  }
  .format-preview-size-price .now.sale {
    color: var(--price-500, #e11d48);
  }

  /* Upload widget is rendered visually hidden — the visible CTA is the SVG
     cloud glyph on the canvas which click-delegates to the widget. We hide
     the widget element itself (its button), but the SDK renders its upload
     progress overlay at body level so it stays visible during upload. */
  .format-preview-upload-host {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
  }

  /* "Continue to configurator" CTA — shown after the upload preview lands on the canvas */
  .format-preview-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2, 8px);
    background: var(--fp-accent, var(--teal-cta, #35b2b6));
    color: #fff;
    border: 0;
    border-radius: var(--r-md, 10px);
    padding: 14px 22px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
    margin-top: var(--s-2, 8px);
  }
  .format-preview-continue-btn:hover {
    background: var(--teal-cta-hover, #2a9396);
  }
  .format-preview-continue-btn svg {
    width: 16px;
    height: 16px;
  }
  .format-preview-continue-btn[hidden] {
    display: none;
  }

  /* Upload CTA under the wall (NGE-10175). Same tokens as
     `.format-preview-continue-btn` so the two upload-flow CTAs read as one family, and it
     occupies the same slot in the stage column that the replace button takes over after an
     upload. No size gymnastics needed here — unlike on the canvas, the copy can wrap or be
     any length in any language. */
  .format-preview-upload-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2, 8px);
    max-width: 100%;
    margin-top: var(--s-3, 12px);
    padding: 13px 22px;
    border: 0;
    border-radius: var(--r-md, 10px);
    background: var(--fp-accent, var(--teal-cta, #35b2b6));
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-align: center;
    cursor: pointer;
    transition: background var(--dur-fast, 150ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .format-preview-upload-cta:hover {
    background: var(--teal-cta-hover, #2a9396);
  }
  .format-preview-upload-cta[hidden] {
    display: none;
  }
  /* No `width: 100%` here — `check:cta` blocks section-local mobile full-width rules, and
     the central list in `theme-turquoise.liquid` deliberately leaves this section's CTAs
     auto-width (`.format-preview-continue-btn` is not in it either). Padding only. */
  @media (max-width: 40rem) {
    .format-preview-upload-cta {
      padding: 12px 18px;
      font-size: 14px;
    }
  }

  /* Upload CTA card — merchant-authored heading / lead / footnote */
  .format-preview-cta-card {
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-md, 10px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
  }
  .format-preview-cta-heading {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink, #4a4a4a);
    margin: 0;
  }
  .format-preview-cta-heading em {
    font-style: normal;
    color: var(--fp-accent, var(--teal-cta, #35b2b6));
  }
  .format-preview-cta-lead {
    color: var(--ink-3, #757575);
  }
  .format-preview-cta-footnote {
    font-size: 12px;
    color: var(--ink-4, #939393);
    margin: 0;
  }

  /* Supporting USP / trust bullets around the picker (optional blocks) */
  .format-preview-usps {
    list-style: none;
    margin: var(--s-6, 24px) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3, 12px) var(--s-6, 24px);
  }
  .format-preview-usp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3, #757575);
  }
  .format-preview-usp-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--fp-accent, var(--teal-cta, #35b2b6));
  }
/* END_SECTION:pdp-format-preview */

/* START_SECTION:pdp-frames (INDEX:91) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-frames {
    background: var(--bg-subtle, #faf7f4);
  }

  .pdp-frames-section .section-head--center {
    text-align: center;
  }
  .pdp-frames-section .section-head--center .section-head__left {
    margin: 0 auto;
  }

  /* Card on beige ground — grid wraps hero + swatch list in a white card. */
  .premium-frame-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--s-8, 40px);
    align-items: center;
    /* No own max-width: the card fills the section container like pdp-edges and
       pdp-wood-frame do. The 1040px cap made this one section visibly narrower than
       its neighbours on the PDP. NGE-9614. */
    margin: var(--s-8, 40px) auto 0;
    background: var(--bg-surface, #ffffff);
    border-radius: var(--r-md, 10px);
    padding: var(--s-7, 32px) var(--s-8, 40px);
  }
  @media (max-width: 56.25rem) {
    .premium-frame-grid {
      grid-template-columns: 1fr;
      gap: var(--s-6, 24px);
      padding: var(--s-6, 24px);
    }
  }

  .premium-frame-hero {
    position: relative;
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    background: var(--bg-surface, #ffffff);
  }
  .premium-frame-hero img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: opacity var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  /* Name pill is hidden in v9 — kept in DOM for JS reference but display:none */
  .premium-frame-name-pill {
    display: none;
  }

  /* Arrows removed — the dots are enough (PDP-wide consistency). NGE-8051. */
  .premium-frame-nav {
    display: none;
  }

  /* Dots BELOW the image, homepage hero style (28×4 bar, teal + 42px active),
     no overlay pill. PDP-wide consistent with the hero stage + about. NGE-8051. */
  .premium-frame-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--s-5, 20px);
  }
  .premium-frame-dots[hidden] {
    display: none;
  }
  .premium-frame-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    border: 0;
    padding: 0;
    background: rgba(15, 21, 27, 0.18);
    cursor: pointer;
    transition:
      background var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      width var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .premium-frame-dot:hover {
    background: rgba(15, 21, 27, 0.32);
  }
  .premium-frame-dot.is-active {
    background: var(--teal-cta, #35b2b6);
    width: 42px;
  }

  /* Prev/next arrows over the frame hero image (re-added NGE-8562). Buttons are
     shown/hidden by the inline JS per frame image count; the overlay only
     forwards pointer events to the buttons. Mirrors the About-slider arrows. */
  .premium-frame-arrows {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-3, 12px);
    pointer-events: none;
  }
  .premium-frame-arrow {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink, #4a4a4a);
    box-shadow: 0 2px 8px rgba(15, 21, 27, 0.15);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  /* Author-level rule so the inline JS `hidden` toggle beats the display above. */
  .premium-frame-arrow[hidden] {
    display: none;
  }
  .premium-frame-arrow:hover {
    background: #fff;
    transform: scale(1.08);
  }

  /* Vertical swatch column */
  .frame-pills {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
  }
  .frame-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-4, 16px);
    padding: 6px;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .frame-pill:hover {
    background: var(--bg-subtle, #faf7f4);
  }
  .frame-pill.is-active .frame-swatch-photo {
    box-shadow: 0 0 0 2px var(--teal-cta, #35b2b6);
  }

  .frame-swatch-photo {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    box-sizing: border-box;
    /* Inner gap so a full-product fallback image (image_1) isn't flush to the
       swatch edges — the whole frame stays visible (review follow-up). */
    padding: 5px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-surface, #ffffff);
    box-shadow: inset 0 0 0 1px var(--line, rgba(15, 21, 27, 0.08));
    transition: box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .frame-swatch-photo img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain (not cover) so the full frame is shown, not a cropped centre. */
    object-fit: contain;
  }

  .frame-swatch-label {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.005em;
  }
  .frame-pill.is-active .frame-swatch-label {
    color: var(--teal-700, #084b4d);
  }

  /* Description + availability footnote — appears below the card, full width */
  .premium-frame-note {
    grid-column: 1 / -1;
    margin-top: var(--s-4, 16px);
    padding-top: var(--s-4, 16px);
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
  }
  .premium-frame-note p {
    margin: 0;
    /* Stronger size contrast vs the footnote, matching the mockup. NGE-8051. */
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2, #4a4a4a);
  }
  .premium-frame-note-constraint {
    display: block;
    margin-top: var(--s-2, 8px);
    font-size: 12.5px;
    color: var(--ink-3, #757575);
  }

  /* Optional CTA below the note — full-width row, centred with the head. */
  .premium-frame-cta-wrap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: var(--s-5, 20px);
  }
  @media (max-width: 56.25rem) {
    .premium-frame-note {
      margin-top: var(--s-3, 12px);
      padding-top: var(--s-3, 12px);
    }
    .premium-frame-note p {
      font-size: 14px;
    }
    .premium-frame-note-constraint {
      font-size: 12px;
    }
    /* Swatches side-by-side on mobile (wrapping, centred) instead of a vertical
       list — each pill = thumb on top, label below. NGE-8051. */
    .frame-pills {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--s-3, 12px);
    }
    .frame-pill {
      flex-direction: column;
      width: auto;
      gap: 6px;
      text-align: center;
    }
    .frame-swatch-label {
      font-size: 12.5px;
    }
  }
/* END_SECTION:pdp-frames */

/* START_SECTION:pdp-hanger-note (INDEX:92) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-hanger-note {
    background: var(--bg-surface, #ffffff);
  }

  .hanger-note {
    display: grid;
    grid-template-columns: var(--hanger-thumb-width, 200px) 1fr;
    gap: var(--s-6, 24px);
    align-items: center;
    max-width: var(--hanger-max-width, 760px);
    margin: 0 auto;
    padding: var(--s-5, 20px) var(--s-6, 24px);
    background: var(--hanger-card-bg, #fff);
    border: 1px solid var(--hanger-border, var(--line, rgba(15, 21, 27, 0.08)));
    border-radius: var(--r-md, 10px);
  }
  .hanger-note--image-right {
    grid-template-columns: 1fr var(--hanger-thumb-width, 200px);
  }
  .hanger-note--image-right .hanger-note-body {
    order: 1;
  }
  .hanger-note--image-right .hanger-note-thumb {
    order: 2;
  }
  @media (max-width: 40rem) {
    .hanger-note,
    .hanger-note--image-right {
      grid-template-columns: 1fr;
      gap: var(--s-4, 16px);
      padding: var(--s-4, 16px);
    }
  }

  .hanger-note-thumb {
    border-radius: var(--r-sm, 6px);
    overflow: hidden;
    background: var(--bg-subtle, #faf7f4);
  }
  .hanger-note-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* Local eyebrow override — smaller + teal-700 on white note card,
     instead of the global teal-600 / 12px / 0.16em rule. Stays inside
     the card visual so the global .eyebrow elsewhere is untouched. */
  .hanger-note-body .eyebrow {
    display: inline-block;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--hanger-eyebrow, var(--teal-700, #084b4d));
    margin-bottom: var(--s-2, 8px);
    line-height: 1.2;
  }
  .hanger-note-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--hanger-heading, var(--ink, #4a4a4a));
    margin: 0 0 var(--s-2, 8px);
    letter-spacing: -0.015em;
  }
  .hanger-note-copy {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--hanger-body, var(--ink-3, #757575));
    margin: 0;
  }
  .hanger-note-copy p {
    margin: 0 0 var(--s-2, 8px);
  }
  .hanger-note-copy p:last-child {
    margin: 0;
  }

  .hanger-note-cta {
    display: inline-block;
    margin-top: var(--s-3, 12px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--hanger-eyebrow, var(--teal-700, #084b4d));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .hanger-note-cta:hover {
    color: var(--teal-600, #0d6a6d);
  }
/* END_SECTION:pdp-hanger-note */

/* START_SECTION:pdp-hero (INDEX:93) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-hero {
    background: var(--bg-surface, #ffffff);
    overflow: hidden;
  }

  .pdp-hero-grid {
    display: grid;
    grid-template-columns: 64fr 36fr;
    gap: var(--s-8, 40px);
    align-items: stretch;
  }
  @media (max-width: 60rem) {
    .pdp-hero-grid {
      grid-template-columns: 1fr;
      gap: var(--s-7, 32px);
    }
  }

  /* ── STAGE (left) ── */
  /* Single-column grid. The frame and the two arrows share ONE grid cell, so the
     arrows stack over the image (NGE-9614) while staying outside the frame's
     overflow:hidden — which is why they are not children of the frame. The thumb
     row auto-places into row 2 underneath. */
  .stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .stage-frame {
    grid-column: 1;
    grid-row: 1;
  }
  .stage-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bg-hover, #f0e9df);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 12px 28px -8px rgba(15, 21, 27, 0.1));
  }
  .stage-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Non-active slides stay stacked (position:absolute) and, since image slides
       come last in the DOM, an invisible image slide would sit on top of the video
       iframe and swallow the click. Only the active slide may receive pointer events
       so the YouTube/video iframe is actually clickable. NGE-9161. */
    pointer-events: none;
    transition: opacity var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .stage-slide.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Centered play button on video slides (mirrors .hero-video-play on the
     homepage). Hides once playback starts via .is-playing. NGE-8051. */
  .stage-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    width: 72px;
    height: 72px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 21, 27, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .stage-video-play:hover {
    background: rgba(15, 21, 27, 0.75);
    transform: translate(-50%, -50%) scale(1.05);
  }
  .stage-video-play svg {
    width: 30px;
    height: 30px;
    margin-left: 3px;
  }
  .stage-slide.is-playing .stage-video-play {
    display: none;
  }
  /* During playback: drop the gradient overlay (it covers the video bottom where
     the native controls live) and lift the playing slide above the badge/overlay
     so the player controls (play/pause, seek, volume) are fully visible. NGE-8051. */
  .stage-frame.is-playing .stage-overlay {
    display: none;
  }
  .stage-slide.is-playing {
    z-index: 4;
  }

  .stage-slide img,
  .stage-slide video,
  .stage-slide iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
  }
  .stage-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 21, 27, 0.28) 100%);
    z-index: 1;
  }

  /* Thumb dashes — pill on photo bottom */
  /* Dots BELOW the image (homepage hero pattern), no overlay pill, no arrows —
     PDP-wide consistent with the about + frame sections. NGE-8051. */
  .stage-thumbs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--s-5, 20px);
  }
  .stage-thumb {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    border: 0;
    padding: 0;
    background: rgba(15, 21, 27, 0.18);
    cursor: pointer;
    transition:
      background var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      width var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .stage-thumb:hover {
    background: rgba(15, 21, 27, 0.32);
  }
  .stage-thumb.is-active {
    background: var(--hero-accent, var(--teal-cta, #35b2b6));
    width: 42px;
  }

  /* Prev/next arrows ON the image (NGE-9614). NGE-8051 had removed them in favour of
     the dots alone, then NGE-8562 brought them back on about + frames and left the
     hero behind — this closes that gap. Values are copied 1:1 from
     `.about-media-arrow` / `.premium-frame-arrow` so all three sliders are identical:
     40×40, translucent white, blur(4px), ink glyph, scale on hover. Change one, change
     all three. Placement here is a shared grid cell rather than an absolute overlay,
     because the arrows must sit outside the frame's overflow:hidden. */
  .stage-nav {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: var(--ink, #4a4a4a);
    box-shadow: 0 2px 8px rgba(15, 21, 27, 0.15);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .stage-nav:hover {
    background: #fff;
    transform: scale(1.08);
  }
  /* Not in the about/frames copies — a keyboard user needs to see the focus ring on
     a button that has no border. Worth adding there too. */
  .stage-nav:focus-visible {
    outline: 2px solid var(--teal-cta, #35b2b6);
    outline-offset: 2px;
  }
  .stage-nav--prev {
    justify-self: start;
    margin-left: var(--s-3, 12px);
  }
  .stage-nav--next {
    justify-self: end;
    margin-right: var(--s-3, 12px);
  }
  .stage-nav svg {
    width: 20px;
    height: 20px;
  }

  /* ── CONSOLE (right) ── */
  .console {
    display: flex;
    flex-direction: column;
    gap: var(--s-5, 20px);
  }

  .console h1 {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--ink, #4a4a4a);
    text-wrap: balance;
  }
  .console h1 em {
    font-style: normal;
    font-weight: 700;
    color: var(--hero-accent, var(--teal-cta, #35b2b6));
    letter-spacing: -0.025em;
  }

  /* Optional eyebrow above the H1 (NGE-audit). */
  .console-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hero-accent, var(--teal-cta, #35b2b6));
  }

  /* Optional inline rating chip (NGE-audit). */
  .console-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ink-3, #757575);
  }
  .console-rating__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--hero-accent, var(--teal-cta, #35b2b6));
  }
  .console-rating__stars svg {
    width: 16px;
    height: 16px;
  }
  .console-rating__value {
    font-weight: 700;
    color: var(--ink, #4a4a4a);
  }

  .console-tagline {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-3, #757575);
    margin: 0;
    max-width: 520px;
  }
  .console-tagline strong {
    color: var(--ink, #4a4a4a);
    font-weight: 700;
  }
  /* Hide the tagline on phones when `show_tagline_mobile` is off, so price + CTA
     stay above the fold. Desktop always shows it. NGE-8562. */
  @media (max-width: 40rem) {
    .console-tagline.hide-on-mobile {
      display: none;
    }
  }

  /* Variant B — inline price above the CTA. Borderless (no chip/outline). NGE-8051. */
  .product-price--hero {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-variant-numeric: tabular-nums;
  }
  .product-price--hero .from {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-4, #939393);
  }
  .product-price--hero .now {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink, #4a4a4a);
  }
  .product-price--hero .now.sale {
    color: var(--price-500, #e11d48);
  }
  .product-price--hero .was {
    font-size: 14px;
    color: var(--ink-5, #b8b8b8);
    text-decoration: line-through;
    font-weight: 500;
  }
  /* Which format the "from" price is for (NGE-9614). Sized and coloured like the "from"
     eyebrow rather than like the figure — it qualifies the price, it is not part of it.
     No uppercase: this is a size such as "20×20 cm", not a label. */
  .product-price--hero .price-format {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4, #939393);
    white-space: nowrap;
  }

  /* USP bullets (NGE-8051) — rich-text <ul> from a metafield; checkmarks via
     CSS mask so no inline SVG is needed in the rich-text content. */
  .console-usps {
    margin: 0;
  }
  /* Reset BOTH ul and ol — the rich-text editor may produce either; never show
     list numbers (checkmarks come from li::before). NGE-8051. */
  .console-usps ul,
  .console-usps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
  }
  /* Checkmark absolutely positioned (hanging indent) instead of a flex item:
     a flex li with `gap` would split the rich-text <strong> and the trailing
     text into separate flex items, opening a gap mid-sentence. Inline flow keeps
     bold + rest together; wrapped lines align left under the text. NGE-8051. */
  .console-usps li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--ink-2, #5c5c5c);
    letter-spacing: -0.005em;
  }
  .console-usps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 18px;
    height: 18px;
    background-color: var(--hero-accent, var(--teal-cta, #35b2b6));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
      center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
      center / contain no-repeat;
  }
  .console-usps strong {
    font-weight: 700;
    color: var(--ink, #4a4a4a);
  }

  /* Variant A — price badge on the stage image. Red pill, top-left, white text
     (red = price/sale per the design system). Rendered only when price_variant
     is A. NGE-8051. */
  .stage-price-badge {
    position: absolute;
    top: var(--s-4, 16px);
    left: var(--s-4, 16px);
    z-index: 3;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 16px;
    background: var(--price-500, #e11d48);
    border-radius: var(--r-pill, 999px);
    box-shadow:
      0 6px 18px -4px rgba(225, 29, 72, 0.42),
      0 1px 2px rgba(15, 21, 27, 0.06);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  .stage-price-badge .from {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
  }
  .stage-price-badge .now {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1;
  }
  .stage-price-badge .was {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: line-through;
    font-weight: 500;
  }
  @media (max-width: 40rem) {
    .stage-price-badge {
      top: var(--s-3, 12px);
      left: var(--s-3, 12px);
      padding: 8px 13px;
    }
    .stage-price-badge .now {
      font-size: 18px;
    }
  }

  .console-cta-row {
    display: flex;
    gap: var(--s-3, 12px);
    align-items: center;
    flex-wrap: wrap;
  }
  .console-cta-row .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--hero-accent, var(--teal-cta, #35b2b6));
    color: var(--hero-cta-text, #fff);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    border-radius: var(--r-pill, 999px);
    text-decoration: none;
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .console-cta-row .btn-primary:hover {
    background: var(--teal-600, #0d6a6d);
    transform: translateY(-1px);
  }
  /* Optional secondary/ghost CTA (NGE-audit). Outline style, accent-tinted. */
  .console-cta-row .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: transparent;
    color: var(--hero-accent, var(--teal-600, #0d6a6d));
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
    border: 1px solid var(--hero-accent, var(--teal-cta, #35b2b6));
    border-radius: var(--r-pill, 999px);
    text-decoration: none;
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .console-cta-row .btn-secondary:hover {
    background: var(--bg-subtle, #f6f2ec);
    transform: translateY(-1px);
  }
  @media (max-width: 40rem) {
    /* Stack the CTAs instead of putting them side by side. Their WIDTH is not set here —
       full-width CTAs on mobile are central in theme-turquoise (NGE-9614), which also
       covers `.btn-primary` / `.btn-secondary`. This block is layout only. */
    .console-cta-row {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
    }
  }

  /* Optional in-hero trust grid (NGE-audit) — mirrors the removed hero trust-grid
     (2 cols, teal icons). Rendered only when `show_promises` is on. */
  .console-promises {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4, 16px);
    margin-top: var(--s-2, 8px);
  }
  .console-promise {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .console-promise__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    color: var(--hero-accent, var(--teal-cta, #35b2b6));
  }
  .console-promise__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .console-promise__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
  }
  .console-promise__meta {
    font-size: 11.5px;
    color: var(--ink-4, #939393);
  }
  @media (max-width: 40rem) {
    .console-promises {
      grid-template-columns: 1fr;
    }
  }

  /* Trust grid removed — the trust band is now its own `trust-strip` section on
     the PDP (Theme Editor), identical to the homepage. NGE-8051. */
/* END_SECTION:pdp-hero */

/* START_SECTION:pdp-video (INDEX:95) */
.pdp-video-frame {
    max-width: 880px;
    margin-inline: auto;
  }
  .pdp-video-frame .pdp-video-media {
    border-radius: var(--r-md, 10px);
  }
/* END_SECTION:pdp-video */

/* START_SECTION:pdp-wood-frame (INDEX:96) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--pdp-wood-frame {
    background: var(--bg-surface, #ffffff);
  }

  /* Optional per-campaign background — painted only when the merchant sets a
     Background colour (inline --pdp-wood-bg on the container); otherwise the
     section wrapper's default --bg-surface shows through. */
  .pdp-wood-section {
    background: var(--pdp-wood-bg, transparent);
  }

  .pdp-wood-section .section-head--center {
    text-align: center;
  }
  .pdp-wood-section .section-head--center .section-head__left {
    margin: 0 auto;
  }

  .wood-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 40px);
    margin-top: var(--s-8, 40px);
  }
  .wood-grid--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (max-width: 60rem) {
    .wood-grid,
    .wood-grid--cols-3 {
      grid-template-columns: 1fr;
      gap: var(--s-6, 24px);
    }
  }

  .wood-card {
    display: flex;
    flex-direction: column;
  }
  .wood-thumb {
    aspect-ratio: var(--wood-thumb-ratio, 16 / 10);
    background: var(--bg-subtle, #faf7f4);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    margin-bottom: var(--s-5, 20px);
  }
  .wood-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wood-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    margin: 0 0 var(--s-3, 12px);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }
  .wood-desc {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink-3, #757575);
    margin: 0;
    max-width: 56ch;
  }
  .wood-desc p {
    margin: 0 0 var(--s-3, 12px);
  }
  .wood-desc p:last-child {
    margin: 0;
  }

  .wood-card__cta {
    margin-top: var(--s-4, 16px);
    align-self: flex-start;
  }
/* END_SECTION:pdp-wood-frame */

/* START_SECTION:picturator-configurator (INDEX:97) */
/* CLS prevention styles moved to inline <style> tag above for first-render availability */

  .configurator-embed [class*="border-[#35b2b6]"] {
    border: 2px solid #35b2b6 !important;
  }

  /* Hide product dropdown until configurator is ready with image */
  #configurator-widget-{{ section.id }} [data-product-dropdown] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  #configurator-widget-{{ section.id }}.configurator-ready [data-product-dropdown] {
    opacity: 1;
    pointer-events: auto;
  }
/* END_SECTION:picturator-configurator */

/* START_SECTION:plp-intro (INDEX:98) */
.shopify-section--plp-intro {
    background: var(--bg-subtle, #f6f1ea);
    display: flow-root;
  }
  .plp-intro {
    position: relative;
    overflow: hidden;
    /* Optional per-campaign background override (--plp-bg, blank = transparent
       so the section band token shows through). .container is full-width, so
       this paints edge to edge. */
    background: var(--plp-bg, transparent);
    /* Vertical padding driven by `container_spacing` via the
       `section-spacing` snippet rendered at the bottom of this file.
       Don't hardcode here. */
  }
  .plp-intro::before {
    content: '';
    /* --plp-deco = none disables the decorative glows per campaign. */
    display: var(--plp-deco, block);
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(53, 178, 182, 0.06) 0%, rgba(53, 178, 182, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }
  .plp-intro::after {
    content: '';
    display: var(--plp-deco, block);
    position: absolute;
    bottom: -160px;
    left: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(244, 181, 168, 0.10) 0%, rgba(244, 181, 168, 0) 70%);
    pointer-events: none;
    z-index: 0;
  }
  .shopify-section--plp-intro .container { position: relative; z-index: 1; }

  .plp-intro-head {
    max-width: 640px;
    margin-bottom: var(--s-4, 16px);
  }
  .plp-intro-head .eyebrow { display: inline-block; }
  .plp-intro-head h1 {
    /* Aligned 1:1 with the global `.section-head h2` rule in
       snippets/theme-turquoise.liquid so the PLP page H1 visually matches
       every other turquoise section heading. Don't redeclare font-family —
       inherit Montserrat from body (--font-body). */
    font-weight: 700;
    font-size: clamp(32px, 3.8vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: var(--s-3, 12px) 0;
    color: var(--ink, #4a4a4a);
    text-wrap: balance;
  }
  .plp-intro-head h1 em {
    font-style: normal;
    font-weight: 700;
    color: var(--plp-accent, var(--teal-cta, #35B2B6));
  }
  .plp-intro-head .lead {
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-3, #757575);
    margin: 0;
    max-width: 520px;
  }
  /* PDP-header style hero: image + content side by side (NGE-7761). Source
     order is content-first; image side is chosen by the position modifier. */
  .plp-intro-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8, 48px);
    align-items: center;
  }
  .plp-intro-hero .plp-intro-head { margin-bottom: 0; max-width: none; }
  .plp-intro-hero__media {
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--bg-subtle, #faf7f4);
  }
  .plp-intro-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Default markup is content-then-image (= image right). For image-left, pull
     the media before the content. */
  .plp-intro-hero--image-left .plp-intro-hero__media { order: -1; }

  /* Wide two-column variant (campaign LPs, NGE-7761): a full-width row with the
     image column WIDER (58%) at a 16/9 ratio and the text/coupon in the narrower
     column — for wide banner heroes where the stacked full-width layout looks
     empty. left-wide = image left; right-wide = image right. */
  .plp-intro-hero--image-left-wide { grid-template-columns: 58fr 42fr; }
  .plp-intro-hero--image-right-wide { grid-template-columns: 42fr 58fr; }
  .plp-intro-hero--image-left-wide .plp-intro-hero__media,
  .plp-intro-hero--image-right-wide .plp-intro-hero__media { aspect-ratio: 16 / 9; }
  .plp-intro-hero--image-left-wide .plp-intro-hero__media { order: -1; }

  /* Full-width variant (campaign LPs): single column, image on top at its
     natural ratio (no 4/3 cover-crop), headline + content below. */
  .plp-intro-hero--image-full { display: block; }
  .plp-intro-hero--image-full .plp-intro-hero__media {
    aspect-ratio: auto;
    margin-bottom: var(--s-6, 24px);
  }
  .plp-intro-hero--image-full .plp-intro-hero__media img { height: auto; object-fit: contain; }
  .plp-intro-hero--image-full .plp-intro-head { max-width: 720px; }

  /* Centered text hero (message / confirmation pages, no image — doi-success).
     Copy + USPs + coupon + CTA all centered, so the page reads as an intentional
     confirmation screen rather than a lone left-aligned block. NGE-7761. */
  .plp-intro-head--center { text-align: center; margin-inline: auto; max-width: 620px; align-items: center; }
  .plp-intro-head--center .plp-intro-usps { display: inline-flex; text-align: left; }
  .plp-intro-head--center .plp-intro-coupon { margin-inline: auto; }
  .plp-intro-head--center .plp-intro-promo { align-items: center; }
  .plp-intro-head--center .plp-intro-cta { justify-content: center; }

  /* Promo price — compact "was/now" callout for campaign LPs (NGE-9084):
     a small discount pill above a large accent price with a struck compare-at,
     left-aligned in the hero content column (never a full-width band). */
  .plp-intro-promo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: var(--s-5, 20px) 0 0;
  }
  .plp-intro-promo__badge {
    padding: 4px 12px;
    background: var(--blush-700, #D88A7A);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--r-pill, 999px);
  }
  .plp-intro-promo__prices {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
  }
  .plp-intro-promo__price {
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    line-height: 1;
    color: var(--plp-accent, var(--teal-cta, var(--color-primary, #35b2b6)));
  }
  .plp-intro-promo__compare {
    font-size: 18px;
    font-weight: 500;
    color: var(--ink-3, #9a9a9a);
    text-decoration: line-through;
  }

  /* USP bullets — same checkmark treatment as the PDP hero console
     (.console-usps). Rich-text <ul>/<li>; ticks are a CSS mask, not inline
     icons, so scraped copy needs no markup beyond the list. NGE-7761. */
  .plp-intro-usps { margin: var(--s-4, 16px) 0 0; }
  .plp-intro-usps ul,
  .plp-intro-usps ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
  }
  .plp-intro-usps li {
    position: relative;
    margin: 0;
    padding-left: 28px;
    font-size: 15px;
    line-height: 1.35;
    color: var(--ink-2, #5c5c5c);
    letter-spacing: -0.005em;
  }
  .plp-intro-usps li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 18px;
    height: 18px;
    /* Brand-agnostic accent: Turquoise defines --teal-cta (keeps the PDP USP
       look); other brands fall back to their --color-primary. NGE-7761. */
    background-color: var(--plp-accent, var(--teal-cta, var(--color-primary, #35b2b6)));
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
      center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")
      center / contain no-repeat;
  }
  .plp-intro-usps strong { font-weight: 700; color: var(--ink, #4a4a4a); }

  /* Coupon callout — the legacy teaser's highlighted code box. Centered,
     dashed accent border, code large + tracked. Sits where the PDP shows price. */
  .plp-intro-coupon {
    /* Contained code chip, not a full-width bar — cap the width and let it sit
       at the content edge (text inside stays centered). NGE-7761. */
    margin: var(--s-5, 20px) 0 0;
    max-width: 22rem;
    padding: var(--s-4, 16px) var(--s-5, 20px);
    text-align: center;
    background: var(--bg-subtle, #f6f1ea);
    border: 1px dashed var(--plp-accent, var(--teal-cta, var(--color-primary, #35b2b6)));
    border-radius: var(--r-lg, 16px);
  }
  .plp-intro-coupon__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2, #5c5c5c);
    letter-spacing: 0.01em;
  }
  .plp-intro-coupon__code {
    display: block;
    margin: 4px 0;
    cursor: pointer;
  }
  .plp-intro-coupon__code-value {
    display: block;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.08em;
    color: var(--teal-600, var(--color-primary-600, #0d6a6d));
  }
  /* Copied affordance — reserved in-flow (so no layout shift), revealed when the
     shared web component toggles `.is-copied` on the coupon after a copy. */
  .plp-intro-coupon__code-copied {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--teal-cta, var(--color-primary, #35b2b6));
    opacity: 0;
    transition: opacity var(--dur-fast, 160ms) var(--ease-out, ease);
  }
  .plp-intro-coupon__code.is-copied .plp-intro-coupon__code-copied {
    opacity: 1;
  }
  .plp-intro-coupon__note {
    display: block;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-3, #757575);
  }
  /* CTA row — give the button breathing room from whatever precedes it
     (lead, USP list, or coupon box). NGE-7761. */
  .plp-intro-cta {
    margin-top: var(--s-5, 20px);
  }
  .plp-intro-cta-subtext {
    margin: var(--s-3, 12px) 0 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ink-3, #757575);
    max-width: 22rem;
  }

  @media (max-width: 45rem) {
    /* .plp-intro mobile padding inherited from inline section <style> */
    .plp-intro-head { margin-bottom: var(--s-3, 12px); }
    .plp-intro-head h1 { font-size: 26px; line-height: 1.15; margin: 6px 0 8px; }
    .plp-intro-head .lead { font-size: 14.5px; }
    /* Stack: image on top for both positions. */
    .plp-intro-hero { grid-template-columns: 1fr; gap: var(--s-5, 20px); }
    .plp-intro-hero__media,
    .plp-intro-hero--image-left .plp-intro-hero__media { order: -1; }
  }

  /* Editorial grid — count + feature driven (see Liquid `grid_modifier`).
     Base only owns the shared bits; column/row templates live on the
     per-count modifiers below. */
  .plp-editorial-grid {
    display: grid;
    gap: var(--s-4, 16px);
    min-height: 380px;
    /* Safe fallback for any count without a bespoke rule (1, 2, 6+) */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  /* ── Layout A: feature-led (exactly one tile is_feature) ──
     Big feature tile in column 1 spanning all rows; the remaining
     small tiles auto-flow into the side column(s). */
  .plp-editorial-grid--feature-3 { grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; }
  .plp-editorial-grid--feature-4 { grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(3, 1fr); }
  .plp-editorial-grid--feature-5 { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .plp-editorial-grid--feature-3 .editorial-tile--feature,
  .plp-editorial-grid--feature-5 .editorial-tile--feature { grid-row: 1 / 3; grid-column: 1; }
  .plp-editorial-grid--feature-4 .editorial-tile--feature { grid-row: 1 / 4; grid-column: 1; }

  /* ── Layout B: equal grid (no feature) ──
     Even count → perfect rectangle; odd count → one row stretches.
     Grid-mode tiles are vertical cards (image top, info below),
     overriding the horizontal --small treatment used in the side column. */
  .plp-editorial-grid--grid-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; }
  .plp-editorial-grid--grid-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  .plp-editorial-grid--grid-5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: auto; }
  .plp-editorial-grid--grid-5 .editorial-tile:nth-child(-n+3) { grid-column: span 2; }
  .plp-editorial-grid--grid-5 .editorial-tile:nth-child(n+4)  { grid-column: span 3; }

  .plp-editorial-grid--grid .editorial-tile--small { flex-direction: column; }
  .plp-editorial-grid--grid .editorial-tile--small .editorial-media {
    flex: 1 1 auto;
    aspect-ratio: 4 / 3;
  }
  .plp-editorial-grid--grid .editorial-tile--small .editorial-info {
    flex: none;
    border-left: none;
    border-top: 1px solid rgba(15, 21, 27, 0.04);
    justify-content: flex-start;
  }
  .editorial-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    box-shadow: 0 2px 6px -3px rgba(15, 21, 27, 0.06);
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
    cursor: pointer;
    color: inherit;
  }
  .editorial-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -10px rgba(15, 21, 27, 0.18), 0 6px 14px -4px rgba(15, 21, 27, 0.08);
  }

  .editorial-media {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    display: block;
    background: var(--bg-subtle, #f6f1ea);
    min-height: 0;
  }
  .editorial-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 800ms cubic-bezier(.2,.6,.2,1);
  }
  .editorial-tile:hover .editorial-media img { transform: scale(1.04); }

  .editorial-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
  }
  /* No `prefers-reduced-motion` hide any more (NGE-9614): the video no longer
     autoplays, so there is no motion to suppress — and hiding it would strip the
     poster frame and leave a play button floating over the still image. */

  /* Stretched overlay link — the tile is a <div> so the video can carry a real
     <button> (interactive content is not allowed inside an <a>). Sits above the
     card content but below the play button, and is NEVER hidden or disabled: the
     whole tile stays clickable while the video plays. NGE-9614. */
  .editorial-tile__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
  }

  /* Centered play button — same visual language as .stage-video-play on the PDP
     hero and .hero-video-play on the homepage green hero. NGE-9614. */
  .editorial-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 21, 27, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition:
      background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .editorial-video-play:hover {
    background: rgba(15, 21, 27, 0.75);
    transform: translate(-50%, -50%) scale(1.05);
  }
  .editorial-video-play svg {
    width: 26px;
    height: 26px;
    margin-left: 3px; /* optical centering of the triangle */
  }
  /* Playback started: the native controls take over the media area, so the custom
     play button steps aside. */
  .editorial-tile.is-playing .editorial-video-play {
    display: none;
  }
  /* Raise the video ABOVE the overlay link so its controls are clickable. The
     <video> only spans `.editorial-media`, so this hands the media area to the
     player WITHOUT touching the link over the rest of the tile — the white info
     block with title/price/arrow stays clickable throughout. Never hide
     `.editorial-tile__link`: that would kill the whole tile during playback. */
  .editorial-tile.is-playing .editorial-video {
    pointer-events: auto;
    z-index: 3;
  }

  /* Caption pill — blush-700 #D88A7A background + white text (mockup parity) */
  .editorial-caption {
    position: absolute;
    top: 14px;
    left: 14px;
    /* Above the video even while it is raised for playback (z-index 3). The pill
       sits top-left, the native controls bottom, so they never collide. */
    z-index: 5;
    padding: 6px 11px;
    background: var(--blush-700, #D88A7A);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--r-pill, 999px);
    box-shadow: 0 2px 8px -2px rgba(15, 21, 27, 0.18);
  }

  /* Editorial info — feature: text below image; small: text right of image */
  .editorial-info {
    padding: var(--s-5, 20px) var(--s-6, 24px) var(--s-6, 24px);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid rgba(15, 21, 27, 0.04);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .editorial-tile--feature .editorial-info {
    padding: var(--s-6, 24px) var(--s-7, 32px) var(--s-7, 32px);
  }
  .editorial-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink, #4a4a4a);
    letter-spacing: -0.022em;
    line-height: 1.15;
    margin: 0;
  }
  .editorial-tile--feature .editorial-name {
    font-size: clamp(22px, 2.2vw, 28px);
  }
  .editorial-tile--small .editorial-name {
    font-size: 17px;
  }
  .editorial-meta {
    display: flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-top: 4px;
  }
  .editorial-price {
    font-size: 14px;
    color: var(--ink-3, #757575);
    font-weight: 500;
    letter-spacing: -0.005em;
  }
  .editorial-price strong {
    /* Mockup parity (matches category-tiles): amount bold in dark slate,
       not pure black; the "from" prefix stays light via .editorial-price. */
    font-weight: 700;
    color: #2a323b;
    font-size: 15px;
  }
  .editorial-arrow {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-subtle, #f6f1ea);
    color: var(--teal-600, #0D6A6D);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .editorial-arrow svg { width: 14px; height: 14px; }
  .editorial-tile:hover .editorial-arrow {
    background: var(--plp-accent, var(--teal-cta, #35B2B6));
    color: #fff;
    transform: translateX(2px);
  }

  /* Small tiles — horizontal: image 66.66% left, text 33.33% right */
  .editorial-tile--small {
    flex-direction: row;
  }
  .editorial-tile--small .editorial-media {
    flex: 0 0 66.666%;
    height: auto;
    align-self: stretch;
  }
  .editorial-tile--small .editorial-info {
    flex: 1 1 33.333%;
    border-top: none;
    border-left: 1px solid rgba(15, 21, 27, 0.04);
    justify-content: center;
    padding: var(--s-5, 20px) var(--s-5, 20px);
  }
  .editorial-tile--small .editorial-media img {
    aspect-ratio: auto;
  }

  /* Tablet — collapse every variant to 2 columns; feature spans full
     width on top, the rest flow below. Resets the desktop spans so no
     variant leaves holes. */
  @media (max-width: 56.25rem) {
    .plp-editorial-grid {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      min-height: 0;
    }
    .plp-editorial-grid .editorial-tile { grid-column: auto; grid-row: auto; }
    .plp-editorial-grid--grid-5 .editorial-tile:nth-child(-n+3),
    .plp-editorial-grid--grid-5 .editorial-tile:nth-child(n+4) { grid-column: auto; }
    .editorial-tile--feature { grid-column: 1 / 3; }
    .editorial-tile--feature .editorial-media { aspect-ratio: 16 / 9; }
  }

  /* Mobile — single column for every variant; small tiles back to the
     horizontal image-left/text-right card. */
  @media (max-width: 45rem) {
    .plp-editorial-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      min-height: 0;
    }
    .plp-editorial-grid .editorial-tile { grid-column: auto; grid-row: auto; }
    .editorial-tile--feature .editorial-media { aspect-ratio: 4 / 3; }
  }

  /* PLP intro eyebrow — the shop's brand color, no literal anywhere in the chain.
     --color-primary is the semantic token each theme-*.liquid defines (turquoise,
     photosurtoile and lidlfotos all do), and on the turquoise system it resolves down
     to settings.primary_accent_color, which documents itself as "Default brand color —
     CTAs, eyebrows, headline em-highlights".
     NGE-9614: this used to fall back to --pink-cta, so every shop got a pink eyebrow
     unless it pinned a hex into the section setting — which is exactly what STIT's
     template did (#35b2b6). The per-instance `eyebrow_color` setting still overrides. */
  .eyebrow.eyebrow--blush {
    color: var(--plp-eyebrow, var(--color-primary));
  }
/* END_SECTION:plp-intro */

/* START_SECTION:plp-promo (INDEX:99) */
.shopify-section--plp-promo {
    background: var(--bg-surface, #ffffff);
    display: flow-root;
  }
  /* .plp-promo-section vertical padding driven by `container_spacing` via
     the `section-spacing` snippet — don't hardcode here. */

  .plp-promo-spotlight {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: var(--plp-promo-panel-bg, var(--teal-panel, var(--teal-700, #0D6A6D)));
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 6px 18px -6px rgba(15, 21, 27, 0.18));
    min-height: 240px;
  }
  .plp-promo-spotlight--img-left {
    grid-template-columns: 1.2fr 1fr;
  }
  .plp-promo-spotlight--img-left .plp-promo-visual {
    order: -1;
  }
  .plp-promo-content {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .plp-promo-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-3, 12px);
    color: var(--plp-promo-accent, #FFD66B);
  }
  .plp-promo-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--plp-promo-accent, #FFD66B);
  }
  .plp-promo-eyebrow--no-rule::before {
    display: none;
  }
  .plp-promo-eyebrow svg {
    width: 14px;
    height: 14px;
    color: var(--plp-promo-accent, #FFD66B);
  }
  .plp-promo-content h2 {
    color: var(--plp-promo-text, #fff);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.15;
    margin: 0 0 var(--s-2, 8px);
    letter-spacing: -0.02em;
  }
  .plp-promo-content h2 em {
    font-style: normal;
    font-weight: 700;
    color: var(--plp-promo-accent, #FFD66B);
  }
  .plp-promo-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--s-3, 12px);
    max-width: 480px;
  }
  .plp-promo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4, 16px);
    align-self: flex-start;
  }
  .plp-promo-cta {
    background: var(--plp-promo-cta-bg, #fff);
    color: var(--plp-promo-cta-text, var(--teal-cta, #35B2B6));
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 8px);
    align-self: flex-start;
    text-decoration: none;
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .plp-promo-cta-secondary {
    color: var(--plp-promo-text, #fff);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex;
    align-items: center;
    transition: opacity var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .plp-promo-cta-secondary:hover {
    opacity: 0.85;
  }
  .plp-promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  .plp-promo-cta svg {
    width: 14px;
    height: 14px;
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .plp-promo-cta:hover svg { transform: translateX(3px); }

  .plp-promo-visual {
    height: 100%;
    min-height: 180px;
    position: relative;
    overflow: hidden;
  }
  .plp-promo-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .6, .2, 1);
  }
  .plp-promo-spotlight:hover .plp-promo-visual img { transform: scale(1.03); }

  @media (max-width: 56rem) {
    .plp-promo-spotlight { grid-template-columns: 1fr; }
  }
  @media (max-width: 40rem) {
    .plp-promo-content { padding: var(--s-6, 24px) var(--s-5, 20px); }
    .plp-promo-content h2 { font-size: 22px; line-height: 1.2; }
    .plp-promo-visual { min-height: 220px; aspect-ratio: 16 / 10; }
  }
/* END_SECTION:plp-promo */

/* START_SECTION:price-table (INDEX:100) */
.section-price-table {
    --preview-color: var(--color-gray-400);
    --group-header-bg: var(--color-gray-700);
    --group-header-color: var(--color-white, #fff);
    --table-border-color: var(--color-gray-200);
    --compare-price-color: var(--color-gray-400);
    --sale-price-color: var(--color-danger);
    --header-text-color: var(--color-gray-800);
    --header-bg-color: var(--color-gray-100);
  }

  .price-table__subtitle {
    margin-bottom: 1.5rem;
  }

  .price-table__subtitle a {
    color: var(--sale-price-color);
    text-decoration: underline;
  }

  .price-table__category-heading {
    margin-bottom: 1rem;
  }

  .price-table__group {
    margin-bottom: 2rem;
    border: 1px solid var(--table-border-color);
  }

  .price-table__group-header {
    background-color: var(--group-header-bg);
    color: var(--group-header-color);
    padding: 0.5rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
  }

  .price-table__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
  }

  .price-table__table thead th {
    width: 25%;
    text-align: left;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--header-text-color);
    border-bottom: 2px solid var(--table-border-color);
    background-color: var(--header-bg-color);
  }

  .price-table__table thead th:last-child {
    text-align: right;
  }

  .price-table__row {
    border-bottom: 1px solid var(--table-border-color);
  }

  .price-table__row:last-child {
    border-bottom: none;
  }

  .price-table__cell {
    padding: 0.5rem;
    vertical-align: middle;
    font-size: 0.8rem;
  }

  .price-table__cell--preview {
    width: 25%;
  }

  .price-table__preview {
    width: auto;
    background-color: var(--preview-color);
  }

  .price-table__cell--size {
    width: 25%;
    font-weight: 600;
  }

  .price-table__cell--resolution {
    width: 25%;
  }

  .price-table__cell--price {
    width: 25%;
    text-align: right;
    white-space: nowrap;
  }

  .price-table__compare-price {
    display: block;
    color: var(--compare-price-color);
    font-size: 0.85rem;
    text-decoration: line-through;
  }

  .price-table__sale-price {
    display: block;
    color: var(--sale-price-color);
    font-weight: 700;
  }

  .price-table__cta {
    display: flex;
    justify-content: flex-end;
    padding: 1rem;
  }

  .price-table__table thead th:nth-child(3),
  .price-table__cell--resolution {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .price-table__table thead th:nth-child(3),
    .price-table__cell--resolution {
      display: table-cell;
    }

    .price-table__table {
      table-layout: fixed;
    }

    .price-table__cell {
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
    }
  }

  /* Matrix modifier (NGE-9456): column count varies with finishes.size, so
     the fixed 25%-per-column widths above (tuned for the 4-col block layout)
     don't apply — let the table auto-size, and right-align every price
     column instead of only the last one. */
  .price-table__table.price-table__table--matrix {
    table-layout: auto;
  }

  .price-table__table.price-table__table--matrix thead th,
  .price-table__table.price-table__table--matrix .price-table__cell--size,
  .price-table__table.price-table__table--matrix .price-table__cell--price {
    width: auto;
  }

  .price-table__table.price-table__table--matrix thead th:not(:first-child) {
    text-align: right;
  }

  .price-table__note {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--compare-price-color);
  }
/* END_SECTION:price-table */

/* START_SECTION:products-grid (INDEX:107) */
.products-grid__eyebrow {
    color: var(--pg-accent, var(--teal-cta, #35b2b6));
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .products-grid .container__header :is(.h1, .h2, .h3, .h4) {
    color: var(--pg-heading-color, inherit);
  }

  .products-grid__empty {
    color: var(--ink, #4a4a4a);
  }
/* END_SECTION:products-grid */

/* START_SECTION:promo-banner (INDEX:109) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  /* Section sits on white — gives the teal panel its proper stage. */
  .shopify-section--promo-banner {
    background: var(--bg-surface, #ffffff);
  }

  .promo-spotlight {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: var(--teal-panel, var(--teal-700, #084b4d));
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 6px 24px -6px rgba(15, 21, 27, 0.18));
  }
  @media (max-width: 56.25rem) {
    .promo-spotlight {
      grid-template-columns: 1fr;
    }
  }

  .promo-content {
    padding: var(--s-5, 20px) var(--s-8, 40px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
  }
  .promo-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-3, 12px);
    color: #ffd66b;
  }
  .promo-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: #ffd66b;
  }
  .promo-content h2 {
    color: #fff;
    font-weight: 700;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.15;
    margin: 0 0 var(--s-2, 8px);
    letter-spacing: -0.02em;
  }
  .promo-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 480px;
  }

  .promo-timer {
    margin: 12px 0 18px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .promo-timer svg {
    opacity: 0.85;
  }
  .promo-timer__countdown {
    font-variant-numeric: tabular-nums;
    color: #fff;
  }
  .promo-timer__countdown .text-xs {
    display: none;
  }

  .promo-cta {
    background: #fff;
    color: var(--teal-cta, #35b2b6);
    padding: 10px 22px;
    border-radius: var(--r-pill, 999px);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 8px);
    align-self: flex-start;
    text-decoration: none;
    transition:
      transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1)),
      box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  .promo-cta svg {
    width: 14px;
    height: 14px;
    transition: transform var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(0.2, 0.85, 0.25, 1));
  }
  .promo-cta:hover svg {
    transform: translateX(3px);
  }

  .promo-visual {
    height: 100%;
    min-height: 180px;
    position: relative;
    overflow: hidden;
  }
  .promo-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
  .promo-visual:hover img {
    transform: scale(1.03);
  }

  @media (max-width: 40rem) {
    .promo-content {
      padding: var(--s-6, 24px) var(--s-5, 20px);
    }
    .promo-content h2 {
      font-size: 22px;
      line-height: 1.2;
    }
    .promo-content p {
      font-size: 13.5px;
    }
    .promo-visual {
      min-height: 160px;
      aspect-ratio: 16 / 9;
    }
    /* Full-width CTA on mobile per design rule "every button full-width on
       mobile where it makes sense section-wise". */
    /* Width, stretch and centering come from the central mobile CTA rule in
       theme-turquoise (NGE-9614); only the type scale is this section's own. */
    .promo-cta {
      font-size: 13px;
      padding: 11px 18px;
    }
  }
/* END_SECTION:promo-banner */

/* START_SECTION:promo-pill (INDEX:110) */
.promo-pill {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 90;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 8px 10px 18px;
    background: var(--price-500, #E11D48);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--r-pill, 999px);
    box-shadow: 0 8px 24px -6px rgba(225, 29, 72, 0.45),
                0 2px 6px -2px rgba(15, 21, 27, 0.18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
    white-space: nowrap;
  }
  .promo-pill[data-visible='true'] {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0);
  }

  .promo-pill a {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
  }
  .promo-pill a strong { font-weight: 700; }
  .promo-pill a > span { display: inline-flex; align-items: baseline; gap: 4px; }
  .promo-pill a:hover .promo-pill-arrow { transform: translateX(2px); }

  .promo-pill-arrow {
    transition: transform var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* Timer wrapper styling — countdown is bold + tabular-nums */
  .promo-pill .promo-pill__timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-left: 4px;
    display: inline-flex;
    align-items: baseline;
  }

  .promo-pill-dismiss {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    margin-left: 4px;
    padding: 0;
    transition: background var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .promo-pill-dismiss:hover { background: rgba(255, 255, 255, 0.32); }
  .promo-pill-dismiss:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  .promo-pill-dismiss svg {
    width: 12px;
    height: 12px;
  }

  /* Desktop only — mobile pattern handled separately if needed */
  @media (max-width: 40rem) {
    .promo-pill[data-visible='true'] { display: none; }
  }
/* END_SECTION:promo-pill */

/* START_SECTION:seasonal-promo (INDEX:114) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  .shopify-section--seasonal-promo {
    background: var(--bg-surface, #fff);
  }

  .promo-spotlight {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: var(--teal-panel, #00787B);
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 12px -2px rgba(15,21,27,.06), 0 2px 4px rgba(15,21,27,.04));
  }
  @media (max-width: 56.25rem) {
    .promo-spotlight { grid-template-columns: 1fr; }
  }

  .promo-content {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .promo-content .promo-eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-bottom: var(--s-3, 12px);
    color: #FFD66B;
  }
  .promo-content .promo-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: #FFD66B;
  }

  .promo-content h2 {
    color: #fff;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(22px, 2vw, 26px);
    line-height: 1.15;
    margin: 0 0 var(--s-2, 8px);
    letter-spacing: -0.02em;
  }

  .promo-content .promo-lead,
  .promo-content .promo-lead p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--s-3, 12px);
    max-width: 480px;
  }
  .promo-content .promo-lead p:last-child { margin-bottom: 0; }

  .promo-timer {
    margin: 12px 0 18px;
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .promo-timer svg { opacity: 0.85; }
  .promo-timer__value {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .promo-cta {
    background: #fff;
    color: var(--teal-cta, #35B2B6);
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2, 8px);
    align-self: flex-start;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
  .promo-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
  }
  .promo-cta:hover svg { transform: translateX(3px); }

  .promo-visual {
    height: 100%;
    min-height: 180px;
    position: relative;
    overflow: hidden;
  }
  .promo-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2, .6, .2, 1);
  }
  .promo-visual:hover img { transform: scale(1.03); }

  /* Mobile — tighter content padding, image takes proper aspect */
  @media (max-width: 40rem) {
    .promo-content { padding: var(--s-6, 24px) var(--s-5, 20px); }
    .promo-content h2 { font-size: 22px; line-height: 1.2; }
    .promo-content .promo-lead,
    .promo-content .promo-lead p { font-size: 13.5px; }
    .promo-visual { min-height: 160px; aspect-ratio: 16 / 9; }
    .promo-cta { font-size: 13px; padding: 9px 18px; }
  }

  /* Secondary accent variant — swap teal panel for red, CTA stays white */
  .seasonal-promo--accent-secondary .promo-spotlight {
    background: var(--pink-700, #AD1457);
  }
  .seasonal-promo--accent-secondary .promo-cta {
    color: var(--pink-cta, #C2185B);
  }
/* END_SECTION:seasonal-promo */

/* START_SECTION:seo-text (INDEX:115) */
.section-seo-text .container__header {
    color: var(--seo-heading-color, inherit);
  }

  .section-seo-text .seo-text__body {
    color: var(--seo-text-color, inherit);
  }

  .section-seo-text--bg {
    background-color: var(--seo-bg);
  }

  .section-seo-text--cta-colored .seo-text__cta .button {
    background-color: var(--seo-cta-bg);
    color: var(--seo-cta-text);
  }

  /* Quick picks (NGE-9911) — compact re-entry list beside the SEO copy.
     The surface is pinned to white rather than `--color-background`: this band runs on the
     beige page background, where that token resolves to the same beige and the card
     disappeared into it. It is a lifted panel, so it states its own surface. */
  .seo-quick-picks {
    background: #fff;
    border: 1px solid rgb(0 0 0 / 6%);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow:
      0 1px 2px rgb(0 0 0 / 4%),
      0 8px 24px -12px rgb(0 0 0 / 12%);
  }

  @media (prefers-color-scheme: dark) {
    .seo-quick-picks {
      background: var(--color-surface, #fff);
    }
  }

  .seo-text__media > * + .seo-quick-picks {
    margin-top: 1.5rem;
  }

  .seo-quick-picks__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal-cta, currentColor);
  }

  .seo-quick-picks__heading {
    margin: 0.25rem 0 0.75rem;
    font-weight: 700;
  }

  .seo-quick-picks__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .seo-quick-picks__row + .seo-quick-picks__row {
    border-top: 1px solid rgb(0 0 0 / 8%);
  }

  /* Grid, not flex: the labels wrap to two lines and a flex row let each price sit wherever
     its own label ended, so the prices were ragged instead of forming a column. Three fixed
     tracks put every price on the same left edge no matter how the label breaks, and
     `align-items: start` keeps a price on the first line of a two-line label instead of
     centring it against the whole block. */
  .seo-quick-picks__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content 1rem;
    align-items: start;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0;
    text-decoration: none;
    color: inherit;
  }

  .seo-quick-picks__price {
    justify-self: start;
    white-space: nowrap;
  }

  /* The `price` snippet brings the theme's own price CI; only the size is toned down for
     this compact list. */
  .seo-quick-picks__price .price__data {
    gap: 0.25rem;
    font-size: 0.875rem;
  }

  .seo-quick-picks__arrow {
    opacity: 0.5;
    transition: transform 0.15s ease;
  }

  .seo-quick-picks__link:hover .seo-quick-picks__arrow {
    transform: translateX(2px);
    opacity: 1;
  }
/* END_SECTION:seo-text */

/* START_SECTION:sustainability-strip (INDEX:118) */
.sustainability-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-4, 16px);
    text-align: center;
  }
  .sustainability-strip__intro {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    max-width: 640px;
  }
  .sustainability-strip__heading {
    margin: 0;
  }
  .sustainability-strip__lead {
    margin: 0;
    color: var(--ink-3, #757575);
  }
  .sustainability-strip__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-6, 24px) var(--s-8, 40px);
  }
  .sustainability-item {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .sustainability-item__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--teal-cta, #35b2b6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
  }
  .sustainability-item__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .sustainability-item__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #4a4a4a);
  }
  .sustainability-strip__cta {
    margin-top: var(--s-2, 8px);
  }
/* END_SECTION:sustainability-strip */

/* START_SECTION:testimonials (INDEX:122) */
/* Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet -- don't hardcode outer paddings here. */
  /* Section: warm beige ground (mockup parity). */
  .shopify-section--testimonials {
    background: var(--bg-subtle, #FAF7F4);
  }
  

  /* .section-head, h2, .lead, .eyebrow — global rules in snippets/theme-turquoise.liquid */

  /* Grid: section-head stays at full container width (aligns with all
     other Green sections). The 3-tile row is constrained to the mockup's
     1280px container width and centered, with a roomier gap so the tiles
     don't read as glued together. Tiles use 1fr inside the wrap → match
     the mockup's `repeat(3, 1fr)` proportions; total visible row width
     ≈ 1280px (vs. our 1440px container) gives a slim ~80px indent on each
     side — much closer to the mockup than the previous 1100px constraint. */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Fluid gap — scales with viewport width so the proportion stays
       mockup-correct across desktop sizes instead of relying on a hard
       pixel value. Approx 40px @ 700px viewport, 86px @ 1440px,
       capped at 96px on very wide screens. */
    gap: clamp(40px, 6vw, 96px);
    /* Fluid max-width — keeps a generous side-indent on wide viewports
       (tile row sits in the mockup's 1100-1240px band) but allows the
       grid to shrink to the container on smaller desktops. */
    max-width: clamp(900px, 80vw, 1240px);
    margin-left: auto;
    margin-right: auto;
  }
  @media (max-width: 56.25rem) {
    .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3, 12px); }
  }
  @media (max-width: 45rem) {
    .testimonials-grid {
      display: flex;
      grid-template-columns: none;
      gap: var(--s-3, 12px);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      max-width: none;
      /* Center-snap with a peek of the neighbours. The 8% inline padding keeps
         the first/last tile centered AND stops the first tile sitting flush
         against the screen edge. NGE-8051. */
      margin: 0;
      padding-inline: 8%;
    }
    .testimonials-grid::-webkit-scrollbar { display: none; }
    .testimonial-tile { flex: 0 0 84%; scroll-snap-align: center; }
  }

  /* Carousel wrapper (custom element defaults to inline) + indicator dots —
     dots show on the mobile carousel only. NGE-8051. */
  .testimonials-carousel { display: block; }
  .testimonials-dots { display: none; }
  @media (max-width: 45rem) {
    .testimonials-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: var(--s-5, 20px);
    }
  }
  /* Dot style matches the hero slideshow dots (.hero-slide-dot) so indicators
     read identically theme-wide: 28×4 bar, active widens to 42 + teal. NGE-8051. */
  .testimonials-dot {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(15, 21, 27, 0.18);
    cursor: pointer;
    transition: background var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                width var(--dur-base, 240ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .testimonials-dot:hover { background: rgba(15, 21, 27, 0.32); }
  .testimonials-dot.is-active {
    background: var(--teal-cta, #35b2b6);
    width: 42px;
  }

  /* Tile */
  .testimonial-tile {
    background: #fff;
    border: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: border-color var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1)),
                box-shadow var(--dur-fast, 160ms) var(--ease-out, cubic-bezier(.2,.85,.25,1));
  }
  .testimonial-tile:hover {
    border-color: var(--line-strong, rgba(15, 21, 27, 0.12));
    box-shadow: 0 8px 24px -12px rgba(15, 21, 27, 0.12);
  }

  .testimonial-tile-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-subtle, #FAF7F4);
  }
  .testimonial-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .testimonial-quote {
    padding: 22px 24px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .testimonial-quote p {
    margin: 0 0 var(--s-3, 12px);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-2, #5e5e5e);
    letter-spacing: -0.005em;
    flex: 1;
  }
  /* Serif " glyph before the pull-quote (mockup parity) */
  .testimonial-quote p::before {
    content: '\201C';
    display: inline;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    line-height: 0;
    color: var(--ink-4, #939393);
    margin-right: 2px;
    vertical-align: -4px;
  }
  .testimonial-author {
    display: block;
    font-size: 13px;
    color: var(--ink-3, #757575);
    font-weight: 600;
    letter-spacing: -0.002em;
    margin-top: auto;
    padding-top: var(--s-2, 8px);
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
  }
  .testimonial-author .product {
    display: block;
    font-weight: 400;
    color: var(--ink-4, #939393);
    font-size: 12px;
    margin-top: 2px;
    letter-spacing: 0;
  }

  @media (max-width: 45rem) {
    .testimonial-quote { padding: 18px 20px 18px; }
    .testimonial-quote p { font-size: 14px; }
  }
/* END_SECTION:testimonials */

/* START_SECTION:text-media (INDEX:124) */
.text-media__spaced-text {
    word-spacing: 1em;
  }
/* END_SECTION:text-media */

/* START_SECTION:trust-and-pricing (INDEX:125) */
/* Mobile condensed: details toggle */
  .trust-condensed-details summary {
    list-style: none;
  }

  .trust-condensed-details summary::-webkit-details-marker {
    display: none;
  }

  .trust-condensed-details[open] .trust-toggle-icon {
    transform: rotate(180deg);
  }

  .trust-condensed-details[open] .details-more {
    display: none;
  }

  .trust-condensed-details[open] .details-less {
    display: inline;
  }

  /* Desktop condensed: collapsible-element centers the expand button */
  [data-collapsible-group] collapsible-element {
    display: flex;
    justify-content: center;
  }

  /* Desktop condensed: accordion panels */
  .trust-accordion-panel[aria-hidden='true'] {
    display: none;
  }

  .trust-accordion-panel[aria-hidden='false'] {
    display: block;
  }

  /* Desktop condensed: expand button states */
  .trust-expand-btn[aria-expanded='true'] .trust-expand-icon {
    transform: rotate(180deg);
  }

  .trust-expand-btn[aria-expanded='true'] .collapsible-more {
    display: none;
  }

  .trust-expand-btn[aria-expanded='false'] .collapsible-less {
    display: none;
  }

  .trust-expand-btn[aria-expanded='true'] .collapsible-less {
    display: inline;
  }
/* END_SECTION:trust-and-pricing */

/* START_SECTION:trust-strip (INDEX:126) */
/* Section sits on white background (continuing the hero band visually).
     Full-width divider lives on the section wrapper (matches mockup
     `.trust-band-section { border-top: 1px solid var(--line) }`), NOT on the
     inner grid — so the rule spans the whole viewport, not just the
     container content area. */
  .shopify-section--trust-strip {
    background: var(--bg-surface, #ffffff);
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
  }

  /* Attached mode: pull the divider in to the container width (not the full
     viewport) and add a gap between it and the content. The section-level
     full-width divider is suppressed so it doesn't double up. */
  .shopify-section--trust-strip:has(.hero-trust-band--attached) {
    border-top: none;
  }
  .hero-trust-band--attached {
    border-top: 1px solid var(--line, rgba(15, 21, 27, 0.08));
    padding-top: var(--s-5, 20px);
  }

  /* Divider off (show_divider = false): DESKTOP ONLY — the line bothers when the
     band sits attached under the hero. On mobile (stacked, ≤75rem) the divider
     stays as a useful separator. NGE-8051. */
  @media (min-width: 75rem) {
    .shopify-section--trust-strip:has(.hero-trust-band--no-divider) {
      border-top: none;
    }
    .hero-trust-band--no-divider {
      border-top: none;
    }
  }

  /* Mockup parity (lines 475-563 of stit-homepage-v17_5-alt.html).
     Vertical padding driven by `container_spacing` via the
     `section-spacing` snippet — only the grid layout stays here. */
  .hero-trust-band {
    margin-top: 0;
    display: grid;
    /* Mirrors the hero grid above (.hero-grid is also `0.7fr 1fr`) so the
       rating pill lines up under the hero copy column and the promises-row
       sits directly under the hero image — left/right edges aligned, matching
       the mockup. */
    grid-template-columns: 0.7fr 1fr;
    gap: var(--s-8, 40px);
    align-items: center;
  }

  /* Rating-right (image-left hero, e.g. PDP): promises move to the wide left
     column (under the 60% image), rating to the narrow right column (under the
     40% console). Mirrors the PDP hero's 60fr/40fr split. NGE-8051. */
  .hero-trust-band--rating-right {
    grid-template-columns: 60fr 40fr;
  }
  .hero-trust-band--rating-right .promises-row {
    order: 1;
  }
  .hero-trust-band--rating-right .rating-pill {
    order: 2;
  }

  /* 5 promises: widen the desktop track from 4 to 5 columns (see band_class). */
  .hero-trust-band--promises-5 .promises-row {
    grid-template-columns: repeat(5, auto);
  }

  .hero-trust-band .rating-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink-3, #757575);
    white-space: nowrap;
    border: none;
    padding: 0;
  }
  .hero-trust-band .rating-pill__img {
    height: 22px;
    width: auto;
  }
  .hero-trust-band a.rating-pill {
    text-decoration: none;
    color: var(--ink-3, #757575);
  }
  /* Flex row with a gap instead of `letter-spacing` — one declared distance between every
     pair of stars, filled or empty. See the markup comment: letter-spacing also applies
     after the last glyph of an inline box, so it could not keep the boundary between the
     filled and the empty run identical to the gaps inside a run. NGE-9614. */
  .hero-trust-band .rating-pill .stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    color: var(--trust-star-color, #f5a623);
    font-size: 13px;
    line-height: 1;
  }
  .hero-trust-band .rating-pill .star {
    letter-spacing: 0;
  }
  .hero-trust-band .rating-pill .star--empty {
    color: rgba(15, 21, 27, 0.18);
  }
  .hero-trust-band .rating-pill strong {
    color: var(--ink, #4a4a4a);
    font-weight: 700;
  }

  .hero-trust-band .promises-row {
    display: grid;
    /* Content-width columns distributed edge-to-edge across the image-aligned
       track: first promise sits flush under the image's left edge, the last
       flush under its right edge (mockup parity). `auto` (not `1fr`) lets each
       item keep its natural width so the longer Italian labels are never
       clipped — the equal `minmax(0,1fr)` columns used before forced every
       column to the same narrow width and the nowrap text overlapped. */
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: var(--s-5, 20px);
    align-items: center;
  }
  /* Stack the rating above the promises before the image track gets too
     narrow to hold 4 single-line Italian labels side by side. Stacked, the
     promises-row spans the full container width so it always has room. */
  @media (max-width: 75rem) {
    .hero-trust-band {
      grid-template-columns: 1fr;
      gap: var(--s-4, 16px);
      justify-items: center;
    }
    /* Stacked: rating ALWAYS above the promises and centered — regardless of
       the desktop "Rating side" (left/right). NGE-8051. */
    .hero-trust-band .rating-pill,
    .hero-trust-band--rating-right .rating-pill {
      order: 0;
    }
    .hero-trust-band .promises-row,
    .hero-trust-band--rating-right .promises-row {
      order: 1;
    }
    .hero-trust-band .rating-pill {
      justify-content: center;
      flex-wrap: wrap;
      white-space: normal;
      text-align: center;
      padding-bottom: var(--s-3, 12px);
      border-bottom: 1px solid rgba(15, 21, 27, 0.06);
    }
  }
  @media (max-width: 45rem) {
    .hero-trust-band .promises-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--s-4, 16px);
      justify-content: center;
    }
  }

  .hero-trust-band .promise-item {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
  }
  .hero-trust-band a.promise-item {
    text-decoration: none;
    color: inherit;
  }
  .hero-trust-band .promise-item .icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--trust-icon-color, var(--teal-cta, #35b2b6));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
  }
  .hero-trust-band .promise-item .icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hero-trust-band .promise-item .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .hero-trust-band .promise-item .text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .hero-trust-band .promise-item .title {
    font-size: 13px;
    font-weight: 700;
    color: var(--trust-title-color, var(--ink, #4a4a4a));
    letter-spacing: -0.005em;
    line-height: 1.25;
    white-space: nowrap;
  }
  .hero-trust-band .promise-item .meta {
    font-size: 12px;
    color: var(--trust-meta-color, var(--ink-4, #939393));
    line-height: 1.25;
    white-space: nowrap;
  }
  @media (max-width: 45rem) {
    .hero-trust-band .promise-item .title,
    .hero-trust-band .promise-item .meta {
      white-space: normal;
    }
  }
/* END_SECTION:trust-strip */

/* START_SECTION:trustpilot-reviews (INDEX:127) */
.shopify-section--trustpilot-reviews {
    background: var(--bg-surface, #ffffff);
    /* flow-root prevents the inner `.container .my-container` margin from
       collapsing through the section — without this, the white bg would only
       cover the container content height and the page bg (--bg-page beige)
       would bleed in above/below. */
    display: flow-root;
  }

  /* Right-aligned section head (was a no-op before). Mirrors the center modifier. */
  .section-head--right {
    text-align: right;
  }
  .section-head--right .section-head__left {
    margin-left: auto;
  }

  /* Bordered card wrapper — mockup lines 1444-1454.
     Background + border colour are merchant-overridable via inline
     --trust-card-bg / --trust-card-border custom properties; fallbacks keep
     the original transparent / --ink-5 look when unset. */
  .trust-container {
    margin: var(--s-6, 24px) auto 0;
    background: var(--trust-card-bg, transparent);
    border: 1px solid var(--trust-card-border, var(--ink-5, rgba(15, 21, 27, 0.08)));
    border-radius: var(--r-lg, 16px);
    padding: 32px 24px 28px;
  }
  @media (min-width: 48rem) {
    .trust-container {
      padding: 36px 36px 28px;
    }
  }
  @media (max-width: 56.25rem) {
    .trust-container {
      padding: 24px 16px 22px;
    }
  }

  .trustpilot-wrap {
    width: 100%;
    margin: 0 auto;
  }

  .trust-container__placeholder {
    margin: 0;
    text-align: center;
    color: var(--ink-3, #757575);
    font-size: 13px;
    padding: var(--s-4, 16px) 0;
  }

  /* Let the embedded widget breathe — Shadow DOM means no inner CSS reach,
     but we can at least guarantee block-level layout from the host side. */
  .trustpilot-wrap etrusted-widget,
  .trustpilot-wrap .trustpilot-widget {
    display: block;
    width: 100%;
  }

  /* Curated (static) review grid — merchant-authored testimonial cards. */
  .trust-reviews {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4, 16px);
  }
  @media (min-width: 48rem) {
    .trust-reviews {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  .trust-review {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
    padding: var(--s-5, 20px);
    border: 1px solid var(--ink-5, rgba(15, 21, 27, 0.08));
    border-radius: var(--r-lg, 16px);
    background: var(--bg-subtle, #f7f7f5);
  }

  .trust-review__stars {
    display: flex;
    gap: 2px;
  }

  .trust-review__star {
    color: var(--ink-5, rgba(15, 21, 27, 0.2));
    font-size: 16px;
    line-height: 1;
  }

  .trust-review__star--on {
    color: var(--teal-cta, #35b2b6);
  }

  .trust-review__quote {
    margin: 0;
  }

  .trust-review__meta {
    display: flex;
    align-items: center;
    gap: var(--s-3, 12px);
    margin-top: auto;
  }

  .trust-review__avatar-img {
    width: 40px;
    height: 40px;
    border-radius: var(--r-pill, 999px);
    object-fit: cover;
  }

  .trust-review__author-wrap {
    display: flex;
    flex-direction: column;
  }

  .trust-review__author {
    font-weight: 600;
  }

  .trust-review__source {
    color: var(--ink-3, #757575);
    font-size: 13px;
  }

  .trust-cta {
    display: flex;
    justify-content: center;
    margin-top: var(--s-5, 20px);
  }
/* END_SECTION:trustpilot-reviews */

/* START_SECTION:video-banner (INDEX:130) */
.video-banner__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-banner__wrapper--full {
    height: 100vh;
    min-height: 500px;
  }

  .video-banner__wrapper--medium {
    height: 70vh;
    min-height: 400px;
  }

  .video-banner__wrapper--small {
    height: 50vh;
    min-height: 300px;
  }

  .video-banner__video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
  }

  .video-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, var(--overlay-opacity, 0.3));
    z-index: 1;
  }

  .video-banner__content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    max-width: 800px;
    color: var(--text-color, #ffffff);
  }

  .video-banner__heading {
    margin: 0 0 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
  }

  .video-banner__heading--small {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .video-banner__heading--medium {
    font-size: clamp(2.5rem, 6vw, 4rem);
  }

  .video-banner__heading--large {
    font-size: clamp(3rem, 7vw, 5rem);
  }

  .video-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
  }

  .video-banner__button:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  @media screen and (max-width: 749px) {
    .video-banner__wrapper--full {
      height: 100vh;
      min-height: 400px;
    }

    .video-banner__wrapper--medium {
      height: 60vh;
      min-height: 350px;
    }

    .video-banner__wrapper--small {
      height: 40vh;
      min-height: 250px;
    }

    .video-banner__content {
      padding: 1.5rem;
    }

    .video-banner__heading {
      margin-bottom: 1.5rem;
    }

    .video-banner__button {
      padding: 0.875rem 2rem;
      font-size: 1rem;
    }
  }
/* END_SECTION:video-banner */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:form-checkbox (INDEX:203) */
/* Consent-label links (e.g. privacy page link, participation-conditions
     popover trigger) render as inline primary-colored links. */
  .form-checkbox__label a,
  .form-checkbox__label .consent-popover-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .form-checkbox__label .consent-popover-link {
    padding: 0;
    font: inherit;
    background: none;
    border: none;
  }
/* END_SNIPPET:form-checkbox */

/* START_SNIPPET:gradient-overlay (INDEX:212) */
.gradient-overlay {
    background: radial-gradient(
      84.81% 52.04% at 26.01% 80.16%,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0) 100%
    );
  }
/* END_SNIPPET:gradient-overlay */

/* START_SNIPPET:pricing-tables-multi (INDEX:307) */
.pricing-tables-multi__card {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    height: 100%;
    background: var(--color-white, #fff);
    border-radius: var(--r-lg, 16px);
    padding: var(--s-4, 16px);
  }
  @media (min-width: 62rem) {
    .pricing-tables-multi__card {
      padding: var(--s-6, 24px);
    }
  }
  /* Tables inside the shared card drop their own card chrome (bg/padding/round)
     so the two tables read as one card. */
  .pricing-tables-multi__card .pricing-table-component {
    background: transparent;
    padding: 0;
    border-radius: 0;
    height: auto;
    gap: var(--s-2, 8px);
  }
  .pricing-tables-multi__label {
    margin: var(--s-3, 12px) 0 0;
    text-align: center;
    font-weight: 700;
  }
  .pricing-tables-multi__label:first-child {
    margin-top: 0;
  }
/* END_SNIPPET:pricing-tables-multi */

/* START_SNIPPET:social-proof-content (INDEX:342) */
.social-proof-images {
    -webkit-overflow-scrolling: touch;
  }

  .social-proof-images img {
    display: inline-block;
  }

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

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
/* END_SNIPPET:social-proof-content */

/* START_SNIPPET:social-proof (INDEX:344) */
.social-proof-images {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .social-proof-images img {
    display: inline-block;
  }

  @media (min-width: 1024px) {
    .social-proof-images {
      flex-wrap: wrap !important;
    }
  }

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

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
/* END_SNIPPET:social-proof */