/** Shopify CDN: Minification failed

Line 3973:90 Unexpected "{"
Line 3973:91 Expected identifier but found "%"
Line 3973:153 Unexpected "{"
Line 3973:154 Expected identifier but found "%"
Line 3973:176 Unexpected "{"
Line 3973:177 Expected identifier but found "%"
Line 14439:4 Unexpected "{"
Line 14439:5 Expected identifier but found "%"
Line 14441:4 Unexpected "{"
Line 14441:5 Expected identifier but found "%"
... and 71 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
/* ── Section root ────────────────────────────────────────── */
  .err404 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: var(--err-min-h);
    background-color: var(--err-bg);
    color: var(--err-desc-color);
    padding: var(--err-pad-top) var(--err-pad-h) var(--err-pad-bottom);
    overflow: hidden;
  }

  /* ── Decorative backdrop number ──────────────────────────── */
  .err404__backdrop {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
    z-index: 0;
  }
  .err404__backdrop-text {
    font-family: var(--err-backdrop-font);
    font-weight: var(--err-backdrop-weight);
    font-size: clamp(180px, 40vw, 480px);
    line-height: 1;
    color: var(--err-backdrop-color);
    letter-spacing: -0.03em;
    margin: 0;
    white-space: nowrap;
    text-align: center;
  }

  /* ── Inner content (sits above the backdrop) ─────────────── */
  .err404__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
  .err404__eyebrow {
    font-family: var(--err-eyebrow-font);
    font-weight: var(--err-eyebrow-weight);
    font-size: var(--err-eyebrow-size);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--err-eyebrow-color);
    margin: 0 0 24px;
  }
  .err404__title {
    font-family: var(--err-title-font);
    font-weight: var(--err-title-weight);
    font-size: var(--err-title-size);
    line-height: 1.1;
    letter-spacing: var(--err-title-ls);
    text-transform: var(--err-title-transform);
    color: var(--err-title-color);
    margin: 0;
  }

  .err404__description {
    font-family: var(--err-desc-font);
    font-weight: var(--err-desc-weight);
    font-size: var(--err-desc-size);
    line-height: var(--err-desc-lh);
    color: var(--err-desc-color);
    margin: 24px 0 0;
  }

  /* ── Search bar ──────────────────────────────────────────── */
  .err404__search {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 36px auto 0;
    max-width: 480px;
    border-bottom: 1px solid var(--err-divider);
    transition: border-color 0.2s ease;
  }
  .err404__search:focus-within {
    border-bottom-color: var(--err-title-color);
  }
  .err404__search-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 12px 0;
    font-family: var(--err-desc-font);
    font-weight: var(--err-desc-weight);
    font-size: 14px;
    color: var(--err-title-color);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .err404__search-input::placeholder {
    color: var(--err-desc-color);
    opacity: 0.6;
  }
  .err404__search-submit {
    background: transparent;
    border: 0;
    padding: 12px 0 12px 16px;
    cursor: pointer;
    font-family: var(--err-eyebrow-font);
    font-weight: var(--err-eyebrow-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--err-title-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .err404__search-submit:hover { gap: 12px; }
  .err404__search-submit svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .err404__search-submit:hover svg { transform: translateX(4px); }

  /* ── Buttons row ─────────────────────────────────────────── */
  /* These buttons are intentionally decoupled from the theme's global
     [data-button-style] system — they have their own colors, borders,
     and hover states defined locally so changing the global Buttons
     settings does NOT affect this 404 page. */
  .err404__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--err-btn-gap);
    justify-content: center;
    margin: 36px 0 0;
  }
  .err404__btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-family: var(--err-btn-font);
    font-weight: var(--err-btn-weight);
    font-size: var(--err-btn-size);
    letter-spacing: var(--err-btn-ls);
    text-transform: var(--err-btn-transform);
    padding: var(--err-btn-pad-v) var(--err-btn-pad-h);
    border-width: var(--err-btn-bw);
    border-style: solid;
    border-radius: var(--err-btn-br);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .err404__btn--1 {
    background-color: var(--err-btn1-bg);
    color: var(--err-btn1-text);
    border-color: var(--err-btn1-border);
  }
  .err404__btn--1:hover {
    background-color: var(--err-btn1-bg-h);
    color: var(--err-btn1-text-h);
    border-color: var(--err-btn1-border-h);
  }

  .err404__btn--2 {
    background-color: var(--err-btn2-bg);
    color: var(--err-btn2-text);
    border-color: var(--err-btn2-border);
  }
  .err404__btn--2:hover {
    background-color: var(--err-btn2-bg-h);
    color: var(--err-btn2-text-h);
    border-color: var(--err-btn2-border-h);
  }

  /* ── Reveal animation — gated by data-reveal-enabled ─────── */
  .err404[data-reveal-enabled="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .err404[data-reveal-enabled="true"] [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .err404[data-reveal-enabled="true"] [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:404 */

/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--page-margin, 20px);
    font-family: var(--ab-font);
    font-weight: var(--ab-weight);
    font-size: var(--ab-size-mobile);
    text-transform: var(--ab-transform);
    letter-spacing: var(--ab-letter-spacing);
    transition: opacity 0.3s ease;
    position: relative;
  }

  @media screen and (min-width: 750px) {
    .announcement-bar {
      font-size: var(--ab-size-desktop);
    }
  }

  .announcement-bar__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    overflow: hidden;
  }

  .announcement-bar__item {
    white-space: nowrap;
  }

  .announcement-bar__item a {
    text-decoration: none;
  }

  .announcement-bar__item a:hover {
    text-decoration: underline;
  }

  /* Slides mode */
  .announcement-bar--slides {
    overflow: hidden;
  }

  .announcement-bar__slides {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .announcement-bar__slide {
    position: absolute;
    width: 100%;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    white-space: nowrap;
  }

  .announcement-bar__slide.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .announcement-bar__slide.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
  }

  .announcement-bar__slide a {
    text-decoration: none;
  }

  .announcement-bar__slide a:hover {
    text-decoration: underline;
  }

  /* ── MARQUEE TICKER ────────────────────────────────────────────
     Pattern: ryanmulligan.dev/blog/css-marquee. Two identical __set
     children sit side-by-side inside __track. Each set animates by
     translateX(-100%) — so by animation end, the second set has slid
     exactly into the first set's starting position. Reset is then
     invisible because both sets are content-identical.

     Why this beats the previous JS-cloning approach:
       - Survives resize automatically (no pixel measurements)
       - No keyframe regeneration / DOM mutation
       - Speed is a pure CSS variable; merchant changes apply instantly
       - Screen readers read the items once (aria-hidden on duplicate)
       - Plays nicely with prefers-reduced-motion
  ─────────────────────────────────────────────────────────────── */
  .announcement-bar--marquee {
    padding: 0;
    overflow: hidden;
    /* Override the bar's default justify-content: center — the track
       is wider than the bar, and centering would push the left edge
       into negative space, breaking the keyframe math. */
    justify-content: flex-start;
  }

  .announcement-bar__track {
    display: flex;
    /* Intrinsic width — sized by its two __set children, not the
       viewport. */
    width: max-content;
  }

  .announcement-bar__set {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* Tight, consistent spacing between items. The set's natural width
       fills the viewport via the Liquid repeat_count multiplier above,
       so there's no leftover space for space-around / space-between
       to inflate. The gap value here IS what the merchant visually
       perceives as "spacing between announcements." */
    gap: 1.75rem;
    padding: 0 0.875rem;
    white-space: nowrap;
    /* --marquee-duration is set per-instance on the bar root from
       section.settings.marquee_speed. Fallback to 20s if missing. */
    animation: announcement-marquee var(--marquee-duration, 20s) linear infinite;
  }

  /* Pause both sets together on hover. */
  .announcement-bar--marquee:hover .announcement-bar__set {
    animation-play-state: paused;
  }

  /* translateX(-100%) refers to each set's OWN width. With the two
     sets laid out as [Set 1 | Set 2] and Set 2 starting at x = W
     (Set 1's width), animating both by -100% (each by -W) lands
     Set 2 at x = 0 — exactly where Set 1 started. The loop reset
     swaps Set 2 back to x = W and Set 1 to x = 0, but since they're
     visually identical the swap is invisible. Set padding of
     0 0.875rem on both sets means the transition point between
     Set 1's end and Set 2's start naturally totals 1.75rem of space
     (0.875 + 0.875), exactly matching the in-set gap — so the visual
     rhythm of "item · gap · item · gap …" never breaks at the loop. */
  @keyframes announcement-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
  }

  /* Vestibular-safety: stop the marquee for users who prefer reduced
     motion. The first set still renders so the message remains
     visible — just static instead of scrolling. */
  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__set {
      animation: none;
    }
  }

  .announcement-bar__close {
    position: absolute;
    right: var(--page-margin, 20px);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 8px 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .announcement-bar__close:hover {
    opacity: 0.7;
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:article (INDEX:3) */
/* ── Section root ────────────────────────────────────────── */
  .article-x {
    display: block;
    background-color: var(--art-bg);
    color: var(--art-text);
    padding: var(--art-pad-top) var(--art-pad-h) var(--art-pad-bottom);
  }
  .article-x__inner {
    width: 100%;
  }

  /* ── Article header ──────────────────────────────────────── */
  .article-x__header {
    display: block;
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px;
  }
  @media screen and (min-width: 1100px) {
    .article-x__header {
      margin-bottom: 72px;
    }
  }
  .article-x__eyebrow {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--art-accent);
    margin: 0 0 28px;
  }
  .article-x__eyebrow a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .article-x__eyebrow a:hover { color: var(--art-text); }
  .article-x__title {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: clamp(34px, 5.6vw, var(--art-title-max-size));
    letter-spacing: -0.022em;
    line-height: 1.05;
    margin: 0;
    color: var(--art-text);
    text-wrap: balance;
  }
  .article-x__meta {
    margin: 32px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--art-muted);
  }
  .article-x__meta-sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
  }

  /* ── Hero image ──────────────────────────────────────────── */
  .article-x__hero {
    max-width: var(--art-hero-max-width);
    margin: 0 auto 56px;
    aspect-ratio: var(--art-hero-ratio);
    overflow: hidden;
    background-color: var(--art-placeholder-bg);
  }
  @media screen and (min-width: 1100px) {
    .article-x__hero {
      margin-bottom: 88px;
    }
  }
  .article-x__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ── Body / Prose ────────────────────────────────────────── */
  .article-x__body {
    max-width: var(--art-body-max-width);
    margin: 0 auto;
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 17px;
    line-height: 1.75;
    color: var(--art-text);
    word-wrap: break-word;
  }
  .article-x__body > * + * { margin-top: 1.5em; }
  .article-x__body p { margin: 0 0 1.5em; }
  .article-x__body p:last-child { margin-bottom: 0; }

  /* Drop cap on first paragraph — gated by data-drop-cap on root */
  .article-x[data-drop-cap="true"] .article-x__body > p:first-of-type::first-letter {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    float: left;
    font-size: 5.4em;
    line-height: 0.85;
    padding: 0.08em 0.12em 0 0;
    color: var(--art-text);
    letter-spacing: -0.02em;
  }

  .article-x__body h2,
  .article-x__body h3,
  .article-x__body h4 {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    color: var(--art-text);
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin: 2.2em 0 0.8em;
  }
  .article-x__body h2 { font-size: 32px; }
  .article-x__body h3 { font-size: 24px; }
  .article-x__body h4 { font-size: 20px; }
  @media screen and (min-width: 1100px) {
    .article-x__body h2 { font-size: 38px; }
    .article-x__body h3 { font-size: 26px; }
  }

  .article-x__body a {
    color: var(--art-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.3s ease;
  }
  .article-x__body a:hover {
    text-decoration-color: transparent;
  }

  .article-x__body blockquote {
    margin: 2.5em 0;
    padding: 0 0 0 32px;
    border-left: 1px solid var(--art-divider);
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: -0.012em;
    color: var(--art-text);
  }
  @media screen and (min-width: 1100px) {
    .article-x__body blockquote {
      font-size: 30px;
      padding-left: 40px;
      margin: 3em 0;
    }
  }
  .article-x__body blockquote p { margin: 0; }

  .article-x__body img,
  .article-x__body video,
  .article-x__body iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2em auto;
  }

  .article-x__body ul,
  .article-x__body ol {
    margin: 1.5em 0;
    padding-left: 1.4em;
  }
  .article-x__body li { margin: 0.4em 0; }

  .article-x__body hr {
    margin: 3em auto;
    border: 0;
    border-top: 1px solid var(--art-divider);
    width: 80px;
  }

  .article-x__body code {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.92em;
    background: var(--art-placeholder-bg);
    padding: 0.15em 0.4em;
    border-radius: 2px;
  }
  .article-x__body pre {
    background: var(--art-placeholder-bg);
    padding: 24px;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.6;
    margin: 2em 0;
  }
  .article-x__body pre code { background: transparent; padding: 0; }

  /* ── Tags ─────────────────────────────────────────────────── */
  .article-x__tags {
    max-width: var(--art-body-max-width);
    margin: 64px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--art-divider);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }
  .article-x__tags-label {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--art-accent);
    margin-right: 12px;
  }
  .article-x__tag {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--art-muted);
    padding: 7px 14px;
    border: 1px solid var(--art-divider);
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .article-x__tag:hover {
    color: var(--art-text);
    border-color: var(--art-text);
  }

  /* ── Share ───────────────────────────────────────────────── */
  .article-x__share {
    max-width: var(--art-body-max-width);
    margin: 48px auto 0;
    padding-top: 32px;
    border-top: 1px solid var(--art-divider);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
  }
  .article-x__share-label {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--art-accent);
  }
  .article-x__share-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }
  .article-x__share-link {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--art-muted);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s ease;
  }
  .article-x__share-link:hover { color: var(--art-text); }

  /* ── Author bio ──────────────────────────────────────────── */
  .article-x__author {
    max-width: var(--art-body-max-width);
    margin: 80px auto 0;
    padding: 40px 0;
    border-top: 1px solid var(--art-divider);
    border-bottom: 1px solid var(--art-divider);
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media screen and (min-width: 720px) {
    .article-x__author {
      grid-template-columns: 200px 1fr;
      gap: 40px;
      align-items: start;
    }
  }
  .article-x__author-label {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--art-accent);
  }
  .article-x__author-name {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: 22px;
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--art-text);
  }
  .article-x__author-bio {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 15px;
    line-height: 1.6;
    color: var(--art-muted);
    margin: 0;
  }

  /* ── More articles ───────────────────────────────────────── */
  .article-x__more {
    margin-top: 96px;
    padding-top: 56px;
    border-top: 1px solid var(--art-divider);
  }
  @media screen and (min-width: 1100px) {
    .article-x__more {
      margin-top: 140px;
      padding-top: 80px;
    }
  }
  .article-x__more-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 48px;
    gap: 24px;
  }
  @media screen and (min-width: 1100px) {
    .article-x__more-head {
      margin-bottom: 64px;
    }
  }
  .article-x__more-title {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: 24px;
    letter-spacing: -0.012em;
    line-height: 1;
    margin: 0;
    color: var(--art-text);
  }
  @media screen and (min-width: 1100px) {
    .article-x__more-title {
      font-size: 32px;
    }
  }
  .article-x__more-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--art-text);
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
  }
  .article-x__more-link:hover { gap: 14px; }
  .article-x__more-link svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .article-x__more-link:hover svg { transform: translateX(4px); }
  .article-x__more-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px 24px;
  }
  @media screen and (min-width: 720px) {
    .article-x__more-grid {
      grid-template-columns: repeat(var(--art-more-cols, 3), 1fr);
      gap: 64px 32px;
    }
  }
  @media screen and (min-width: 1100px) {
    .article-x__more-grid {
      gap: 80px 40px;
    }
  }
  .article-x__card {
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .article-x__card-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background-color: var(--art-placeholder-bg);
    margin-bottom: 24px;
  }
  .article-x__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .article-x__card:hover .article-x__card-img {
    transform: scale(1.04);
  }
  .article-x__card-meta {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--art-accent);
    margin: 0 0 12px;
  }
  .article-x__card-title {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: 20px;
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin: 0;
    color: var(--art-text);
  }
  @media screen and (min-width: 1100px) {
    .article-x__card-title {
      font-size: 22px;
    }
  }

  /* ── Comments ────────────────────────────────────────────── */
  .article-x__comments {
    max-width: var(--art-body-max-width);
    margin: 96px auto 0;
    padding-top: 56px;
    border-top: 1px solid var(--art-divider);
  }
  .article-x__comments-title {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: 24px;
    letter-spacing: -0.012em;
    line-height: 1.2;
    margin: 0 0 40px;
    color: var(--art-text);
  }
  .article-x__comment {
    padding: 28px 0;
    border-bottom: 1px solid var(--art-divider);
  }
  .article-x__comment:first-of-type {
    padding-top: 0;
  }
  .article-x__comment-meta {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--art-accent);
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .article-x__comment-author {
    color: var(--art-text);
  }
  .article-x__comment-body {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 16px;
    line-height: 1.65;
    color: var(--art-text);
    margin: 0;
  }
  .article-x__comment-pagination {
    margin-top: 32px;
  }

  /* Comment form */
  .article-x__form {
    margin-top: 56px;
  }
  .article-x__form-title {
    font-family: var(--art-heading-font);
    font-weight: var(--art-heading-weight);
    font-size: 22px;
    letter-spacing: -0.012em;
    margin: 0 0 28px;
    color: var(--art-text);
  }
  .article-x__form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
  }
  @media screen and (min-width: 600px) {
    .article-x__form-row--two {
      grid-template-columns: 1fr 1fr;
    }
  }
  .article-x__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .article-x__label {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--art-accent);
  }
  .article-x__input,
  .article-x__textarea {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 15px;
    line-height: 1.5;
    color: var(--art-text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--art-divider);
    padding: 8px 0;
    outline: none;
    width: 100%;
    transition: border-color 0.3s ease;
  }
  .article-x__textarea {
    min-height: 140px;
    resize: vertical;
  }
  .article-x__input:focus,
  .article-x__textarea:focus {
    border-bottom-color: var(--art-text);
  }
  .article-x__submit {
    display: inline-block;
    padding: 18px 48px;
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--art-text);
    color: var(--art-text);
    cursor: pointer;
    margin-top: 8px;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .article-x__submit:hover {
    background-color: var(--art-text);
    color: var(--art-bg);
  }
  .article-x__notice {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 14px;
    line-height: 1.5;
    padding: 16px 20px;
    margin: 0 0 24px;
    border: 1px solid var(--art-divider);
    color: var(--art-text);
  }
  .article-x__form-info {
    font-family: var(--art-body-font);
    font-weight: var(--art-body-weight);
    font-size: 13px;
    line-height: 1.6;
    color: var(--art-muted);
    margin: 16px 0 0;
  }

  /* ── Reveal animation — gated by data-reveal-enabled on the
        section root. When the merchant disables the animation,
        no data-reveal attributes are emitted, so the rules
        below match nothing. */
  .article-x[data-reveal-enabled="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .article-x[data-reveal-enabled="true"] [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .article-x[data-reveal-enabled="true"] [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:article */

/* START_SECTION:blog (INDEX:4) */
/* ── Section root ────────────────────────────────────────── */
  .blog-x {
    background-color: var(--blog-bg);
    color: var(--blog-text);
    padding: var(--blog-pad-top) var(--blog-pad-h) var(--blog-pad-bottom);
  }
  .blog-x__inner {
    width: 100%;
  }

  /* ── Tag filter ─────────────────────────────────────────── */
  .blog-x__filter {
    display: flex;
    flex-wrap: nowrap;
    gap: 32px;
    justify-content: flex-start;
    /* The filter strip rides up over the section's top padding so
       the underline bar sits flush with the top edge of the section.
       Negative margin matches the current pad-top variable so the
       value tracks the merchant setting across mobile/desktop. */
    margin-top: calc(-1 * var(--blog-pad-top));
    margin-bottom: 56px;
    border-bottom: 1px solid var(--blog-divider);
    padding: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-x__filter::-webkit-scrollbar { display: none; }

  .blog-x__tag {
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blog-muted);
    white-space: nowrap;
    position: relative;
    padding: 2px 0;
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__tag::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--blog-text);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__tag:hover { color: var(--blog-text); }
  .blog-x__tag.is-active {
    color: var(--blog-text);
  }
  .blog-x__tag.is-active::after {
    transform: scaleX(1);
  }

  /* ── Grid ───────────────────────────────────────────────── */
  .blog-x__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 56px 24px;
  }
  @media screen and (min-width: 720px) {
    .blog-x__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 64px 32px;
    }
  }
  @media screen and (min-width: 1100px) {
    .blog-x__grid {
      grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
      gap: 80px 40px;
    }
  }

  /* ── Card ───────────────────────────────────────────────── */
  .blog-x__card {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
  }
  .blog-x__card-media {
    aspect-ratio: var(--blog-card-ratio);
    overflow: hidden;
    background-color: var(--blog-placeholder-bg);
    margin-bottom: 24px;
  }
  .blog-x__card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__card:hover .blog-x__card-img {
    transform: scale(1.04);
  }
  .blog-x__card-meta {
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--blog-accent);
    margin: 0 0 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  .blog-x__card-meta-sep {
    opacity: 0.5;
  }
  .blog-x__card-title {
    font-family: var(--blog-heading-font);
    font-weight: var(--blog-heading-weight);
    font-size: 22px;
    letter-spacing: -0.012em;
    line-height: 1.18;
    margin: 0 0 12px;
    color: var(--blog-text);
    transition: opacity 0.3s ease;
  }
  @media screen and (min-width: 1100px) {
    .blog-x__card-title {
      font-size: 24px;
    }
  }
  .blog-x__card-excerpt {
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 15px;
    line-height: 1.55;
    color: var(--blog-muted);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── CTA ────────────────────────────────────────────────── */
  .blog-x__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--blog-text);
    padding-bottom: 6px;
    border-bottom: 1px solid currentColor;
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__cta svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__card:hover .blog-x__cta {
    gap: 14px;
  }
  .blog-x__card:hover .blog-x__cta svg {
    transform: translateX(4px);
  }

  /* ── Pagination ─────────────────────────────────────────── */
  .blog-x__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--blog-divider);
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  @media screen and (min-width: 1100px) {
    .blog-x__pagination {
      margin-top: 120px;
    }
  }
  .blog-x__page-link {
    color: var(--blog-muted);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .blog-x__page-link:hover { color: var(--blog-text); }
  .blog-x__page-link.is-current {
    color: var(--blog-text);
  }
  .blog-x__load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--blog-divider);
  }
  @media screen and (min-width: 1100px) {
    .blog-x__load-more-wrap {
      margin-top: 120px;
    }
  }
  .blog-x__load-more {
    display: inline-block;
    padding: 18px 48px;
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--blog-text);
    color: var(--blog-text);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__load-more:hover {
    background-color: var(--blog-text);
    color: var(--blog-bg);
  }

  /* ── Empty state ────────────────────────────────────────── */
  .blog-x__empty {
    text-align: center;
    padding: 96px 16px;
    color: var(--blog-muted);
    font-family: var(--blog-body-font);
    font-weight: var(--blog-body-weight);
    font-size: 16px;
  }

  /* ── Results wrapper (AJAX swap target) ─────────────────── */
  .blog-x__results {
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .blog-x__results.is-loading {
    opacity: 0.4;
    pointer-events: none;
  }

  /* ── Reveal animation — gated by data-reveal-enabled on the
        section root. When the merchant disables the animation,
        no data-reveal attributes are emitted, so the rules
        below match nothing. */
  .blog-x[data-reveal-enabled="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .blog-x[data-reveal-enabled="true"] [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
/* END_SECTION:blog */

/* START_SECTION:breadcrumbs (INDEX:5) */
.breadcrumbs {
    box-sizing: border-box;
    width: 100%;
    padding: var(--bc-pad-top) 0 var(--bc-pad-bottom);
  }

  .breadcrumbs[data-top-divider="true"] {
    border-top: 1px solid var(--bc-divider-color);
  }

  /* Horizontal alignment matches the global header exactly:
     padding 0 8px mobile, 0 16px desktop (1200px+).
     Centered to var(--page-width) like the header. */
  .breadcrumbs__inner {
    max-width: var(--page-width, 1600px);
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bc-item-gap);
    justify-content: var(--bc-justify);
    font-family: var(--bc-font);
    font-weight: var(--bc-weight);
    font-size: var(--bc-font-size);
    letter-spacing: var(--bc-letter-spacing);
    text-transform: var(--bc-transform);
    line-height: 1.4;
  }

  @media (min-width: 1200px) {
    .breadcrumbs__inner {
      padding: 0 16px;
    }
  }

  /* The <ol> element has BOTH .breadcrumbs__inner AND .breadcrumbs__list
     classes. The padding for horizontal alignment is set on __inner above.
     Here we only reset the browser's default <ol> margin and list-style —
     setting padding here would override the inner's padding (equal
     specificity, this rule comes later) and break horizontal alignment. */
  .breadcrumbs__list {
    list-style: none;
    margin: 0;
  }

  .breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--bc-item-gap);
    color: var(--bc-text);
    min-width: 0;
  }

  .breadcrumbs__link {
    color: var(--bc-link);
    text-decoration: none;
    transition: color 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
  }

  .breadcrumbs__link:hover {
    color: var(--bc-link-hover);
  }

  .breadcrumbs__current {
    color: var(--bc-current);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
  }

  .breadcrumbs__sep {
    color: var(--bc-sep-color);
    user-select: none;
    flex-shrink: 0;
    /* Inline padding ensures consistent visual spacing around the
       separator regardless of which character is used (narrow chars
       like • need more breathing room than wider ones like /). The
       flex gap handles spacing between LINK items; this handles
       spacing AROUND the separator itself. */
    padding-inline: var(--bc-sep-padding);
  }
/* END_SECTION:breadcrumbs */

/* START_SECTION:cart (INDEX:7) */
.cart-page {
    width: 100%;
    padding: 32px 16px 80px;
    box-sizing: border-box;
  }
  @media screen and (min-width: 600px) {
    .cart-page {
      padding: 40px 24px 80px;
    }
  }
  @media screen and (min-width: 1200px) {
    .cart-page {
      padding: 48px 40px 80px;
    }
  }

  .cart-page__empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 20px; padding: 80px 20px; text-align: center;
  }
  .cart-page__empty svg { opacity: 0.2; }
  .cart-page__empty p { font-size: 16px; opacity: 0.5; margin: 0; }

  .cart-page__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media screen and (min-width: 1200px) {
    .cart-page__layout {
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }

  }

  /* ── Item ── */
  .cart-page__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 8px 0;
  }
  .cart-page__item-image-link { display: block; flex-shrink: 0; }
  .cart-page__item-img {
    width: 80px;
    height: 104px;
    object-fit: cover;
    display: block;
    background: #f5f5f5;
  }
  .cart-page__item-img--placeholder { background: #f3f3f3; }

  .cart-page__item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
    min-height: 104px;
    min-width: 0;
  }

  @media screen and (min-width: 600px) {
    .cart-page__item {
      grid-template-columns: 110px 1fr;
      gap: 16px;
    }
    .cart-page__item-img {
      width: 110px;
      height: 140px;
    }
    .cart-page__item-info {
      min-height: 140px;
    }
  }

  @media screen and (min-width: 1200px) {
    .cart-page__item {
      grid-template-columns: 200px 1fr;
    }
    .cart-page__item-img {
      width: 200px;
      height: 260px;
    }
    .cart-page__item-info {
      min-height: 260px;
    }
  }

  /* title row */
  .cart-page__item-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
  }
  .cart-page__item-title {
    font-size: var(--cp-title-size, 13px);
    font-weight: var(--cp-title-weight, 500);
    font-family: var(--cp-title-font, inherit);
    letter-spacing: var(--cp-title-spacing, 0em);
    text-transform: var(--cp-title-transform, none);
    color: var(--cp-title-color, inherit);
    text-decoration: none;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 60px);
  }
  .cart-page__item-title:hover { text-decoration: underline; }

  .cart-page__item-price-top {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }
  .cart-page__item-price {
    display: block;
    font-size: var(--cp-price-size, 13px);
    font-family: var(--cp-price-font, inherit);
    font-weight: var(--cp-price-weight, 500);
    letter-spacing: var(--cp-price-spacing, 0em);
    text-transform: var(--cp-price-transform, none);
    color: var(--cp-price-color, inherit);
    white-space: nowrap;
  }
  .cart-page__item-price--sale { color: #c00; }
  .cart-page__item-price--compare { text-decoration: line-through; opacity: 0.4; font-size: 11px; }

  /* variants */
  .cart-page__item-variant {
    display: block;
    font-size: var(--cp-variant-size, 12px);
    font-family: var(--cp-variant-font, inherit);
    font-weight: var(--cp-variant-weight, 400);
    letter-spacing: var(--cp-variant-spacing, 0em);
    text-transform: var(--cp-variant-transform, none);
    color: var(--cp-variant-color, inherit);
    opacity: 0.5;
    line-height: 1.6;
  }

  /* actions row */
  .cart-page__item-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 12px;
  }
  .cart-page__item-actions__right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* qty */
  .cart-page__qty {
    display: flex;
    align-items: center;
    font-size: var(--cp-variant-size, 12px);
    font-family: var(--cp-variant-font, inherit);
    color: var(--cp-variant-color, inherit);
  }
  .cart-page__qty-btn {
    width: calc(var(--cp-variant-size, 12px) * 1.8);
    height: calc(var(--cp-variant-size, 12px) * 1.8);
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    font-size: var(--cp-variant-size, 12px);
    color: inherit; flex-shrink: 0;
  }
  .cart-page__qty-btn:hover { opacity: 0.6; }
  .cart-page__qty-input {
    width: calc(var(--cp-variant-size, 12px) * 2);
    height: calc(var(--cp-variant-size, 12px) * 1.8);
    border: none; text-align: center;
    font-size: var(--cp-variant-size, 12px);
    background: none; color: inherit;
    -moz-appearance: textfield;
  }
  .cart-page__qty-input::-webkit-outer-spin-button,
  .cart-page__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

  /* wishlist */
  .cart-page__wishlist {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 0; text-decoration: none;
  }
  .cart-page__wishlist.is-wishlisted svg {
    fill: currentColor;
  }

  /* remove X */
  .cart-page__remove {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: inherit;
  }
  .cart-page__remove svg { width: 14px; height: 14px; }

  /* Mobile-details block: shown inline on mobile, hidden on desktop */
  .cart-page__mobile-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 12px;
    border-top: var(--cp-divider-thickness, 1px) solid var(--cp-divider-color, rgba(0,0,0,0.07));
    margin-top: 4px;
  }
  /* Desktop summary inner details: hidden on mobile, shown on desktop */
  .cart-page__summary-desktop-details {
    display: none;
  }
  @media screen and (min-width: 1200px) {
    .cart-page__mobile-details { display: none; }
    .cart-page__summary-desktop-details { display: flex; flex-direction: column; gap: 4px; }
  }

  /* summary */
  /* Mobile: fixed panel at bottom like drawer footer */
  .cart-page__summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-background, #fff);
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 16px 16px max(20px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
    box-sizing: border-box;
    width: 100%;
  }

  /* Mobile only: hide the fixed Total/Checkout panel while the header
     menu drawer or any other off-canvas drawer (cart, search, wishlist)
     is open, so it doesn't paint on top of the drawer. Uses :has() to
     react to the drawer's open state without needing extra JS — when
     the user closes the drawer, the panel comes back automatically.
     Desktop is unaffected (the summary becomes position: sticky there). */
  @media screen and (max-width: 1199px) {
    body:has(.header-wrapper--drawer-open) .cart-page__summary,
    body:has(.drawer.is-open) .cart-page__summary,
    body:has(.cart-drawer[aria-hidden="false"]) .cart-page__summary,
    body:has(.search-drawer[aria-hidden="false"]) .cart-page__summary,
    body:has(.wishlist-drawer[aria-hidden="false"]) .cart-page__summary {
      visibility: hidden;
      pointer-events: none;
    }
  }


  .cart-page__items {
    transition: opacity 0.15s ease;
    /* min-width: 0 lets the items column hold its 1fr grid track
       width regardless of content. Without this, a desktop-bleeding
       cross-sells scroller (which is 100vw - 80px wide) would push
       the grid column wider, breaking the items+summary balance. */
    min-width: 0;
  }
  @media screen and (max-width: 1199px) {
    .cart-page__summary .cart-page__summary-desktop-details,
    .cart-page__note,
    .cart-page__summary-row--discount {
      display: none;
    }
  }
  /* Bottom padding handled dynamically by JS to match fixed panel height */

  @media screen and (min-width: 1200px) {
    .cart-page__summary {
      position: sticky;
      top: 100px;
      bottom: auto;
      left: auto;
      right: auto;
      background: rgba(0,0,0,0.025);
      border-top: none;
      padding: 28px 24px;
      gap: 4px;
      box-shadow: none;
      z-index: auto;
      /* Explicit grid placement — column 2, row 1 — pairs with items
         on the left. Without this, auto-flow could place summary in
         row 2 since hidden mobile-details still occupies a grid cell. */
      grid-column: 2;
      grid-row: 1;
    }
    .cart-page__items {
      padding-bottom: 0;
      /* Explicit grid placement — column 1, row 1. Pins items to the
         left column so summary can lock to col 2 row 1 next to it,
         and cross-sells lands in col 1 row 2 below. */
      grid-column: 1;
      grid-row: 1;
    }
    .cart-page__note,
    .cart-page__summary-row--discount {
      display: flex;
    }
  }
  .cart-page__summary-title {
    font-size: var(--cp-subtotal-label-size, 14px);
    font-weight: var(--cp-subtotal-label-weight, 500);
    font-family: var(--cp-subtotal-label-font, inherit);
    letter-spacing: var(--cp-subtotal-label-spacing, 0.02em);
    text-transform: var(--cp-subtotal-label-transform, none);
    color: var(--cp-subtotal-label-color, inherit);
    margin: 0 0 12px;
  }

  .cart-page__summary-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: var(--cp-divider-thickness, 1px) solid var(--cp-divider-color, rgba(0,0,0,0.07));
    font-size: 13px;
  }
  .cart-page__summary-detail-label,
  .cart-page__summary-detail-value {
    font-size: var(--cp-detail-size, 12px);
    font-weight: var(--cp-detail-weight, 400);
    font-family: var(--cp-detail-font, inherit);
    letter-spacing: var(--cp-detail-spacing, 0em);
    text-transform: var(--cp-detail-transform, none);
    color: var(--cp-detail-color, inherit);
    opacity: 0.7;
  }
  .cart-page__subtotal-label {
    font-size: var(--cp-subtotal-label-size, 13px);
    font-weight: var(--cp-subtotal-label-weight, 400);
    font-family: var(--cp-subtotal-label-font, inherit);
    letter-spacing: var(--cp-subtotal-label-spacing, 0em);
    text-transform: var(--cp-subtotal-label-transform, none);
    color: var(--cp-subtotal-label-color, inherit);
  }
  .cart-page__subtotal-price {
    font-size: var(--cp-subtotal-price-size, 13px);
    font-weight: var(--cp-subtotal-price-weight, 400);
    font-family: var(--cp-subtotal-price-font, inherit);
    letter-spacing: var(--cp-subtotal-price-spacing, 0em);
    text-transform: var(--cp-subtotal-price-transform, none);
    color: var(--cp-subtotal-price-color, inherit);
  }
  .cart-page__taxes-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .cart-page__promo-input-row {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 2px;
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .cart-page__promo-input-row:focus-within {
    border-color: rgba(0,0,0,0.4);
  }
  .cart-page__promo-input {
    border: none;
    outline: none;
    font-size: 11px;
    font-family: inherit;
    background: transparent;
    width: 140px;
    padding: 5px 8px;
    color: inherit;
  }
  .cart-page__promo-input::placeholder {
    opacity: 0.35;
    font-size: 11px;
  }
  .cart-page__promo-apply {
    background: none;
    border: none;
    border-left: 1px solid rgba(0,0,0,0.12);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    padding: 5px 8px;
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    transition: opacity 0.15s, background 0.15s;
    display: none;
  }
  .cart-page__promo-apply.is-visible {
    display: block;
  }
  .cart-page__promo-apply:hover {
    opacity: 1;
    background: rgba(0,0,0,0.04);
  }
  .cart-page__summary-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0 8px;
  }
  .cart-page__total-label {
    font-size: var(--cp-subtotal-label-size, 13px);
    font-weight: var(--cp-subtotal-label-weight, 600);
    font-family: var(--cp-subtotal-label-font, inherit);
    letter-spacing: var(--cp-subtotal-label-spacing, 0.08em);
    text-transform: uppercase;
    color: var(--cp-subtotal-label-color, inherit);
  }
  .cart-page__total-price {
    font-size: calc(var(--cp-subtotal-price-size, 13px) * 1.6);
    font-weight: var(--cp-subtotal-price-weight, 400);
    font-family: var(--cp-subtotal-price-font, inherit);
    letter-spacing: var(--cp-subtotal-price-spacing, 0em);
    color: var(--cp-subtotal-price-color, inherit);
  }
  .cart-page__summary-row--discount { color: #c00; }
  .cart-page__shipping-note {
    font-size: var(--cp-taxes-size, 11px);
    font-family: var(--cp-taxes-font, inherit);
    font-weight: var(--cp-taxes-weight, 400);
    letter-spacing: var(--cp-taxes-spacing, 0em);
    text-transform: var(--cp-taxes-transform, none);
    color: var(--cp-taxes-color, inherit);
    margin: 0;
    display: block;
    text-align: center;
  }
  @media screen and (min-width: 1200px) {
    .cart-page__shipping-note {
      text-align: left;
    }
  }
  .cart-page__note { display: none; flex-direction: column; gap: 6px; }
  @media screen and (min-width: 1200px) {
    .cart-page__note { margin-bottom: 12px; margin-top: 12px; }
  }
  @media screen and (min-width: 1200px) {
    .cart-page__note { display: flex; }
  }
  .cart-page__note-label { font-size: 12px; opacity: 0.6; }
  .cart-page__note-input {
    width: 100%; border: 1px solid rgba(0,0,0,0.15);
    padding: 10px 12px; font-size: 13px;
    background: var(--color-background, #fff); color: var(--color-foreground, #111);
    resize: vertical; font-family: inherit; box-sizing: border-box;
  }
  /* Checkout button — wired into the global [data-button-style] system
     via the data-button-style + data-button-text-effect="false"
     attributes on the markup. The global system in critical.css +
     css-variables.liquid handles bg/text/border/border-radius/padding
     and all hover effects (fill_left, fill_bottom, glow, lift, shine,
     etc.) consistently with every other button across the theme.

     This rule supplies ONLY the cart-specific overrides:
     - 100% width (full-bleed inside summary card)
     - center-aligned text + custom typography vars (cp_checkout_*)
     - Disable native button chrome on iOS Safari (-webkit-appearance)
     The merchant's "Button style" setting (Primary/Secondary) drives
     the rest by toggling the data-button-style attribute. */
  .cart-page__checkout {
    display: block;
    width: 100%;
    padding: 18px 14px !important;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--cp-checkout-font, inherit);
    font-weight: var(--cp-checkout-weight, 500);
    font-size: var(--cp-checkout-size, 13px);
    letter-spacing: var(--cp-checkout-spacing, 0.06em);
    text-transform: var(--cp-checkout-transform, uppercase);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    margin-top: 4px;
  }
  .cart-page__payment-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-top: 8px;
  }
  .cart-page__payment-icon {
    height: 16px;
    width: auto;
    border-radius: 3px;
  }

  .cart-page__continue {
    display: block;
    text-align: left;
    text-decoration: underline;
    font-family: var(--cp-continue-font, inherit);
    font-weight: var(--cp-continue-weight, 400);
    font-size: var(--cp-continue-size, 12px);
    letter-spacing: var(--cp-continue-spacing, 0.03em);
    text-transform: var(--cp-continue-transform, none);
    color: var(--cp-continue-color, inherit);
  }
  /* ── Accordion ── */
  /* Mobile copy: normal flow under products */
  .cart-page__accordion--mobile {
    display: block;
    position: static !important;
    transform: none !important;
    bottom: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    background: none !important;
  }
  /* Desktop copy: hidden on mobile */
  .cart-page__accordion--desktop { display: none; }
  @media screen and (min-width: 1200px) {
    .cart-page__accordion--mobile { display: none; }
    .cart-page__accordion--desktop { display: block; }
  }
  .cart-page__accordion {
    border: var(--cp-divider-thickness, 1px) solid var(--cp-divider-color, rgba(0,0,0,0.08));
    margin-top: 8px;
  }
  .cart-page__accordion--mobile {
    margin-top: 8px;
  }
  @media screen and (min-width: 1200px) {
    .cart-page__accordion {
      margin-top: 8px;
    }
  }
  .cart-page__accordion-item {
    border-bottom: 1px solid var(--cp-divider-color, rgba(0,0,0,0.08));
  }
  .cart-page__accordion-item:last-child {
    border-bottom: none;
  }
  .cart-page__accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--cp-accordion-font, inherit);
    font-weight: var(--cp-accordion-weight, 400);
    font-size: var(--cp-accordion-size, 12px);
    letter-spacing: var(--cp-accordion-spacing, 0em);
    text-transform: var(--cp-accordion-transform, none);
    color: var(--cp-accordion-color, inherit);
    text-align: left;
  }
  .cart-page__accordion-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    opacity: 0.5;
  }
  .cart-page__accordion-trigger[aria-expanded="true"] .cart-page__accordion-chevron {
    transform: rotate(180deg);
  }
  .cart-page__accordion-content {
    display: none;
    padding: 0 20px 14px;
    opacity: 0.7;
    line-height: 1.6;
  }
  .cart-page__accordion-trigger[aria-expanded="true"] + .cart-page__accordion-content {
    display: block;
  }
  .cart-page__accordion-body,
  .cart-page__accordion-body p,
  .cart-page__accordion-body h1,
  .cart-page__accordion-body h2,
  .cart-page__accordion-body h3,
  .cart-page__accordion-body h4,
  .cart-page__accordion-body li,
  .cart-page__accordion-body span {
    font-family: var(--cp-accordion-body-font, inherit) !important;
    font-weight: var(--cp-accordion-body-weight, 400) !important;
    font-size: var(--cp-accordion-body-size, 11px) !important;
    letter-spacing: var(--cp-accordion-body-spacing, 0em) !important;
    text-transform: var(--cp-accordion-body-transform, none) !important;
    color: var(--cp-accordion-body-color, inherit) !important;
    margin: 0;
    padding: 0;
  }
  .cart-page__accordion-link,
  .cart-page__accordion-body a {
    font-family: var(--cp-accordion-body-font, inherit) !important;
    font-weight: var(--cp-accordion-body-weight, 400) !important;
    font-size: var(--cp-accordion-body-size, 11px) !important;
    letter-spacing: var(--cp-accordion-body-spacing, 0em) !important;
    text-transform: var(--cp-accordion-body-transform, none) !important;
    color: var(--cp-accordion-body-color, inherit) !important;
    text-decoration: underline;
  }

  /* ── Shipping rewards bar ────────────────────────────────────
     Sits at the top of cart-page__inner, full inner-width on every
     viewport. Visual treatment is similar to the cart-drawer version
     but with looser padding (the cart page has more breathing room)
     and a bottom margin to separate it from the items grid below.
     Reads the same --ship-* CSS variables the data-attribute style
     declaration sets on the bar element, so all merchant colors and
     sizes are picked up automatically. */
  .cart-page__ship {
    width: 100%;
    padding: 16px 20px 18px;
    margin-bottom: 32px;
    background: var(--color-background, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    box-sizing: border-box;
  }
  .cart-page__ship.is-hidden { display: none; }
  @media screen and (min-width: 1200px) {
    .cart-page__ship {
      padding: 18px 24px 20px;
      margin-bottom: 40px;
    }
  }

  .cart-page__ship-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
  }

  .cart-page__ship-message {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--ship-msg-font, inherit);
    font-weight: var(--ship-msg-weight, 400);
    color: var(--ship-msg-color, #111);
    font-size: var(--ship-msg-size, 13px);
    text-transform: var(--ship-msg-transform, none);
    letter-spacing: var(--ship-msg-spacing, 0);
    line-height: 1.4;
    transition: color 0.4s ease;
    min-height: 1.4em;
  }
  .cart-page__ship-message strong { font-weight: 600; }
  .cart-page__ship.is-complete .cart-page__ship-message {
    color: var(--ship-msg-color-complete, #2e7d32);
  }

  /* Gift preview button — same circular thumbnail + corner badge as
     the cart-drawer version. Slightly larger on the cart page (36px
     vs 32px) to feel proportional to the wider context. */
  .cart-page__ship-gift {
    position: relative;
    flex-shrink: 0;
  }
  .cart-page__ship-gift-btn {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
    color: #555;
  }
  .cart-page__ship-gift-btn:hover { transform: scale(1.08); border-color: rgba(0,0,0,0.4); }
  .cart-page__ship-gift-btn:focus-visible { outline: 2px solid var(--ship-msg-color-complete, #2e7d32); outline-offset: 2px; }
  .cart-page__ship-gift-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
  }
  .cart-page__ship-gift-btn svg { width: 18px; height: 18px; }
  .cart-page__ship-gift-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    background: var(--ship-complete, #2e7d32);
    color: #fff;
    border: 1.5px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .cart-page__ship-gift-badge svg { width: 9px; height: 9px; }

  .cart-page__ship-gift.is-unlocked .cart-page__ship-gift-btn {
    border-color: var(--ship-complete, #2e7d32);
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
  }

  /* Popover — same anchored-below behavior as cart-drawer. On wider
     viewports we let it sit at width 240px to feel comfortable next
     to the bigger button; on mobile it caps at calc(100vw - 32px) so
     it never overflows the screen edge when the bar sits near the
     right side of a narrow page. */
  .cart-page__ship-gift-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 240px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 14px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
    pointer-events: none;
  }
  .cart-page__ship-gift-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .cart-page__ship-gift-popover-arrow {
    position: absolute;
    top: -6px;
    right: 11px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-left: 1px solid rgba(0,0,0,0.1);
    transform: rotate(45deg);
  }
  .cart-page__ship-gift-popover-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .cart-page__ship-gift-popover-link:focus-visible {
    outline: 2px solid var(--ship-msg-color-complete, #2e7d32);
    outline-offset: 2px;
  }
  .cart-page__ship-gift-popover-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .cart-page__ship-gift-popover-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cart-page__ship-gift-popover-link:hover .cart-page__ship-gift-popover-img-wrap img {
    transform: scale(1.04);
  }
  .cart-page__ship-gift-popover-eyebrow {
    margin: 0 0 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ship-complete, #2e7d32);
  }
  .cart-page__ship-gift-popover-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #111;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cart-page__ship-gift-popover-title-text {
    flex: 1;
    min-width: 0;
    transition: text-decoration-color 0.2s;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
  }
  .cart-page__ship-gift-popover-link:hover .cart-page__ship-gift-popover-title-text {
    text-decoration-color: currentColor;
  }
  .cart-page__ship-gift-popover-chev {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #888;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  .cart-page__ship-gift-popover-link:hover .cart-page__ship-gift-popover-chev {
    transform: translateX(2px);
    color: #111;
  }
  .cart-page__ship-gift-popover-meta {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: #666;
  }

  .cart-page__ship-track {
    position: relative;
    width: 100%;
    height: var(--ship-height, 6px);
    background: var(--ship-track, rgba(0,0,0,0.1));
    border-radius: var(--ship-radius, 999px);
    overflow: hidden;
  }
  .cart-page__ship-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background: var(--ship-fill, currentColor);
    border-radius: inherit;
    transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.4s ease;
    will-change: width;
  }
  .cart-page__ship.is-complete .cart-page__ship-fill {
    background: var(--ship-complete, #2e7d32);
  }
  .cart-page__ship-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--ship-marker, rgba(0,0,0,0.35));
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.3s ease;
  }
  .cart-page__ship.is-complete .cart-page__ship-marker { opacity: 0; }

  /* Celebration animation — keyframe names are namespaced separately
     from the cart-drawer's so the two don't collide if both load on
     the same page (they shouldn't, but defensive). */
  @keyframes cp-ship-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.01); }
    100% { transform: scale(1); }
  }
  @keyframes cp-ship-flash {
    0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
    40%  { box-shadow: 0 0 16px 0 rgba(46, 125, 50, 0.45); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
  }
  .cart-page__ship.is-celebrating {
    animation: cp-ship-pulse 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
  }
  .cart-page__ship.is-celebrating .cart-page__ship-track {
    animation: cp-ship-flash 0.7s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .cart-page__ship-fill,
    .cart-page__ship-message,
    .cart-page__ship-gift-btn,
    .cart-page__ship-gift-popover {
      transition: opacity 0.15s ease, visibility 0.15s ease;
      transform: none !important;
    }
    .cart-page__ship.is-celebrating,
    .cart-page__ship.is-celebrating .cart-page__ship-track {
      animation: none;
    }
  }

  /* ── Cross-sells ────────────────────────────────────────────
     Mirrors the cart-drawer cross-sells visually and in markup.
     Single placement: bottom of the items column on both desktop
     and mobile. */

  /* Spacing — sits below the products list, with comfortable top
     margin so it reads as a separate section rather than part of
     the items list. min-width: 0 lets the desktop-bleeding scroller
     extend wider than this wrapper without expanding it.

     Two copies render in markup (mobile vs desktop) for layout reasons
     — see the markup-side comment for why. CSS hides whichever isn't
     appropriate for the current viewport. */
  .cart-page__crosssells-inline {
    margin-top: 32px;
    min-width: 0;
  }
  /* Mobile: tighter gap between Continue Shopping link and the
     cross-sells header — 32px feels too airy on the narrower viewport. */
  @media screen and (max-width: 1199px) {
    .cart-page__crosssells-inline {
      margin-top: 0;
    }
  }
  /* Mobile copy hidden on desktop, desktop copy hidden on mobile. */
  @media screen and (min-width: 1200px) {
    .cart-page__crosssells-inline--mobile { display: none; }
  }
  @media screen and (max-width: 1199px) {
    .cart-page__crosssells-inline--desktop { display: none; }
  }

  /* The cross-sells block itself — same visual treatment as
     cart-drawer's, but with no outer padding here — the cart-drawer
     wraps cross-sells in 24px section padding which the negative
     scroller margin counteracts. cart-page__items has no horizontal
     padding, so the cross-sells block sits flush against the column's
     left edge to align with products and the Continue Shopping link
     above. */
  .cart-page__crosssells {
    padding: 0;
    min-width: 0;
  }
  .cart-page__crosssells.is-hidden { display: none; }

  /* Header row — heading on the left (with underline accent), scroll
     nav arrows on the right. On desktop, this row bleeds out to match
     the scroller's full width, putting the nav arrows at the right
     edge of the visible scroll area rather than at the items column
     boundary. */
  .cart-page__crosssells-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  @media screen and (min-width: 1200px) {
    .cart-page__crosssells-header {
      width: calc(100vw - 80px);
      max-width: calc(100vw - 80px);
    }
  }  .cart-page__crosssells-heading {
    margin: 0;
    font-family: var(--cs-heading-font, inherit);
    font-weight: var(--cs-heading-weight, 500);
    color: var(--cs-heading-color, #111);
    font-size: var(--cs-heading-size, 12px);
    text-transform: var(--cs-heading-transform, uppercase);
    letter-spacing: var(--cs-heading-spacing, 0.08em);
    line-height: 1;
  }
  .cart-page__crosssells-heading span {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid currentColor;
  }

  .cart-page__crosssells-nav {
    display: none;
    gap: 4px;
    flex-shrink: 0;
  }
  .cart-page__crosssells-nav.is-overflow { display: flex; }
  .cart-page__crosssells-nav-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cs-nav-color, #111);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-page__crosssells-nav-btn:focus-visible {
    outline: 2px solid var(--cs-nav-color, #111);
    outline-offset: 2px;
    border-radius: 50%;
  }
  .cart-page__crosssells-nav-btn:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
  }
  .cart-page__crosssells-nav-btn svg {
    width: var(--cs-nav-size, 14px);
    height: var(--cs-nav-size, 14px);
  }
  @media screen and (max-width: 749px) {
    .cart-page__crosssells-nav-btn { width: 36px; height: 36px; }
  }

  /* Scroller — sits flush within the items column on mobile/tablet.
     On desktop (≥1200px), bleeds out of the items column to span the
     full page width minus the cart-page's right padding, so cards
     extend across the empty space the right summary column would
     otherwise leave unused. The carousel's header (heading + nav
     arrows) stays anchored to the items column for clean alignment;
     only the scrollable cards extend right. */
  .cart-page__crosssells-scroller {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    padding: 4px 0 8px;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cart-page__crosssells-scroller::-webkit-scrollbar { display: none; }

  /* Desktop bleed-out: extend scroller's right edge to the viewport's
     right edge minus the cart-page outer right padding (40px on
     desktop). The math: width = distance from scroller's left edge
     (which sits at items column's left, i.e. cart-page padding-left
     of 40px) all the way to (viewport right − 40px right padding).
     Using viewport units lets this hold regardless of layout grid
     widths. */
  @media screen and (min-width: 1200px) {
    .cart-page__crosssells-scroller {
      /* Distance from scroller's natural left edge to viewport right edge:
         100vw - (page left padding) - (own left edge offset within page).
         Simpler: scroller starts at items column's left, and we want
         it to end at viewport right minus cart-page right padding. */
      width: calc(100vw - 80px);
      max-width: calc(100vw - 80px);
    }
  }
  .cart-page__crosssells-card {
    flex: 0 0 var(--cs-card-width, 140px);
    /* min-width: 0 is critical — without it, flex children default
       to min-width:auto, which means a title with white-space:nowrap
       widens the card to fit its full untruncated text. That widens
       the image (width:100% of card) and via aspect-ratio also
       heightens it, so cards with long titles get taller images. */
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }
  /* Mobile inline: shrink card width via the merchant's mobile var */
  @media screen and (max-width: 749px) {
    .cart-page__crosssells-card {
      flex: 0 0 var(--cs-card-width-mobile, 110px);
    }
  }
  /* Floating mobile mode: compact cards regardless of mobile-card-width
     setting, since space is constrained above the fixed summary. */
  .cart-page__crosssells-card-image {
    position: relative;
    width: 100%;
    /* aspect-ratio removed — image now displays at its natural ratio.
       Card height matches the actual image dimensions, so there's no
       white gap between the visible product and the price overlay. */
    border-radius: var(--cs-card-radius, 0);
    overflow: hidden;
  }
  .cart-page__crosssells-card-image-link {
    /* No longer absolute — flows in normal block layout so its height
       comes from the image-frame inside it. The frame uses its image's
       intrinsic aspect-ratio (set inline by the image-frame snippet),
       so the link, the .card-image wrapper, and the visible product
       all share the same height. The overlay below stays
       position:absolute and anchors to .card-image's bottom edge. */
    display: block;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .cart-page__crosssells-card-image-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
    /* Suppress broken-image visuals — same defense as cart-drawer */
    font-size: 0;
    color: transparent;
    overflow: hidden;
  }

  .cart-page__crosssells-card-image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* z-index 3 places this above .csp-image-frame__img (z-index 2 from
       critical.css). Without it, the overlay would render behind the
       image and price + quick-add icon disappear. */
    z-index: 3;
    padding: 8px 8px 8px 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    pointer-events: none;
  }
  .cart-page__crosssells-card-price {
    margin: 0;
    color: var(--cs-price-color, #fff);
    font-size: var(--cs-price-size, 12px);
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }

  .cart-page__crosssells-qa {
    width: var(--cs-qa-size, 12px);
    height: var(--cs-qa-size, 12px);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--cs-qa-color, #fff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, color 0.2s ease, opacity 0.15s ease;
    pointer-events: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  }
  .cart-page__crosssells-qa:active { transform: scale(0.9); }
  .cart-page__crosssells-qa:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
  }
  .cart-page__crosssells-qa svg { width: 100%; height: 100%; }
  .cart-page__crosssells-qa.is-loading { pointer-events: none; opacity: 0.5; }
  .cart-page__crosssells-qa.is-loading svg { animation: cp-cs-qa-spin 0.6s linear infinite; }
  .cart-page__crosssells-qa.is-added { color: #2e7d32; }
  @keyframes cp-cs-qa-spin { to { transform: rotate(360deg); } }

  .cart-page__crosssells-card-title {
    margin-top: 8px;
    padding-left: 10px;
    font-family: var(--cs-title-font, inherit);
    font-weight: var(--cs-title-weight, 400);
    color: var(--cs-title-color, #111);
    font-size: var(--cs-title-size, 12px);
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-page__crosssells-card-image-link img,
    .cart-page__crosssells-qa {
      transition: none;
      transform: none !important;
    }
    .cart-page__crosssells-qa.is-loading svg { animation: none; }
  }

  /* ── Variant sheet ───────────────────────────────────────────
     Slide-up modal for picking variants. Anchored to the viewport
     (position: fixed) since cart.liquid has no drawer wrapper to
     anchor to — different from cart-drawer's variant sheet which
     was position:absolute inside the drawer. Otherwise visually
     identical: backdrop fades in, panel slides up from bottom. */
  .cart-page__variant-sheet {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    /* Hide entirely when closed. visibility delays its toggle by the
       slide animation duration on close (300ms) so the panel finishes
       sliding out before disappearing. On open, visibility flips to
       visible immediately so the slide-in is visible. Without this,
       translateY(100%) on the panel can leave a sliver poking up from
       the viewport bottom (panel's translation is 100% of its own
       height, not viewport height — short panels don't fully clear). */
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }
  .cart-page__variant-sheet.is-open {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 0s linear 0s;
  }
  .cart-page__variant-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cart-page__variant-sheet.is-open .cart-page__variant-sheet-backdrop {
    opacity: 1;
  }
  /* Panel — anchored to bottom of viewport. On desktop we cap width
     and center horizontally; on mobile it spans full width. Max-height
     85% so the bottom of whatever's behind peeks above and anchors
     the user that they're still on the cart page. */
  .cart-page__variant-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cart-page__variant-sheet.is-open .cart-page__variant-sheet-panel {
    transform: translateY(0);
  }
  /* Desktop: cap panel width and center — modal feel rather than
     full-width sheet. */
  @media screen and (min-width: 750px) {
    .cart-page__variant-sheet-panel {
      max-width: 480px;
      left: 50%;
      right: auto;
      transform: translate(-50%, 100%);
      bottom: 24px;
      border-radius: 16px;
      width: calc(100% - 48px);
    }
    .cart-page__variant-sheet.is-open .cart-page__variant-sheet-panel {
      transform: translate(-50%, 0);
    }
  }

  .cart-page__variant-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s ease;
  }
  .cart-page__variant-sheet-close:hover { background: #fff; }
  .cart-page__variant-sheet-close:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
  }

  .cart-page__variant-sheet-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cart-page__variant-sheet-image-wrap {
    position: relative;
    width: 100%;
    max-height: 50vh;
    background: var(--vs-image-bg, #f5f5f5);
    overflow: hidden;
  }
  .cart-page__variant-sheet-image {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    display: block;
  }
  .cart-page__variant-sheet-image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 14px;
    pointer-events: none;
  }
  .cart-page__variant-sheet-title {
    margin: 0;
    font-family: var(--vs-title-font, inherit);
    font-weight: var(--vs-title-weight, 500);
    color: var(--vs-title-color, #fff);
    font-size: var(--vs-title-size, 16px);
    text-transform: var(--vs-title-transform, none);
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Options block — exact 1:1 port from cart-drawer's variant sheet. */
  .cart-page__variant-sheet-options {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* Note: option/pill internal classes use cp-vs- prefix here to
     avoid potential conflicts if cart-drawer's variant sheet ever
     ends up loaded on the same page. Same shape, distinct names. */
  .cp-vs-option {}
  .cp-vs-option__label {
    margin: 0 0 10px;
    font-family: var(--vs-label-font, inherit);
    font-weight: var(--vs-label-weight, 400);
    font-size: var(--vs-label-size, 13px);
    color: var(--vs-label-color, #111);
  }
  .cp-vs-option__selected {
    font-weight: 500;
  }
  .cp-vs-option__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .cp-vs-option__btns--colors {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .cp-vs-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid var(--vs-pill-border, #d8d8d8);
    background: var(--vs-pill-bg, #fff);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    min-width: 44px;
    font-family: var(--vs-pill-font, inherit);
    font-weight: var(--vs-pill-weight, 400);
    font-size: var(--vs-pill-size, 13px);
    color: var(--vs-pill-text, #111);
  }
  .cp-vs-option-btn:hover { border-color: var(--vs-pill-selected-border, #111); }
  .cp-vs-option-btn.is-selected {
    border-color: var(--vs-pill-selected-border, #111);
    background: var(--vs-pill-selected-bg, #fafafa);
    font-weight: 500;
  }
  .cp-vs-option-btn.is-unavailable {
    opacity: 0.3;
    text-decoration: line-through;
    pointer-events: none;
  }
  .cp-vs-option-btn.is-sold-out {
    opacity: 0.4;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  .cp-vs-color-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--vs-pill-border, #d8d8d8);
    background: var(--vs-pill-bg, #fff);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
    width: 100%;
    text-align: left;
    font-family: var(--vs-pill-font, inherit);
    font-weight: var(--vs-pill-weight, 400);
    font-size: var(--vs-pill-size, 13px);
    color: var(--vs-pill-text, #111);
  }
  .cp-vs-color-btn:hover { border-color: var(--vs-pill-selected-border, #111); }
  .cp-vs-color-btn.is-selected {
    border-color: var(--vs-pill-selected-border, #111);
    background: var(--vs-pill-selected-bg, #fafafa);
  }
  .cp-vs-color-btn.is-unavailable {
    opacity: 0.3;
    pointer-events: none;
  }
  .cp-vs-color-btn.is-sold-out { opacity: 0.4; }
  .cp-vs-color-btn.is-sold-out .cp-vs-color-name {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .cp-vs-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
  }
  .cp-vs-color-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cart-page__variant-sheet-footer {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
  }
  .cart-page__variant-sheet-atc {
    display: block;
    width: 100%;
    padding: 14px;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    font-family: var(--vs-atc-font, inherit);
    font-weight: var(--vs-atc-weight, 500);
    font-size: var(--vs-atc-size, 13px);
    letter-spacing: var(--vs-atc-spacing, 0.06em);
    text-transform: var(--vs-atc-transform, uppercase);
    border-width: var(--vs-atc-border-width, 1px);
    border-radius: var(--vs-atc-radius, 0);
  }
  .cart-page__variant-sheet-atc:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .cart-page__variant-sheet-atc.is-loading {
    pointer-events: none;
    opacity: 0.6;
  }
  .cart-page__variant-sheet-atc.is-added {
    background: #2e7d32 !important;
    color: #fff !important;
  }

  .cart-page__variant-sheet-details {
    display: block;
    margin-top: 4px;
    padding: 8px;
    text-align: center;
    font-family: var(--vs-details-font, inherit);
    font-weight: var(--vs-details-weight, 500);
    font-size: var(--vs-details-size, 12px);
    text-transform: var(--vs-details-transform, uppercase);
    letter-spacing: var(--vs-details-spacing, 0.06em);
    color: var(--vs-details-color, #111);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .cart-page__variant-sheet-details:focus-visible {
    outline: 2px solid var(--vs-details-color, #111);
    outline-offset: 2px;
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-page__variant-sheet-backdrop,
    .cart-page__variant-sheet-panel,
    .cart-page__variant-sheet-close,
    .cart-page__variant-sheet-atc {
      transition: opacity 0.15s ease;
    }
    .cart-page__variant-sheet-panel {
      transform: translateY(0);
    }
    .cart-page__variant-sheet:not(.is-open) .cart-page__variant-sheet-panel {
      opacity: 0;
      visibility: hidden;
    }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:8) */
.col-header {
    width: 100%;
  }

  /* ── Image (above / below) ─────────────────────────── */
  .col-header__image-wrap {
    width: 100%;
    overflow: hidden;
  }
  .col-header__image {
    width: 100%;
    height: var(--col-img-height-mobile, 300px);
    object-fit: var(--col-img-fit, cover);
    object-position: var(--col-img-position, center);
    display: block;
  }
  @media screen and (min-width: 750px) {
    .col-header__image {
      height: var(--col-img-height-desktop, 500px);
    }
  }

  /* ── Text block ─────────────────────────────────────── */
  .col-header__text {
    padding: var(--col-text-padding-v-mobile, 40px) var(--col-text-padding-h-mobile, 20px);
    text-align: var(--col-text-align, left);
  }
  @media screen and (min-width: 750px) {
    .col-header__text {
      padding: var(--col-text-padding-v-desktop, 60px) var(--col-text-padding-h-desktop, 40px);
    }
  }

  /* ── Title ──────────────────────────────────────────── */
  .col-header__title {
    margin: 0 0 var(--col-title-gap, 8px);
    font-family: var(--col-title-font, inherit);
    font-weight: var(--col-title-weight, inherit);
    font-size: var(--col-title-size-mobile, 32px);
    color: var(--col-title-color, currentColor);
    text-transform: var(--col-title-transform, none);
    letter-spacing: var(--col-title-spacing, 0em);
    line-height: var(--col-title-line-height, 1.1);
  }
  @media screen and (min-width: 750px) {
    .col-header__title {
      font-size: var(--col-title-size-desktop, 48px);
    }
  }

  /* ── Subtitle ───────────────────────────────────────── */
  .col-header__subtitle {
    margin: 0 0 var(--col-subtitle-gap, 6px);
    font-family: var(--col-subtitle-font, inherit);
    font-weight: var(--col-subtitle-weight, inherit);
    font-size: var(--col-subtitle-size-mobile, 11px);
    color: var(--col-subtitle-color, currentColor);
    text-transform: var(--col-subtitle-transform, uppercase);
    letter-spacing: var(--col-subtitle-spacing, 0.08em);
    line-height: 1.4;
  }
  @media screen and (min-width: 750px) {
    .col-header__subtitle {
      font-size: var(--col-subtitle-size-desktop, 12px);
    }
  }

  /* ── Description ────────────────────────────────────── */
  .col-header__desc {
    margin-top: var(--col-desc-gap-top, 40px);
    font-family: var(--col-desc-font, inherit);
    font-weight: var(--col-desc-weight, inherit);
    font-size: var(--col-desc-size-mobile, 14px);
    color: var(--col-desc-color, currentColor);
    line-height: var(--col-desc-line-height, 1.6);
    text-align: var(--col-desc-text-align, justify);
    max-width: var(--col-desc-max-width, 100%);
  }
  .col-header__desc p { margin: 0 0 1em; }
  .col-header__desc p:last-child { margin-bottom: 0; }
  @media screen and (min-width: 750px) {
    .col-header__desc {
      font-size: var(--col-desc-size-desktop, 15px);
    }
  }

  /* ── Overlay mode ───────────────────────────────────── */
  .col-header__overlay-wrap {
    position: relative;
    overflow: hidden;
  }
  .col-header__image--overlay {
    width: 100%;
    height: var(--col-img-height-mobile, 300px);
    object-fit: var(--col-img-fit, cover);
    object-position: var(--col-img-position, center);
    display: block;
  }
  @media screen and (min-width: 750px) {
    .col-header__image--overlay {
      height: var(--col-img-height-desktop, 500px);
    }
  }
  .col-header__overlay-bg {
    position: absolute;
    inset: 0;
    background: var(--col-overlay-color, rgba(0,0,0,0.3));
    pointer-events: none;
  }
  .col-header__overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--col-overlay-v-align, flex-end);
    align-items: var(--col-overlay-h-align, flex-start);
    padding: var(--col-text-padding-v-mobile, 40px) var(--col-text-padding-h-mobile, 20px);
    text-align: var(--col-text-align, left);
  }
  @media screen and (min-width: 750px) {
    .col-header__overlay-content {
      padding: var(--col-text-padding-v-desktop, 60px) var(--col-text-padding-h-desktop, 40px);
    }
  }
/* END_SECTION:collection */

/* START_SECTION:collections-index (INDEX:9) */
/* ════════════════════════════════════════════════════════════
     COLLECTIONS INDEX — class prefix: cidx-*
  */

  /* ── Section shell ──────────────────────────────────
     Outer max-width and side gutters are handled by the theme's
     `.shopify-section` grid wrapper via the global `--page-width`
     and `--page-margin` CSS variables.

     On top of that we add a small horizontal padding that matches
     the global header's internal padding (8px → 16px from 1200px),
     so the left/right edges of this section's content align
     visually with the header's content edges across the whole
     site. Without this, the section would extend 8/16px further
     to each side than the header. */
  .cidx {
    width: 100%;
    background: var(--cidx-bg);
    color: var(--cidx-text);
    box-sizing: border-box;
    padding-top: var(--cidx-pad-top);
    padding-bottom: var(--cidx-pad-bottom);
    padding-left: 8px;
    padding-right: 8px;
  }
  @media screen and (min-width: 1200px) {
    .cidx {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* ── List ────────────────────────────────────────────
     Reset list semantics. Width is constrained by the parent
     `.shopify-section` grid wrapper — no max-width or auto
     margin needed here. */
  .cidx__list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* No top border on the list — dividers live ONLY between
       (and below) rows, not above the first one. The bottom
       border on each row gives us a divider beneath every
       row including the last, with no rogue line on top. */
  }

  /* ── Row ─────────────────────────────────────────────
     Each collection is one row. Hairline divider beneath, generous
     vertical padding, smooth opacity transition for the dim effect.
     Position relative so the preview can position-fixed independently
     while still being a child of the row in the DOM. */
  .cidx__row {
    position: relative;
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cidx[data-show-dividers="true"] .cidx__row {
    border-bottom: 1px solid var(--cidx-divider-color);
  }

  /* The dim-others effect. When the list contains a hovered row,
     all OTHER rows fade back. Uses :has() for a CSS-only solution;
     in browsers without :has() support, the dim simply doesn't
     trigger and the section still works perfectly — graceful. */
  .cidx__list:has(.cidx__row:hover) .cidx__row:not(:hover) {
    opacity: var(--cidx-dim-opacity);
  }

  /* ── Link (the row's clickable area) ──────────────────
     Flex layout: number | name (grows) | meta. Baseline alignment
     so the meta sits on the visual baseline of the massive name
     even though their font-sizes differ. */
  .cidx__link {
    display: flex;
    align-items: baseline;
    gap: clamp(24px, 4vw, 80px);
    padding: var(--cidx-row-padding) 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  @media screen and (max-width: 767px) {
    .cidx__link {
      padding: var(--cidx-row-padding-mobile) 0;
      gap: clamp(12px, 4vw, 24px);
    }
  }

  /* ── Number ──────────────────────────────────────────
     Small editorial numeral on the far left. Tabular nums so 01,
     10, 11 all line up on the same x-coordinate. Self-aligns to
     the top of the row so it sits visually above the name's
     baseline like a footnote marker. */
  .cidx__number {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: var(--cidx-number-offset);
    font-family: var(--cidx-number-font);
    font-weight: var(--cidx-number-weight);
    font-size: var(--cidx-number-size);
    letter-spacing: 0.1em;
    color: var(--cidx-number-color);
    font-variant-numeric: tabular-nums;
    min-width: var(--cidx-number-min-width);
  }

  /* ── Name ────────────────────────────────────────────
     The visual hero. Massive editorial type, fluid sizing.
     The clamp() keeps it readable at small viewports and lets
     it grow huge at large ones. flex: 1 lets it claim the
     remaining row width. */
  .cidx__name {
    flex: 1 1 auto;
    font-family: var(--cidx-name-font);
    font-weight: var(--cidx-name-weight);
    font-size: clamp(var(--cidx-name-min), var(--cidx-name-vw), var(--cidx-name-max));
    line-height: 1;
    letter-spacing: var(--cidx-name-ls);
    text-transform: var(--cidx-name-transform);
    color: var(--cidx-name-color);
    /* Prevent overflow when the name is unusually long; ellipsis
       is rare in editorial design but worth as a safety net. */
    min-width: 0;
  }

  /* ── Meta ────────────────────────────────────────────
     Small text on the far right of the row. Often a piece count
     or a custom label like "Spring 26". Aligned to top to mirror
     the number on the opposite side. */
  .cidx__meta {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: var(--cidx-meta-offset);
    font-family: var(--cidx-meta-font);
    font-weight: var(--cidx-meta-weight);
    font-size: var(--cidx-meta-size);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cidx-meta-color);
    white-space: nowrap;
  }
  @media screen and (max-width: 600px) {
    /* On very small screens, hide meta so the name isn't crushed.
       The collection title is still the most important thing. */
    .cidx__meta { display: none; }
  }

  /* ── Hover preview ───────────────────────────────────
     Position-fixed so it can roam over the whole viewport. JS
     drives the transform on mousemove. Hidden by default; gets
     `is-active` class from JS only on desktop with mouse input. */
  .cidx__preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* The preview's transform is set inline by JS via translate().
       We don't define a default transform here so the JS update
       always wins cleanly without a transition fight. */
    will-change: transform, opacity;
  }
  .cidx__preview.is-active {
    opacity: 1;
  }

  /* ── Stack (the fanned canvas) ───────────────────────
     Inner wrapper that holds the absolutely-positioned thumb
     cards. Sized to a fixed canvas so JS can predict and clamp
     the preview's position against viewport edges accurately. */
  .cidx__stack {
    position: relative;
    width: var(--cidx-thumb-size);
    height: var(--cidx-thumb-size);
  }

  /* ── Thumb (one fanned card) ──────────────────────────
     Each card stacks at 0,0 inside `.cidx__stack` and offsets
     itself via its `--thumb-i` index. The fan effect is built
     from three transforms that all key off `--thumb-i`:
       • translate Y: each card sits a little lower than the last
       • translate X: a small jitter for a hand-of-cards feel
       • rotate:     alternating sign per card so the fan spreads
                     in both directions, not just one
     The rotation uses CSS modulo math (a CSS hack since pure CSS
     can't compute (-1)^i) — multiply by `mod 2` and shift by
     0.5 to get -1/+1 per card, alternating the rotation sign. */
  .cidx__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--cidx-thumb-bg);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.18),
                0 2px 8px -2px rgba(0, 0, 0, 0.06);

    /* Each card's resting position relative to the stack origin. */
    --offset-x: calc(var(--thumb-i, 0) * var(--cidx-thumb-offset-x));
    --offset-y: calc(var(--thumb-i, 0) * var(--cidx-thumb-offset-y));
    /* Alternating rotation sign per card index. */
    --sign: calc(2 * (var(--thumb-i, 0) - 2 * floor(var(--thumb-i, 0) / 2)) - 1);
    --rotation: calc(var(--sign) * var(--thumb-i, 0) * var(--cidx-thumb-rotation));

    /* Entrance state: cards start scaled small + offset back +
       transparent. Animate into the resting position on hover. */
    opacity: 0;
    transform:
      translate(calc(var(--offset-x) - 24px), calc(var(--offset-y) - 24px))
      rotate(0deg)
      scale(0.85);

    transition:
      opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
      transform 0.55s cubic-bezier(0.18, 0.84, 0.28, 1.14);
  }

  /* When the row is hovered, each card slides to its resting
     place with a stagger by `--thumb-i` — the "deal the cards"
     effect. Rotation is applied here so cards rotate INTO the
     fan rather than starting rotated. */
  .cidx__row:hover .cidx__thumb {
    opacity: 1;
    transform:
      translate(var(--offset-x), var(--offset-y))
      rotate(var(--rotation))
      scale(1);
    transition-delay: calc(var(--thumb-i, 0) * 0.045s);
  }

  /* Pulse animation triggered by JS when a card's image swaps
     during cursor-cycling. A barely-perceptible flicker —
     enough to register as a "swap happened" beat without
     disturbing the overall fan composition. */
  .cidx__thumb.is-pulsing {
    opacity: 0.55;
    transition: opacity 0.08s linear;
  }

  /* ── Hidden image pool ─────────────────────────────
     Tiny preload-only container. Renders the first dozen product
     images as <img> tags so the browser warms its cache before
     the user hovers — first cycle then plays without visible
     load flicker. Visually clipped to zero. */
  .cidx__pool {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
  }
  .cidx__pool img {
    width: 1px;
    height: 1px;
  }

  /* ── Touch devices ──────────────────────────────────
     Suppress the entire preview on touch — hover state on touch
     is unreliable (sticky-tap), and the bare list reads beautifully
     on its own. The row stays a normal link → tap navigates to
     the collection. */
  @media (hover: none), (pointer: coarse) {
    .cidx__preview { display: none; }
    .cidx__list:has(.cidx__row:hover) .cidx__row:not(:hover) {
      opacity: 1;
    }
  }

  /* ── Reduced motion ─────────────────────────────────
     Drop the cursor-follow lag and the card-deal stagger.
     Cards just fade in at their resting positions; row dim
     still works (single opacity transition, not motion). */
  @media (prefers-reduced-motion: reduce) {
    .cidx__row,
    .cidx__preview,
    .cidx__thumb {
      transition-duration: 0.2s !important;
      transition-delay: 0s !important;
    }
    .cidx__row:hover .cidx__thumb {
      transform: translate(var(--offset-x), var(--offset-y)) rotate(var(--rotation));
    }
  }

  /* ── Empty state ────────────────────────────────────── */
  .cidx__empty {
    text-align: center;
    padding: 80px 20px;
    font-family: var(--text-1-font);
    color: #888888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
/* END_SECTION:collections-index */

/* START_SECTION:collections-list-alt (INDEX:10) */
/* ════════════════════════════════════════════════════════════
     COLLECTIONS LIST — ALT
     Class prefix: clst-*
  */
  .clst {
    width: 100%;
    background: var(--clst-bg);
    color: var(--clst-text);
    box-sizing: border-box;
    /* Outer max-width and side gutters are handled by the theme's
       `.shopify-section` grid wrapper via the global `--page-width`
       and `--page-margin` CSS variables. We add a small horizontal
       padding here that matches the global header's internal
       padding (8px → 16px from 1200px) so the section's content
       edges align visually with the header content edges across
       the whole site. */
    padding-top: var(--clst-pad-top);
    padding-bottom: var(--clst-pad-bottom);
    padding-left: 8px;
    padding-right: 8px;
  }
  @media screen and (min-width: 1200px) {
    .clst {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* ── Block container ─────────────────────────────────
     Each collection's row. Generous vertical space between
     blocks so the page reads like a magazine spread. */
  .clst__block {
    padding: var(--clst-block-spacing) 0;
  }
  .clst__block:first-child { padding-top: 0; }
  .clst__block:last-child  { padding-bottom: 0; }

  .clst[data-block-divider="true"] .clst__block + .clst__block {
    border-top: 1px solid var(--clst-divider);
  }

  /* ── Inner: 2-column grid (text + images) ───────────
     fr-unit ratio comes from settings — typical 5/7 ≈ 40/60 split. */
  .clst__inner {
    display: grid;
    grid-template-columns: var(--clst-text-fr, 5)fr var(--clst-image-fr, 7)fr;
    gap: var(--clst-column-gap);
    align-items: start;
  }

  /* On tablet/mobile, stack vertically. Text first, then images. */
  @media screen and (max-width: 1023px) {
    .clst__inner {
      grid-template-columns: 1fr;
    }
  }

  /* ── Text column ─────────────────────────────────── */
  .clst__text {
    display: flex;
    flex-direction: column;
    gap: var(--clst-text-gap);
    /* Padding-top aligns the text block roughly with the image
       grid's first row — text typically reads better with a small
       offset to feel grounded vs the visual weight of the images. */
    padding-top: var(--clst-text-top-offset);
  }
  @media screen and (max-width: 1023px) {
    .clst__text {
      padding-top: 0;
    }
  }

  /* ── Title ──────────────────────────────────────── */
  .clst__title {
    margin: 0;
    font-family: var(--clst-title-font);
    font-weight: var(--clst-title-weight);
    font-size: clamp(36px, 5vw, var(--clst-title-size-cap));
    line-height: 1.05;
    letter-spacing: var(--clst-title-ls);
    text-transform: var(--clst-title-transform);
    color: var(--clst-title-color);
  }
  .clst__title-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .clst__title-link:hover {
    opacity: 0.7;
  }

  /* ── Description ─────────────────────────────────
     Editorial paragraph with comfortable line-height and
     reading width. Slightly muted to create hierarchy
     beneath the title. */
  .clst__desc {
    max-width: var(--clst-desc-max-width);
    font-size: var(--clst-desc-size);
    line-height: 1.65;
    color: var(--clst-desc-color);
  }
  /* Shopify renders collection descriptions as rich-text HTML —
     usually wrapped in <p>. The theme's global stylesheet sets
     font-family AND font-weight on every <p>, which beats a
     parent rule via tag-targeting. We win that battle by
     applying the configured font directly to the wrapper AND
     all descendants — specificity (0,1,1) on '.clst__desc p'
     beats the global 'p' (0,0,1). The strong/b override below
     restores bold for emphasized text. */
  .clst__desc,
  .clst__desc p,
  .clst__desc span,
  .clst__desc div,
  .clst__desc li,
  .clst__desc a,
  .clst__desc * {
    font-family: var(--clst-desc-font);
    font-weight: var(--clst-desc-weight);
  }
  .clst__desc strong,
  .clst__desc b {
    font-weight: bolder;
  }
  .clst__desc > * { margin: 0 0 0.7em; }
  .clst__desc > *:last-child { margin-bottom: 0; }

  /* ── CTA — text link variant ────────────────────── */
  .clst__cta--link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-family: var(--clst-cta-link-font);
    font-weight: var(--clst-cta-link-weight);
    font-size: var(--clst-cta-size);
    text-transform: var(--clst-cta-transform);
    letter-spacing: var(--clst-cta-ls);
    color: var(--clst-cta-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-skip-ink: auto;
    width: fit-content;
  }

  /* ── CTA — ghost button variant ───────────────────
     Sets its own typography defaults (text-1, uppercase, 0.1em)
     since the button style is meant to read as a labelled CTA. */
  .clst__cta--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 28px;
    font-family: var(--clst-cta-button-font);
    font-weight: var(--clst-cta-button-weight);
    font-size: var(--clst-cta-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clst-cta-color);
    background: transparent;
    border: 1px solid var(--clst-cta-color);
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
    width: fit-content;
  }
  .clst__cta--button:hover {
    background: var(--clst-cta-color);
    color: var(--clst-cta-hover-text);
  }
  .clst__cta--button:hover .clst__cta-arrow {
    transform: translateX(3px);
  }
  .clst__cta-arrow {
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  /* ── Image grid ──────────────────────────────────
     Tight grid with small gaps — products read as one cohesive
     unit while staying visibly separate. Mobile reduces the
     column count and gap. */
  .clst__grid {
    display: grid;
    grid-template-columns: repeat(var(--clst-grid-cols, 5), 1fr);
    gap: 8px;
  }
  @media screen and (max-width: 767px) {
    .clst__grid {
      grid-template-columns: repeat(var(--clst-grid-cols-mobile, 3), 1fr);
      gap: 6px;
    }
  }

  .clst__tile {
    display: block;
    aspect-ratio: var(--clst-tile-ratio);
    overflow: hidden;
    background: var(--clst-tile-bg);
    position: relative;
  }
  .clst__tile--empty {
    pointer-events: none;
  }
  .clst__img {
    width: 100%;
    height: 100%;
    /* Merchant chooses how the product image sits inside the tile:
         • contain → entire image visible, tile background shows
                     around any space the image doesn't fill
         • cover   → image fills the tile edge-to-edge, edges may
                     crop if the image's ratio differs from the tile */
    object-fit: var(--clst-image-fit);
    box-sizing: border-box;
    display: block;
    transition: transform 0.5s ease;
  }
  /* Subtle scale-on-hover. Gated by data-hover-zoom on the section. */
  @media (hover: hover) {
    .clst[data-hover-zoom="true"] .clst__tile:hover .clst__img {
      transform: scale(1.04);
    }
  }

  /* ── Empty state ─────────────────────────────── */
  .clst__empty {
    text-align: center;
    padding: 80px 20px;
    font-family: var(--text-1-font);
    color: #888888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  @media (prefers-reduced-motion: reduce) {
    .clst__title-link,
    .clst__cta,
    .clst__cta-arrow,
    .clst__img {
      transition: none !important;
    }
  }
/* END_SECTION:collections-list-alt */

/* START_SECTION:collections-list (INDEX:11) */
/* ════════════════════════════════════════════════════════════
     COLLECTIONS LIST — class prefix: cgrd-*
  */

  /* ── Section shell ──────────────────────────────────
     Outer max-width and side gutters come from the theme's
     `.shopify-section` grid wrapper via global `--page-width`
     and `--page-margin`. We add a small horizontal padding
     matching the global header (8px → 16px from 1200px) so
     the section's content edges align with the header's. */
  .cgrd {
    width: 100%;
    background: var(--cgrd-bg);
    color: var(--cgrd-text);
    box-sizing: border-box;
    padding-top: var(--cgrd-pad-top);
    padding-bottom: var(--cgrd-pad-bottom);
    padding-left: 8px;
    padding-right: 8px;
  }
  @media screen and (min-width: 1200px) {
    .cgrd {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* ── Grid ────────────────────────────────────────────
     Two column counts (desktop / mobile) drive a responsive
     CSS grid. The `gap` is uniform on both axes — classic
     gallery rhythm. */
  .cgrd__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--cgrd-gap);
    grid-template-columns: repeat(var(--cgrd-cols, 3), minmax(0, 1fr));
  }
  @media screen and (max-width: 1023px) {
    .cgrd__grid {
      grid-template-columns: repeat(var(--cgrd-cols-mobile, 1), minmax(0, 1fr));
    }
  }

  /* ── Card ────────────────────────────────────────────
     The grid cell + interaction surface. Position relative so
     the overlay variant can absolutely-position its content
     against the media. */
  .cgrd__card {
    position: relative;
    list-style: none;
    margin: 0;
  }
  .cgrd__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  /* ── Media (image wrapper) ────────────────────────────
     Aspect-ratio'd container that holds the image + any
     overlay content. overflow:hidden so the hover zoom on the
     image doesn't bleed past the card edges. */
  .cgrd__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--cgrd-image-ratio, auto);
    overflow: hidden;
    background: var(--cgrd-image-bg);
  }

  .cgrd__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cgrd__image--placeholder {
    /* When a collection has no image, fill the media area
       with the configured background — keeps grid heights
       even, and reads as an intentional "image coming soon"
       rather than a broken state. */
    background: var(--cgrd-image-bg);
  }

  /* ── Scrim (overlay variant only) ─────────────────────
     Bottom-to-top gradient over the image to ensure title
     legibility regardless of the photograph's tonal range. */
  .cgrd__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, var(--cgrd-scrim-opacity)) 0%,
      rgba(0, 0, 0, 0) 50%
    );
    pointer-events: none;
    z-index: 3;
  }

  /* ── Overlay content (overlay variant only) ──────────
     Absolute positioned at the bottom-left of the media.
     Uses light text against the scrim. */
  .cgrd__overlay-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--cgrd-overlay-padding);
    color: var(--cgrd-overlay-text-color);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 4;
  }

  /* ── Body (stacked variant only) ─────────────────────
     Text content beneath the image. Generous line-height,
     comfortable reading width, deliberate vertical rhythm. */
  .cgrd__body {
    padding-top: var(--cgrd-body-pad-top);
    display: flex;
    flex-direction: column;
    gap: var(--cgrd-body-gap);
  }

  /* ── Number ──────────────────────────────────────────
     Editorial row marker (01., 02. etc.). Tabular nums so
     widths align across cards. */
  .cgrd__number {
    font-family: var(--cgrd-number-font);
    font-weight: var(--cgrd-number-weight);
    font-size: var(--cgrd-number-size);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cgrd-number-color);
    font-variant-numeric: tabular-nums;
  }
  .cgrd__number--overlay {
    color: inherit;
    opacity: 0.85;
  }

  /* ── Title ───────────────────────────────────────────
     The hero of each card. Fluid sizing via clamp() with
     three merchant-tunable values (min, vw scale, max). */
  .cgrd__title {
    margin: 0;
    font-family: var(--cgrd-title-font);
    font-weight: var(--cgrd-title-weight);
    font-size: clamp(
      var(--cgrd-title-size-min),
      var(--cgrd-title-size-vw),
      var(--cgrd-title-size-max)
    );
    line-height: 1.05;
    letter-spacing: var(--cgrd-title-ls);
    text-transform: var(--cgrd-title-transform);
    color: var(--cgrd-title-color);
  }
  .cgrd__title--overlay {
    color: inherit;
  }

  /* ── Description ─────────────────────────────────────
     Editorial paragraph beneath the title. Comfortable
     reading width and line-height, slightly muted to create
     hierarchy. Same global-p-rule defense as the alt
     section: target both the wrapper AND descendants so a
     theme-wide `p` rule can't override our font choices. */
  .cgrd__desc,
  .cgrd__desc p,
  .cgrd__desc span,
  .cgrd__desc div,
  .cgrd__desc li,
  .cgrd__desc a,
  .cgrd__desc * {
    font-family: var(--cgrd-desc-font);
    font-weight: var(--cgrd-desc-weight);
  }
  .cgrd__desc {
    margin: 0;
    font-size: var(--cgrd-desc-size);
    line-height: 1.6;
    color: var(--cgrd-desc-color);
    max-width: 56ch;
  }
  .cgrd__desc strong, .cgrd__desc b { font-weight: bolder; }
  .cgrd__desc--rich > * { margin: 0 0 0.6em; }
  .cgrd__desc--rich > *:last-child { margin-bottom: 0; }

  /* ── Meta line ───────────────────────────────────────
     Small editorial label — product count or per-collection
     metafield. Same system as the editorial index section. */
  .cgrd__meta {
    font-family: var(--cgrd-meta-font);
    font-weight: var(--cgrd-meta-weight);
    font-size: var(--cgrd-meta-size);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cgrd-meta-color);
  }
  .cgrd__meta--overlay {
    color: inherit;
    opacity: 0.85;
  }

  /* ── CTA — text link variant ─────────────────────────
     Underlined link with optional arrow. The underline grows
     subtly from the left on hover — a small detail that
     reads as quality. */
  .cgrd__cta--link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    width: fit-content;
    font-family: var(--cgrd-cta-font);
    font-weight: var(--cgrd-cta-weight);
    font-size: var(--cgrd-cta-size);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cgrd-cta-color);
  }
  .cgrd__cta--link .cgrd__cta-text {
    position: relative;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cgrd__card:hover .cgrd__cta--link .cgrd__cta-text {
    /* Underline contracts to nothing on hover, then we'll
       reveal it from the left in the next rule — gives a
       "draws under" feel rather than just disappearing. */
    background-size: 0 1px;
    background-position: 100% 100%;
    transition: background-size 0.18s ease-out;
  }
  /* The opposite-direction redraw — set up a second rule that
     runs after the contraction. Skipping for simplicity:
     a single underline on always-state is more elegant. */

  /* ── CTA — ghost button variant ─────────────────────── */
  .cgrd__cta--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    width: fit-content;
    padding: 12px 24px;
    font-family: var(--cgrd-cta-font);
    font-weight: var(--cgrd-cta-weight);
    font-size: var(--cgrd-cta-size);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cgrd-cta-color);
    background: transparent;
    border: 1px solid var(--cgrd-cta-color);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .cgrd__card:hover .cgrd__cta--button {
    background: var(--cgrd-cta-color);
    color: var(--cgrd-cta-button-hover-text);
  }

  .cgrd__cta-arrow {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .cgrd__card:hover .cgrd__cta-arrow {
    transform: translateX(4px);
  }

  /* ── Empty state ──────────────────────────────────────
     Shown when no collections render (all excluded, store
     has none yet, etc.). */
  .cgrd__empty {
    text-align: center;
    padding: 80px 20px;
    font-family: var(--text-1-font);
    color: #888888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* ── Reduced motion ─────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .cgrd__cta-arrow,
    .cgrd__cta--button,
    .cgrd__cta--link .cgrd__cta-text {
      transition-duration: 0.2s !important;
    }
  }
/* END_SECTION:collections-list */

/* START_SECTION:complete-the-look (INDEX:12) */
/* ── Section root ─────────────────────────────────────────── */
  .ctl-section { width: 100%; box-sizing: border-box; }

  /* ── Split layout ─────────────────────────────────────────── */
  .ctl-split { width: 100%; }

  /* ── Editorial image side ─────────────────────────────────── */
  .ctl-media { position: relative; width: 100%; }
  .ctl-media__link { display: block; text-decoration: none; color: inherit; }
  .ctl-media__frame {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  .ctl-media__img,
  .ctl-media__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .ctl-media__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 50%);
    pointer-events: none;
  }
  .ctl-media__caption-wrap {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    padding: 16px 20px;
  }
  .ctl-media__caption-wrap--top-left     { top: 0; left: 0; }
  .ctl-media__caption-wrap--top-right    { top: 0; right: 0; text-align: right; }
  .ctl-media__caption-wrap--bottom-left  { bottom: 0; left: 0; }
  .ctl-media__caption-wrap--bottom-right { bottom: 0; right: 0; text-align: right; }
  .ctl-media__caption-wrap--center {
    top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;
  }
  .ctl-media__caption {
    display: inline-block;
    line-height: 1.3;
  }

  /* ── Content side ─────────────────────────────────────────── */
  .ctl-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .ctl-header { margin: 0 0 20px; }
  .ctl-header > * { margin: 0; padding: 0; }
  .ctl-header > * + * { margin-top: 8px; }
  .ctl-eyebrow { line-height: 1.2; }
  .ctl-heading { line-height: 1.15; }
  .ctl-subheading { line-height: 1.45; }

  .ctl-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    text-decoration: none;
    width: max-content;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap 0.2s ease;
  }
  .ctl-link:hover { gap: 12px; }

  /* ── Product card (mirrors related-products' card) ────────── */
  .ctl-grid { list-style: none; margin: 0; padding: 0; }
  .product-card { position: relative; min-width: 0; align-self: start; }
  .product-card__image-link { display: block; text-decoration: none; color: inherit; }
  .product-card__image-wrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }
  .product-card__track { display: flex; flex-direction: row; width: 100%; height: 100%; will-change: transform; }
  /* Image-frame wraps each img — must occupy one slot width so JS translateX math still works. */
  .product-card__track > .csp-image-frame { flex: 0 0 100%; min-width: 100%; width: 100%; {% if section.settings.image_ratio == 'natural' %}height: auto;{% else %}height: 100%;{% endif %} }
  .product-card__track .product-card__img { flex: 0 0 100%; min-width: 100%; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .product-card__placeholder { width: 100%; height: 100%; display: block; background: #f0f0f0; }
  .product-card__swatches { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: flex; gap: 4px; align-items: center; pointer-events: none; }
  .product-card__swatch { display: block; pointer-events: all; width: 14px; height: 14px; border-radius: 0; border: 1px solid #000; transition: border-color 0.15s; cursor: pointer; }
  .product-card__swatch.is-sold-out { opacity: 0.5; position: relative; }
  .product-card__swatch.is-sold-out::before, .product-card__swatch.is-sold-out::after { content:''; position:absolute; top:50%; left:50%; width:130%; height:1px; background:#fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35); transform-origin:center; pointer-events:none; }
  .product-card__swatch.is-sold-out::before { transform:translate(-50%,-50%) rotate(45deg); }
  .product-card__swatch.is-sold-out::after  { transform:translate(-50%,-50%) rotate(-45deg); }
  .product-card__swatch-more { font-size: 10px; line-height: 1; }

  .product-card__sold-out { white-space: nowrap; flex-shrink: 0; }
  .product-card__wishlist { display:flex; align-items:center; justify-content:center; text-decoration:none; pointer-events:all; flex-shrink:0; background:none; border:none; cursor:pointer; padding:0; margin:0; transition:transform 0.15s; }
  .product-card__wishlist:active { transform: scale(0.88); }
  .product-card__wishlist svg { transition: fill 0.2s, color 0.2s; display: block; }
  .product-card__quick-add { display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; margin:0; cursor:pointer; pointer-events:all; flex-shrink:0; }
  .product-card__quick-add svg { display: block; }
  .product-card__quick-add.is-loading { opacity: 0.4; pointer-events: none; }

  /* ── QA Drawer (namespaced .ctl-qa-*) ─────────────────────── */
  .ctl-qa-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9998; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
  .ctl-qa-overlay[aria-hidden="false"] { opacity:1; pointer-events:all; }
  .ctl-qa-drawer { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:#fff; border-radius:16px 16px 0 0; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); display:flex; flex-direction:column; max-height: 90vh; }
  .ctl-qa-drawer[aria-hidden="false"] { transform: translateY(0); }
  @media screen and (min-width: 600px) {
    .ctl-qa-drawer { left:50%; right:auto; width:460px; transform:translateX(-50%) translateY(100%); }
    .ctl-qa-drawer[aria-hidden="false"] { transform: translateX(-50%) translateY(0); }
  }
  .ctl-qa-drawer__header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 14px; border-bottom:1px solid #efefef; flex-shrink:0; }
  .ctl-qa-drawer__title { font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
  .ctl-qa-drawer__close { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; color:inherit; opacity:0.5; transition:opacity 0.15s; }
  .ctl-qa-drawer__close:hover { opacity: 1; }
  .ctl-qa-drawer__body { padding:20px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; flex:1; }
  .ctl-qa-drawer__product { display:flex; gap:14px; align-items:flex-start; }
  .ctl-qa-drawer__image-wrap { width:76px; height:76px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f5f5f5; }
  .ctl-qa-drawer__image { width:100%; height:100%; object-fit:cover; display:block; }
  .ctl-qa-drawer__info { display:flex; flex-direction:column; gap:5px; min-width:0; padding-top:2px; }
  .ctl-qa-drawer__product-title { font-size:14px; font-weight:500; line-height:1.35; margin:0; }
  .ctl-qa-drawer__price { font-size:13px; opacity:0.65; margin:0; }
  .ctl-qa-drawer__options { display:flex; flex-direction:column; gap:18px; }
  .ctl-qa-option { display:flex; flex-direction:column; gap:8px; }
  .ctl-qa-option__label { margin:0; }
  .ctl-qa-option__selected { opacity: 0.6; }
  .ctl-qa-option__btns { display:flex; flex-wrap:wrap; gap:6px; }
  .ctl-qa-option__btns--colors { gap: 8px; }
  .ctl-qa-option-btn,
  .ctl-qa-color-btn {
    cursor:pointer;
    background:transparent;
    border:1px solid #d8d8d8;
    padding:8px 14px;
    transition:border-color 0.15s, background-color 0.15s;
    display:inline-flex; align-items:center; gap:6px;
  }
  .ctl-qa-option-btn.is-selected,
  .ctl-qa-color-btn.is-selected { border-color: #111; }
  .ctl-qa-option-btn.is-sold-out,
  .ctl-qa-color-btn.is-sold-out { opacity: 0.4; text-decoration: line-through; }
  .ctl-qa-option-btn.is-unavailable,
  .ctl-qa-color-btn.is-unavailable { opacity: 0.3; cursor: not-allowed; }
  .ctl-qa-color-dot { display:inline-block; width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,0.1); flex-shrink:0; }
  .ctl-qa-drawer__footer { padding:14px 20px 20px; border-top:1px solid #efefef; flex-shrink:0; }
  .ctl-qa-drawer__atc { width:100%; height:50px; cursor:pointer; transition:background-color 0.2s,color 0.2s,border-color 0.2s; }
  .ctl-qa-drawer__atc:disabled { opacity:0.35; cursor:default; }

  /* ── QA Toast ─────────────────────────────────────────────── */
  /* Cart notification — see global cart-toast snippet in theme.liquid. */
/* END_SECTION:complete-the-look */

/* START_SECTION:contact-form (INDEX:13) */
/* ── Section root ────────────────────────────────────────── */
  .csp-cf {
    background-color: var(--cf-bg);
    color: var(--cf-text);
    padding: var(--cf-pad-top) 16px var(--cf-pad-bottom);
    font-family: var(--cf-body-font);
    font-weight: var(--cf-body-weight);
  }

  /* Container hooks into the global page width so the contact
     page aligns with the header and the rest of the site. */
  .csp-cf__inner {
    max-width: var(--page-width, 1600px);
    margin: 0 auto;
    width: 100%;
  }
  /* Inner content max-width — keeps the form readable on wide
     screens. ~720px is the editorial sweet spot. */
  .csp-cf__content {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  /* ── Form layout ─────────────────────────────────────────── */
  .csp-cf__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* Two-column row for first/last name and country/phone */
  .csp-cf__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media screen and (min-width: 750px) {
    .csp-cf__row {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* ── Floating-label field ────────────────────────────────── */
  .csp-cf__field {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .csp-cf__label {
    position: absolute;
    left: 0;
    top: 14px;
    font-family: var(--cf-label-font);
    font-weight: var(--cf-label-weight);
    font-size: var(--cf-label-size);
    color: var(--cf-text);
    opacity: 0.7;
    pointer-events: none;
    transition: top 0.18s ease, font-size 0.18s ease, opacity 0.18s ease;
    transform-origin: left top;
  }

  /* Lifted state — when input is focused OR has a value. */
  .csp-cf__input:focus + .csp-cf__label,
  .csp-cf__input:not(:placeholder-shown) + .csp-cf__label,
  .csp-cf__textarea:focus + .csp-cf__label,
  .csp-cf__textarea:not(:placeholder-shown) + .csp-cf__label {
    top: -10px;
    font-size: var(--cf-label-size-lifted);
    opacity: 0.55;
  }

  /* Required asterisk lives in the label — small and unobtrusive */
  .csp-cf__required {
    margin-left: 2px;
    opacity: 0.5;
  }

  /* ── Underline inputs ────────────────────────────────────── */
  .csp-cf__input,
  .csp-cf__textarea {
    font-family: var(--cf-body-font);
    font-weight: var(--cf-body-weight);
    font-size: var(--cf-input-size);
    color: var(--cf-text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cf-input-border);
    border-radius: 0;
    padding: 14px 0 10px;
    box-sizing: border-box;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease;
  }

  /* Touch-device override — even on a "desktop" breakpoint, if the
     device is touch-only, iOS auto-zooms when the input font-size
     is below 16px. Hardcoded 16px override is the bulletproof fix.
     (hover: none) and (pointer: coarse) is the precise touch-only
     matcher — phones, tablets, but NOT a touchscreen laptop with
     a mouse (which would match hover: hover). */
  @media (hover: none) and (pointer: coarse) {
    .csp-cf__input,
    .csp-cf__textarea,
    .csp-cf__dropdown-trigger {
      font-size: 16px !important;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
  }
  /* Hide the placeholder text — the floating label takes its
     place. We still NEED a placeholder attribute on the inputs so
     :placeholder-shown works to detect emptiness. */
  .csp-cf__input::placeholder,
  .csp-cf__textarea::placeholder {
    color: transparent;
  }
  .csp-cf__input:focus,
  .csp-cf__textarea:focus {
    outline: none;
    border-bottom-color: var(--cf-input-focus-border);
  }

  /* ── Custom dropdown (Order, Topic) ───────────────────────
     Replaces the native select with a button-driven listbox.
     Same visual language as the rest of the form: underline-
     only, no box. */
  .csp-cf__dropdown {
    position: relative;
    width: 100%;
  }
  .csp-cf__dropdown-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--cf-input-border);
    border-radius: 0;
    padding: 14px 0 10px;
    color: var(--cf-text);
    font-family: var(--cf-body-font);
    font-weight: var(--cf-body-weight);
    font-size: var(--cf-input-size);
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease;
  }
  .csp-cf__dropdown-trigger:focus {
    outline: none;
    border-bottom-color: var(--cf-input-focus-border);
  }
  .csp-cf__dropdown-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* The placeholder version uses the resting label opacity so it
     reads as a hint rather than a value. Once a value is selected,
     JS removes this modifier class and the text renders solid. */
  .csp-cf__dropdown-value--placeholder {
    opacity: 0.7;
  }
  .csp-cf__dropdown-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
  }
  .csp-cf__dropdown-trigger[aria-expanded="true"] .csp-cf__dropdown-chevron {
    transform: rotate(180deg);
  }

  /* The open panel — a bordered list that drops below the trigger.
     position: absolute over the input so it doesn't push form
     content down when opened. */
  .csp-cf__dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background-color: var(--cf-bg);
    border: 1px solid var(--cf-input-border);
    z-index: 5;
    max-height: 280px;
    overflow-y: auto;
    animation: csp-cf-dropdown-fade 0.18s ease-out;
  }
  .csp-cf__dropdown-panel[hidden] {
    display: none;
  }
  @keyframes csp-cf-dropdown-fade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .csp-cf__dropdown-panel li {
    padding: 10px 16px;
    font-family: var(--cf-body-font);
    font-weight: var(--cf-body-weight);
    font-size: 14px;
    line-height: 1.4;
    color: var(--cf-text);
    cursor: pointer;
    transition: background-color 0.12s ease;
  }
  /* Keyboard-active (data-active) and currently-selected
     (aria-selected) options both highlight subtly. Hover sets
     the same data-active so mouse + keyboard stay in sync. */
  .csp-cf__dropdown-panel li:hover,
  .csp-cf__dropdown-panel li[data-active="true"] {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .csp-cf__dropdown-panel li[aria-selected="true"] {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 600;
  }
  /* Error state — applied by the form-submit JS when a required
     dropdown wasn't selected. Mirrors the input error treatment. */
  .csp-cf__dropdown.is-invalid .csp-cf__dropdown-trigger {
    border-bottom-color: var(--cf-error);
  }

  /* ── Textarea ────────────────────────────────────────────── */
  /* Override the underline-only base style — the message field is
     a multi-line container and reads better as a fully-bordered
     box. The border color matches the other inputs. */
  .csp-cf__textarea {
    border: 1px solid var(--cf-input-border);
    padding: 18px 16px 14px;
    min-height: var(--cf-message-min-height);
    resize: vertical;
    line-height: 1.55;
  }
  .csp-cf__textarea:focus {
    border-color: var(--cf-input-focus-border);
    /* The base focus rule sets border-bottom-color; here we need
       the whole border to switch since all four sides are visible. */
    border-bottom-color: var(--cf-input-focus-border);
  }
  /* Resting label position for the boxed textarea — sits INSIDE
     the box at the same horizontal padding as the text content,
     instead of flush-left like the underline inputs. */
  .csp-cf__textarea + .csp-cf__label {
    left: 16px;
    top: 18px;
  }
  /* Lift the floating label so it sits ABOVE the boxed textarea
     when filled or focused. We override BOTH top and left so the
     lifted label aligns flush with the box's left edge instead of
     hanging out 16px to the right inside the padding. */
  .csp-cf__textarea:focus + .csp-cf__label,
  .csp-cf__textarea:not(:placeholder-shown) + .csp-cf__label {
    top: -18px;
    left: 0;
  }
  /* When in error state, the bordered textarea needs all four sides
     to switch color, not just the bottom. */
  .csp-cf__field.is-invalid .csp-cf__textarea {
    border-color: var(--cf-error);
  }

  /* Character counter under the textarea */
  .csp-cf__counter {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cf-text);
    opacity: 0.55;
  }
  .csp-cf__counter.is-near-limit {
    opacity: 1;
    color: var(--cf-warning);
  }
  .csp-cf__counter.is-over-limit {
    opacity: 1;
    color: var(--cf-error);
  }

  /* ── Inline field errors ─────────────────────────────────── */
  .csp-cf__field-error {
    margin-top: 6px;
    font-size: 13px;
    color: var(--cf-error);
    line-height: 1.4;
  }
  /* When a field is in an error state, draw the bottom border in
     the error color too. */
  .csp-cf__field.is-invalid .csp-cf__input,
  .csp-cf__field.is-invalid .csp-cf__textarea {
    border-bottom-color: var(--cf-error);
  }

  /* ── Helper text block ───────────────────────────────────── */
  /* Negative margin pulls the helper text up to sit close to the
     dropdown above it, overriding the form's 32px field gap. The
     -24px lands the helper right under the dropdown's underline. */
  .csp-cf__helper {
    font-family: var(--cf-body-font);
    font-weight: var(--cf-body-weight);
    font-size: var(--cf-helper-size);
    line-height: 1.5;
    color: var(--cf-text);
    opacity: 0.75;
    margin: -24px 0 0;
  }
  .csp-cf__helper a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .csp-cf__helper a:hover {
    opacity: 0.7;
  }

  /* ── Submit button (full-width) ──────────────────────────────
     This button has type="submit", which means it matches the
     global button[type="submit"] rule in critical.css that
     applies the theme-wide primary-button styles. We don't want
     that — the contact form's submit should be controlled
     entirely by THIS section's schema settings.

     To fully decouple, we explicitly override EVERY property the
     global rule sets, using scoped selectors that win on
     specificity. */
  .csp-cf__submit {
    /* Layout — override global display: inline-block and the
       relative-positioned overflow:hidden trick. */
    display: block;
    position: static;
    overflow: visible;
    width: 100%;
    margin-top: 8px;

    /* Colors — pulled from this section's schema only. */
    background-color: var(--cf-btn-bg);
    color: var(--cf-btn-text);
    background-clip: border-box;

    /* Border + radius — explicit override of the global var()
       chain. Border-width is hardcoded so the global
       --button-border-width variable can't leak through. */
    border-width: 1px;
    border-style: solid;
    border-color: var(--cf-btn-border);
    border-radius: var(--cf-btn-radius);

    /* Padding — hardcoded values, not vars from settings_schema. */
    padding: 18px 32px;

    /* Typography — these were already section-specific. */
    font-family: var(--text-5-font);
    font-weight: var(--text-5-weight);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;

    /* Transition — list specific properties, NOT all. The
       global rule uses all 0.3s ease which can cascade through
       and produce unexpected animations on properties we don't
       want to animate. */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  .csp-cf__submit:hover:not(:disabled) {
    background-color: var(--cf-btn-bg-hover);
    color: var(--cf-btn-text-hover);
    border-color: var(--cf-btn-border-hover);
  }
  .csp-cf__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* Suppress any ::before / ::after pseudo-elements that other
     theme button styles might attach. */
  .csp-cf__submit::before,
  .csp-cf__submit::after {
    display: none !important;
    content: none !important;
  }

  /* ── Success state ───────────────────────────────────────── */
  .csp-cf__success {
    text-align: center;
    padding: 48px 24px;
    border-top: 1px solid var(--cf-input-border);
    border-bottom: 1px solid var(--cf-input-border);
  }
  .csp-cf__success-heading {
    font-family: var(--cf-heading-font);
    font-weight: var(--cf-heading-weight);
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--cf-heading);
  }
  .csp-cf__success-message {
    font-family: var(--cf-body-font);
    font-weight: var(--cf-body-weight);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.85;
  }

  /* ── Server-side error block (Shopify form.errors) ──────── */
  .csp-cf__errors {
    border: 1px solid var(--cf-error);
    color: var(--cf-error);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .csp-cf__errors ul {
    margin: 4px 0 0;
    padding-left: 20px;
  }

  /* ── Reveal animation ──────────────────────────────────────
     Only active when the section root carries
     data-reveal-enabled="true". Static stylesheet can't read
     Liquid, so we gate via attribute selector. */
  .csp-cf[data-reveal-enabled="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .csp-cf[data-reveal-enabled="true"] [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .csp-cf[data-reveal-enabled="true"] [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:contact-form */

/* START_SECTION:countdown (INDEX:14) */
.cd {
    background-color: var(--cd-bg);
    padding-top: var(--cd-pad-top);
    padding-bottom: var(--cd-pad-bottom);
    padding-left: var(--cd-edge-pad);
    padding-right: var(--cd-edge-pad);
  }

  /* Used by the expiry "hide" behavior — JS adds .cd--hidden, this
     rule collapses the section out of flow. */
  .cd.cd--hidden {
    display: none;
  }

  /* Optional eyebrow + heading above the timer. Both live in normal
     HTML flow; only their typography is merchant-configurable.
     They're independent of the SVG below them. */
  .cd__eyebrow {
    color: var(--cd-eyebrow-color);
    font-family: var(--cd-eyebrow-font);
    font-weight: var(--cd-eyebrow-weight);
    font-size: var(--cd-eyebrow-size);
    text-transform: var(--cd-eyebrow-transform);
    letter-spacing: var(--cd-eyebrow-spacing);
    line-height: 1.4;
    text-align: var(--cd-text-align);
    margin: 0 0 var(--cd-eyebrow-gap) 0;
  }

  .cd__heading {
    color: var(--cd-heading-color);
    font-family: var(--cd-heading-font);
    font-weight: var(--cd-heading-weight);
    font-size: var(--cd-heading-size);
    text-transform: var(--cd-heading-transform);
    letter-spacing: var(--cd-heading-spacing);
    line-height: 1.15;
    text-align: var(--cd-text-align);
    margin: 0 0 var(--cd-heading-gap) 0;
    max-width: 100%;
  }

  /* The SVG is the engine of the whole "fills width and scales as
     one unit" behavior. width: 100% + the fixed viewBox = uniform
     proportional scaling at every viewport size. */
  .cd__numbers {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .cd__numbers .num {
    fill: var(--cd-num-color);
    font-family: var(--cd-num-font);
    font-weight: var(--cd-num-weight);
    /* tabular-nums is essential — without it, "01" and "11" render
       at different widths and the layout shifts every time a digit
       changes. With it, every digit occupies the same slot, so
       ticks are visually still. */
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--cd-num-spacing);
    /* transform-box: fill-box anchors transforms to the element's
       own bounding box rather than the SVG canvas origin. Default
       in modern browsers but explicit for clarity. */
    transform-box: fill-box;
    transform-origin: center;
  }

  .cd__numbers .sep {
    fill: var(--cd-sep-color);
    font-family: var(--cd-sep-font);
    font-weight: var(--cd-sep-weight);
    opacity: var(--cd-sep-opacity);
  }

  /* Tick animation — when a digit changes, it slides up from a
     slightly lower position while fading in. The combination of
     vertical motion + fade reads as a smooth, intentional clock
     tick rather than a flash.

     The cubic-bezier curve (0.32, 0.72, 0, 1) is a smooth Apple-
     style ease-out — slow start, fast settle. The motion has a
     small "anticipation" feel that makes it look mechanical
     rather than computed.

     Distance is read from --cd-tick-distance on the section root,
     so a single shared keyframe handles every instance. */
  .cd__numbers .num.is-ticking {
    animation: cd-tick var(--cd-tick-duration) cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes cd-tick {
    0% {
      opacity: 0;
      transform: translateY(var(--cd-tick-distance));
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Labels live INSIDE the SVG (as <text class="lbl"> elements at
     y=320), not as separate HTML. They scale with the numbers —
     when the SVG shrinks with viewport, labels shrink too. */
  .cd__numbers .lbl {
    fill: var(--cd-label-color);
    font-family: var(--cd-label-font);
    font-weight: var(--cd-label-weight);
    text-transform: var(--cd-label-transform);
    letter-spacing: var(--cd-label-spacing);
  }

  /* Expired message — only shows after the countdown reaches zero
     (and only when the merchant chose "show_message"). Sits in the
     same place as the numbers/labels and pushes them out via
     display: none toggling. */
  .cd__expired {
    display: none;
    color: var(--cd-expired-color);
    font-family: var(--cd-expired-font);
    font-weight: var(--cd-expired-weight);
    font-size: clamp(var(--cd-expired-size-min), var(--cd-expired-size-vw), var(--cd-expired-size-max));
    text-transform: var(--cd-expired-transform);
    letter-spacing: var(--cd-expired-spacing);
    line-height: 1.2;
    text-align: var(--cd-text-align);
    margin: 0;
  }

  .cd.cd--expired .cd__numbers {
    display: none;
  }

  .cd.cd--expired .cd__expired {
    display: block;
  }
/* END_SECTION:countdown */

/* START_SECTION:custom-liquid (INDEX:15) */
.cliq {
    padding-top: var(--cliq-pt);
    padding-bottom: var(--cliq-pb);
    padding-left: var(--cliq-ph);
    padding-right: var(--cliq-ph);
  }
/* END_SECTION:custom-liquid */

/* START_SECTION:custom-section (INDEX:16) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Create a stacking context so the background's z-index: -1
       stays contained within this section. Without isolation,
       the negative z-index can escape and render behind content
       in the section ABOVE this one — the classic z-index: -1
       trap. `isolation: isolate` is the safe, single-property
       way to fix it without affecting layout. */
    isolation: isolate;
  }

  .custom-section__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
  }

  /* The image-frame snippet is rendered with aspect_ratio: 'none'
     (no inline aspect-ratio), so we size it explicitly here to
     fill the background wrapper. The placeholder system inside
     the snippet (color/text/logo/shimmer/etc.) shows during load,
     consistent with every other image in the theme. */
  .custom-section__background > .csp-image-frame {
    width: 100%;
    height: 100%;
  }

  /* object-fit: cover makes the image always fill the section
     regardless of the image's native aspect ratio. This is the
     standard "background image" behavior and avoids the empty-
     bands problem the previous width/auto + transform approach
     had on sections taller than the image. */
  .custom-section__bg-img {
    object-fit: cover;
    object-position: center;
  }

  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:faq-editorial (INDEX:17) */
/* ════════════════════════════════════════════════════════════
     FAQ EDITORIAL — class prefix lqa-*
     ════════════════════════════════════════════════════════════ */

  .lqa {
    background: var(--lqa-bg);
    color: var(--lqa-text);
    padding-top: var(--lqa-pad-top);
    padding-bottom: var(--lqa-pad-bottom);
    box-sizing: border-box;
  }
  .lqa__inner {
    width: 100%;
    max-width: var(--lqa-content-max);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
  }
  @media (min-width: 1024px) { .lqa__inner { padding-inline: 40px; } }

  /* ── Intro ───────────────────────────────────────── */
  .lqa__intro {
    margin-bottom: 64px;
    max-width: 720px;
  }
  .lqa__eyebrow {
    display: inline-block;
    font-family: var(--lqa-eyebrow-font);
    font-weight: var(--lqa-eyebrow-weight);
    font-size: var(--lqa-eyebrow-size);
    letter-spacing: var(--lqa-eyebrow-letter-spacing);
    text-transform: uppercase;
    color: var(--lqa-muted);
    margin-bottom: 20px;
    margin-inline-end: calc(var(--lqa-eyebrow-letter-spacing) * -1);
  }
  .lqa__heading {
    font-family: var(--lqa-heading-font);
    font-weight: var(--lqa-heading-weight);
    font-size: var(--lqa-heading-size);
    letter-spacing: var(--lqa-heading-letter-spacing);
    line-height: 1.05;
    margin: 0;
    color: var(--lqa-text);
  }
  .lqa__subtitle {
    margin: 20px 0 0;
    font-family: var(--lqa-body-font);
    font-weight: var(--lqa-body-weight);
    font-size: var(--lqa-body-size);
    line-height: 1.55;
    color: var(--lqa-muted);
    max-width: 540px;
  }

  /* ── Split layout (desktop) ──────────────────────── */
  .lqa__split {
    display: grid;
    grid-template-columns: var(--lqa-cols-left) var(--lqa-cols-right);
    gap: 56px;
    position: relative;
    align-items: start;
  }
  /* Vertical hairline between the two columns — sits at the
     gap midpoint, visually divides the index from the panel. */
  .lqa__split::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((100% - 56px) * var(--lqa-ratio-left) / 100 + 28px);
    width: 1px;
    background: var(--lqa-hairline);
    pointer-events: none;
  }

  /* ── Left: question list ─────────────────────────── */
  .lqa__nav { min-width: 0; }
  .lqa__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .lqa__nav-item { margin: 0; }
  .lqa__nav-btn {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 18px 0;
    display: grid;
    grid-template-columns: 38px 14px 1fr;
    align-items: baseline;
    gap: 0;
    color: var(--lqa-muted);
    transition: color 0.3s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    border-top: 1px solid var(--lqa-hairline);
  }
  .lqa__nav-item:first-child .lqa__nav-btn { border-top: 0; }
  .lqa__nav-num {
    font-family: var(--lqa-num-font);
    font-size: var(--lqa-num-size);
    letter-spacing: 0.05em;
    color: var(--lqa-muted);
    transition: color 0.3s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* The little marker line that draws in to the right of the
     active number — a 10px accent hairline that scales from 0. */
  .lqa__nav-marker {
    width: 10px;
    height: 1px;
    background: var(--lqa-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    align-self: center;
    margin-right: 10px;
  }
  .lqa__nav-q {
    font-family: var(--lqa-q-font);
    font-weight: var(--lqa-q-weight);
    font-size: var(--lqa-q-size);
    line-height: 1.35;
    color: var(--lqa-muted);
    transition: color 0.3s ease;
  }

  /* Hover state — just brighten muted text toward the
     active color. No background shift; the section is
     ultra-lux modern, restraint is the point. */
  .lqa__nav-btn:hover .lqa__nav-num,
  .lqa__nav-btn:hover .lqa__nav-q,
  .lqa__nav-btn:focus-visible .lqa__nav-num,
  .lqa__nav-btn:focus-visible .lqa__nav-q {
    color: var(--lqa-text);
  }
  .lqa__nav-btn:focus-visible { outline: none; }

  /* Active state — number indent shifts right, marker
     line draws in, question text flips to full color. */
  .lqa__nav-btn.is-active .lqa__nav-num {
    color: var(--lqa-accent);
    transform: translateX(2px);
  }
  .lqa__nav-btn.is-active .lqa__nav-q {
    color: var(--lqa-text);
  }
  .lqa__nav-btn.is-active .lqa__nav-marker {
    transform: scaleX(1);
  }

  /* ── Right: answer panel ─────────────────────────── */
  .lqa__panel {
    min-width: 0;
    position: relative;
  }
  .lqa__counter {
    font-family: var(--lqa-num-font);
    font-size: var(--lqa-num-size);
    letter-spacing: 0.1em;
    color: var(--lqa-muted);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .lqa__counter-cur { color: var(--lqa-accent); }

  /* All answers stack at the top-left of the panel. Inactive
     ones are absolutely positioned (out of flow, no layout
     space taken); the active one becomes `position: relative`
     so it sits naturally and defines the container's height.
     JS additionally pins the container's height to the active
     answer's scrollHeight so switching between a short and a
     long answer animates the panel height smoothly. */
  .lqa__answers {
    position: relative;
    transition: height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lqa__answer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lqa__answer.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .lqa__answer-q {
    font-family: var(--lqa-heading-font);
    font-weight: var(--lqa-heading-weight);
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.15;
    letter-spacing: var(--lqa-heading-letter-spacing);
    margin: 0 0 20px;
    color: var(--lqa-text);
  }
  .lqa__answer-a {
    font-family: var(--lqa-a-font);
    font-weight: var(--lqa-a-weight);
    font-size: var(--lqa-a-size);
    line-height: 1.65;
    color: var(--lqa-muted);
  }
  .lqa__answer-a p:first-child { margin-top: 0; }
  .lqa__answer-a p:last-child  { margin-bottom: 0; }
  .lqa__answer-a a {
    color: var(--lqa-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  /* ── Mobile: hide the split, show the stack ─────── */
  .lqa__stack { display: none; }

  @media (max-width: 899px) {
    .lqa__split { display: none; }
    .lqa__split::before { display: none; }
    .lqa__stack { display: block; }
  }

  /* ── Mobile stack accordion ─────────────────────── */
  .lqa__stack-item {
    border-top: 1px solid var(--lqa-hairline);
  }
  .lqa__stack-item:last-child {
    border-bottom: 1px solid var(--lqa-hairline);
  }
  .lqa__stack-q {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 38px 1fr 14px;
    align-items: center;
    gap: 0;
    padding: 22px 0;
    color: var(--lqa-text);
    user-select: none;
  }
  .lqa__stack-q::-webkit-details-marker { display: none; }
  .lqa__stack-q::marker { display: none; }
  .lqa__stack-num {
    font-family: var(--lqa-num-font);
    font-size: var(--lqa-num-size);
    letter-spacing: 0.05em;
    color: var(--lqa-muted);
  }
  .lqa__stack-text {
    font-family: var(--lqa-q-font);
    font-weight: var(--lqa-q-weight);
    font-size: var(--lqa-q-size);
    line-height: 1.35;
  }
  .lqa__stack-toggle {
    color: var(--lqa-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .lqa__stack-toggle svg {
    display: block;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lqa__stack-item[open]:not(.is-closing) .lqa__stack-toggle svg {
    transform: rotate(180deg);
  }

  .lqa__stack-collapse {
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .lqa__stack-item:not([open]) .lqa__stack-collapse {
    height: 0;
  }
  .lqa__stack-a {
    padding: 0 0 22px 38px;
    font-family: var(--lqa-a-font);
    font-weight: var(--lqa-a-weight);
    font-size: var(--lqa-a-size);
    line-height: 1.65;
    color: var(--lqa-muted);
  }
  .lqa__stack-a p:first-child { margin-top: 0; }
  .lqa__stack-a p:last-child  { margin-bottom: 0; }
  .lqa__stack-a a {
    color: var(--lqa-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  /* ── Empty ───────────────────────────────────────── */
  .lqa__empty {
    margin: 0;
    padding: 80px 0;
    text-align: center;
    color: var(--lqa-muted);
    font-family: var(--text-1-font);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  /* ── Reduced motion ──────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .lqa__nav-btn,
    .lqa__nav-num,
    .lqa__nav-marker,
    .lqa__nav-q,
    .lqa__answers,
    .lqa__answer,
    .lqa__stack-collapse,
    .lqa__stack-toggle svg {
      transition: none !important;
    }
  }
/* END_SECTION:faq-editorial */

/* START_SECTION:featured-collections (INDEX:18) */
/* ════════════════════════════════════════════════════════════
     FEATURED COLLECTIONS — class prefix: fcol-*
  */

  /* ── Section shell ──────────────────────────────────
     Same global Layout integration as other collection sections.
     `.shopify-section` grid handles outer width + gutters; we add
     header-matching internal padding (8px → 16px from 1200px). */
  .fcol {
    width: 100%;
    background: var(--fcol-bg);
    color: var(--fcol-text);
    box-sizing: border-box;
    padding-top: var(--fcol-pad-top);
    padding-bottom: var(--fcol-pad-bottom);
    padding-left: 8px;
    padding-right: 8px;
  }
  @media screen and (min-width: 1200px) {
    .fcol {
      padding-left: 16px;
      padding-right: 16px;
    }
  }

  /* ── Section heading ─────────────────────────────────
     Bottega-style: small, uppercase, letter-spaced, centered.
     Sits above the grid with a tight gap to the images so the
     heading reads as a label for the row, not a separate
     content block.

     Flex layout (rather than text-align) lets the h2 shrink-wrap
     to its actual content. Combined with a negative inline-end
     margin equal to the letter-spacing, this trims the invisible
     trailing letter-space that would otherwise pull the visible
     text left of true visual center. */
  .fcol__header {
    display: flex;
    margin: 0 0 var(--fcol-heading-spacing);
  }
  .fcol__header--align-left   { justify-content: flex-start; }
  .fcol__header--align-center { justify-content: center;     }
  .fcol__header--align-right  { justify-content: flex-end;   }

  .fcol__heading {
    margin: 0;
    /* Trim trailing letter-spacing so the layout box matches the
       visible glyphs. Without this, centering aligns to a phantom
       trailing space, making the text appear ~half a letter-space
       off to the left. */
    margin-inline-end: calc(var(--fcol-heading-letter-spacing) * -1);
    font-family: var(--fcol-heading-font);
    font-weight: var(--fcol-heading-weight);
    font-size: var(--fcol-heading-size);
    letter-spacing: var(--fcol-heading-letter-spacing);
    text-transform: var(--fcol-heading-transform);
    color: var(--fcol-heading-color);
    line-height: 1.2;
  }

  /* ── Grid ────────────────────────────────────────────
     Equal-width columns derived from block count via the
     `--fcol-cols` custom property. Tight gap by default
     (Bottega is ~3px), configurable. */
  .fcol__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--fcol-cols, 3), minmax(0, 1fr));
    gap: var(--fcol-tile-gap);
  }

  /* Responsive collapse — at most 2 columns on tablet. */
  @media screen and (max-width: 1023px) {
    .fcol__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Mobile variant 1: horizontal scroll-snap row. The scroll
     variant is the modern luxury default — fixed-width tiles
     snap to start, the next tile peeks at the right edge to
     signal swipability. Gated by data-mobile-scroll="true". */
  @media screen and (max-width: 600px) {
    .fcol[data-mobile-scroll="true"] .fcol__grid {
      /* Reset the desktop grid; switch to horizontal flex scroll. */
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      overflow-y: hidden;
      /* Snap each tile to the start of the scroll port — feels
         tactile, like flipping cards. */
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      /* Hide the scrollbar — the peek of the next tile is the
         visual scroll affordance. */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .fcol[data-mobile-scroll="true"] .fcol__grid::-webkit-scrollbar {
      display: none;
    }
    .fcol[data-mobile-scroll="true"] .fcol__tile {
      /* Fixed flex basis sized as a % of the scroll port. With a
         mobile_tile_width of 85, ~15% of the next tile peeks
         after the gap is accounted for — enough to read as
         "more available", not enough to feel cramped. */
      flex: 0 0 var(--fcol-mobile-tile-width);
      scroll-snap-align: start;
    }
  }

  /* Mobile variant 2: single column stack. */
  @media screen and (max-width: 600px) {
    .fcol[data-mobile-scroll="false"] .fcol__grid {
      grid-template-columns: 1fr;
    }
  }

  /* ── Tile ────────────────────────────────────────────
     The grid cell + interaction surface. */
  .fcol__tile {
    list-style: none;
    margin: 0;
    position: relative;
  }
  .fcol__link {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  /* ── Media (image wrapper) ───────────────────────────
     Aspect-ratio'd container, overflow hidden so the hover
     zoom doesn't leak. Background fill handles transparency
     and missing images. */
  .fcol__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--fcol-image-ratio);
    overflow: hidden;
    background: var(--fcol-image-bg);
  }

  .fcol__image {
    width: 100%;
    height: 100%;
    object-fit: var(--fcol-image-fit);
    display: block;
  }
  .fcol__image--placeholder {
    background: var(--fcol-image-bg);
  }

  /* ── Scrim & overlay content (overlay variant only) ──
     Bottom-up gradient over the image to keep the label
     legible against any photograph. Opacity is driven from
     a CSS variable so theme-editor changes still update.

     z-index note: the image inside .csp-image-frame is
     `position: relative; z-index: 2` (set in critical.css),
     so the scrim and overlay must sit at z-index 3+ to render
     on top of it. Without this, the label is hidden behind
     the photograph. */
  .fcol__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, var(--fcol-scrim-opacity)) 0%,
      rgba(0, 0, 0, 0) 55%
    );
    pointer-events: none;
    z-index: 3;
  }

  .fcol__overlay-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--fcol-overlay-padding);
    color: var(--fcol-overlay-text);
    text-align: center;
    z-index: 4;
  }

  /* ── Label ───────────────────────────────────────────
     Small uppercase label beneath each tile (or overlaid).
     Matches the heading typography for visual rhythm. */
  .fcol__label {
    display: inline-block;
    margin-top: var(--fcol-label-spacing);
    align-self: center;
    /* Trim trailing letter-spacing so the inline-block box matches
       visible glyphs — keeps the label optically centered with the
       image above it. Same fix as the section heading. */
    margin-inline-end: calc(var(--fcol-label-letter-spacing) * -1);
    font-family: var(--fcol-label-font);
    font-weight: var(--fcol-label-weight);
    font-size: var(--fcol-label-size);
    letter-spacing: var(--fcol-label-letter-spacing);
    text-transform: var(--fcol-label-transform);
    color: var(--fcol-label-color);
  }

  .fcol__label--overlay {
    color: inherit;
    margin-top: 0;
  }

  /* Label alignment variants — gated by data-label-position on
     the section so the static stylesheet covers every case. */
  .fcol[data-label-position="left"] .fcol__label {
    align-self: flex-start;
    text-align: left;
  }
  .fcol[data-label-position="right"] .fcol__label {
    align-self: flex-end;
    text-align: right;
  }

  /* ── Empty state ──────────────────────────────────── */
  .fcol__empty {
    text-align: center;
    padding: 80px 20px;
    font-family: var(--text-1-font);
    color: #888888;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
/* END_SECTION:featured-collections */

/* START_SECTION:footer-localization (INDEX:19) */
/* ════════════════════════════════════════════════════════════
     FOOTER LOCALIZATION — class prefix: loc-*
  */

  .loc {
    background: var(--floc-bg);
    color: var(--floc-text);
    padding-top: var(--floc-pad-top);
    padding-bottom: var(--floc-pad-bottom);
    box-sizing: border-box;
  }

  /* Top divider — full-width hairline above the trigger pill */
  .loc__divider {
    display: block;
    border: 0;
    margin: 0 0 var(--floc-pad-top);
    padding: 0;
    height: 1px;
    background-color: var(--floc-divider);
  }
  /* If top divider is shown, padding-top is absorbed into the
     divider's margin-bottom so the line sits at the visual top
     edge of the section. */
  .loc:has(.loc__divider) {
    padding-top: 0;
  }

  /* Inner — Layout-constrained container, recreates .shopify-section
     central column. Trigger pill is alignable left/center/right via
     a flex container.

     When social icons are also present (.loc--with-socials), the
     container becomes a two-element layout:
       • align-left  → trigger left,  socials right
       • align-right → socials left,  trigger right (row-reverse)
       • align-center → trigger top,  socials below (column stack) */
  .loc__inner {
    width: var(--content-width);
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  @media (min-width: 1200px) {
    .loc__inner { padding: 0 16px; }
  }
  .loc--align-center .loc__inner { justify-content: center; }
  .loc--align-right  .loc__inner { justify-content: flex-end; }

  /* Socials present: two-element layout. */
  .loc--with-socials.loc--align-left  .loc__inner,
  .loc--with-socials.loc--align-right .loc__inner {
    justify-content: space-between;
  }
  .loc--with-socials.loc--align-right .loc__inner {
    flex-direction: row-reverse;
  }
  .loc--with-socials.loc--align-center .loc__inner {
    flex-direction: column;
    gap: 16px;
  }

  /* ── Social icons row ───────────────────────────────── */
  .loc__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .loc__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--floc-text);
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .loc__social:hover { opacity: 0.55; }
  .loc__social:focus-visible {
    outline: 1px solid var(--floc-text);
    outline-offset: 2px;
  }
  .loc__social svg { display: block; }

  /* ── Trigger pill ───────────────────────────────────── */
  .loc__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--floc-divider);
    border-radius: 0;
    padding: 12px 16px;
    font-family: var(--text-4-font);
    font-weight: var(--text-4-weight);
    font-size: 13px;
    color: var(--floc-text);
    cursor: pointer;
    line-height: 1.2;
    transition: border-color 0.2s ease;
  }
  .loc__trigger:hover {
    border-color: var(--floc-text);
    /* Reset any global Buttons hover effects (lift, scale, glow,
       fade, fill) that target button[type="submit"] — not needed
       here since trigger is type="button", but kept for safety. */
    transform: none;
    box-shadow: none;
    opacity: 1;
  }
  .loc__trigger:focus-visible {
    outline: 1px solid var(--floc-text);
    outline-offset: 2px;
  }
  .loc__trigger-icon { flex-shrink: 0; opacity: 0.7; }
  .loc__trigger-text { white-space: nowrap; }
  .loc__trigger-chevron { flex-shrink: 0; opacity: 0.55; margin-left: 4px; }

  @media (max-width: 600px) {
    /* On mobile the inner is a vertical stack: trigger on top
       (full-width pill for easier tap), socials below (centered
       icon row). Alignment + flex-direction overrides from desktop
       are intentionally reset here — mobile always uses the same
       stacked layout regardless of `alignment` setting. */
    .loc__inner,
    .loc--with-socials .loc__inner,
    .loc--with-socials.loc--align-right .loc__inner,
    .loc--with-socials.loc--align-center .loc__inner {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 12px;
    }
    .loc__trigger {
      display: flex;
      width: 100%;
      justify-content: space-between;
      padding: 14px 16px;
    }
    .loc__trigger-text {
      white-space: normal;
      flex: 1;
      text-align: left;
    }
    .loc__socials {
      justify-content: center;
      gap: 8px;
    }
  }

  /* ── Modal ──────────────────────────────────────────── */
  .loc__modal[hidden] { display: none; }
  .loc__modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Frosted-glass backdrop. Falls back to a heavier solid dim
     on browsers without backdrop-filter support. */
  .loc__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.55);
    cursor: pointer;
    animation: loc-fade-in 0.4s ease;
  }
  @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .loc__backdrop {
      background: rgba(20, 20, 20, 0.32);
      backdrop-filter: blur(24px) saturate(120%);
      -webkit-backdrop-filter: blur(24px) saturate(120%);
    }
  }

  .loc__panel {
    position: relative;
    background: #ffffff;
    color: #111111;
    width: min(92vw, 480px);
    max-height: 82vh;
    overflow-y: auto;
    padding: 40px 32px 32px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), 0 0 1px rgba(0, 0, 0, 0.1);
    animation: loc-slide-up 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    box-sizing: border-box;
  }
  @media (max-width: 600px) {
    .loc__panel {
      width: 100vw;
      height: 100dvh;
      max-height: none;
      padding: 24px 20px;
    }
  }

  @keyframes loc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes loc-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .loc__backdrop,
    .loc__panel { animation-duration: 0.01s; }
  }

  .loc__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: #111;
    line-height: 0;
  }
  .loc__close:hover { color: #666; }
  .loc__close:focus-visible {
    outline: 1px solid #111;
    outline-offset: 2px;
  }

  .loc__title {
    font-family: var(--text-1-font);
    font-weight: var(--text-1-weight);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 28px;
    color: #111;
  }

  .loc__group { margin-bottom: 12px; }
  .loc__group:last-child { margin-bottom: 0; }

  .loc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: transparent;
    border: 1px solid #e8e8e8;
    border-radius: 0;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    transition: border-color 0.2s ease;
  }
  .loc__row:hover { border-color: #111; }
  .loc__row:focus-visible {
    outline: 1px solid #111;
    outline-offset: 2px;
  }
  .loc__group[data-open] .loc__row { border-color: #111; }

  .loc__row-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
  }
  .loc__row-label {
    font-family: var(--text-1-font);
    font-weight: var(--text-1-weight);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #888;
  }
  .loc__row-value {
    font-family: var(--text-4-font);
    font-weight: var(--text-4-weight);
    font-size: 14px;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .loc__row-chevron {
    flex-shrink: 0;
    color: #111;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .loc__group[data-open] .loc__row-chevron {
    transform: rotate(180deg);
  }

  /* Inline dropdown — animated soft expand. List has its own
     full border + 8px gap above so it reads as a distinct
     element rather than fusing with the row's bottom border. */
  .loc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .loc__group[data-open] .loc__list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid #e8e8e8;
    margin-top: 8px;
  }

  .loc__list-item { border-bottom: 1px solid #f0f0f0; }
  .loc__list-item:last-child { border-bottom: 0; }
  .loc__list-item form { margin: 0; }

  /* Each option is a <button type="submit"> inside its own form,
     which means the global Buttons rule in critical.css applies
     primary-button styling. We explicitly reset those properties
     plus opt out of the global text-effect via the
     data-button-text-effect="false" attribute on the markup. */
  .loc__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 14px 20px;
    cursor: pointer;
    text-align: left;
    font-family: var(--text-4-font);
    font-weight: var(--text-4-weight);
    font-size: 13px;
    color: #444;
    line-height: 1.3;
    overflow: visible;
    position: static;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .loc__option:hover {
    background-color: #f6f6f6;
    color: #111;
    /* Reset global Buttons hover effects (scale, lift, glow, fade) */
    transform: none;
    box-shadow: none;
    opacity: 1;
  }
  /* Suppress the global button hover-fill effect — settings_schema's
     button_hover_effect (fill_left, fill_bottom, etc.) attaches a
     ::before pseudo-element that slides across submit buttons. Our
     loc__option <button type="submit"> matches that global rule, so
     without this override the black sliding fill animates across the
     localization picker options on hover. */
  .loc__option::before,
  .loc__option::after,
  .loc__option:hover::before,
  .loc__option:hover::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    transform: none !important;
  }
  /* The .is-current dot DOES use ::before legitimately — we re-enable
     it specifically for that modifier so the suppression above
     doesn't kill the active-state indicator. */
  .loc__option.is-current::before {
    display: inline-block !important;
    content: '' !important;
    width: 6px;
    height: 6px;
    background: #111 !important;
    border-radius: 50%;
    margin-right: 4px;
    flex-shrink: 0;
    transform: none !important;
  }
  .loc__option:focus-visible {
    outline: 1px solid #111;
    outline-offset: -1px;
  }
  .loc__option.is-current {
    color: #111;
    font-weight: var(--text-2-weight);
  }
  .loc__option-name { flex: 1; }
  .loc__option-meta {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }
/* END_SECTION:footer-localization */

/* START_SECTION:footer-navigation (INDEX:20) */
/* ════════════════════════════════════════════════════════════
     FOOTER NAVIGATION — class prefix: fnav-*
  */

  /* ── Section shell ──────────────────────────────────
     Full-width parent for edge-to-edge background. Vertical
     padding gives the section breathing room. When the optional
     top divider is enabled, padding-top is removed (the divider's
     margin-bottom takes its place so the line sits at the very
     top edge of the section). */
  .fnav {
    background: var(--fnav-bg);
    color: var(--fnav-text);
    padding-top: var(--fnav-pad-top);
    padding-bottom: var(--fnav-pad-bottom);
    box-sizing: border-box;
  }
  .fnav--has-top-divider { padding-top: 0; }

  /* Full-width hairline divider — sits OUTSIDE .fnav__inner so
     it spans the viewport edge to edge. */
  .fnav__divider {
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    height: 1px;
    background-color: var(--fnav-divider);
  }
  .fnav__divider--top {
    margin-bottom: var(--fnav-pad-top);
  }

  /* ── Inner — Layout-constrained content column ────────
     Width tracks the global Layout settings via --content-width
     (defined on .shopify-section, inherited). 8px → 16px internal
     padding matches the global header for edge alignment. */
  .fnav__inner {
    width: var(--content-width);
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
  }
  @media (min-width: 1200px) {
    .fnav__inner { padding: 0 16px; }
  }

  /* ── Grid (menu columns) ────────────────────────────
     Desktop: one column per block. Tablet: 2 columns. Mobile:
     single column with hairline borders between rows so the
     accordion reads as a list of disclosable items. */
  .fnav__grid {
    display: grid;
    grid-template-columns: repeat(var(--fnav-cols, 1), minmax(0, 1fr));
    gap: 32px;
  }
  @media (max-width: 1023px) and (min-width: 601px) {
    .fnav__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 32px 24px;
    }
  }
  @media (max-width: 600px) {
    .fnav__grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .fnav__column {
      border-bottom: 1px solid var(--fnav-divider);
    }
  }

  /* ── Column heading (summary element) ─────────────────
     Strip the native disclosure marker and lay it out as a flex
     row so the chevron can sit at the right. On desktop this
     element is non-interactive (JS prevents toggle, cursor is
     default); on mobile it's the tap target. */
  .fnav__heading {
    font-family: var(--fnav-heading-font);
    font-weight: var(--fnav-heading-weight);
    font-size: var(--fnav-heading-size);
    text-transform: var(--fnav-heading-transform);
    letter-spacing: var(--fnav-heading-letter-spacing);
    color: var(--fnav-text);
    margin: 0 0 14px;
    cursor: default;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }
  .fnav__heading::-webkit-details-marker { display: none; }
  .fnav__heading::marker { display: none; }

  .fnav__chevron {
    display: none;
    color: currentColor;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    line-height: 0;
  }

  /* Mobile-only accordion behavior */
  @media (max-width: 600px) {
    .fnav__heading {
      padding: 18px 0;
      margin-bottom: 0;
      cursor: pointer;
    }
    .fnav__chevron { display: inline-block; }
    /* Chevron rotation is tied to the JS-managed .is-expanded class
       (not the [open] attribute) so it rotates synchronously with the
       start of the open/close animation. The [open] attribute lags on
       close — it isn't removed until the height animation finishes —
       which would leave the chevron pointing the wrong way during the
       collapse. */
    .fnav__column.is-expanded .fnav__chevron { transform: rotate(180deg); }
    .fnav__column-content { padding: 0 0 18px; }
  }

  /* ── Links list ─────────────────────────────────────── */
  .fnav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fnav-link-gap);
  }

  .fnav__link {
    font-family: var(--fnav-link-font);
    font-weight: var(--fnav-link-weight);
    font-size: var(--fnav-link-size);
    color: var(--fnav-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
  }
  .fnav__link:hover {
    color: var(--fnav-text);
  }
  @media (hover: none) {
    .fnav__link:hover { color: var(--fnav-muted); }
  }

  .fnav__empty {
    margin: 0;
    font-family: var(--text-1-font);
    font-size: 11px;
    color: var(--fnav-muted);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  /* ── Wordmark block ─────────────────────────────────
     Edge-to-edge giant text or SVG, mirroring the header's
     hero-logo full-width pattern. Sits OUTSIDE .fnav__inner
     so it ignores the Layout content-width constraint and
     spans the full viewport (.fnav already has `full-width`).

     overflow-x: clip keeps the page itself scrollable even
     if the text is a long word that would otherwise push
     past the viewport edge at the largest clamp() size. */
  .fnav__wordmark {
    width: 100%;
    padding: var(--fnav-wm-pad-top-desktop, 40px) 0 var(--fnav-wm-pad-bottom-desktop, 40px);
    box-sizing: border-box;
    text-align: center;
    line-height: 0.9;
    overflow-x: clip;
  }
  /* Mobile breakpoint matches the section's own padding switch
     (.fnav --fnav-pad-top swap at max-width: 1023px above). */
  @media (max-width: 1023px) {
    .fnav__wordmark {
      padding: var(--fnav-wm-pad-top-mobile, 20px) 0 var(--fnav-wm-pad-bottom-mobile, 20px);
    }
  }

  /* When a wordmark block is present it sits at the very bottom of
     the section, which means the section's own `padding-bottom`
     (--fnav-pad-bottom) gets added below the wordmark's own
     padding-bottom — making the wordmark's "Padding bottom"
     controls feel inert (you can never reach 0 actual space).
     Zero out the section's bottom padding when a wordmark exists
     so the block's setting fully owns the bottom edge. Class is
     emitted by Liquid; :has() selector is a fallback for cases
     where the Liquid markup hasn't been re-rendered yet. */
  .fnav--has-wordmark,
  .fnav:has(.fnav__wordmark) {
    padding-bottom: 0;
  }

  /* Image / SVG variant — fills the viewport edge to edge,
     height auto to preserve aspect ratio. display: block
     removes the baseline gap a default inline <img> creates. */
  .fnav__wordmark-image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Text variant — fluid type with clamp(). 12vw is the sweet
     spot for a single short brand word filling the viewport
     at any size; the 28px floor keeps it legible on tiny
     screens; the 280px ceiling stops it from getting absurd
     on ultra-wide desktops. white-space: nowrap forces the
     wordmark onto a single line — long phrases will overflow
     into the overflow-x: clip region rather than wrapping. */
  .fnav__wordmark-text {
    display: inline-block;
    font-family: var(--fnav-wm-font, var(--fnav-heading-font));
    font-weight: var(--fnav-wm-weight, var(--fnav-heading-weight));
    font-size: clamp(28px, 12vw, 280px);
    text-transform: var(--fnav-wm-transform, uppercase);
    letter-spacing: var(--fnav-wm-letter-spacing, 0em);
    color: var(--fnav-wm-color, var(--fnav-text));
    white-space: nowrap;
    /* Trim trailing letter-spacing so the optical center matches
       the geometric center — same trick the section heading uses. */
    margin-inline-end: calc(var(--fnav-wm-letter-spacing, 0em) * -1);
  }
/* END_SECTION:footer-navigation */

/* START_SECTION:footer (INDEX:21) */
.site-footer { background-color: var(--ft-bg); color: var(--ft-text); }
  .site-footer a { color: inherit; text-decoration: none; }
  /* Container recreates the .shopify-section content column inside the
     full-width footer. Width = --content-width (inherited from
     .shopify-section, which computes it from the global Layout
     settings: --page-width and --page-margin). Internal 8px → 16px
     padding matches the global header for edge alignment across the
     entire site. */
  .site-footer__container {
    width: var(--content-width);
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
  }
  @media (min-width: 1200px) {
    .site-footer__container { padding: 0 16px; }
  }

  /* Bottom bar — the bottom-grid lives inside the padded container so
     its rendered width matches the global content column. The top
     border on the grid serves as a hairline divider above the bar. */
  .site-footer__bottom { padding: 0 0 28px; }
  @media (min-width: 750px) { .site-footer__bottom { padding: 0 0 32px; } }
  /* Full-width hairline divider — sits OUTSIDE the layout-constrained
     container so it visually extends edge-to-edge across the viewport,
     even though the content above and below stays within the global
     content column. */
  .site-footer__divider {
    display: block;
    border: 0;
    padding: 0;
    height: 1px;
    background-color: var(--ft-divider);
    margin: 0 0 24px;
  }
  @media (min-width: 750px) {
    .site-footer__divider { margin: 0 0 32px; }
  }

  .site-footer__bottom-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    text-align: center;
  }
  @media (min-width: 750px) {
    .site-footer__bottom-grid {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      text-align: left;
    }
  }
  .site-footer__copyright { font-family: var(--ft-bottom-font); font-weight: var(--ft-bottom-weight); font-size: var(--ft-bottom-size); text-transform: var(--ft-bottom-transform); letter-spacing: var(--ft-bottom-spacing); color: var(--ft-muted); }
  /* Bottom-links list spreads to the row edges on mobile, centers content
     within so it visually breathes inside the padding. */
  .site-footer__bottom-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
  .site-footer__bottom-link { font-family: var(--ft-bottom-font); font-weight: var(--ft-bottom-weight); font-size: var(--ft-bottom-size); text-transform: var(--ft-bottom-transform); letter-spacing: var(--ft-bottom-spacing); color: var(--ft-muted); }
  .site-footer__bottom-link:hover { color: var(--ft-text); }
  @media (hover: none) { .site-footer__bottom-link:hover { color: var(--ft-muted); } }
  /* bottom-right contains only payment icons now (locale/currency
     selectors removed). Centered on mobile, right-aligned on desktop. */
  .site-footer__bottom-right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  @media (min-width: 750px) {
    .site-footer__bottom-right {
      justify-content: flex-end;
      width: auto;
    }
  }
  .site-footer__payment { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
  .site-footer__payment-icon { display: block; height: 22px; width: auto; }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:22) */
/* Shopify wraps every section in a .shopify-section div. For the
     header section, Shopify adds inline styles (position:absolute;
     z-index:10) that create a stacking context — and that traps the
     mega-menu panel inside z=10 against page content, no matter how
     high we set the inner z-indexes. The :has() selector lets us
     target THAT outer wrapper from within this section's stylesheet
     so we can override the inline z-index with a high value via
     !important. Without this, product-card nav arrows (z:10) and
     other page-content positioned elements paint above the panel. */
  .shopify-section:has(> .header-wrapper) {
    z-index: 100 !important;
  }

  .header-wrapper {
    background-color: var(--header-bg-color, var(--color-background));
    box-shadow: inset 0 calc(var(--header-border-thickness, 0px) * -1) 0 0 var(--header-border-color, #000000);
    width: 100%;
    position: relative;
    /* z-index 100 puts the header (and its mega-menu children) above
       page content. Sections like product-grid have their own
       z-indexed elements (e.g., product-card nav arrows at z:10) that
       would otherwise paint over the mega-menu panel when it expands
       down past the header. Drawers use 1000+, so 100 stays well
       below those. */
    z-index: 100;
  }

  /* Hamburger / close icon fade swap */
  .header__menu-toggle {
    position: relative;
    width: var(--header-icon-size, 20px);
    height: var(--header-icon-size, 20px);
  }

  @media screen and (min-width: 1200px) {
    .header__menu-toggle {
      width: var(--header-icon-size-desktop, 24px);
      height: var(--header-icon-size-desktop, 24px);
    }
  }

  .header__menu-icon--bars,
  .header__menu-icon--close {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.2s ease;
  }

  .header__menu-icon--close {
    opacity: 0;
  }

  .header-wrapper--drawer-open .header__menu-toggle .header__menu-icon--bars {
    opacity: 0;
  }

  .header-wrapper--drawer-open .header__menu-toggle .header__menu-icon--close {
    opacity: 1;
  }

  /* Keep old menu-line rules for desktop drawer (no show-header mode) */
  .menu-line {
    transition: transform 0.25s ease;
    transform-origin: center;
  }

  .header__menu-toggle.is-animating .menu-line--top {
    transform: translateY(5px);
  }

  .header__menu-toggle.is-animating .menu-line--bottom {
    transform: translateY(-5px);
  }

  /* Transparent header */
  .header-wrapper--transparent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Match base .header-wrapper z-index of 100 so the transparent
       variant doesn't drop the header back into low-stack territory.
       Without this, the more-specific --transparent modifier wins
       the cascade with z:10, the header's stacking context drops,
       and child elements (mega-menu panel, etc.) lose their stack
       authority over page-content z-indexed elements like product-
       card nav arrows. */
    z-index: 100;
    background-color: transparent !important;
    --header-bg-color: transparent;
    box-shadow: none;
    color: var(--header-transparent-color, #ffffff);
    /* Badge state for transparent: badge fills with the icon color
       (light, matching --header-transparent-color) and the count text
       inside is dark for contrast. Inverse of the default solid-header
       state. */
    --header-badge-bg: var(--header-transparent-color, #ffffff);
    --header-badge-color: var(--color-foreground, #111);
  }

  .header-wrapper--transparent .header__logo,
  .header-wrapper--transparent .header__title,
  .header-wrapper--transparent .header__nav-link,
  .header-wrapper--transparent .header__menu-toggle,
  .header-wrapper--transparent .header__cart,
  .header-wrapper--transparent .header__account,
  .header-wrapper--transparent .header__wishlist,
  .header-wrapper--transparent .header__search {
    color: var(--header-transparent-color, #ffffff);
  }

  /* Transparent header hover background — DESKTOP ONLY.
     Gated behind min-width: 750px because on mobile/touch devices hover
     either doesn't exist or fires unintentionally (sticky hover after
     tap), which would flash the header bg every time a user taps
     anywhere in the header area. Desktop mouse users get the clean
     "show bg on header hover" affordance; mobile users see the clean
     transparent header until they scroll or open a menu. */
  @media (min-width: 750px) {
    /* Sync bg fade-out with the mega menu close timing:
       - Mega menu has a 150ms "scheduleClose" timer (in _header-menu.liquid)
         and a 0.25s opacity transition, so total close = 150ms wait + 250ms fade.
       - We mirror that here so when the user moves the mouse off the header
         area, the bg starts fading at the SAME moment the mega menu does,
         and they both finish together. The fade-IN stays snappy (no delay,
         0.25s) by overriding the transition inside the :hover rules below. */
    .header-wrapper--transparent {
      transition: background-color 0.25s ease 0.15s;
    }

    /* Same sync for the descendant elements (logo/title/nav-link/icons) whose
       color flips with the bg reveal — they should fade back together too. */
    .header-wrapper--transparent .header__logo,
    .header-wrapper--transparent .header__title,
    .header-wrapper--transparent .header__nav-link,
    .header-wrapper--transparent .header__menu-toggle,
    .header-wrapper--transparent .header__cart,
    .header-wrapper--transparent .header__account,
    .header-wrapper--transparent .header__wishlist,
    .header-wrapper--transparent .header__search {
      transition: color 0.25s ease 0.15s;
    }

    /* Transparent header: whole header shows bg on nav link hover */
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) {
      background-color: var(--header-bg-color, var(--color-background)) !important;
      transition: background-color 0.25s ease;
      /* Badge state for revealed-bg: revert to default — dark badge with
         light text — matching the icon color flip back to --color-foreground
         that the rule below applies. */
      --header-badge-bg: var(--color-foreground, #111);
      --header-badge-color: var(--color-background, #fff);
    }
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__logo,
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__title,
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__nav-link {
      color: var(--color-foreground);
      transition: color 0.25s ease;
    }
    /* Icons follow their own per-icon override → global Icon color
       → foreground cascade (matches the base .header__cart / etc.
       rules), instead of being force-flipped to --color-foreground.
       This way the merchant's Icon color setting and any per-icon
       color setting are respected on bg reveal. */
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__menu-toggle {
      color: var(--header-icon-color, var(--color-foreground));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__cart {
      color: var(--header-cart-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__account {
      color: var(--header-account-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__wishlist {
      color: var(--header-wishlist-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__desktop-inline-top .header__nav-link:hover) .header__search {
      color: var(--header-search-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }

    /* Transparent header: show bg on any header hover (matches logo swap for image,
       matches title color behavior for text, matches SVG color for svg) */
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover {
      background-color: var(--header-bg-color, var(--color-background)) !important;
      transition: background-color 0.25s ease;
      /* Same badge flip as the nav-link-hover variant above. */
      --header-badge-bg: var(--color-foreground, #111);
      --header-badge-color: var(--color-background, #fff);
    }
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__logo,
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__title {
      color: var(--color-foreground);
      transition: color 0.25s ease;
    }
    /* Icons respect their per-icon override → global Icon color
       cascade, same fix as the nav-link-hover variant above. */
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__menu-toggle {
      color: var(--header-icon-color, var(--color-foreground));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__cart {
      color: var(--header-cart-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__account {
      color: var(--header-account-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__wishlist {
      color: var(--header-wishlist-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__search {
      color: var(--header-search-color, var(--header-icon-color, var(--color-foreground)));
      transition: color 0.25s ease;
    }
    /* Hero SVG title — when hero logo is enabled with SVG source, the
       broad header-hover rule above would flip its color to foreground
       briefly during collapse animation when the cursor crosses into
       the header hover zone, causing a visible flicker. Keep the hero
       title on the transparent text color throughout. The
       .header__logo-hover-clone (the small text shown when hovering
       header bar above the giant text) is excluded — it should still
       flip to foreground via the general rule above.
       Scoped via .header__logo--has-hero-svg so this only applies to
       the actual SVG hero, not to text logos that happen to have the
       hero feature enabled at the section level. */
    .header-wrapper--transparent.header-wrapper--has-hero-logo:has(.header__logo--has-hero-svg):hover .header__title:not(.header__logo-hover-clone) {
      color: var(--header-transparent-color, #ffffff);
    }
    /* Nav links use the inline menu's own text color when the
       header bg reveals on hover — matching the scrolled-up state
       so revealed-bg + revealed-link-color stay visually paired.
       The .header__nav in the chain is needed to beat the base
       transparent rule's specificity (which uses :not() and a
       three-class chain). */
    .header-wrapper--transparent:has(.header__logo-image, .header__title, .header__logo-svg):hover .header__nav .header__nav-link {
      color: var(--inline-nav-text-color, var(--color-foreground));
      transition: color 0.2s ease;
    }
  }

  /* Transparent header: show background when scrolling up */
  .header-wrapper--transparent.header-wrapper--scrolled-up {
    background-color: var(--header-transparent-scroll-bg, var(--header-bg-color, var(--color-background))) !important;
    transition: background-color 0.3s ease;
    /* Badge state for scrolled-up: revert to default — dark badge with
       light text — because the icons themselves switch back to dark
       (rule below) for legibility against the revealed light header bg. */
    --header-badge-bg: var(--color-foreground, #111);
    --header-badge-color: var(--color-background, #fff);
  }
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__logo,
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__title,
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__nav-link {
    color: var(--color-foreground);
    transition: color 0.3s ease;
  }
  /* Icons respect the per-icon override → global Icon color
     cascade in the scrolled-up state, same fix as the
     hover-reveal variants above. */
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__menu-toggle {
    color: var(--header-icon-color, var(--color-foreground));
    transition: color 0.3s ease;
  }
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__cart {
    color: var(--header-cart-color, var(--header-icon-color, var(--color-foreground)));
    transition: color 0.3s ease;
  }
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__account {
    color: var(--header-account-color, var(--header-icon-color, var(--color-foreground)));
    transition: color 0.3s ease;
  }
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__wishlist {
    color: var(--header-wishlist-color, var(--header-icon-color, var(--color-foreground)));
    transition: color 0.3s ease;
  }
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__search {
    color: var(--header-search-color, var(--header-icon-color, var(--color-foreground)));
    transition: color 0.3s ease;
  }

  /* Transparent header — overlay state (NOT scrolled-up).
     While the header is sitting transparent over a hero image, the
     inline nav links use the section's "Transparent text/icon color"
     instead of the menu block's "Text color". The thinking: when
     a transparent header is configured, the merchant has already
     made a deliberate decision about what color reads well on top
     of their hero — and that decision should win for the brief
     moment the header is in its transparent state.

     Cascade: --header-transparent-color → --inline-nav-text-color
     → --color-foreground. The block's text_color stays in the
     fallback chain so it kicks in if the merchant didn't set the
     transparent color but did set the block color.

     The :not(--scrolled-up) guard hands control off to the
     scrolled-up rule below the moment the user starts scrolling
     — at which point the transparent backdrop is replaced by a
     solid background and the transparent color no longer applies. */
  .header-wrapper--transparent:not(.header-wrapper--scrolled-up) .header__nav .header__nav-link {
    color: var(--header-transparent-color, var(--inline-nav-text-color, var(--color-foreground)));
  }

  /* Scrolled-up state: when the merchant has set the inline menu block's
     "Text color", use it on level-1 nav links (overrides the generic
     --color-foreground applied by the rule above). The --inline-nav-text-color
     variable is set inline on the <nav class="header__nav"> element from
     the inline-menu block when b.text_color is filled in; otherwise the
     fallback keeps the --color-foreground behavior unchanged. */
  .header-wrapper--transparent.header-wrapper--scrolled-up .header__nav .header__nav-link {
    color: var(--inline-nav-text-color, var(--color-foreground));
  }

  /* Transparent header: suppress bottom-row background, border, and shadow so
     the translucent look extends through any bottom row. The !important on
     border-top-color is needed to beat the later .header__bottom-row.header__mobile-only
     rule which uses the border-top shorthand (same specificity, later wins
     without !important — which would paint a visible 1px line across the
     middle of transparent headers that have a mobile bottom row). */
  .header-wrapper--transparent .header__bottom-row {
    background-color: transparent;
    border-top-color: transparent !important;
    box-shadow: none;
  }

  header {
    --nav-cutoff: 24px;
    height: var(--header-height, 80px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    max-width: var(--page-width, 1600px);
    margin: 0 auto;
    padding: 0 8px;
  }

  @media screen and (min-width: 1200px) {
    header {
      padding: 0 16px;
    }
  }

  /* When logo and menu share a side, give that side more room — desktop only */
  @media screen and (min-width: 1200px) {
    header.header--shared-left {
      grid-template-columns: auto auto 1fr;
    }

    header.header--shared-right {
      grid-template-columns: 1fr auto auto;
    }
  }

  .header__left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-width: 0;
  }

  .header__center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    min-width: 0;
  }

  .header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    min-width: 0;
  }

  /* Global icon size and stroke */
  .header__cart-icon svg,
  .header__account-icon svg,
  .header__wishlist-icon svg,
  .header__search-icon svg,
  .header__menu-icon {
    width: var(--header-icon-size, 20px);
    height: var(--header-icon-size, 20px);
    stroke-width: var(--header-icon-stroke, 1.5);
  }

  @media screen and (min-width: 1200px) {
    .header__cart-icon svg,
    .header__account-icon svg,
    .header__wishlist-icon svg,
    .header__search-icon svg,
    .header__menu-icon {
      width: var(--header-icon-size-desktop, 24px);
      height: var(--header-icon-size-desktop, 24px);
    }
  }

  /* Cart icon */
  .header__cart {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--header-cart-color, var(--header-icon-color, inherit));
    text-decoration: none;
    gap: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .header__cart-icon {
    display: flex;
    /* positioning context for the absolute count that sits INSIDE the bag */
    position: relative;
  }

  /* Cart count — positioned inside the bag icon's pocket area.
     The icons are 24px viewBox with the "bag body" occupying roughly
     the lower 2/3 (y=9 to y=22). We center the count at ~62% down,
     which lands inside the pocket for all four icon styles (box, basket,
     purse, tote).

     Font-size scales with the icon-size CSS var so the count stays
     proportional to the icon at whatever size the merchant picks.
     ~42% of icon size is the sweet spot: small enough that two digits
     fit inside the pocket, large enough to stay legible. Mobile and
     desktop each use their own icon-size var, matching the same
     breakpoint split as the SVG sizing rules above. */
  .header__cart-count {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--header-icon-size, 20px) * 0.35);
    font-weight: 600;
    line-height: 1;
    color: inherit;
    pointer-events: none;
    /* The SVG uses fill: none / stroke: currentColor, so the bag interior
       is transparent and the count sits on top of whatever's behind the
       header. That's usually fine (solid header bg or page content behind
       a transparent header). No extra background needed — the count reads
       as part of the icon itself. */
  }

  @media screen and (min-width: 1200px) {
    .header__cart-count {
      font-size: calc(var(--header-icon-size-desktop, 24px) * 0.35);
    }
  }

  /* Account icon */
  .header__account {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-account-color, var(--header-icon-color, inherit));
    text-decoration: none;
  }

  .header__account-icon {
    display: flex;
  }

  /* Wishlist icon */
  .header__wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-wishlist-color, var(--header-icon-color, inherit));
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
  }

  .header__wishlist-icon {
    display: flex;
  }

  /* Wishlist count badge — small filled chip floating top-right of icon.
     Uses two CSS vars (--header-badge-bg, --header-badge-color) that
     flip with the header state. Default (solid header): dark badge with
     light text. Transparent state: light badge with dark text. Scrolled-
     up state on transparent: reverts to default. This keeps the badge
     legible on whatever's behind the icon at any given moment.

     The vars are set in the state-specific rule blocks below (transparent
     state, scrolled-up state, etc.), with sensible defaults here. */
  .header__wishlist-count {
    position: absolute;
    /* Position the badge slightly outside the icon's top-right.
       Uses negative offset = small fixed value so the chip "pokes out"
       of the icon corner regardless of icon size. */
    top: -4px;
    right: -6px;
    background: var(--header-badge-bg, var(--color-foreground, #111));
    color: var(--header-badge-color, var(--color-background, #fff));
    /* Badge dimensions scale with icon-size — ~75% of icon-size for the
       circle so the badge stays proportional. Font-size scales at ~37%
       of icon-size which keeps single + double digits readable inside
       the chip. Mobile and desktop each use their own icon-size var,
       same breakpoint split as the SVG sizing rules. */
    min-width: calc(var(--header-icon-size, 20px) * 0.75);
    height: calc(var(--header-icon-size, 20px) * 0.75);
    font-size: calc(var(--header-icon-size, 20px) * 0.37);
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  @media screen and (min-width: 1200px) {
    .header__wishlist-count {
      min-width: calc(var(--header-icon-size-desktop, 24px) * 0.75);
      height: calc(var(--header-icon-size-desktop, 24px) * 0.75);
      font-size: calc(var(--header-icon-size-desktop, 24px) * 0.37);
    }
  }

  /* Search icon */
  .header__search {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-search-color, var(--header-icon-color, inherit));
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .header__search-icon {
    display: flex;
  }

  /* .header__cart-count inherits its color from .header__cart-icon (its
     parent) which in turn inherits from .header__cart (the button). All
     color state changes — transparent default, scrolled-up, drawer-open,
     sticky-revealed, hover-bg-reveal — already apply to .header__cart,
     so the inherit chain keeps the count in sync automatically. No
     dedicated rules needed here. */

  /* Desktop nav: never wrap */
  header .header__nav-list {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--header-icon-color, var(--color-foreground));
  }


  /* --- Responsive utility classes --- */
  .header__desktop-only {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .header__desktop-only {
      display: flex;
    }
  }

  .header__mobile-only {
    display: flex;
  }

  @media screen and (min-width: 1200px) {
    .header__mobile-only {
      display: none;
    }
  }

  /* Desktop inline-top: scrollable nav */
  @media screen and (min-width: 1200px) {
    .header__desktop-inline-top {
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      min-width: 0;
      flex: 1;
    }

    .header__desktop-inline-top::-webkit-scrollbar {
      display: none;
    }

    .header__desktop-inline-top .header__nav {
      display: flex !important;
    }

    .header__desktop-inline-top .header__nav-list {
      flex-wrap: nowrap;
    }

    .header__desktop-inline-top .header__nav-item {
      flex-shrink: 0;
      white-space: nowrap;
    }

    /* logo=center + menu=left or center: nav fills left 1fr, logo stays truly centered */
    header.header--logo-center-nav-left {
      grid-template-columns: 1fr auto 1fr;
    }

    header.header--logo-center-nav-left .header__left {
      overflow: hidden;
      min-width: 0;
      padding-right: var(--nav-cutoff);
    }

    header.header--logo-center-nav-left .header__center > .header__desktop-inline-top {
      display: none;
    }

    header.header--logo-center-nav-left .header__left > .header__desktop-inline-top:not(:first-of-type) {
      display: none;
    }
    header.header--logo-center-nav-right {
      grid-template-columns: 1fr auto 1fr;
    }

    header.header--logo-center-nav-right .header__right {
      overflow: hidden;
      min-width: 0;
      padding-left: var(--nav-cutoff);
    }

    header.header--logo-center-nav-right .header__right > .header__desktop-inline-top:not(.header__desktop-inline-top--center-right) {
      display: none;
    }

    header.header--logo-center-nav-right .header__desktop-inline-top--center-right {
      flex: 1;
      min-width: 0;
      overflow: hidden;
    }

    header.header--logo-center-nav-right .header__desktop-inline-top--center-right .header__nav {
      margin-left: auto;
    }

    header.header--desktop-nav-fill-left .header__center {
      display: none;
    }

    header.header--desktop-nav-fill-left .header__right > .header__desktop-inline-top {
      display: none;
    }

    header.header--desktop-nav-fill-left {
      grid-template-columns: 1fr auto auto;
    }

    header.header--desktop-nav-fill-left .header__desktop-inline-top {
      padding-left: var(--nav-cutoff);
    }

    /* logo=left + menu=left: nav in center col, left-aligned, same cutoff as center/right */
    header.header--desktop-nav-left-fill {
      grid-template-columns: auto 1fr auto;
    }

    header.header--desktop-nav-left-fill .header__center {
      overflow: hidden;
      min-width: 0;
      padding-left: var(--nav-cutoff);
      padding-right: var(--nav-cutoff);
      justify-content: flex-start;
    }

    header.header--desktop-nav-left-fill .header__desktop-inline-top--left {
      min-width: 0;
      flex: 1;
    }

    /* logo=left + menu=center: nav centers between logo and icons */
    header.header--desktop-nav-center-fill {
      grid-template-columns: auto 1fr auto;
    }

    header.header--desktop-nav-center-fill .header__center {
      overflow: hidden;
      min-width: 0;
      padding-left: var(--nav-cutoff);
      padding-right: var(--nav-cutoff);
    }

    header.header--desktop-nav-center-fill .header__desktop-inline-top {
      max-width: 100%;
    }

    header.header--desktop-nav-center-fill .header__desktop-inline-top .header__nav {
      margin: 0 auto;
    }

    header.header--desktop-nav-fill-right .header__right > .header__desktop-only:not(.header__desktop-inline-top) {
      display: none;
    }

    /* logo=left + menu=right: nav in center (1fr), right-aligned, clips at logo and icons */
    header.header--desktop-nav-fill-right-side {
      grid-template-columns: auto 1fr auto;
    }

    header.header--desktop-nav-fill-right-side .header__center {
      overflow: hidden;
      min-width: 0;
      padding-left: var(--nav-cutoff);
      padding-right: var(--nav-cutoff);
      justify-content: flex-end;
    }

    header.header--desktop-nav-fill-right-side .header__right > .header__desktop-inline-top:not(.header__desktop-inline-top--right) {
      display: none;
    }

    header.header--desktop-nav-fill-right-side .header__desktop-inline-top--right {
      min-width: 0;
      flex: 1;
    }

    header.header--desktop-nav-fill-right-side .header__desktop-inline-top--right .header__nav {
      margin-left: auto;
    }

    /* Right logo hidden: left col fills, right shrinks to icons only */
    header.header--desktop-nav-fill-right {
      grid-template-columns: 1fr auto auto;
    }

    /* logo=right + menu=left: nav fills left 1fr, left-aligned */
    header.header--logo-right-nav-left {
      grid-template-columns: 1fr auto auto;
    }

    header.header--logo-right-nav-left .header__left {
      overflow: hidden;
      min-width: 0;
      padding-right: var(--nav-cutoff);
    }

    header.header--logo-right-nav-left .header__center {
      display: none;
    }

    header.header--logo-right-nav-left .header__desktop-inline-top--logo-right-left {
      flex: 1;
      min-width: 0;
    }

    /* logo=right + menu=center: nav fills entire left space, clips right before logo */
    header.header--logo-right-nav-center {
      grid-template-columns: 1fr auto;
    }

    header.header--logo-right-nav-center .header__left {
      overflow: hidden;
      min-width: 0;
      padding-left: 4px;
      padding-right: var(--nav-cutoff);
    }

    header.header--logo-right-nav-center .header__center {
      display: none;
    }

    header.header--logo-right-nav-center .header__right {
      justify-content: flex-end;
      flex-shrink: 0;
    }

    header.header--logo-right-nav-center .header__desktop-inline-top--logo-right-center {
      flex: 1;
      min-width: 0;
    }

    header.header--logo-right-nav-center .header__desktop-inline-top--logo-right-center .header__nav {
      margin: 0 auto;
    }

    /* logo=right + menu=right: nav fills left 1fr, right-aligned toward logo */
    header.header--logo-right-nav-right {
      grid-template-columns: 1fr auto auto;
    }

    header.header--logo-right-nav-right .header__left {
      overflow: hidden;
      min-width: 0;
      padding-right: var(--nav-cutoff);
      justify-content: flex-end;
    }

    header.header--logo-right-nav-right .header__center {
      display: none;
    }

    header.header--logo-right-nav-right .header__desktop-inline-top--logo-right-right {
      flex: 1;
      min-width: 0;
    }

    header.header--logo-right-nav-right .header__desktop-inline-top--logo-right-right .header__nav {
      margin-left: auto;
    }
  }

  @media screen and (max-width: 1199px) {
    /* Force nav visible inside mobile containers */
    .header__mobile-only .header__nav,
    .header__bottom-row.header__mobile-only .header__nav {
      display: flex !important;
      align-items: center;
    }
  }

  .header__logo {
    text-decoration: none;
    color: var(--color-foreground);
  }

  .header__logo-image {
    display: block;
    height: auto;
    max-height: 100%;
  }

  .header__title {
    line-height: 1.2;
    white-space: nowrap;
  }

  /* --- Bottom row --- */
  .header__bottom-row {
    background-color: var(--header-bg-color, var(--color-background));
  }

  .header__bottom-row.header__mobile-only {
    border-top: var(--bottom-row-divider-mobile, 1px) solid var(--bottom-row-divider-color-mobile, rgba(0, 0, 0, 0.06));
  }

  /* Move main border to bottom row when it exists */
  .header-wrapper--has-bottom-mobile {
    box-shadow: none;
  }
  .header-wrapper--has-bottom-mobile .header__bottom-row.header__mobile-only {
    box-shadow: inset 0 calc(var(--header-border-thickness, 0px) * -1) 0 0 var(--header-border-color, #000000);
  }

  .header__bottom-row.header__desktop-only {
    border-top: var(--bottom-row-divider-desktop, 1px) solid var(--bottom-row-divider-color-desktop, rgba(0, 0, 0, 0.06));
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .header-wrapper--has-bottom-desktop {
      box-shadow: none;
    }
    .header-wrapper--has-bottom-desktop .header__bottom-row.header__desktop-only {
      box-shadow: inset 0 calc(var(--header-border-thickness, 0px) * -1) 0 0 var(--header-border-color, #000000);
    }
    /* Restore wrapper border if no mobile bottom row on desktop */
    .header-wrapper--has-bottom-mobile:not(.header-wrapper--has-bottom-desktop) {
      box-shadow: inset 0 calc(var(--header-border-thickness, 0px) * -1) 0 0 var(--header-border-color, #000000);
    }
  }

  /* Transparent header: kill the bottom header border on every layout
     variant. The base .header-wrapper--transparent rule (above) sets
     box-shadow:none, but the .header-wrapper--has-bottom-* rules and
     the desktop @media restore above re-apply the border via higher
     specificity — !important here wins regardless. Also zero the
     bottom-row's own border-top so it doesn't paint a line in the
     transparent area when mobile Top Nav is enabled. */
  .header-wrapper--transparent,
  .header-wrapper--transparent .header__bottom-row {
    box-shadow: none !important;
    border-top: 0 !important;
  }

  .header__bottom-row.header__mobile-only {
    display: block;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;
  }

  .header__bottom-row.header__mobile-only .header__nav {
    display: flex !important;
    align-items: center;
  }

  .header__bottom-row.header__mobile-only::-webkit-scrollbar {
    display: none;
  }

  .header__bottom-row.header__mobile-only .header__nav-list {
    flex-wrap: nowrap;
  }

  .header__bottom-row.header__mobile-only .header__nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header__bottom-row.header__desktop-only .header__nav-list {
    flex-wrap: nowrap;
  }

  .header__bottom-row.header__desktop-only .header__nav-item {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header__bottom-row .header__nav-item:last-child {
    margin-right: 8px;
  }

  @media screen and (min-width: 1200px) {
    .header__bottom-row .header__nav-item:last-child {
      margin-right: 16px;
    }
  }

  /* Mobile + desktop inline scroll indicator */
  .header__scroll-indicator {
    height: 2px;
    background: rgba(128, 128, 128, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }

  .header__scroll-indicator-thumb {
    height: 100%;
    background: currentColor;
    opacity: 0.3;
    border-radius: 1px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .header__scroll-indicator.is-visible {
    opacity: 1;
  }
  [data-drag-scroll] {
    cursor: grab;
    user-select: none;
  }

  [data-drag-scroll].is-dragging {
    cursor: grabbing;
  }

  .mega-menu {
    cursor: default;
  }
  @media screen and (min-width: 1200px) {
    .header__bottom-row.header__desktop-only {
      display: block;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .header__bottom-row.header__desktop-only::-webkit-scrollbar {
      display: none;
    }
    .header__bottom-row.header__mobile-only {
      display: none;
    }
  }

  .header__bottom-row-inner {
    display: flex;
    align-items: center;
    padding: 0.5rem 8px;
    max-width: var(--page-width, 1600px);
    margin: 0 auto;
  }

  @media screen and (min-width: 1200px) {
    .header__bottom-row-inner {
      padding: 0.5rem 16px;
    }
  }

  .header__bottom-row--left {
    justify-content: flex-start;
  }

  .header__bottom-row--center {
    justify-content: flex-start;
  }

  .header__bottom-row--center .header__nav {
    margin: 0 auto;
  }

  .header__bottom-row--right {
    justify-content: flex-start;
  }

  .header__bottom-row--right .header__nav {
    margin-left: auto;
  }

  /* --- Drawer --- */
  .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
  }

  .drawer-overlay--desktop {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .drawer-overlay--desktop {
      display: block;
    }
    .drawer-overlay--mobile {
      display: none;
    }
  }

  .drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(320px, 80vw);
    background-color: var(--color-background);
    color: var(--color-foreground);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    visibility: hidden;
  }

  .drawer--left {
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .drawer--right {
    right: 0;
    left: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
  }

  .drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Responsive drawer visibility - override for fixed positioning */
  aside.drawer.header__desktop-only {
    display: none;
  }

  aside.drawer.header__mobile-only {
    width: 100vw !important;
  }

  @media screen and (min-width: 1200px) {
    aside.drawer.header__desktop-only {
      display: flex;
    }
    aside.drawer.header__mobile-only {
      display: none;
    }
  }

  .drawer__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    min-height: 5rem;
  }

  /* When header is visible above, hide the drawer's own header row */
  .drawer--show-header .drawer__header {
    display: none;
  }

  /* Add breathing room between header and first menu item */
  .drawer--show-header .drawer__content {
    padding-top: var(--drawer-link-spacing, 1.25rem);
  }

  /* Footer nav follows content naturally rather than pinning to bottom */
  .drawer--show-header .drawer__footer-nav {
    margin-top: 2rem;
  }

  .drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-foreground);
  }

  .drawer__content {
    padding: 0 1.5rem 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Inside drawer, force nav to show as vertical list */
  .drawer .header__nav {
    display: flex !important;
    flex-direction: column;
    flex: 1;
  }

  .drawer .header__nav-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
    overflow-y: auto;
    padding-bottom: 2rem;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .drawer .header__nav-list.is-hidden {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
  }

  .drawer .drawer__footer-nav {
    margin-top: auto;
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .drawer .drawer__footer-nav.is-hidden {
    opacity: 0;
    transform: translateX(-20px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
  }

  .drawer .header__nav-item {
    width: 100%;
  }

  .drawer .header__nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    width: 100%;
    text-decoration: none;
    color: inherit;
  }

  .drawer .header__nav-arrow {
    display: flex;
    align-items: center;
  }

  /* Submenu panels - hidden outside drawer */
  .drawer__submenu-panel {
    display: none;
  }

  .drawer .drawer__submenu-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .drawer .drawer__submenu-panel.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
    visibility: visible;
    min-height: 100%;
    overflow-y: auto;
  }

  .drawer__back-icon {
    display: flex;
    align-items: center;
  }

  .drawer__submenu-title-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0;
    padding-bottom: 0.75rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: inherit;
    width: 100%;
  }

  .drawer__submenu-title-back .drawer__submenu-title {
    margin: 0;
    padding: 0;
  }

  .drawer__breadcrumb {
    display: none;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75em;
    opacity: 0.5;
    padding: 0.25rem 0 0;
  }

  .drawer__submenu-divider {
    border: none;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    margin: 0.75rem 0;
    padding: 0;
  }

  .drawer__breadcrumb-root {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
  }

  .drawer__breadcrumb-mid {
    cursor: pointer;
    text-decoration: underline;
  }

  .drawer__submenu-title {
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    margin: 0;
    padding: 0;
    color: inherit;
  }

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

  .drawer__submenu-link {
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
    color: inherit;
  }

  /* Level 2 links that open a level 3 panel — comes after base rule so display:flex wins */
  .drawer__submenu-link.drawer__submenu-link--has-l3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* Drawer link underline hover effect — defined in blocks/_header-drawer.liquid
     so it can be gated by the drawer's own modern_divider_thickness setting.
     When dividers are visible between rows, the text-width underline on hover
     would compete with them visually, so it's suppressed in that case. */

  .drawer__submenu-image {
    display: none;
  }

  .drawer .drawer__submenu-image {
    display: block;
    margin-top: 2rem;
    flex-shrink: 0;
    overflow: hidden;
  }

  .drawer .drawer__submenu-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .drawer .drawer__submenu-image a {
    display: block;
  }

  /* ─────────────────────────────────────────────────────────────
     Hero Logo — transforms the header's OWN logo element into a
     giant centered hero at page top, returns to natural header
     position on scroll. No separate element — same text, single
     transform animation.

     The .header-wrapper--hero-logo-expanded class is toggled by JS:
       present  → transform applied, logo appears as giant hero
       absent   → transform removed, logo returns to natural state
     ───────────────────────────────────────────────────────────── */

  /* On pages with hero logo enabled (TEXT mode only): JS drives
     translate (via transform) and font-size (inline on the title)
     via a requestAnimationFrame loop. Font-size is animated directly
     — not transform: scale() — so the browser re-rasterizes glyphs
     at every size and the text stays crisp.
     SVG mode is excluded from will-change: transform because nothing
     animates a transform on .header__logo in SVG mode (only the SVGs
     opacity transitions). And will-change: transform creates a
     containing block for fixed positioning of inner elements,
     trapping .header__hero-svg's position: fixed inside the small
     .header__logo box (~151px wide) instead of the viewport. */
  .header-wrapper--has-hero-logo .header__logo:not(.header__logo--has-hero-svg) {
    will-change: transform;
    position: relative;
    /* Font-smoothing hints — still useful at large sizes */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* SVG-mode hero: still need position: relative for the hover-clone
     positioning (handled elsewhere), but explicitly NO will-change. */
  .header-wrapper--has-hero-logo .header__logo--has-hero-svg {
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* The real title (not the hover-clone) gets font-size animated inline
     by JS. line-height: 1 keeps the line-box proportional — without this
     a 300px font with default 1.2 line-height would produce a 360px-tall
     layout box that could disrupt the surrounding header layout more
     than necessary. The hover-clone keeps its natural line-height. */
  .header-wrapper--has-hero-logo .header__title:not(.header__logo-hover-clone) {
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
  }

  /* Expanded state: pointer-events: none on the entire expanded logo
     means hover events pass THROUGH it to whatever is behind (hero
     image/video). This prevents the giant text from triggering
     header:hover (which would paint the header bg and defeat the
     clean hero treatment). Trade-off: users can't click the giant
     text to go home — they need to click the smaller hover clone
     after hovering the header, which is the expected UX. */
  .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded .header__logo,
  .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded .header__logo * {
    pointer-events: none;
  }

  /* ── Hover-clone logo text ──
     A duplicate of the logo text shown ONLY when the user hovers the
     header bar while the giant logo is expanded.

     The clone has class="header__title header__logo-hover-clone". The
     .header__title class handles all typography (font-family, size,
     letter-spacing, text-transform) from the merchant's text logo
     settings. This rule handles positioning + visibility only. Color
     is set in blocks/_header-logo.liquid where logo_text_color is
     available. */

  /* Make the logo's parent span a positioning context for the absolute
     hover-clone. Scoped via :has() to ONLY the wrapper spans that
     contain a .header__logo — otherwise the rule would also match
     .header__desktop-inline-top (the menu wrapper), making it a
     positioning context for the .mega-menu absolute panels and
     trapping them inside the menu's narrow column instead of letting
     them span the full header width. */
  .header-wrapper--has-hero-logo .header__desktop-only:has(> .header__logo),
  .header-wrapper--has-hero-logo .header__mobile-only:has(> .header__logo) {
    position: relative;
  }

  .header__logo-hover-clone {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 21;
  }

  /* Show the hover clone when mega-menu is active AND giant logo is expanded
     (fires regardless of viewport — deliberate state, not accidental). */
  .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded:has(.mega-menu.is-active) .header__logo-hover-clone {
    opacity: 1;
  }

  /* Hover trigger for the hover-clone — DESKTOP ONLY. On mobile/touch,
     hover fires unreliably (sticky hover after tap, accidental flashes
     from scroll fingers), which makes the small logo flicker against
     the giant text during normal browsing. Desktop users get the
     deliberate "cursor over header → small logo fades in" affordance. */
  @media (min-width: 750px) {
    .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded:hover .header__logo-hover-clone {
      opacity: 1;
    }
  }

  /* When NOT expanded, hide the clone entirely (real logo visible). */
  .header-wrapper--has-hero-logo:not(.header-wrapper--hero-logo-expanded) .header__logo-hover-clone {
    display: none;
  }

  /* When drawer is open, hide the clone too — drawer UI takes over. */
  .header-wrapper--has-hero-logo.header-wrapper--drawer-open .header__logo-hover-clone {
    display: none;
  }

  /* When mega-menu is active with hero expanded, reset the giant
     title's color so it uses the hover-state palette. Drawer-open
     collapse is handled by the JS MutationObserver (animates font-size
     back to natural). Full mega-menu force-collapse would need JS
     intervention (CSS can't override the inline transform + font-size
     from the RAF loop without !important) — not implemented unless
     it proves problematic in practice. */
  .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded:has(.mega-menu.is-active) .header__title,
  .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded.header-wrapper--drawer-open .header__title {
    color: inherit;
  }

  /* ── Hero SVG mode ──
     A single .header__hero-svg sits inside .header__logo. It's sized
     in the EXPANDED state to fill viewport, and in the COLLAPSED state
     it transforms down/scales to match the small .header__logo-svg's
     exact rendered size + position. The transform is set as a CSS
     custom property by JS (which measures the small SVG on load /
     resize) and applied via transform. Result: a continuous, fluid
     animation between giant hero and small header logo — no fades,
     just one element transforming smoothly between two positions. */
  .header__hero-svg {
    display: block;
    width: auto;
    height: auto;
    transform-origin: top left;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Expanded state — SVG fills viewport width, anchored just below
     the header's actual bottom edge. --hero-svg-top is set by JS to
     account for announcement-bar-above (header pushed down) or
     announcement-bar-below (extra offset to clear the bar). */
  .header-wrapper--has-hero-logo.header-wrapper--hero-logo-expanded .header__hero-svg {
    position: fixed;
    top: var(--hero-svg-top, var(--header-height, 80px));
    left: 0;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100vh - var(--hero-svg-top, var(--header-height, 80px)));
    transform: none;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
  }

  /* Collapsed state (phase 1) — SVG transforms down to overlay the
     small header__logo-svg perfectly. The translate + scale values
     are set by JS as CSS custom properties:
       --hero-svg-collapse-x, --hero-svg-collapse-y
       --hero-svg-collapse-scale
     computed from the small SVG's getBoundingClientRect.
     Until JS computes them, default values keep the hero in roughly
     the right area (scale 0.05 = ~5% viewport size). */
  .header-wrapper--has-hero-logo:not(.header-wrapper--hero-logo-expanded) .header__hero-svg {
    position: fixed;
    top: var(--hero-svg-top, var(--header-height, 80px));
    left: 0;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    transform: translate(
        var(--hero-svg-collapse-x, 0px),
        var(--hero-svg-collapse-y, -100px)
      )
      scale(var(--hero-svg-collapse-scale, 0.05));
    opacity: 1;
    pointer-events: none;
    z-index: 1;
  }

  /* Swoosh-out state (phase 2) — after the collapse animation completes
     and the hero has landed at the small-logo position, JS adds the
     --hero-swoosh-out class which slides it further up by an additional
     amount with fade-out. End state: above viewport, invisible.
     Visually: the small landed logo gets "swooshed" upward away. */
  .header-wrapper--has-hero-logo.header-wrapper--hero-swoosh-out .header__hero-svg {
    transform: translate(
        var(--hero-svg-collapse-x, 0px),
        calc(var(--hero-svg-collapse-y, -100px) - 80px)
      )
      scale(var(--hero-svg-collapse-scale, 0.05));
    opacity: 0;
  }

  /* Hide the small .header__logo-svg in the collapsed state — the
     hero SVG has now scaled down to overlay it, so two SVGs in the
     same spot would just stack. Only one is visible at a time:
     hero SVG when expanded (giant) AND when collapsed (overlaying
     the spot where the small one would be). The small SVG is hidden
     entirely when SVG-hero mode is active so the hero SVG IS the
     logo at all states. */
  .header-wrapper--has-hero-logo .header__logo--has-hero-svg .header__logo-svg {
    visibility: hidden;
  }

  /* After the collapse animation completes (~500ms after scroll-down),
     hand control over to the in-flow primary SVG. The fixed-position
     hero SVG is hidden entirely (display:none); the primary becomes
     visible inside .header__logo and naturally follows whatever
     sticky-header behavior is configured:
       - 'always': header stays visible → primary stays visible
       - 'none': header scrolls away with page → primary scrolls with it
       - 'reveal': header slides up on scroll-down, slides back on
         scroll-up → primary follows that motion exactly
     On scroll back to top of page, JS removes this class instantly
     so the hero re-emerges at the collapsed position and animates
     back to the expanded (giant) state. */
  .header-wrapper--has-hero-logo.header-wrapper--hero-collapse-complete .header__hero-svg {
    display: none;
  }
  .header-wrapper--has-hero-logo.header-wrapper--hero-collapse-complete .header__logo--has-hero-svg .header__logo-svg {
    visibility: visible;
    opacity: 1;
  }
  /* Primary SVG starts at opacity 0 in SVG-hero mode (it's hidden
     until handoff). When --hero-collapse-complete is added by JS,
     opacity transitions to 1 — this gives the primary a graceful
     fade-in matching the hero's swoosh-up exit. */
  .header-wrapper--has-hero-logo .header__logo--has-hero-svg .header__logo-svg {
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }

  /* Drawer-open and mega-menu-active states are now handled by JS:
     when either becomes active, the hero-logo-expanded class is
     removed → CSS transitions the hero SVG down to its collapsed
     (small-logo) position smoothly. No opacity manipulation needed. */
/* END_SECTION:header */

/* START_SECTION:help-center (INDEX:23) */
/* ════════════════════════════════════════════════════════════
     HELP CENTER — class prefix hcat-*
     ════════════════════════════════════════════════════════════ */

  .hcat {
    background: var(--hcat-bg);
    color: var(--hcat-text);
    box-sizing: border-box;
  }

  /* ── Hero ──────────────────────────────────────────── */
  .hcat__hero {
    width: 100%;
    height: var(--hcat-hero-height);
    overflow: hidden;
    position: relative;
  }
  .hcat__hero .csp-image-frame,
  .hcat__hero .hcat__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Inner column ──────────────────────────────────── */
  .hcat__inner {
    width: 100%;
    max-width: var(--hcat-content-max);
    margin: 0 auto;
    padding: var(--hcat-pad-top) 24px var(--hcat-pad-bottom);
    box-sizing: border-box;
  }
  @media (min-width: 1024px) { .hcat__inner { padding-inline: 40px; } }

  /* ── Breadcrumb ────────────────────────────────────── */
  .hcat__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--text-4-font);
    font-size: 14px;
    color: var(--hcat-text);
    margin-bottom: 28px;
  }
  .hcat__crumb {
    color: var(--hcat-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }
  .hcat__crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
  .hcat__crumb--home {
    /* The home icon is a tap target, keep it modest */
    color: var(--hcat-text);
  }
  .hcat__crumb--current {
    color: var(--hcat-muted);
    cursor: default;
  }
  .hcat__crumb--current:hover { text-decoration: none; }
  .hcat__crumb-sep {
    color: var(--hcat-muted);
    line-height: 1;
  }
  /* The breadcrumb's per-state pieces are toggled by setting the
     `hidden` attribute via JS. The browser's UA `[hidden] {
     display: none }` rule (specificity 0,0,1,0) is the same
     weight as the `.hcat__crumb { display: inline-flex }` rule
     above and loses to it on cascade source-order — so we
     re-state the hide explicitly at higher specificity here.
     Same fix as `.hcat__view[hidden]` already uses. */
  .hcat__crumb[hidden],
  .hcat__crumb-sep[hidden] {
    display: none !important;
  }

  /* ── Header (heading + view toggle) ────────────────── */
  .hcat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
  }
  .hcat__heading {
    font-family: var(--hcat-heading-font);
    font-weight: var(--hcat-heading-weight);
    font-size: var(--hcat-heading-size);
    margin: 0;
    color: var(--hcat-text);
  }

  .hcat__view {
    /* Each view fills the inner column when shown */
    width: 100%;
  }
  .hcat__view[hidden] { display: none !important; }

  /* ── View toggle ──────────────────────────────────── */
  .hcat__view-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--hcat-toggle-inactive);
    border-radius: 6px;
    padding: 3px;
    gap: 0;
  }
  .hcat__view-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--hcat-text);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .hcat__view-btn[aria-pressed="true"] {
    background: var(--hcat-toggle-active);
    color: #fff;
  }

  /* Hide the grid/list toggle on mobile — at narrow widths both
     layouts collapse to a single column (or close to it), so the
     control doesn't change anything visible and just adds noise
     next to the heading. Header reflows to align the heading
     alone. */
  @media (max-width: 768px) {
    .hcat__view-toggle { display: none; }
  }

  /* ── Categories grid ──────────────────────────────── */
  .hcat__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--hcat-grid-cols), minmax(0, 1fr));
    gap: var(--hcat-grid-gap);
  }
  .hcat__item { margin: 0; }
  .hcat__card {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--hcat-card-radius);
    overflow: hidden;
    background: var(--hcat-card-bg);
    box-sizing: border-box;
  }
  .hcat__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--hcat-card-ratio);
    overflow: hidden;
    background: var(--hcat-card-bg);
  }
  .hcat__media-img,
  .hcat__media .csp-image-frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .hcat__media-placeholder { width: 100%; height: 100%; background: var(--hcat-card-bg); }
  .hcat__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38%;
    height: auto;
    max-width: 160px;
    pointer-events: none;
    /* Explicit z-index ensures the icon paints ABOVE the background
       image regardless of the image-frame's stacking context. Without
       this, depending on how .csp-image-frame is positioned globally
       (transforms / opacity / filters can all create new stacking
       contexts), the icon can end up rendered underneath the image
       even though it's later in DOM order. */
    z-index: 2;
  }
  /* Built-in inline-SVG icon. Same positioning as the uploaded
     image variant; uses aspect-ratio: 1/1 so the wrapper is a
     square that the SVG fills, and currentColor so the icon
     color comes from the inline style attribute set by Liquid
     (or the .hcat__icon--builtin default if none set). */
  .hcat__icon--builtin {
    display: inline-block;
    aspect-ratio: 1 / 1;
    color: var(--hcat-icon-default, #ffffff);
    line-height: 0;
  }
  .hcat__icon--builtin > svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hcat__text { padding: 16px 18px 20px; }
  .hcat__title {
    margin: 0 0 4px;
    font-family: var(--hcat-card-t-font);
    font-weight: var(--hcat-card-t-weight);
    font-size: var(--hcat-card-t-size);
    color: var(--hcat-text);
    line-height: 1.3;
  }
  .hcat__subtitle {
    margin: 0;
    font-family: var(--hcat-card-s-font);
    font-weight: var(--hcat-card-s-weight);
    font-size: var(--hcat-card-s-size);
    color: var(--hcat-muted);
    line-height: 1.4;
  }

  /* List view (categories) */
  .hcat__grid[data-hcat-view-mode="list"] {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hcat__grid[data-hcat-view-mode="list"] .hcat__card {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: stretch;
  }
  .hcat__grid[data-hcat-view-mode="list"] .hcat__media { aspect-ratio: 1 / 1; }
  .hcat__grid[data-hcat-view-mode="list"] .hcat__icon { width: 50%; max-width: 80px; }
  .hcat__grid[data-hcat-view-mode="list"] .hcat__text { padding: 18px 20px; align-self: center; }
  @media (max-width: 600px) {
    .hcat__grid[data-hcat-view-mode="list"] .hcat__card { grid-template-columns: 92px 1fr; }
    .hcat__grid[data-hcat-view-mode="list"] .hcat__text { padding: 12px 14px; }
  }

  /* ── Articles list (category page) ────────────────── */
  .hcat__articles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hcat-grid-gap);
  }
  @media (max-width: 800px) {
    .hcat__articles { grid-template-columns: 1fr; }
  }
  .hcat__articles[data-hcat-view-mode="list"] {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .hcat__article-item { margin: 0; }
  .hcat__article-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 22px 24px;
    border: 1px solid var(--hcat-faint);
    border-radius: 8px;
    background: var(--hcat-bg);
    box-sizing: border-box;
    transition: border-color 0.2s ease;
  }
  .hcat__article-card:hover { border-color: var(--hcat-text); }
  .hcat__article-card-title {
    margin: 0 0 8px;
    font-family: var(--hcat-card-t-font);
    font-weight: var(--hcat-card-t-weight);
    font-size: var(--hcat-card-t-size);
    color: var(--hcat-text);
    line-height: 1.3;
  }
  .hcat__article-card-preview {
    margin: 0;
    font-family: var(--hcat-card-s-font);
    font-weight: var(--hcat-card-s-weight);
    font-size: var(--hcat-card-s-size);
    color: var(--hcat-muted);
    line-height: 1.5;
    /* Clamp the preview to two lines for visual rhythm across cards. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── Article detail ───────────────────────────────── */
  /* The article view sits in its own breathing room — extra top
     margin pushes the doc card down from the breadcrumb so it
     reads as a distinct paper rather than free-floating text. */
  .hcat__view--article {
    display: block;
    width: 100%;
    clear: both;
    margin-top: var(--hcat-article-offset-top, 40px);
  }
  /* Doc-style card. White (or merchant-set) panel with subtle
     border + soft shadow, generous internal padding, modest
     corner radius. Mirrors the article view used in help-center
     references like Nude Project's Gorgias-powered FAQ. */
  .hcat__article-wrap {
    position: relative;
    width: 100%;
    max-width: var(--hcat-article-max);
    margin: 0 auto;
    display: block;
    background: var(--hcat-article-bg, #ffffff);
    border: 1px solid var(--hcat-faint);
    border-radius: var(--hcat-article-radius, 12px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 0, 0.04);
    padding: var(--hcat-article-pad, 56px);
    box-sizing: border-box;
  }
  @media (max-width: 600px) {
    .hcat__article-wrap {
      padding: var(--hcat-article-pad-mobile, 28px);
      border-radius: var(--hcat-article-radius-mobile, 10px);
    }
    .hcat__view--article {
      margin-top: var(--hcat-article-offset-top-mobile, 24px);
    }
  }
  .hcat__article-head {
    display: block;
    margin-bottom: 28px;
    /* Sit on a fresh row regardless of upstream float context. */
    clear: both;
  }
  .hcat__article-title {
    display: block;
    width: 100%;
    margin: 0;
    font-family: var(--hcat-art-h-font);
    font-weight: var(--hcat-art-h-weight);
    font-size: var(--hcat-art-h-size);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--hcat-text);
    /* Long words ("confirmation", "subscription") shouldn't be
       able to push the title past its container's right edge
       and overlap the body that follows. */
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  .hcat__article-meta {
    display: block;
    margin: 12px 0 0;
    font-family: var(--text-4-font);
    font-size: 14px;
    color: var(--hcat-muted);
  }
  .hcat__article-body {
    font-family: var(--hcat-art-b-font);
    font-weight: var(--hcat-art-b-weight);
    font-size: var(--hcat-art-b-size);
    line-height: 1.7;
    color: var(--hcat-text);
  }
  .hcat__article-body p { margin: 0 0 18px; }
  .hcat__article-body p:last-child { margin-bottom: 0; }
  .hcat__article-body h2,
  .hcat__article-body h3 {
    font-family: var(--hcat-art-h-font);
    font-weight: var(--hcat-art-h-weight);
    line-height: 1.25;
    margin: 32px 0 12px;
  }
  .hcat__article-body h2 { font-size: 22px; }
  .hcat__article-body h3 { font-size: 18px; }
  .hcat__article-body strong { font-weight: 700; }
  .hcat__article-body em { font-style: italic; }
  .hcat__article-body a {
    color: var(--hcat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  .hcat__article-body ul,
  .hcat__article-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
  }
  .hcat__article-body ul li,
  .hcat__article-body ol li {
    margin-bottom: 6px;
  }
  .hcat__article-body ul { list-style: disc; }
  .hcat__article-body ol { list-style: decimal; }
  .hcat__article-body hr {
    border: 0;
    border-top: 1px solid var(--hcat-faint);
    margin: 28px 0;
  }
  /* In-article CTA — pill-style banner link rendered between
     the article's primary content and the optional after-content
     when both `button_label` and `button_url` are set on the
     article block. Class is emitted by the section itself so we
     don't depend on Shopify's richtext (which strips `class`
     and most attributes from <a> tags). */
  .hcat__article-cta {
    display: block;
    text-align: center;
    background: var(--hcat-button-bg);
    color: var(--hcat-button-text);
    padding: 18px 24px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    font-weight: 600;
    margin: 24px 0;
    border-radius: 2px;
  }
  .hcat__article-cta:hover { background: var(--hcat-button-bg); }

  /* ── Feedback row ─────────────────────────────────── */
  .hcat__feedback { margin-top: 32px; }
  .hcat__feedback-rule {
    border: 0;
    border-top: 1px solid var(--hcat-faint);
    margin: 0 0 22px;
  }
  .hcat__feedback-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--hcat-art-b-font);
    font-size: 14px;
    color: var(--hcat-text);
  }
  .hcat__feedback-buttons {
    display: inline-flex;
    gap: 18px;
  }
  .hcat__feedback-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    color: var(--hcat-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    line-height: 1;
    transition: color 0.2s ease;
  }
  .hcat__feedback-btn:hover { color: var(--hcat-muted); }
  .hcat__feedback-btn.is-pressed {
    color: var(--hcat-muted);
    pointer-events: none;
  }
  .hcat__feedback-thanks {
    margin: 16px 0 0;
    font-family: var(--hcat-art-b-font);
    font-size: 14px;
    color: var(--hcat-muted);
    text-align: right;
  }

  /* ── Empty state ──────────────────────────────────── */
  .hcat__empty {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    color: var(--hcat-muted);
    font-family: var(--text-1-font);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
/* END_SECTION:help-center */

/* START_SECTION:hero (INDEX:25) */
/* ============================================================
     HERO -- class prefix: hero-*
     All structural rules; per-instance values arrive via CSS
     custom properties set in the inline style block above.
  */

  /* -- Section shell -- height comes from --hero-h / --hero-h-m
     CSS vars set per-instance. Mobile-first; desktop overrides. */
  .hero {
    position: relative;
    width: 100%;
    height: var(--hero-h-m, 60svh);
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }

  @media (min-width: 750px) {
    .hero {
      height: var(--hero-h, 80svh);
    }
  }

  .hero__media {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
  }

  .hero__media--desktop-only { display: none; }

  @media screen and (min-width: 750px) {
    .hero__media--desktop-only { display: flex; }
    .hero__media--mobile { display: none; }
  }

  .hero__img,
  .hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-overlay-color, #000000);
    opacity: var(--hero-overlay-opacity, 0);
    pointer-events: none;
  }

  /* -- Media link --------------------------------------------------
     Absolute anchor that covers the media so the whole image/video
     becomes clickable. Sits below .hero__content (z-index 1) so any
     buttons inside content still win clicks, and below the video
     controls strip (z-index 2) so play/pause/mute keep working. */
  .hero__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
  }

  /* When the video controls are visible, lift the link off the bottom
     strip so clicking the gradient/empty area there doesn't trigger
     the link instead of the controls underneath it. */
  .hero[data-show-video-controls="true"][data-has-desktop-video="true"][data-has-mobile-video="true"] .hero__link {
    bottom: 68px;
  }
  @media screen and (min-width: 750px) {
    .hero[data-show-video-controls="true"][data-has-desktop-video="true"]:not([data-has-mobile-video="true"]) .hero__media--desktop .hero__link {
      bottom: 68px;
    }
  }
  @media screen and (max-width: 749px) {
    .hero[data-show-video-controls="true"][data-has-mobile-video="true"]:not([data-has-desktop-video="true"]) .hero__media--mobile .hero__link {
      bottom: 68px;
    }
  }

  .hero__placeholder { width: 100%; height: 100%; background: #f0f0f0; }
  .hero__placeholder-svg { width: 100%; height: 100%; object-fit: cover; }

  .hero__content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    padding: var(--hero-content-pad-v, 40px) var(--hero-content-pad-h, 40px);
    pointer-events: none;
  }

  /* Mobile alignment classes (no media query: mobile is the default). */
  .hero__content--valign-m-top    { align-items: flex-start; }
  .hero__content--valign-m-center { align-items: center; }
  .hero__content--valign-m-bottom { align-items: flex-end; }
  .hero__content--align-m-left    { justify-content: flex-start; }
  .hero__content--align-m-center  { justify-content: center; }
  .hero__content--align-m-right   { justify-content: flex-end; }

  /* Desktop alignment classes -- override mobile at 750+. */
  @media screen and (min-width: 750px) {
    .hero__content--valign-top    { align-items: flex-start; }
    .hero__content--valign-center { align-items: center; }
    .hero__content--valign-bottom { align-items: flex-end; }
    .hero__content--align-left    { justify-content: flex-start; }
    .hero__content--align-center  { justify-content: center; }
    .hero__content--align-right   { justify-content: flex-end; }
  }

  .hero__inner {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
    will-change: transform;
  }

  .hero__content--align-m-left .hero__inner   { align-items: flex-start; text-align: left; }
  .hero__content--align-m-center .hero__inner { align-items: center; text-align: center; }
  .hero__content--align-m-right .hero__inner  { align-items: flex-end; text-align: right; }

  @media screen and (min-width: 750px) {
    .hero__content--align-left .hero__inner   { align-items: flex-start; text-align: left; }
    .hero__content--align-center .hero__inner { align-items: center; text-align: center; }
    .hero__content--align-right .hero__inner  { align-items: flex-end; text-align: right; }
  }

  .hero__inner .text-eyebrow,
  .hero__inner .text-heading,
  .hero__inner .text-subheading,
  .hero__inner .text-body { margin-bottom: 0; }

  .hero__buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; }

  .hero__content--align-m-left .hero__buttons   { justify-content: flex-start; }
  .hero__content--align-m-center .hero__buttons { justify-content: center; }
  .hero__content--align-m-right .hero__buttons  { justify-content: flex-end; }

  @media screen and (min-width: 750px) {
    .hero__content--align-left .hero__buttons   { justify-content: flex-start; }
    .hero__content--align-center .hero__buttons { justify-content: center; }
    .hero__content--align-right .hero__buttons  { justify-content: flex-end; }
  }

  .hero__inner .no-hover-effect { --button-hover-effect: none; }
  .hero__inner .no-hover-effect:hover { transform: none !important; box-shadow: none !important; }
  .hero__inner .no-hover-effect::before { display: none !important; }
  .hero__inner .no-text-effect::after { display: none !important; }
  .hero__inner .no-text-effect .text-wrapper::after { display: none !important; }

  /* -- Video-controls padding ----------------------------------
     The video controls overlay 68px of UI at the bottom of the
     media. Push the content padding down to keep CTAs clear of
     the bar. Selectors gated by data-* attributes on .hero so the
     rule only matches the relevant breakpoint per merchant config. */
  .hero[data-show-video-controls="true"][data-has-desktop-video="true"][data-has-mobile-video="true"] .hero__content {
    padding-bottom: calc(var(--hero-content-pad-v, 40px) + 68px);
  }
  @media screen and (min-width: 750px) {
    .hero[data-show-video-controls="true"][data-has-desktop-video="true"]:not([data-has-mobile-video="true"]) .hero__content {
      padding-bottom: calc(var(--hero-content-pad-v, 40px) + 68px);
    }
  }
  @media screen and (max-width: 749px) {
    .hero[data-show-video-controls="true"][data-has-mobile-video="true"]:not([data-has-desktop-video="true"]) .hero__content {
      padding-bottom: calc(var(--hero-content-pad-v, 40px) + 68px);
    }
  }

  /* -- Scroll reveal -------------------------------------------
     When enabled, the content layer sticks within the hero so it
     stays visible as the user scrolls past the media. JS updates
     --hero-header-offset to match the sticky header height. The
     vertical padding value reuses --hero-content-pad-v so merchant
     spacing settings apply to the sticky top/bottom anchors. */
  .hero[data-scroll-reveal="true"] { overflow: visible; }
  .hero[data-scroll-reveal="true"] .hero__media { overflow: hidden; }
  .hero[data-scroll-reveal="true"] .hero__inner {
    position: sticky;
    top: calc(var(--hero-header-offset, 0px) + var(--hero-content-pad-v, 40px));
    bottom: var(--hero-content-pad-v, 40px);
    transition: top 0.3s ease;
  }

  /* -- Video controls ----------------------------------------- */
  .hero__video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
    pointer-events: none;
  }

  .hero__vc-btn {
    pointer-events: auto;
    background: rgba(var(--hero-controls-color-rgb), 0.12);
    border: 1px solid rgba(var(--hero-controls-color-rgb), 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--hero-controls-color, #fff);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    padding: 0;
  }

  .hero__vc-mute {
    margin-left: auto;
  }

  .hero__vc-btn:hover {
    background: rgba(var(--hero-controls-color-rgb), 0.22);
    transform: scale(1.08);
  }

  .hero__vc-icon svg {
    width: 14px;
    height: 14px;
    display: block;
  }

  .hero__vc-progress {
    flex: 1;
    pointer-events: auto;
    cursor: pointer;
    padding: 8px 0;
  }

  .hero__vc-progress-track {
    height: 2px;
    background: rgba(var(--hero-controls-color-rgb), 0.25);
    border-radius: 2px;
    overflow: hidden;
    transition: height 0.2s ease;
  }

  .hero__vc-progress:hover .hero__vc-progress-track {
    height: 4px;
  }

  .hero__vc-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--hero-controls-color, #fff);
    border-radius: 2px;
    transition: width 0.25s linear;
  }

  /* -- Text animation ------------------------------------------
     Rules gate on the section's data-text-animation attribute so
     only the active animation's rules apply. Keyframes are shared
     across all hero instances since their content is identical;
     the per-instance --hero-animation-duration / --hero-animation-delay
     variables steer timing without needing section-id-suffixed
     keyframe names. */
  .hero[data-text-animation]:not([data-text-animation="none"]) .animate-element { opacity: 0; }
  .hero[data-text-animation]:not([data-text-animation="none"]) .animate-element { --stagger-delay: 0ms; }

  .hero[data-text-animation]:not([data-text-animation="none"]) .animate-element.animated {
    animation-duration: var(--hero-animation-duration, 600ms);
    animation-delay: calc(var(--hero-animation-delay, 0ms) + var(--stagger-delay, 0ms));
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Fade in */
  .hero[data-text-animation="fade_in"] .animate-element.animated {
    animation-name: hero-fade-in;
  }
  @keyframes hero-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Fade up -- initial offset on the element, animation interpolates back */
  .hero[data-text-animation="fade_up"] .animate-element { transform: translateY(30px); }
  .hero[data-text-animation="fade_up"] .animate-element.animated {
    animation-name: hero-fade-up;
  }
  @keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Blur in -- initial blur on the element, animation interpolates back */
  .hero[data-text-animation="blur_in"] .animate-element { filter: blur(10px); }
  .hero[data-text-animation="blur_in"] .animate-element.animated {
    animation-name: hero-blur-in;
  }
  @keyframes hero-blur-in {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: blur(0); }
  }

  /* Typewriter -- text materializes one character at a time via JS;
     the element is fully opaque (vs the hidden default above) and
     a blinking cursor caret sits at the end while typing. */
  .hero[data-text-animation="typewriter"] .animate-element { opacity: 1; }
  .hero[data-text-animation="typewriter"] .typewriter-text { display: inline; white-space: pre-wrap; }
  .hero[data-text-animation="typewriter"] .typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: hero-cursor-blink 0.75s step-end infinite;
  }
  .hero[data-text-animation="typewriter"] .typewriter-cursor.hidden {
    opacity: 0;
    animation: none;
  }
  @keyframes hero-cursor-blink {
    50% { opacity: 0; }
  }
/* END_SECTION:hero */

/* START_SECTION:large-heading (INDEX:27) */
.lh {
    background-color: var(--lh-bg);
    padding: var(--lh-pad-top) 0 var(--lh-pad-bottom);
  }

  .lh[data-top-divider="true"] {
    border-top: 1px solid var(--lh-divider-color);
  }

  .lh[data-bottom-divider="true"] {
    border-bottom: 1px solid var(--lh-divider-color);
  }

  /* Inner container matches the global header width pattern */
  .lh__inner {
    max-width: var(--page-width, 1600px);
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
  }

  @media (min-width: 1200px) {
    .lh__inner {
      padding: 0 16px;
    }
  }

  /* Optional eyebrow above the heading.
     Rule applies unconditionally — when the eyebrow setting is blank,
     the .lh__eyebrow element isn't rendered, so the rule matches nothing. */
  .lh__eyebrow {
    font-family: var(--lh-eyebrow-font);
    font-weight: var(--lh-eyebrow-weight);
    font-size: var(--lh-eyebrow-size);
    color: var(--lh-eyebrow-color);
    text-transform: var(--lh-eyebrow-transform);
    letter-spacing: var(--lh-eyebrow-letter-spacing);
    line-height: 1.3;
    margin: 0 0 var(--lh-eyebrow-gap);
    text-align: var(--lh-text-align);
  }

  /* Visually-hidden real heading for SEO + screen readers.
     The visible glyphs render inside the SVG below. */
  .lh__heading-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* The headline SVG — fills 100% width, viewBox handles uniform scaling */
  .lh__heading {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    margin: 0;
  }

  .lh__heading-text {
    fill: var(--lh-heading-color);
    font-family: var(--lh-heading-font);
    font-weight: var(--lh-heading-weight);
    text-transform: var(--lh-heading-transform);
  }

  /* Optional body text below the heading.
     Same approach as eyebrow — when the body setting is blank the
     .lh__body element isn't rendered. */
  .lh__body {
    font-family: var(--lh-body-font);
    font-weight: var(--lh-body-weight);
    font-size: var(--lh-body-size);
    line-height: var(--lh-body-line-height);
    color: var(--lh-body-color);
    max-width: var(--lh-body-max-width);
    margin: var(--lh-body-gap) var(--lh-body-margin-h) 0;
    text-align: var(--lh-text-align);
  }

  /* Reveal animation — rules only match when [data-reveal] is on
     elements (which only happens when reveal is enabled in settings).
     Wrapping rules in [data-reveal-enabled="true"] on the section
     would be redundant. */
  .lh [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .lh [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .lh [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:large-heading */

/* START_SECTION:lookbook-gallery (INDEX:28) */
/* ════════════════════════════════════════════════════════════
     LOOKBOOK GALLERY — class prefix: lkg-*
     Variables emitted per-instance on #shopify-section-{id}; all
     conditional variants gated via data-* attributes on .lkg.
  */

  /* ────────────────────────────────────────────────────────────
     SECTION CONTAINER
     ──────────────────────────────────────────────────────────── */
  .lkg {
    background: var(--lbg-bg);
    color: var(--lbg-text);
    padding: var(--lbg-pad-top) var(--lbg-pad-side) var(--lbg-pad-bottom);
    box-sizing: border-box;
  }

  /* ────────────────────────────────────────────────────────────
     HEADER (eyebrow / heading / intro)
     ──────────────────────────────────────────────────────────── */
  .lkg__header {
    text-align: var(--lbg-header-align);
    max-width: var(--lbg-header-max-width);
    margin: 0 auto var(--lbg-header-gap);
    display: block;
  }
  .lkg[data-align="left"] .lkg__header { margin-left: 0; }
  .lkg[data-align="right"] .lkg__header { margin-right: 0; }

  .lkg__header > * {
    display: block;
  }
  .lkg__eyebrow {
    font-family: var(--lbg-eyebrow-font);
    font-weight: var(--lbg-eyebrow-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lbg-eyebrow-color);
    margin: 0 0 14px;
    line-height: 1.2;
  }
  .lkg__heading {
    font-family: var(--lbg-heading-font);
    font-weight: var(--lbg-heading-weight);
    font-size: var(--lbg-heading-size);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--lbg-heading-color);
    margin: 0 0 18px;
  }
  .lkg__intro {
    font-family: var(--lbg-intro-font);
    font-weight: var(--lbg-intro-weight);
    font-size: var(--lbg-intro-size);
    line-height: 1.5;
    color: var(--lbg-intro-color);
    max-width: var(--lbg-intro-max-width);
    margin: 0;
  }
  .lkg[data-align="center"] .lkg__intro {
    margin: 0 auto;
  }
  /* Defense against global p{font-family} */
  .lkg__intro,
  .lkg__intro p,
  .lkg__intro span,
  .lkg__intro a,
  .lkg__intro * {
    font-family: var(--lbg-intro-font);
    font-weight: var(--lbg-intro-weight);
  }
  .lkg__intro strong,
  .lkg__intro b { font-weight: bolder; }
  .lkg__intro p:last-child { margin-bottom: 0; }

  /* Links inside intro — inherit the intro color (no default browser
     blue), keep a subtle underline so they still read as links, and
     soften slightly on hover. */
  .lkg__intro a,
  .lkg__intro a:link,
  .lkg__intro a:visited,
  .lkg__intro a:hover,
  .lkg__intro a:active {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
  }
  .lkg__intro a:hover { opacity: 0.7; }

  /* ────────────────────────────────────────────────────────────
     GRID — base styles for fixed-ratio views (square, portrait,
     landscape). Masonry overrides this further down with CSS columns.
     ──────────────────────────────────────────────────────────── */
  .lkg__grid {
    display: grid;
    grid-template-columns: repeat(var(--lbg-cols), 1fr);
    gap: var(--lbg-gap);
  }

  /* ────────────────────────────────────────────────────────────
     ITEM (cell) — applies in fixed-ratio views
     ──────────────────────────────────────────────────────────── */
  .lkg__item {
    position: relative;
    overflow: hidden;
    background: var(--lbg-cell-bg);
    border-radius: var(--lbg-cell-radius);
    margin: 0;
  }
  /* Aspect-ratio variants */
  .lkg__grid--square         .lkg__item { aspect-ratio: 1 / 1; }
  .lkg__grid--portrait       .lkg__item { aspect-ratio: 4 / 5; }
  .lkg__grid--portrait-tall  .lkg__item { aspect-ratio: 2 / 3; }
  .lkg__grid--landscape      .lkg__item { aspect-ratio: 3 / 2; }

  /* ────────────────────────────────────────────────────────────
     MASONRY — uses CSS columns instead of grid

     Items flow column-by-column so visual order goes top-down
     within each column before wrapping. Different from a true
     row-by-row masonry but visually feels close, and works in
     every browser without JS.
     ──────────────────────────────────────────────────────────── */
  .lkg__grid--masonry {
    display: block;
    column-count: var(--lbg-cols);
    column-gap: var(--lbg-gap);
  }
  .lkg__grid--masonry .lkg__item {
    break-inside: avoid;
    margin-bottom: var(--lbg-gap);
    aspect-ratio: auto;
    display: block;
  }

  /* ────────────────────────────────────────────────────────────
     ITEM TRIGGER — clickable button covering the whole cell
     ──────────────────────────────────────────────────────────── */
  .lkg__item-trigger {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: inherit;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
  }
  .lkg__item-trigger::before,
  .lkg__item-trigger::after {
    content: none !important;
    display: none !important;
  }
  .lkg__item-trigger:focus-visible {
    outline: 2px solid var(--lbg-text);
    outline-offset: -2px;
  }

  /* ────────────────────────────────────────────────────────────
     IMAGE WRAPPER + IMAGE
     For fixed-ratio views: wrapper fills the cell absolutely.
     For masonry: wrapper is static, image renders at intrinsic
     aspect ratio.
     ──────────────────────────────────────────────────────────── */
  .lkg__item-img-wrap {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
  }
  .lkg__grid--masonry .lkg__item-img-wrap {
    position: static;
    overflow: visible;
  }
  .lkg__item-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: var(--focal, center center);
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* Masonry image: natural height, no cropping */
  .lkg__grid--masonry .lkg__item-img {
    width: 100% !important;
    height: auto !important;
    object-fit: initial;
  }
  /* Video — same fill behavior as image but no focal point */
  .lkg__item-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* Masonry video: intrinsic aspect ratio */
  .lkg__grid--masonry .lkg__item-video {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    object-fit: initial;
  }

  /* Hover zoom — scale value driven from a CSS variable so a
     hover_zoom of 0 translates to scale(100%) (no zoom). */
  @media (hover: hover) and (pointer: fine) {
    .lkg__item-trigger:hover .lkg__item-img,
    .lkg__item-trigger:hover .lkg__item-video {
      transform: scale(var(--lbg-zoom-scale));
    }
  }

  /* ────────────────────────────────────────────────────────────
     CAPTION (over each cell)
     ──────────────────────────────────────────────────────────── */
  .lkg__item-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
    pointer-events: none;
  }
  /* Hover-reveal variant — gated via data-caption-reveal on the section root. */
  .lkg[data-caption-reveal="on-hover"] .lkg__item-caption {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* Masonry: caption sits BELOW the image (since cell has natural height) */
  .lkg__grid--masonry .lkg__item-caption {
    position: relative;
    background: transparent;
    color: var(--lbg-text);
    padding: 12px 4px 0;
  }
  @media (hover: hover) and (pointer: fine) {
    .lkg[data-caption-reveal="on-hover"] .lkg__item-trigger:hover .lkg__item-caption,
    .lkg[data-caption-reveal="on-hover"] .lkg__item-trigger:focus-visible .lkg__item-caption {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .lkg__item-caption-title {
    font-family: var(--lbg-cell-caption-font);
    font-weight: var(--lbg-cell-caption-weight);
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
  }
  .lkg__item-caption-body {
    font-size: 12px;
    margin: 4px 0 0;
    opacity: 0.9;
    line-height: 1.4;
  }

  /* ────────────────────────────────────────────────────────────
     CELL REVEAL ON SCROLL — gated via data-reveal-on-scroll on
     the section. When the merchant disables reveal, this attribute
     is "false" so the rules match nothing.
     ──────────────────────────────────────────────────────────── */
  .lkg[data-reveal-on-scroll="true"] .lkg__item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lkg[data-reveal-on-scroll="true"] .lkg__item.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .lkg[data-reveal-on-scroll="true"] .lkg__item,
    .lkg[data-reveal-on-scroll="true"] .lkg__item.is-revealed {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .lkg__item-img,
    .lkg__item-video {
      transition: none !important;
    }
  }

  /* ════════════════════════════════════════════════════════════
     LIGHTBOX — "Film Frame" navigation

     Fullscreen overlay. Image center stage. Editorial counter
     "01 / 12" top-left, caption top-right or below image.
     Bottom: horizontal thumbnail strip with viewfinder brackets
     on the active frame.

     All slides pre-rendered in the DOM with [data-slide] +
     `is-active` toggle for instant navigation.
     ──────────────────────────────────────────────────────────── */
  .lkg__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--lbg-lightbox-bg);
    color: var(--lbg-lightbox-text);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0.35s;
  }
  .lkg__lightbox.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0s linear 0s;
  }
  .lkg__lightbox[hidden] { display: none; }

  /* Top bar: counter + caption + close */
  .lkg__lightbox-top {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 0;
    gap: 24px;
  }
  .lkg__lightbox-counter {
    font-family: var(--text-2-font);
    font-weight: var(--text-2-weight);
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.04em;
    /* Tabular nums keeps "01" and "12" the same width */
    font-variant-numeric: tabular-nums;
  }
  .lkg__lightbox-counter-current {
    color: var(--lbg-lightbox-text);
  }
  .lkg__lightbox-counter-sep,
  .lkg__lightbox-counter-total {
    opacity: 0.4;
  }

  /* Caption next to counter (desktop) / below it (mobile) */
  .lkg__lightbox-caption {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 12px;
  }
  .lkg__lightbox-title {
    font-family: var(--text-1-font);
    font-weight: var(--text-1-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 4px;
    line-height: 1.3;
    opacity: 0.92;
    transition: opacity 0.4s ease;
  }
  .lkg__lightbox-body {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.6;
    transition: opacity 0.4s ease;
  }
  /* Brief fade-out during slide transition */
  .lkg__lightbox.is-transitioning .lkg__lightbox-title,
  .lkg__lightbox.is-transitioning .lkg__lightbox-body {
    opacity: 0;
  }

  .lkg__lightbox-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lkg__lightbox-close::before,
  .lkg__lightbox-close::after {
    content: none !important;
    display: none !important;
  }
  .lkg__lightbox-close:hover {
    transform: rotate(90deg);
  }
  .lkg__lightbox-close svg {
    width: 22px;
    height: 22px;
  }

  /* Stage: prev arrow + media + next arrow */
  .lkg__lightbox-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px 0;
  }
  .lkg__lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.25s ease, color 0.25s ease;
    opacity: 0.85;
  }
  .lkg__lightbox-arrow::before,
  .lkg__lightbox-arrow::after {
    content: none !important;
    display: none !important;
  }
  .lkg__lightbox-arrow--prev { left: 24px; }
  .lkg__lightbox-arrow--next { right: 24px; }
  .lkg__lightbox-arrow:hover {
    background: var(--lbg-lightbox-text);
    color: var(--lbg-lightbox-bg);
    opacity: 1;
  }
  .lkg__lightbox-arrow svg {
    width: 18px;
    height: 18px;
  }
  /* Hide arrows on small screens — swipe is primary nav there */
  @media (max-width: 749px) {
    .lkg__lightbox-arrow { display: none; }
  }

  /* Media wrapper — pre-rendered slides, only is-active is visible */
  .lkg__lightbox-media-wrap {
    width: 100%;
    height: 100%;
    max-width: 90vw;
    max-height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y; /* allow vertical scroll, swipe is intercepted in JS */
  }
  .lkg__lightbox-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lkg__lightbox-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .lkg__lightbox-img,
  .lkg__lightbox-vid {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    display: block;
  }
  /* Empty-slide placeholder — soft framed box, used only when a
     block has neither image nor video. No image-frame snippet. */
  .lkg__lightbox-empty {
    width: min(60vw, 480px);
    aspect-ratio: 3 / 4;
    max-height: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* ──── Film-strip thumbnails ────
     The strip wraps the scrollable track. We can't use overflow:visible
     on the track because overflow-x:auto forces overflow-y to also clip
     (CSS limitation — when one axis is non-visible, the other auto-
     promotes to non-visible too). Instead we add enough vertical padding
     ABOVE and BELOW each thumbnail so the active thumb's brackets
     (which sit at inset:-12px outside the thumb bounds) fit inside the
     scrollable region without getting clipped. */
  .lkg__lightbox-strip {
    flex-shrink: 0;
    padding: 0 0 8px;
  }
  .lkg__lightbox-strip-track {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 50vw; /* extra vertical padding so brackets aren't clipped */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }
  .lkg__lightbox-strip-track::-webkit-scrollbar {
    display: none;
  }

  /* Thumbnail — always small. Active gets viewfinder brackets. */
  .lkg__lightbox-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    overflow: visible;
    scroll-snap-align: center;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s ease;
    opacity: 0.5;
  }
  .lkg__lightbox-thumb::before,
  .lkg__lightbox-thumb::after {
    content: none !important;
    display: none !important;
  }
  .lkg__lightbox-thumb:hover {
    opacity: 0.85;
  }
  .lkg__lightbox-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 2px;
  }
  .lkg__lightbox-thumb-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
  }
  /* ACTIVE thumb — bigger, full opacity, with viewfinder brackets */
  .lkg__lightbox-thumb.is-active {
    opacity: 1;
    transform: scale(1.25);
  }
  .lkg__lightbox-thumb-brackets {
    position: absolute;
    inset: -8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lkg__lightbox-thumb.is-active .lkg__lightbox-thumb-brackets {
    opacity: 1;
  }
  .lkg__lightbox-thumb-brackets::before,
  .lkg__lightbox-thumb-brackets::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--lbg-lightbox-text);
    pointer-events: none;
  }
  /* Top-left corner */
  .lkg__lightbox-thumb-brackets::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
  }
  /* Bottom-right corner */
  .lkg__lightbox-thumb-brackets::after {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
  }
  /* Two more corners via a child element */
  .lkg__lightbox-thumb-brackets-extra {
    position: absolute;
    inset: 0;
  }
  .lkg__lightbox-thumb-brackets-extra::before,
  .lkg__lightbox-thumb-brackets-extra::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--lbg-lightbox-text);
    pointer-events: none;
  }
  /* Top-right corner */
  .lkg__lightbox-thumb-brackets-extra::before {
    top: 0;
    right: 0;
    border-left: 0;
    border-bottom: 0;
  }
  /* Bottom-left corner */
  .lkg__lightbox-thumb-brackets-extra::after {
    bottom: 0;
    left: 0;
    border-right: 0;
    border-top: 0;
  }

  /* Reduced-motion respect for lightbox */
  @media (prefers-reduced-motion: reduce) {
    .lkg__lightbox,
    .lkg__lightbox-slide,
    .lkg__lightbox-thumb,
    .lkg__lightbox-thumb-brackets {
      transition: none;
    }
  }
/* END_SECTION:lookbook-gallery */

/* START_SECTION:lookbook-grid (INDEX:29) */
/* ════════════════════════════════════════════════════════════
     LOOKBOOK GRID — class prefix: lbg-*
  */

  /* ────────────────────────────────────────────────────────────
     SECTION CONTAINER — padding, background, base text color
     ──────────────────────────────────────────────────────────── */
  .lbg {
    background: var(--lbg-bg);
    color: var(--lbg-text);
    padding: var(--lbg-pad-top) var(--lbg-pad-side) var(--lbg-pad-bottom);
    box-sizing: border-box;
  }

  /* ────────────────────────────────────────────────────────────
     HEADER — eyebrow + heading + intro text
     Wrapped in a presentational div so the global `header { display:flex }`
     reset that exists in many themes doesn't lay our text in a row.
     ──────────────────────────────────────────────────────────── */
  .lbg__header {
    text-align: var(--lbg-header-align);
    max-width: var(--lbg-header-max-width);
    margin: 0 auto var(--lbg-header-gap);
    display: block;
  }
  .lbg[data-align="left"] .lbg__header {
    margin-left: 0;
  }
  .lbg[data-align="right"] .lbg__header {
    margin-right: 0;
  }
  .lbg__header > * {
    display: block;
  }

  .lbg__eyebrow {
    font-family: var(--lbg-eyebrow-font);
    font-weight: var(--lbg-eyebrow-weight);
    font-size: var(--lbg-eyebrow-size);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lbg-eyebrow-color);
    margin: 0 0 14px;
    line-height: 1.2;
  }

  .lbg__heading {
    font-family: var(--lbg-heading-font);
    font-weight: var(--lbg-heading-weight);
    font-size: var(--lbg-heading-size);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--lbg-heading-color);
    margin: 0 0 18px;
  }

  .lbg__intro {
    font-family: var(--lbg-intro-font);
    font-weight: var(--lbg-intro-weight);
    font-size: var(--lbg-intro-size);
    line-height: 1.5;
    color: var(--lbg-intro-color);
    max-width: var(--lbg-intro-max-width);
    margin: 0;
  }
  .lbg[data-align="center"] .lbg__intro {
    margin: 0 auto;
  }
  /* Defense against global p{font-family} that overrides intro font */
  .lbg__intro,
  .lbg__intro p,
  .lbg__intro span,
  .lbg__intro div,
  .lbg__intro li,
  .lbg__intro a,
  .lbg__intro * {
    font-family: var(--lbg-intro-font);
    font-weight: var(--lbg-intro-weight);
  }
  .lbg__intro strong,
  .lbg__intro b {
    font-weight: bolder;
  }
  .lbg__intro p:last-child {
    margin-bottom: 0;
  }

  /* ────────────────────────────────────────────────────────────
     GRID — bento layout with explicit column/row spans per cell

     grid-auto-flow: dense fills holes, so cells pack tightly even
     when sizes don't tessellate cleanly. The trade-off: visual
     order can differ from DOM order (a "small" cell might fill
     a hole left by a "wide"). For most lookbook compositions
     this looks intentional rather than chaotic.
     ──────────────────────────────────────────────────────────── */
  .lbg__grid {
    display: grid;
    grid-template-columns: repeat(var(--lbg-grid-cols), 1fr);
    grid-auto-rows: var(--lbg-grid-row-height);
    grid-auto-flow: dense;
    gap: var(--lbg-grid-gap);
  }

  /* ────────────────────────────────────────────────────────────
     CELL — base + size variants

     Cells are CSS Grid items. Each cell has explicit dimensions
     from the grid track + grid-column/row spans. Children fill
     the cell via position:absolute + inset:0 — no percentage
     height chains, which fail unpredictably across browsers.

     Cells with span > available cols get clamped by CSS Grid
     automatically, so a "feature" (2x2) on a 1-col mobile
     becomes 1x2 (full-width x 2 rows) gracefully.
     ──────────────────────────────────────────────────────────── */
  .lbg__cell {
    position: relative;
    overflow: hidden;
    grid-column: span 1;
    grid-row: span 1;
    background: var(--lbg-cell-placeholder);
    border-radius: var(--lbg-cell-radius);
  }
  .lbg__cell--wide    { grid-column: span 2; }
  .lbg__cell--tall    { grid-row:    span 2; }
  .lbg__cell--feature { grid-column: span 2; grid-row: span 2; }

  /* Mobile-specific size overrides — only applied at the mobile
     breakpoint, and only when the merchant has set a non-"inherit"
     mobile size on the cell. Resets BOTH grid-column and grid-row
     spans explicitly so switching between size variants works
     correctly (e.g. desktop "feature" 2x2 -> mobile "small" 1x1
     needs to undo both spans, not just one). */
  @media (max-width: 749px) {
    .lbg__cell--mobile-small {
      grid-column: span 1;
      grid-row:    span 1;
    }
    .lbg__cell--mobile-wide {
      grid-column: span 2;
      grid-row:    span 1;
    }
    .lbg__cell--mobile-tall {
      grid-column: span 1;
      grid-row:    span 2;
    }
    .lbg__cell--mobile-feature {
      grid-column: span 2;
      grid-row:    span 2;
    }
  }

  /* ────────────────────────────────────────────────────────────
     MEDIA — image or video, absolutely fills its parent article

     Both image and video are direct children of the article (no
     wrapper). position:absolute + inset:0 + width/height 100%
     makes them fill the cell exactly. object-fit:cover crops to
     the cell's aspect ratio with the focal point as pivot.

     The !important defenses defeat the theme's global rule in
     critical.css that targets img AND video together:
       img, picture, video, canvas, svg {
         max-width: 100%;
         height: auto;
       }
     This rule would otherwise force intrinsic-aspect-ratio height
     and prevent the media from filling the cell properly.

     IMAGE: wrapped in a <span class="lbg__cell-img-wrap"> that
     carries the focal point as `style="--focal: <value>"`. The
     inner <img> reads it via `object-position: var(--focal)`.
     The wrapper is needed because Shopify's image_tag filter
     silently drops unsupported parameters like `style:` — so we
     can't put the focal point inline on the <img> itself.

     VIDEO + PLACEHOLDER: direct children of the article (no
     wrapper) since they don't need per-element focal control.
     ──────────────────────────────────────────────────────────── */
  .lbg__cell-img-wrap {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    z-index: 1;
  }
  .lbg__cell-img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: var(--focal, center center);
    display: block;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lbg__cell-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 1;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* ────────────────────────────────────────────────────────────
     DESKTOP / MOBILE MEDIA SWAP

     When a cell has both a desktop AND mobile media variant, the
     mobile one renders alongside the desktop one in the DOM (both
     with position:absolute + inset:0). CSS hides whichever doesn't
     belong on the current breakpoint. The mobile-specific class is
     `lbg__cell-media--mobile`; without it, media displays at all
     sizes (single-source case).

     Note: when a `--mobile` variant exists, the `--desktop` is
     hidden on mobile via the `:has()` parent selector. We use
     a sibling-aware approach so single-media cells (no mobile
     variant) behave as before. */
  /* Hide mobile-specific media on desktop */
  @media (min-width: 750px) {
    .lbg__cell-media--mobile {
      display: none !important;
    }
  }
  /* On mobile: if a `--mobile` sibling exists, hide the desktop one.
     Selector breakdown: an article that contains a `--mobile` element,
     find the `--desktop` element within it -> hide it. The :has() form
     is supported by all modern browsers (2023+). */
  @media (max-width: 749px) {
    .lbg__cell:has(.lbg__cell-media--mobile) .lbg__cell-media--desktop {
      display: none !important;
    }
  }
  .lbg__cell-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  /* Hover zoom — only on linked cells */
  .lbg__cell--linked:hover .lbg__cell-img,
  .lbg__cell--linked:hover .lbg__cell-video,
  .lbg__cell--linked:focus-within .lbg__cell-img,
  .lbg__cell--linked:focus-within .lbg__cell-video {
    transform: scale(var(--lbg-hover-zoom));
  }

  /* ────────────────────────────────────────────────────────────
     LINK OVERLAY — invisible <a> covering the entire cell

     Sits at z-index:3, above caption (z-2) and media (z-1). The
     "card pattern" approach: the entire cell is a click target,
     no nested anchors that browsers handle inconsistently. The
     theme's global Buttons system is disabled via ::before/::after
     resets so it doesn't add unwanted hover effects to our overlay.
     ──────────────────────────────────────────────────────────── */
  .lbg__cell-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    text-decoration: none;
    color: inherit;
    outline: none;
    /* Hide any text rendering — we set aria-label for accessibility */
    font-size: 0;
    line-height: 0;
  }
  .lbg__cell-link::before,
  .lbg__cell-link::after {
    content: none !important;
    display: none !important;
  }
  .lbg__cell-link:focus-visible {
    outline: 2px solid var(--lbg-focus-outline);
    outline-offset: -2px;
  }

  /* ────────────────────────────────────────────────────────────
     CAPTION — four positioning modes + optional reveal-on-hover

     Caption sits at z-index:2 — above media, below link overlay.
     Inner content has pointer-events:none so clicks pass through
     to the link overlay below; this means caption text can't be
     selected, but the entire cell becomes one clean tap target
     (the standard "card pattern").

     Overlay positions get a soft gradient scrim for readability
     against any image. Light text uses dark scrims, dark text
     uses light scrims (auto-flipped via [data-color]).
     ──────────────────────────────────────────────────────────── */
  .lbg__cell-caption {
    position: absolute;
    z-index: 2;
    padding: 22px 24px 24px;
    color: #ffffff;
    pointer-events: none;
  }
  /* Position variants */
  .lbg__cell-caption[data-position="overlay-bottom"] {
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
  }
  .lbg__cell-caption[data-position="overlay-top"] {
    left: 0; right: 0; top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0) 100%);
  }
  .lbg__cell-caption[data-position="overlay-center"] {
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: rgba(0,0,0,0.32);
  }
  .lbg__cell-caption[data-position="below"] {
    /* Below moves caption out of overlay — sits at bottom flush with
       grid background. Gets less aggressive padding since the cell's
       media area is taller than below-area. */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0);
    padding: 18px 22px 20px;
  }
  /* Dark-text caption — flip scrim and text colors */
  .lbg__cell-caption[data-color="dark"] {
    color: #111111;
  }
  .lbg__cell-caption[data-color="dark"][data-position="overlay-bottom"] {
    background: linear-gradient(to top, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%);
  }
  .lbg__cell-caption[data-color="dark"][data-position="overlay-top"] {
    background: linear-gradient(to bottom, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0) 100%);
  }
  .lbg__cell-caption[data-color="dark"][data-position="overlay-center"] {
    background: rgba(255,255,255,0.4);
  }

  /* Alignment */
  .lbg__cell-caption[data-align="left"]   { text-align: left; }
  .lbg__cell-caption[data-align="center"] { text-align: center; }
  .lbg__cell-caption[data-align="right"]  { text-align: right; }

  /* Reveal-on-hover — caption hidden until cell hovered/focused */
  .lbg__cell-caption[data-reveal="on-hover"] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lbg__cell:hover .lbg__cell-caption[data-reveal="on-hover"],
  .lbg__cell:focus-within .lbg__cell-caption[data-reveal="on-hover"] {
    opacity: 1;
    transform: translateY(0);
  }

  /* Caption text styles */
  .lbg__cell-eyebrow {
    font-family: var(--text-1-font);
    font-weight: var(--text-1-weight);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 8px;
    opacity: 0.85;
  }
  .lbg__cell-heading {
    font-family: var(--lbg-cell-heading-font);
    font-weight: var(--lbg-cell-heading-weight);
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
  }
  .lbg__cell--feature .lbg__cell-heading,
  .lbg__cell--wide .lbg__cell-heading,
  .lbg__cell--tall .lbg__cell-heading {
    font-size: 28px;
  }
  .lbg__cell-body {
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0 0;
    opacity: 0.92;
    max-width: 360px;
  }
  .lbg__cell-caption[data-align="center"] .lbg__cell-body {
    margin-left: auto;
    margin-right: auto;
  }

  /* CTA — same underline-draw treatment as the editorial lookbook */
  .lbg__cell-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-family: var(--text-1-font);
    font-weight: var(--text-1-weight);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
  }
  .lbg__cell-cta-text {
    position: relative;
    padding-bottom: 3px;
    display: inline-block;
  }
  .lbg__cell-cta-text::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lbg__cell--linked:hover .lbg__cell-cta-text::after,
  .lbg__cell--linked:focus-within .lbg__cell-cta-text::after {
    transform: scaleX(1);
  }
  .lbg__cell-cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lbg__cell--linked:hover .lbg__cell-cta-arrow {
    transform: translateX(4px);
  }

  /* ────────────────────────────────────────────────────────────
     REVEAL-ON-SCROLL — cells fade up cascading via JS

     We start at opacity:0/translateY(20px) and let the JS toggle
     `is-revealed` with a per-cell delay. Reduced-motion users
     skip the animation entirely. Gated by data-reveal="true" on
     the section so the static stylesheet covers both on/off cases.
     ──────────────────────────────────────────────────────────── */
  .lbg[data-reveal="true"] .lbg__cell {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .lbg[data-reveal="true"] .lbg__cell.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .lbg[data-reveal="true"] .lbg__cell,
    .lbg[data-reveal="true"] .lbg__cell.is-revealed {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .lbg__cell-img,
    .lbg__cell-video {
      transition: none !important;
    }
  }
/* END_SECTION:lookbook-grid */

/* START_SECTION:marquee (INDEX:31) */
.marq {
    width: 100%;
    overflow: hidden;
    background-color: var(--marq-bg);
    padding: var(--marq-padding-y) 0;
    user-select: none;
  }

  .marq[data-top-border="true"] {
    border-top: 1px solid var(--marq-border-color);
  }

  .marq[data-bottom-border="true"] {
    border-bottom: 1px solid var(--marq-border-color);
  }

  /* Doubled-track scroll. Width is auto so the duplicated content
     lays out as one continuous inline strip. The animation moves
     the strip by -50% per cycle so the second copy slides into
     the first copy's starting position. */
  .marq__track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation-name: marquee-section-scroll;
    animation-duration: var(--marq-speed);
    animation-direction: var(--marq-direction, normal);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
  }

  /* Single shared keyframe — translate(-50%) lands exactly at the start
     of the second (cloned) half regardless of section instance, so we
     don't need a per-section-id keyframe like the inline version had. */
  @keyframes marquee-section-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .marq__track {
      animation: none;
      transform: translate3d(-12.5%, 0, 0);
    }
  }

  .marq[data-pause-hover="true"]:hover .marq__track {
    animation-play-state: paused;
  }

  .marq__word {
    font-family: var(--marq-font);
    font-weight: var(--marq-weight);
    font-size: clamp(var(--marq-size-min), var(--marq-size-vw), var(--marq-size-max));
    text-transform: var(--marq-transform);
    letter-spacing: var(--marq-letter-spacing);
    color: var(--marq-text-color);
    padding: 0 0.6em;
  }

  .marq__sep {
    font-family: var(--marq-font);
    font-size: clamp(var(--marq-size-min), var(--marq-size-vw), var(--marq-size-max));
    color: var(--marq-sep-color);
    padding: 0 0.2em;
  }
/* END_SECTION:marquee */

/* START_SECTION:music-player (INDEX:32) */
/* ──────────────────────────────────────────────────────────────
     POSITIONING — the .csp-music container is fixed to a corner.
     z-index 9500 sits below the newsletter popup (10000) and
     landing page (10001) but above drawers (~9000) and cart
     toast (~9100).

     On product pages, the bottom positions get extra spacing via
     --csp-music-bottom-boost so the player clears the sticky
     add-to-cart bar.
  ────────────────────────────────────────────────────────────── */
  .csp-music {
    position: fixed;
    z-index: 9500;
    pointer-events: none; /* Wrapper is transparent; only inner is interactive */
  }

  .csp-music[data-position="bottom-right"] {
    bottom: calc(max(var(--csp-music-offset), env(safe-area-inset-bottom)) + var(--csp-music-bottom-boost, 0px));
    right:  max(var(--csp-music-offset), env(safe-area-inset-right));
  }
  .csp-music[data-position="bottom-left"] {
    bottom: calc(max(var(--csp-music-offset), env(safe-area-inset-bottom)) + var(--csp-music-bottom-boost, 0px));
    left:   max(var(--csp-music-offset), env(safe-area-inset-left));
  }
  .csp-music[data-position="top-right"] {
    top:   max(var(--csp-music-offset), env(safe-area-inset-top));
    right: max(var(--csp-music-offset), env(safe-area-inset-right));
  }
  .csp-music[data-position="top-left"] {
    top:  max(var(--csp-music-offset), env(safe-area-inset-top));
    left: max(var(--csp-music-offset), env(safe-area-inset-left));
  }

  .csp-music[hidden] {
    display: none !important;
  }

  /* The inner wrapper holds either the collapsed toggle or the
     expanded panel. We toggle a class on the parent to switch
     between the two. */
  .csp-music__inner {
    position: relative;
    pointer-events: auto;
  }

  /* ──────────────────────────────────────────────────────────────
     COLLAPSED STATE — 60px glass circle.
     Album art rotates when playing (vinyl-style).
     Optional 3-bar visualizer appears in the corner.
     SVG progress ring traces the edge as the track plays.
  ────────────────────────────────────────────────────────────── */
  .csp-music__toggle {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgba(var(--csp-music-bg-r), var(--csp-music-bg-g), var(--csp-music-bg-b), var(--csp-music-opacity));
    backdrop-filter: blur(var(--csp-music-blur));
    -webkit-backdrop-filter: blur(var(--csp-music-blur));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: visible;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.3s ease;
    color: var(--csp-music-text);
    -webkit-tap-highlight-color: transparent;
  }

  .csp-music__toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .csp-music__toggle:focus-visible {
    outline: 2px solid var(--csp-music-accent);
    outline-offset: 4px;
  }

  /* Album art inside the collapsed circle.
     Rotates continuously when playing — the rotation is
     paused when the section doesn't have the .is-playing class. */
  .csp-music__art--small {
    position: absolute;
    inset: 6px; /* 6px ring around the art for the progress indicator */
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    animation: csp-music-vinyl 8s linear infinite;
    animation-play-state: paused;
  }

  .csp-music.is-playing .csp-music__art--small {
    animation-play-state: running;
  }

  /* Placeholder shown when the track has no album art —
     a simple music note icon. */
  .csp-music__art--placeholder {
    background-color: rgba(255, 255, 255, 0.08);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l12-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='18' cy='16' r='3'/></svg>");
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* SVG progress ring traces the edge of the circle as the
     track plays. The fill stroke uses stroke-dashoffset to
     reveal proportional to currentTime/duration. */
  .csp-music__progress-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start at 12 o'clock */
    pointer-events: none;
  }

  .csp-music__progress-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 2;
  }

  .csp-music__progress-ring-fill {
    fill: none;
    stroke: var(--csp-music-accent);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.25s linear;
  }

  /* 3-bar audio visualizer overlaid in the bottom-right of the
     collapsed circle. CSS-only (not synced to actual audio
     levels) — animation-play-state pauses when not playing.
     Rules apply only when the visualizer markup is rendered
     (controlled by the show_visualizer setting in the template). */
  .csp-music__visualizer {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 24px;
    height: 14px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1px;
    padding: 0 3px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .csp-music__visualizer span {
    /* Fixed 1px width gives crisp thin lines instead of flex-stretched bars */
    width: 1px;
    flex-shrink: 0;
    background: var(--csp-music-accent);
    border-radius: 0.5px;
    animation: csp-music-bars 0.9s ease-in-out infinite alternate;
    animation-play-state: paused;
    height: 30%;
  }
  /* Stagger 7 delays so the bars don't all peak together —
     creates a more organic equalizer-style ripple */
  .csp-music__visualizer span:nth-child(1) { animation-delay: -0.30s; }
  .csp-music__visualizer span:nth-child(2) { animation-delay: -0.60s; }
  .csp-music__visualizer span:nth-child(3) { animation-delay: -0.10s; }
  .csp-music__visualizer span:nth-child(4) { animation-delay: -0.45s; }
  .csp-music__visualizer span:nth-child(5) { animation-delay: -0.75s; }
  .csp-music__visualizer span:nth-child(6) { animation-delay: -0.20s; }
  .csp-music__visualizer span:nth-child(7) { animation-delay: -0.55s; }
  .csp-music.is-playing .csp-music__visualizer span {
    animation-play-state: running;
  }

  /* ──────────────────────────────────────────────────────────────
     EXPANDED PANEL — pill-shaped player with full controls.
     Uses scale + opacity for a smooth spring-like reveal.
     Hidden by default; shown when .is-expanded is on the parent.

     Position anchor depends on data-position — bottom-* anchors
     the panel to bottom, top-* to top; right-* to right, left-*
     to left. The transform-origin matches so the spring grows
     from the corner the toggle lives in.
  ────────────────────────────────────────────────────────────── */
  .csp-music__panel {
    position: absolute;
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: 12px;
    border-radius: 16px;
    background: rgba(var(--csp-music-bg-r), var(--csp-music-bg-g), var(--csp-music-bg-b), var(--csp-music-opacity));
    backdrop-filter: blur(var(--csp-music-blur));
    -webkit-backdrop-filter: blur(var(--csp-music-blur));
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    color: var(--csp-music-text);
    transform: scale(0.7);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.3s ease,
      visibility 0s linear 0.4s;
  }

  .csp-music[data-position="bottom-right"] .csp-music__panel {
    bottom: 0;
    right: 0;
    transform-origin: bottom right;
  }
  .csp-music[data-position="bottom-left"] .csp-music__panel {
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
  }
  .csp-music[data-position="top-right"] .csp-music__panel {
    top: 0;
    right: 0;
    transform-origin: top right;
  }
  .csp-music[data-position="top-left"] .csp-music__panel {
    top: 0;
    left: 0;
    transform-origin: top left;
  }

  .csp-music.is-expanded .csp-music__panel {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition:
      transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
      opacity 0.3s ease,
      visibility 0s;
  }

  /* When expanded, hide the toggle (the panel now anchors the UI) */
  .csp-music.is-expanded .csp-music__toggle {
    transform: scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  /* Top row: art + title/artist + close */
  .csp-music__panel-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .csp-music__art--large {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    animation: csp-music-vinyl 12s linear infinite;
    animation-play-state: paused;
    transition: transform 0.2s ease;
  }

  .csp-music__art--large:hover {
    transform: scale(1.05);
  }

  /* "Next" overlay icon shown on hover of the large album art */
  .csp-music__art--large::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M11 2v12h2V2h-2zM2.5 2.5v11L9 8 2.5 2.5z'/></svg>");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
  }

  .csp-music__art--large:hover::after {
    opacity: 1;
  }

  .csp-music.is-playing .csp-music__art--large {
    animation-play-state: running;
  }

  /* Larger art uses a square (not circle) but rotation feels nice
     anyway — mimics a vinyl-shaped CD case */
  .csp-music__info {
    flex: 1;
    min-width: 0; /* Allow flex children to shrink below content size */
  }

  .csp-music__title {
    font-family: var(--csp-music-title-font);
    font-weight: var(--csp-music-title-weight);
    font-size: 14px;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--csp-music-text);
  }

  .csp-music__artist {
    font-family: var(--csp-music-artist-font);
    font-weight: var(--csp-music-artist-weight);
    font-size: 12px;
    line-height: 1.3;
    margin: 2px 0 0;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--csp-music-text);
  }

  .csp-music__close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--csp-music-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    /* Align with the track title (top of the info column)
       instead of centering against the 48px album art. */
    align-self: flex-start;
    margin-top: 2px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .csp-music__close:hover {
    opacity: 1;
  }

  .csp-music__close:focus-visible {
    outline: 2px solid var(--csp-music-accent);
    outline-offset: 2px;
    opacity: 1;
  }

  .csp-music__close svg {
    width: 11px;
    height: 11px;
  }

  /* Bottom row: prev/play/next + volume */
  .csp-music__panel-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .csp-music__controls {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .csp-music__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--csp-music-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .csp-music__btn:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .csp-music__btn:active {
    transform: scale(0.92);
  }

  .csp-music__btn:focus-visible {
    outline: 2px solid var(--csp-music-accent);
    outline-offset: 2px;
  }

  /* Play/pause button is larger and uses accent fill */
  .csp-music__playpause {
    width: 40px;
    height: 40px;
    background: var(--csp-music-accent);
    color: var(--csp-music-bg);
  }

  .csp-music__playpause:hover {
    background: var(--csp-music-accent);
    transform: scale(1.05);
  }

  .csp-music__btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  .csp-music__playpause svg {
    width: 14px;
    height: 14px;
  }

  /* Volume / progress wrapper — holds two mutually-exclusive
     controls: volume slider on desktop, progress bar on mobile.
     The wrapper itself just claims the remaining horizontal space
     in panel-bottom; each inner controls group is the actual
     flex container that lays out its own contents. */
  .csp-music__volume-wrap {
    flex: 1;
    min-width: 0;
  }

  .csp-music__volume-controls,
  .csp-music__progress-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  /* Volume controls (DESKTOP — hidden on mobile via media query below) */
  .csp-music__volume-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    flex-shrink: 0;
  }

  .csp-music__volume {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    min-width: 0;
  }

  .csp-music__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--csp-music-accent);
    cursor: pointer;
    border: none;
  }

  .csp-music__volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--csp-music-accent);
    cursor: pointer;
    border: none;
  }

  /* Progress controls (MOBILE — hidden on desktop via media query
     below). The bar uses a 24px tap-target box but renders only a
     3px visible track inside, so phone taps are accurate but the
     bar itself stays minimal. */
  .csp-music__time {
    font-family: var(--text-4-font, sans-serif);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 32px;
    text-align: center;
    color: var(--csp-music-text);
  }

  .csp-music__progress-bar {
    flex: 1;
    height: 24px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .csp-music__progress-bar:focus-visible .csp-music__progress-bar-track {
    box-shadow: 0 0 0 2px var(--csp-music-accent);
  }

  .csp-music__progress-bar-track {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
  }

  .csp-music__progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--csp-music-accent);
    border-radius: 2px;
    transition: width 0.15s linear;
  }

  /* Breakpoint swap — mobile shows progress bar, desktop shows volume.
     768px matches the rest of the theme's mobile/desktop breakpoint. */
  @media (max-width: 768px) {
    .csp-music__volume-controls {
      display: none;
    }
  }
  @media (min-width: 769px) {
    .csp-music__progress-controls {
      display: none;
    }
  }

  /* Hidden helpers */
  .csp-music__tracks,
  .csp-music__audio {
    display: none;
  }

  .csp-music__icon-pause {
    display: none;
  }

  .csp-music.is-playing .csp-music__icon-play {
    display: none;
  }

  .csp-music.is-playing .csp-music__icon-pause {
    display: block;
  }

  /* ──────────────────────────────────────────────────────────────
     SONG NAME BAR — refined glass capsule that appears on hover.
     Matches the toggle's glass aesthetic: backdrop-blur, soft shadow,
     pill shape, refined typography. Single-line ellipsis truncation
     instead of marquee for a clean, modern feel.

     Rules apply only when the songbar markup is rendered (controlled
     by the show_song_bar setting in the template). Position offset
     and entrance transform depend on data-position.
  ────────────────────────────────────────────────────────────── */
  .csp-music__songbar {
    position: absolute;
    height: 28px;
    padding: 0 14px;
    /* Full pill shape — matches the circular toggle's geometry */
    border-radius: 999px;
    background: rgba(
      var(--csp-music-songbar-bg-r),
      var(--csp-music-songbar-bg-g),
      var(--csp-music-songbar-bg-b),
      0.92
    );
    color: var(--csp-music-songbar-text);
    font-size: var(--csp-music-songbar-font-size);
    line-height: 1;
    /* Glass blur — same as the toggle */
    backdrop-filter: blur(var(--csp-music-blur));
    -webkit-backdrop-filter: blur(var(--csp-music-blur));
    /* Soft luxury shadow */
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.10),
      0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    /* Auto-width based on content, capped */
    max-width: 240px;
    pointer-events: none;
    /* Hidden by default — JS toggles is-visible class on hover */
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.22s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s linear 0.22s;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
  }

  /* Vertically position the songbar on the same edge as the toggle.
     72px = 60 (toggle) + 12 (gap). */
  .csp-music[data-position="bottom-right"] .csp-music__songbar,
  .csp-music[data-position="bottom-left"] .csp-music__songbar {
    bottom: 16px;
  }
  .csp-music[data-position="top-right"] .csp-music__songbar,
  .csp-music[data-position="top-left"] .csp-music__songbar {
    top: 16px;
  }
  .csp-music[data-position="bottom-right"] .csp-music__songbar,
  .csp-music[data-position="top-right"] .csp-music__songbar {
    right: 72px;
    transform-origin: right center;
    transform: translateX(8px) scale(0.94);
  }
  .csp-music[data-position="bottom-left"] .csp-music__songbar,
  .csp-music[data-position="top-left"] .csp-music__songbar {
    left: 72px;
    transform-origin: left center;
    transform: translateX(-8px) scale(0.94);
  }

  .csp-music__songbar.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    transition:
      opacity 0.22s cubic-bezier(0.32, 0.72, 0, 1),
      transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      visibility 0s;
    pointer-events: auto;
  }

  .csp-music__songbar-text {
    display: block;
    width: 100%;
    /* Single-line truncation with ellipsis — clean, no busy marquee */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Typography from theme settings — merchant picks the style */
    font-family: var(--csp-music-songbar-font);
    font-weight: var(--csp-music-songbar-weight);
    letter-spacing: 0.01em;
    color: inherit;
  }

  /* Hide song bar on mobile — hover doesn't apply to touch devices.
     The expanded panel already shows the title there. */
  @media (max-width: 767px) {
    .csp-music__songbar {
      display: none;
    }
  }

  /* Reduced motion: drop the slide animation */
  @media (prefers-reduced-motion: reduce) {
    .csp-music__songbar {
      transform: scale(1);
      transition:
        opacity 0.15s linear,
        visibility 0s linear 0.15s;
    }
    .csp-music__songbar.is-visible {
      transform: scale(1);
      transition:
        opacity 0.15s linear,
        visibility 0s;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     HIDE ON MOBILE — when merchant has enabled the setting,
     don't render the player on screens narrower than 768px.
  ────────────────────────────────────────────────────────────── */
  @media (max-width: 767px) {
    .csp-music--hide-mobile {
      display: none !important;
    }
  }

  /* ──────────────────────────────────────────────────────────────
     ANIMATIONS
  ────────────────────────────────────────────────────────────── */
  @keyframes csp-music-vinyl {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @keyframes csp-music-bars {
    0%, 100% { height: 30%; }
    50%      { height: 100%; }
  }

  /* Reduced motion: disable spinning art and visualizer animation */
  @media (prefers-reduced-motion: reduce) {
    .csp-music__art--small,
    .csp-music__art--large,
    .csp-music__visualizer span {
      animation: none !important;
    }
    .csp-music__panel,
    .csp-music__toggle {
      transition-duration: 0.01s !important;
    }
  }

  /* Mobile tweaks — slightly smaller panel */
  @media (max-width: 480px) {
    .csp-music__panel {
      width: 290px;
    }
  }
/* END_SECTION:music-player */

/* START_SECTION:newsletter-popup (INDEX:34) */
/* ════════════════════════════════════════════════════════════
     NEWSLETTER POPUP — class prefix: np-* / np__*
  */

  /* ── Container — fixed full viewport, hidden until JS opens it ─── */
  .np {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
  }
  /* Suppress focus ring on the popup container. It receives programmatic
     focus on open (for screen-reader dialog announcement) via tabindex="-1",
     but should never show a visible ring — the visual entry point is the
     popup itself appearing on screen, not an outlined section. */
  .np:focus,
  .np:focus-visible {
    outline: none;
  }
  .np.is-open {
    display: flex;
  }

  /* ── Backdrop — frosted glass over the page (matches the
        footer-localization Region & Language modal pattern) ────── */
  .np .np__backdrop {
    position: absolute;
    inset: 0;
    background: var(--nlp-backdrop-bg-fallback);
    animation-duration: 0.3s;
    animation-timing-function: ease;
  }
  @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .np .np__backdrop {
      background: var(--nlp-backdrop-bg-blur);
      backdrop-filter: blur(var(--nlp-backdrop-blur)) saturate(120%);
      -webkit-backdrop-filter: blur(var(--nlp-backdrop-blur)) saturate(120%);
    }
  }

  /* ── Panel — the actual popup content ─────────────────────── */
  .np .np__panel {
    position: relative;
    background: var(--nlp-panel-bg);
    color: var(--nlp-text-color);
    width: var(--nlp-panel-width);
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--nlp-panel-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    -webkit-overflow-scrolling: touch;
  }

  /* Closing animation. We add .is-closing for ~250ms before unmounting
     so the user sees the backdrop fade out + panel scale down rather
     than the modal vanishing instantly. */
  .np.is-closing .np__backdrop {
    animation-duration: 0.25s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
  .np.is-closing .np__panel {
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
    animation-fill-mode: forwards;
  }
  @media (prefers-reduced-motion: reduce) {
    .np .np__backdrop,
    .np .np__panel {
      animation: none;
    }
  }

  /* ── Inner layout — split on desktop when image is set ─────── */
  .np .np__inner {
    display: flex;
    flex-direction: var(--nlp-image-flow, column);
  }

  /* ── Image side ─────────────────────────────────────────────── */
  .np[data-has-image="true"] .np__image {
    flex: 0 0 50%;
    min-height: 220px;
    background-image: var(--nlp-image-url);
    background-size: cover;
    background-position: center;
    display: var(--nlp-image-display-mobile, none);
  }
  @media screen and (min-width: 768px) {
    .np[data-has-image="true"] .np__image {
      display: block;
      min-height: auto;
      align-self: stretch;
    }
  }

  /* ── Content side ──────────────────────────────────────────── */
  .np .np__content {
    flex: 1;
    padding: var(--nlp-content-pad);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ── Close button ──────────────────────────────────────────── */
  .np .np__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--nlp-text-color);
    z-index: 2;
    border-radius: 50%;
    transition: background 0.2s ease;
  }
  .np .np__close:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  .np .np__close:focus-visible {
    outline: 2px solid var(--nlp-text-color);
    outline-offset: 2px;
  }
  .np .np__close svg {
    width: 18px;
    height: 18px;
  }

  /* ── Heading ───────────────────────────────────────────────── */
  .np .np__heading {
    font-family: var(--nlp-heading-font);
    font-weight: var(--nlp-heading-weight);
    font-size: var(--nlp-heading-size);
    line-height: 1.15;
    text-transform: var(--nlp-heading-transform);
    letter-spacing: var(--nlp-heading-spacing);
    color: var(--nlp-text-color);
    margin: 0 0 12px;
  }

  /* ── Body text ─────────────────────────────────────────────── */
  .np .np__body {
    font-family: var(--nlp-body-font);
    font-weight: var(--nlp-body-weight);
    font-size: var(--nlp-body-size);
    text-transform: var(--nlp-body-transform);
    letter-spacing: var(--nlp-body-spacing);
    line-height: 1.5;
    color: var(--nlp-text-color);
    margin: 0 0 24px;
    opacity: 0.85;
  }

  /* ── Form ──────────────────────────────────────────────────── */
  .np .np__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Tight gap to the legal/privacy text below — the legal copy
       reads as a footnote of the submit, not as a separate block. */
    margin: 0 0 6px;
  }
  .np .np__input {
    font-family: var(--nlp-input-font);
    font-weight: var(--nlp-input-weight);
    /* font-size stays at 16px — never below, or iOS Safari zooms the
       page when the input is focused. The merchant can pick the
       font family/weight via input_font_style; size is locked. */
    font-size: 16px;
    padding: 14px 16px;
    border: 1px solid var(--nlp-input-border);
    background: var(--nlp-input-bg);
    color: var(--nlp-text-color);
    border-radius: var(--nlp-input-radius);
    box-sizing: border-box;
    width: 100%;
    transition: border-color 0.15s ease;
  }
  .np .np__input:focus {
    outline: none;
    border-color: var(--nlp-input-focus-border);
  }
  .np .np__input::placeholder {
    color: var(--nlp-text-color);
    opacity: 0.5;
  }

  .np .np__submit {
    font-family: var(--nlp-button-font);
    font-weight: var(--nlp-button-weight);
    font-size: var(--nlp-button-size);
    text-transform: var(--nlp-button-transform);
    letter-spacing: var(--nlp-button-spacing);
    padding: 14px 24px;
    background: var(--nlp-button-bg);
    color: var(--nlp-button-text);
    border: var(--nlp-button-border-width) solid var(--nlp-button-border-color);
    border-radius: var(--nlp-button-radius);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-top: 4px;
  }
  /* ── Full detach from the global button system ──────────────
     The button uses type="submit" so the Enter key in the email
     field still submits the form natively — but type="submit" is a
     selector target throughout the global theme button rules in
     critical.css and snippets/css-variables.liquid. Those rules
     would otherwise leak into the popup:
       • Hover EFFECTS: fade (opacity), scale/lift (transform),
         lift/glow (box-shadow), shine/fill_left/fill_bottom (::before)
       • Text EFFECTS: underline_slide/fade/expand/swap (::after) —
         opted out via data-button-text-effect="false" on the button
         itself, since those rules use :not([data-button-text-effect="false"])
       • Text EFFECT: text_reveal — applies padding:0 !important and
         overflow:hidden !important UNCONDITIONALLY (no opt-out
         attribute support), plus styles inner <span>s to support
         the reveal animation. This needs the strongest neutralization.

     The block below uses !important specifically to defeat the
     text_reveal !important declarations. For all other effects
     (which don't use !important) the section's specificity alone
     would be enough — the !important is the cost of letting the
     global text_reveal effect exist without exempting np__submit. */

  /* Kill global ::before (shine, fill_left, fill_bottom) and any
     ::after that slips past the data-button-text-effect="false"
     attribute (defense in depth). */
  .np .np__submit::before,
  .np .np__submit::after,
  .np .np__submit:hover::before,
  .np .np__submit:hover::after {
    content: none !important;
    display: none !important;
  }

  /* Reclaim padding + overflow from text_reveal's !important
     declarations, and neutralize hover-effect transforms (scale,
     lift), shadows (lift, glow), and opacity (fade). */
  .np .np__submit,
  .np .np__submit:hover,
  .np .np__submit:focus {
    padding: 14px 24px !important;
    overflow: visible !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  /* Disabled state owns its own opacity (set in the disabled rule
     below — keep that override winning). */
  .np .np__submit:disabled {
    opacity: 0.5 !important;
  }

  /* text_reveal also styles the button's inner <span> with
     `display: block; padding: 14px 32px;` so the second line of
     text can position correctly. The np__submit only has one
     <span data-np-submit-text>, so reset it to neutral inline. */
  .np .np__submit > span {
    display: inline !important;
    padding: 0 !important;
  }
  .np .np__submit:hover {
    background: var(--nlp-button-hover-bg);
    color: var(--nlp-button-hover-text);
    border-color: var(--nlp-button-hover-border-color);
    /* Neutralize global hover transforms/shadows/opacity. The
       section's own bg/color/border-color hover values above are
       the only hover styling we want. */
    transform: none;
    box-shadow: none;
    opacity: 1;
  }
  .np .np__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* ── Privacy / legal text ──────────────────────────────────── */
  /* The .np__legal container is a <div>; the richtext setting outputs
     its content wrapped in its own <p>. Apply the typography to BOTH
     the wrapper and the inner <p> so global <p> rules don't override
     font-family/size when the richtext renders. */
  .np .np__legal,
  .np .np__legal p {
    font-family: var(--nlp-legal-font);
    font-weight: var(--nlp-legal-weight);
    font-size: var(--nlp-legal-size);
    text-transform: var(--nlp-legal-transform);
    letter-spacing: var(--nlp-legal-spacing);
    line-height: 1.4;
    color: var(--nlp-text-color);
    opacity: 0.6;
    margin: 0;
  }
  .np .np__legal a {
    color: inherit;
    text-decoration: underline;
  }

  /* ── Inline error message ─────────────────────────────────── */
  .np .np__error {
    font-family: var(--nlp-error-font);
    font-weight: var(--nlp-error-weight);
    font-size: var(--nlp-error-size);
    color: var(--nlp-error-color);
    margin: 4px 0 0;
    display: none;
  }
  .np .np__error.is-visible {
    display: block;
  }

  /* ── Success state ─────────────────────────────────────────── */
  .np .np__success {
    display: none;
    flex-direction: column;
    text-align: center;
    padding: 16px 0;
  }
  .np.is-success .np__success {
    display: flex;
  }
  .np.is-success .np__form-wrap {
    display: none;
  }

  /* Success heading mirrors the form heading typography (same group),
     including the mobile size — so a merchant tuning headings sees
     consistent results in both states. */
  .np .np__success-heading {
    font-family: var(--nlp-heading-font);
    font-weight: var(--nlp-heading-weight);
    font-size: var(--nlp-heading-size);
    text-transform: var(--nlp-heading-transform);
    letter-spacing: var(--nlp-heading-spacing);
    color: var(--nlp-text-color);
    margin: 0 0 12px;
  }
  /* Success message mirrors the body typography (same group). */
  .np .np__success-message {
    font-family: var(--nlp-body-font);
    font-weight: var(--nlp-body-weight);
    font-size: var(--nlp-body-size);
    text-transform: var(--nlp-body-transform);
    letter-spacing: var(--nlp-body-spacing);
    color: var(--nlp-text-color);
    opacity: 0.8;
    margin: 0 0 24px;
  }

  /* ── Discount code reveal ──────────────────────────────────── */
  .np[data-has-discount-code="true"] .np__code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px dashed var(--nlp-text-color);
    border-radius: var(--nlp-panel-radius);
    margin: 0 auto;
  }
  /* Discount code value — typography group "Discount code" in the
     schema. The Copy button (.np__code-copy) shares code_font_style
     so the pair always reads as a coordinated unit, but has its own
     size since the label is utility-small while the value is
     prominent. */
  .np .np__code-text {
    font-family: var(--nlp-code-font);
    font-weight: var(--nlp-code-weight);
    font-size: var(--nlp-code-size);
    text-transform: var(--nlp-code-transform);
    letter-spacing: var(--nlp-code-spacing);
    color: var(--nlp-text-color);
  }
  .np .np__code-copy {
    font-family: var(--nlp-code-font);
    font-weight: var(--nlp-code-weight);
    font-size: var(--nlp-code-copy-size);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: transparent;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--nlp-text-color);
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }
  .np .np__code-copy:hover {
    opacity: 1;
  }
  .np .np__code-copy.is-copied {
    color: #2d7a3a;
    opacity: 1;
  }
/* END_SECTION:newsletter-popup */

/* START_SECTION:newsletter (INDEX:35) */
/* ════════════════════════════════════════════════════════════
     NEWSLETTER — class prefix: nl-*
  */

  /* ── Section shell ──────────────────────────────────
     Full-width parent. Padding + alignment driven by per-instance
     CSS variables. */
  .nl {
    background-color: var(--nl-bg);
    padding-top: var(--nl-pad-top);
    padding-bottom: var(--nl-pad-bottom);
    padding-left: var(--nl-pad-x);
    padding-right: var(--nl-pad-x);
    display: flex;
    flex-direction: column;
    align-items: var(--nl-align-items);
  }

  /* ── Eyebrow ─────────────────────────────────────────
     Small text above the heading. Standard mobile/desktop
     breakpoint sizing handled by --nl-eyebrow-size. */
  .nl__eyebrow {
    width: 100%;
    max-width: var(--nl-eyebrow-max-width);
    text-align: var(--nl-align);
    color: var(--nl-eyebrow-color);
    font-family: var(--nl-eyebrow-font);
    font-weight: var(--nl-eyebrow-weight);
    font-size: var(--nl-eyebrow-size);
    text-transform: var(--nl-eyebrow-transform);
    letter-spacing: var(--nl-eyebrow-spacing);
    line-height: 1.4;
    margin: 0 0 var(--nl-eyebrow-gap) 0;
  }

  /* Visually-hidden h2 carries the real heading text for SEO +
     screen readers. The SVG is aria-hidden. */
  .nl__heading-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* The headline SVG — fills 100% width, viewBox handles uniform
     scaling at every viewport size. Same engine as countdown. */
  .nl__heading {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    margin: 0 0 var(--nl-heading-gap) 0;
  }
  .nl__heading .nl__heading-text {
    fill: var(--nl-heading-color);
    font-family: var(--nl-heading-font);
    font-weight: var(--nl-heading-weight);
    text-transform: var(--nl-heading-transform);
  }

  /* ── Body ───────────────────────────────────────────
     Optional descriptor between heading and form. */
  .nl__body {
    width: 100%;
    max-width: var(--nl-body-max-width);
    text-align: var(--nl-align);
    color: var(--nl-body-color);
    font-family: var(--nl-body-font);
    font-weight: var(--nl-body-weight);
    font-size: var(--nl-body-size);
    text-transform: var(--nl-body-transform);
    letter-spacing: var(--nl-body-spacing);
    line-height: var(--nl-body-line-height);
    margin: 0 0 var(--nl-body-gap) 0;
  }

  /* ── Form ───────────────────────────────────────────
     Inline email + submit button. The flex-grow asymmetry
     (999 vs 1) is the trick that makes the wrap look right:

       UNWRAPPED (room for both): field has grow factor 999,
       button has grow factor 1. Extra space is split 99.9% to
       field, 0.1% to button — so the field stretches and the
       button stays at its natural content width.

       WRAPPED (container too narrow): each item is alone on its
       own row. Whatever its grow factor (as long as > 0), an
       alone-on-its-line flex item fills 100% of the row — so the
       button stretches to full width automatically when it drops
       below the field. No media query needed.

     Wrap triggers when (field basis 200px) + (button content) +
     gap exceeds container width — typically around 320–360px. */
  .nl-form {
    width: 100%;
    max-width: var(--nl-form-max-width);
  }
  .nl-form .nl-form__row {
    display: flex;
    align-items: stretch;
    gap: var(--nl-field-gap);
    flex-wrap: wrap;
  }
  .nl-form .nl-form__field {
    flex: 999 1 200px;
    min-width: 0;
    border-bottom: 1px solid var(--nl-input-border-color);
  }
  .nl-form .nl-form__input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 0;
    outline: none;
    color: var(--nl-input-color);
    font-family: var(--nl-input-font);
    font-weight: var(--nl-input-weight);
    font-size: var(--nl-input-size);
    letter-spacing: var(--nl-input-letter-spacing);
    -webkit-appearance: none;
    appearance: none;
  }
  /* iOS zoom prevention — Safari auto-zooms into a form control
     whose computed font-size is below 16px on focus. Hard-coded
     16px (literal, not max(...)) because some iOS Safari versions
     don't recognize max() for the zoom-trigger calc. */
  @media (hover: none) and (pointer: coarse) {
    .nl-form .nl-form__input {
      font-size: 16px !important;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
  }
  .nl-form .nl-form__input::placeholder {
    color: var(--nl-input-placeholder-color);
    opacity: 1;
  }

  .nl-form .nl-form__submit {
    /* flex: 1 0 auto = grow when alone on its row, natural width
       when paired with the field (since field's grow factor of
       999 swallows nearly all extra space).

       Vertical padding ensures the button has a real button
       height when wrapped to its own row. When in-row with the
       field, align-items: stretch makes it match the field's
       height anyway, so the padding is the floor, not the
       ceiling.

       !important is needed because the theme's "text_reveal"
       button hover effect (snippets/css-variables.liquid) forcibly
       zeros out padding on every submit button via !important,
       expecting the label to be wrapped in a <span>. This button
       renders its label as bare text and opts out of the effect
       via data-button-text-effect="false", but the global rule
       doesn't honor that attribute — so we re-assert here. */
    flex: 1 0 auto;
    padding: 14px 32px !important;
    min-width: 130px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--nl-button-bg);
    color: var(--nl-button-text);
    border: var(--nl-button-border-width) solid var(--nl-button-border);
    border-radius: var(--nl-button-border-radius);
    font-family: var(--nl-button-font);
    font-weight: var(--nl-button-weight);
    font-size: var(--nl-button-size);
    text-transform: var(--nl-button-transform);
    letter-spacing: var(--nl-button-letter-spacing);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
    overflow: visible;
  }
  /* Defensive — kill global text effect pseudos AND hover effects
     (lift / shine / glow / fill_*) that target button[type="submit"]
     from the theme's settings_schema. data-button-text-effect="false"
     is the canonical opt-out, but these section-scoped rules win by
     specificity. */
  .nl-form .nl-form__submit::before,
  .nl-form .nl-form__submit::after {
    content: none !important;
    display: none !important;
  }
  .nl-form .nl-form__submit:hover {
    background-color: var(--nl-button-bg-hover);
    color: var(--nl-button-text-hover);
    transform: none;
    box-shadow: none;
  }
  .nl-form .nl-form__submit:focus-visible {
    outline: 2px solid var(--nl-button-text);
    outline-offset: 2px;
  }
  @media (hover: none) {
    .nl-form .nl-form__submit {
      transition: none;
      -webkit-tap-highlight-color: transparent;
    }
    .nl-form .nl-form__submit:hover {
      background-color: var(--nl-button-bg);
      color: var(--nl-button-text);
    }
  }

  /* ── Marketing notice — small print under the form. */
  .nl-form .nl-form__notice {
    width: 100%;
    margin: var(--nl-notice-gap) 0 0 0;
    color: var(--nl-notice-color);
    font-family: var(--nl-notice-font);
    font-weight: var(--nl-notice-weight);
    font-size: var(--nl-notice-size);
    text-transform: var(--nl-notice-transform);
    letter-spacing: var(--nl-notice-letter-spacing);
    line-height: var(--nl-notice-line-height);
    text-align: var(--nl-align);
  }
  .nl-form .nl-form__notice a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .nl-form .nl-form__notice p {
    margin: 0;
  }

  .nl-form .nl-form__error {
    margin: var(--nl-notice-gap) 0 0 0;
    color: #ff6b6b;
    font-size: 13px;
    line-height: 1.4;
    text-align: var(--nl-align);
  }

  /* ── Success message ────────────────────────────────
     Replaces the entire form when Shopify reports
     posted_successfully?. Sized via clamp() so it scales fluidly
     between phone and desktop, mirroring the countdown's
     label-sizing approach. */
  .nl__success {
    width: 100%;
    text-align: var(--nl-align);
    color: var(--nl-success-color);
    font-family: var(--nl-success-font);
    font-weight: var(--nl-success-weight);
    font-size: var(--nl-success-size);
    text-transform: var(--nl-success-transform);
    letter-spacing: var(--nl-success-letter-spacing);
    line-height: 1.3;
    margin: 0;
    animation: nl-success-in 0.4s ease-out;
  }
  @keyframes nl-success-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
/* END_SECTION:newsletter */

/* START_SECTION:order-tracking (INDEX:36) */
/* ════════════════════════════════════════════════════════════
     ORDER TRACKING — class prefix ot-*
     ════════════════════════════════════════════════════════════ */

  /* ── Section shell ──────────────────────────────────
     Edge-to-edge background, tall vertical padding. Centered
     content column constrained by --ot-content-max so the form
     doesn't fan out to fashion-billboard width on desktop. */
  .ot {
    background: var(--ot-bg);
    color: var(--ot-text);
    padding-top: var(--ot-pad-top);
    padding-bottom: var(--ot-pad-bottom);
    position: relative;
    box-sizing: border-box;
  }
  .ot__inner {
    width: 100%;
    max-width: var(--ot-content-max);
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    position: relative;
  }

  /* ── Reference stamp ─────────────────────────────────
     Monospace top-right identifier with today's date. Reads
     as a quiet "ledger" annotation. Absolutely positioned
     against .ot__inner so it can slide outside the content
     column edge on wide viewports. */
  .ot__stamp {
    position: absolute;
    top: 0;
    right: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: var(--ot-stamp-size);
    letter-spacing: 0.05em;
    color: var(--ot-muted);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.8s ease 0.05s, transform 0.8s ease 0.05s;
  }
  .ot.is-in-view .ot__stamp {
    opacity: 1;
    transform: translateY(0);
  }
  .ot__stamp-dot { opacity: 0.55; }
  @media (max-width: 600px) {
    .ot__stamp {
      position: static;
      margin-bottom: 24px;
      justify-content: flex-start;
    }
  }

  /* ── Intro: eyebrow, heading, hairline, subtitle ────
     Each element fades in with a small upward translate. A
     stagger of ~120ms between them gives the section a
     considered "settling" feeling on first reveal. */
  .ot__intro {
    text-align: center;
    margin-bottom: 56px;
  }
  .ot__eyebrow,
  .ot__heading,
  .ot__hairline,
  .ot__subtitle {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ot.is-in-view .ot__eyebrow   { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
  .ot.is-in-view .ot__heading   { opacity: 1; transform: translateY(0); transition-delay: 0.18s; }
  .ot.is-in-view .ot__hairline  { opacity: 1; transform: translateY(0); transition-delay: 0.28s; }
  .ot.is-in-view .ot__subtitle  { opacity: 1; transform: translateY(0); transition-delay: 0.38s; }

  .ot__eyebrow {
    display: inline-block;
    font-family: var(--ot-eyebrow-font);
    font-weight: var(--ot-eyebrow-weight);
    font-size: var(--ot-eyebrow-size);
    letter-spacing: var(--ot-eyebrow-letter-spacing);
    text-transform: var(--ot-eyebrow-transform);
    color: var(--ot-muted);
    margin-bottom: 24px;
    /* Trim trailing letter-spacing so the box matches visible
       glyphs — keeps the eyebrow optically centered. */
    margin-inline-end: calc(var(--ot-eyebrow-letter-spacing) * -1);
  }
  .ot__heading {
    font-family: var(--ot-heading-font);
    font-weight: var(--ot-heading-weight);
    font-size: var(--ot-heading-size);
    line-height: 1.02;
    letter-spacing: var(--ot-heading-letter-spacing);
    text-transform: var(--ot-heading-transform);
    color: var(--ot-text);
    margin: 0;
  }

  /* Hairline divider — animated draw-in. Default state has
     scaleX(0) so it's invisible; .is-in-view flips it to 1.
     transform-origin: left makes it sweep from left to right. */
  .ot__hairline {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--ot-hairline);
    margin: 32px auto 0;
    transform-origin: left center;
  }
  .ot.is-in-view .ot__hairline {
    /* Compose the draw-in over the base fade transform.
       We scale x to 1 while keeping the inherited translateY
       from the .ot__hairline base rule. */
    transform: translateY(0) scaleX(1);
    transition: opacity 0.6s ease 0.28s, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.28s;
  }
  /* Pre-reveal state: invisible AND collapsed horizontally. */
  .ot__hairline {
    transform: translateY(14px) scaleX(0);
  }

  .ot__subtitle {
    font-family: var(--ot-body-font);
    font-weight: var(--ot-body-weight);
    font-size: var(--ot-body-size);
    line-height: 1.55;
    color: var(--ot-muted);
    max-width: 480px;
    margin: 24px auto 0;
  }

  /* ── Form ──────────────────────────────────────────
     Two underline-only inputs stacked into 2 columns on
     desktop, 1 column on mobile. The submit row sits below. */
  .ot__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-bottom: 80px;
  }
  .ot__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  @media (max-width: 600px) {
    .ot__fields {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }

  .ot__field {
    position: relative;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .ot.is-in-view .ot__field { opacity: 1; transform: translateY(0); }
  .ot.is-in-view .ot__field:nth-child(1) { transition-delay: 0.48s; }
  .ot.is-in-view .ot__field:nth-child(2) { transition-delay: 0.58s; }

  .ot__label {
    font-family: var(--ot-label-font);
    font-weight: var(--ot-label-weight);
    font-size: var(--ot-label-size);
    letter-spacing: var(--ot-label-letter-spacing);
    text-transform: uppercase;
    color: var(--ot-muted);
    margin-bottom: 14px;
    margin-inline-end: calc(var(--ot-label-letter-spacing) * -1);
  }

  /* Underline-only input. The visible bottom hairline is a
     pseudo-element BELOW the input (.ot__field-underline) so
     it can have its own focus-driven scaleX animation while
     the input itself has no border. */
  .ot__input {
    width: 100%;
    appearance: none;
    background: var(--ot-input-bg);
    border: 0;
    border-radius: 0;
    padding: 6px 0 10px;
    font-family: var(--ot-input-font);
    font-weight: var(--ot-input-weight);
    font-size: var(--ot-input-size);
    line-height: 1.3;
    color: var(--ot-text);
    /* Static baseline rule */
    border-bottom: 1px solid var(--ot-faint);
    transition: border-color 0.35s ease;
    box-sizing: border-box;
  }
  .ot__input::placeholder {
    color: var(--ot-muted);
    opacity: 0.55;
  }
  .ot__input:focus {
    outline: none;
    border-bottom-color: transparent;
  }
  /* Animated underline — sits right where the static border is,
     scales from 0 to 1 (origin left) when the input is focused.
     pointer-events: none so it doesn't steal clicks. */
  .ot__field-underline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ot-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
  }
  .ot__field:focus-within .ot__field-underline {
    transform: scaleX(1);
  }

  /* ── Submit ─────────────────────────────────────────
     Text + arrow, no box. Underlined by default; on hover
     the underline holds, the arrow translates right, and a
     subtle horizontal trim retracts under the arrow. */
  .ot__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease 0.68s, transform 0.7s ease 0.68s;
  }
  .ot.is-in-view .ot__actions { opacity: 1; transform: translateY(0); }

  .ot__submit {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: 0;
    padding: 14px 0;
    cursor: pointer;
    color: var(--ot-accent);
    font-family: var(--ot-button-font);
    font-weight: var(--ot-button-weight);
    font-size: var(--ot-button-size);
    letter-spacing: var(--ot-button-letter-spacing);
    text-transform: uppercase;
    position: relative;
  }
  .ot__submit-text {
    position: relative;
    padding-bottom: 4px;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
  }
  .ot__submit-arrow {
    display: inline-flex;
    line-height: 0;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ot__submit:hover .ot__submit-arrow,
  .ot__submit:focus-visible .ot__submit-arrow {
    transform: translateX(6px);
  }
  /* The underline beneath the text stays put on hover — only the
     arrow drifts. Removing the background-size hover keeps the
     button reading as a single steady mark with one bit of motion. */
  .ot__submit:focus-visible {
    outline: none;
  }
  .ot__submit.is-loading {
    pointer-events: none;
    opacity: 0.6;
  }

  .ot__error {
    margin: 0;
    font-family: var(--ot-body-font);
    font-size: 12px;
    color: #b3261e;
    letter-spacing: 0.02em;
  }
  .ot__error[hidden] { display: none; }

  /* ── Status timeline ────────────────────────────────
     Decorative — five nodes connected by hairlines. Each
     node has a center dot + a surrounding ring; both scale
     from 0 to 1 as the section enters view. Connector lines
     between nodes draw left-to-right (scaleX 0 → 1). The
     stagger is driven by --ot-stage-i set inline per <li>. */
  .ot__timeline {
    position: relative;
    margin-bottom: 80px;
  }
  .ot__stages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
  }
  .ot__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  /* Connector line — sits to the LEFT of each node, drawn as
     a thin horizontal bar between this node and the previous.
     The first node hides its connector (no previous). */
  .ot__stage::before {
    content: '';
    position: absolute;
    top: 11px; /* centers vertically through the 22px ring */
    right: 50%;
    width: 100%;
    height: 1px;
    background: var(--ot-hairline);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(0.78s + var(--ot-stage-i, 0) * 0.12s);
    opacity: 0.35;
  }
  .ot__stage:first-child::before { display: none; }
  .ot.is-in-view .ot__stage::before { transform: scaleX(1); }

  .ot__node {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
    transition-delay: calc(0.82s + var(--ot-stage-i, 0) * 0.12s);
  }
  .ot.is-in-view .ot__node { transform: scale(1); }
  .ot__node-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ot-accent);
  }
  .ot__node-ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--ot-hairline);
    border-radius: 50%;
    opacity: 0.35;
  }

  .ot__stage-label {
    font-family: var(--ot-timeline-font);
    font-weight: var(--ot-timeline-weight);
    font-size: var(--ot-timeline-size);
    letter-spacing: var(--ot-timeline-letter-spacing);
    text-transform: uppercase;
    color: var(--ot-muted);
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(0.95s + var(--ot-stage-i, 0) * 0.12s);
    /* Trim trailing letter-spacing for optical centering. */
    margin-inline-end: calc(var(--ot-timeline-letter-spacing) * -1);
  }
  .ot.is-in-view .ot__stage-label { opacity: 1; transform: translateY(0); }

  @media (max-width: 600px) {
    .ot__stage-label { font-size: calc(var(--ot-timeline-size) - 1px); }
    .ot__timeline { margin-bottom: 64px; }
  }

  /* ── Demo loop ─────────────────────────────────────
     Optional one-shot pulse that walks across the nodes once
     after the initial reveal finishes. The .ot--demo class
     enables it; .is-demo-active is toggled by JS during play.
     Each node lights up via .ot__stage.is-active for ~600ms
     before passing the baton to the next. */
  .ot--demo .ot__stage.is-active .ot__node-dot {
    transform: scale(1.4);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ot-accent) 18%, transparent);
  }
  .ot--demo .ot__stage.is-active .ot__node-ring {
    opacity: 1;
    border-color: var(--ot-accent);
  }
  .ot--demo .ot__node-dot,
  .ot--demo .ot__node-ring {
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1),
                opacity 0.4s ease,
                box-shadow 0.45s ease,
                border-color 0.4s ease;
  }

  /* ── FAQ ───────────────────────────────────────────
     Native <details>/<summary> accordions. Plus icon rotates
     into an X (vertical bar shrinks to 0) when open — clean
     and minimal, no JS required. */
  .ot__faq {
    margin-bottom: 56px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease 0.9s, transform 0.7s ease 0.9s;
  }
  .ot.is-in-view .ot__faq { opacity: 1; transform: translateY(0); }
  .ot__faq-heading {
    font-family: var(--ot-eyebrow-font);
    font-weight: var(--ot-eyebrow-weight);
    font-size: var(--ot-eyebrow-size);
    letter-spacing: var(--ot-eyebrow-letter-spacing);
    text-transform: uppercase;
    color: var(--ot-muted);
    text-align: center;
    margin: 0 0 32px;
    margin-inline-end: calc(var(--ot-eyebrow-letter-spacing) * -1);
  }
  .ot__faq-list {
    border-top: 1px solid var(--ot-faint);
  }
  .ot__faq-item {
    border-bottom: 1px solid var(--ot-faint);
  }
  .ot__faq-question {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    font-family: var(--ot-faq-q-font);
    font-weight: var(--ot-faq-q-weight);
    font-size: var(--ot-faq-q-size);
    color: var(--ot-text);
    user-select: none;
  }
  .ot__faq-question::-webkit-details-marker { display: none; }
  .ot__faq-question::marker { display: none; }

  /* Chevron toggle. Points down at rest; rotates 180° (pointing
     up) when the item is open. The toggle is driven by [open]
     AND the JS-set .is-closing class — during a close animation
     [open] is still true (it's removed at transitionend), so we
     exclude .is-closing here to flip the chevron back to its
     resting position the instant the user clicks. */
  .ot__faq-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: currentColor;
  }
  .ot__faq-toggle svg {
    display: block;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform-origin: 50% 50%;
  }
  .ot__faq-item[open]:not(.is-closing) .ot__faq-toggle svg {
    transform: rotate(180deg);
  }
  /* Animated collapse wrapper. JS sets the inline `height` for
     the duration of the open/close transition (0 → scrollHeight
     or scrollHeight → 0); transitionend clears the inline style
     and CSS takes over: height auto when [open], height 0 when
     closed. overflow: hidden clips content during the animation. */
  .ot__faq-collapse {
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .ot__faq-item:not([open]) .ot__faq-collapse {
    height: 0;
  }
  .ot__faq-answer {
    padding: 0 0 24px;
    font-family: var(--ot-faq-a-font);
    font-weight: var(--ot-faq-a-weight);
    font-size: var(--ot-faq-a-size);
    line-height: 1.6;
    color: var(--ot-muted);
  }
  .ot__faq-answer p:first-child { margin-top: 0; }
  .ot__faq-answer p:last-child  { margin-bottom: 0; }
  .ot__faq-answer a {
    color: var(--ot-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  /* ── Support row ───────────────────────────────────
     Quiet secondary CTA at the very bottom. Inline text + a
     link with a small arrow. */
  .ot__support {
    text-align: center;
    margin: 0;
    font-family: var(--ot-body-font);
    font-size: var(--ot-body-size);
    color: var(--ot-muted);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease 1s, transform 0.7s ease 1s;
  }
  .ot.is-in-view .ot__support { opacity: 1; transform: translateY(0); }
  .ot__support-text { margin-right: 6px; }
  .ot__support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ot-text);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    transition: background-size 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .ot__support-link:hover { background-size: 0 1px; }
  .ot__support-arrow { transition: transform 0.35s ease; }
  .ot__support-link:hover .ot__support-arrow { transform: translateX(4px); }

  /* ── Reduced motion ────────────────────────────────
     Honor the user's motion preference. Skip the staggered
     entrance and the demo loop — show the final state on
     load and rely on the static layout. */
  @media (prefers-reduced-motion: reduce) {
    .ot__stamp,
    .ot__eyebrow,
    .ot__heading,
    .ot__hairline,
    .ot__subtitle,
    .ot__field,
    .ot__actions,
    .ot__stage::before,
    .ot__node,
    .ot__stage-label,
    .ot__faq,
    .ot__faq-collapse,
    .ot__support {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
    .ot__hairline { transform: scaleX(1) !important; }
    .ot__stage::before { transform: scaleX(1) !important; }
    .ot__node { transform: scale(1) !important; }
  }
/* END_SECTION:order-tracking */

/* START_SECTION:page (INDEX:37) */
/* ── Section root ────────────────────────────────────────── */
  .page-x {
    display: block;
    background-color: var(--pg-bg);
    color: var(--pg-body-color);
    padding: var(--pg-pad-top) var(--pg-pad-h) var(--pg-pad-bottom);
    font-family: var(--pg-body-font);
    font-weight: var(--pg-body-weight);
  }
  .page-x__inner {
    max-width: var(--pg-max-width);
    margin: 0 auto;
    width: 100%;
  }

  /* ── Header (eyebrow + title) ────────────────────────────── */
  .page-x__header {
    display: block;
    text-align: var(--pg-title-align);
    margin: 0 0 var(--pg-title-margin-bottom);
  }
  .page-x__eyebrow {
    font-family: var(--pg-eyebrow-font);
    font-weight: var(--pg-eyebrow-weight);
    font-size: var(--pg-eyebrow-size);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pg-eyebrow-color);
    margin: 0 0 24px;
  }
  .page-x__title {
    font-family: var(--pg-title-font);
    font-weight: var(--pg-title-weight);
    font-size: var(--pg-title-size);
    line-height: 1.1;
    letter-spacing: var(--pg-title-ls);
    text-transform: var(--pg-title-transform);
    color: var(--pg-title-color);
    margin: 0;
  }

  /* ── Body content (prose) ────────────────────────────────── */
  .page-x__content {
    font-family: var(--pg-body-font);
    font-weight: var(--pg-body-weight);
    font-size: var(--pg-body-size);
    line-height: var(--pg-body-lh);
    color: var(--pg-body-color);
    /* Match the editorial typography of the policy pages: left-
       aligned on mobile (narrow viewports produce ugly word gaps
       when justified) and justified on desktop for that long-form
       editorial feel. Hyphens fill in to soften any awkward gaps
       in the justified text. */
    text-align: left;
    hyphens: auto;
  }
  @media screen and (min-width: 1100px) {
    .page-x__content {
      text-align: justify;
    }
  }

  /* Spacing between block-level elements inside the rich text */
  .page-x__content > * + * {
    margin-top: var(--pg-paragraph-spacing);
  }

  /* Headings inside body content — match policy-page treatment:
     compact uppercase labels in the body font (NOT the heading
     font), all sized roughly to match the body so they read as
     section delimiters rather than a hierarchy of decorative
     titles. The page's H1 is the section title above; these H2/H3
     are inside the rich text and should feel like editorial
     dividers. */
  .page-x__content h1,
  .page-x__content h2,
  .page-x__content h3,
  .page-x__content h4,
  .page-x__content h5,
  .page-x__content h6 {
    font-family: var(--pg-body-font);
    font-weight: 600;
    color: var(--pg-heading-color);
    line-height: 1.4;
    margin-top: 2.4em;
    margin-bottom: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* Headings shouldn't be justified — looks weird with short
       lines. Always left-align them regardless of the body's
       justification. */
    text-align: left;
  }
  /* All heading levels share the body font size — the visual
     hierarchy comes from the spacing above each, not from font
     size escalation. */
  .page-x__content h2,
  .page-x__content h3,
  .page-x__content h4,
  .page-x__content h5,
  .page-x__content h6 { font-size: 1em; }
  .page-x__content > h2:first-child,
  .page-x__content > h3:first-child,
  .page-x__content > h4:first-child,
  .page-x__content > h5:first-child,
  .page-x__content > h6:first-child {
    margin-top: 0;
  }

  /* Paragraphs */
  .page-x__content p {
    margin: 0;
  }

  /* Lists — always left-aligned regardless of body justification.
     Bulleted/numbered lists look bad when justified because each
     line is short and gets visible word-gaps. */
  .page-x__content ul,
  .page-x__content ol {
    padding-left: 1.5em;
    margin: 0;
    text-align: left;
  }
  .page-x__content ul ul,
  .page-x__content ul ol,
  .page-x__content ol ul,
  .page-x__content ol ol {
    margin-top: 0.4em;
  }
  .page-x__content li {
    margin-bottom: 0.4em;
  }
  .page-x__content li:last-child {
    margin-bottom: 0;
  }

  /* Links */
  .page-x__content a {
    color: var(--pg-link);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .page-x__content a:hover {
    color: var(--pg-link-hover);
    text-decoration-color: var(--pg-link-hover);
  }

  /* Strong / em */
  .page-x__content strong { font-weight: 600; }
  .page-x__content em { font-style: italic; }

  /* Blockquote */
  .page-x__content blockquote {
    margin: 0;
    padding: 8px 0 8px 24px;
    border-left: 2px solid var(--pg-divider);
    font-style: italic;
    color: var(--pg-body-color);
    opacity: 0.85;
  }
  .page-x__content blockquote p { margin: 0; }
  .page-x__content blockquote + blockquote { margin-top: 1em; }

  /* Horizontal rule */
  .page-x__content hr {
    border: 0;
    border-top: 1px solid var(--pg-divider);
    margin: 2em 0;
  }

  /* Images & media */
  .page-x__content img,
  .page-x__content video,
  .page-x__content iframe {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .page-x__content figure {
    margin: 0;
  }
  .page-x__content figcaption {
    margin-top: 12px;
    font-size: 0.85em;
    color: var(--pg-body-color);
    opacity: 0.7;
    text-align: center;
  }

  /* Inline code & pre */
  .page-x__content code {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    padding: 1px 6px;
    background: var(--pg-divider);
    border-radius: 3px;
  }
  .page-x__content pre {
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: var(--pg-divider);
    padding: 16px 20px;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
  }
  .page-x__content pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  /* Tables */
  .page-x__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
  }
  .page-x__content thead th {
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--pg-divider);
    padding: 10px 12px;
  }
  .page-x__content tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pg-divider);
  }
  .page-x__content tbody tr:last-child td {
    border-bottom: 0;
  }

  /* ── Buttons rendered inside page content ────────────────────
     Shopify auto-injects native <button> elements into certain
     page types (e.g. the opt-out form on the "Your Privacy
     Choices" page). Those buttons aren't part of our own markup
     so we can't add classes to them — we style every <button>
     and submit input inside .page-x__content to match the global
     primary button defined in settings_schema.json. Colors and
     sizing come from CSS variables emitted by the style block
     above so theme-editor changes still update in live preview. */
  .page-x__content button,
  .page-x__content input[type="submit"],
  .page-x__content input[type="button"] {
    display: inline-block;
    background-color: var(--pg-btn-bg);
    color: var(--pg-btn-text);
    border: var(--pg-btn-bw) solid var(--pg-btn-border);
    border-radius: var(--pg-btn-br);
    padding: var(--pg-btn-pad-v) var(--pg-btn-pad-h);
    font-family: var(--text-5-font);
    font-weight: var(--text-5-weight);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    margin: 8px 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .page-x__content button:hover,
  .page-x__content input[type="submit"]:hover,
  .page-x__content input[type="button"]:hover {
    background-color: var(--pg-btn-bg-hover);
    color: var(--pg-btn-text-hover);
    border-color: var(--pg-btn-border-hover);
  }
  .page-x__content button:disabled,
  .page-x__content input[type="submit"]:disabled,
  .page-x__content input[type="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .page-x__content button:focus-visible,
  .page-x__content input[type="submit"]:focus-visible,
  .page-x__content input[type="button"]:focus-visible {
    outline: 2px solid var(--pg-btn-border-hover);
    outline-offset: 2px;
  }

  /* Reveal animation — gated by data-reveal-enabled on .page-x */
  .page-x[data-reveal-enabled="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .page-x[data-reveal-enabled="true"] [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce) {
    .page-x[data-reveal-enabled="true"] [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:page */

/* START_SECTION:password (INDEX:38) */
/* ─────────────────────────────────────────────────────────
     ROOT — full viewport stage
     ───────────────────────────────────────────────────────── */
  .pwd {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: var(--pw-min-h);
    min-height: var(--pw-min-h-sv);
    overflow: hidden;
    background-color: var(--pw-bg-color);
    color: var(--pw-text-color);
    isolation: isolate;
  }

  /* Background layers — stacked with z-index, content sits on top */
  .pwd__bg,
  .pwd__overlay,
  .pwd__grain,
  .pwd__spotlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .pwd__bg        { z-index: 0; }
  .pwd__overlay   { z-index: 1; }
  .pwd__grain     { z-index: 2; }
  .pwd__spotlight { z-index: 3; }

  /* ── Background: image ── */
  .pwd__bg--image {
    background-size: cover;
    background-position: var(--pw-bg-image-position);
    background-repeat: no-repeat;
    background-image: var(--pw-bg-image);
  }

  /* ── Background: video ── */
  .pwd__bg--video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ── Background: animated mesh gradient ── */
  .pwd__bg--mesh {
    background-color: var(--pw-mesh-base);
    background-image:
      radial-gradient(at 12% 18%, var(--pw-mesh-1) 0px, transparent 55%),
      radial-gradient(at 82% 24%, var(--pw-mesh-2) 0px, transparent 55%),
      radial-gradient(at 76% 86%, var(--pw-mesh-3) 0px, transparent 55%),
      radial-gradient(at 18% 78%, var(--pw-mesh-4) 0px, transparent 55%);
    background-size: 200% 200%;
    animation: pwd-mesh-drift var(--pw-mesh-speed) ease-in-out infinite alternate;
  }
  @keyframes pwd-mesh-drift {
    0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
    50%  { background-position: 30% 20%, 70% 30%, 70% 80%, 30% 70%; }
    100% { background-position: 60% 40%, 40% 60%, 40% 60%, 60% 40%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pwd__bg--mesh { animation: none; }
  }

  /* ── Overlay scrim ── */
  .pwd__overlay {
    background-color: var(--pw-overlay-color);
    opacity: var(--pw-overlay-opacity);
  }

  /* ── Grain texture ──
     Always inlined; rendered only when the [data-enable-grain="true"]
     attribute is present (the .pwd__grain element only renders then). */
  .pwd[data-enable-grain="true"] .pwd__grain {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: var(--pw-grain-opacity);
    mix-blend-mode: overlay;
  }

  /* ── Cursor spotlight ── */
  .pwd[data-enable-spotlight="true"] .pwd__spotlight {
    background: radial-gradient(
      var(--pw-spotlight-size) circle at var(--mx, 50%) var(--my, 50%),
      var(--pw-spotlight-color),
      transparent 60%
    );
    opacity: var(--pw-spotlight-strength);
    transition: opacity 0.4s ease;
  }

  /* ─────────────────────────────────────────────────────────
     LAYOUT — main, side labels, bottom bar
     ───────────────────────────────────────────────────────── */
  .pwd__main {
    position: relative;
    z-index: 4;
    flex: 1;
    display: flex;
    align-items: var(--pw-valign-items);
    justify-content: center;
    padding: 96px 24px;
  }
  @media screen and (min-width: 900px) {
    .pwd__main {
      padding: 120px 64px;
    }
  }
  .pwd__content {
    width: 100%;
    max-width: var(--pw-max-w);
    text-align: var(--pw-text-align);
    display: flex;
    flex-direction: column;
    align-items: var(--pw-halign-items);
    gap: 24px;
  }

  /* ── Side labels (vertical text) ── */
  .pwd__side {
    position: absolute;
    top: 50%;
    z-index: 4;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--pw-muted-color);
    white-space: nowrap;
    pointer-events: none;
    display: none;
  }
  @media screen and (min-width: 1100px) {
    .pwd__side {
      display: block;
    }
  }
  .pwd__side--left {
    left: 32px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left center;
  }
  .pwd__side--right {
    right: 32px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: right center;
  }

  /* ── Bottom bar ── */
  .pwd__bottom {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 24px;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pw-muted-color);
  }
  .pwd__bottom > :nth-child(1) { text-align: left; }
  .pwd__bottom > :nth-child(2) { text-align: center; }
  .pwd__bottom > :nth-child(3) { text-align: right; }
  @media screen and (max-width: 720px) {
    .pwd__bottom {
      grid-template-columns: 1fr;
      gap: 6px;
      text-align: center;
    }
    .pwd__bottom > * { text-align: center !important; }
  }

  /* ─────────────────────────────────────────────────────────
     BLOCKS
     ───────────────────────────────────────────────────────── */

  /* ── Logo ── */
  .pwd-logo {
    line-height: 0;
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
  }
  .pwd-logo--text {
    font-family: var(--pw-heading-font);
    font-weight: var(--pw-heading-weight);
    letter-spacing: 0.04em;
    line-height: 1;
    font-size: var(--pw-logo-text-size);
    color: var(--pw-logo-text-color);
  }
  .pwd-logo img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
  }
  .pwd-logo:not(.pwd-logo--text) img {
    max-width: var(--pw-logo-img-max);
  }

  /* ── Heading ── */
  .pwd-heading {
    font-family: var(--pw-heading-font);
    font-weight: var(--pw-heading-weight);
    letter-spacing: -0.022em;
    line-height: 1;
    margin: 0;
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
    color: var(--pw-heading-color, inherit);
    text-wrap: balance;
    font-size: clamp(var(--pw-heading-size-mobile), 8vw, var(--pw-heading-size-desktop));
  }
  .pwd-heading__morph {
    display: inline-block;
    position: relative;
  }
  .pwd-heading__word {
    display: inline-block;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pwd-heading__word.is-out {
    opacity: 0;
    transform: translateY(-12px);
  }
  .pwd-heading__word.is-in {
    opacity: 0;
    transform: translateY(12px);
  }

  /* ── Text ── */
  .pwd-text {
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    line-height: 1.6;
    margin: 0;
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
    color: var(--pw-text-color-block, inherit);
    text-wrap: pretty;
    max-width: 540px;
    font-size: var(--pw-text-size, 16px);
  }
  .pwd-text--eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 11px;
    color: var(--pw-accent-color);
  }

  /* ── Countdown ── */
  .pwd-countdown {
    display: flex;
    gap: clamp(20px, 4vw, 48px);
    align-items: flex-start;
    font-family: var(--pw-heading-font);
    font-weight: var(--pw-heading-weight);
    color: var(--pw-countdown-color, inherit);
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
  }
  .pwd-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  .pwd-countdown__num {
    font-size: clamp(36px, 8vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }
  .pwd-countdown__label {
    margin-top: 12px;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pw-muted-color);
  }
  .pwd-countdown--done {
    font-size: clamp(24px, 4vw, 40px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* ── Email signup ── */
  .pwd-email {
    width: 100%;
    max-width: 480px;
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
  }
  .pwd-email__eyebrow {
    margin: 0 0 14px;
  }
  .pwd-email__form {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--pw-divider-color);
    transition: border-color 0.3s ease;
  }
  .pwd-email__form:focus-within {
    border-bottom-color: var(--pw-text-color);
  }
  .pwd-email__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 14px 0;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 15px;
    color: inherit;
    min-width: 0;
  }
  .pwd-email__input::placeholder {
    color: var(--pw-muted-color);
  }
  .pwd-email__submit {
    background: transparent;
    border: 0;
    padding: 14px 0 14px 16px;
    cursor: pointer;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pwd-email__submit:hover { gap: 12px; }
  .pwd-email__submit svg {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pwd-email__submit:hover svg { transform: translateX(4px); }
  .pwd-email__msg {
    margin: 12px 0 0;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--pw-muted-color);
  }
  .pwd-email__msg--success {
    color: var(--pw-accent-color);
  }
  .pwd-email__msg--error {
    color: var(--pw-error-color);
  }

  /* ── Password unlock form ── */
  .pwd-unlock {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 16px;
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
  }
  .pwd-unlock__trigger {
    background: transparent;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pw-muted-color);
    border-bottom: 1px solid currentColor;
    transition: color 0.3s ease;
  }
  .pwd-unlock__trigger:hover {
    color: var(--pw-text-color);
  }
  .pwd-unlock__panel {
    display: none;
    width: 100%;
    max-width: 360px;
    margin-top: 8px;
  }
  .pwd-unlock.is-open .pwd-unlock__panel {
    display: block;
    animation: pwd-fade-down 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pwd-unlock.is-open .pwd-unlock__trigger {
    display: none;
  }
  @keyframes pwd-fade-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
  }
  .pwd-unlock__form {
    display: flex;
    border-bottom: 1px solid var(--pw-divider-color);
    transition: border-color 0.3s ease;
  }
  .pwd-unlock__form:focus-within {
    border-bottom-color: var(--pw-text-color);
  }
  .pwd-unlock__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 14px 0;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 15px;
    color: inherit;
    min-width: 0;
    letter-spacing: 0.1em;
  }
  .pwd-unlock__submit {
    background: transparent;
    border: 0;
    padding: 14px 0 14px 16px;
    cursor: pointer;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
  }
  .pwd-unlock__error {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--pw-error-color);
  }

  /* ── Marquee ──
     Width is calc(100% + 48px) so the band extends past the section's
     24px horizontal padding to span edge-to-edge. */
  .pwd-marquee {
    overflow: hidden;
    padding: 14px 0;
    border-top: 1px solid var(--pw-divider-color);
    border-bottom: 1px solid var(--pw-divider-color);
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: inherit;
    margin-top: var(--pw-block-mt, 24px);
    margin-bottom: var(--pw-block-mb, 24px);
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
  }
  .pwd-marquee__track {
    display: inline-flex;
    gap: 48px;
    white-space: nowrap;
    animation: pwd-marquee var(--marquee-duration, 30s) linear infinite;
    will-change: transform;
  }
  .pwd-marquee__sep {
    opacity: 0.5;
  }
  @keyframes pwd-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pwd-marquee__track { animation: none; }
  }

  /* ── Social ──
     Two display modes: 'icons' (small SVG glyphs) or 'text' (uppercase
     labels). The display mode is controlled per-block via the
     pwd-social--icons / pwd-social--text modifier classes. */
  .pwd-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
    justify-content: var(--pw-social-justify, flex-start);
    gap: var(--pw-social-gap, 20px);
  }
  .pwd-social a {
    color: var(--pw-muted-color);
    transition: color 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .pwd-social a:hover {
    color: var(--pw-text-color);
  }
  /* Text mode — uppercase tracked-out labels */
  .pwd-social--text a {
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: var(--pw-social-text-size, 11px);
  }
  /* Icon mode — SVGs sized by icon_size; the SVG inherits color
     via stroke="currentColor" (already set in the markup). */
  .pwd-social--icons a {
    width: var(--pw-social-icon-size, 18px);
    height: var(--pw-social-icon-size, 18px);
  }
  .pwd-social--icons a svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ── Button ── */
  .pwd-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    font-family: var(--pw-body-font);
    font-weight: var(--pw-body-weight);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
  }
  .pwd-button:hover {
    background-color: var(--pw-text-color);
    color: var(--pw-bg-color);
  }
  .pwd-button--ghost {
    border-bottom: 1px solid currentColor;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    padding: 6px 0;
  }
  .pwd-button--ghost:hover {
    background: transparent;
    color: inherit;
    opacity: 0.7;
  }

  /* ── Spacer ── */
  .pwd-spacer {
    display: block;
    height: var(--pw-spacer-mobile, 16px);
  }
  @media screen and (min-width: 900px) {
    .pwd-spacer {
      height: var(--pw-spacer-desktop, 32px);
    }
  }

  /* ── Divider ── */
  .pwd-divider {
    border: 0;
    border-top: 1px solid var(--pw-divider-color);
    margin-top: var(--pw-block-mt, 16px);
    margin-bottom: var(--pw-block-mb, 16px);
    margin-left: auto;
    margin-right: auto;
    width: var(--pw-divider-w, 80px);
  }

  /* ── Klaviyo block ── */
  .pwd-klaviyo {
    margin-top: var(--pw-block-mt, 0);
    margin-bottom: var(--pw-block-mb, 0);
    max-width: var(--pw-kv-max-w, none);
  }
  .pwd-klaviyo__eyebrow {
    margin: 0 0 14px;
    text-align: center;
  }
  .pwd-klaviyo__embed {
    width: 100%;
  }
  .pwd-klaviyo__placeholder {
    padding: 24px;
    border: 1px dashed #999;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
  }
  .pwd-klaviyo__trigger-wrap {
    text-align: center;
  }
  .pwd-klaviyo__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    background: var(--pw-kv-trigger-bg, #111111);
    color: var(--pw-kv-trigger-text, #ffffff);
    border: 1px solid var(--pw-kv-trigger-bg, #111111);
    border-radius: var(--pw-kv-trigger-radius, 0);
    font-family: var(--text-5-font);
    font-weight: var(--text-5-weight);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .pwd-klaviyo__trigger:hover {
    background: var(--pw-kv-trigger-bg-hover, #000000);
    color: var(--pw-kv-trigger-text-hover, #ffffff);
    border-color: var(--pw-kv-trigger-bg-hover, #000000);
  }
  /* Suppress global button hover-fill effect (the same
     ::before slider that affects footer-localization). */
  .pwd-klaviyo__trigger::before,
  .pwd-klaviyo__trigger::after {
    display: none !important;
    content: none !important;
  }

  /* ── Klaviyo popup overlay ──
     The JS moves the overlay element to <body> on init to escape any
     transformed ancestor that would create a containing block and break
     position: fixed. Selectors target the [data-pwd-klaviyo-overlay]
     attribute (set per-block) rather than nesting under the section. */
  .pwd-klaviyo__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
    box-sizing: border-box;
  }
  .pwd-klaviyo__overlay.is-open {
    display: flex;
    opacity: 1;
  }

  .pwd-klaviyo__overlay .pwd-klaviyo__card {
    position: relative;
    background: var(--pw-kv-popup-bg, #ffffff);
    color: var(--pw-kv-popup-text, #111111);
    width: 100%;
    max-width: var(--pw-kv-popup-w, 480px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 48px 32px 32px;
    box-sizing: border-box;
    transform: translateY(20px);
    transition: transform 0.3s ease;
  }
  .pwd-klaviyo__overlay.is-open .pwd-klaviyo__card {
    transform: translateY(0);
  }

  .pwd-klaviyo__overlay .pwd-klaviyo__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    padding: 0;
  }
  .pwd-klaviyo__overlay .pwd-klaviyo__close:hover {
    opacity: 1;
  }
  .pwd-klaviyo__overlay .pwd-klaviyo__close::before,
  .pwd-klaviyo__overlay .pwd-klaviyo__close::after {
    display: none !important;
    content: none !important;
  }

  .pwd-klaviyo__overlay .pwd-klaviyo__heading {
    font-family: var(--text-2-font);
    font-weight: var(--text-2-weight);
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 12px;
    text-align: center;
  }
  .pwd-klaviyo__overlay .pwd-klaviyo__body {
    font-family: var(--text-4-font);
    font-weight: var(--text-4-weight);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 24px;
    opacity: 0.85;
    text-align: center;
  }
  /* Body scroll lock when popup is open. We add this to the
     html element from JS so it works even when the body has
     position: fixed or other overflow tricks active. */
  html.pwd-klaviyo-locked {
    overflow: hidden !important;
  }

  /* ─────────────────────────────────────────────────────────
     REVEAL ANIMATION
     ───────────────────────────────────────────────────────── */
  .pwd[data-reveal-enabled="true"] [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .pwd[data-reveal-enabled="true"] [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  @media (prefers-reduced-motion: reduce) {
    .pwd[data-reveal-enabled="true"] [data-reveal] {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:password */

/* START_SECTION:product-centered (INDEX:40) */
/* ════════════════════════════════════════════════════════════
     PRODUCT-CENTERED — class prefix: pc, CSS-var prefix: --pc-*
     Mobile-first base; desktop layout takes over at 1024px. All
     section-specific tokens come from the inline style block
     above; the rules here are static and cached by Shopify. */

  .pc {
    width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  .pc * { box-sizing: border-box; }

  /* ── Slides ────────────────────────────────────────────────── */
  .pc__slide {
    width: 100%;
    position: relative;
  }
  .pc__slide--empty {
    aspect-ratio: 4 / 5;
    background: #f5f5f5;
  }
  .pc__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ── Mobile gallery: HORIZONTAL SWIPE ─────────────────────────
     Mobile redesign: replaces the previous vertical-stack + fixed-
     drawer layout. The gallery is now a side-swipable carousel
     (one image per viewport, scroll-snap to the next), and the
     product info (title / color / ATC / description) sits in a
     normal block UNDER the gallery instead of in a floating drawer.

     Each slide is a flex item at 100vw with snap-align: start, so
     a horizontal swipe gesture lands exactly on the next image
     with no inertia overshoot. Native overflow-x:auto + touch
     scrolling preserves momentum on iOS/Android.

     Desktop layout (sticky-ish 3-column grid) is unaffected — its
     rules live in @media (min-width: 1024px) below and override
     these via the more-specific .pc__gallery .pc__slide selectors. */
  @media (max-width: 1023px) {
    .pc__gallery {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      width: 100%;
      pointer-events: auto;
      /* Native momentum on iOS Safari — the property is non-standard
         but a no-op on browsers that don't recognize it. */
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .pc__gallery::-webkit-scrollbar {
      display: none;
    }
    .pc__slide {
      /* flex: 0 0 100% locks each slide to one full viewport width
         and prevents it from shrinking when the row tries to fit
         all slides into the parent — critical for snap behavior. */
      flex: 0 0 100%;
      min-width: 100%;
      width: 100%;
      scroll-snap-align: start;
      /* Reset any vertical-mode props that previous iterations of
         this file set (display:flex centering, min-height:100svh,
         etc.) so a single source of truth survives. */
      min-height: 0;
      display: block;
      /* Each slide takes a 3:4 portrait slot — height = 100vw * 4/3.
         For typical 4:5 source images this is only ~7% taller than
         natural, so visible cropping is minimal but the image reads
         as a more substantial portrait that fills more of the
         viewport. Effect on iPhone 15 Pro Max (430×932): slide is
         430×573 instead of 430×537, ~36px taller — enough that the
         drawer content + inline ATC sit below the fold, so scrolling
         down actually shows the floating ATC sliding in. */
      aspect-ratio: 3 / 4;
      overflow: hidden;
    }
    /* Pair the aspect-ratio with object-fit:cover so the image
       fills the slot fully. Override the base .pc__img height:auto.
       Centered crop = balanced trim of top/bottom or sides
       depending on which dimension overflows the 3:4 box.

       Note: .pc__img is used by IMG, VIDEO, AND IFRAME elements
       (video.pc__video and iframe.pc__video also carry it). All
       three respect width/height; only IMG and VIDEO respect
       object-fit. IFRAME doesn't, so it gets a dedicated rule
       below to fill the slot edge-to-edge instead. */
    .pc__slide .pc__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .pc__slide .pc__video--iframe {
      object-fit: unset;
      border: 0;
    }
    .pc__slide--empty {
      min-height: 0;
    }
  }

  /* Mobile image dot indicators — vertical pill-style markers on the
     left edge of the viewport. Each pill is a small vertical bar
     that elongates when active (its image is the current one in
     view). The pills sit in a translucent floating "rail" container
     so they read as a single navigation element rather than scattered
     dots — and the rail's padding makes each pill comfortable to tap
     even at the small visual size. Tapping any pill smooth-scrolls to
     that image. Hides itself once the user has scrolled past the
     gallery entirely. */
  .pc__dots {
    display: none;
  }
  .pc__dot {
    position: relative;
    width: 3px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: height 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                background 0.2s ease,
                width 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .pc__dot:focus {
    outline: none;
  }
  .pc__dot:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 6px;
  }
  /* Invisible tap-zone overlay — 40px-tall, 40px-wide click target
     around each visual pill so the user doesn't need surgical
     accuracy. Doesn't affect layout (absolute). */
  .pc__dot::after {
    content: '';
    position: absolute;
    top: -11px;
    bottom: -11px;
    left: -18px;
    right: -18px;
  }
  .pc__dot.is-active {
    background: rgba(255, 255, 255, 1);
    height: 34px;
    width: 3px;
  }

  /* Scroll hint — small arrow + label that floats over the gallery
     to tell users there are more images below. Visibility is gated
     by data-show-on so the merchant controls whether it appears on
     mobile only or on both. Hidden by default; viewport-specific
     styles re-enable display when the attribute permits.

     Mobile variant: dark frosted-glass pill above the drawer peek,
     centered horizontally — sits against the image edge.

     Desktop variant: lighter pill near the bottom-center of the
     viewport, subtle enough not to compete with the centered
     editorial layout — works equally well on light or dark hero
     images thanks to the soft tint + blur. */
  .pc__scroll-hint {
    display: none;
  }
  .pc__scroll-hint-arrow {
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    animation: pc-hint-bounce 1.6s ease-in-out infinite;
  }
  @keyframes pc-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
  }

  /* ── Mobile variant ── */
  @media (max-width: 1023px) {
    /* Scroll hint is hidden on mobile in the new horizontal-swipe
       layout — the dot indicators below the gallery already
       communicate "there are more images" and the swipe affordance
       is the platform standard for carousels, so a floating "scroll
       for more" pill is redundant. The desktop variant of the hint
       (in its own @media block above) still applies and the
       merchant's data-show-on toggle still governs whether it
       appears on desktop. */
    .pc__scroll-hint[data-show-on="mobile"],
    .pc__scroll-hint[data-show-on="both"] {
      display: none !important;
    }
  }

  /* ── Desktop variant (only when show-on = both) ──
     Positioned overlaying the bottom edge of the image area so the
     hint reads as a caption inline with the gallery, not a viewport-
     wide bottom toast. The `top` calc value is the gallery's bottom
     edge (sticky top + visible height) minus a 56px gap so the pill
     floats just inside the image, not flush against the edge. */
  @media (min-width: 1024px) {
    .pc__scroll-hint[data-show-on="both"] {
      /* Was position: fixed when the gallery itself was position:
         sticky — hint stayed glued to the viewport because the image
         it captioned did too. With the gallery now in normal flow,
         the hint follows. position: absolute (resolved against
         .pc__layout's positioned context — set below) places it at
         a fixed offset INSIDE the section instead of the viewport,
         so the hint scrolls past with the rest of the section
         content. */
      position: absolute;
      bottom: auto;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 18px;
      background: rgba(255, 255, 255, 0.78);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 999px;
      color: rgba(0, 0, 0, 0.65);
      font-family: inherit;
      font-size: 10px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      z-index: 50;
      pointer-events: none;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      transition: opacity 0.4s ease, transform 0.4s ease, top 0.3s ease;
      opacity: 1;
    }
    .pc__scroll-hint[data-show-on="both"] .pc__scroll-hint-arrow {
      width: 12px;
      height: 12px;
    }
    .pc__scroll-hint[data-show-on="both"].is-dismissed {
      opacity: 0;
      transform: translateX(-50%) translateY(8px);
    }

    /* Gallery is now at margin-top: header+24 with height slide_h.
       Image bottom in layout coords sits at header + 24 + slide_h.
       Hint floats 56px above that bottom. Uses the same 24 constant
       the gallery and info rules use so all three move together. */
    .pc__scroll-hint[data-show-on="both"] {
      top: calc(var(--pc-header-offset) + 8px + var(--pc-slide-h) - 56px);
    }
  }

  @media (max-width: 1023px) {
    /* Horizontal dots, centered, just below the swipe gallery.
       Was previously a fixed vertical pill-rail on the viewport
       left edge — that made sense for vertical scroll, but for a
       horizontal swipe carousel the more natural indicator is a
       row of dots inline beneath the images.

       position: relative + margin: -32px auto -8px lifts the row
       up to overlap the bottom of the last image slightly so it
       reads as part of the gallery rather than a separate widget,
       while still receiving its own taps. */
    /* Floating overlay pill — sits ON the image at the bottom
       center. Frosted-glass background so the dots stay readable
       against ANY image (light, dark, or busy). The pill scrolls
       with the gallery since it's anchored to .pc__layout (which
       moves with page scroll), so it naturally disappears with the
       gallery when the user scrolls past. */
    .pc__dots {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      margin: 0;
      /* Frosted-glass background: low-opacity dark tint + heavy
         blur. Together they make ANY image behind the pill read
         as a soft neutral, so the white dots have guaranteed
         contrast without needing per-image color logic. */
      background: rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 999px;
      z-index: 2;
      pointer-events: auto;
      transition: opacity 0.25s ease;
      opacity: 1;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    }
    /* White dots on the dark pill — high contrast regardless of
       what's behind the gallery. */
    .pc__dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      transition: width 0.32s cubic-bezier(0.32, 0.72, 0, 1),
                  background 0.2s ease;
    }
    .pc__dot.is-active {
      width: 18px;
      height: 5px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 1);
    }
    /* Past-gallery state — leave defaults intact (dots scroll
       with the gallery naturally since they're anchored to the
       same layout container). */
    .pc__dots.is-past-gallery {
      opacity: 1;
      pointer-events: auto;
    }
  }

  /* Body scroll lock — applied by JS when the mobile drawer expands.
     position:fixed + top:-scrollY is required for iOS Safari, which
     ignores overflow:hidden on body unless the body is taken out of
     the scroll context entirely. The JS saves the scrollY on lock
     and restores it on unlock via window.scrollTo, so the page
     doesn't jump to the top when the drawer closes. */
  body.pc-drawer-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    touch-action: none;
  }

  /* ── Typography ────────────────────────────────────────────── */
  .pc__eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-foreground-muted, #888);
    display: block;
    margin-bottom: 8px;
  }
  .pc__title {
    font-family: var(--text-2-font, inherit);
    font-weight: var(--text-2-weight, 400);
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
  }
  .pc__price {
    font-size: 18px;
    font-weight: 500;
    margin: 16px 0 24px;
  }
  .pc__description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-foreground, #333);
    margin-top: 24px;
  }

  /* ── Description dropdown ──────────────────────────────────── */
  .pc__description-details {
    margin-top: 28px;
  }
  /* Hide native disclosure triangle so only our plus/minus toggle shows. */
  .pc__description-summary::-webkit-details-marker {
    display: none;
  }
  .pc__description-summary::marker {
    display: none;
  }
  /* Single hairline divider directly under the title row — text and
     toggle sit on top of the line. padding-bottom controls how much
     air there is between the row and the divider. */
  .pc__description-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    cursor: pointer;
    user-select: none;
    color: var(--color-foreground, #111);
    -webkit-tap-highlight-color: transparent;
  }
  .pc__description-summary:focus {
    outline: none;
  }
  .pc__description-summary:focus-visible {
    outline: 2px solid var(--color-foreground, #111);
    outline-offset: 4px;
  }
  /* Label typography (color, font family/weight, size, transform,
     letter spacing) is governed by the Product Description schema
     settings via the dynamic style block — same rule that styles
     .pc__description so the dropdown title and its body always
     visually agree. */
  /* Plus / minus toggle — two thin lines that cross like a "+",
     with the vertical line rotating away when open to read as "–". */
  .pc__description-toggle {
    position: relative;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .pc__description-toggle-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pc__description-toggle-line--h {
    transform: translate(-50%, -50%);
  }
  .pc__description-toggle-line--v {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .pc__description-details[open] .pc__description-toggle-line--v {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  /* Content wrapper — overflow:hidden so JS can animate explicit
     height between 0 and the measured scrollHeight on toggle. The
     CSS transition handles the actual easing; JS just writes the
     start/end pixel values. */
  .pc__description-wrap {
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pc__description-details .pc__description {
    margin-top: 0;
    /* padding-top adds breathing room between the divider above and
       the first line of body text so the dropdown reads as a tucked-
       in section rather than text flush against the rule. */
    padding: 22px 0 28px;
    line-height: 1.65;
    color: var(--color-foreground-muted, #555);
  }
  @media (prefers-reduced-motion: reduce) {
    .pc__description-toggle-line,
    .pc__description-wrap {
      transition: none;
    }
  }

  /* ── Variant options ──────────────────────────────────────── */
  .pc__option {
    margin: 0 0 20px;
  }
  .pc__option-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    display: block;
    color: var(--color-foreground-muted, #555);
  }
  .pc__option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pc__option-value {
    min-width: 44px;
    padding: 10px 16px;
    border: 1px solid var(--color-border, #ddd);
    background: transparent;
    color: var(--color-foreground, #111);
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .pc__option-value:hover {
    border-color: var(--color-foreground, #111);
  }
  .pc__option-value.is-active {
    border-color: var(--color-foreground, #111);
    background: var(--color-foreground, #111);
    color: var(--color-background, #fff);
  }
  .pc__option-value.is-unavailable {
    opacity: 0.35;
    text-decoration: line-through;
  }

  /* ── Swatch mode (color option only) ────────────────────────
     Editorial-PDP swatch design. Active selected color name sits
     INLINE with the COLOR label (e.g. "Color: White") so the
     swatch grid itself stays clean — no labels under every swatch
     by default. Optional per-swatch labels are opt-in for merchants
     who prefer a more annotated look.

     Active state uses outline (not box-shadow) so it never overlaps
     adjacent siblings or the label below. Hover is a quiet opacity
     shift — no scale, no transform, no inflation. */

  /* Inline "Color: ActiveValue" pairing in the option label row.
     display:flex (not inline-flex) so this still behaves like a
     block-level label with normal vertical rhythm — the children
     just flow horizontally. */
  .pc__option-label-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Active value pill — softer color and case so it reads as a
     pairing, not a duplicate label. The pseudo-element adds the
     ":" separator visually so the HTML stays clean. */
  .pc__option-label-value {
    color: var(--color-foreground, #111);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.85;
  }
  .pc__option-label-value::before {
    content: '— ';
    margin-right: 2px;
    opacity: 0.5;
  }
  .pc__option-label-value:empty { display: none; }

  /* Row of image tiles. Wraps to a new line when the row overflows
     so a product with 6+ colors still fits cleanly in the narrow
     info column. */
  .pc__option-values--swatch {
    gap: 12px;
    margin-top: 6px;
    align-items: flex-start;
  }
  .pc__option-value--swatch {
    /* Reset the text-button chrome. The visible element is the
       image tile and the optional label — the button itself is
       just a flex container. */
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pc__option-value--swatch:hover .pc__swatch {
    transform: translateY(-2px);
  }
  .pc__option-value--swatch.is-unavailable {
    opacity: 0.45;
    text-decoration: none;
  }
  .pc__option-value--swatch.is-unavailable:hover .pc__swatch {
    transform: none;
  }
  /* The image tile. Size + shape come from the scoped {% style %}
     block above (driven by color_swatch_size + color_swatch_shape).

     Always carries a subtle 1px hairline border for definition when
     inactive so the tile reads as a chip even on white backgrounds.
     Active state replaces it with a clean 2px dark ring via box-
     shadow — box-shadow follows border-radius (outline doesn't), so
     a circle tile gets a circular ring, a rounded tile gets a
     rounded ring, etc. No white halo / inner gap — the ring sits
     directly against the tile, which renders cleaner on circles
     where the halo gap reads as "framed" rather than "selected". */
  .pc__swatch {
    position: relative;
    display: block;
    background: #FAFAFA;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition:
      box-shadow 0.22s ease,
      border-color 0.22s ease,
      transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pc__swatch--image {
    object-fit: cover;
    object-position: center;
  }
  /* Letter fallback when no variant image / featured image exists. */
  .pc__swatch--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F2F2F2;
    color: #999;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
  }
  /* Active state — single clean ring that sits directly against the
     tile edge (no white halo gap, which read awkwardly on circles).
     box-shadow follows border-radius so circle/rounded/square all
     get a ring that hugs their shape. The hairline border is
     transparented out so the ring is the only visible outline. */
  .pc__option-value--swatch.is-active .pc__swatch {
    box-shadow: 0 0 0 2px var(--color-foreground, #111);
    border-color: transparent;
  }
  .pc__option-value--swatch:focus-visible .pc__swatch {
    box-shadow: 0 0 0 2px var(--color-foreground, #111);
    border-color: transparent;
  }
  .pc__option-value--swatch:focus { outline: none; }

  /* Optional name label under each image — opt-in via setting. */
  .pc__swatch-label {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--color-foreground-muted, #888);
    text-align: center;
    max-width: 140px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transition: color 0.18s ease;
  }
  .pc__option-value--swatch.is-active .pc__swatch-label {
    color: var(--color-foreground, #111);
    font-weight: 500;
  }

  @media (prefers-reduced-motion: reduce) {
    .pc__swatch,
    .pc__option-value--swatch { transition: none; }
    .pc__option-value--swatch:hover .pc__swatch { transform: none; }
  }

  /* ── Buttons ──────────────────────────────────────────────── */
  /* Row container — wraps the ATC and the optional wishlist button
     so they sit side-by-side. ATC stretches to fill the remaining
     width; wishlist is a fixed-width square on the right. Spacing
     to whatever's above (option pickers, etc.) moved here from
     .pc__atc so the gap is the same whether or not the wishlist
     is present. */
  .pc__atc-row {
    display: flex;
    align-items: stretch; /* wishlist matches ATC's rendered height */
    gap: 4px;
    margin: 24px 0 0;
    width: 100%;
  }
  .pc__atc-row .pc__atc {
    /* Override the standalone .pc__atc's margin / width — the row
       container now owns the spacing and the flex layout governs
       width sizing. */
    flex: 1 1 auto;
    margin: 0;
    width: auto;
  }
  .pc__atc {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    margin: 24px 0 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* Force the action label + inline price onto a single line. With
       width: 100% the button is full-width, but its text content can
       still wrap (default behavior) — when "ADD TO CART · $X" is
       slightly wider than the typing area for a given font/letter-
       spacing combo, the price would drop to a second line and the
       button doubles in height. nowrap collapses both spans onto
       one line. If the combined string is wider than the container
       on a very narrow viewport, text overflows the button rather
       than wrapping; the merchant's font-size / padding-y / letter-
       spacing knobs give them room to dial it in if needed. */
    white-space: nowrap;
    /* Padding, border-width/style/radius, typography, and colors are
       set in the dynamic inline style block above so the merchant's
       per-section schema choices win on the cascade. The data-button-
       style attribute on the button (Primary/Secondary modes) hooks
       into the theme's global button palette from critical-css. */
  }
  .pc__atc:active {
    transform: scale(0.99);
  }
  /* Inline wrapper for the action label + price. Sits inside the
     button as a SINGLE child so the theme's button-style="primary"
     / "secondary" CSS (which can set the button to
     display: flex; flex-direction: column) doesn't stack the label
     above the price — that's the bug we hit before this wrapper
     existed. Inline so its own children (label span + price span)
     flow on one line. The button-level `white-space: nowrap`
     prevents that single line from wrapping. */
  .pc__atc-inner {
    display: inline;
    white-space: nowrap;
  }

  /* Wishlist button — fixed-width square that sits in the ATC row
     to the right of the ADD TO CART button. Border color/width and
     radius come from the SAME schema settings that style the ATC
     border, so the two buttons read as a matched pair. Heart icon
     color comes from the dedicated Wishlist settings.

     Width is fixed (56px) rather than aspect-ratio: 1 because
     align-items: stretch on the row gives the wishlist whatever
     height the ATC ends up at (driven by ATC's padding-y + font-
     size), so a fixed pixel width + stretched height matches the
     "square-ish box" pattern from the reference screenshot. The
     56px is roughly what feels right for a 16px-padded button at
     default settings; merchants can change the wishlist_size
     schema knob to control the icon size within. */
  .pc__wishlist {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    padding: 0;
    background: transparent;
    border-style: solid;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .pc__wishlist:hover {
    background: rgba(0, 0, 0, 0.04);
  }
  .pc__wishlist svg {
    display: block;
  }
  /* Active (in-wishlist) state — the icon snippet uses currentColor
     for the stroke and fill rules that respond to --wishlist-active-
     color when the .is-wishlisted class is present. */
  .pc__wishlist.is-wishlisted {
    color: var(--wishlist-active-color);
  }
  .pc__wishlist.is-wishlisted svg {
    fill: var(--wishlist-active-color);
  }
  .pc__wishlist:focus {
    outline: none;
  }
  .pc__wishlist:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* ── Buy It Now button ──────────────────────────────────────
     Sits directly below the ATC row, sized to the same full-width
     footprint. Typography and box styles come from the scoped
     {% style %} block above; this rule handles layout primitives
     (width, margin, no native button chrome) only. */
  .pc__bin {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    margin: 8px 0 0;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }
  .pc__bin:active {
    transform: scale(0.99);
  }
  .pc__bin:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ── Dynamic payment buttons ───────────────────────────────
     The payment_button Liquid filter injects a container with
     class="shopify-payment-button" (and a Shopify-internal class
     nested inside). We just give it consistent vertical breathing
     room below the ATC / BIN stack. The buttons themselves are
     styled by Shopify and respect store-level theme settings —
     not something we can override at the section level. */
  .pc__payment {
    margin: 8px 0 0;
  }
  .pc__payment .shopify-payment-button {
    width: 100%;
  }

  /* ── Stock indicator ─────────────────────────────────────────
     A modern live-availability badge: small breathing pulse dot +
     tier-colored label + optional thin capacity bar. All color
     work lives in the scoped {% style %} block (per-tier
     --pc-stock-color); this block handles layout, animation, and
     transitions only.

     Behavior:
       • Dot has a layered radial pulse via an absolutely-positioned
         ::after that scales from 1×→2.5× while fading to 0, looped
         every 2.4s. Reads as a soft heartbeat — present but quiet.
       • Bar fills smoothly via cubic-bezier width transition. JS
         (or Liquid pre-render) writes width based on stock tier.
       • Color comes from the --pc-stock-color custom property which
         is set per-state in the scoped {% style %} block — so a
         tier change animates color across dot + label + bar in
         lockstep.
       • Reduced-motion media query disables the pulse for users who
         prefer no animation. */
  .pc__stock {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 16px;
  }
  .pc__stock-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* Pulse dot — solid core + animated outer halo. */
  .pc__stock-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc-stock-color, #22c55e);
    flex-shrink: 0;
    transition: background-color 0.4s ease;
    box-shadow: 0 0 0 0 var(--pc-stock-color, #22c55e);
  }
  .pc__stock-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pc-stock-color, #22c55e);
    transform: translate(-50%, -50%);
    transform-origin: center;
    animation: pc-stock-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    opacity: 0;
    pointer-events: none;
  }
  @keyframes pc-stock-pulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
    70%  { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  }
  /* Low-stock pulse is faster + more insistent — visual urgency. */
  .pc__stock[data-stock-state="low"] .pc__stock-dot::after {
    animation-duration: 1.4s;
  }
  /* Sold-out: kill the pulse, gray everything, dim the label. */
  .pc__stock[data-stock-state="sold-out"] .pc__stock-dot::after {
    animation: none;
  }
  .pc__stock[data-stock-state="sold-out"] .pc__stock-text {
    opacity: 0.7;
  }
  .pc__stock-text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--pc-stock-color, #22c55e);
    transition: color 0.4s ease;
  }
  /* Capacity bar — thin animated fill that scales with stock tier.
     The track is a neutral hairline; the fill takes the tier color. */
  .pc__stock-bar {
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
  }
  .pc__stock-bar-fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--pc-stock-color, #22c55e);
    border-radius: 999px;
    transform-origin: left;
    transition:
      width 0.6s cubic-bezier(0.32, 0.72, 0, 1),
      background-color 0.4s ease;
  }
  /* Tier-specific default bar widths — Liquid pre-renders the right
     value on first paint via inline style, but these provide a safety
     net so a flash of 100% never happens. JS overwrites the inline
     style on syncUI. */
  .pc__stock[data-stock-state="sold-out"] .pc__stock-bar-fill { width: 0%; }
  .pc__stock[data-stock-state="low"]      .pc__stock-bar-fill { width: 20%; }
  .pc__stock[data-stock-state="mid"]      .pc__stock-bar-fill { width: 55%; }
  .pc__stock[data-stock-state="high"]     .pc__stock-bar-fill { width: 100%; }

  @media (prefers-reduced-motion: reduce) {
    .pc__stock-dot::after { animation: none; }
  }

  /* ── Size guide dropdown ────────────────────────────────────
     The size guide is rendered as a `<details>` block reusing the
     description-dropdown classes (`.pc__description-details`,
     `.pc__description-summary`, `.pc__description-wrap`). The
     existing description-dropdown smooth-height animation in
     initSection handles open/close because both use the same
     `data-pc-details` hook. Only marker class is the standalone-
     fallback variant (used on mobile when the product has no
     description and the drawer-description block doesn't render).
     The general `.pc__size-guide-details` class is currently
     stylistically identical to `.pc__description-details`, but
     kept so future-only size-guide tweaks can hang off it. */
  .pc__drawer-description--sg-only {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #eee);
  }

  /* ── App block containers ─────────────────────────────────
     Wrappers around Shopify app extensions ({% render block %} for
     blocks of type `@app`). Three positions exist — below-atc
     (form column, near the ATC), below-description (info column,
     after the description), and below-product (full-width after
     the whole section). Each gets vertical breathing room so apps
     don't sit flush against neighboring content. */
  .pc__app-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pc__app-blocks--below-atc {
    margin-top: 16px;
  }
  .pc__app-blocks--below-description {
    margin-top: 24px;
  }
  .pc__app-blocks--below-product {
    width: 100%;
    padding: 40px 24px;
    box-sizing: border-box;
  }
  .pc__app-block {
    width: 100%;
  }

  /* ── Cursor-follow expand label (desktop) ──────────────────
     A small pill that hovers next to the cursor while the user is
     over the gallery. JS writes its position via transform on
     mousemove; CSS handles the fade and the icon/text layout.

     Hidden by default everywhere — only opted-in by adding the
     .is-visible class via JS. The element is position: fixed so
     the parent's stacking context doesn't constrain it. */
  .pc__cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 70;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate(0, 0);
    transition: opacity 0.18s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    will-change: transform, opacity;
    white-space: nowrap;
  }
  .pc__cursor-label.is-visible {
    opacity: 1;
  }
  /* Hide on mobile — touch devices don't have a hover cursor and
     the lightbox is a desktop-only experience anyway. */
  @media (max-width: 1023px), (pointer: coarse) {
    .pc__cursor-label { display: none !important; }
  }

  /* On desktop, give the gallery image a pointer (finger) cursor
     so it reads as a regular clickable element — same affordance
     as any link or button. The cursor-follow "Expand" label is the
     explicit cue that the click opens a full-screen view; the
     cursor itself just confirms clickability without overloading
     it with a zoom-specific shape. */
  @media (min-width: 1024px) and (pointer: fine) {
    .pc__gallery[data-pc-lightbox-trigger] .pc__img {
      cursor: pointer;
    }
  }

  /* ── Full-screen lightbox ──────────────────────────────────
     A modal that takes the entire viewport: dark backdrop, large
     centered image, prev/next arrows, optional thumbnail strip, and
     a close button. All controls are absolutely positioned around
     a central image stage so the layout adapts to portrait or
     landscape source images without reshuffling.

     Animation: backdrop fades in, image scales from 0.96→1, thumbs
     slide up from below. Reversed on close. */
  .pc__lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  }
  .pc__lightbox.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.32s ease, visibility 0s linear 0s;
  }
  .pc__lightbox-backdrop {
    position: absolute;
    inset: 0;
    cursor: zoom-out;
  }
  .pc__lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 4;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .pc__lightbox-close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
    transform: rotate(90deg);
  }
  .pc__lightbox-counter {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    z-index: 3;
    font-variant-numeric: tabular-nums;
  }
  /* The stage holds the image + side arrows */
  .pc__lightbox-stage {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 80px 20px;
    overflow: hidden;
    z-index: 2;
  }
  .pc__lightbox-image-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.18s ease;
  }
  .pc__lightbox-image-wrap.is-loading { opacity: 0.4; }
  .pc__lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }
  /* Lightbox VIDEO — same sizing rules as the image stage; videos
     respect object-fit so the natural aspect is preserved within the
     stage padding. autoplay + loop + muted come from the cloned
     attributes so playback starts immediately on insertion. */
  .pc__lightbox-video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #000;
  }
  /* Lightbox IFRAME (YouTube/Vimeo) — iframes don't support
     object-fit so we use aspect-ratio to drive their natural shape
     within the stage. The max-width/-height clamps keep them from
     overflowing the stage padding. */
  .pc__lightbox-iframe {
    width: min(100%, calc((100vh - 200px) * (16 / 9)));
    aspect-ratio: 16 / 9;
    max-width: 100%;
    max-height: 100%;
    border: 0;
    background: #000;
  }
  /* Re-use the same zoom-in animation for video/iframe entries so
     they feel as polished as image swaps. */
  .pc__lightbox.is-open .pc__lightbox-video,
  .pc__lightbox.is-open .pc__lightbox-iframe {
    animation: pc-lightbox-zoom 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Open animation — image scales gently from 0.96 → 1 */
  .pc__lightbox.is-open .pc__lightbox-image {
    animation: pc-lightbox-zoom 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @keyframes pc-lightbox-zoom {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
  }

  /* Prev / next arrows — circular outline buttons that sit at the
     sides of the stage. Hidden on small viewports (single image
     can fit comfortably; thumbnails handle navigation). */
  .pc__lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 3;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .pc__lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
  }
  .pc__lightbox-arrow--prev {
    left: 24px;
  }
  .pc__lightbox-arrow--prev:hover {
    transform: translateY(-50%) translateX(-3px);
  }
  .pc__lightbox-arrow--next {
    right: 24px;
  }
  .pc__lightbox-arrow--next:hover {
    transform: translateY(-50%) translateX(3px);
  }
  .pc__lightbox-arrow:disabled,
  .pc__lightbox-arrow[aria-hidden="true"] {
    opacity: 0;
    pointer-events: none;
  }

  /* Thumbnails strip — horizontal row at bottom. Tiny tiles, active
     gets a white outline. Scrolls horizontally if there are many
     images. Hidden via setting toggle if the merchant wants a pure
     hero-view experience. */
  .pc__lightbox-thumbs {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 3;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: pc-lightbox-thumbs-up 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .pc__lightbox-thumbs::-webkit-scrollbar { display: none; }
  @keyframes pc-lightbox-thumbs-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .pc__lightbox-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 70px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.55;
  }
  .pc__lightbox-thumb:hover {
    opacity: 1;
  }
  .pc__lightbox-thumb.is-active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.85);
  }
  .pc__lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pc__lightbox-thumb[hidden] {
    display: none;
  }

  /* Compact lightbox on small viewports — arrows hidden, larger
     close target, edge-to-edge image. */
  @media (max-width: 1023px) {
    .pc__lightbox-stage { padding: 60px 16px 8px; }
    .pc__lightbox-arrow { display: none; }
    .pc__lightbox-thumbs { padding: 12px 16px 20px; }
    .pc__lightbox-thumb { width: 44px; height: 56px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pc__lightbox.is-open .pc__lightbox-image,
    .pc__lightbox-thumbs { animation: none; }
    .pc__lightbox-close:hover { transform: none; }
  }

  /* ── Floating ATC bar (mobile) ──────────────────────────────
     Hidden by default everywhere; the mobile @media block below
     reveals it as a fixed-position bar that slides up from below
     when the inline ATC scrolls out of view. The .is-visible
     class (toggled by an IntersectionObserver in initSection)
     drives the transform animation.

     Desktop: stays hidden permanently. The desktop layout's
     info column keeps the ATC visible throughout the section's
     own scroll range, so a floating bar would be redundant. */
  .pc__floating-atc {
    display: none;
  }
  @media (max-width: 1023px) {
    .pc__floating-atc {
      display: block;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 60;
      background: var(--color-background, #fff);
      /* Comfortable padding around the action row + iOS home
         indicator safe-area at the bottom so the buttons aren't
         flush with the screen edge or hidden behind the indicator. */
      padding: 12px 16px;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
      /* Subtle top shadow to lift the bar visually off the page
         content scrolling behind it. */
      box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.08);
      /* Initial state: parked just off the bottom edge of the
         viewport. transition drives the slide-in / slide-out
         animation; cubic-bezier matches the easing used elsewhere
         in this file (drawer, dots) so all the section's transitions
         feel consistent. */
      transform: translateY(100%);
      transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
      /* When parked off-screen, the bar can't receive taps. Restored
         to auto when .is-visible flips. */
      pointer-events: none;
    }
    .pc__floating-atc.is-visible {
      transform: translateY(0);
      pointer-events: auto;
    }
    /* Strip the inline row's top margin — the bar's own padding
       provides the spacing around the buttons. */
    .pc__floating-atc .pc__atc-row {
      margin: 0;
    }
  }

  .pc__additional-buttons {
    margin-top: 12px;
  }

  /* ── Mobile (default) ──────────────────────────────────────── */
  .pc__layout {
    display: block;
    /* Positioning context for the overlay dots — `.pc__dots` is
       position: absolute on mobile and anchors to this layout
       container so it sits over the gallery's bottom edge. (Desktop
       also sets this for the scroll-hint absolute positioning, so
       the property is harmless to declare on both.) */
    position: relative;
    /* No drawer-peek padding anymore — the drawer is inline now
       so nothing is floating over the page bottom. */
  }
  .pc__info--left,
  .pc__info--right {
    /* Desktop-only content blocks — the drawer markup (now styled
       as an inline block below the gallery) carries the same
       content on mobile. */
    display: none;
  }

  /* Hero slide on mobile follows the same sizing rules as every
     other slide — width: 100% with natural aspect ratio. The
     earlier full-bleed `height: 100vh + object-fit: cover` was
     removed because it visually scaled the first image up
     (cropping it to fill the viewport) so the lead image read as
     a different scale than the rest of the gallery. Now the
     entire stack renders at one consistent zoom. */

  /* ── Mobile product info (formerly the "drawer") ──────────────
     Repurposed: was a position:fixed peek-and-drag bottom sheet,
     now an inline block that sits directly under the gallery and
     scrolls with the page like any other content. The drag handle,
     peek state, body scroll lock, and translateY animation are all
     retired (the corresponding JS no-ops because the .is-expanded
     class is never applied to a static drawer).

     The markup stayed the same so we still get the SAME content
     order the drawer had — eyebrow → title/price → options → ATC
     → description — without restructuring the Liquid. */
  .pc__drawer {
    position: static;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: none;
    height: auto;
    display: block;
    overflow: visible;
  }
  /* Hide the drag handle entirely — drawer doesn't drag anymore. */
  .pc__drawer-handle-area {
    display: none;
  }
  .pc__drawer-peek {
    padding: 24px 20px 0;
    touch-action: auto;
    cursor: default;
  }
  .pc__drawer-titlerow {
    /* Title and price stack vertically on mobile (was a horizontal
       row when this was a compact peek bar). Block layout reads
       better when the whole panel is visible at once. */
    display: block;
  }
  .pc__title--drawer {
    font-size: 24px;
    margin: 0 0 8px;
    flex: none;
  }
  .pc__price--drawer {
    margin: 0 0 4px;
    font-size: 18px;
    white-space: normal;
  }
  .pc__drawer-content {
    overflow: visible;
    padding: 20px 20px max(40px, env(safe-area-inset-bottom, 0px));
  }
  .pc__drawer-description {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #eee);
  }

  /* ── Desktop ≥ 1024px ─────────────────────────────────────── */
  @media (min-width: 1024px) {
    .pc__layout {
      display: grid;
      grid-template-columns: var(--pc-info-w) 1fr var(--pc-info-w);
      gap: var(--pc-gap);
      align-items: stretch; /* info columns match the gallery height so vertical alignment has room to take effect */
      padding: 0 var(--pc-info-pad-x);
      padding-bottom: 0;
      /* Positioning context for the desktop scroll hint (which is
         position: absolute, anchored to image bottom). Without this,
         the hint would resolve against the viewport (the closest
         positioned ancestor), reintroducing the same "fixed at a
         viewport offset" problem we just removed. */
      position: relative;
      /* Single source of truth for the slide / image height on desktop.
         Both the gallery max-height and the info column min-height read
         this so the section's overall height stays in lockstep with the
         image footprint — bump the 0.78 multiplier and both the image
         AND the section's vertical bounds scale together.

         0.78 of available area lands the image at the editorial-PDP
         scale (Aimé Leon Doré style) where the image is the focal
         element instead of a politely centered crop. */
      --pc-slide-h: calc((100vh - var(--pc-header-offset) - var(--pc-image-top) * 2) * 0.78);
    }

    /* Info columns — flex column, always vertically centered so the
       left and right text/action blocks sit at the midpoint of the
       column regardless of content length.

       Section height = header + 8px top breathing room + slide_h
       (image area) + image_top bottom reserve. The 24px constant
       replaces what was var(--pc-image-top) (= 60px) above the
       image — the whole section content sits 36px higher in the
       viewport now. Image size, bottom margin, and slide_h are
       deliberately unchanged so this is a pure vertical shift, not
       a scale.

       Visual alignment: with padding-top: header+24 and the gallery
       at margin-top: header+24, both blocks start at the same y
       inside the section. justify-content: center then puts the
       info content's visual midpoint at the same y as the image's
       visual midpoint. */
    .pc__info--left,
    .pc__info--right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: calc(var(--pc-slide-h) + var(--pc-header-offset) + 8px + var(--pc-image-top));
      padding-top: calc(var(--pc-header-offset) + 8px);
      padding-bottom: var(--pc-image-top);
    }
    .pc__info-inner {
      width: 100%;
    }

    /* Center gallery — NORMAL FLOW (not sticky/fixed) height-CAPPED
       scroll container. The gallery used to be position:sticky which
       pinned the image to a viewport offset while the section
       scrolled past underneath. That floating behavior was removed
       per design — image now scrolls with the page like any other
       element.

       What's preserved:
         • overflow-y:auto with max-height = slide_h means the gallery
           is still a vertical scroll container internally. Wheeling
           on the image still advances the gallery between slides
           (wheel-gate via pointer-events still routes correctly).
         • overscroll-behavior: contain still prevents wheel chaining
           between the gallery's internal scroll and the page scroll.

       What changed:
         • position: static (default — no sticky)
         • align-self: start so the gallery occupies its natural
           (max-height-capped) height inside the grid cell rather
           than stretching to the row's full height. Without this,
           align-items: stretch on .pc__layout would stretch the
           gallery cell, leaving empty cell space below the image.
         • margin-top: header + image_top to push the gallery down
           from the section top by the same offset the info columns
           reserve via padding-top. Visually the image and info
           content start at the same y inside the section. */
    .pc__gallery {
      align-self: start;
      /* 24px (was: var(--pc-image-top), which is 60px) — pulls the
         entire image block 36px higher in the viewport. Mirrors the
         padding-top on the info columns so image and info content
         remain co-aligned at the same y. */
      margin-top: calc(var(--pc-header-offset) + 8px);
      max-height: var(--pc-slide-h);
      width: 100%;
      overflow-y: auto;
      /* Lock the gallery's internal scroll: no scroll-chain to the
         page when the user wheels at the gallery's boundaries. The
         gallery's image position stays exactly where the user last
         left it until they actively wheel inside it again. */
      overscroll-behavior: contain;
      scrollbar-width: none;
      -ms-overflow-style: none;
      /* Wheel-target gate: the gallery itself is transparent to
         pointer events (including wheel), so wheel ticks that land
         on the empty whitespace flanking the centered image pass
         straight through to the page and trigger NATIVE page scroll
         — preserving trackpad momentum, browser-managed easing, and
         every other smoothness primitive that the previous JS
         `window.scrollBy` redirect couldn't match.

         The image inside (.pc__img) re-enables pointer-events, so
         when the cursor is on an image the wheel event hits the
         image, bubbles up to this .pc__gallery, and the browser's
         own overflow-scroll handler advances the gallery between
         images exactly as before — only the empty whitespace zone
         changes behavior. */
      pointer-events: none;
    }
    .pc__gallery::-webkit-scrollbar {
      display: none;
    }

    /* Desktop slide sizing — each slide fills the gallery's viewport
       height exactly. Only one slide is visible at a time; wheeling
       advances the gallery's internal scroll between images.

       object-fit:contain keeps the image at natural aspect inside
       the slide; flex centering pins it to the middle of the slot. */
    .pc__gallery .pc__slide {
      height: var(--pc-slide-h);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc__gallery .pc__img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* Re-enable pointer events on the image only. The parent
         gallery is pointer-events:none (see above) so wheel ticks
         over whitespace pass through to the page; restoring auto
         here means a wheel event LANDING on the image still
         targets the image, bubbles up to the gallery, and triggers
         the gallery's overflow-scroll between images. */
      pointer-events: auto;
    }
    /* Video / iframe specific desktop sizing. `width: auto; height:
       auto` from the IMG rule works because images have intrinsic
       dimensions; video/iframe need explicit sizes (or aspect-ratio)
       to render at the right proportion within the centered slide. */
    .pc__gallery video.pc__video {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      pointer-events: auto;
    }
    .pc__gallery .pc__video--iframe {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      pointer-events: auto;
    }
    /* (Previously there was a desktop override for `.pc__slide--hero`
       to counter a mobile full-bleed cover-fit rule. That mobile
       rule was removed because it made the first image render at a
       different scale than the rest — so the desktop override is
       no longer needed: every slide now uses the same sizing
       everywhere.) */

    /* Hide the mobile drawer entirely on desktop — desktop uses the
       two side columns instead. */
    .pc__drawer {
      display: none !important;
    }
  }
/* END_SECTION:product-centered */

/* START_SECTION:product-grid-images (INDEX:41) */
.product-grid-section {
    width: 100%;
  }

  .product-grid {
    display: grid;
    grid-auto-flow: dense;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .product-card {
    position: relative;
    min-width: 0;
    align-self: start;
  }

  .product-card__image-link {
    display: block;
    text-decoration: none;
  }

  .product-card__image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .product-card__track {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.35s ease;
  }

  /* Image-frame snippet wraps each image in a placeholder-aware div.
     Frame must occupy the same space the bare img used to: 100% wide
     flex slot. translateX(-index*100%) math still works since each
     frame is exactly one slot wide. */
  .product-card__track > .csp-image-frame {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    {% if section.settings.image_ratio == 'natural' %}
      height: auto;
    {% else %}
      height: 100%;
    {% endif %}
  }

  .product-card__track .product-card__img {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .product-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: {{ section.settings.card_nav_size }}px;
    height: {{ section.settings.card_nav_size }}px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: {{ section.settings.card_nav_icon_color }} !important;
    opacity: 1;
    pointer-events: all;
  }

  /* Hide on hover reveal mode — only show when card is hovered */
  [data-nav-hover-reveal] .product-card__nav {
    opacity: 0;
    pointer-events: none;
  }

  [data-nav-hover-reveal]:hover .product-card__nav {
    opacity: 1;
    pointer-events: all;
  }

  .product-card__nav:hover { opacity: 0.8 !important; }
  .product-card__nav--prev { left: 8px; }
  .product-card__nav--next { right: 8px; }
  .product-card__nav.is-hidden { display: none !important; }

  /* Mobile — hide arrows by default, show based on visibility settings */
  @media screen and (max-width: 1199px) {
    .product-card__nav { display: none; }
    [data-mobile-nav] .product-card__nav {
      display: flex;
      opacity: 1 !important;
      pointer-events: all !important;
      color: {{ section.settings.card_nav_icon_color }} !important;
    }
  }

  /* ── Image carousel scrollbar ──────────────────────────────────
     Mobile-only thin progress bar pinned to the bottom edge of the
     image. Acts as a visual bottom line on the card and updates
     its thumb as the carousel advances. Track uses color-mix for
     the faint background — `opacity` on the parent would fade the
     nested thumb (which needs to read as solid). Thumb width and
     position are set inline from JS via the carousel's currentPos
     and visibleIndexes (so swatch-filtered subsets are respected).
     Mirrors product-grid.liquid. */
  .product-card__scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: color-mix(in srgb, currentColor 15%, transparent);
    pointer-events: none;
    z-index: 1;
  }
  .product-card__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: currentColor;
    will-change: width, transform;
    /* Match the track's slide easing so the thumb glides in sync. */
    transition: transform 0.35s ease;
  }
  /* When the track is snapped (transition: none — used by swatch
     swap and initial setup), skip the thumb's slide too so the
     two stay locked together. The wrapper toggles is-snapping. */
  .product-card__image-wrapper.is-snapping .product-card__scrollbar-thumb {
    transition: none;
  }
  {%- if section.settings.card_nav_scrollbar_enable and section.settings.mobile_swipe_enable -%}
    /* Mobile-only feature: hide the scrollbar above the theme's
       1200px desktop breakpoint (matches the mobile-arrow rules
       above so "mobile" means the same threshold everywhere in
       this section). */
    @media screen and (min-width: 1200px) {
      .product-card__scrollbar { display: none; }
    }
  {%- endif -%}

  .product-card__placeholder {
    width: 100%;
    height: 100%;
    display: block;
    background: #f0f0f0;
  }

  .product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    line-height: 14px;
    pointer-events: none;
  }

  .product-card__swatches {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    gap: 4px;
    align-items: center;
    pointer-events: none;
  }

  /* ── Editorial Image Blocks ───────────────────────────────── */
  /* The editorial image spans 2×2 grid cells. The image's intrinsic dimensions
     cannot be allowed to dictate row height — doing so creates gaps beside it.
     We clamp the item to match the 2×2 product-card slot via aspect-ratio,
     backed up by JS height measurement (see the script below the markup). */
  /* Hide editorial images when the toolbar is in a non-default state
     (any filter active, custom sort, or custom view-by). They reappear
     once the user resets back to defaults. */
  #shopify-section-{{ section.id }} .product-grid-section.is-toolbar-active .pg-editorial-image {
    display: none;
  }
  .pg-editorial-image {
    position: relative;
    overflow: hidden;
    align-self: start;
    {% if section.settings.image_ratio != 'natural' %}
      aspect-ratio: {{ section.settings.image_ratio }};
    {% endif %}
    order: var(--ei-order-mobile, 4);
    /* Stretch inner content to fill wrapper height. The image-frame
       snippet sets its own inline aspect-ratio based on the source
       image's intrinsic ratio — when that differs from the section's
       image_ratio (or when JS resizes the wrapper), the inner frame
       under-fills, leaving whitespace below. Flex layout + auto
       aspect-ratio override fixes this at all breakpoints. */
    display: flex;
    flex-direction: column;
  }
  .pg-editorial-image .pg-editorial-image__link,
  .pg-editorial-image .pg-editorial-image__placeholder {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .pg-editorial-image .csp-image-frame {
    aspect-ratio: auto !important;
    flex: 1 1 auto;
    height: 100%;
  }
  /* When the editorial image spans 2 rows (desktop 4-col layout), it
     should fill its 2x2 grid cells exactly. Stretch instead of
     aspect-ratio sizing — the JS in this file sets the wrapper's
     pixel height to match 2 × full product-card + row gap. The base
     .pg-editorial-image flex rules above handle inner content fill. */
  @media screen and (min-width: 1200px) {
    .pg-editorial-image--two-rows {
      aspect-ratio: auto;
      align-self: stretch;
    }
  }
  @media screen and (min-width: 1200px) {
    .pg-editorial-image {
      order: var(--ei-order-desktop, 4);
    }
  }
  .pg-editorial-image__link {
    display: block;
    width: 100%;
    height: 100%;
  }
  .pg-editorial-image__img,
  .pg-editorial-image__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pg-editorial-image__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 16px;
    background: var(--ei-overlay-bg, linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%));
    pointer-events: none;
    z-index: 3;
  }
  .pg-editorial-image__text {
    color: var(--ei-text-color, #fff);
    font-size: var(--ei-text-size, 14px);
    letter-spacing: var(--ei-text-spacing, 0.05em);
    text-transform: var(--ei-text-transform, uppercase);
    font-family: var(--ei-text-font, inherit);
    font-weight: var(--ei-text-weight, inherit);
  }

  .product-card__swatch {
    display: block;
    pointer-events: all;
    width: 14px;
    height: 14px;
    border-radius: 0;
    border: 1px solid #000000;
    transition: border-color 0.15s;
  }
  #shopify-section-{{ section.id }} .product-card__swatch.is-preview-active {
    border-color: var(--swatch-active-border, #000000);
  }

  .product-card__swatch.is-sold-out {
    opacity: 0.5;
    position: relative;
  }

  .product-card__swatch.is-sold-out::before,
  .product-card__swatch.is-sold-out::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 1px;
    background: #fff;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35);
    transform-origin: center;
    pointer-events: none;
  }

  .product-card__swatch.is-sold-out::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .product-card__swatch.is-sold-out::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .product-card__swatch-more {
    font-size: 10px;
    line-height: 1;
    color: currentColor;
    text-decoration: none;
  }

  .product-card__sold-out {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .product-card__wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    pointer-events: all;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: transform 0.15s;
  }
  .product-card__wishlist:active {
    transform: scale(0.88);
  }
  .product-card__wishlist svg {
    transition: fill 0.2s, color 0.2s;
  }

  .product-card__wishlist svg {
    display: block;
  }

  .product-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    pointer-events: all;
  }

  .product-card__quick-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: all;
    flex-shrink: 0;
  }

  .product-card__quick-add svg { display: block; }
  .product-card__quick-add.is-loading { opacity: 0.4; pointer-events: none; }
  /* Cart notification has been moved to the global cart-toast snippet
     (rendered once in theme.liquid). Configure it in Theme Settings →
     Cart Notification. */

  /* ── Quick Add Drawer ──────────────────────────────────────────────── */
  .pg-qa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .pg-qa-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: all;
  }

  .pg-qa-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    display: flex;
    flex-direction: column;
  }
  .pg-qa-drawer[aria-hidden="false"] {
    transform: translateY(0);
  }
  @media screen and (min-width: 600px) {
    .pg-qa-drawer {
      left: 50%;
      right: auto;
      width: 460px;
      transform: translateX(-50%) translateY(100%);
    }
    .pg-qa-drawer[aria-hidden="false"] {
      transform: translateX(-50%) translateY(0);
    }
  }

  .pg-qa-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #efefef;
    flex-shrink: 0;
  }
  .pg-qa-drawer__title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pg-qa-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.15s;
  }


  .pg-qa-drawer__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 1;
  }

  .pg-qa-drawer__product {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .pg-qa-drawer__image-wrap {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
  }
  .pg-qa-drawer__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pg-qa-drawer__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
  }
  .pg-qa-drawer__product-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
  }
  .pg-qa-drawer__price {
    font-size: 13px;
    opacity: 0.65;
    margin: 0;
  }

  .pg-qa-drawer__options {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .pg-qa-option {}
  .pg-qa-option__label {
    margin: 0 0 10px;
  }
  .pg-qa-option__selected {
    font-weight: 500;
  }
  .pg-qa-option__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pg-qa-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    min-width: 44px;
  }
  .pg-qa-option-btn:hover { border-color: #999; }
  .pg-qa-option-btn.is-selected {
    border-color: #111;
    background: #fafafa;
    font-weight: 500;
  }
  .pg-qa-option-btn.is-unavailable {
    opacity: 0.3;
    text-decoration: line-through;
    pointer-events: none;
  }
  .pg-qa-option-btn.is-sold-out {
    opacity: 0.4;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* Color option — filter style */
  .pg-qa-option__btns--colors {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pg-qa-color-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
    width: 100%;
    text-align: left;
  }
  .pg-qa-color-btn:hover { border-color: #999; }
  .pg-qa-color-btn.is-selected {
    border-color: #111;
    background: #fafafa;
  }
  .pg-qa-color-btn.is-unavailable {
    opacity: 0.3;
    pointer-events: none;
  }
  .pg-qa-color-btn.is-sold-out {
    opacity: 0.4;
  }
  .pg-qa-color-btn.is-sold-out .pg-qa-color-name {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .pg-qa-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
  }
  .pg-qa-color-name {
    overflow: hidden;
    text-overflow: ellipsis;
    /* typography controlled by section settings */
  }

  .pg-qa-drawer__footer {
    padding: 14px 20px 20px;
    border-top: 1px solid #efefef;
    flex-shrink: 0;
  }
  .pg-qa-drawer__atc {
    width: 100%;
    height: 50px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .pg-qa-drawer__atc:disabled { opacity: 0.35; cursor: default; }
  /* Wishlist mode modifier classes — kept as hooks for mode-specific
     behavior (e.g. label state), but intentionally carry NO color/
     background/border overrides. The button's visual appearance in
     wishlist mode is driven by the data-button-style attribute the JS
     sets via applyAtcStyle('wishlist'), which maps to the merchant's
     "Quick-add panel button style" setting (Primary or Secondary). */

  /* ── Top Bar ──────────────────────────────────────────────── */
  .pg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    position: relative;
  }

  .pg-toolbar__left { display: none; }

  @media screen and (min-width: 1200px) {
    .pg-toolbar__left {
      display: flex;
      align-items: center;
    }
  }

  .pg-view-by {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pg-view-by__label {
    margin-right: 2px;
  }

  .pg-view-by__btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  .pg-view-by__btn--active,
  .pg-view-by__btn:hover {
    opacity: 1;
  }

  .pg-toolbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
  }

  @media screen and (min-width: 1200px) {
    .pg-toolbar__right {
      flex: none;
    }
  }

  .pg-sort-wrap--push-left {
    margin-right: auto;
  }

  @media screen and (min-width: 1200px) {
    .pg-sort-wrap--push-left {
      margin-right: 0;
    }
  }

  .pg-toolbar__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
  }

  .pg-toolbar__label:hover {
    opacity: 1;
  }

  .pg-sort-wrap {
    position: static;
    display: flex;
    align-items: center;
  }

  .pg-sort-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  .pg-sort-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    min-width: 200px;
    z-index: 200;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1200px) {
    .pg-sort-panel {
      left: auto;
      right: 0;
    }
  }

  .pg-sort-panel[hidden] {
    display: none;
  }

  .pg-sort-option {
    background: none;
    border: none;
    padding: 14px 20px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    color: #222;
    transition: background 0.15s;
  }

  .pg-sort-option:hover {
    background: #f5f5f5;
  }

  .pg-sort-option--active {
    font-weight: 600;
  }

  /* ── Filter Drawer ───────────────────────────────────────── */
  .pg-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 900;
  }

  .pg-filter-overlay[hidden] {
    display: none;
  }

  .pg-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #fff;
    z-index: 901;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

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

  .pg-filter-drawer[aria-hidden="false"] {
    transform: translateX(0);
  }

  .pg-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
  }

  .pg-filter-drawer__title {
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #111;
  }

  .pg-filter-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #111;
    padding: 4px;
    line-height: 1;
  }

  .pg-filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px;
  }

  .pg-filter-section {
    border-bottom: 1px solid #e8e8e8;
  }

  .pg-filter-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111;
    user-select: none;
  }

  .pg-filter-section__label {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
  }
  .pg-filter-section__count {
    display: none;
    font-size: 8px;
    font-weight: 700;
    color: #111;
    line-height: 1;
    margin-left: 2px;
    margin-top: -1px;
  }
  .pg-filter-section__count.is-active {
    display: block;
  }
  .pg-filter-section__chevron {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
  }

  .pg-filter-section__header--open .pg-filter-section__chevron {
    transform: rotate(180deg);
  }

  .pg-filter-section__header:not(.pg-filter-section__header--open) .pg-filter-section__chevron {
    transform: rotate(0deg);
  }

  .pg-filter-section__body {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-bottom 0.3s ease;
  }

  .pg-filter-section__body.is-open {
    /* Generous cap so long filter lists (e.g. a Category section with
       30+ product types) aren't silently clipped. The drawer itself
       scrolls; this section just needs to expand to its full content. */
    max-height: 4000px;
    padding-bottom: 20px;
  }

  .pg-filter-section__body[hidden] {
    display: none;
  }

  /* Price range — min / em-dash / max, side by side */
  .pg-filter-price {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .pg-filter-price input[type="number"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: #222;
    letter-spacing: 0.02em;
    border-radius: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    transition: border-color 0.15s ease;
  }
  .pg-filter-price input[type="number"]:focus {
    outline: none;
    border-color: #111;
  }
  .pg-filter-price input[type="number"]::placeholder {
    color: #999;
  }
  .pg-filter-price input[type="number"]::-webkit-outer-spin-button,
  .pg-filter-price input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .pg-filter-price__sep {
    flex-shrink: 0;
    color: #888;
    font-size: 14px;
    line-height: 1;
  }

  /* Color grid - bordered boxes with dot + name */
  .pg-filter-section__body--colors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex-direction: unset;
  }

  .pg-filter-color-item {
    cursor: pointer;
  }

  .pg-filter-color-item input {
    display: none;
  }

  .pg-filter-color-item__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #222;
    transition: border-color 0.15s;
    white-space: nowrap;
  }

  .pg-filter-color-item input:checked ~ .pg-filter-color-item__inner {
    border-color: #111;
    background: #fafafa;
  }

  .pg-filter-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
  }

  .pg-filter-color-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Size grid - same style as color but no dot */
  .pg-filter-section__body--sizes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    flex-direction: unset;
  }

  .pg-filter-size-item {
    cursor: pointer;
  }

  .pg-filter-size-item input {
    display: none;
  }

  .pg-filter-size-item__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border: 1px solid #d8d8d8;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #222;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
  }

  .pg-filter-size-item input:checked ~ .pg-filter-size-item__inner {
    border-color: #111;
    background: #fafafa;
    font-weight: 500;
  }

  /* Category - full-width bordered rows */
  .pg-filter-section__body--category {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
  }

  .pg-filter-cat-item {
    cursor: pointer;
  }

  .pg-filter-cat-item input {
    display: none;
  }

  .pg-filter-cat-item__inner {
    display: block;
    padding: 14px 16px;
    border: 1px solid #d8d8d8;
    margin-bottom: -1px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #222;
    transition: background 0.15s;
    position: relative;
    z-index: 0;
  }

  .pg-filter-cat-item input:checked ~ .pg-filter-cat-item__inner {
    background: #f0f0f0;
    border-color: #111;
    font-weight: 500;
    z-index: 1;
  }

  /* Availability checkbox */
  .pg-filter-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    color: #222;
  }

  .pg-filter-check input {
    display: none;
  }

  .pg-filter-check__box {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
  }

  .pg-filter-check input:checked ~ .pg-filter-check__box {
    background: #111;
    border-color: #111;
  }

  .pg-filter-check input:checked ~ .pg-filter-check__box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
  }

  /* Footer */
  .pg-filter-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
  }

  .pg-filter-reset,
  .pg-filter-apply {
    padding: 20px;
    border: none;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .pg-filter-reset {
    background: #fff;
    color: #111;
    border-right: 1px solid #e8e8e8;
  }

  .pg-filter-reset:hover {
    background: #f5f5f5;
  }

  .pg-filter-apply {
    background: #111;
    color: #fff;
  }

  .pg-filter-apply:hover {
    background: #000;
  }

  .pg-toolbar--sticky {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9;
    background: var(--color-background, #fff);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  }

  .pg-toolbar-spacer {
    display: none;
  }

  /* ── Pagination ──────────────────────────────────────────── */
  .pg-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 24px 16px;
  }

  .pg-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-style: solid;
    border-color: transparent;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, border-radius 0.2s;
    cursor: pointer;
  }

  .pg-pagination__item--current {
    /* border controlled via dynamic style */
  }

  .pg-pagination__item--gap {
    cursor: default;
    opacity: 0.4;
  }

  .pg-pagination__item--prev,
  .pg-pagination__item--next {
    min-width: 36px;
  }

  /* ── Product count ───────────────────────────────────────── */
  .pg-product-count {
    padding: 24px 16px 8px;
  }
/* END_SECTION:product-grid-images */

/* START_SECTION:product-grid (INDEX:42) */
.product-grid-section {
    width: 100%;
  }

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

  .product-card {
    position: relative;
    min-width: 0;
    align-self: start;
  }

  .product-card__image-link {
    display: block;
    text-decoration: none;
  }

  .product-card__image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }

  .product-card__track {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    will-change: transform;
    transition: transform 0.35s ease;
  }

  /* Image-frame snippet wraps each image in a placeholder-aware div.
     In the carousel context the frame must occupy the same space the
     bare img used to: 100% wide flex slot, full wrapper height. The
     JS slides by translateX(-index * 100%) and that math still works
     because each frame is exactly one slot wide. */
  .product-card__track > .csp-image-frame {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    {% if section.settings.image_ratio == 'natural' %}
      /* Natural mode: let the frame's aspect-ratio (from the image's
         intrinsic ratio) drive its height. The wrapper has no
         aspect-ratio so it grows to match. */
      height: auto;
    {% else %}
      /* Forced ratio mode: wrapper has aspect-ratio, frame fills it. */
      height: 100%;
    {% endif %}
  }

  /* Old .product-card__img rule still applies because the img keeps its
     class (passed via img_class to the snippet). flex rules below are
     no-ops now (img is no longer a direct flex child) but the
     object-fit / object-position / display values still matter. */
  .product-card__track .product-card__img {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .product-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: {{ section.settings.card_nav_size }}px;
    height: {{ section.settings.card_nav_size }}px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: {{ section.settings.card_nav_icon_color }} !important;
    opacity: 1;
    pointer-events: all;
  }

  /* Hide on hover reveal mode — only show when card is hovered */
  [data-nav-hover-reveal] .product-card__nav {
    opacity: 0;
    pointer-events: none;
  }

  [data-nav-hover-reveal]:hover .product-card__nav {
    opacity: 1;
    pointer-events: all;
  }

  .product-card__nav:hover { opacity: 0.8 !important; }
  .product-card__nav--prev { left: 8px; }
  .product-card__nav--next { right: 8px; }
  .product-card__nav.is-hidden { display: none !important; }

  /* Mobile — hide arrows by default, show based on visibility settings */
  @media screen and (max-width: 1199px) {
    .product-card__nav { display: none; }
    [data-mobile-nav] .product-card__nav {
      display: flex;
      opacity: 1 !important;
      pointer-events: all !important;
      color: {{ section.settings.card_nav_icon_color }} !important;
    }
  }

  /* ── Image carousel scrollbar ──────────────────────────────────
     Thin progress bar pinned to the bottom edge of the image. Acts
     as a visual bottom line on the card and updates its thumb as
     the carousel advances. Track uses color-mix for the faint
     background — `opacity` on the parent would fade the nested
     thumb (which needs to read as solid). Thumb width and position
     are set inline from JS via the carousel's currentPos and
     visibleIndexes (so swatch-filtered subsets are respected). */
  .product-card__scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: color-mix(in srgb, currentColor 15%, transparent);
    pointer-events: none;
    z-index: 1;
  }
  .product-card__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: currentColor;
    will-change: width, transform;
    /* Match the track's slide easing so the thumb glides in sync. */
    transition: transform 0.35s ease;
  }
  /* When the track is snapped (transition: none — used by swatch
     swap and initial setup), skip the thumb's slide too so the
     two stay locked together. The wrapper toggles is-snapping. */
  .product-card__image-wrapper.is-snapping .product-card__scrollbar-thumb {
    transition: none;
  }
  {%- if section.settings.card_nav_scrollbar_enable and section.settings.mobile_swipe_enable -%}
    /* Mobile-only feature: hide the scrollbar above the theme's
       1200px desktop breakpoint (matches the mobile-arrow rules
       above so "mobile" means the same threshold everywhere in
       this section). */
    @media screen and (min-width: 1200px) {
      .product-card__scrollbar { display: none; }
    }
  {%- endif -%}

  .product-card__placeholder {
    width: 100%;
    height: 100%;
    display: block;
    background: #f0f0f0;
  }

  .product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    line-height: 14px;
    pointer-events: none;
  }

  .product-card__swatches {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: flex;
    gap: 4px;
    align-items: center;
    pointer-events: none;
  }

  .product-card__swatch {
    display: block;
    pointer-events: all;
    width: 14px;
    height: 14px;
    border-radius: 0;
    border: 1px solid #000000;
    transition: border-color 0.15s;
  }
  #shopify-section-{{ section.id }} .product-card__swatch.is-preview-active {
    border-color: var(--swatch-active-border, #000000);
  }

  .product-card__swatch.is-sold-out {
    opacity: 0.5;
    position: relative;
  }

  .product-card__swatch.is-sold-out::before,
  .product-card__swatch.is-sold-out::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 1px;
    background: #fff;
    box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35);
    transform-origin: center;
    pointer-events: none;
  }

  .product-card__swatch.is-sold-out::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .product-card__swatch.is-sold-out::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .product-card__swatch-more {
    font-size: 10px;
    line-height: 1;
    color: currentColor;
    text-decoration: none;
  }

  .product-card__sold-out {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .product-card__wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    pointer-events: all;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: transform 0.15s;
  }
  .product-card__wishlist:active {
    transform: scale(0.88);
  }
  .product-card__wishlist svg {
    transition: fill 0.2s, color 0.2s;
  }

  .product-card__wishlist svg {
    display: block;
  }

  .product-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    pointer-events: all;
  }

  .product-card__quick-add {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    pointer-events: all;
    flex-shrink: 0;
  }

  .product-card__quick-add svg { display: block; }
  .product-card__quick-add.is-loading { opacity: 0.4; pointer-events: none; }

  /* Cart notification has been moved to the global cart-toast snippet
     (rendered once in theme.liquid). Configure it in Theme Settings →
     Cart Notification. */

  /* ── Quick Add Drawer ──────────────────────────────────────────────── */
  .pg-qa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .pg-qa-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: all;
  }

  .pg-qa-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
    display: flex;
    flex-direction: column;
  }
  .pg-qa-drawer[aria-hidden="false"] {
    transform: translateY(0);
  }
  @media screen and (min-width: 600px) {
    .pg-qa-drawer {
      left: 50%;
      right: auto;
      width: 460px;
      transform: translateX(-50%) translateY(100%);
    }
    .pg-qa-drawer[aria-hidden="false"] {
      transform: translateX(-50%) translateY(0);
    }
  }

  .pg-qa-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #efefef;
    flex-shrink: 0;
  }
  .pg-qa-drawer__title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .pg-qa-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.15s;
  }


  .pg-qa-drawer__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 1;
  }

  .pg-qa-drawer__product {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .pg-qa-drawer__image-wrap {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
  }
  .pg-qa-drawer__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .pg-qa-drawer__info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    padding-top: 2px;
  }
  .pg-qa-drawer__product-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0;
  }
  .pg-qa-drawer__price {
    font-size: 13px;
    opacity: 0.65;
    margin: 0;
  }

  .pg-qa-drawer__options {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .pg-qa-option {}
  .pg-qa-option__label {
    margin: 0 0 10px;
  }
  .pg-qa-option__selected {
    font-weight: 500;
  }
  .pg-qa-option__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pg-qa-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    min-width: 44px;
  }
  .pg-qa-option-btn:hover { border-color: #999; }
  .pg-qa-option-btn.is-selected {
    border-color: #111;
    background: #fafafa;
    font-weight: 500;
  }
  .pg-qa-option-btn.is-unavailable {
    opacity: 0.3;
    text-decoration: line-through;
    pointer-events: none;
  }
  .pg-qa-option-btn.is-sold-out {
    opacity: 0.4;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  /* Color option — filter style */
  .pg-qa-option__btns--colors {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pg-qa-color-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s;
    width: 100%;
    text-align: left;
  }
  .pg-qa-color-btn:hover { border-color: #999; }
  .pg-qa-color-btn.is-selected {
    border-color: #111;
    background: #fafafa;
  }
  .pg-qa-color-btn.is-unavailable {
    opacity: 0.3;
    pointer-events: none;
  }
  .pg-qa-color-btn.is-sold-out {
    opacity: 0.4;
  }
  .pg-qa-color-btn.is-sold-out .pg-qa-color-name {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }
  .pg-qa-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
  }
  .pg-qa-color-name {
    overflow: hidden;
    text-overflow: ellipsis;
    /* typography controlled by section settings */
  }

  .pg-qa-drawer__footer {
    padding: 14px 20px 20px;
    border-top: 1px solid #efefef;
    flex-shrink: 0;
  }
  .pg-qa-drawer__atc {
    width: 100%;
    height: 50px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }
  .pg-qa-drawer__atc:disabled { opacity: 0.35; cursor: default; }
  /* Wishlist mode modifier classes — kept as hooks for mode-specific
     behavior (e.g. label state), but intentionally carry NO color/
     background/border overrides. The button's visual appearance in
     wishlist mode is driven by the data-button-style attribute the JS
     sets via applyAtcStyle('wishlist'), which maps to the merchant's
     "Quick-add panel button style" setting (Primary or Secondary).
     Previously these rules used !important with hardcoded transparent
     background + currentColor border — that overrode the global
     button-style system, so updating colors in the customizer had no
     effect on the wishlist-mode button. */

  /* ── Top Bar ──────────────────────────────────────────────── */
  .pg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    position: relative;
  }

  .pg-toolbar__left { display: none; }

  @media screen and (min-width: 1200px) {
    .pg-toolbar__left {
      display: flex;
      align-items: center;
    }
  }

  .pg-view-by {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .pg-view-by__label {
    margin-right: 2px;
  }

  .pg-view-by__btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0.35;
    transition: opacity 0.2s;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  .pg-view-by__btn--active,
  .pg-view-by__btn:hover {
    opacity: 1;
  }

  .pg-toolbar__right {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
  }

  @media screen and (min-width: 1200px) {
    .pg-toolbar__right {
      flex: none;
    }
  }

  .pg-sort-wrap--push-left {
    margin-right: auto;
  }

  @media screen and (min-width: 1200px) {
    .pg-sort-wrap--push-left {
      margin-right: 0;
    }
  }

  .pg-toolbar__label {
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
  }

  .pg-toolbar__label:hover {
    opacity: 1;
  }

  .pg-sort-wrap {
    position: static;
    display: flex;
    align-items: center;
  }

  .pg-sort-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
  }

  .pg-sort-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    min-width: 200px;
    z-index: 200;
    display: flex;
    flex-direction: column;
  }

  @media screen and (min-width: 1200px) {
    .pg-sort-panel {
      left: auto;
      right: 0;
    }
  }

  .pg-sort-panel[hidden] {
    display: none;
  }

  .pg-sort-option {
    background: none;
    border: none;
    padding: 14px 20px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    color: #222;
    transition: background 0.15s;
  }

  .pg-sort-option:hover {
    background: #f5f5f5;
  }

  .pg-sort-option--active {
    font-weight: 600;
  }

  /* ── Filter Drawer ───────────────────────────────────────── */
  .pg-filter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 900;
  }

  .pg-filter-overlay[hidden] {
    display: none;
  }

  .pg-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #fff;
    z-index: 901;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

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

  .pg-filter-drawer[aria-hidden="false"] {
    transform: translateX(0);
  }

  .pg-filter-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid #e8e8e8;
    flex-shrink: 0;
  }

  .pg-filter-drawer__title {
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #111;
  }

  .pg-filter-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #111;
    padding: 4px;
    line-height: 1;
  }

  .pg-filter-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 28px;
  }

  .pg-filter-section {
    border-bottom: 1px solid #e8e8e8;
  }

  .pg-filter-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111;
    user-select: none;
  }

  .pg-filter-section__label {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
  }
  .pg-filter-section__count {
    display: none;
    font-size: 8px;
    font-weight: 700;
    color: #111;
    line-height: 1;
    margin-left: 2px;
    margin-top: -1px;
  }
  .pg-filter-section__count.is-active {
    display: block;
  }
  .pg-filter-section__chevron {
    display: flex;
    align-items: center;
    transition: transform 0.2s;
  }

  .pg-filter-section__header--open .pg-filter-section__chevron {
    transform: rotate(180deg);
  }

  .pg-filter-section__header:not(.pg-filter-section__header--open) .pg-filter-section__chevron {
    transform: rotate(0deg);
  }

  .pg-filter-section__body {
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding-bottom 0.3s ease;
  }

  .pg-filter-section__body.is-open {
    /* Generous cap so long filter lists (e.g. a Category section with
       30+ product types) aren't silently clipped. The drawer itself
       scrolls; this section just needs to expand to its full content. */
    max-height: 4000px;
    padding-bottom: 20px;
  }

  .pg-filter-section__body[hidden] {
    display: none;
  }

  /* Price range — min / em-dash / max, side by side */
  .pg-filter-price {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .pg-filter-price input[type="number"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: #222;
    letter-spacing: 0.02em;
    border-radius: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    transition: border-color 0.15s ease;
  }
  .pg-filter-price input[type="number"]:focus {
    outline: none;
    border-color: #111;
  }
  .pg-filter-price input[type="number"]::placeholder {
    color: #999;
  }
  .pg-filter-price input[type="number"]::-webkit-outer-spin-button,
  .pg-filter-price input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .pg-filter-price__sep {
    flex-shrink: 0;
    color: #888;
    font-size: 14px;
    line-height: 1;
  }

  /* Color grid - bordered boxes with dot + name */
  .pg-filter-section__body--colors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex-direction: unset;
  }

  .pg-filter-color-item {
    cursor: pointer;
  }

  .pg-filter-color-item input {
    display: none;
  }

  .pg-filter-color-item__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #222;
    transition: border-color 0.15s;
    white-space: nowrap;
  }

  .pg-filter-color-item input:checked ~ .pg-filter-color-item__inner {
    border-color: #111;
    background: #fafafa;
  }

  .pg-filter-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    flex-shrink: 0;
  }

  .pg-filter-color-name {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Size grid - same style as color but no dot */
  .pg-filter-section__body--sizes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    flex-direction: unset;
  }

  .pg-filter-size-item {
    cursor: pointer;
  }

  .pg-filter-size-item input {
    display: none;
  }

  .pg-filter-size-item__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px;
    border: 1px solid #d8d8d8;
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #222;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
  }

  .pg-filter-size-item input:checked ~ .pg-filter-size-item__inner {
    border-color: #111;
    background: #fafafa;
    font-weight: 500;
  }

  /* Category - full-width bordered rows */
  .pg-filter-section__body--category {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
  }

  .pg-filter-cat-item {
    cursor: pointer;
  }

  .pg-filter-cat-item input {
    display: none;
  }

  .pg-filter-cat-item__inner {
    display: block;
    padding: 14px 16px;
    border: 1px solid #d8d8d8;
    margin-bottom: -1px;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #222;
    transition: background 0.15s;
    position: relative;
    z-index: 0;
  }

  .pg-filter-cat-item input:checked ~ .pg-filter-cat-item__inner {
    background: #f0f0f0;
    border-color: #111;
    font-weight: 500;
    z-index: 1;
  }

  /* Availability checkbox */
  .pg-filter-check {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    color: #222;
  }

  .pg-filter-check input {
    display: none;
  }

  .pg-filter-check__box {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
  }

  .pg-filter-check input:checked ~ .pg-filter-check__box {
    background: #111;
    border-color: #111;
  }

  .pg-filter-check input:checked ~ .pg-filter-check__box::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
  }

  /* Footer */
  .pg-filter-drawer__footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
  }

  .pg-filter-reset,
  .pg-filter-apply {
    padding: 20px;
    border: none;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .pg-filter-reset {
    background: #fff;
    color: #111;
    border-right: 1px solid #e8e8e8;
  }

  .pg-filter-reset:hover {
    background: #f5f5f5;
  }

  .pg-filter-apply {
    background: #111;
    color: #fff;
  }

  .pg-filter-apply:hover {
    background: #000;
  }

  .pg-toolbar--sticky {
    position: fixed;
    left: 0;
    width: 100%;
    z-index: 9;
    background: var(--color-background, #fff);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
  }

  .pg-toolbar-spacer {
    display: none;
  }

  /* ── Pagination ──────────────────────────────────────────── */
  .pg-pagination {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 24px 16px;
  }

  .pg-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-style: solid;
    border-color: transparent;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s, border-radius 0.2s;
    cursor: pointer;
  }

  .pg-pagination__item--current {
    /* border controlled via dynamic style */
  }

  .pg-pagination__item--gap {
    cursor: default;
    opacity: 0.4;
  }

  .pg-pagination__item--prev,
  .pg-pagination__item--next {
    min-width: 36px;
  }

  /* ── Product count ───────────────────────────────────────── */
  .pg-product-count {
    padding: 24px 16px 8px;
  }
/* END_SECTION:product-grid */

/* START_SECTION:related-products (INDEX:44) */
/* ── Related products section ─────────────────────────────── */
  .rp-section { width: 100%; }

  .rp-grid { list-style: none; margin: 0; }

  /* ── Header 3-slot layout ─────────────────────────────────── */
  .rp-header {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .rp-header__slot {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .rp-header__slot--left   { justify-content: flex-start; }
  .rp-header__slot--center { justify-content: center;     }
  .rp-header__slot--right  { justify-content: flex-end;   }

  /* ── Carousel nav wrapper + button ───────────────────────── */
  .rp-nav { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
  .rp-nav__btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: inherit;
    opacity: 0.5;
    transition: opacity 0.2s;
  }
  .rp-nav__btn:hover { opacity: 1; }

  /* ── Product card (shared with product-grid) ──────────────── */
  .product-card { position: relative; min-width: 0; align-self: start; }
  .product-card__image-link { display: block; text-decoration: none; }
  .product-card__image-wrapper { position: relative; overflow: hidden; width: 100%; height: 100%; }
  .product-card__track { display: flex; flex-direction: row; width: 100%; height: 100%; will-change: transform; transition: transform 0.35s ease; }
  /* Image-frame wraps each image so JS carousel translateX(-index*100%)
     still works — frame is exactly one slot wide. */
  .product-card__track > .csp-image-frame { flex: 0 0 100%; min-width: 100%; width: 100%; {% if section.settings.image_ratio == 'natural' %}height: auto;{% else %}height: 100%;{% endif %} }
  .product-card__track .product-card__img { flex: 0 0 100%; min-width: 100%; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
  .product-card__placeholder { width: 100%; height: 100%; display: block; background: #f0f0f0; }
  .product-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; line-height: 14px; pointer-events: none; }
  .product-card__swatches { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; display: flex; gap: 4px; align-items: center; pointer-events: none; }
  .product-card__swatch { display: block; pointer-events: all; width: 14px; height: 14px; border-radius: 0; border: 1px solid #000; transition: border-color 0.15s; }
  .product-card__swatch.is-sold-out { opacity: 0.5; position: relative; }
  .product-card__swatch.is-sold-out::before, .product-card__swatch.is-sold-out::after { content:''; position:absolute; top:50%; left:50%; width:130%; height:1px; background:#fff; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.35); transform-origin:center; pointer-events:none; }
  .product-card__swatch.is-sold-out::before { transform:translate(-50%,-50%) rotate(45deg); }
  .product-card__swatch.is-sold-out::after  { transform:translate(-50%,-50%) rotate(-45deg); }
  .rp-section .product-card__swatch.is-preview-active { border-color: var(--swatch-active-border, #000); }
  .product-card__swatch-more { font-size: 10px; line-height: 1; }
  .product-card__sold-out { white-space: nowrap; flex-shrink: 0; }
  .product-card__wishlist { display:flex; align-items:center; justify-content:center; text-decoration:none; pointer-events:all; flex-shrink:0; background:none; border:none; cursor:pointer; padding:0; margin:0; transition:transform 0.15s; }
  .product-card__wishlist:active { transform: scale(0.88); }
  .product-card__wishlist svg { transition: fill 0.2s, color 0.2s; display: block; }
  .product-card__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; pointer-events: all; }
  .product-card__quick-add { display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; margin:0; cursor:pointer; pointer-events:all; flex-shrink:0; }
  .product-card__quick-add svg { display: block; }
  .product-card__quick-add.is-loading { opacity: 0.4; pointer-events: none; }
  .product-card__nav { position:absolute; top:50%; transform:translateY(-50%); background:transparent; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; opacity:1; pointer-events:all; }
  .product-card__nav--prev { left: 8px; }
  .product-card__nav--next { right: 8px; }
  .product-card__nav.is-hidden { display: none !important; }
  /* Hover-reveal mode for nav arrows — only show when card is hovered */
  [data-nav-hover-reveal] .product-card__nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
  [data-nav-hover-reveal]:hover .product-card__nav {
    opacity: 1;
    pointer-events: all;
  }
  @media screen and (max-width: 1199px) { .product-card__nav { display: none; } }

  /* ── QA Drawer (namespaced .rp-qa-*) ─────────────────────── */
  .rp-qa-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:9998; opacity:0; transition:opacity 0.3s ease; pointer-events:none; }
  .rp-qa-overlay[aria-hidden="false"] { opacity:1; pointer-events:all; }
  .rp-qa-drawer { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:#fff; border-radius:16px 16px 0 0; transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); display:flex; flex-direction:column; }
  .rp-qa-drawer[aria-hidden="false"] { transform: translateY(0); }
  @media screen and (min-width: 600px) {
    .rp-qa-drawer { left:50%; right:auto; width:460px; transform:translateX(-50%) translateY(100%); }
    .rp-qa-drawer[aria-hidden="false"] { transform: translateX(-50%) translateY(0); }
  }
  .rp-qa-drawer__header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 14px; border-bottom:1px solid #efefef; flex-shrink:0; }
  .rp-qa-drawer__title { font-size:12px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
  .rp-qa-drawer__close { background:none; border:none; cursor:pointer; padding:4px; display:flex; align-items:center; color:inherit; opacity:0.5; transition:opacity 0.15s; }
  .rp-qa-drawer__body { padding:20px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; flex:1; }
  .rp-qa-drawer__product { display:flex; gap:14px; align-items:flex-start; }
  .rp-qa-drawer__image-wrap { width:76px; height:76px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f5f5f5; }
  .rp-qa-drawer__image { width:100%; height:100%; object-fit:cover; display:block; }
  .rp-qa-drawer__info { display:flex; flex-direction:column; gap:5px; min-width:0; padding-top:2px; }
  .rp-qa-drawer__product-title { font-size:14px; font-weight:500; line-height:1.35; margin:0; }
  .rp-qa-drawer__price { font-size:13px; opacity:0.65; margin:0; }
  .rp-qa-drawer__footer { padding:14px 20px 20px; border-top:1px solid #efefef; flex-shrink:0; }
  .rp-qa-drawer__atc { width:100%; height:50px; cursor:pointer; transition:background-color 0.2s,color 0.2s,border-color 0.2s; }
  .rp-qa-drawer__atc:disabled { opacity:0.35; cursor:default; }
  /* Wishlist mode modifier classes kept as hooks but without color
     overrides — data-button-style drives the appearance via applyAtcStyle. */

  /* ── QA Toast ─────────────────────────────────────────────── */
  /* Cart notification — see global cart-toast snippet in theme.liquid. */
/* END_SECTION:related-products */

/* START_SECTION:slideshow (INDEX:47) */
.slideshow {
    position: relative;
    width: 100%;
    height: var(--ss-h-m, 60svh);
    overflow: hidden;
  }

  @media (min-width: 750px) {
    .slideshow {
      height: var(--ss-h, 80svh);
    }
  }

  .slideshow__slide {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  /* ── Fade transition ── */
  .slideshow--fade .slideshow__slide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
  }
  .slideshow--fade .slideshow__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
  }

  /* ── Slide transition ── */
  .slideshow--slide .slideshow__slide {
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0s 0.65s;
  }
  .slideshow--slide .slideshow__slide.is-active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0s 0s;
  }

  /* ── Media ── */
  .slideshow__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
  }

  .slideshow__media--desktop-only { display: none; }

  @media screen and (min-width: 750px) {
    .slideshow__media--desktop-only { display: flex; }
    .slideshow__media--mobile { display: none; }
  }

  .slideshow__img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  }
  .slideshow__video {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  }
  .slideshow__overlay {
    position: absolute; inset: 0; pointer-events: none;
  }
  .slideshow__placeholder {
    width: 100%; height: 100%; background: #f0f0f0;
  }
  .slideshow__placeholder-svg {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* ── Content layers ── */
  .slideshow__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: var(--ss-content-pad-v, 40px) var(--ss-content-pad-h, 40px);
    pointer-events: auto;
  }

  .slideshow__content--valign-m-top    { align-items: flex-start; }
  .slideshow__content--valign-m-center { align-items: center; }
  .slideshow__content--valign-m-bottom { align-items: flex-end; }
  .slideshow__content--align-m-left    { justify-content: flex-start; }
  .slideshow__content--align-m-center  { justify-content: center; }
  .slideshow__content--align-m-right   { justify-content: flex-end; }

  @media screen and (min-width: 750px) {
    .slideshow__content--valign-top    { align-items: flex-start; }
    .slideshow__content--valign-center { align-items: center; }
    .slideshow__content--valign-bottom { align-items: flex-end; }
    .slideshow__content--align-left    { justify-content: flex-start; }
    .slideshow__content--align-center  { justify-content: center; }
    .slideshow__content--align-right   { justify-content: flex-end; }
  }

  .slideshow__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
  }

  .slideshow__content--align-m-left .slideshow__inner   { align-items: flex-start; text-align: left; }
  .slideshow__content--align-m-center .slideshow__inner { align-items: center; text-align: center; }
  .slideshow__content--align-m-right .slideshow__inner  { align-items: flex-end; text-align: right; }

  @media screen and (min-width: 750px) {
    .slideshow__content--align-left .slideshow__inner   { align-items: flex-start; text-align: left; }
    .slideshow__content--align-center .slideshow__inner { align-items: center; text-align: center; }
    .slideshow__content--align-right .slideshow__inner  { align-items: flex-end; text-align: right; }
  }

  .ss-eyebrow,
  .ss-heading,
  .ss-subheading,
  .ss-body { margin: 0; }

  .slideshow__buttons {
    display: flex; gap: 16px; flex-wrap: wrap;
  }
  .slideshow__buttons--align-m-left   { justify-content: flex-start; }
  .slideshow__buttons--align-m-center { justify-content: center; }
  .slideshow__buttons--align-m-right  { justify-content: flex-end; }
  @media screen and (min-width: 750px) {
    .slideshow__buttons--align-left   { justify-content: flex-start; }
    .slideshow__buttons--align-center { justify-content: center; }
    .slideshow__buttons--align-right  { justify-content: flex-end; }
  }

  /* ── Scroll reveal ── */
  .slideshow--scroll-reveal              { overflow: visible; }
  .slideshow--scroll-reveal .slideshow__slide { overflow: visible; }
  .slideshow--scroll-reveal .slideshow__media { overflow: hidden; }
  .slideshow--scroll-reveal .slideshow__inner {
    position: sticky;
    top: calc(var(--ss-header-offset, 0px) + var(--ss-content-pad-v, 40px));
    bottom: var(--ss-content-pad-v, 40px);
    transition: top 0.3s ease;
  }

  /* ── Arrows ── */
  .slideshow__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: rgba(var(--ss-arrow-color-rgb), 0.12);
    border: 1px solid rgba(var(--ss-arrow-color-rgb), 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ss-arrow-color, #fff);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.15s ease;
  }
  .slideshow__arrow:hover {
    background: rgba(var(--ss-arrow-color-rgb), 0.24);
    transform: translateY(-50%) scale(1.08);
  }
  .slideshow__arrow--prev { left: 20px; }
  .slideshow__arrow--next { right: 20px; }
  .slideshow__arrow svg { width: 18px; height: 18px; display: block; }

  @media screen and (max-width: 749px) {
    .slideshow__arrow {
      width: 30px;
      height: 30px;
    }
    .slideshow__arrow svg { width: 12px; height: 12px; }
    .slideshow__arrow--prev { left: 12px; }
    .slideshow__arrow--next { right: 12px; }
  }

  /* ── Dots ── */
  .slideshow__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .slideshow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--ss-dot-color-rgb, 255,255,255), 0.4);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .slideshow__dot.is-active {
    background: var(--ss-dot-color, #fff);
    transform: scale(1.4);
  }

  /* ── Lines style ── */
  .slideshow__dots--lines {
    gap: 6px;
  }
  .slideshow__dots--lines .slideshow__dot {
    width: 24px;
    height: 4px;
    border-radius: 99px;
    transform: none;
    overflow: hidden;
    position: relative;
    transition: width 0.3s ease, background 0.3s ease;
  }
  .slideshow__dots--lines .slideshow__dot::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ss-dot-color, #fff);
    border-radius: 99px;
    transform: scaleX(0);
    transform-origin: left;
  }
  .slideshow__dots--lines .slideshow__dot.is-active {
    width: 40px;
    transform: none;
    background: rgba(var(--ss-dot-color-rgb, 255,255,255), 0.4);
  }
  .slideshow__dots--lines .slideshow__dot.is-active::after {
    transform: scaleX(1);
    transition: transform var(--ss-autoplay-speed, 5000ms) cubic-bezier(0.4, 0, 0.6, 1);
  }
  .slideshow__dots--lines .slideshow__dot.is-active.no-anim::after {
    transform: scaleX(0);
    transition: none;
  }
/* END_SECTION:slideshow */

/* START_SECTION:split-hero (INDEX:48) */
/* ════════════════════════════════════════════════════════════
     SPLIT HERO — class prefix: split-hero, CSS-var prefix: --sh-*
     All rules consume CSS variables emitted per-instance from the
     inline style tag above. No Liquid in this block — bundled and
     cached. */

  /* Section shell — full width, fixed height, panels distribute equally.
     Mobile: horizontal row with wrapping for 4-panel 2x2 grid. */
  .split-hero {
    position: relative;
    width: 100%;
    height: var(--sh-h-m, 60svh);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* allows 4-panel 2x2 on mobile via basis: 50% */
    gap: var(--sh-gap, 0);
  }
  @media (min-width: 750px) {
    .split-hero {
      flex-wrap: nowrap; /* desktop: always single row, no wrapping */
      height: var(--sh-h, 80svh);
    }
  }

  /* Each panel — desktop is always equal-width across one row (flex: 1 1 0).
     Mobile layout varies with panel count, set by per-count rules below. */
  .split-hero__panel {
    position: relative;
    overflow: hidden;
    flex: 1 1 0;
    min-height: 0;
  }

  /* Mobile per-count layout
     1 panel  - full width (1 row)
     2 panels - 50/50 (1 row of 2)
     3 panels - 33/33/33 (1 row of 3)
     4 panels - 50/50 with wrap (2 rows of 2 = 2x2 grid)
     Each panel gets 50% height when in 2-row layout so the section's
     total mobile height is respected. */
  @media (max-width: 749px) {
    /* Mobile-first-only mode — hide all but the first panel and let
       it span full width regardless of how many panels are declared.
       This rule comes BEFORE the per-count rules. */
    .split-hero--mobile-first-only .split-hero__panel {
      display: none;
    }
    .split-hero--mobile-first-only .split-hero__panel:first-child {
      display: flex;
      flex: 0 0 100% !important;
      height: 100% !important;
    }

    /* 1 panel — full width */
    .split-hero--1-panels .split-hero__panel {
      flex: 0 0 100%;
      height: 100%;
    }
    /* 2 panels — side by side */
    .split-hero--2-panels .split-hero__panel {
      flex: 0 0 calc(50% - var(--sh-gap, 0) / 2);
      height: 100%;
    }
    /* 3 panels — 3 across */
    .split-hero--3-panels .split-hero__panel {
      flex: 0 0 calc(33.333% - var(--sh-gap, 0) * 2 / 3);
      height: 100%;
    }
    /* 4 panels — 2x2 grid (wraps to second row) */
    .split-hero--4-panels .split-hero__panel {
      flex: 0 0 calc(50% - var(--sh-gap, 0) / 2);
      height: calc(50% - var(--sh-gap, 0) / 2);
    }
  }

  /* Media positioning */
  .split-hero__media {
    position: absolute;
    inset: 0;
    display: flex;
    overflow: hidden;
  }
  .split-hero__media--desktop-only { display: none; }
  @media screen and (min-width: 750px) {
    .split-hero__media--desktop-only { display: flex; }
    .split-hero__media--mobile { display: none; }
  }

  .split-hero__img {
    width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  }
  .split-hero__video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .split-hero__placeholder {
    width: 100%; height: 100%; background: #f0f0f0; display: flex; align-items: center; justify-content: center;
  }
  .split-hero__placeholder-svg {
    width: 100%; height: 100%; object-fit: cover;
  }

  /* Overlay — color/opacity inherited per-panel via CSS variables */
  .split-hero__overlay {
    position: absolute; inset: 0; pointer-events: none;
    background: var(--sh-overlay-bg, #000000);
    opacity: var(--sh-overlay-opacity, 0);
  }

  /* Panel link — transparent stretched <a> covering the panel.
     z-index 1 puts it above the media but below content (z=2) and
     video controls (z=3), so buttons and controls still take their
     own clicks while empty media area routes to this link. */
  .split-hero__panel-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
  }

  /* Content positioning within each panel */
  .split-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    padding: var(--sh-content-pad-v, 40px) var(--sh-content-pad-h, 40px);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
  }
  @media (max-width: 749px) {
    .split-hero__content {
      padding: var(--sh-content-pad-v-m, 24px) var(--sh-content-pad-h-m, 24px);
    }
  }
  .split-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: auto;
    max-width: 100%;
  }
  .split-hero__inner > * {
    margin: 0;
  }
  .split-hero__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: var(--sh-buttons-margin-top, 0);
  }

  /* Vertical alignment within content area */
  @media (min-width: 750px) {
    .split-hero__content--valign-top    { align-items: flex-start; }
    .split-hero__content--valign-middle { align-items: center; }
    .split-hero__content--valign-bottom { align-items: flex-end; }
    .split-hero__content--align-left   { justify-content: flex-start; text-align: left; }
    .split-hero__content--align-center { justify-content: center;    text-align: center; }
    .split-hero__content--align-right  { justify-content: flex-end;  text-align: right; }
    .split-hero__content--align-left   .split-hero__buttons { justify-content: flex-start; }
    .split-hero__content--align-center .split-hero__buttons { justify-content: center; }
    .split-hero__content--align-right  .split-hero__buttons { justify-content: flex-end; }
  }
  @media (max-width: 749px) {
    .split-hero__content--valign-m-top    { align-items: flex-start; }
    .split-hero__content--valign-m-middle { align-items: center; }
    .split-hero__content--valign-m-bottom { align-items: flex-end; }
    .split-hero__content--align-m-left   { justify-content: flex-start; text-align: left; }
    .split-hero__content--align-m-center { justify-content: center;    text-align: center; }
    .split-hero__content--align-m-right  { justify-content: flex-end;  text-align: right; }
    .split-hero__content--align-m-left   .split-hero__buttons { justify-content: flex-start; }
    .split-hero__content--align-m-center .split-hero__buttons { justify-content: center; }
    .split-hero__content--align-m-right  .split-hero__buttons { justify-content: flex-end; }
  }

  /* Typography — eyebrow / heading / subheading / body.
     Each consumes its --sh-*-* CSS vars set per-instance. */
  .split-hero__eyebrow {
    color: var(--sh-eyebrow-color);
    font-size: var(--sh-eyebrow-size);
    font-family: var(--sh-eyebrow-font);
    font-weight: var(--sh-eyebrow-weight);
    text-transform: var(--sh-eyebrow-transform);
    letter-spacing: var(--sh-eyebrow-spacing);
    line-height: var(--sh-eyebrow-line-height);
    max-width: var(--sh-eyebrow-max-width);
    margin-top: var(--sh-eyebrow-margin-top);
  }
  .split-hero__heading {
    color: var(--sh-heading-color);
    font-size: var(--sh-heading-size);
    font-family: var(--sh-heading-font);
    font-weight: var(--sh-heading-weight);
    text-transform: var(--sh-heading-transform);
    letter-spacing: var(--sh-heading-spacing);
    line-height: var(--sh-heading-line-height);
    max-width: var(--sh-heading-max-width);
    margin-top: var(--sh-heading-margin-top);
  }
  .split-hero__subheading {
    color: var(--sh-subheading-color);
    font-size: var(--sh-subheading-size);
    font-family: var(--sh-subheading-font);
    font-weight: var(--sh-subheading-weight);
    text-transform: var(--sh-subheading-transform);
    letter-spacing: var(--sh-subheading-spacing);
    line-height: var(--sh-subheading-line-height);
    max-width: var(--sh-subheading-max-width);
    margin-top: var(--sh-subheading-margin-top);
  }
  .split-hero__body {
    color: var(--sh-body-color);
    font-size: var(--sh-body-size);
    font-family: var(--sh-body-font);
    font-weight: var(--sh-body-weight);
    text-transform: var(--sh-body-transform);
    letter-spacing: var(--sh-body-spacing);
    line-height: var(--sh-body-line-height);
    max-width: var(--sh-body-max-width);
    margin-top: var(--sh-body-margin-top);
  }

  /* Buttons — shared typography.
     The .split-hero ancestor prefix is load-bearing: the buttons carry
     `class="button text-button ..."` and the critical CSS (rendered
     inline AFTER content_for_header, so AFTER the section's bundled
     {% stylesheet %}) sets font-family/font-weight on `.text-button,
     .button, button { ... }` with single-class specificity. Without
     the prefix our rules tie on specificity and lose on source order,
     so the merchant's Text style / size / transform / letter-spacing
     settings appear inert. The two-class prefix (0,2,0) beats critical
     CSS (0,1,0) cleanly. */
  .split-hero .split-hero__btn--primary,
  .split-hero .split-hero__btn--secondary {
    text-transform: var(--sh-pbtn-transform);
    letter-spacing: var(--sh-pbtn-spacing);
  }
  .split-hero .split-hero__btn--primary {
    font-size: var(--sh-pbtn-size);
    font-family: var(--sh-pbtn-font);
    font-weight: var(--sh-pbtn-weight);
  }
  .split-hero .split-hero__btn--secondary {
    font-size: var(--sh-sbtn-size);
    font-family: var(--sh-sbtn-font);
    font-weight: var(--sh-sbtn-weight);
    text-transform: var(--sh-sbtn-transform);
    letter-spacing: var(--sh-sbtn-spacing);
  }

  /* Buttons — per-panel colors. Variables inherit from the panel root,
     so a single static rule serves every panel. Same .split-hero prefix
     for specificity hygiene (matches typography above). */
  .split-hero .split-hero__btn--primary {
    background-color: var(--sh-p-bg, var(--button-primary-bg));
    color: var(--sh-p-text, var(--button-primary-text));
    border: var(--sh-pbtn-border-width) solid var(--sh-p-border, var(--button-primary-border));
    border-radius: var(--sh-pbtn-radius);
    padding: var(--sh-pbtn-pad-y) var(--sh-pbtn-pad-x);
  }
  .split-hero .split-hero__btn--primary:hover {
    color: var(--sh-p-text-hover, var(--button-primary-text-hover));
    border-color: var(--sh-p-border-hover, var(--button-primary-border-hover));
    background-color: var(--sh-p-bg-hover-effective, var(--button-primary-bg-hover));
  }
  .split-hero .split-hero__btn--secondary {
    background-color: var(--sh-s-bg, var(--button-secondary-bg));
    color: var(--sh-s-text, var(--button-secondary-text));
    border: var(--sh-sbtn-border-width) solid var(--sh-s-border, var(--button-secondary-border));
    border-radius: var(--sh-sbtn-radius);
    padding: var(--sh-sbtn-pad-y) var(--sh-sbtn-pad-x);
  }
  .split-hero .split-hero__btn--secondary:hover {
    color: var(--sh-s-text-hover, var(--button-secondary-text-hover));
    border-color: var(--sh-s-border-hover, var(--button-secondary-border-hover));
    background-color: var(--sh-s-bg-hover-effective, var(--button-secondary-bg-hover));
  }

  /* Hover-effect modes that depend on the theme's global Button hover
     setting. Attribute selectors on the wrapper let one static rule
     pick the right behaviour without Liquid conditionals. */
  .split-hero[data-button-hover-effect="fill_bottom"] .split-hero__btn--primary::before,
  .split-hero[data-button-hover-effect="fill_left"]   .split-hero__btn--primary::before {
    background-color: var(--sh-p-bg-hover);
  }
  .split-hero[data-button-hover-effect="fill_bottom"] .split-hero__btn--secondary::before,
  .split-hero[data-button-hover-effect="fill_left"]   .split-hero__btn--secondary::before {
    background-color: var(--sh-s-bg-hover);
  }
  .split-hero[data-button-hover-effect="glow"] .split-hero__btn--primary:hover {
    box-shadow: 0 0 20px var(--sh-p-bg);
  }
  .split-hero[data-button-hover-effect="glow"] .split-hero__btn--secondary:hover {
    box-shadow: 0 0 20px var(--sh-s-border);
  }

  /* Hover/text-effect opt-out (matches hero.liquid) */
  .split-hero .no-hover-effect { --button-hover-effect: none; }
  .split-hero .no-hover-effect:hover { transform: none !important; box-shadow: none !important; }
  .split-hero .no-hover-effect::before { display: none !important; }
  .split-hero .no-text-effect::after { display: none !important; }

  /* Video controls — bottom-right of the panel they belong to */
  .split-hero__video-controls {
    position: absolute;
    bottom: 16px; right: 16px;
    display: flex; align-items: center; gap: 8px;
    z-index: 3; pointer-events: auto;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--sh-controls-color, #fff);
    transition: opacity 0.3s ease;
    max-width: calc(100% - 16px);
    box-sizing: border-box;
  }
  .split-hero__vc-btn {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    color: inherit; line-height: 0; display: inline-flex;
    width: 24px; height: 24px; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .split-hero__vc-btn svg { width: 16px; height: 16px; }
  .split-hero__vc-progress {
    width: 80px;
    flex-shrink: 1;
    min-width: 20px;
  }
  .split-hero__vc-progress-track {
    width: 100%; height: 2px; background: rgba(var(--sh-controls-color-rgb, 255,255,255), 0.4); border-radius: 1px; overflow: hidden;
  }
  .split-hero__vc-progress-fill {
    height: 100%; background: var(--sh-controls-color, #fff); width: 0%;
    transition: width 0.1s linear;
  }

  /* Mobile scaling: controls adapt to panel count.
     Narrow panels can't fit the full pill. We scale down the pill
     padding, icons, and progress bar for 2-panel and 4-panel mobile
     layouts, and hide the progress bar entirely for 3-panel (too narrow). */
  @media (max-width: 749px) {
    /* 2 and 4 panels (~50% width): compact pill */
    .split-hero--2-panels .split-hero__video-controls,
    .split-hero--4-panels .split-hero__video-controls {
      bottom: 10px; right: 10px;
      padding: 4px 8px;
      gap: 6px;
    }
    .split-hero--2-panels .split-hero__vc-btn,
    .split-hero--4-panels .split-hero__vc-btn {
      width: 20px; height: 20px;
    }
    .split-hero--2-panels .split-hero__vc-btn svg,
    .split-hero--4-panels .split-hero__vc-btn svg {
      width: 14px; height: 14px;
    }
    .split-hero--2-panels .split-hero__vc-progress,
    .split-hero--4-panels .split-hero__vc-progress {
      width: 48px;
    }

    /* 3 panels (~33% width): smallest pill + hide progress entirely */
    .split-hero--3-panels .split-hero__video-controls {
      bottom: 8px; right: 8px;
      padding: 3px 6px;
      gap: 4px;
    }
    .split-hero--3-panels .split-hero__vc-btn {
      width: 18px; height: 18px;
    }
    .split-hero--3-panels .split-hero__vc-btn svg {
      width: 12px; height: 12px;
    }
    .split-hero--3-panels .split-hero__vc-progress {
      display: none;
    }
  }
  /* Very narrow screens (< 400px): further shrink even 2-panel.
     Pulled out of the parent media query so it doesn't get tangled in
     nested-rule parser edge cases — the standalone breakpoint is
     equivalent for the panel-count classes. */
  @media (max-width: 399px) {
    .split-hero--2-panels .split-hero__vc-progress,
    .split-hero--4-panels .split-hero__vc-progress {
      display: none;
    }
  }

  /* -- Scroll reveal -------------------------------------------
     Mirrors the hero.liquid scroll-reveal pattern: when enabled,
     each panel's content layer (.split-hero__inner) becomes sticky
     within its panel so it stays pinned in view while the user
     scrolls past the section.

     The overflow overrides matter — position: sticky responds to
     scroll on the NEAREST scrolling ancestor (any overflow other
     than visible). .split-hero AND .split-hero__panel both default
     to overflow: hidden in this section, which would make the panel
     itself the "scrolling ancestor" — but the panel doesn't actually
     scroll (its content fits via absolute positioning), so sticky
     ends up bound to a non-scrolling context and never fires. Flip
     both to visible so the body/html scroll wins as the scrolling
     ancestor and sticky responds to page scroll.

     .split-hero__media keeps overflow: hidden so the image/video
     still clips at the panel edge as intended. --sh-header-offset
     is updated from JS so the sticky top accounts for any fixed
     site header sitting above the section. */
  .split-hero[data-scroll-reveal="true"] { overflow: visible; }
  .split-hero[data-scroll-reveal="true"] .split-hero__panel { overflow: visible; }
  .split-hero[data-scroll-reveal="true"] .split-hero__media { overflow: hidden; }
  .split-hero[data-scroll-reveal="true"] .split-hero__inner {
    position: sticky;
    top: calc(var(--sh-header-offset, 0px) + var(--sh-content-pad-v-m, 24px));
    bottom: var(--sh-content-pad-v-m, 24px);
    transition: top 0.3s ease;
  }
  @media (min-width: 750px) {
    .split-hero[data-scroll-reveal="true"] .split-hero__inner {
      top: calc(var(--sh-header-offset, 0px) + var(--sh-content-pad-v, 40px));
      bottom: var(--sh-content-pad-v, 40px);
    }
  }

  /* Buttons reset (matches hero.liquid)
     Note: border + padding intentionally NOT set here — the .split-hero__btn--*
     rules above set them based on the Box style settings. */
  .split-hero .text-button {
    display: inline-block; cursor: pointer; text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1; white-space: nowrap;
  }
/* END_SECTION:split-hero */

/* START_SECTION:text-section (INDEX:49) */
.text-block-section {
    display: flex;
    flex-direction: column;
    background: var(--tbs-bg);
    padding-top: var(--tbs-pad-top);
    padding-bottom: var(--tbs-pad-bottom);
    padding-left: var(--tbs-pad-side);
    padding-right: var(--tbs-pad-side);
    gap: 16px;
  }

  /* Text Alignment */
  .text-block-section--align-left {
    align-items: flex-start;
    text-align: left;
  }

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

  .text-block-section--align-right {
    align-items: flex-end;
    text-align: right;
  }

  /* Block typography — each block carries its own values via inline
     style="..." custom properties; these selectors just consume them. */
  .text-eyebrow,
  .text-heading,
  .text-subheading,
  .text-body {
    color: var(--tbs-text-color);
    font-family: var(--tbs-text-font);
    font-weight: var(--tbs-text-weight);
    font-size: var(--tbs-text-size-mobile);
    text-transform: var(--tbs-text-transform);
    letter-spacing: var(--tbs-text-letter-spacing);
    line-height: var(--tbs-text-line-height);
    max-width: var(--tbs-text-max-width);
  }

  @media screen and (min-width: 750px) {
    .text-eyebrow,
    .text-heading,
    .text-subheading,
    .text-body {
      font-size: var(--tbs-text-size-desktop);
    }
  }

  .text-block-section .text-eyebrow {
    margin-bottom: 8px;
  }

  .text-block-section .text-heading,
  .text-block-section .text-subheading,
  .text-block-section .text-body {
    margin: 0;
  }

  /* Buttons — share .text-button for typography sizing, then class
     selectors (.button / .button-secondary) carry the theme color
     palette and hover-effect treatment. */
  .text-button {
    font-size: var(--tbs-text-size-mobile);
    text-transform: var(--tbs-text-transform);
    letter-spacing: var(--tbs-text-letter-spacing);
  }

  @media screen and (min-width: 750px) {
    .text-button {
      font-size: var(--tbs-text-size-desktop);
    }
  }

  .text-button.button {
    background-color: var(--tbs-btn-p-bg);
    color: var(--tbs-btn-p-text);
    border-color: var(--tbs-btn-p-border);
  }

  .text-button.button:hover {
    color: var(--tbs-btn-p-text-hover);
    border-color: var(--tbs-btn-p-border-hover);
    background-color: var(--tbs-btn-p-bg-hover);
  }

  /* For fill_bottom / fill_left hover effects, the background stays
     at the base color — the hover fill animates in via a ::before
     pseudo (configured below). Without this override the :hover
     rule above would swap the bg straight to the hover color and
     cancel the fill effect. */
  [data-button-hover-effect="fill_bottom"] .text-button.button:hover,
  [data-button-hover-effect="fill_left"] .text-button.button:hover {
    background-color: var(--tbs-btn-p-bg);
  }

  [data-button-hover-effect="fill_bottom"] .text-button.button::before,
  [data-button-hover-effect="fill_left"] .text-button.button::before {
    background-color: var(--tbs-btn-p-bg-hover);
  }

  [data-button-hover-effect="glow"] .text-button.button:hover {
    box-shadow: 0 0 20px var(--tbs-btn-p-bg);
  }

  .text-button.button-secondary {
    background-color: var(--tbs-btn-s-bg);
    color: var(--tbs-btn-s-text);
    border-color: var(--tbs-btn-s-border);
  }

  .text-button.button-secondary:hover {
    color: var(--tbs-btn-s-text-hover);
    border-color: var(--tbs-btn-s-border-hover);
    background-color: var(--tbs-btn-s-bg-hover);
  }

  [data-button-hover-effect="fill_bottom"] .text-button.button-secondary:hover,
  [data-button-hover-effect="fill_left"] .text-button.button-secondary:hover {
    background-color: var(--tbs-btn-s-bg);
  }

  [data-button-hover-effect="fill_bottom"] .text-button.button-secondary::before,
  [data-button-hover-effect="fill_left"] .text-button.button-secondary::before {
    background-color: var(--tbs-btn-s-bg-hover);
  }

  [data-button-hover-effect="glow"] .text-button.button-secondary:hover {
    box-shadow: 0 0 20px var(--tbs-btn-s-border);
  }

  .text-block-section__buttons {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .text-block-section--align-left .text-block-section__buttons {
    justify-content: flex-start;
  }

  .text-block-section--align-center .text-block-section__buttons {
    justify-content: center;
  }

  .text-block-section--align-right .text-block-section__buttons {
    justify-content: flex-end;
  }

  /* Disable hover effects */
  .text-block-section .no-hover-effect {
    --button-hover-effect: none;
  }
  .text-block-section .no-hover-effect:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .text-block-section .no-hover-effect::before {
    display: none !important;
  }

  /* Disable text effects */
  .text-block-section .no-text-effect::after {
    display: none !important;
  }
  .text-block-section .no-text-effect .text-wrapper::after {
    display: none !important;
  }

  /* ── Animation system ───────────────────────────────────
     Variants are selected by [data-animation="..."] on the
     section. Rules below apply unconditionally but only
     match when the merchant picks the corresponding option.
     When data-animation="none", the hidden initial state
     never applies, so elements display normally. */
  .text-block-section[data-animation]:not([data-animation="none"]) .animate-element {
    opacity: 0;
    --animation-duration: var(--tbs-anim-duration);
    --animation-delay: var(--tbs-anim-delay);
    --stagger-delay: 0ms;
  }

  .text-block-section[data-animation]:not([data-animation="none"]) .animate-element.animated {
    animation-duration: var(--animation-duration);
    animation-delay: calc(var(--animation-delay) + var(--stagger-delay));
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Stagger applies only when the merchant turns it on. Default
     --stagger-delay is 0ms above, so without these overrides every
     element animates at the same time. */
  .text-block-section[data-stagger="true"] .animate-element:nth-child(1) { --stagger-delay: 0ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(2) { --stagger-delay: 100ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(3) { --stagger-delay: 200ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(4) { --stagger-delay: 300ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(5) { --stagger-delay: 400ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(6) { --stagger-delay: 500ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(7) { --stagger-delay: 600ms; }
  .text-block-section[data-stagger="true"] .animate-element:nth-child(8) { --stagger-delay: 700ms; }

  /* Fade In */
  .text-block-section[data-animation="fade_in"] .animate-element.animated {
    animation-name: tbs-fade-in;
  }
  @keyframes tbs-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Fade Up */
  .text-block-section[data-animation="fade_up"] .animate-element {
    transform: translateY(30px);
  }
  .text-block-section[data-animation="fade_up"] .animate-element.animated {
    animation-name: tbs-fade-up;
  }
  @keyframes tbs-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Blur In */
  .text-block-section[data-animation="blur_in"] .animate-element {
    filter: blur(10px);
  }
  .text-block-section[data-animation="blur_in"] .animate-element.animated {
    animation-name: tbs-blur-in;
  }
  @keyframes tbs-blur-in {
    from { opacity: 0; filter: blur(10px); }
    to   { opacity: 1; filter: blur(0); }
  }

  /* Typewriter */
  .text-block-section[data-animation="typewriter"] .animate-element {
    opacity: 1;
  }
  .text-block-section[data-animation="typewriter"] .typewriter-text {
    display: inline;
    white-space: pre-wrap;
  }
  .text-block-section[data-animation="typewriter"] .typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: currentColor;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: tbs-cursor-blink 0.75s step-end infinite;
  }
  .text-block-section[data-animation="typewriter"] .typewriter-cursor.hidden {
    opacity: 0;
    animation: none;
  }
  @keyframes tbs-cursor-blink {
    50% { opacity: 0; }
  }
/* END_SECTION:text-section */

/* START_SECTION:wishlist-drawer (INDEX:50) */
/* ════════════════════════════════════════════════════════════
     WISHLIST DRAWER — class prefix: wishlist-drawer-*
  */

  /* ── Overlay & drawer shell ─────────────────────────── */
  .wishlist-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .wishlist-drawer-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .wishlist-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    background: var(--color-background, #fff);
    color: var(--color-foreground, #111);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
  }
  @media screen and (min-width: 1200px) {
    .wishlist-drawer {
      width: 33.333vw;
      min-width: 320px;
    }
  }
  .wishlist-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* ── Header ──────────────────────────────────────────── */
  .wishlist-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: var(--wd-divider-thickness, 1px) solid var(--wd-divider-color, rgba(0,0,0,0.08));
    flex-shrink: 0;
  }
  .wishlist-drawer__title {
    font-size: var(--wd-heading-size, 14px);
    font-weight: var(--wd-heading-weight, 500);
    font-family: var(--wd-heading-font, inherit);
    letter-spacing: var(--wd-heading-spacing, 0.06em);
    text-transform: var(--wd-heading-transform, uppercase);
    color: var(--wd-heading-color, inherit);
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }

  .wishlist-drawer__title-count {
    display: none;
    font-size: 8px;
    font-weight: var(--wd-heading-weight, 700);
    font-family: var(--wd-heading-font, inherit);
    letter-spacing: var(--wd-heading-spacing, 0em);
    text-transform: var(--wd-heading-transform, none);
    line-height: 1;
    margin-top: -1px;
    color: var(--wd-heading-color, inherit);
  }

  .wishlist-drawer__title-count.is-active {
    display: inline;
  }
  .wishlist-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--wd-heading-color, inherit);
  }

  /* ── Body ────────────────────────────────────────────── */
  .wishlist-drawer__body {
    flex: 1;
    overflow-y: auto;
    position: relative;
  }

  /* ── Loading ─────────────────────────────────────────── */
  .wishlist-drawer__loading {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }
  .wishlist-drawer__loading.is-visible { display: flex; }
  .wishlist-drawer__spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wd-spin 0.7s linear infinite;
  }
  @keyframes wd-spin { to { transform: rotate(360deg); } }

  /* ── Empty state ─────────────────────────────────────── */
  .wishlist-drawer__empty {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 24px;
    text-align: center;
  }
  .wishlist-drawer__empty.is-visible { display: flex; }
  .wishlist-drawer__empty-icon { opacity: 0.3; }
  .wishlist-drawer__empty p {
    font-size: 13px;
    opacity: 0.5;
    margin: 0;
  }
  .wishlist-drawer__empty-link {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: underline;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.15s;
  }
  .wishlist-drawer__empty-link:hover { opacity: 1; }

  /* ── Login banner ────────────────────────────────────── */
  /* Sits above items in body, only rendered when guest. */
  .wishlist-drawer__login-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    background: var(--wd-login-prompt-bg, #f5f5f5);
    border-bottom: var(--wd-divider-thickness, 1px) solid var(--wd-divider-color, rgba(0,0,0,0.07));
    font-family: var(--wd-login-prompt-font, inherit);
    font-weight: var(--wd-login-prompt-weight, 400);
    font-size: var(--wd-login-prompt-size, 12px);
    color: var(--wd-login-prompt-color, inherit);
    letter-spacing: var(--wd-login-prompt-spacing, 0em);
    text-transform: var(--wd-login-prompt-transform, none);
    line-height: 1.4;
  }
  .wishlist-drawer__login-banner[hidden] { display: none; }
  .wishlist-drawer__login-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .wishlist-drawer__login-link {
    flex-shrink: 0;
    color: var(--wd-login-prompt-link-color, currentColor);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: opacity 0.15s;
  }
  .wishlist-drawer__login-link:hover { opacity: 0.7; }
  .wishlist-drawer__login-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--wd-login-prompt-color, inherit);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
  }
  .wishlist-drawer__login-dismiss:hover { opacity: 1; }

  /* ── Items ───────────────────────────────────────────── */
  .wishlist-drawer__items {
    padding: 0 24px;
  }
  .wishlist-drawer__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: var(--wd-divider-thickness, 1px) solid var(--wd-divider-color, rgba(0,0,0,0.07));
    position: relative;
  }
  .wishlist-drawer__item:last-child { border-bottom: none; }
  .wishlist-drawer__item-img-wrap {
    display: block;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
  }
  .wishlist-drawer__item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .wishlist-drawer__item-img-placeholder {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
  }
  .wishlist-drawer__item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .wishlist-drawer__item-title {
    font-size: var(--wd-title-size, 13px);
    font-weight: var(--wd-title-weight, 500);
    font-family: var(--wd-title-font, inherit);
    color: var(--wd-title-color, inherit);
    letter-spacing: var(--wd-title-spacing, 0em);
    text-transform: var(--wd-title-transform, none);
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wishlist-drawer__item-title:hover { opacity: 0.7; }
  .wishlist-drawer__item-variant {
    font-size: var(--wd-variant-size, 11px);
    font-weight: var(--wd-variant-weight, 400);
    font-family: var(--wd-variant-font, inherit);
    color: var(--wd-variant-color, inherit);
    letter-spacing: var(--wd-variant-spacing, 0em);
    text-transform: var(--wd-variant-transform, none);
    opacity: 0.5;
  }
  .wishlist-drawer__item-price {
    font-size: var(--wd-price-size, 13px);
    font-weight: var(--wd-price-weight, 400);
    font-family: var(--wd-price-font, inherit);
    color: var(--wd-price-color, inherit);
    letter-spacing: var(--wd-price-spacing, 0em);
    text-transform: var(--wd-price-transform, none);
    margin-top: 2px;
  }
  .wishlist-drawer__item-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }
  /* Wishlist item ATC inherits bg/color/border/border-radius/hover from the global [data-button-style] system. */
  .wishlist-drawer__item-atc {
    flex: 1;
    font-size: var(--wd-atc-size, 11px);
    font-family: var(--wd-atc-font, inherit);
    font-weight: var(--wd-atc-weight, 500);
    letter-spacing: var(--wd-atc-spacing, 0.05em);
    text-transform: var(--wd-atc-transform, uppercase);
    padding: 8px 12px;
  }
  .wishlist-drawer__item-atc:disabled { opacity: 0.4; }
  .wishlist-drawer__item-remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--wd-title-color, inherit);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Footer ──────────────────────────────────────────── */
  .wishlist-drawer__footer {
    flex-shrink: 0;
    padding: 16px 24px max(20px, env(safe-area-inset-bottom));
    border-top: var(--wd-divider-thickness, 1px) solid var(--wd-divider-color, rgba(0,0,0,0.08));
    display: none;
  }
  .wishlist-drawer__footer.is-visible { display: block; }
  /* View Page button inherits bg/color/border/border-radius/hover from the global [data-button-style] system. */
  .wishlist-drawer__view-page {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    text-decoration: none;
    box-sizing: border-box;
    font-size: var(--wd-view-page-size, 13px);
    font-family: var(--wd-view-page-font, inherit);
    font-weight: var(--wd-view-page-weight, 500);
    letter-spacing: var(--wd-view-page-spacing, 0.06em);
    text-transform: var(--wd-view-page-transform, uppercase);
    border-width: var(--wd-view-page-border-width, 1px);
    border-radius: var(--wd-view-page-radius, 0px);
  }
/* END_SECTION:wishlist-drawer */

/* START_SECTION:wishlist (INDEX:51) */
/* ════════════════════════════════════════════════════════════
     WISHLIST PAGE — class prefix: wishlist-page-* / wishlist-card-*
  */

  .wishlist-page {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wp-padding-top-m) var(--wp-padding-h-m) var(--wp-padding-bottom-m);
  }
  @media screen and (min-width: 1200px) {
    .wishlist-page {
      padding: var(--wp-padding-top-d) var(--wp-padding-h-d) var(--wp-padding-bottom-d);
    }
  }

  .wishlist-page__inner {
    width: 100%;
    box-sizing: border-box;
  }

  /* ── Bulk action row + divider ─────────────────────────────── */
  /* Sits at the top of the page on every viewport. Move-all on the
     left, clear on the right via flex space-between. The divider
     element below it is a thin horizontal line that separates the
     bulk row from the items grid. Both render in normal block flow
     (no grid needed since there's no title to side-by-side with). */
  .wishlist-page__bulk {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .wishlist-page__divider {
    height: var(--wp-divider-thickness);
    background-color: var(--wp-divider-color);
    margin-bottom: 32px;
  }
  @media screen and (min-width: 750px) {
    .wishlist-page__divider {
      margin-bottom: 40px;
    }
  }

  /* .wishlist-page__move-all picks up bg/color/border via [data-button-style]; clear-all is a plain text link styled below. */
  .wishlist-page__bulk-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--wp-bulk-font);
    font-weight: var(--wp-bulk-weight);
    font-size: var(--wp-bulk-size);
    text-transform: var(--wp-bulk-transform);
    letter-spacing: var(--wp-bulk-spacing);
    line-height: 1;
    padding: 0;
    color: inherit;
  }
  .wishlist-page__move-all {
    padding: 0;
    border-width: var(--wp-bulk-border-width, 0px);
    border-style: solid;
    border-radius: var(--wp-bulk-radius, 0px);
  }
  .wishlist-page__clear-all {
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.7;
    transition: opacity 0.15s;
  }
  .wishlist-page__clear-all:hover { opacity: 1; }
  .wishlist-page__clear-all.is-confirming {
    opacity: 1;
    color: #c0392b;
  }
  .wishlist-page__bulk-btn:disabled { opacity: 0.4; pointer-events: none; }

  /* ── Loading ──────────────────────────────────────────────── */
  .wishlist-page__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
  }
  .wishlist-page__loading[hidden] { display: none; }
  .wishlist-page__spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wp-spin 0.7s linear infinite;
  }
  @keyframes wp-spin { to { transform: rotate(360deg); } }

  /* ── Login banner — guest only, dismissible ──────────────── */
  .wishlist-page__login-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 24px;
    background: var(--wp-login-prompt-bg, #f5f5f5);
    font-family: var(--wp-login-prompt-font, inherit);
    font-weight: var(--wp-login-prompt-weight, 400);
    font-size: var(--wp-login-prompt-size, 13px);
    color: var(--wp-login-prompt-color, inherit);
    letter-spacing: var(--wp-login-prompt-spacing, 0em);
    text-transform: var(--wp-login-prompt-transform, none);
    line-height: 1.4;
  }
  .wishlist-page__login-banner[hidden] { display: none; }
  .wishlist-page__login-text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .wishlist-page__login-link {
    flex-shrink: 0;
    color: var(--wp-login-prompt-link-color, currentColor);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: opacity 0.15s;
  }
  .wishlist-page__login-link:hover { opacity: 0.7; }
  .wishlist-page__login-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--wp-login-prompt-color, inherit);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
  }
  .wishlist-page__login-dismiss:hover { opacity: 1; }

  /* ── Empty state ─────────────────────────────────────────── */
  .wishlist-page__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 20px;
    text-align: center;
  }
  .wishlist-page__empty[hidden] { display: none; }
  .wishlist-page__empty-icon {
    opacity: 0.25;
    color: var(--wp-empty-color);
  }
  .wishlist-page__empty-text {
    margin: 0;
    font-family: var(--wp-empty-font);
    font-weight: var(--wp-empty-weight);
    font-size: var(--wp-empty-size);
    color: var(--wp-empty-color);
    letter-spacing: var(--wp-empty-spacing);
    text-transform: var(--wp-empty-transform);
  }
  .wishlist-page__empty-subtext {
    margin: 0;
    font-family: var(--wp-empty-font);
    font-size: calc(var(--wp-empty-size) * 0.8);
    color: var(--wp-empty-color);
    opacity: 0.6;
    max-width: 360px;
  }
  .wishlist-page__empty-link {
    font-family: var(--wp-empty-link-font);
    font-weight: var(--wp-empty-link-weight);
    font-size: var(--wp-empty-link-size);
    color: var(--wp-empty-link-color);
    letter-spacing: var(--wp-empty-link-spacing);
    text-transform: var(--wp-empty-link-transform);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-top: 8px;
    transition: opacity 0.15s;
  }
  .wishlist-page__empty-link:hover { opacity: 0.7; }

  /* ── Grid ─────────────────────────────────────────────────── */
  .wishlist-page__grid {
    display: grid;
    grid-template-columns: repeat(var(--wp-cols-m), 1fr);
    gap: var(--wp-row-gap-m) var(--wp-col-gap-m);
  }
  .wishlist-page__grid[hidden] { display: none; }
  @media screen and (min-width: 1200px) {
    .wishlist-page__grid {
      grid-template-columns: repeat(var(--wp-cols-d), 1fr);
      gap: var(--wp-row-gap-d) var(--wp-col-gap-d);
    }
  }

  /* ── Card ─────────────────────────────────────────────────── */
  .wishlist-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  .wishlist-card.is-removing {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
  }
  /* Image aspect ratio — driven by data-wp-image-ratio on the section root */
  .wishlist-card__image-wrap {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    background-color: var(--wp-card-bg);
    border-radius: var(--wp-card-radius);
    overflow: hidden;
  }
  [data-wp-image-ratio="square"] .wishlist-card__image-wrap { aspect-ratio: 1 / 1; }
  [data-wp-image-ratio="portrait"] .wishlist-card__image-wrap { aspect-ratio: 3 / 4; }
  [data-wp-image-ratio="tall"] .wishlist-card__image-wrap { aspect-ratio: 4 / 5; }
  [data-wp-image-ratio="landscape"] .wishlist-card__image-wrap { aspect-ratio: 4 / 3; }
  .wishlist-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
  }
  .wishlist-card__img-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08));
  }
  .wishlist-card.is-soldout .wishlist-card__img { opacity: 0.55; }

  .wishlist-card__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--wp-remove-bg);
    border: none;
    cursor: pointer;
    color: var(--wp-remove-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: transform 0.15s ease, background-color 0.15s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .wishlist-card__remove:hover {
    transform: scale(1.06);
  }
  .wishlist-card__remove svg {
    width: var(--wp-remove-size);
    height: var(--wp-remove-size);
  }

  .wishlist-card__soldout-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    font-family: var(--wp-soldout-font);
    font-weight: var(--wp-soldout-weight);
    font-size: var(--wp-soldout-size);
    color: var(--wp-soldout-color);
    text-transform: var(--wp-soldout-transform);
    letter-spacing: var(--wp-soldout-spacing);
    background: rgba(255,255,255,0.92);
    padding: 4px 10px;
    line-height: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  .wishlist-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 4px;
    flex: 1 1 auto; /* fill remaining card height — pushes the ATC sibling to the bottom so buttons align across the row */
  }
  .wishlist-card__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }
  .wishlist-card__title {
    font-family: var(--wp-card-title-font);
    font-weight: var(--wp-card-title-weight);
    font-size: var(--wp-card-title-size-m);
    color: var(--wp-card-title-color);
    letter-spacing: var(--wp-card-title-spacing);
    text-transform: var(--wp-card-title-transform);
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    transition: opacity 0.15s;
  }
  .wishlist-card__title:hover { opacity: 0.7; }
  @media screen and (min-width: 1200px) {
    .wishlist-card__title { font-size: var(--wp-card-title-size-d); }
  }

  .wishlist-card__variant {
    font-family: var(--wp-variant-font);
    font-weight: var(--wp-variant-weight);
    font-size: var(--wp-variant-size);
    color: var(--wp-variant-color);
    letter-spacing: var(--wp-variant-spacing);
    text-transform: var(--wp-variant-transform);
    opacity: 0.55;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wishlist-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .wishlist-card__price {
    font-family: var(--wp-price-font);
    font-weight: var(--wp-price-weight);
    font-size: var(--wp-price-size-m);
    color: var(--wp-price-color);
    letter-spacing: var(--wp-price-spacing);
    text-transform: var(--wp-price-transform);
    white-space: nowrap;
  }
  .wishlist-card__price--compare {
    text-decoration: line-through;
    color: var(--wp-compare-color);
  }
  @media screen and (min-width: 1200px) {
    .wishlist-card__price { font-size: var(--wp-price-size-d); }
  }

  /* ATC inherits bg/color/border/border-radius/hover from the global [data-button-style] system. */
  .wishlist-card__atc {
    width: 100%;
    padding: 11px 16px;
    cursor: pointer;
    font-family: var(--wp-atc-font);
    font-weight: var(--wp-atc-weight);
    font-size: var(--wp-atc-size);
    text-transform: var(--wp-atc-transform);
    letter-spacing: var(--wp-atc-spacing);
    line-height: 1;
    box-sizing: border-box;
  }
  .wishlist-card__atc:disabled { opacity: 0.45; cursor: not-allowed; }

  /* Cart notification has been moved to the global cart-toast snippet
     (rendered once in theme.liquid). Configure it in Theme Settings -
     Cart Notification. */
/* END_SECTION:wishlist */

/* CSS from block stylesheet tags */
/* START_BLOCK:_header-menu (INDEX:54) */
.header__nav {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .header__nav {
      display: flex;
      align-items: center;
    }
  }

  .header__nav-list {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .header__nav-item {
    position: relative;
    z-index: 101;
  }

  /* .header__nav-link here covers the INLINE top-bar nav only. The drawer
     also renders .header__nav-link elements but has its own underline
     rule in blocks/_header-drawer.liquid — the :not(.drawer ...) guard
     prevents this rule from painting a row-wide line on drawer links
     (drawer anchors are display:flex with width:100%, so the unscoped
     background-size: 100% would stretch the underline across the whole
     row, visually competing with the drawer's text-width underline). */
  .header__nav-link:not(.drawer .header__nav-link) {
    text-decoration: none;
    /* BASE inline-nav link color (non-transparent headers).
       Cascade: menu block's "Text color" → theme global foreground.

       The transparent-header case is handled by an OVERRIDE rule in
       sections/header.liquid that swaps in --header-transparent-color
       at the top of the chain when .header-wrapper--transparent is
       active (and the wrapper isn't yet in scrolled-up state). Keep
       this base rule simple — let the override handle that fork. */
    color: var(--inline-nav-text-color, var(--color-foreground));
  }

  /* ── Animated underline draw-in ──────────────────────────────
     Hover paints a thin line under the text from left to right.
     Implementation uses a single-pixel linear-gradient as a
     background-image with background-size animating from 0 to 100%
     width. Sits underneath the text baseline naturally (background-
     position bottom). Compositor-friendly since background-size on
     a 1px image is composited efficiently.

     SINGLE PAINT TARGET: the inner <span> wrapping the link text
     (every nav anchor renders with one — see template at the top of
     this file). The <span> gets `display: inline-block` so it
     establishes its own content-area whose bottom edge sits at the
     full line-height of the text, not at the inline-box bottom
     (which would sit much closer to the descender line). That extra
     bit of breathing room is what gives the underline its visual
     space below the glyphs.

     Why both link types use the span (was previously split):
     - Submenu-parent links already used the span for "text-width
       match with the drawer" — span sizes to text content only, no
       trailing underline past the text if the anchor has padding.
     - Simple links USED to paint on the anchor itself, which is an
       inline element. Inline elements anchor `background-position
       100%` to the inline-box bottom, which sits AT the font's
       descender baseline — visibly closer to the glyphs than the
       inline-block content-area bottom that the submenu span uses.
       Side-by-side, the simple-link underline sat noticeably tighter
       to its text than the submenu-link underline did. Unifying onto
       the span fixes that with no per-pixel padding math.

     Useful side effect: the simple link's anchor no longer carries
     a `transition` shorthand (which used to wipe out the color
     transition inherited from sections/header.liquid). Now both link
     types' anchors inherit color transitions identically — line 886
     (0.25s ease 0.15s base), line 908/952 (hover variants), line
     968+975 (scrolled-up). This naturally syncs simple and submenu
     link colors in every state without needing per-state overrides.

     What still needs an explicit fix: underline RETRACTION timing
     in transparent headers. See the @media (hover: hover) block
     below. */

  /* Both link types: underline on the inner <span>. Identical paint
     properties — only the active-state selectors differ (aria-current
     for simple links, aria-expanded for submenu-parents). */
  .header__nav-item > .header__nav-link:not(.drawer .header__nav-link) > span:first-child {
    display: inline-block;
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    padding-bottom: 0;
  }

  /* Simple links: underline fires on hover or aria-current="page".
     aria-current is meaningful here — the link IS the current page,
     so a permanent underline reinforces the active state. */
  .header__nav-item:not(.header__nav-item--has-submenu) > .header__nav-link:not(.drawer .header__nav-link):hover > span:first-child,
  .header__nav-item:not(.header__nav-item--has-submenu) > .header__nav-link:not(.drawer .header__nav-link)[aria-current="page"] > span:first-child {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* Submenu-parent links: underline fires on hover and when the mega-
     menu is actively open (aria-expanded="true"). aria-current
     intentionally NOT included here — Shopify marks parent links as
     current when a descendant matches the current URL, which would
     make multiple ancestors permanently underlined on any product/
     collection page. The open-menu state is the meaningful affordance
     for parents.
     Drawer excluded via :not() so the drawer's own rules (defined in
     _header-drawer.liquid, gated by divider thickness) control drawer
     underlines exclusively. */
  .header__nav-item--has-submenu > .header__nav-link:not(.drawer .header__nav-link):hover > span:first-child,
  .header__nav-item--has-submenu > .header__nav-link:not(.drawer .header__nav-link)[aria-expanded="true"] > span:first-child {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* TRANSPARENT HEADER UNDERLINE RETRACTION SYNC — simple links only.

     Submenu-parent links naturally hold their underline for 150ms
     after mouseleave because __megaScheduleClose (this file, ~line
     1877) waits 150ms before clearing aria-expanded="true", and the
     rule above keeps the underline drawn while aria-expanded is
     true. That 150ms hold matches the header bg-color fade-out delay
     in sections/header.liquid (transition: background-color 0.25s
     ease 0.15s, line 873) so submenu link underlines retract in sync
     with the bg.

     Simple links have no aria-expanded equivalent — they lose :hover
     instantly when the cursor leaves the link, so without a fix
     their underline retracts at t=0 while the bg is still in its
     150ms wait, visibly out of sync with submenu link underlines.

     Fix: apply a 150ms delay to the simple-link span's background-
     size transition. CSS transitions read the current rule when the
     value changes, so the delay applies on the OUT direction (from
     100% back to 0% — i.e., when :hover ends). The :hover/aria-
     current rule for fade-IN overrides with no delay so the entrance
     stays snappy. Net effect: simple-link underlines hold for 150ms
     after mouseleave, matching submenu links and the bg fade.

     Scoped to .header-wrapper--transparent only — in a solid header
     there's no bg fade to sync with, so the immediate retraction
     stays as-is. Also gated behind @media (hover: hover) so the
     @media (hover: none) `transition: none` override further down
     still wins on touch devices. */
  @media (hover: hover) {
    .header-wrapper--transparent .header__nav-item:not(.header__nav-item--has-submenu) > .header__nav-link:not(.drawer .header__nav-link) > span:first-child {
      transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
    }
    .header-wrapper--transparent .header__nav-item:not(.header__nav-item--has-submenu) > .header__nav-link:not(.drawer .header__nav-link):hover > span:first-child,
    .header-wrapper--transparent .header__nav-item:not(.header__nav-item--has-submenu) > .header__nav-link:not(.drawer .header__nav-link)[aria-current="page"] > span:first-child {
      transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    }
  }

  /* ── Touch-device adjustments for inline nav ─────────────────
     The inline nav CAN render on mobile when "Mobile menu style" is
     set to "Inline" (with menu row "bottom"). On touch-primary devices
     the :hover state is messy — iOS makes it sticky, taps trigger an
     animation the user doesn't see, and the visual noise doesn't help
     touch UX.

     @media (hover: none) scopes these overrides to touch-primary
     devices only — mouse-hover users on desktop are unaffected.

     1. Hover underline OFF entirely — no fill on :hover.
     2. aria-current (active page) and aria-expanded (open submenu)
        underlines STAY — they're meaningful state indicators, not
        affordance feedback, so removing them would lose real info.
     3. Remove 420ms transition so state changes (current/expanded)
        appear instantly rather than animating, which on tap would
        otherwise look like an unwanted hover effect.
     4. -webkit-tap-highlight-color: transparent — kills the default
        iOS/Android gray flash on tap.
     5. touch-action: manipulation avoids the residual 300ms tap
        delay some mobile browsers still apply. */
  @media (hover: none) {
    .header__nav-link:not(.drawer .header__nav-link) {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    /* Kill transitions so aria-state underlines appear instantly. Both
       link types' underlines now live on the inner span, so a single
       combined selector covers them. */
    .header__nav-item > .header__nav-link:not(.drawer .header__nav-link) > span:first-child {
      transition: none;
    }
    /* Kill the :hover underline fill. aria-current / aria-expanded
       selectors below win because they're more specific and repeat
       the 100% background-size. */
    .header__nav-item > .header__nav-link:not(.drawer .header__nav-link):hover > span:first-child {
      background-size: 0% var(--hover-underline-thickness, 1px);
    }
    /* Restore aria-state underlines explicitly (the rule above would
       otherwise zero them out when combined with :hover). */
    .header__nav-item:not(.header__nav-item--has-submenu) > .header__nav-link:not(.drawer .header__nav-link)[aria-current="page"] > span:first-child,
    .header__nav-item--has-submenu > .header__nav-link:not(.drawer .header__nav-link)[aria-expanded="true"] > span:first-child {
      background-size: 100% var(--hover-underline-thickness, 1px);
    }
  }

  .header__nav-arrow {
    display: none;
  }

  /* Mega menu */
  .mega-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--color-background);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
    display: block;
  }

  .mega-menu.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mega-menu__close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0.5rem;
    opacity: 0.6;
  }

  /* Inline + show-header (mobile only): when JS moves the X into the
     header icon cluster (.header__right), drop the absolute pinning
     from .mega-menu__close so it sits as a flex sibling alongside
     cart/account/etc. instead of trying to anchor to a corner.
     Color is left to inherit from .header-wrapper so the X follows
     the header's foreground color (default state) or the transparent-
     header color override defined in header.liquid — same cascade
     the cart icon uses. The SVG inside is re-sized to the header's
     --header-icon-size variables so the X matches its neighbors.
     Opacity is lifted because 0.6 (the panel-context default) would
     read as muted against full-opacity header icons. */
  .header__right > .mega-menu__close {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    z-index: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 1;
    width: var(--header-icon-size, 20px);
    height: var(--header-icon-size, 20px);
  }
  .header__right > .mega-menu__close svg {
    width: 100%;
    height: 100%;
    stroke-width: var(--header-icon-stroke, 1.5);
  }
  @media screen and (min-width: 1200px) {
    .header__right > .mega-menu__close {
      width: var(--header-icon-size-desktop, 24px);
      height: var(--header-icon-size-desktop, 24px);
    }
  }
  /* Transparent header: the existing transparent rule (in header.liquid)
     lists cart/account/etc. by class but not .mega-menu__close, so
     teach it about the lifted X here. Same var as the other icons. */
  .header-wrapper--transparent .header__right > .mega-menu__close {
    color: var(--header-transparent-color, #ffffff);
  }



  @media screen and (min-width: 1200px) {
    .mega-menu {
      position: absolute;
      top: 100%;
      bottom: auto;
      /* z-index 999 sits above page content (product-card nav arrows
         are at z:10, etc) but below drawers and modals (which use
         1000+). The header-wrapper's stacking context already gives
         this panel headroom, but bumping high here is belt-and-
         suspenders against any other stacking context that might
         appear in page-content sections. */
      z-index: 999;
      min-height: 50vh;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      transform: translateY(-4px);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    .mega-menu.is-active {
      transform: translateY(0);
    }
  }

  /* Invisible bridge to connect nav item to panel (desktop only) */
  @media screen and (min-width: 1200px) {
    .mega-menu::before {
      content: '';
      position: absolute;
      bottom: 100%;
      left: 0;
      right: 0;
      height: 40px;
      z-index: 1000;
    }
  }

  .mega-menu__columns {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .mega-menu__column {
    flex: none;
    min-width: 0;
  }

  /* On mobile, all items show in one list — continued column hidden */
  .mega-menu__column--continued {
    display: none;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__columns {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .mega-menu__column {
      flex: 1 1 0;
      min-width: min-content;
    }

    /* Desktop: split into two columns — hide overflow in first, show continued */
    .mega-menu__column--continued {
      display: block;
    }

    .mega-menu__overflow-item {
      display: none;
    }
  }

  /* Continued column (overflow from >10 split): hidden on mobile, shown on desktop */

  .mega-menu__heading--spacer {
    visibility: hidden;
    pointer-events: none;
    height: 0;
    margin: 0;
    overflow: hidden;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__heading--spacer {
      height: auto;
      margin-bottom: 1.75rem;
    }
  }

  .mega-menu__heading {
    display: block;
    margin-bottom: 0;
    opacity: 1;
    white-space: nowrap;
  }

  /* ── Mobile: smooth expand/collapse for the L3 nested panel ──
     The grid-template-rows: 0fr → 1fr trick animates to the
     panel's exact content height (no awkward max-height guesswork).
     The child needs min-height:0 + overflow:hidden so it actually
     respects the grid track size as it shrinks.

     Opacity + a slight inward translate add a soft fade-in so the
     content doesn't feel like it's wiping in from nowhere.

     Scoped to mobile only — desktop keeps the panel naturally
     visible (no transform/opacity overrides needed). */
  @media screen and (max-width: 1199.98px) {
    .mega-menu__nested-panel {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .mega-menu__nested-panel > * {
      overflow: hidden;
      min-height: 0;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    }
    .mega-menu__nested-panel.is-open {
      grid-template-rows: 1fr;
    }
    .mega-menu__nested-panel.is-open > * {
      opacity: 1;
      transform: translateY(0);
      /* Slight delay so the fade-in starts only once the panel has
         actually begun expanding — feels less abrupt than fading
         the content into a still-collapsed container. */
      transition: opacity 0.3s ease 0.08s, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
    }
  }

  .mega-menu__heading-text {
    flex: 1;
    min-width: 0;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__heading {
      margin-bottom: 1.75rem;
    }
  }

  /* Arrow hidden by default — shown via section-scoped styles when collapse enabled */
  .mega-menu__arrow {
    display: none;
  }

  .mega-menu__list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__list {
      padding-left: 0;
    }
  }

  .mega-menu__link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    white-space: nowrap;
    /* Animated underline draw-in (same effect as level-1 inline nav
       submenu parents). Inline-block + text content = gradient paints
       at text width naturally. Full opacity always — the underline is
       the only hover affordance. */
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    padding-bottom: 0;
  }

  .mega-menu__link:hover,
  .mega-menu__link[aria-current="page"] {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  .mega-menu__link--top {
    opacity: 1;
    display: inline-block;
    white-space: nowrap;
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    padding-bottom: 0;
  }

  .mega-menu__link--top:hover,
  .mega-menu__link--top[aria-current="page"] {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* Direct links: side-by-side layout (desktop) */
  .mega-menu__column--direct {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    white-space: nowrap;
    padding-bottom: 1.5rem;
  }

  .mega-menu__column--direct .mega-menu__direct-link {
    font-size: 1.6em;
    font-weight: 600;
    opacity: 1;
  }

  /* On mobile: separation between direct and columns */
  .mega-menu__columns--has-direct {
    gap: 0;
  }

  /* Columns-inner: flat list, each heading acts as a row with arrow.
     Gap matches `.mega-menu__columns` (0.5rem) on mobile so adjacent
     L2 headings have breathing room — without this, when "Separate
     direct links" is ON, expanded L3 lists run flush into the next
     L2 heading. Desktop overrides this to 2rem below. */
  .mega-menu__columns-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
  }

  .mega-menu__columns-inner .mega-menu__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-bottom: 0;
    opacity: 0.85;
  }

  .mega-menu__columns-inner .mega-menu__heading::after {
    content: '→';
    flex-shrink: 0;
    margin-left: 1rem;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__column--direct {
      padding-bottom: 0;
    }

    .mega-menu__column--direct .mega-menu__direct-link {
      font-size: inherit;
      font-weight: inherit;
    }

    .mega-menu__columns--has-direct {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 3rem;
    }

    .mega-menu__columns-inner {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 2rem;
    }

    .mega-menu__columns-inner .mega-menu__heading {
      display: block;
      padding: 0;
      margin-bottom: 1.75rem;
      opacity: 1;
    }

    .mega-menu__columns-inner .mega-menu__heading::after {
      display: none;
    }

    .mega-menu__columns-inner .mega-menu__column {
      flex: 1 1 0;
      min-width: min-content;
    }
  }

  .mega-menu__direct-link {
    text-decoration: none;
    color: inherit;
    display: block;
    white-space: nowrap;
    /* width: fit-content so the gradient background paints only under
       the text, not across the full block-level row width. */
    width: fit-content;
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    /* Pull underline up into the descender zone — tighter to the text
       baseline than the default bottom-of-line-box position. */
    background-position: 0 88%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    padding-bottom: 0;
  }

  .mega-menu__direct-link:hover,
  .mega-menu__direct-link[aria-current="page"] {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* Stacked links (auto-grouped level 2 without children, Direct links OFF) */
  .mega-menu__column--stacked {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .mega-menu__stacked-link {
    text-decoration: none;
    color: inherit;
    display: block;
    white-space: nowrap;
    width: fit-content;
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    padding-bottom: 0;
  }

  .mega-menu__stacked-link:hover,
  .mega-menu__stacked-link[aria-current="page"] {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* Layout wrapper: only constrains when images present */
  .mega-menu__layout--has-images {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__layout--has-images {
      flex-direction: row;
    }
  }

  .mega-menu__layout--has-images .mega-menu__inner {
    flex: 1;
    min-width: 0;
    max-width: none;
    text-align: left;
  }

  /* Submenu images */
  .mega-menu__images {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    gap: {{ b.mega_image_gap }}px;
    margin-top: 1.5rem;
    padding: 0 1.5rem 2rem;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mega-menu__images::-webkit-scrollbar {
    display: none;
  }

  .mega-menu__images.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
  }

  .mega-menu__images.is-dragging .mega-menu__image-card {
    pointer-events: none;
  }

  .mega-menu__images .mega-menu__image-card {
    flex: 0 0 auto;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__images {
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: hidden;
      padding: 0;
      margin-top: 0;
      /* Bottom breathing room when images stack vertically — without
         this, the last stacked image sits flush with the panel's
         bottom padding, which feels cramped because the column has
         significant visual weight. */
      margin-bottom: 1.5rem;
      cursor: default;
    }

    .mega-menu__images .mega-menu__image-card {
      flex: 1;
    }
  }

  .mega-menu__image-card {
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__image-card {
      aspect-ratio: auto;
    }
  }

  .mega-menu__image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mega-menu__image-card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 1rem 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    color: #fff;
    line-height: 1.3;
  }

  /* Grid mode (image cards only) */
  .mega-menu__inner--grid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .mega-menu__grid {
    display: flex;
    gap: 0;
    width: 100%;
  }

  .mega-menu__grid-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 3 / 4;
    background-color: rgba(128, 128, 128, 0.15);
    /* Overlap the next card by 1px to cover the subpixel gap that
       appears between flex children when the container width isn't
       cleanly divisible. Each card extends 1px to the right and
       sits 1px to the left of where flex placed it, so adjacent
       cards visually butt up against each other with no hairline.
       The last card resets margin-right to 0 (handled below). */
    margin-right: -1px;
  }

  .mega-menu__grid-card:last-child {
    margin-right: 0;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__grid-card {
      aspect-ratio: auto;
      height: 450px;
    }
  }

  .mega-menu__grid-card img {
    position: absolute;
    /* `inset: -1px` makes the image overflow the card by 1px on every
       side, hiding any subpixel rounding gap that can appear between
       adjacent flex children when Card gap = 0. The card has
       `overflow: hidden`, so the extra pixel is clipped — visually
       identical, but no hairline gap. */
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    object-fit: cover;
    display: block;
    /* Pre-promote to a GPU compositor layer so the hover-scale
       transition doesn't trigger a layer re-paint that momentarily
       exposes the seam between cards. */
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.4s ease;
  }

  .mega-menu__grid-card:hover img {
    /* Keep translateZ(0) alongside scale so the GPU layer promotion
       set on the base rule isn't dropped on hover (transform is a
       single property — listing scale alone would overwrite it). */
    transform: translateZ(0) scale(1.03);
  }

  .mega-menu__grid-card-title {
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__grid-card-title {
      font-size: 2rem;
      padding: 2.5rem 2rem;
    }
  }

  /* "View all" card — no image */
  .mega-menu__grid-card--viewall {
    background-color: rgba(128, 128, 128, 0.06);
    justify-content: center;
    align-items: center;
  }

  .mega-menu__grid-card-title--viewall {
    background: none;
    text-align: center;
    color: inherit;
    font-size: 1.2rem;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__grid-card-title--viewall {
      font-size: 1.6rem;
    }
  }

  .mega-menu__grid-card--viewall:hover {
    background-color: rgba(128, 128, 128, 0.1);
  }

  /* Mobile: stack grid cards vertically */
  @media screen and (max-width: 1199px) {
    .mega-menu__grid {
      flex-direction: column;
    }

    .mega-menu__grid-card {
      flex: none;
      width: 100%;
      aspect-ratio: 16 / 9;
    }

    .mega-menu__inner--grid {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  /* Overlay behind mega menu */
  .mega-menu__overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }

  .mega-menu__overlay.is-active {
    visibility: visible;
  }

  /* =================================================================
     MODERN MENU STYLE
     Vertical L2 list (left) with inline L3 accordion expansion.
     Image area on the right is reserved for a follow-up pass.
     ================================================================= */

  /* Inner container — same paddings as classic; flex layout on desktop */
  .mega-menu__inner--modern {
    padding: 3.5rem 24px 40px;
    width: 100%;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__inner--modern {
      max-width: var(--page-width, 1600px);
      margin: 0 auto;
      padding: 40px 24px;
      display: flex;
      align-items: flex-start;
      gap: 48px;
    }
  }

  /* Left column — L2 list */
  .mega-menu__modern-list {
    width: 100%;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__modern-list {
      flex: 0 0 30%;
      max-width: 360px;
    }
  }

  .mega-menu__modern-l2-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Static default — section-scoped override in the {% raw %}{% style %}{% endraw %}
     block (top of the file) takes over when the merchant adjusts thickness
     or color. The :first-child border-top is desktop-only — on mobile the
     first item sits flush below the panel header. */
  .mega-menu__modern-l2-item {
    border-bottom: 1px solid #e5e5e5;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__modern-l2-item:first-child {
      border-top: 1px solid #e5e5e5;
    }
  }

  /* L2 row — button (with children) or link (direct) — identical visuals */
  .mega-menu__modern-l2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
  }

  .mega-menu__modern-l2-text {
    /* Inline-block so the animated underline draws at text width, not full row */
    display: inline-block;
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .mega-menu__modern-l2:hover .mega-menu__modern-l2-text {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* Chevron — rotates on expand */
  .mega-menu__modern-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 1rem;
    opacity: 0.6;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }

  .mega-menu__modern-l2[aria-expanded="true"] .mega-menu__modern-chevron {
    transform: rotate(180deg);
    opacity: 1;
  }

  .mega-menu__modern-l2[aria-expanded="true"] {
    /* Subtle visual cue for the active row */
    opacity: 1;
  }

  /* L3 accordion panel — smooth height transition */
  .mega-menu__modern-l3-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.25s ease 0.05s;
  }

  .mega-menu__modern-l3-panel[aria-hidden="false"] {
    max-height: 1500px;
    opacity: 1;
  }

  .mega-menu__modern-l3-list {
    list-style: none;
    margin: 0 0 0 0.25rem;
    padding: 0.25rem 0 1.25rem 1.25rem;
  }

  .mega-menu__modern-l3-item + .mega-menu__modern-l3-item {
    margin-top: 0.1rem;
  }

  .mega-menu__modern-l3 {
    display: block;
    padding: 0.4rem 0;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease;
  }

  /* Inner text span carries the animated underline (keeps anchor full-row clickable) */
  .mega-menu__modern-l3-text {
    display: inline-block;
    background-image: linear-gradient(var(--hover-underline-color, currentColor), var(--hover-underline-color, currentColor));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% var(--hover-underline-thickness, 1px);
    transition: background-size 0.42s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .mega-menu__modern-l3:hover {
    transform: translateX(2px);
  }

  .mega-menu__modern-l3:hover .mega-menu__modern-l3-text {
    background-size: 100% var(--hover-underline-thickness, 1px);
  }

  /* "View all [L2]" — first item, subtle emphasis */
  .mega-menu__modern-l3-item--viewall .mega-menu__modern-l3 {
    font-style: italic;
  }

  /* Right column — image area (only renders when a matching metaobject entry exists) */
  .mega-menu__modern-image-area {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 1.5rem;
  }

  @media screen and (min-width: 1200px) {
    .mega-menu__modern-image-area {
      flex: 1 1 auto;
      min-width: 0;
      margin-top: 0;
    }
  }

  .mega-menu__modern-image-card {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    color: inherit;
  }

  /* Single-image case (only one media slot in the matched metaobject
     entry): on desktop, occupy the LEFT half of the image area and
     leave the right half empty instead of stretching the lone card to
     fill the full row. The `- 4px` matches half of the 8px row gap so
     widths line up perfectly with the two-card layout. Mobile keeps
     the full-width single image since the drawer is narrow already. */
  @media screen and (min-width: 1200px) {
    .mega-menu__modern-image-card:only-child {
      flex: 0 0 calc(50% - 4px);
    }
  }

  /* Media wrapper holds the aspect ratio, viewport height cap, and poster
     background. By scoping these to the wrapper instead of the whole card,
     the poster image no longer bleeds into the mobile headline area sitting
     below the media. */
  .mega-menu__modern-image-card-media {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    /* Cap to viewport on wide screens — flex-driven width can produce a
       computed 4/3 height that exceeds the panel; this clamps it and the
       inner img/video keeps filling via object-fit: cover. */
    max-height: calc(100vh - 180px);
  }

  /* When both video + image are set, image becomes a CSS-background poster behind the video — applied to the media wrapper so it doesn't bleed past the visual area */
  .mega-menu__modern-image-card--has-poster .mega-menu__modern-image-card-media {
    background-image: var(--card-poster);
    background-size: cover;
    background-position: center;
    background-color: #f4f4f4;
  }

  .mega-menu__modern-image-card img,
  .mega-menu__modern-image-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Desktop: headline overlaid on the image, bottom-left */
  .mega-menu__modern-image-headline {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* Mobile: caption sits below the image (matches the reference) */
  @media screen and (max-width: 1199px) {
    .mega-menu__modern-image-card {
      display: flex;
      flex-direction: column;
    }

    .mega-menu__modern-image-headline {
      position: static;
      color: inherit;
      text-shadow: none;
      display: block;
      padding-top: 0.6rem;
      font-size: 0.875rem;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
  }

  /* Mobile creative touch: stagger-fade L2 rows in when panel opens */
  @media screen and (max-width: 1199px) {
    .mega-menu--modern .mega-menu__modern-l2-item {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .mega-menu--modern.is-active .mega-menu__modern-l2-item {
      opacity: 1;
      transform: translateY(0);
    }

    /* Stagger up to ~10 items — beyond that they all just animate together */
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(1)  { transition-delay: 0.05s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(2)  { transition-delay: 0.09s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(3)  { transition-delay: 0.13s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(4)  { transition-delay: 0.17s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(5)  { transition-delay: 0.21s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(6)  { transition-delay: 0.25s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(7)  { transition-delay: 0.29s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(8)  { transition-delay: 0.33s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(9)  { transition-delay: 0.37s; }
    .mega-menu--modern.is-active .mega-menu__modern-l2-item:nth-child(n+10) { transition-delay: 0.41s; }
  }

  /* Mobile typography — slightly larger / more generous than classic L2 headings */
  @media screen and (max-width: 1199px) {
    .mega-menu--modern .mega-menu__modern-l2 {
      padding: 1.15rem 0;
    }
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:group (INDEX:55) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:56) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:71) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */