/** Shopify CDN: Minification failed

Line 1277:2 Unexpected "}"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:anemoia-404 (INDEX:1) */
/* ---- Page chrome: full immersion, like the other CRT pages -------------- */
  body:has(main[data-template='404']) .announcement-bar,
  body:has(main[data-template='404']) #header-component { display: none; }
  body:has(main[data-template='404']) { background: #06070c; }

  .a404 {
    position: relative;
    display: block;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #06070c;
    color: #f6f3ec;
    font-family: var(--font-anemoia);
    --xp-face: #ece9d8;
    --xp-bar: linear-gradient(180deg, #0058ee 0%, #3f8cf3 8%, #0054e3 40%, #0054e3 88%, #0140ac 100%);
    --xp-sys: Tahoma, 'Segoe UI', Verdana, sans-serif;
  }

  /* Until the component defines itself the game chrome stays out of the way. */
  anemoia-404:not(:defined) .a404__hint,
  anemoia-404:not(:defined) .a404__desktop,
  anemoia-404:not(:defined) .a404__popups,
  anemoia-404:not(:defined) .a404__skip { display: none; }

  /* The plain 404 is a RESCUE, not a loading state. Showing it immediately on
     :not(:defined) flashed "page not found" over the page on every load, because
     a deferred module defines the element well after first paint. A delayed
     zero-length animation only ever completes if the element is STILL undefined
     a couple of seconds in — i.e. if the script genuinely failed or JS is off. */
  anemoia-404:not(:defined) .a404__plain { animation: a404-rescue 0.01s linear 2.5s forwards; }

  @keyframes a404-rescue {
    to { opacity: 1; visibility: visible; }
  }

  /* ---- Backdrop ---------------------------------------------------------- */
  .a404__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

  .a404__bg-plate {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 14%, rgba(60, 36, 90, 0.5), transparent 60%),
      linear-gradient(180deg, #0a0a12, #06070c);
  }

  .a404__bg-env { position: absolute; inset: 0; }

  .a404__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* scenery: a tap must never summon the video's own UI */
  }

  /* iOS draws a big centred play glyph over any inline video it refused to
     autoplay (Low Power Mode blocks it outright). Same guard as the CRT pages. */
  .a404__bg-video::-webkit-media-controls,
  .a404__bg-video::-webkit-media-controls-panel,
  .a404__bg-video::-webkit-media-controls-play-button,
  .a404__bg-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
  }

  .a404__bg-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 7, 12, 0.5), rgba(6, 7, 12, 0.2) 38%, rgba(6, 7, 12, 0.62));
  }

  /* ---- CRT glass --------------------------------------------------------- */
  .a404__crt { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
  .a404__crt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
  .a404__crt.gl-on .a404__crt-canvas { display: block; }
  .a404__crt.gl-on .a404__crt-curve,
  .a404__crt.gl-on .a404__crt-scan { display: none; }

  .a404__crt-curve {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.3);
    background: radial-gradient(132% 142% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  }

  .a404__crt-glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(78% 40% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 62%);
    mix-blend-mode: screen;
  }

  .a404__crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0.3) 1px, transparent 2px, transparent 3px);
    opacity: 0.5;
  }

  /* ---- Mission strip ----------------------------------------------------- */
  /* Centred at the top: the windows pile up in the middle of the screen, so the
     objective has to sit where the eye already is. */
  .a404__hint {
    position: absolute;
    z-index: 6;
    top: clamp(0.9rem, 3vh, 1.6rem);
    left: 50%;
    transform: translateX(-50%);
    max-width: min(30rem, calc(100vw - 1.6rem));
    text-align: center;
    padding: 0.55rem 0.95rem 0.6rem;
    background: rgba(8, 10, 18, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--xp-sys);
    font-size: clamp(0.72rem, 1.6vw, 0.86rem);
    line-height: 1.45;
    color: #eaf1ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none; /* it sits above the windows; it must never eat a click */
  }

  /* The nudge has to carry the centring translate, or the strip jumps left. */
  .a404__hint.is-beat { animation: a404-beat 0.5s ease; }

  @keyframes a404-beat {
    0%, 100% { transform: translateX(-50%); }
    30% { transform: translateX(calc(-50% - 4px)); }
    60% { transform: translateX(calc(-50% + 4px)); }
  }

  /* ---- Desktop + the antivirus shortcut ---------------------------------- */
  .a404__desktop {
    position: absolute;
    z-index: 2;
    inset: clamp(4rem, 12vh, 6.5rem) clamp(1rem, 4vw, 2.5rem) auto;
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 4vh, 2.2rem);
  }

  .a404__path {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(0.72rem, 1.8vw, 0.9rem);
    letter-spacing: 0.22em;
    color: rgba(236, 244, 255, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  }

  .a404__icons { display: flex; gap: 1.4rem; }

  .a404__icon {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    width: 6.2rem;
    padding: 0.5rem 0.3rem;
    background: none;
    border: 1px dotted transparent;
    cursor: pointer;
    /* Hidden until the last window is closed — the thing being uncovered. */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4), visibility 0s linear 0.5s;
  }

  .a404[data-stage='armed'] .a404__icon,
  .a404[data-stage='scanning'] .a404__icon,
  .a404[data-stage='threats'] .a404__icon,
  .a404[data-stage='purging'] .a404__icon,
  .a404[data-stage='fixed'] .a404__icon {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
  }

  .a404__icon:focus-visible { border-color: rgba(255, 255, 255, 0.8); outline: none; }
  .a404__icon-art { display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); }

  /* Only while it is the thing to do. */
  .a404[data-stage='armed'] .a404__icon-art { animation: a404-nudge 1.8s ease-in-out infinite; }

  @keyframes a404-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .a404__icon-label {
    font-family: var(--xp-sys);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  }

  /* ---- Windows (shared XP chrome) ---------------------------------------- */
  .a404__win {
    position: absolute;
    z-index: 5;
    width: min(var(--pop-w, 340px), calc(100vw - 1.6rem));
    background: var(--xp-face);
    border: 1px solid #0b3d91;
    border-radius: 7px 7px 3px 3px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    overflow: hidden;
  }

  .a404__win-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.3rem 0.32rem 0.6rem;
    background: var(--xp-bar);
    border-bottom: 1px solid #0b3d91;
  }

  .a404__win-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--xp-sys);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
  }

  .a404__win-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 1.7rem;
    font-size: 0.8rem;
    line-height: 1;
    color: #fff;
    background: linear-gradient(180deg, #f08c78 0%, #d5411f 46%, #b32c10 54%, #e0654a 100%);
    border: 1px solid #7d1a0d;
    border-radius: 3px;
    cursor: pointer;
  }

  .a404__win-close:hover { filter: brightness(1.12); }
  .a404__win-close:active { transform: translateY(1px); }

  .a404__win-body {
    padding: 0.9rem 1rem 1rem;
    background: var(--pop-paper, var(--xp-face));
    color: var(--pop-ink, #1b1b1b);
    font-family: var(--xp-sys);
  }

  .a404__win-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }

  .a404__btn {
    padding: 0.4rem 1.1rem 0.45rem;
    font-family: var(--xp-sys);
    font-size: 0.8rem;
    font-weight: 600;
    color: #10233b;
    text-decoration: none;
    background: linear-gradient(180deg, #fdfefe 0%, #eef2f6 46%, #d7e0ea 54%, #eaf0f6 100%);
    border: 1px solid #4a6a8f;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    cursor: pointer;
  }

  .a404__btn:hover { filter: brightness(1.05); }
  .a404__btn:active { transform: translateY(1px); }
  .a404__btn[disabled] { opacity: 0.55; cursor: default; filter: grayscale(1); }

  .a404__btn--danger {
    color: #fff;
    background: linear-gradient(180deg, #ef6a52 0%, #cf3418 46%, #ac2408 54%, #d9553a 100%);
    border-color: #7d1a0d;
    letter-spacing: 0.08em;
  }

  .a404__btn--go {
    color: var(--anemoia-cta-ink, #fff);
    background: var(--anemoia-cta, #fea500);
    border: 1.5px solid #dedede;
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .a404__btn--go:hover { background: var(--anemoia-cta-hover, #e89400); filter: none; }

  /* ---- Pop-ups ----------------------------------------------------------- */
  /* The layer spans the whole screen, so it MUST be click-through or it swallows
     every tap meant for the antivirus shortcut sitting underneath it. */
  .a404__popups { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .a404__pop { pointer-events: auto; }

  .a404__pop { animation: a404-pop-in 0.26s cubic-bezier(0.2, 0.9, 0.3, 1.5); }

  @keyframes a404-pop-in {
    0% { opacity: 0; transform: scale(0.86) translateY(8px); }
    100% { opacity: 1; transform: none; }
  }

  /* Windows the infection throws out while the antivirus runs. They are small
     on purpose: full-size ones do not fit in the bands beside the scanner (and
     never on a phone), so they would fall back to the pile behind it, which is
     the one place the flood cannot be seen. Width has to be set outright — the
     blocks put --pop-w in an inline style, which a custom property cannot beat. */
  .a404__pop--mini { width: min(14.5rem, calc(100vw - 1.6rem)); }
  .a404__pop--mini .a404__win-body { padding: 0.55rem 0.7rem 0.7rem; }
  .a404__pop--mini .a404__win-title { font-size: 0.7rem; }
  .a404__pop--mini .a404__ad-head { font-size: 0.95rem; }
  .a404__pop--mini .a404__err-head { font-size: 0.78rem; }
  .a404__pop--mini .a404__marquee-run { font-size: 0.8rem; }
  .a404__pop--mini .a404__ad-kicker,
  .a404__pop--mini .a404__ad-text,
  .a404__pop--mini .a404__err-text,
  .a404__pop--mini .a404__win-actions { display: none; }
  .a404__pop--mini .a404__ad-cta { padding: 0.3rem 0.7rem 0.35rem; font-size: 0.68rem; }
  .a404__pop--mini .a404__err-icon svg { width: 22px; height: 22px; }

  .a404__pop.is-going { animation: a404-pop-out 0.16s ease-in forwards; }

  @keyframes a404-pop-out {
    to { opacity: 0; transform: scale(0.9); }
  }

  .a404__err { display: flex; gap: 0.8rem; align-items: flex-start; }
  .a404__err-icon { flex: 0 0 auto; }
  .a404__err-copy { min-width: 0; }

  .a404__err-head {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .a404__err-text { margin: 0; font-size: 0.82rem; line-height: 1.5; }

  .a404__ad-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .a404__ad-head {
    margin: 0 0 0.45rem;
    font-family: 'Arial Black', Impact, var(--xp-sys);
    font-size: clamp(1.15rem, 3.4vw, 1.6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  .a404__ad-text { margin: 0 0 0.8rem; font-size: 0.8rem; line-height: 1.45; }

  .a404__ad-cta {
    display: inline-block;
    padding: 0.45rem 1.1rem 0.5rem;
    font-family: var(--xp-sys);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(180deg, #ff7a3d, #d63c0a);
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 4px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    cursor: pointer;
    animation: a404-throb 1.1s ease-in-out infinite;
  }

  @keyframes a404-throb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  .a404__marquee { overflow: hidden; display: flex; white-space: nowrap; }

  .a404__marquee-run {
    flex: 0 0 auto;
    padding-right: 1rem;
    font-family: 'Arial Black', Impact, var(--xp-sys);
    font-size: 1.05rem;
    text-transform: uppercase;
    animation: a404-slide 9s linear infinite;
  }

  @keyframes a404-slide {
    to { transform: translateX(-100%); }
  }

  /* ---- Scanner ----------------------------------------------------------- */
  .a404__scan,
  .a404__prize {
    left: 50%;
    top: 50%;
    z-index: 8;
    width: min(30rem, calc(100vw - 1.6rem));
    transform: translate(-50%, -50%) scale(0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3), visibility 0s linear 0.3s;
  }

  .a404[data-stage='scanning'] .a404__scan,
  .a404[data-stage='threats'] .a404__scan,
  .a404[data-stage='purging'] .a404__scan,
  .a404[data-stage='fixed'] .a404__prize {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }

  .a404__scan-brand {
    margin: 0 0 0.7rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #7d1a0d;
  }

  .a404__scan-file {
    margin: 0 0 0.5rem;
    min-height: 1.2em;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.78rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .a404__bar {
    height: 1.1rem;
    padding: 2px;
    background: #fff;
    border: 1px solid #8a8a7a;
    border-radius: 2px;
  }

  .a404__bar-fill {
    display: block;
    width: 0;
    height: 100%;
    background: repeating-linear-gradient(90deg, #d5411f 0 10px, #b32c10 10px 12px);
  }

  .a404__threats {
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 11rem;
    overflow-y: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.76rem;
  }

  .a404__threat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.2rem 0.1rem;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.18);
    animation: a404-line-in 0.2s ease;
  }

  @keyframes a404-line-in {
    from { opacity: 0; transform: translateX(-6px); }
  }

  .a404__threat-tag { flex: 0 0 auto; font-weight: 700; color: #b32c10; letter-spacing: 0.08em; }
  .a404__threat.is-safe .a404__threat-tag { color: #1b6b2a; }

  .a404__threat.is-dead {
    color: rgba(0, 0, 0, 0.42);
    text-decoration: line-through;
    text-decoration-color: #b32c10;
  }

  .a404__threat.is-dead .a404__threat-tag { color: rgba(0, 0, 0, 0.42); }

  /* ---- Prize ------------------------------------------------------------- */
  .a404__prize-head {
    margin: 0 0 0.5rem;
    font-family: 'Arial Black', Impact, var(--xp-sys);
    font-size: clamp(1.2rem, 3.6vw, 1.7rem);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #1b6b2a;
  }

  .a404__prize-text { margin: 0 0 1rem; font-size: 0.86rem; line-height: 1.5; }

  .a404__code {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: #fff;
    border: 1px dashed #8a8a7a;
  }

  .a404__code-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.7;
  }

  .a404__code-value {
    flex: 1 1 auto;
    padding: 0.2rem 0.4rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: clamp(1.1rem, 3.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: left;
    color: #10233b;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .a404__code-value:hover { color: #b32c10; }

  /* ---- Skip + the honest 404 --------------------------------------------- */
  .a404__skip {
    position: absolute;
    z-index: 9;
    right: clamp(0.8rem, 3vw, 1.6rem);
    bottom: clamp(0.8rem, 3vh, 1.6rem);
    padding: 0.35rem 0.8rem;
    font-family: var(--xp-sys);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(8, 10, 18, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.22);
    cursor: pointer;
  }

  .a404__skip:hover { color: #fff; background: rgba(8, 10, 18, 0.85); }

  .a404__plain {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-content: center;
    padding: 1.5rem;
    background: rgba(6, 7, 12, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }

  .a404.is-plain .a404__plain { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }

  .a404__plain-card { max-width: 30rem; text-align: center; }

  .a404__plain-head {
    margin: 0 0 0.8rem;
    font-family: var(--font-anemoia);
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.05;
    text-transform: lowercase;
    color: #fff;
  }

  .a404__plain-text {
    margin: 0 0 1.4rem;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
  }

  .a404__plain-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-family: var(--xp-sys);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
  }

  .a404__plain-links a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
  .a404__plain-links a:hover { color: #ff4fc3; }
  .a404__plain-back { margin-top: 1.6rem; }

  /* ---- Mobile ------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .a404__desktop { inset: clamp(4.5rem, 14vh, 7rem) 1rem auto; }
    .a404__win-close { width: 2.4rem; height: 2rem; }
    .a404__threats { max-height: 8rem; }
    .a404__icons { gap: 1rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .a404__pop,
    .a404__pop.is-going,
    .a404__ad-cta,
    .a404__marquee-run,
    .a404__threat,
    .a404[data-stage='armed'] .a404__icon-art,
    .a404__hint.is-beat { animation: none; }

    .a404__icon,
    .a404__scan,
    .a404__prize,
    .a404__plain { transition: none; }
  }
/* END_SECTION:anemoia-404 */

/* START_SECTION:anemoia-about (INDEX:2) */
/* ---- Curved CRT "glass" over the whole viewport (after the dive) ---------
     Fades in once inside the screen (or in the static fallback), so the room
     phase stays clean. Fixed + pointer-events none. */
  .about__crt {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .anemoia-about.about--live[data-state="inside"] .about__crt,
  .anemoia-about.about--static .about__crt { opacity: 1; }

  .about__crt-curve {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.3);
    background: radial-gradient(132% 142% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  }

  /* WebGL curvature pass draws its own vignette/scanlines — drop the CSS ones. */
  .about__crt.gl-on .about__crt-curve,
  .about__crt.gl-on .about__crt-scan,
  .about__crt.gl-on .about__crt-flicker { display: none; }

  .about__crt-glare {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(78% 40% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 62%),
      radial-gradient(64% 32% at 50% 112%, rgba(255, 255, 255, 0.04), transparent 62%);
    mix-blend-mode: screen;
  }

  .about__crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.32) 0,
      rgba(0, 0, 0, 0.32) 1px,
      transparent 2px,
      transparent 3px
    );
    opacity: 0.55;
  }

  .about__crt-flicker {
    position: absolute;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0.6;
    animation: about-roll 8s linear infinite;
  }

  @keyframes about-roll {
    0% { transform: translateY(-60%); }
    100% { transform: translateY(280%); }
  }

  .about__crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  .about__crt.gl-on .about__crt-canvas { display: block; }

  /* ---- The story = vintage newsprint, revealed inside the screen after the
     dive. It fades in via the shared .about__page rule (anemoia-dive.css). --- */
  .anemoia-about {
    /* Inside the screen: vintage newsprint — dark sepia ink on aged cream. */
    --news-bg: #e7e1cf;
    --news-ink: #211b12;
    --news-soft: rgba(33, 27, 18, 0.74);
    --news-rule: rgba(33, 27, 18, 0.3);
    --news-accent: #7a2418;
  }

  .about__panel {
    --news-serif: var(--font-anemoia, 'Apple Garamond'), Georgia, 'Times New Roman', Times, serif;
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(2.5rem, 7vh, 6rem) clamp(1.4rem, 6vw, 6rem) 0;
    background: var(--news-bg);
    color: var(--news-ink);
    font-family: var(--news-serif);
    text-align: left;
    overflow: hidden;
  }

  .about__scanlines--page {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.18;
    background: repeating-linear-gradient(
      to bottom,
      rgba(33, 27, 18, 0.05) 0,
      rgba(33, 27, 18, 0.05) 1px,
      transparent 2px,
      transparent 3px
    );
  }

  /* Masthead banner. */
  .about__masthead {
    position: relative;
    z-index: 1;
    max-width: 74rem;
    margin: 0 auto clamp(2rem, 5vh, 3.5rem);
    padding-bottom: 1.1rem;
    border-bottom: 3px double var(--news-rule);
    text-align: center;
  }

  .about__masthead-title {
    margin: 0;
    font-family: var(--news-serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 8vw, 6rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
  }

  .about__masthead-dateline {
    margin: 0.9rem 0 0;
    font-family: var(--font-anemoia);
    font-size: clamp(0.62rem, 0.9vw, 0.74rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--news-soft);
  }

  .about__chapter,
  .about__manifesto,
  .about__interlude,
  .about__closer {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    padding: clamp(2rem, 5vh, 3.6rem) 0;
    max-width: 78rem;
  }

  .about__chapter + .about__chapter,
  .about__chapter + .about__closer {
    border-top: 1px solid var(--news-rule);
  }

  .about__chapter--center { text-align: center; }
  .about__chapter--right { text-align: right; }

  .about__chapter-kicker {
    margin: 0 0 0.8rem;
    font-family: var(--font-anemoia);
    font-size: clamp(0.66rem, 0.95vw, 0.76rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--news-accent);
  }

  .about__chapter-heading {
    margin: 0 0 1.3rem;
    font-family: var(--news-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.8vw, 3.7rem);
    line-height: 1.03;
    letter-spacing: -0.01em;
    color: var(--news-ink);
  }

  .about__chapter-figure { margin: 0 0 1.6rem; }

  .about__chapter-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--news-rule);
    filter: grayscale(1) sepia(0.34) contrast(1.05) brightness(0.98);
  }

  .about__chapter-caption {
    margin: 0.5rem 0 0;
    font-family: var(--font-anemoia);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--news-soft);
  }

  /* Newspaper columns + drop cap. */
  .about__chapter-body {
    font-family: var(--news-serif);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.6;
    color: var(--news-ink);
    column-gap: clamp(1.6rem, 3vw, 2.6rem);
    text-align: justify;
    hyphens: auto;
  }

  .about__chapter--center .about__chapter-body,
  .about__chapter--right .about__chapter-body { text-align: justify; }

  @media (min-width: 750px) {
    .about__chapter-body { column-count: 2; }
  }

  .about__chapter-body > p:first-of-type::first-letter {
    float: left;
    margin: 0.04em 0.1em 0 0;
    font-family: var(--news-serif);
    font-weight: 700;
    font-size: 3.4em;
    line-height: 0.74;
    color: var(--news-ink);
  }

  .about__chapter-body p { margin: 0 0 1rem; }
  .about__chapter-body p:last-child { margin-bottom: 0; }
  .about__chapter-body strong { font-weight: 700; }
  .about__chapter-body em { font-style: italic; }
  .about__chapter-body a { color: var(--news-accent); text-decoration: underline; text-underline-offset: 2px; }
  .about__chapter-body ul,
  .about__chapter-body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
  .about__chapter-body li { margin: 0.35rem 0; }

  /* The manifesto — left-aligned copy on the left, B&W print photo right. */
  .about__manifesto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.4rem);
    align-items: start;
  }

  @media (min-width: 750px) {
    .about__manifesto { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  }

  .about__manifesto-body {
    font-family: var(--news-serif);
    font-size: clamp(1.02rem, 1.25vw, 1.2rem);
    line-height: 1.65;
    color: var(--news-ink);
    text-align: left;
  }

  .about__manifesto-body p { margin: 0 0 1.1rem; }
  .about__manifesto-body p:last-child { margin-bottom: 0; }
  .about__manifesto-body strong { font-weight: 700; }
  .about__manifesto-body em { font-style: italic; }

  .about__manifesto-body > p:first-of-type::first-letter {
    float: left;
    margin: 0.04em 0.12em 0 0;
    font-family: var(--news-serif);
    font-weight: 700;
    font-size: 3.6em;
    line-height: 0.74;
    color: var(--news-ink);
  }

  .about__manifesto-sign {
    margin: 2rem 0 0;
    font-family: var(--news-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    color: var(--news-soft);
  }

  .about__manifesto-figure {
    margin: 0;
    position: sticky;
    top: clamp(1.5rem, 4vh, 3rem);
  }

  .about__manifesto-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--news-rule);
    filter: grayscale(1) contrast(1.08);
  }

  /* Full-width B&W photo break between the manifesto and the coupon. */
  .about__interlude { margin: 0 auto; }

  .about__interlude-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--news-rule);
    filter: grayscale(1) contrast(1.08);
  }

  /* Closer = a dashed print coupon. */
  .about__closer {
    max-width: 48rem;
    margin: clamp(2rem, 5vh, 3.5rem) auto;
    padding: clamp(2rem, 4.5vw, 3.2rem);
    border: 2px dashed var(--news-rule);
    text-align: center;
  }

  .about__closer-line {
    margin: 0;
    font-family: var(--news-serif);
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 3.2rem);
    line-height: 1.1;
    color: var(--news-ink);
  }

  .about__closer-line--accent { color: var(--news-accent); }

  .about__closer-sign {
    margin: 1.4rem 0 0;
    font-family: var(--font-anemoia);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--news-soft);
  }

  /* "Enter the world" — Add to cart button. */
  .about__cta {
    display: inline-block;
    margin-top: 1.8rem;
    padding: 0.85rem 2.1rem;
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    font-family: var(--font-anemoia);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--anemoia-cta-ink, #fff);
    text-decoration: none;
    transition: background 0.25s ease;
  }

  .about__cta:hover { background: var(--anemoia-cta-hover, #e89400); }

  /* ---- Footer: text only, dark on paper (PDP shape) -------------- */
  .about__footer {
    max-width: 78rem;
    margin: clamp(2.5rem, 6vh, 4rem) auto 0;
    padding-top: 1.2rem;
    border-top: 3px double var(--news-rule);
  }

  .about__footer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    padding-bottom: clamp(2.4rem, 6vh, 3.5rem);
    font-family: var(--font-anemoia);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .about__footer-group { display: inline-flex; gap: 1rem; }
  .about__footer-line a { color: var(--news-ink); text-decoration: none; }
  .about__footer-line a:hover { color: var(--news-accent); }
  .about__footer-sep { color: var(--news-soft); }

  /* Social links: text on desktop, dark icons on mobile (newspaper ink). */
  .about__footer-social { align-items: center; gap: 0.9rem; }
  .about__footer-social a { display: inline-flex; align-items: center; }
  .about__footer-icon {
    display: none;
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  }

  @media screen and (max-width: 749px) {
    .about__footer-line { gap: 0.3rem 0.7rem; }
    .about__footer-sep { display: none; }
    .about__footer-group { order: 1; gap: 0.7rem; }
    .about__footer-social { order: 2; flex-basis: 100%; justify-content: center; }
    .about__footer-txt { display: none; }
    .about__footer-icon { display: block; }

    /* Manifesto stacks (copy, then photo) — no sticky in one column. */
    .about__manifesto-figure { position: static; }
  }

  /* ---- Stand-in prompt while the room video has not painted ---------------
     Hidden by default and by the time the dive starts: it exists only for the
     window where the plate is all there is. */
  .about__prompt {
    display: none;
    position: fixed;
    left: 50%;
    bottom: clamp(3rem, 12vh, 7rem);
    z-index: 4;
    margin: 0;
    padding: 0.85rem 2.1rem;
    transform: translateX(-50%);
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    font-family: var(--font-anemoia);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--anemoia-cta-ink, #fff);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    animation: about-prompt-bob 1.8s ease-in-out infinite;
  }

  .anemoia-about.about--live.about--roomless[data-state='intro'] .about__prompt { display: block; }

  .about__prompt-tap { display: none; }

  @media screen and (max-width: 749px) {
    .about__prompt-key { display: none; }
    .about__prompt-tap { display: inline; }
  }

  @keyframes about-prompt-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(5px); opacity: 0.55; }
  }

  @media (prefers-reduced-motion: reduce) {
    .about__prompt { animation: none; }
  }

  /* ---- Static fallback: an empty room is not a room ------------------------
     With reduced motion (or the world layer off) there is no dive, and the
     world layer deliberately does no animating — so the room video is at best a
     still and at worst nothing. An intro with no copy of its own then rendered
     as a full viewport of bare plate — near-black here — holding the story
     below the fold with no prompt, no scroll hint and the site header hidden.
     That was the black About page. Collapse it and open on the newspaper; the
     Back button and the CRT glass carry the scene. When the merchant HAS set
     intro copy the room still stands, because then there is something to read. */
  .anemoia-about.about--static .about__intro--empty { display: none; }

  /* ---- Mobile dive intro (centred text + invisible full-screen tap target) - */
  body:has(main[data-template='page.about']) .about__enter--tap { display: none; }

  @media screen and (max-width: 749px) {
    body:has(main[data-template='page.about']) .about__intro {
      align-items: flex-start;
      justify-content: flex-start;
    }

    body:has(main[data-template='page.about']) .about__intro-inner {
      max-width: none;
      width: 100%;
      margin-left: 0;
      padding: clamp(5rem, 16vh, 8rem) 1.25rem 0;
      text-align: center;
    }

    body:has(main[data-template='page.about']) .about__sub { margin-inline: auto; }

    body:has(main[data-template='page.about']) .about__enter--tap {
      display: block;
      position: fixed;
      inset: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: transparent;
      font-size: 0;
      animation: none;
      cursor: pointer;
    }
  }

  /* ---- XP Back button: hidden until inside the screen, then top-left over the
     newspaper (same recipe as the Letters / museum pages). ------------------- */
  .about__backbtn {
    position: fixed;
    top: clamp(1rem, 3vh, 1.8rem);
    left: clamp(1rem, 3vw, 1.8rem);
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .anemoia-about.about--live[data-state='inside'] .about__backbtn,
  .anemoia-about.about--static .about__backbtn { opacity: 1; pointer-events: auto; }

  .xp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.55rem;
    font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #10233b;
    text-decoration: none;
    background: linear-gradient(180deg, #fdfefe 0%, #eef2f6 46%, #d7e0ea 54%, #eaf0f6 100%);
    border: 1px solid #4a6a8f;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: filter 0.12s ease, transform 0.06s ease;
  }

  .xp-btn:hover { filter: brightness(1.05) saturate(1.1); }
  .xp-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
  .xp-btn__glyph { font-size: 0.7rem; color: #1b5e20; line-height: 1; }

  /* ---- Page chrome: hide the announcement bar; force the nav WHITE over the
     bright room video; then HIDE the whole header once inside the screen so the
     newspaper stands alone (the Back button stands in). ---------------------- */
  body:has(main[data-template='page.about']) .announcement-bar { display: none; }

  body:has(main[data-template='page.about'] .anemoia-about.about--live[data-state='inside']) #header-component,
  body:has(main[data-template='page.about'] .anemoia-about.about--static) #header-component { display: none; }

  body:has(main[data-template='page.about']) #header-component .header__underlay,
  body:has(main[data-template='page.about']) #header-component .header__underlay-closed {
    background: transparent;
  }

  body:has(main[data-template='page.about']) #header-component,
  body:has(main[data-template='page.about']) #header-component .header__row,
  body:has(main[data-template='page.about']) #header-component[transparent],
  body:has(main[data-template='page.about']) #header-component[transparent] .header__row {
    --color-foreground: rgb(255, 255, 255);
    --color-foreground-rgb: 255, 255, 255;
    --color-foreground-heading: rgb(255, 255, 255);
    --color-foreground-heading-rgb: 255, 255, 255;
    --color-border: rgba(255, 255, 255, 0.5);
    --color-border-rgb: 255, 255, 255;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }

  body:has(main[data-template='page.about']) #header-component a,
  body:has(main[data-template='page.about']) #header-component a:hover,
  body:has(main[data-template='page.about']) #header-component .header__menu-item,
  body:has(main[data-template='page.about']) #header-component .header__menu-item:hover,
  body:has(main[data-template='page.about']) #header-component .menu-list__link,
  body:has(main[data-template='page.about']) #header-component .menu-list__link:hover,
  body:has(main[data-template='page.about']) #header-component .menu-list__link-title,
  body:has(main[data-template='page.about']) #header-component .header__icon {
    color: #fff !important;
  }

  /* Keep the world backdrop dark on this page so there's no cream plate before
     the background video loads (SOLAR's plate gradient is cream). This targets
     ONLY the layers behind the video — never main/the section, which would paint
     over the fixed world video. */
  body:has(main[data-template='page.about']) .anemoia-world__plate,
  body:has(main[data-template='page.about']) .anemoia-world__env {
    background: #0c0a07;
  }
/* END_SECTION:anemoia-about */

/* START_SECTION:anemoia-collection-float (INDEX:3) */
.anemoia-collection-float {
    --afloat-ease: cubic-bezier(0.33, 0.07, 0.2, 1);
    position: relative;
    display: block;
    width: 100%;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: hidden;
    color: #f6f3ec;
    background: transparent;
    touch-action: pan-y;
  }

  /* Hide the native cursor over the room; a white follower is drawn in JS. */
  @media (pointer: fine) {
    .anemoia-collection-float.is-ready,
    .anemoia-collection-float.is-ready * {
      cursor: none;
    }
  }

  .afloat__heading {
    position: absolute;
    top: clamp(5rem, 12vh, 8rem);
    left: clamp(1.25rem, 4vw, 4rem);
    z-index: 5;
    pointer-events: none;
    max-width: min(70vw, 40rem);
  }

  /* Anemoia (custom): pagination, which only exists once a collection passes one
     page. The room's children are nearly all absolutely positioned and the
     container is min-height:100dvh with overflow:hidden, so a nav left in normal
     flow would render at the top of the room, on top of the heading. Pinned to
     the floor instead, centred, above the products. */
  .anemoia-collection-float .pagination {
    position: absolute;
    left: 50%;
    bottom: clamp(1.25rem, 4vh, 3rem);
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    justify-content: center;
    font-family: var(--font-anemoia);
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  }

  .anemoia-collection-float .pagination a,
  .anemoia-collection-float .pagination [aria-current] {
    color: inherit;
  }

  }

  .afloat__eyebrow {
    margin: 0 0 0.4em;
    font-family: var(--font-anemoia);
    font-style: italic;
    font-size: clamp(0.9rem, 1.4vw, 1.3rem);
    opacity: 0.85;
  }

  .afloat__collection-title {
    margin: 0;
    font-family: var(--font-anemoia);
    font-weight: 700;
    font-size: clamp(2.4rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
  }

  .afloat__count {
    margin: 0.6em 0 0;
    font-family: var(--font-anemoia);
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  /* -- Category filter ------------------------------------------------- */
  .afloat__filter-bar {
    position: absolute;
    top: clamp(5rem, 12vh, 8rem);
    right: clamp(1.25rem, 4vw, 4rem);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .afloat__filter-label {
    font-family: var(--font-anemoia);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
  }

  .afloat__filter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  /* Match the Add to cart CTA: CTA fill, grey border, dark ink. */
  .afloat__filter {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.5rem 2.3rem 0.5rem 1rem;
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font-family: var(--font-anemoia);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .afloat__filter:hover { background: var(--anemoia-cta-hover, #e89400); }
  .afloat__filter:focus-visible { outline: 2px solid #dedede; outline-offset: 2px; }
  /* Opened option list: white panel, black text. */
  .afloat__filter option {
    background: #fff;
    color: #000;
  }

  .afloat__filter-caret {
    position: absolute;
    right: 0.95rem;
    font-size: 0.7rem;
    color: #fff;
    pointer-events: none;
  }

  .afloat__stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    will-change: transform;
    /* The stage spans the viewport above the props layer; without this it
       would swallow the goat's hover/tap. Items re-enable their own events. */
    pointer-events: none;
  }

  .afloat__item { pointer-events: auto; }

  .afloat__item.is-hidden { display: none; }

  /* Horizontal motion (wheel flicks + ambient auto-slide) is eased per-frame in
     JS, so the stage transform must NOT also carry a CSS transition or the two
     would fight and stutter. */
  .afloat__stage {
    transition: none;
  }

  .afloat__empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-anemoia);
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 2rem);
  }

  /* -- Floating product ------------------------------------------------ */
  .afloat__item {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    text-decoration: none;
    color: inherit;
    /* Centred on its (left,top) point; --ry is the rope-hang offset (set in
       JS) — how far this item sits above/below the base row so its hanger top
       meets the clothesline. The products stay locked to the wire: no mouse
       parallax on them, only the horizontal slide + the wind sway. */
    transform: translate(-50%, -50%) translateY(var(--ry, 0px));
    transition: transform 0.25s ease-out;
    will-change: transform;
  }

  /* No JS yet: lay items out in a simple wrap so nothing is stacked. */
  .anemoia-collection-float:not(.is-ready) .afloat__stage {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    justify-content: center;
    padding: clamp(7rem, 16vh, 11rem) 1.5rem 4rem;
  }

  .anemoia-collection-float:not(.is-ready) .afloat__item {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  /* The products hang from the clothesline and sway in the wind — a gentle
     pendulum rotation about the hook point (top-centre, where the hanger meets
     the rope), like jerseys blowing on a line. No vertical drift: the tops
     stay pinned to the wire. Duration, phase and amplitude are seeded per item
     in JS so the row doesn't swing in lock-step. */
  .afloat__floaty {
    transform-origin: top center;
    animation: afloat-sway var(--float-dur, 5s) ease-in-out var(--float-delay, 0s) infinite alternate;
  }

  @keyframes afloat-sway {
    from { transform: rotate(calc(var(--sway-amp, 2.4deg) * -1)); }
    to   { transform: rotate(var(--sway-amp, 2.4deg)); }
  }

  .afloat__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transform: scale(var(--scale, 1));
    transition: transform 0.4s var(--afloat-ease);
  }

  /* The card is a width, not a box: the clipper fills that width and brings
     its own height. A 4:5 file (BRIEF §4.2) therefore renders exactly as it
     would in a 4:5 box, and a file at any other ratio simply ends where it
     ends — no letterbox strip under the jersey, and nothing to centre, so the
     peg tops are always the top of the card and updateHang() keeps pinning
     that to the rope. Jerseys hang to their own length, which is what a
     clothesline of long and short sleeves does anyway. */
  .afloat__media {
    width: clamp(110px, 14vw, 220px);
    display: grid;
  }

  /* Natural height, so there is no slack to place. `image_tag` writes real
     width/height attributes, so the browser still reserves the right box
     before the PNG loads and nothing jumps. */
  .afloat__img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
  }

  .afloat__img--placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid rgba(246, 243, 236, 0.4);
    border-radius: 8px;
    font-family: var(--font-anemoia);
    font-size: 2rem;
  }

  /* Hover: lift the product, raise it above the others, reveal its detail. */
  .afloat__item:hover,
  .afloat__item:focus-visible,
  .afloat__item.is-active {
    z-index: 999;
  }

  .afloat__item:hover .afloat__card,
  .afloat__item:focus-visible .afloat__card,
  .afloat__item.is-active .afloat__card {
    transform: scale(calc(var(--scale, 1) * 1.16));
  }

  .afloat__item:hover .afloat__floaty,
  .afloat__item:focus-visible .afloat__floaty,
  .afloat__item.is-active .afloat__floaty {
    animation-play-state: paused;
  }

  .afloat__detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s var(--afloat-ease);
    pointer-events: none;
    text-align: center;
  }

  .afloat__item:hover .afloat__detail,
  .afloat__item:focus-visible .afloat__detail,
  .afloat__item.is-active .afloat__detail {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .afloat__title {
    margin: 0;
    font-family: var(--font-anemoia);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.25vw, 1.2rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    /* The glow was pink to match the old pink title. White over the world
       video needs contrast, not colour, so it is a plain dark drop now. */
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.6);
  }

  .afloat__price {
    margin: 0;
    font-family: var(--font-anemoia);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1rem, 1.35vw, 1.3rem);
    color: #ffce45; /* sun yellow */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }

  .afloat__price-was {
    margin-right: 0.4em;
    opacity: 0.6;
  }

  .afloat__add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.2rem;
    padding: 0.4rem 1rem;
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font-family: var(--font-anemoia);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
  }

  .afloat__add-label {
    transition: opacity 0.2s ease, max-width 0.25s ease;
    max-width: 12rem;
  }

  .afloat__add-img {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
    transition: width 0.25s ease, height 0.25s ease;
  }

  .afloat__add:hover { background: var(--anemoia-cta-hover, #e89400); transform: translateY(-1px); }
  .afloat__add.is-added { background: var(--anemoia-cta-hover, #e89400); }
  /* Sold out is the live button faded back, the same way an unavailable size
     chip fades on the PDP — it keeps the CTA fill so the card still reads as
     one object. What it must NOT do is drop the fill: as a transparent pill it
     vanished outright against the bright sky and field behind it. Held at 0.5
     rather than the chip's 0.35 because this one sits over moving video, not a
     flat card, and 0.35 orange sinks into the grass. */
  .afloat__add[disabled] {
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* Clicked feedback: the label collapses and the cart image swells, centred. */
  .afloat__add.is-adding {
    gap: 0;
    padding: 0.35rem 0.55rem;
    justify-content: center;
  }

  .afloat__add.is-adding .afloat__add-label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
  }

  .afloat__add.is-adding .afloat__add-img {
    width: 2.2rem;
    height: 2.2rem;
    animation: afloat-cart-pop 0.5s ease;
  }

  @keyframes afloat-cart-pop {
    0% { transform: scale(0.9); }
    45% { transform: scale(1.35); }
    100% { transform: scale(1); }
  }

  /* -- Size picker (Zara-style) ---------------------------------------- */
  .afloat__add-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  .afloat__sizes {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
    max-width: 14rem;
    padding: 0.5rem;
    border: 1.5px solid #cfccc2;
    border-radius: 12px;
    background: rgba(231, 229, 221, 0.96); /* on-brand warm grey, not black */
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  }

  .afloat__sizes[hidden] { display: none; }

  /* Little caret pointing down at the Add to cart button. */
  .afloat__sizes::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(231, 229, 221, 0.96);
  }

  .afloat__size {
    min-width: 2.4rem;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #b9b6ac;
    border-radius: 999px;
    background: transparent;
    color: #16140f; /* dark ink on the grey panel */
    font-family: var(--font-anemoia);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }

  .afloat__size:hover { background: var(--anemoia-cta, #fea500); border-color: var(--anemoia-cta, #fea500); color: var(--anemoia-cta-ink, #fff); }

  /* Unavailable sizes: clearly greyed out, no hover, struck through. */
  .afloat__size[disabled] {
    color: #9a978d;
    border-color: #d4d1c7;
    cursor: not-allowed;
    text-decoration: line-through;
  }

  .afloat__size[disabled]:hover { background: transparent; border-color: #d4d1c7; color: #9a978d; }

  /* -- White cursor follower ------------------------------------------- */
  .afloat__cursor {
    position: fixed;
    top: 0;
    left: 0;
    /* Above hovered products (which lift to z-index 999) so it never hides. */
    z-index: 9999;
    width: 26px;
    height: 26px;
    border: 2px solid #fff;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.25s ease;
    mix-blend-mode: difference;
  }

  .afloat__cursor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .afloat__cursor.is-visible { opacity: 1; }
  .afloat__cursor.is-over {
    width: 54px;
    height: 54px;
    /* background-color (not the `background` shorthand) so the image pointer's
       background-image survives when swelling over a product. */
    background-color: rgba(255, 255, 255, 0.12);
  }

  /* Image pointer (adampointer.png): keep the swell-on-hover animation. */
  .afloat__cursor--img {
    width: 42px;
    height: 42px;
    border: none;
    background: var(--afloat-pointer-img) center / contain no-repeat;
    mix-blend-mode: normal;
  }

  .afloat__cursor--img::after { display: none; }

  .afloat__cursor--img.is-over {
    width: 70px;
    height: 70px;
    background-color: transparent;
  }

  /* -- Drifting man.png motes (like the homepage logo motes) ----------- */
  .afloat__motes {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  .afloat__mote {
    position: absolute;
    width: clamp(2.4rem, 4.5vw, 4rem);
    height: auto;
    filter: drop-shadow(0 0 0.7rem rgba(var(--aw-glow, 214, 33, 127), 0.5));
    will-change: transform, opacity;
  }

  /* The drifting man belongs to the daytime world, same as the props: LUNAR
     mode hides the mote layer so the night room is just cloth and wire. */
  html[data-anemoia-mode='lunar'] .afloat__motes { display: none; }

  /* -- Clothesline rope (SOLAR only) ------------------------------------- */
  /* A thin taut wire stretched edge-to-edge across the frame. The SOLAR
     backdrop is the clean hill (no baked pole), so the wire the products hang
     from is drawn here instead. JS sets `top` to the same wireY the hangers
     use, so a straight line reads as the line the cloth is pinned to. It sits
     behind the products (z 2) so the cloth drapes over it. */
  .afloat__wire {
    position: absolute;
    left: 0;
    right: 0;
    top: 0; /* real position set in JS (measureScene) */
    height: 2px;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
    border-radius: 2px;
    background: rgba(244, 237, 224, 0.92);
    box-shadow: 0 1px 2px rgba(60, 45, 25, 0.35);
  }

  /* LUNAR: same clothesline, but a cool moonlit wire that glows blue to sit
     with the night backdrop instead of the daytime twine. */
  html[data-anemoia-mode='lunar'] .afloat__wire {
    background: rgba(158, 205, 255, 0.95);
    box-shadow:
      0 0 5px rgba(130, 190, 255, 0.95),
      0 0 12px rgba(96, 160, 255, 0.7),
      0 0 22px rgba(70, 130, 255, 0.45);
  }

  /* -- Solarpunk props (goat only — the wire is drawn above) ------------- */
  /* Deepest layer of the room: behind the heading text (z 5), the floating
     products (z 2) and even the drifting motes (z 1). It stays put when the
     cursor moves; the goat is planted in the grass. */
  .afloat__props {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  /* The pastoral props belong to the daytime world: LUNAR mode hides the
     layer (the goat) with it. */
  html[data-anemoia-mode='lunar'] .afloat__props { display: none; }

  /* The goat grazing in the foreground grass, bottom right. Interactive
     (hover/tap = head-lift + bleat) unlike the rest of the props layer. Its
     own painted grass tuft grounds it; only a whisper of a fade at the very
     bottom blends the tuft into the field. */
  .afloat__goat {
    position: absolute;
    right: clamp(3rem, 9vw, 11rem);
    bottom: 4.5svh;
    height: 12svh;
    aspect-ratio: 837 / 612;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  /* Instant feedback on hover/tap — the goat perks up while it finishes its
     graze, then the head-lift + bleat follow (sequenced in JS). */
  .afloat__goat:hover,
  .afloat__goat:active { transform: scale(1.1); }

  .afloat__goat-media {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: auto;
    display: block;
    /* No drop-shadow here: on the video it reads as a dark ghost layer
       hovering behind the goat rather than a contact shadow. */
    filter: brightness(0.95);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 3%);
    mask-image: linear-gradient(to top, transparent 0%, #000 3%);
  }

  /* The video frame carries head-lift headroom above the resting pose, so it
     renders taller to keep the goat itself the same size as the PNG. */
  .afloat__goat-media--video { height: 132%; }

  /* Two stacked players (see setupGoat): one grazes, one waits paused on the
     mouth-open frame, and hovering swaps which is shown. Opacity rather than
     display/visibility — the waiting player has to stay in the compositor or
     its frame isn't there to show the instant it's wanted. */
  .afloat__goat-media.is-off { opacity: 0; }

  /* Where the transparent-alpha video can't run (iOS/Safari paint VP9 alpha on
     black, so the static PNG stays) the goat would otherwise be frozen. Give the
     PNG a gentle grazing sway so it still feels alive on mobile. The video
     variant provides its own motion, so it's excluded. */
  @media (prefers-reduced-motion: no-preference) {
    .afloat__goat-media:not(.afloat__goat-media--video) {
      transform-origin: bottom center;
      animation: afloat-goat-graze 3.4s ease-in-out infinite;
    }
  }

  @keyframes afloat-goat-graze {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    50% { transform: translateX(-50%) translateY(1.5%) rotate(-1.4deg); }
  }

  /* -- The gallery tote (bottom-left, standing in the grass) ------------ */
  /* Stands still in the grass like the goat (no cursor parallax), but its own
     layer: it stays in LUNAR mode (it's the cart) and sits above the
     motes so it can be clicked. Same z as the stage but earlier in the DOM,
     so a hovered product (and its add to cart) rises over the bag, like the
     goat. */
  .afloat__bag-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .afloat__bag {
    position: absolute;
    left: clamp(0.75rem, 3vw, 4rem);
    bottom: 3.5svh;
    height: 23svh;
    aspect-ratio: 442 / 640;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    pointer-events: auto;
    transform-origin: 50% 100%;
    transition: transform 0.3s ease;
  }

  .afloat__bag:hover { transform: scale(1.04); }

  /* Contact shadow in the grass under the bag's base. */
  .afloat__bag::before {
    content: '';
    position: absolute;
    left: 4%;
    right: -6%;
    bottom: -3%;
    height: 9%;
    background: radial-gradient(closest-side, rgba(20, 40, 10, 0.5), transparent);
    pointer-events: none;
  }

  .afloat__bag-art {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    /* Settle it into the scene's light, and let the grass take the very base. */
    filter: brightness(0.96) saturate(0.95);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 4%);
    mask-image: linear-gradient(to top, transparent 0%, #000 4%);
  }

  /* The plastic window, measured off the bag art; the clip follows its
     slightly off-square corners. */
  .afloat__bag-window {
    position: absolute;
    left: 40.64%;
    top: 51.7%;
    width: 38.93%;
    height: 21.93%;
    clip-path: polygon(0 2.7%, 99.5% 0.3%, 99.5% 96.6%, 2.2% 99.3%);
  }

  .afloat__bag-stack,
  .afloat__bag-glass {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* Newest item front and centre, the two before it tucked behind either side. */
  .afloat__bag-item {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 72%;
    height: 94%;
    object-fit: contain;
    transform: translate(-50%, -50%);
  }
  .afloat__bag-item[data-slot='0'] { z-index: 3; }
  .afloat__bag-item[data-slot='1'] {
    z-index: 2;
    transform: translate(-50%, -50%) translateX(-30%) rotate(-9deg) scale(0.86);
    filter: brightness(0.88);
  }
  .afloat__bag-item[data-slot='2'] {
    z-index: 1;
    transform: translate(-50%, -50%) translateX(30%) rotate(8deg) scale(0.86);
    filter: brightness(0.88);
  }

  /* The bag's own plastic laid back over the products so they sit behind it. */
  .afloat__bag-glass { opacity: 0; }
  .afloat__bag.is-filled .afloat__bag-glass { opacity: 0.4; }

  /* On add: the item drops in through the top, then the bag takes the weight. */
  .afloat__bag-item.is-dropping {
    animation: afloat-bag-drop 0.3s cubic-bezier(0.5, 0, 0.75, 0) both;
  }
  /* Individual scale/rotate compose with the hover transform. */
  .afloat__bag.is-catching {
    animation: afloat-bag-catch 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) 0.25s both;
  }
  .afloat__bag.is-catching .afloat__bag-glass {
    animation: afloat-bag-glint 0.5s ease-out 0.25s both;
  }

  @keyframes afloat-bag-drop {
    from { translate: 0 -160%; rotate: -10deg; }
    to { translate: 0 0; rotate: 0deg; }
  }
  @keyframes afloat-bag-catch {
    0% { scale: 1; rotate: 0deg; }
    22% { scale: 1.05 0.93; }
    48% { scale: 0.98 1.03; rotate: -2.5deg; }
    72% { rotate: 1.5deg; }
    100% { scale: 1; rotate: 0deg; }
  }
  @keyframes afloat-bag-glint {
    0% { opacity: 0.4; filter: none; }
    25% { opacity: 0.75; filter: brightness(1.5); }
    100% { opacity: 0.4; filter: none; }
  }

  /* The product image flying up to the nav cart on add. */
  fly-to-cart.afloat__fly {
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    animation-duration: 0.38s !important;
  }

  /* -- Immersive header on the collection room (match the homepage) ----- */
  body:has(main[data-template='collection']) .announcement-bar { display: none; }

  body:has(main[data-template='collection']) .header__underlay-closed {
    background: transparent;
  }

  body:has(main[data-template='collection']) #header-component[transparent],
  body:has(main[data-template='collection']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }

  /* -- Mobile ---------------------------------------------------------- */
  @media screen and (max-width: 749px) {
    /* Two products share the screen, so the media can be a bit larger. */
    .afloat__media { width: clamp(120px, 38vw, 210px); }

    /* No dark drop-shadow rectangle behind the products on mobile. */
    .afloat__img { filter: none; }

    /* Detail (title / price / add) stays hidden until the product is tapped
       (see JS) — the tap reveals it and pauses the drift, like hover on desktop.
       Tapping the revealed product again opens its PDP. */

    /* Smaller filter button + dropdown, tucked below the moon icon (the mode
       toggle sits fixed top-right), with a touch more left padding. */
    .afloat__filter-bar {
      top: calc(var(--header-height, 60px) + 5.25rem);
      right: 0.65rem;
      gap: 0.35rem;
    }

    .afloat__filter-label {
      font-size: 0.55rem;
      letter-spacing: 0.12em;
    }

    .afloat__filter {
      padding: 0.34rem 1.7rem 0.34rem 1.1rem;
      font-size: 0.62rem;
      letter-spacing: 0.05em;
    }

    .afloat__filter-caret {
      right: 0.7rem;
      font-size: 0.6rem;
    }

    /* Clear of the fixed audio toggle in the bottom-right corner. */
    .afloat__goat {
      right: 5rem;
      bottom: 3svh;
      height: 9svh;
    }

    .afloat__bag {
      left: 0.5rem;
      bottom: 2.5svh;
      height: 14svh;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .afloat__floaty { animation: none; }
    .afloat__item { transition: none; }
    .afloat__bag-item.is-dropping,
    .afloat__bag.is-catching,
    .afloat__bag.is-catching .afloat__bag-glass { animation: none; }
  }
/* END_SECTION:anemoia-collection-float */

/* START_SECTION:anemoia-contact (INDEX:4) */
.acontact {
    --ac-max: 1500px;
    --ac-ink: #16140f;
    --ac-ink-soft: #4b463d;
    --ac-on-space: #f6f3ec;
    --ac-card-left: rgba(241, 239, 233, 0.92);   /* #F1EFE9 */
    --ac-card-right: rgba(231, 229, 221, 0.92);   /* #E7E5DD */
    --ac-tile: #dcd9cf;
    --ac-line: rgba(22, 20, 15, 0.14);
    --ac-cta: var(--anemoia-cta, #fea500);
    --ac-border: #dedede;
    --ac-input-bg: #dcd9cf;               /* grey fields (was white) */
    --ac-input-border: #c7c2b5;
    --ac-input-ink: var(--ac-ink);
    --ac-card-edge: rgba(255, 255, 255, 0.4);
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
    color: var(--ac-on-space);
    font-family: var(--font-anemoia);
    padding: clamp(5.5rem, 12vh, 8rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vh, 4.5rem);
  }

  /* -- Two cards: form left, image right --------------------------------- */
  .acontact__cards {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(1rem, 2.5vw, 2.2rem);
    align-items: start;
  }

  .acontact__pane {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ac-card-edge);
    border-radius: 20px;
    color: var(--ac-ink);
  }

  /* -- Left card: form --------------------------------------------------- */
  .acontact__pane--form {
    background: var(--ac-card-left);
    padding: clamp(1.4rem, 2.6vw, 2.4rem);
  }
  .acontact__form-inner { display: flex; flex-direction: column; gap: 1.1rem; }

  .acontact__kicker {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-ink-soft);
  }
  .acontact__title {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .acontact__intro { font-size: 1.08rem; line-height: 1.6; color: var(--ac-ink-soft); }
  .acontact__intro p { margin: 0 0 0.6rem; }

  /* -- Business details (name / address / email) ------------------------- */
  .acontact__details {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--ac-line);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.98rem;
    line-height: 1.5;
    text-align: center;
    color: var(--ac-ink-soft);
  }
  .acontact__detail { margin: 0; }
  .acontact__detail p { margin: 0; }
  .acontact__detail--name {
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.88rem;
    color: var(--ac-ink);
    margin-bottom: 0.15rem;
  }
  .acontact__email {
    color: var(--ac-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
  }
  .acontact__email:hover { color: var(--ac-cta); }

  .acontact__form { display: flex; flex-direction: column; gap: 1rem; margin: 0.4rem 0 0; }
  .acontact__field { display: flex; flex-direction: column; gap: 0.4rem; }
  .acontact__label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac-ink);
  }
  .acontact__optional { font-weight: 500; letter-spacing: 0.06em; opacity: 0.55; }

  /* Background/colour pinned across hover + focus + autofill. The `.acontact`
     prefix raises specificity above base.css's `input:not([type=...])` (0,1,1)
     and `input:hover` (0,1,1) so the fields don't flip dark at rest or on hover. */
  .acontact .acontact__input,
  .acontact .acontact__input:hover,
  .acontact .acontact__input:focus,
  .acontact .acontact__input:active {
    width: 100%;
    padding: 0.9rem 1.05rem;
    border: 1.5px solid var(--ac-input-border);
    border-radius: 12px;
    background-color: var(--ac-input-bg);
    color: var(--ac-input-ink);
    font: inherit;
    /* Over 1rem on purpose: iOS Safari zooms the page on focus below 16px. */
    font-size: 1.05rem;
    transition: border-color 0.15s ease;
  }
  .acontact .acontact__input::placeholder { color: #6f6a5f; opacity: 0.7; }
  .acontact .acontact__input:focus { outline: none; border-color: var(--ac-cta); }
  .acontact .acontact__input:-webkit-autofill,
  .acontact .acontact__input:-webkit-autofill:hover,
  .acontact .acontact__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ac-input-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ac-input-bg) inset;
    box-shadow: 0 0 0 1000px var(--ac-input-bg) inset;
    caret-color: var(--ac-input-ink);
  }
  .acontact__textarea { resize: vertical; min-height: 7rem; }

  .acontact__success,
  .acontact__error {
    margin: 0;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.98rem;
    line-height: 1.5;
  }
  .acontact__success { background: rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0.16); border: 1px solid rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0.5); color: var(--anemoia-cta-deep, #6a4a18); }
  .acontact__error { background: rgba(168, 50, 50, 0.12); border: 1px solid rgba(168, 50, 50, 0.4); color: #7a2222; }

  /* -- Submit (homepage / PDP CTA pill) --------------------------- */
  .acontact__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.3rem;
    padding: 1rem 1.6rem;
    border: 1.5px solid var(--ac-border);
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  .acontact__submit:hover { background: var(--anemoia-cta-hover, #e89400); transform: translateY(-1px); }

  /* -- Right card: small image + business details ------------------------ */
  .acontact__pane--media {
    background: var(--ac-card-right);
    padding: clamp(1.2rem, 2.2vw, 1.8rem);
  }
  .acontact__media-inner { display: flex; flex-direction: column; gap: 1.2rem; }
  .acontact__img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
  }
  .acontact__img--placeholder { aspect-ratio: 3 / 4; }

  /* -- Social icons (equal size, equal gap) ------------------------------ */
  .acontact__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.1rem;
  }
  .acontact__social-link {
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .acontact__social-link:hover { opacity: 0.7; transform: translateY(-1px); }
  .acontact__social-link--tt { width: 1.25rem; height: 1.25rem; }
  .acontact__social-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* -- One-line footer (white over the video, same as the PDP) ----------- */
  .acontact__footer { max-width: var(--ac-max); margin: clamp(2rem, 5vh, 3.5rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(246, 243, 236, 0.25); }
  .acontact__footer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .acontact__footer-group { display: inline-flex; gap: 1rem; }
  .acontact__footer-line a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
  }
  .acontact__footer-line a:hover { opacity: 0.75; }
  .acontact__footer-sep { color: #fff; opacity: 0.6; }

  /* -- Mobile ------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .acontact__cards { grid-template-columns: 1fr; }
    .acontact__img { max-width: 160px; }
  }

  /* -- LUNAR mode: dark cards + light text (CTA keeps its colour) ------------- */
  html[data-anemoia-mode='lunar'] .acontact {
    --ac-ink: #f3f0e8;            /* light text inside the now-dark cards */
    --ac-ink-soft: #b9b3a5;
    --ac-card-left: rgba(18, 18, 24, 0.78);
    --ac-card-right: rgba(18, 18, 24, 0.78);
    --ac-tile: #1c1c24;
    --ac-line: rgba(243, 240, 232, 0.16);
    --ac-input-bg: #dcd9cf;               /* grey fields on the dark cards */
    --ac-input-ink: #16140f;              /* dark text inside the grey fields */
    --ac-input-border: rgba(243, 240, 232, 0.3);
    --ac-card-edge: rgba(243, 240, 232, 0.14);
  }

  /* -- Page chrome: show the world (background) + light nav, like the PDP - */
  body:has(main[data-template='page.contact']) .announcement-bar { display: none; }

  body:has(main[data-template='page.contact']) .header__underlay-closed,
  body:has(main[data-template='page.contact']) .header__underlay-open { background: transparent; }

  body:has(main[data-template='page.contact']) #header-component[transparent],
  body:has(main[data-template='page.contact']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }
/* END_SECTION:anemoia-contact */

/* START_SECTION:anemoia-craving-hero (INDEX:5) */
.anemoia-craving-hero {
    --craving-ease: cubic-bezier(0.33, 0.07, 0.2, 1);
    position: relative;
    display: block;
    width: 100%;
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
    color: #fff;
    outline: none;
    touch-action: pan-y;
    background: transparent;
  }

  /* Custom cursor: native hidden over the hero on fine pointers; a JS follower
     (with a rotating scroll ring + click-to-dive state) is created in JS. */
  @media (pointer: fine) {
    .anemoia-craving-hero--cursor,
    .anemoia-craving-hero--cursor * {
      cursor: none;
    }
  }

  .craving__cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: 92px;
    height: 92px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .craving__cursor.is-visible {
    opacity: 1;
  }

  .craving__cursor-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    background: var(--craving-cursor-img) center / contain no-repeat;
    transform: translate(-50%, -50%);
    transition: width 0.25s ease, height 0.25s ease;
  }

  .craving__cursor-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: #fff;
    font-family: var(--font-anemoia);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    animation: craving-cursor-spin 8s linear infinite;
    transition: opacity 0.25s ease;
  }

  .craving__cursor-dive {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--anemoia-cta, #fea500);  /* Add-to-cart gold (was pink glow) */
    color: var(--anemoia-cta-ink, #fff);
    font-family: var(--font-anemoia);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Hover over a clickable product: ring + pointer give way to "click to dive". */
  .craving__cursor.is-link .craving__cursor-ring,
  .craving__cursor.is-link .craving__cursor-dot {
    opacity: 0;
  }

  .craving__cursor.is-link .craving__cursor-dive {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  @keyframes craving-cursor-spin {
    to { transform: rotate(360deg); }
  }

  /* Readability scrim so white type holds over a bright SOLAR video. */
  .craving__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 60%, transparent 40%, rgba(0, 0, 0, var(--craving-scrim, 0.25)) 100%);
  }

  .craving__tagline {
    position: absolute;
    top: clamp(5.5rem, 13vh, 8rem);
    left: 50%;
    z-index: 1;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    font-family: var(--font-anemoia);
    font-size: clamp(0.75rem, 1.1vw, 1rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }

  /* -- Centred framed stage ------------------------------------------- */
  .craving__stage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    height: var(--craving-frame-size, 64vh);
    aspect-ratio: var(--craving-frame-aspect, 4 / 5);
    /* Lifted a little so the Add-to-cart CTA below the frame clears the footer bar. */
    transform: translate(-50%, -59%);
  }

  .craving__window {
    position: absolute;
    inset: var(--craving-frame-inset, 8%);
    overflow: hidden;
  }

  .craving__slides {
    position: absolute;
    inset: 0;
  }

  .craving__slide {
    position: absolute;
    inset: 0;
    transform: translateX(100%);
  }

  .craving__slide.is-active { transform: translateX(0); }
  .craving__slide.is-left { transform: translateX(-100%); }
  .craving__slide.is-right { transform: translateX(100%); }
  .craving__slide.is-anim { transition: transform 1000ms var(--craving-ease); }

  .craving__object-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Scale the product down so it sits inside the frame opening with a margin
     of the world (video) showing around it; tune with "Product size". */
  .craving__object-media {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    transform: scale(var(--craving-product-scale, 0.85));
  }

  /* Collection preview gallery: members stack inside the frame and crossfade
     while the slide is hovered (driven by JS toggling .is-shown). */
  .craving__gallery-frame {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 600ms var(--craving-ease);
  }

  .craving__gallery-frame.is-shown { opacity: 1; }

  .craving__product {
    width: 100%;
    height: 100%;
    object-fit: var(--craving-image-fit, contain);
    animation: craving-float 7s ease-in-out infinite alternate;
  }

  .anemoia-craving-hero--still .craving__product { animation: none; }

  /* Desktop hover freezes the exhibit (see setupFreeze in the JS): the collection
     carousel holds on whatever is in the frame and the float settles, so the
     product being looked at is the one named beside it and the one the CTA adds. */
  .anemoia-craving-hero.is-frozen .craving__product { animation-play-state: paused; }

  /* Idle drift + gentle breathing/sway so the framed object always feels alive. */
  @keyframes craving-float {
    0%   { transform: scale(1.02) translateY(-0.9%) rotate(-0.6deg); }
    50%  { transform: scale(1.04) translateY(0.3%) rotate(0.5deg); }
    100% { transform: scale(1.02) translateY(0.9%) rotate(-0.2deg); }
  }

  .craving__frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.5));
    /* Smoothly fade the golden frame out and back in on a 5s cycle. */
    animation: craving-frame-fade 5s ease-in-out infinite;
  }

  @keyframes craving-frame-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  .anemoia-craving-hero--still .craving__frame { animation: none; }

  /* -- Boy angler (bottom-right bank) ---------------------------------- */
  .craving__boy {
    position: absolute;
    right: var(--boy-right, 2%);
    bottom: var(--boy-bottom, 8svh);
    z-index: 3;
    height: var(--boy-size, 32svh);
    aspect-ratio: 1108 / 828;
    pointer-events: auto;
    cursor: pointer;
    /* Flip the right-facing boy so he faces LEFT — perched on the right bank,
       casting his line out across the pool toward the centre. */
    transform: scaleX(-1);
    transition: transform 0.3s ease;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.4));
  }

  /* Instant feedback on hover/tap — he leans in as he casts (the cast itself is
     driven by the video in JS). */
  .craving__boy:hover,
  .craving__boy:active { transform: scaleX(-1) scale(1.05); }

  .craving__boy-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
  }

  /* The boy belongs to the daytime pond — LUNAR (night) mode hides him, on every
     screen size (mirrors the goat hiding in LUNAR in the collection room). */
  html[data-anemoia-mode='lunar'] .craving__boy { display: none; }

  /* No boy on phones — the mobile hero is too cramped for him. */
  @media screen and (max-width: 749px) {
    .craving__boy { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .craving__boy { transition: none; }
  }

  /* -- In-frame CTA (EXPLORE, or Join Waitlist on a locked exhibit) ----- */
  /* Exactly the pill the Join Waitlist state used to be: same anchor below the
     frame, same fill, hover and fade-in, same label-only geometry. min-height
     matches the height the old 3.4rem cart image gave the button, and min-width
     holds "Join Waitlist"'s width so the pill doesn't resize between slides. */
  .craving__cta {
    position: absolute;
    left: 50%;
    /* Sit just BELOW the frame (stage bottom = top:100%), never overlapping it. */
    top: calc(100% + clamp(0.25rem, 0.9vh, 0.65rem));
    bottom: auto;
    z-index: 3;
    display: inline-flex;
    width: max-content;
    min-width: 10.5rem;
    min-height: calc(3.4rem + 0.6rem + 3px);
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.85rem;
    transform: translateX(-50%);
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font-family: var(--font-anemoia);
    font-size: clamp(0.72rem, 1vw, 0.9rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transition: opacity 0.4s ease, transform 0.25s var(--craving-ease), background 0.25s ease,
      color 0.25s ease, box-shadow 0.25s ease;
  }

  /* Only show once wired up; fades in/out on the same 5s cycle as the frame.
     No glow pulse — flat CTA fill, hover swaps to the hover fill and lifts 1px.
     The neutral dark shadow above is a contact shadow for legibility over the
     video, not a glow. */
  .anemoia-craving-hero.is-ready .craving__cta {
    opacity: 1;
    animation: craving-frame-fade 5s ease-in-out infinite;
  }

  .craving__cta:hover,
  .craving__cta:focus-visible {
    background: var(--anemoia-cta-hover, #e89400);
    color: var(--anemoia-cta-ink, #fff);
    transform: translateX(-50%) translateY(-1px);
  }

  /* .is-waitlist carries no styles of its own — both states are the same pill by
     design. It stays as the state hook Liquid and the JS agree on, and as the
     handle for restyling the locked CTA later. */

  /* -- Locked / coming-soon exhibit ------------------------------------ */
  /* The framed product shows in its REAL colour whether or not it is locked.
     The grey-out that used to sit here (grayscale + a brightness/opacity cut)
     hid the thing the frame exists to show off, and a piece nobody can see
     properly is a piece nobody joins a waitlist for. "Not yet unlocked" is
     still said twice over: the "Coming Soon" line replaces the phrase on the
     right, and the CTA reads Join Waitlist. */

  /* "Coming Soon" line replaces the phrase on the right for locked exhibits. */
  .craving__caption-coming {
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  @media screen and (max-width: 749px) {
    /* Drop the link well below the frame so it sits under the phrase text.
       Same mobile geometry the Join Waitlist pill had (image 1.9rem + padding
       + border), with min-width scaled to the smaller type. */
    .craving__cta {
      top: calc(100% + 6.5vh);
      min-width: 8.5rem;
      min-height: calc(1.9rem + 0.6rem + 3px);
      padding: 0.3rem 0.8rem;
      font-size: 0.72rem;
      letter-spacing: 0.1em;
    }
    /* No opacity fade on mobile — the CTA just sits there, like every other CTA. */
    .anemoia-craving-hero.is-ready .craving__cta {
      animation: none;
      opacity: 1;
    }
  }

  /* -- Side captions (big, bold, animate in on change) ----------------- */
  .craving__captions {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* White headings: a dark contact shadow for legibility plus a magenta glow
       on EVERY word so they read as on-brand. No text outline. The -solar/-lunar
       values come from the inline style (built from the "Heading effects"
       settings); fallbacks below match the built-in defaults. */
    --caption-shadow: var(--caption-shadow-solar,
      0 1px 2px rgba(0, 0, 0, 0.35),
      0 0 12px rgba(0, 0, 0, 0.25),
      0 0 22px rgba(214, 33, 127, 0.42));
    /* Italic accent word gets a touch more magenta. */
    --caption-accent-shadow: var(--caption-accent-shadow-solar,
      0 1px 2px rgba(0, 0, 0, 0.35),
      0 0 22px rgba(255, 79, 195, 0.52));
  }

  /* Lunar mode: use the lunar-pink variants. */
  html[data-anemoia-mode='lunar'] .craving__captions {
    --caption-shadow: var(--caption-shadow-lunar,
      0 1px 2px rgba(0, 0, 0, 0.38),
      0 0 12px rgba(0, 0, 0, 0.28),
      0 0 24px rgba(255, 79, 195, 0.48));
    --caption-accent-shadow: var(--caption-accent-shadow-lunar,
      0 1px 2px rgba(0, 0, 0, 0.32),
      0 0 26px rgba(255, 79, 195, 0.62));
  }

  .craving__caption {
    position: absolute;
    inset: 0;
  }

  .craving__caption-left,
  .craving__caption-right {
    position: absolute;
    top: 50%;
    max-width: min(28vw, 20rem);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.7s var(--craving-ease);
  }

  /* Sit just beside the frame (small gap) rather than at the viewport edges. */
  .craving__caption-left {
    right: calc(50% + var(--craving-frame-half, 24vh) + clamp(2rem, 5vw, 5rem));
    left: auto;
    transform: translateY(-50%) translateX(-30px);
    text-align: right;
  }

  .craving__caption-right {
    left: calc(50% + var(--craving-frame-half, 24vh) + clamp(2rem, 5vw, 5rem));
    right: auto;
    transform: translateY(-50%) translateX(30px);
    text-align: left;
  }

  .craving__caption.is-active .craving__caption-left,
  .craving__caption.is-active .craving__caption-right {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.28s;
  }

  .craving__caption-eyebrow {
    margin: 0 0 0.3em;
    font-family: var(--font-anemoia);
    font-style: italic;
    font-size: clamp(0.85rem, 1.3vw, 1.25rem);
    line-height: 1.3;
    opacity: 0.85;
    color: var(--caption-text, #fff);
    text-shadow: var(--caption-shadow);
  }

  .craving__caption-category {
    margin: 0 0 0.1em;
    font-family: var(--font-anemoia);
    font-weight: 600;
    font-size: clamp(0.9rem, 1.5vw, 1.4rem);
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
    opacity: 0.9;
    color: var(--caption-text, #fff);
    text-shadow: var(--caption-shadow);
  }

  .craving__caption-name {
    margin: 0;
    font-family: var(--font-anemoia);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--caption-text, #fff);
    text-shadow: var(--caption-shadow);
    /* The headline retitles as the collection turns inside the frame — cross it
       over rather than letting the words pop. */
    transition: opacity 240ms var(--craving-ease), transform 240ms var(--craving-ease);
  }

  .craving__caption-name.is-swapping {
    opacity: 0;
    transform: translateY(0.18em);
  }

  .craving__caption-phrase-title {
    margin: 0;
    font-family: var(--font-anemoia);
    font-weight: 700;
    font-size: clamp(1.6rem, 4.2vw, 4rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--caption-text, #fff);
    text-shadow: var(--caption-shadow);
  }

  .craving__caption-phrase-accent {
    font-family: var(--font-anemoia);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    /* inherits white fill from the phrase title; extra magenta bloom to pop */
    text-shadow: var(--caption-accent-shadow);
  }

  .craving__caption-phrase-sub {
    margin: 0.6em 0 0;
    font-family: var(--font-anemoia);
    font-style: italic;
    font-size: clamp(0.85rem, 1.2vw, 1.15rem);
    line-height: 1.4;
    opacity: 0.92;
    color: var(--caption-text, #fff);
    /* Smaller + lighter, so add an extra dark drop shadow for legibility. */
    text-shadow: var(--caption-shadow), 0 1px 6px rgba(0, 0, 0, 0.45);
  }

  /* -- Bottom bar ------------------------------------------------------ */
  .craving__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(0.75rem, 2vh, 1.5rem) clamp(1rem, 2.5vw, 2.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  /* Minimal one-line footer, centred in the bar (matches the PDP footer). */
  .craving__mini-footer {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.9rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .craving__mini-footer-group { display: inline-flex; gap: 0.9rem; }
  .craving__mini-footer a {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
  }
  .craving__mini-footer a:hover { opacity: 0.75; }
  .craving__mini-footer-sep { color: #fff; opacity: 0.6; }

  /* Social links: text on desktop (default), small Files-image icons on mobile. */
  .craving__mini-footer-social { align-items: center; gap: 0.9rem; }
  .craving__mini-footer-social a { display: inline-flex; align-items: center; }
  .craving__social-icon {
    display: none;
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
  }

  /* On narrow screens the nav + explore already fill the bar; hide the links. */
  @media screen and (max-width: 999px) {
    .craving__mini-footer { display: none; }
  }

  .craving__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 3.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .craving__dot {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    font-family: var(--font-anemoia);
  }

  .craving__dot-marker {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background-color: #fff;
    transform: scale(0);
    transition: transform 300ms ease;
  }

  .craving__dot.is-active .craving__dot-marker { transform: scale(1); }

  .craving__dot-number {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 0.85;
  }

  .craving__dot-name {
    max-width: 0;
    overflow: hidden;
    padding-left: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
    line-height: 0.85;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 300ms ease, padding 300ms ease, opacity 300ms ease;
  }

  .craving__dot.is-active .craving__dot-name {
    max-width: 12rem;
    padding-left: 0.625rem;
    opacity: 1;
  }

  .craving__explore {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
  }

  .craving__explore-marquee {
    display: block;
    width: clamp(6.5rem, 10vw, 8.75rem);
    overflow: hidden;
    font-family: var(--font-anemoia);
    font-weight: 500;
    font-size: clamp(0.8rem, 1.4vw, 1.25rem);
    line-height: 1;
    white-space: nowrap;
  }

  .craving__explore-track {
    display: inline-flex;
    animation: craving-marquee var(--craving-marquee-dur, 16s) linear infinite;
  }

  .craving__explore-track > span { padding-right: 2rem; }

  /* The mobile marquee text is hidden on desktop; the same marquee swaps its
     text ≤749px (no separate marquee, same width/styling). */
  .craving__explore-txt--mobile { display: none; }

  @keyframes craving-marquee {
    to { transform: translateX(-50%); }
  }

  .craving__explore-arrow {
    font-size: 1.25rem;
    line-height: 1;
  }

  /* -- Single-section feel: hide the announcement bar on the homepage -- */
  body:has(main[data-template='index']) .announcement-bar { display: none; }

  /* Keep the homepage backdrop centred on the waterfall. The collection room
     pins the shared world video to the left (object-position: left center) so
     its painted pole stays in view on narrow screens; that must NOT follow the
     video onto the homepage, where centring shows the waterfall. Scope-and-win
     it back to centre here. */
  body:has(main[data-template='index']) .anemoia-world__env video,
  body:has(main[data-template='index']) .anemoia-world__env img {
    object-position: center center;
  }

  /* Don't flash a header background bar when hovering the nav on the homepage:
     keep the transparent header's underlay transparent on hover/focus. */
  body:has(main[data-template='index']) .header__underlay-closed {
    background: transparent;
  }

  /* Freeze the homepage transparent header to its resting look in every state so
     hovering the nav never flips the ANEMOIA brand text, links, icons or cart
     bubble to the page scheme's dark colours. Values mirror the transparent
     color scheme (foreground #f6f3ec, off-white cart bubble with dark count). */
  body:has(main[data-template='index']) #header-component[transparent],
  body:has(main[data-template='index']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }

  /* -- Mobile ---------------------------------------------------------- */
  @media screen and (max-width: 749px) {
    /* Bigger, upper-centred frame — the golden frame + product are the hero.
       Lifted so there's room below for the phrase, then the CTA, then the bar. */
    .craving__stage {
      height: calc(var(--craving-frame-size, 64vh) * 0.6);
      transform: translate(-50%, -58%);
    }

    /* Side text stacks above (name) and below (phrase) the frame, small so it
       never crowds the frame, product or the CTA. */
    .craving__caption-left,
    .craving__caption-right {
      top: auto;
      left: 1rem;
      right: 1rem;
      max-width: none;
      text-align: center;
      transform: translateX(0) translateY(20px);
    }

    /* Balance the gaps: the name above and the phrase below sit an equal
       distance from the frame. */
    .craving__caption-left { top: 13%; }
    .craving__caption-right { bottom: 28%; }

    /* Drop the sub-line on mobile so the phrase clears the bar. */
    .craving__caption-phrase-sub { display: none; }

    .craving__caption.is-active .craving__caption-left,
    .craving__caption.is-active .craving__caption-right {
      transform: translateX(0) translateY(0);
    }

    .craving__caption-eyebrow { font-size: 0.9rem; }
    .craving__caption-category { font-size: 0.82rem; }
    .craving__caption-name { font-size: clamp(1.6rem, 7.2vw, 2.3rem); }
    .craving__caption-phrase-title { font-size: clamp(1.55rem, 6.8vw, 2.2rem); }

    .craving__dot-name { display: none; }

    /* Mobile: keep the SAME marquee (same width/styling), just swap the desktop
       line for the mobile text. */
    .craving__explore-txt--desktop { display: none; }
    .craving__explore-txt--mobile { display: block; }

    /* Footer bar: 01 / 02 numbers on the first row; the text links share a row
       and the social icons get their own row below, all kept small. */
    .craving__bar {
      flex-wrap: wrap;
      row-gap: 0.4rem;
      padding-block: 0.55rem;
    }

    .craving__nav { order: 1; }
    .craving__explore { order: 2; }
    .craving__nav-list { justify-content: center; }

    .craving__mini-footer {
      display: flex;
      flex-wrap: wrap;
      order: 3;
      flex-basis: 100%;
      justify-content: center;
      gap: 0.3rem 0.6rem;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
    }

    /* Heavier than the desktop 400 so the smaller type still reads as solidly
       as the desktop line does (same treatment as the shared footer). */
    .craving__mini-footer a { font-weight: 600; }

    /* Hide the "|" separators; text links share a line, icons get their own. */
    .craving__mini-footer-sep { display: none; }
    .craving__mini-footer-group { order: 1; gap: 0.6rem; }
    .craving__mini-footer-social {
      order: 2;
      flex-basis: 100%;
      justify-content: center;
    }

    /* Swap the social text for the image icons on mobile only. */
    .craving__mini-footer-txt { display: none; }
    .craving__social-icon { display: block; width: 1.15rem; height: 1.15rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .craving__slide.is-anim,
    .craving__caption-left,
    .craving__caption-right,
    .craving__caption-name,
    .craving__gallery-frame { transition: none; }
    .craving__product,
    .craving__frame,
    .craving__explore-track,
    .craving__cursor-ring { animation: none; }
    .anemoia-craving-hero.is-ready .craving__cta { animation: none; opacity: 1; }
  }
/* END_SECTION:anemoia-craving-hero */

/* START_SECTION:anemoia-desktop (INDEX:6) */
/* ---- Page chrome: full immersion (hide announcement + header) ----------- */
  body:has(main[data-template='page.desktop']) .announcement-bar,
  body:has(main[data-template='page.desktop']) #header-component { display: none; }
  body:has(main[data-template='page.desktop']) { background: #06070c; }

  .deskos {
    position: relative;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    color: #f6f3ec;
    font-family: 'Space Mono', ui-monospace, monospace;
    background: #06070c;
    overflow: hidden;
  }

  /* ---- Backdrop: the collection-world loops (crossfaded by mode) ---------- */
  .deskos__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .deskos__bg-plate {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 14%, rgba(60, 36, 90, 0.5), transparent 60%),
      linear-gradient(180deg, #0a0a12, #06070c);
  }

  .deskos__bg-env {
    position: absolute;
    inset: 0;
    opacity: 1; /* always visible — the solar backdrop shows regardless of mode */
  }

  .deskos__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* scenery: a tap must never summon the video's own UI */
  }

  /* iOS paints a big centred play glyph over any inline video it refused to
     autoplay (Low Power Mode blocks autoplay outright), which landed a play
     button in the middle of the CRT desktop. The JS retries playback on the
     first gesture; this makes sure the glyph is never drawn in the meantime. */
  .deskos__bg-video::-webkit-media-controls,
  .deskos__bg-video::-webkit-media-controls-panel,
  .deskos__bg-video::-webkit-media-controls-play-button,
  .deskos__bg-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
  }

  .deskos__bg-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 7, 12, 0.5), rgba(6, 7, 12, 0.22) 38%, rgba(6, 7, 12, 0.62));
  }

  /* ---- Curved CRT glass: WebGL shader, light CSS fallback ----------------- */
  .deskos__crt {
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
  }

  .deskos__crt-curve {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.3);
    background: radial-gradient(132% 142% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  }

  .deskos__crt-glare {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(78% 40% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 62%),
      radial-gradient(64% 32% at 50% 112%, rgba(255, 255, 255, 0.04), transparent 62%);
    mix-blend-mode: screen;
  }

  .deskos__crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.14) 0,
      rgba(0, 0, 0, 0.14) 1px,
      transparent 2px,
      transparent 3px
    );
    opacity: 0.35;
  }

  .deskos__crt-flicker {
    position: absolute;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0.6;
    animation: deskos-roll 8s linear infinite;
  }

  @keyframes deskos-roll {
    0% { transform: translateY(-60%); }
    100% { transform: translateY(280%); }
  }

  .deskos__crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  .deskos__crt.gl-on .deskos__crt-canvas { display: block; }
  .deskos__crt.gl-on .deskos__crt-curve,
  .deskos__crt.gl-on .deskos__crt-scan,
  .deskos__crt.gl-on .deskos__crt-flicker { display: none; }

  .deskos__back {
    position: fixed;
    top: clamp(1rem, 3vh, 1.8rem);
    left: clamp(1rem, 3vw, 1.8rem);
    z-index: 8;
  }

  /* ---- The desktop: folders start top-left, like world-os ----------------- */
  .deskos__desktop {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.2rem, 3vh, 2rem);
    padding: clamp(4.5rem, 12vh, 7rem) clamp(1.4rem, 5vw, 3rem) clamp(2rem, 6vh, 4rem);
  }

  .deskos__path {
    margin: 0;
    padding-left: 0.4rem;
    font-size: clamp(0.72rem, 1vw, 0.84rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246, 243, 236, 0.55);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  }

  .deskos__icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: clamp(0.6rem, 2.4vw, 2rem);
  }

  .deskos__icon-cell { margin: 0; }

  button.deskos__icon { appearance: none; -webkit-appearance: none; }

  .deskos__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 6.5rem;
    padding: 0.55rem 0.4rem 0.4rem;
    text-decoration: none;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
  }

  .deskos__icon:hover,
  .deskos__icon:focus-visible,
  .deskos__icon:focus {
    outline: none;
    background: rgba(49, 106, 197, 0.42);
    border-color: rgba(120, 170, 240, 0.55);
  }

  .deskos__icon-art {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
  }

  .deskos__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .deskos__icon-label {
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    color: #f6f3ec;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
    padding: 0.05rem 0.25rem;
  }

  .deskos__icon:hover .deskos__icon-label,
  .deskos__icon:focus .deskos__icon-label {
    background: #1f4fb0;
    text-shadow: none;
  }

  /* ---- XP back button (same recipe as the museum's) ----------------------- */
  .xp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.55rem;
    font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #10233b;
    text-decoration: none;
    background: linear-gradient(180deg, #fdfefe 0%, #eef2f6 46%, #d7e0ea 54%, #eaf0f6 100%);
    border: 1px solid #4a6a8f;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: filter 0.12s ease, transform 0.06s ease;
  }

  .xp-btn:hover { filter: brightness(1.05) saturate(1.1); }
  .xp-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
  .xp-btn__glyph { font-size: 0.7rem; color: #1b5e20; line-height: 1; }

  @media screen and (max-width: 749px) {
    /* Slightly smaller XP Back button on phones. */
    .xp-btn { gap: 0.4rem; padding: 0.35rem 0.8rem 0.4rem; font-size: 0.78rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .deskos__crt-flicker { animation: none; }
  }
/* END_SECTION:anemoia-desktop */

/* START_SECTION:anemoia-letters (INDEX:7) */
/* ---- Page chrome: full immersion (hide announcement + header), single
     mode like the museum — there is no header so no solar/lunar toggle. */
  body:has(main[data-template='page.letters']) .announcement-bar,
  body:has(main[data-template='page.letters']) #header-component { display: none; }
  body:has(main[data-template='page.letters']) { background: #06201c; }

  /* ---- The CRT desktop ---------------------------------------------------- */
  .letters {
    position: relative;
    display: block;
    min-height: 100vh;
    min-height: 100svh;
    color: #f6f3ec;
    font-family: 'Space Mono', ui-monospace, monospace;
    background: #06070c;
    overflow: hidden;
  }

  /* ---- Backdrop: the same collection-world loops as the World desktop ----- */
  .letters__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .letters__bg-plate {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(120% 90% at 50% 14%, rgba(60, 36, 90, 0.5), transparent 60%),
      linear-gradient(180deg, #0a0a12, #06070c);
  }

  .letters__bg-env {
    position: absolute;
    inset: 0;
    opacity: 1; /* always visible — the solar backdrop shows regardless of mode */
  }

  .letters__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* scenery: a tap must never summon the video's own UI */
  }

  /* Same iOS guard as the CRT desktop: a video the phone refused to autoplay
     gets a big centred play glyph drawn over it by the UA. */
  .letters__bg-video::-webkit-media-controls,
  .letters__bg-video::-webkit-media-controls-panel,
  .letters__bg-video::-webkit-media-controls-play-button,
  .letters__bg-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0;
  }

  .letters__bg-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 7, 12, 0.5), rgba(6, 7, 12, 0.22) 38%, rgba(6, 7, 12, 0.62));
  }

  /* ---- Curved CRT "glass" (same recipe as the World desktop's) ------------ */
  .letters__crt {
    position: fixed;
    inset: 0;
    z-index: 7;
    pointer-events: none;
  }

  .letters__crt-curve {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.3);
    background: radial-gradient(132% 142% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  }

  .letters__crt-glare {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(78% 40% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 62%),
      radial-gradient(64% 32% at 50% 112%, rgba(255, 255, 255, 0.04), transparent 62%);
    mix-blend-mode: screen;
  }

  /* Fallback scanlines kept LIGHT — heavier lines made the letter hard to
     read. The WebGL pass replaces these entirely when it boots. */
  .letters__crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.14) 0,
      rgba(0, 0, 0, 0.14) 1px,
      transparent 2px,
      transparent 3px
    );
    opacity: 0.35;
  }

  /* WebGL curvature pass canvas (shown only once the shader is running; the
     CSS curve/scan/flicker hide so the effects don't double up). */
  .letters__crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  .letters__crt.gl-on .letters__crt-canvas { display: block; }
  .letters__crt.gl-on .letters__crt-curve,
  .letters__crt.gl-on .letters__crt-scan,
  .letters__crt.gl-on .letters__crt-flicker { display: none; }

  .letters__crt-flicker {
    position: absolute;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0.6;
    animation: letters-roll 8s linear infinite;
  }

  @keyframes letters-roll {
    0% { transform: translateY(-60%); }
    100% { transform: translateY(280%); }
  }

  .letters__back {
    position: fixed;
    top: clamp(1rem, 3vh, 1.8rem);
    left: clamp(1rem, 3vw, 1.8rem);
    z-index: 8;
  }

  /* ---- View 1: the folders row -------------------------------------------- */
  /* Same desktop layout as the World page's world-os: content starts top-left
     like a real desktop, folders flow on one horizontal line. */
  .letters__desktop {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.2rem, 3vh, 2rem);
    padding: clamp(4.5rem, 12vh, 7rem) clamp(1.4rem, 5vw, 3rem) clamp(2rem, 6vh, 4rem);
  }

  .letters__path {
    margin: 0;
    padding-left: 0.4rem;
    font-size: clamp(0.72rem, 1vw, 0.84rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246, 243, 236, 0.55);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  }

  .letters__icons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: clamp(0.6rem, 2.4vw, 2rem);
  }

  .letters__icon-cell { margin: 0; }

  .letters__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 6.5rem;
    padding: 0.55rem 0.4rem 0.4rem;
    text-decoration: none;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    user-select: none;
    transition: background 0.12s ease, border-color 0.12s ease;
  }

  .letters__icon:hover,
  .letters__icon:focus-visible,
  .letters__icon:focus {
    outline: none;
    background: rgba(49, 106, 197, 0.42);
    border-color: rgba(120, 170, 240, 0.55);
  }

  .letters__icon-art {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
  }

  .letters__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .letters__icon-label {
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-align: center;
    color: #f6f3ec;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
    padding: 0.05rem 0.25rem;
  }

  .letters__icon:hover .letters__icon-label,
  .letters__icon:focus .letters__icon-label {
    background: #1f4fb0;
    text-shadow: none;
  }

  /* Locked folders: greyed, no XP-blue selection, denied shake on click. */
  .letters__icon--locked { cursor: not-allowed; }

  .letters__icon--locked:hover,
  .letters__icon--locked:focus-visible,
  .letters__icon--locked:focus {
    background: rgba(120, 120, 120, 0.16);
    border-color: rgba(160, 160, 160, 0.3);
  }

  .letters__icon--locked .letters__icon-art {
    filter: grayscale(1) brightness(0.8) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
    opacity: 0.7;
  }

  .letters__icon--locked .letters__icon-label { color: rgba(246, 243, 236, 0.5); }

  .letters__icon--locked:hover .letters__icon-label,
  .letters__icon--locked:focus .letters__icon-label {
    background: transparent;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  }

  .letters__lock-tag {
    display: block;
    font-size: 0.85em;
    opacity: 0.7;
  }

  .letters__icon--locked.is-denied { animation: letters-denied 0.35s ease; }

  @keyframes letters-denied {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-3px); }
  }

  /* ---- View 2: the vintage Word window ------------------------------------ */
  .letters__word {
    position: fixed;
    inset: 0;
    z-index: 6;
    /* Flex, not grid: the window's percentage height must resolve against the
       fixed full-viewport container, or the window grows to its content height
       and the bottom of the letter gets clipped with no way to scroll. */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(3.6rem, 9vh, 5.5rem) clamp(0.6rem, 2.5vw, 2rem) clamp(1rem, 4vh, 2.5rem);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  /* display:grid above would silently override the UA's [hidden] rule, leaving
     an invisible full-screen layer that swallows the folder clicks. */
  .letters__word[hidden] { display: none; }

  .letters.is-word .letters__word { opacity: 1; }

  .word {
    display: flex;
    flex-direction: column;
    flex: none;
    width: min(920px, 100%);
    height: min(760px, 100%);
    max-height: 100%;
    background: #c0c0c0;
    border: 1px solid #000;
    box-shadow:
      inset 1px 1px 0 #fff,
      inset -1px -1px 0 #5a5a5a,
      0 14px 40px rgba(0, 0, 0, 0.55);
    font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', sans-serif;
    font-size: 0.78rem;
    color: #111;
    transform: scale(0.6);
    transform-origin: 50% 60%;
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.1);
    outline: none;
  }

  .letters.is-word .word { transform: scale(1); }

  /* Title bar — Word 6 / Windows 3.1: solid navy, white bold centered title. */
  .word__titlebar {
    display: flex;
    align-items: stretch;
    height: 24px;
    background: #000080;
    color: #fff;
    flex: none;
  }

  .word__title {
    flex: 1;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Balances the width of the minimize + close boxes so the title stays
       optically centered. */
    padding: 0 0.5rem 0 calc(0.5rem + 50px);
  }

  .word__winbtns { display: flex; }

  .word__winbtn {
    width: 25px;
    display: grid;
    place-items: center;
    background: #c0c0c0;
    color: #000;
    font: inherit;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0;
    border: 1px solid #000;
    border-width: 0 0 1px 1px;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5a5a5a;
  }

  .word__winbtn--close { cursor: pointer; }
  .word__winbtn--close:hover { background: #d4d4d4; }
  .word__winbtn--close:active { box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #5a5a5a; }

  .word__menubar {
    display: flex;
    gap: 0.1rem;
    padding: 0.22rem 0.35rem;
    background: #fff;
    border-bottom: 1px solid #808080;
    flex: none;
    overflow: hidden;
  }

  .word__menubar span {
    padding: 0.08rem 0.42rem;
    white-space: nowrap;
  }

  .word__menubar u { text-decoration-thickness: 1px; text-underline-offset: 2px; }

  /* Toolbars: grey rows of beveled buttons. */
  .word__tb {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    background: #c0c0c0;
    border-bottom: 1px solid #808080;
    box-shadow: inset 0 1px 0 #fff;
    flex: none;
    overflow: hidden;
  }

  .word__tb-btn {
    display: grid;
    place-items: center;
    width: 24px;
    height: 22px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #fff #5a5a5a #5a5a5a #fff;
    flex: none;
  }

  .word__tb-btn svg { width: 14px; height: 14px; }
  .word__tb-btn svg path,
  .word__tb-btn svg rect,
  .word__tb-btn svg circle { stroke-width: 1; }

  .word__tb-btn--text {
    font-size: 0.78rem;
    font-family: 'Times New Roman', serif;
    line-height: 1;
  }

  .word__tb-btn.is-pressed {
    border-color: #5a5a5a #fff #fff #5a5a5a;
    background: #d8d8d8;
  }

  .word__tb-sep {
    width: 1px;
    height: 20px;
    margin: 0 3px;
    background: #808080;
    box-shadow: 1px 0 0 #fff;
    flex: none;
  }

  .word__dd {
    display: flex;
    align-items: stretch;
    height: 22px;
    background: #fff;
    border: 1px solid;
    border-color: #5a5a5a #fff #fff #5a5a5a;
    flex: none;
  }

  .word__dd-text {
    display: grid;
    align-items: center;
    padding: 0 0.4rem;
    min-width: 4.2rem;
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .word__dd--size .word__dd-text { min-width: 1.6rem; }
  .word__dd--zoom .word__dd-text { min-width: 2.4rem; }

  .word__dd-arrow {
    display: grid;
    place-items: center;
    width: 18px;
    font-size: 0.5rem;
    background: #c0c0c0;
    border-left: 1px solid #5a5a5a;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #5a5a5a;
  }

  /* Ruler. */
  .word__ruler {
    display: flex;
    align-items: center;
    height: 20px;
    padding: 0 1.4rem;
    background: #fff;
    border-bottom: 1px solid #808080;
    font-size: 0.62rem;
    font-family: 'Times New Roman', serif;
    color: #333;
    flex: none;
    overflow: hidden;
    background-image: repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 11px,
      #9a9a9a 11px,
      #9a9a9a 12px
    );
    background-size: 12px 5px;
    background-position: 0 bottom;
    background-repeat: repeat-x;
  }

  .word__ruler-zero { width: 0.4rem; flex: none; }
  .word__ruler-num { flex: 1; text-align: center; min-width: 0; }

  /* The document sheet — retro grey scrollbar included. */
  .word__page-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    background: #fff;
    scrollbar-color: #c0c0c0 #e4e4e4;
  }

  .word__page-scroll::-webkit-scrollbar { width: 16px; background: #e4e4e4; }

  .word__page-scroll::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 1px solid #5a5a5a;
    box-shadow: inset 1px 1px 0 #fff;
  }

  .word__sheet {
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(1.6rem, 5vh, 3rem) clamp(1.4rem, 5vw, 3rem) clamp(2.5rem, 7vh, 4rem);
    font-family: 'Times New Roman', 'Tms Rmn', serif;
    font-size: clamp(0.95rem, 1.35vw, 1.05rem);
    line-height: 1.65;
    color: #1a1a1a;
    cursor: text;
  }

  .word__letterhead {
    margin: 0 0 0.2rem;
    font-variant: small-caps;
    letter-spacing: 0.12em;
    font-weight: 700;
  }

  .word__date {
    margin: 0 0 1.6rem;
    text-align: right;
  }

  .word__greeting { margin: 0 0 1rem; }

  /* The date line used to carry the gap under the letterhead. When it and
     the greeting are both empty the body follows the letterhead directly,
     so the gap moves onto that pairing rather than being lost. */
  .word__letterhead + .word__body { margin-top: 1.6rem; }

  .word__body p { margin: 0 0 1rem; }

  .word__closing { margin: 1.6rem 0 0.4rem; }

  /* The signature — Lunar, in ink. */
  .word__sig {
    margin: 0;
    font-family: 'Segoe Script', 'Brush Script MT', 'Snell Roundhand', cursive;
    font-size: 1.5em;
    font-style: italic;
    color: #1b2a6b;
  }

  /* A blinking caret after the signature, like the doc is still open. */
  .word__sig::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin-left: 0.35rem;
    background: #111;
    vertical-align: -0.12em;
    animation: word-caret 1.06s steps(1) infinite;
  }

  @keyframes word-caret {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  .word__status {
    display: flex;
    gap: 4px;
    padding: 3px 4px;
    background: #c0c0c0;
    box-shadow: inset 0 1px 0 #fff;
    font-size: 0.68rem;
    flex: none;
    overflow: hidden;
  }

  .word__status-cell {
    padding: 2px 8px;
    background: #c0c0c0;
    border: 1px solid;
    border-color: #5a5a5a #fff #fff #5a5a5a;
    white-space: nowrap;
  }

  .word__status-cell--wide { flex: 1; text-align: left; }

  /* ---- XP back button (same recipe as the museum's) ----------------------- */
  .xp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.55rem;
    font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #10233b;
    text-decoration: none;
    background: linear-gradient(180deg, #fdfefe 0%, #eef2f6 46%, #d7e0ea 54%, #eaf0f6 100%);
    border: 1px solid #4a6a8f;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: filter 0.12s ease, transform 0.06s ease;
  }

  .xp-btn:hover { filter: brightness(1.05) saturate(1.1); }
  .xp-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
  .xp-btn__glyph { font-size: 0.7rem; color: #1b5e20; line-height: 1; }

  @media (prefers-reduced-motion: reduce) {
    .letters__word, .word { transition: none; }
    .letters__icon--locked.is-denied { animation: none; }
    .word__sig::after { animation: none; }
    .letters__crt-flicker { animation: none; }
  }

  @media screen and (max-width: 749px) {
    /* Slightly smaller XP Back button on phones. */
    .xp-btn { gap: 0.4rem; padding: 0.35rem 0.8rem 0.4rem; font-size: 0.78rem; }

    .letters__icons { gap: 0.6rem 0.9rem; max-width: 24rem; }
    .letters__word { padding-top: 4.2rem; }
    .word__tb--standard { display: none; }
    .word__menubar span:nth-child(n+6) { display: none; }
    .word__ruler-num:nth-child(n+10) { display: none; }
  }
/* END_SECTION:anemoia-letters */

/* START_SECTION:anemoia-museum (INDEX:8) */
.museum {
    display: block;
    position: relative;
    width: 100%;
    /* A stray overflow anywhere on the page widens the layout viewport, which
       would make this element (and so the canvas) wider than the screen and
       crop the render's sides off. */
    max-width: 100vw;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background: #16311f;
    color: #f6f3ec;
    font-family: var(--font-anemoia);
  }

  @media (pointer: fine) {
    .museum.museum--cursor,
    .museum.museum--cursor * { cursor: none; }
  }

  .museum__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
  }

  /* ---- UI overlay -------------------------------------------------------- */
  .museum__ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .museum__ui > * { pointer-events: auto; }

  .museum__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(3rem, 6vw, 4.2rem);
    height: clamp(3rem, 6vw, 4.2rem);
    display: grid;
    place-items: center;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1;
    color: #10233b;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(215, 224, 234, 0.9));
    border: 1px solid rgba(74, 106, 143, 0.9);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
  }

  .museum__nav:hover { filter: brightness(1.06); }
  .museum__nav:active { transform: translateY(-50%) scale(0.94); }
  .museum__nav--prev { left: clamp(1rem, 4vw, 3rem); }
  .museum__nav--next { right: clamp(1rem, 4vw, 3rem); }

  /* The wall label sits low, on the floor below the frame. Anything higher
     collides with the gold frame's bottom edge and the title becomes unreadable
     against the carving. */
  .museum__meta {
    position: absolute;
    bottom: clamp(2rem, 5.5vh, 3.6rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.65);
  }

  /* If the merchant turns the bottom hint back on, lift the label clear of it. */
  .museum__ui:has(.museum__hint) .museum__meta { bottom: clamp(2.6rem, 6vh, 3.6rem); }

  .museum__meta-title {
    font-family: var(--font-anemoia);
    font-size: clamp(1rem, 2vw, 1.4rem);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: #fff;
  }

  .museum__meta-count {
    font-family: var(--font-anemoia);
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.75);
  }

  /* Small "View Details" button that floats INSIDE the hovered frame (JS keeps
     it glued to the frame's projected position on screen). Dressed like the
     vintage-XP Back button so the two controls read as one UI. */
  .museum__frame-btn {
    position: absolute;
    z-index: 5;
    transform: translate(-50%, -50%);
    padding: 0.4rem 0.9rem 0.45rem;
    font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: #10233b;
    background: linear-gradient(180deg, #fdfefe 0%, #eef2f6 46%, #d7e0ea 54%, #eaf0f6 100%);
    border: 1px solid #4a6a8f;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, filter 0.12s ease;
    cursor: pointer;
  }

  .museum__frame-btn.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .museum__frame-btn:hover { filter: brightness(1.05) saturate(1.1); }
  .museum__frame-btn:active { transform: translate(-50%, -50%) translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }

  /* A curtained frame: the pill greys out and reads "Locked" (JS also sets the
     button's disabled property, so the click never lands). */
  .museum__frame-btn.is-locked,
  .museum__fb-details.is-locked {
    color: #5b6470;
    background: linear-gradient(180deg, #f4f5f6 0%, #e6e8ea 46%, #d2d5d9 54%, #e2e4e7 100%);
    border-color: #9aa2ab;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 1px 3px rgba(0, 0, 0, 0.28);
    opacity: 0.72;
    cursor: default;
  }

  .museum__frame-btn.is-locked:hover,
  .museum__fb-details.is-locked:hover { filter: none; }

  .museum__hint {
    position: absolute;
    bottom: clamp(0.6rem, 2vh, 1rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-anemoia);
    font-size: 0.62rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    pointer-events: none;
  }

  /* While reading, hide the meta + hover pill (arrows stay so you can move on —
     moving closes the panel). */
  .museum.is-reading .museum__meta,
  .museum.is-reading .museum__hint,
  .museum.is-reading .museum__frame-btn { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

  /* At the closing line, hide the meta/hint but KEEP the arrows (prev = back). */
  .museum.is-ending .museum__meta,
  .museum.is-ending .museum__hint { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

  /* ---- Description ON the frame itself ------------------------------------
     JS sizes/positions this to the frame's projected screen rect each frame —
     a translucent veil over the photo, not a separate overlay. */
  .museum__read {
    position: absolute;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: clamp(0.9rem, 2vw, 1.5rem);
    background: rgba(8, 12, 9, 0.55);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    overflow: hidden;
  }

  .museum.is-reading .museum__read {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease;
  }

  .museum__read-close {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    background: rgba(6, 10, 8, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    cursor: pointer;
  }

  .museum__read-close:hover { background: rgba(6, 10, 8, 0.85); }
  .museum__read-close:active { transform: translateY(1px); }

  .museum__read-title {
    display: block;
    font-family: var(--font-anemoia);
    font-size: clamp(0.95rem, 1.8vw, 1.3rem);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }

  .museum__read-story {
    display: block;
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }

  /* ---- "Knock Knock" house intro ------------------------------------------ */
  .museum__house {
    position: absolute;
    inset: 0;
    z-index: 8;
    overflow: hidden;
    background: #6fae62;
    cursor: pointer; /* the whole screen knocks, not just the label */
  }

  .museum__house-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: var(--knock-x, 50%) var(--knock-y, 62%);
    transition: transform 1.6s cubic-bezier(0.6, 0, 0.25, 1);
    will-change: transform;
  }

  /* Knock → fly straight into the door. The real zoom is set inline by JS
     (translate+scale computed so the door ends dead-centre on screen); this
     class rule is only the fallback if that couldn't run. */
  .museum.is-knocking .museum__house-img {
    transform: scale(9);
  }

  .museum.is-knocking .museum__house {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.75s ease 0.7s, visibility 0s linear 1.5s;
  }

  .museum__knock {
    position: absolute;
    left: 50%;
    top: 38%; /* just above the roofline */
    transform: translate(-50%, -50%);
    padding: 0.6rem 1.4rem;
    background: transparent;
    border: 0;
    font-family: var(--font-anemoia);
    font-size: clamp(1.05rem, 2.6vw, 1.7rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    animation: museum-knock 1.7s ease-in-out infinite;
  }

  .museum__knock:hover { animation-play-state: paused; letter-spacing: 0.26em; }
  .museum.is-knocking .museum__knock { opacity: 0; transition: opacity 0.3s ease; }

  @keyframes museum-knock {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%); }
    50% { opacity: 0.55; transform: translate(-50%, -44%); }
  }

  /* Browsing UI stays hidden until the visitor has entered the house. */
  .museum:not(.is-entered) .museum__ui,
  .museum:not(.is-entered) .museum__frame-btn { opacity: 0; pointer-events: none; }

  /* ---- Closing line ------------------------------------------------------ */
  .museum__end {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-content: center;
    padding: 1.5rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
    pointer-events: none;
  }

  .museum.is-ending .museum__end { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }

  .museum__end-heading {
    margin: 0 0 1rem;
    font-family: var(--font-anemoia);
    font-size: clamp(1.4rem, 3.4vw, 2.4rem);
    line-height: 1.15;
    text-transform: lowercase;
    color: #fc5593;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }

  .museum__end-text {
    margin: 0 auto;
    max-width: 34rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    color: #fc5593;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  }

  /* Return-to-shop button under the closing line (CTA pill, site-wide style).
     The .museum__end layer is pointer-events:none, so re-enable on the button. */
  .museum__end-btn {
    justify-self: center;
    margin-top: 1.8rem;
    padding: 0.85rem 2.1rem;
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    font-family: var(--font-anemoia);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--anemoia-cta-ink, #fff);
    text-decoration: none;
    pointer-events: auto;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    transition: background 0.25s ease;
  }

  .museum__end-btn:hover { background: var(--anemoia-cta-hover, #e89400); }

  /* ---- Light CRT glass --------------------------------------------------- */
  .museum__crt { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

  .museum__crt-glare {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(80% 42% at 50% -10%, rgba(255, 255, 255, 0.09), transparent 60%),
      radial-gradient(140% 120% at 50% 50%, transparent 78%, rgba(0, 0, 0, 0.13) 100%);
    mix-blend-mode: screen;
  }

  .museum__crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 0, rgba(0, 0, 0, 0.09) 1px, transparent 2px, transparent 3px);
    opacity: 0.4;
  }

  .museum__crt-flicker {
    position: absolute;
    left: 0;
    right: 0;
    height: 44%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.04), transparent);
    opacity: 0.5;
    animation: museum-roll 9s linear infinite;
  }

  @keyframes museum-roll {
    0% { transform: translateY(-70%); }
    100% { transform: translateY(300%); }
  }

  /* ======================================================================
     THE DIVE — "View Details" flies into the frame, a real CRT switches on
     (degauss line → bloom → static → boot log), and the exhibit's story is
     typeset as a vintage journal page revealed part by part behind the glass.
     Phases live on [data-phase]: off → zoom → boot → read → out.
     ====================================================================== */
  .museum__dive {
    /* Journal palette (kept local: the About page's newsprint vars are that
       section's own inline stylesheet and never load here). */
    --jrn-paper: #e6dfc9;
    --jrn-paper-2: #d8cfb4;
    --jrn-ink: #221b12;
    --jrn-soft: rgba(34, 27, 18, 0.72);
    --jrn-rule: rgba(34, 27, 18, 0.26);
    --jrn-accent: #7a2418;
    --jrn-serif: var(--font-anemoia, 'Apple Garamond'), Georgia, 'Times New Roman', Times, serif;
    --jrn-mono: 'Courier New', Courier, monospace;
    --jrn-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent; /* the veil below paints the black, on its own curve */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.42s ease, visibility 0s linear 0.42s;
  }

  /* Opens INSTANTLY (the flying photo has to line up with the frame it left,
     and a fade would smear that), closes on a fade. */
  .museum__dive:not([data-phase='off']) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
  }

  .museum__dive-veil {
    position: absolute;
    inset: 0;
    background: #04060a;
    opacity: 1;
  }

  /* Black arrives late and fast, so the first third of the flight still has the
     gallery behind it: that is what makes it read as diving in. */
  .museum__dive[data-phase='zoom'] .museum__dive-veil {
    opacity: 0;
    animation: museum-veil 0.8s cubic-bezier(0.7, 0, 0.9, 0.4) forwards;
  }

  @keyframes museum-veil {
    0% { opacity: 0; }
    28% { opacity: 0.22; }
    100% { opacity: 1; }
  }

  /* ---- 1. The fly-in ------------------------------------------------------
     The GALLERY dives into the artwork: exactly the move the About and World
     pages make into their monitor, and the same one `flyIntoDoor` makes into
     the house. The canvas scales toward the artwork's projected centre (JS sets
     the origin and the translate+scale, so the frame lands dead centre whatever
     the viewport shape) while the veil brings the black in underneath. */
  .museum.is-diving .museum__canvas {
    transition: transform 0.95s cubic-bezier(0.55, 0, 0.25, 1);
    will-change: transform;
  }

  /* The tube glass only switches on once the picture does; during the flight the
     gallery should be seen through clean air. */
  .museum__dive[data-phase='zoom'] .museum__dive-glass { opacity: 0; }

  /* ---- 2. CRT switch-on ------------------------------------------------- */
  .museum__boot {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    background: #04060a;
  }

  .museum__dive[data-phase='boot'] .museum__boot { opacity: 1; visibility: visible; }

  /* The degauss line: a hairline that snaps open sideways, then opens the
     picture vertically (the way a tube actually wakes up). */
  .museum__boot-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 2px;
    background: #fff;
    box-shadow: 0 0 24px 6px rgba(190, 255, 220, 0.85);
    transform: translate(-50%, -50%);
  }

  .museum__dive[data-phase='boot'] .museum__boot-line { animation: museum-degauss 0.62s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }

  @keyframes museum-degauss {
    0% { width: 0; height: 2px; opacity: 0; }
    12% { width: 0; height: 2px; opacity: 1; }
    38% { width: 104%; height: 2px; opacity: 1; }
    54% { width: 104%; height: 2px; opacity: 1; }
    100% { width: 104%; height: 0; opacity: 0; }
  }

  /* Over-bright bloom as the picture opens up. */
  .museum__boot-bloom {
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 50% at 50% 50%, rgba(226, 255, 238, 0.9), rgba(120, 200, 160, 0.15) 55%, transparent 78%);
    opacity: 0;
  }

  .museum__dive[data-phase='boot'] .museum__boot-bloom { animation: museum-bloom 0.9s ease-out 0.34s forwards; }

  @keyframes museum-bloom {
    0% { opacity: 0; transform: scaleY(0.02); }
    22% { opacity: 0.95; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
  }

  /* Tube static (SVG turbulence, jittered by background-position). */
  .museum__boot-noise {
    position: absolute;
    inset: -20%;
    background-image: var(--jrn-grain);
    background-size: 160px 160px;
    opacity: 0;
    mix-blend-mode: screen;
  }

  .museum__dive[data-phase='boot'] .museum__boot-noise { animation: museum-static 1.9s steps(1, end) 0.4s; }

  @keyframes museum-static {
    0%, 100% { opacity: 0; }
    3% { opacity: 0.5; background-position: 0 0; }
    9% { opacity: 0.22; background-position: 40px 90px; }
    15% { opacity: 0.46; background-position: 120px 20px; }
    21% { opacity: 0.12; background-position: 70px 140px; }
    30% { opacity: 0.3; background-position: 10px 60px; }
    44% { opacity: 0.09; background-position: 130px 110px; }
    62% { opacity: 0.14; background-position: 55px 15px; }
    80% { opacity: 0.07; background-position: 95px 75px; }
  }

  /* Vertical hold slipping: the band that rolls up a mistuned picture. */
  .museum__boot-roll {
    position: absolute;
    left: -5%;
    right: -5%;
    height: 26%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.16) 40%, rgba(120, 255, 190, 0.1) 60%, transparent);
    opacity: 0;
  }

  .museum__dive[data-phase='boot'] .museum__boot-roll { animation: museum-hold 1.15s linear 0.5s 2; }

  @keyframes museum-hold {
    0% { transform: translateY(120%) skewX(0deg); opacity: 0.75; }
    46% { transform: translateY(20%) skewX(2.5deg); opacity: 0.5; }
    100% { transform: translateY(-140%) skewX(0deg); opacity: 0; }
  }

  .museum__boot-log {
    position: absolute;
    left: clamp(1.1rem, 6vw, 4.5rem);
    top: clamp(3.6rem, 14vh, 6rem);
    right: clamp(1.1rem, 6vw, 4.5rem);
    margin: 0;
    font-family: var(--jrn-mono);
    font-size: clamp(0.62rem, 1.5vw, 0.86rem);
    line-height: 1.85;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: pre-wrap;
    color: #b9f2c6;
    text-shadow: 0 0 6px rgba(140, 255, 175, 0.65), 0 0 20px rgba(80, 255, 140, 0.3);
  }

  /* Scoped to the phase so nothing animates while the dive sits closed. */
  .museum__dive[data-phase='boot'] .museum__boot-log { animation: museum-phosphor 0.14s steps(2, end) infinite; }

  .museum__boot-log .b-key { color: #ff7ec8; text-shadow: 0 0 10px rgba(255, 110, 190, 0.7); }
  .museum__boot-log .b-ok { color: #ffdd8a; text-shadow: 0 0 8px rgba(255, 210, 120, 0.5); }
  .museum__boot-log .b-caret { color: #ffffff; }

  @keyframes museum-phosphor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.86; }
  }

  /* ---- 3. The journal page --------------------------------------------- */
  .museum__paper-wrap {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform-origin: 50% 50%;
  }

  .museum__dive[data-phase='read'] .museum__paper-wrap {
    opacity: 1;
    visibility: visible;
    animation: museum-crton 0.62s cubic-bezier(0.2, 0.9, 0.2, 1);
  }

  /* Keep the page on screen through the power-off collapse (the base rule
     hides it, and hiding it instantly would eat the whole animation). */
  .museum__dive[data-phase='out'] .museum__paper-wrap {
    opacity: 1;
    visibility: visible;
    animation: museum-crtoff 0.42s cubic-bezier(0.6, 0, 0.9, 0.3) forwards;
  }

  @keyframes museum-crton {
    0% { transform: scaleY(0.004) scaleX(1.04); filter: brightness(7) saturate(0); }
    38% { transform: scaleY(1) scaleX(1); filter: brightness(1.9) saturate(0.5); }
    100% { transform: none; filter: none; }
  }

  @keyframes museum-crtoff {
    0% { transform: none; filter: none; }
    58% { transform: scaleY(0.006) scaleX(1.02); filter: brightness(6) saturate(0); }
    100% { transform: scaleY(0.004) scaleX(0); filter: brightness(9) saturate(0); opacity: 0; }
  }

  /* The page IS the paper: it runs edge to edge behind the tube, exactly like
     the About page's newsprint, and the reading column is centred inside it.
     (Keeping the background here rather than on the scroll wrap means the ruled
     lines and the grain scroll WITH the type instead of sliding under it.) */
  .museum__paper {
    position: relative;
    display: block;
    width: 100%;
    min-height: 100%;
    padding: clamp(3.4rem, 10vh, 6rem) clamp(1.2rem, 6vw, 4.5rem) clamp(5rem, 14vh, 8rem);
    background:
      repeating-linear-gradient(to bottom, transparent 0 1.85rem, rgba(46, 66, 96, 0.09) 1.85rem 1.9rem),
      radial-gradient(120% 55% at 12% 0%, rgba(255, 253, 243, 0.55), transparent 62%),
      linear-gradient(160deg, var(--jrn-paper), var(--jrn-paper-2));
    color: var(--jrn-ink);
    font-family: var(--jrn-serif);
  }

  /* Paper grain. */
  .museum__paper::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--jrn-grain);
    background-size: 160px 160px;
    opacity: 0.16;
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  /* The reading column inside the full-bleed page. */
  .museum__paper > .jrn {
    position: relative;
    z-index: 1;
    max-width: 54rem;
    margin: 0 auto;
  }

  /* Red margin rule down the left of the column, like a ledger sheet. */
  .museum__paper > .jrn::before {
    content: '';
    position: absolute;
    top: -4vh;
    bottom: -6vh;
    left: clamp(-2.4rem, -2vw, -1.4rem);
    width: 1px;
    background: rgba(122, 36, 24, 0.32);
  }

  /* An old coffee ring, because nothing in an archive stays clean. */
  .jrn__stain {
    position: absolute;
    top: 22%;
    right: -1.5rem;
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 58%, rgba(120, 78, 32, 0.16) 62%, rgba(120, 78, 32, 0.1) 70%, transparent 74%);
    pointer-events: none;
  }

  .jrn__stamp {
    position: absolute;
    top: 0.4rem;
    right: 0;
    padding: 0.4rem 0.9rem;
    font-family: var(--jrn-mono);
    font-size: clamp(0.6rem, 1.4vw, 0.75rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(122, 36, 24, 0.68);
    border: 2px solid rgba(122, 36, 24, 0.5);
    border-radius: 3px;
    transform: rotate(-9deg);
    opacity: 0.85;
    pointer-events: none;
  }

  .jrn__head { margin: 0 0 1.6rem; padding-bottom: 1rem; border-bottom: 3px double var(--jrn-rule); }

  .jrn__kicker {
    margin: 0 0 0.5rem;
    font-family: var(--jrn-mono);
    font-size: clamp(0.6rem, 1.4vw, 0.72rem);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--jrn-accent);
  }

  .jrn__title {
    margin: 0;
    font-family: var(--jrn-serif);
    font-size: clamp(2.1rem, 7vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    color: var(--jrn-ink);
  }

  .jrn__dateline {
    margin: 0.6rem 0 0;
    font-family: var(--jrn-mono);
    font-size: clamp(0.62rem, 1.5vw, 0.76rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jrn-soft);
  }

  .jrn__plate {
    position: relative;
    margin: 0 0 1.7rem;
    padding: 0.7rem 0.7rem 0.5rem;
    background: #fbf8ee;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
    transform: rotate(-0.7deg);
  }

  .jrn__plate-img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.82) contrast(1.05) sepia(0.12);
  }

  .jrn__plate-cap {
    margin-top: 0.6rem;
    font-family: var(--jrn-mono);
    font-size: clamp(0.6rem, 1.3vw, 0.72rem);
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jrn-soft);
  }

  /* Tape holding the print to the page. */
  .jrn__tape {
    position: absolute;
    top: -0.65rem;
    width: 4.6rem;
    height: 1.35rem;
    background: rgba(226, 214, 175, 0.72);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .jrn__tape--l { left: -1rem; transform: rotate(-24deg); }
  .jrn__tape--r { right: -1rem; transform: rotate(21deg); }

  .jrn__lede {
    margin: 0 0 2rem;
    font-family: var(--jrn-serif);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    line-height: 1.5;
    color: var(--jrn-ink);
  }

  .jrn__lede p { margin: 0 0 0.8rem; }
  .jrn__lede p:first-of-type::first-letter {
    float: left;
    margin: 0.06em 0.12em 0 0;
    font-size: 3.1em;
    line-height: 0.78;
    color: var(--jrn-accent);
  }

  .jrn__part {
    margin: 0 0 2.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--jrn-rule);
  }

  .jrn__part-no {
    margin: 0 0 0.35rem;
    font-family: var(--jrn-mono);
    font-size: clamp(0.62rem, 1.4vw, 0.74rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--jrn-accent);
  }

  .jrn__part-title {
    margin: 0 0 0.7rem;
    font-family: var(--jrn-serif);
    font-size: clamp(1.3rem, 3.4vw, 1.85rem);
    line-height: 1.15;
    text-transform: lowercase;
    color: var(--jrn-ink);
  }

  .jrn__part-body {
    font-family: var(--jrn-serif);
    font-size: clamp(0.98rem, 2vw, 1.12rem);
    line-height: 1.62;
    color: var(--jrn-ink);
  }

  .jrn__part-body p { margin: 0 0 0.9rem; }
  .jrn__part-body p:last-child { margin-bottom: 0; }
  .jrn__part-body em { font-style: italic; }
  .jrn__part-body strong { font-weight: 700; }
  .jrn__part-body a { color: var(--jrn-accent); text-underline-offset: 2px; }

  .jrn__ledger {
    margin: 0 0 2.2rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--jrn-rule);
    background: rgba(255, 252, 240, 0.42);
  }

  .jrn__ledger-head {
    margin: 0 0 0.8rem;
    font-family: var(--jrn-mono);
    font-size: clamp(0.6rem, 1.4vw, 0.72rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--jrn-accent);
  }

  .jrn__ledger-list { margin: 0; }

  .jrn__ledger-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.32rem 0;
    border-bottom: 1px dotted var(--jrn-rule);
  }

  .jrn__ledger-row:last-child { border-bottom: 0; }

  .jrn__ledger-row dt {
    flex: 0 0 auto;
    min-width: 8.5rem;
    font-family: var(--jrn-mono);
    font-size: clamp(0.6rem, 1.3vw, 0.72rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jrn-soft);
  }

  .jrn__ledger-row dd {
    margin: 0;
    font-family: var(--jrn-serif);
    font-size: clamp(0.92rem, 1.9vw, 1.05rem);
    color: var(--jrn-ink);
  }

  .jrn__closer {
    margin-top: 2.4rem;
    padding: 1.6rem 1.2rem;
    border: 2px dashed var(--jrn-rule);
    text-align: center;
  }

  .jrn__quote {
    margin: 0;
    font-family: var(--jrn-serif);
    font-size: clamp(1.15rem, 3vw, 1.7rem);
    line-height: 1.32;
    color: var(--jrn-accent);
  }

  .jrn__signoff {
    margin: 0.9rem 0 0;
    font-family: var(--jrn-mono);
    font-size: clamp(0.6rem, 1.4vw, 0.72rem);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--jrn-soft);
  }

  /* ---- Part-by-part reveal: each block glitches in like a bad sync lock -- */
  .museum__paper [data-part] {
    opacity: 0;
    will-change: transform, opacity, filter;
  }

  .museum__paper [data-part].is-in {
    animation: museum-part-in 0.95s cubic-bezier(0.16, 0.8, 0.24, 1) forwards;
  }

  @keyframes museum-part-in {
    0% {
      opacity: 0;
      transform: translate3d(0, 16px, 0) skewX(7deg) scaleY(1.14);
      clip-path: inset(46% 0 46% 0);
      filter: blur(7px) contrast(1.7) brightness(1.5);
    }
    16% {
      opacity: 1;
      transform: translate3d(-9px, 0, 0) skewX(-4deg) scaleY(1);
      clip-path: inset(0 0 0 0);
      filter: blur(2px) contrast(1.3);
    }
    24% { transform: translate3d(7px, 0, 0) skewX(3deg); clip-path: inset(0 0 32% 0); }
    32% { transform: translate3d(-4px, 0, 0) skewX(-1.5deg); clip-path: inset(0 0 0 0); }
    46% { transform: translate3d(2px, 0, 0) skewX(0deg); filter: blur(0.5px) contrast(1.05); }
    100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; }
  }

  /* A scan bar sweeps down each part as it locks in. */
  .museum__paper [data-part] { position: relative; }

  .museum__paper [data-part].is-in::after {
    content: '';
    position: absolute;
    left: -6%;
    right: -6%;
    height: 34%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.55), rgba(140, 255, 200, 0.22), transparent);
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: museum-part-scan 0.95s ease-out forwards;
  }

  @keyframes museum-part-scan {
    0% { top: -34%; opacity: 0.9; }
    100% { top: 105%; opacity: 0; }
  }

  /* ---- Glass over the whole dive ----------------------------------------
     The About page's tube, reused here: the shared WebGL pass draws curved
     scanlines + a bulged vignette onto its own canvas, and the CSS layers below
     stand in when WebGL is off (they hide themselves once .gl-on lands). */
  .museum__dive-glass { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

  .museum__dive-crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  .museum__dive-glass.gl-on .museum__dive-crt-canvas { display: block; }

  .museum__dive-glass.gl-on .museum__dive-curve,
  .museum__dive-glass.gl-on .museum__dive-scan,
  .museum__dive-glass.gl-on .museum__dive-roll { display: none; }

  .museum__dive-curve {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.3);
    background: radial-gradient(132% 142% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  }

  .museum__dive-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0.22) 1px, transparent 2px, transparent 4px);
    opacity: 0.55;
  }

  .museum__dive-roll {
    position: absolute;
    left: 0;
    right: 0;
    height: 32%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
  }

  .museum__dive:not([data-phase='off']) .museum__dive-roll { animation: museum-roll 7s linear infinite; }

  /* Light on the glass — kept in both modes (the shader has no glare of its
     own worth speaking of), so it reads the same as the About page. */
  .museum__dive-glare {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(78% 40% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 62%),
      radial-gradient(64% 32% at 50% 112%, rgba(255, 255, 255, 0.04), transparent 62%);
    mix-blend-mode: screen;
  }

  /* ---- Dive chrome ------------------------------------------------------ */
  .museum__dive-close {
    position: absolute;
    top: clamp(1rem, 3vh, 1.8rem);
    left: clamp(1rem, 3vw, 1.8rem);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .museum__dive[data-phase='read'] .museum__dive-close { opacity: 1; pointer-events: auto; }

  .museum__dive-cue {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3vh, 1.8rem);
    z-index: 6;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--jrn-mono);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    /* It only ever shows over the paper, so it is ink, not phosphor. */
    color: var(--jrn-soft);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .museum__dive[data-phase='read'] .museum__dive-cue { opacity: 1; }
  .museum__dive.is-read-through .museum__dive-cue { opacity: 0; }
  .museum__dive-cue-arrow { animation: museum-cue 1.6s ease-in-out infinite; }

  @keyframes museum-cue {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(4px); opacity: 1; }
  }

  /* While the dive is open the gallery UI underneath is inert. */
  .museum.is-diving .museum__ui,
  .museum.is-diving .museum__frame-btn,
  .museum.is-diving .museum__back { opacity: 0; pointer-events: none; }

  /* The fallback grid scrolls the page, so lock it while the dive is open. */
  html.museum-dive-lock, html.museum-dive-lock body { overflow: hidden; }

  /* "View Details" under each fallback-grid photo (no WebGL path). */
  .museum__fb-details { margin-top: 0.7rem; }

  @media screen and (max-width: 749px) {
    .museum__paper { padding-left: 1.3rem; padding-right: 1.3rem; }
    .museum__paper > .jrn::before { display: none; }
    .jrn__stain { display: none; }
    .jrn__stamp { position: static; display: inline-block; margin-bottom: 1rem; transform: rotate(-4deg); }
    .jrn__ledger-row { flex-direction: column; gap: 0.1rem; }
    .jrn__ledger-row dt { min-width: 0; }

    /* The wall label rides higher on a phone. The frame takes the same share of
       the viewport HEIGHT everywhere (the field of view is vertical), but a tall
       screen leaves far more empty floor under it, and the desktop offset left
       the label stranded at the very bottom edge. */
    .museum__meta { bottom: clamp(3.6rem, 9.5vh, 5.2rem); }

    /* The nav arrows stay pinned to the middle of the screen, so the closing
       panel keeps its gutters clear of them instead of running underneath.
       Each arrow costs its offset (1rem on a phone) plus its width (3rem). */
    .museum__end { padding-left: 4.6rem; padding-right: 4.6rem; }

    /* The paper fills the width on a phone, so ease the CSS tube vignette off
       the margins or the outer lines of type sit in the dark. */
    .museum__dive-curve { box-shadow: inset 0 0 8vw rgba(0, 0, 0, 0.22); background: radial-gradient(140% 150% at 50% 50%, transparent 68%, rgba(0, 0, 0, 0.34) 100%); }
    .museum__dive-scan { opacity: 0.4; }
  }

  @media (prefers-reduced-motion: reduce) {
    .museum__dive[data-phase='read'] .museum__paper-wrap,
    .museum__dive[data-phase='out'] .museum__paper-wrap,
    .museum__dive[data-phase='boot'] .museum__boot-line,
    .museum__dive[data-phase='boot'] .museum__boot-bloom,
    .museum__dive[data-phase='boot'] .museum__boot-noise,
    .museum__dive[data-phase='boot'] .museum__boot-roll,
    .museum__dive[data-phase='boot'] .museum__boot-log,
    .museum__dive:not([data-phase='off']) .museum__dive-roll,
    .museum__dive-cue-arrow { animation: none; }

    .museum__paper [data-part],
    .museum__paper [data-part].is-in { opacity: 1; animation: none; filter: none; transform: none; clip-path: none; }
    .museum__paper [data-part].is-in::after { display: none; }
    .museum.is-diving .museum__canvas { transition: none; transform: none; }
    .museum__dive[data-phase='zoom'] .museum__dive-veil { animation: none; opacity: 1; }
  }

  /* ---- Vintage-XP "Back" button ------------------------------------------
     Above the Knock-Knock house intro (z8) so it's usable on that screen too;
     tucked away during the fly-in so it doesn't hang over the door zoom. */
  .museum__back { position: absolute; top: clamp(1rem, 3vh, 1.8rem); left: clamp(1rem, 3vw, 1.8rem); z-index: 9; transition: opacity 0.3s ease; }
  .museum.is-knocking .museum__back { opacity: 0; pointer-events: none; }
  /* is-knocking never gets removed, so explicitly bring the button back once
     inside the gallery (this rule must come after the is-knocking one). */
  .museum.is-entered .museum__back { opacity: 1; pointer-events: auto; }

  .xp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.55rem;
    font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #10233b;
    text-decoration: none;
    background: linear-gradient(180deg, #fdfefe 0%, #eef2f6 46%, #d7e0ea 54%, #eaf0f6 100%);
    border: 1px solid #4a6a8f;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 2px 5px rgba(0, 0, 0, 0.35);
    transition: filter 0.12s ease, transform 0.06s ease;
  }

  .xp-btn:hover { filter: brightness(1.05) saturate(1.1); }
  .xp-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
  .xp-btn__glyph { font-size: 0.7rem; color: #1b5e20; line-height: 1; }

  /* ---- Custom adampointer cursor ----------------------------------------- */
  .museum__cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 42px;
    height: 42px;
    background: var(--museum-pointer) center / contain no-repeat;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.25s ease, width 0.2s ease, height 0.2s ease;
  }

  .museum__cursor.is-visible { opacity: 1; }
  .museum__cursor.is-over { width: 60px; height: 60px; }

  /* ---- Fallback grid (no WebGL / no JS): hidden once the scene runs ------- */
  .museum.is-webgl { height: 100vh; height: 100svh; }
  .museum.is-webgl .museum__fallback { display: none; }

  .museum:not(.is-webgl) .museum__canvas,
  .museum:not(.is-webgl) .museum__ui,
  .museum:not(.is-webgl) .museum__read { display: none; }

  .museum:not(.is-webgl) {
    height: auto;
    overflow: visible;
    background: #16311f;
  }

  .museum__fallback {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(5rem, 12vh, 8rem) clamp(1.2rem, 5vw, 4rem) 4rem;
  }

  .museum__fb-item { margin: 0; }

  .museum__fb-frame { position: relative; aspect-ratio: 760 / 999; }

  .museum__fb-img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: cover; background: #10130f; }

  .museum__fb-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }

  /* The same curtain the 3D frames get, hung over the whole framed picture.
     Sized off the frame's width so the rod overhangs it the way a real one
     does; `contain` keeps the artwork's proportions whatever the grid does. */
  .museum__fb-curtain {
    position: absolute;
    left: -18%;
    right: -18%;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1448 / 1086;
    background: var(--museum-curtain) center / contain no-repeat;
    z-index: 2;
  }

  .museum__fb-cap {
    margin-top: 0.7rem;
    font-family: var(--font-anemoia);
    font-size: 0.8rem;
    text-transform: lowercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }

  .museum__fb-cap span { color: rgba(255, 255, 255, 0.75); }

  .museum__fb-end { grid-column: 1 / -1; text-align: center; color: #fff; padding: 2rem 0; }
  .museum__fb-end h2 { font-family: var(--font-anemoia); text-transform: lowercase; }

  /* ---- Mobile ------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    /* Slightly smaller XP Back button on phones. */
    .xp-btn { gap: 0.4rem; padding: 0.35rem 0.8rem 0.4rem; font-size: 0.78rem; }

    /* The description panel is glued to the frame's projected rect, which is
       small on a phone — let long stories scroll instead of clipping. */
    .museum__read { overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-top: 2.6rem; }
    .museum__read-close { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
  }

  /* ---- Touch (no hover): the pill is pinned to the current frame ----------
     JS keeps it at the frame's bottom centre and relabels it "Close" while the
     description is open — so it must stay visible ABOVE the read veil (z 6),
     and the veil's own × goes away (the pill is the close control). */
  @media (hover: none) {
    .museum__frame-btn { z-index: 7; }
    .museum.is-reading .museum__frame-btn { opacity: 1; pointer-events: auto; }
    .museum__read-close { display: none; }
  }

  /* ---- Page chrome: full-screen immersion (hide announcement + header) --- */
  body:has(main[data-template='page.museum']) .announcement-bar,
  body:has(main[data-template='page.museum']) #header-component { display: none; }

  body:has(main[data-template='page.museum']) { background: #16311f; }
/* END_SECTION:anemoia-museum */

/* START_SECTION:anemoia-policy (INDEX:9) */
.apolicy {
    --ap-max: 1500px;
    --ap-ink: #16140f;
    --ap-ink-soft: #4b463d;
    --ap-on-space: #f6f3ec;
    --ap-card: rgba(241, 239, 233, 0.78);   /* #F1EFE9, translucent */
    --ap-line: rgba(22, 20, 15, 0.14);
    --ap-cta: var(--anemoia-cta, #fea500);
    --ap-card-edge: rgba(255, 255, 255, 0.4);
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
    color: var(--ap-on-space);
    font-family: var(--font-anemoia);
    padding: clamp(5.5rem, 12vh, 8rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vh, 4.5rem);
  }

  /* -- One centered card ------------------------------------------------- */
  .apolicy__card {
    max-width: 760px;
    margin: 0 auto;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ap-card-edge);
    border-radius: 20px;
    background: var(--ap-card);
    color: var(--ap-ink);
    padding: clamp(1.6rem, 3.5vw, 3rem);
  }

  .apolicy__kicker {
    margin: 0 0 0.6rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ap-ink-soft);
  }
  .apolicy__title {
    margin: 0 0 1.4rem;
    text-align: center;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  /* Long-form copy reads better left-aligned even though the card is centered. */
  .apolicy__body {
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--ap-ink-soft);
  }
  .apolicy__body h2,
  .apolicy__body h3 { color: var(--ap-ink); margin: 1.6rem 0 0.6rem; }
  .apolicy__body p { margin: 0 0 1rem; }
  .apolicy__body a { color: var(--ap-ink); text-decoration: underline; text-underline-offset: 3px; }
  .apolicy__body a:hover { color: var(--ap-cta); }
  .apolicy__body ul,
  .apolicy__body ol { margin: 0 0 1rem; padding-left: 1.2rem; }
  .apolicy__body li { margin: 0.2rem 0; }

  /* -- One-line footer (white over the video, same as Contact) ----------- */
  .apolicy__footer { max-width: var(--ap-max); margin: clamp(2rem, 5vh, 3.5rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(246, 243, 236, 0.25); }
  .apolicy__footer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .apolicy__footer-group { display: inline-flex; gap: 1rem; }
  .apolicy__footer-line a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
  }
  .apolicy__footer-line a:hover { opacity: 0.75; }
  .apolicy__footer-sep { color: #fff; opacity: 0.6; }

  /* -- LUNAR mode: dark card + light text (same as Contact / the PDP) ----- */
  html[data-anemoia-mode='lunar'] .apolicy {
    --ap-ink: #f3f0e8;
    --ap-ink-soft: #b9b3a5;
    --ap-card: rgba(18, 18, 24, 0.78);
    --ap-line: rgba(243, 240, 232, 0.16);
    --ap-card-edge: rgba(243, 240, 232, 0.14);
  }

  /* -- Page chrome: show the world (background) + light nav, like Contact. -- */
  body:has(main[data-template='page.legal']) .announcement-bar { display: none; }

  body:has(main[data-template='page.legal']) .header__underlay-closed,
  body:has(main[data-template='page.legal']) .header__underlay-open { background: transparent; }

  body:has(main[data-template='page.legal']) #header-component[transparent],
  body:has(main[data-template='page.legal']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }
/* END_SECTION:anemoia-policy */

/* START_SECTION:anemoia-product (INDEX:10) */
.apdp {
    --apdp-max: 1500px;
    /* The two cards sit in their own, narrower row than the related grid and
       the footer. Wide enough that the info card keeps the width it had before
       the resize (~610px), with the rest of the row going to the shots and to
       the channel between them. */
    --apdp-cards-max: 1320px;
    --apdp-ink: #16140f;          /* dark text inside the light cards */
    --apdp-ink-soft: #4b463d;
    --apdp-on-space: #f6f3ec;     /* light text on the video background */
    /* The mount around the shots stays the original grey. It has to read as a
       different colour from the photo: it is translucent so the world video
       comes through, and anything near-white next to a white-backdrop product
       shot just looks like a failed white rather than a frame. */
    --apdp-card-left: rgba(231, 229, 221, 0.78);  /* #E7E5DD, translucent so the world shows through */
    --apdp-card-right: rgba(241, 239, 233, 0.78);  /* #F1EFE9, translucent */
    --apdp-tile: #fafbf8;                          /* behind the shot itself, off-white */
    --apdp-line: rgba(22, 20, 15, 0.14);
    --apdp-cta: var(--anemoia-cta, #fea500);
    --apdp-border: #dedede;
    /* One height for every CTA in the column — Add to cart, Notify me and the
       Shop Pay wallet button all sit on it, in px because the wallet button is
       rendered by Shopify outside our root font size. */
    --apdp-cta-h: 54px;
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
    color: var(--apdp-on-space);
    font-family: var(--font-anemoia);
    padding: clamp(5.5rem, 12vh, 8rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vh, 4.5rem);
  }

  /* -- Two cards. Left scrolls with the page; right is sticky. -------------
     The shots take the larger share of a capped row, with a wide channel
     between the two cards so neither reads as a wall. The info card stays
     narrower than the images — it only has to hold a column of text. */
  .apdp__cards {
    max-width: var(--apdp-cards-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
    gap: clamp(2.2rem, 5vw, 5rem);
    align-items: start;
  }

  .apdp__pane {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    padding: clamp(0.9rem, 1.8vw, 1.5rem);
    color: var(--apdp-ink);
  }

  /* -- Left card: images -------------------------------------------------- */
  .apdp__pane--media { background: var(--apdp-card-left); }

  /* Desktop: one photo per row, stacked down the card (the page scroll moves
     them). Mobile overrides this to a swipe slider further down. */
  .apdp__gallery {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(0.4rem, 0.9vw, 0.9rem);
  }

  .apdp__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--apdp-tile);
    border-radius: 12px;
  }

  /* No hover on these — the shots sit still. */
  .apdp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .apdp__img--placeholder { background: var(--apdp-tile); }

  /* Slider dots (mobile only; built in JS). */
  .apdp__dots { display: none; }

  /* -- Sticky Add to cart: mobile only; a full-width black bar (no radius,
     no price) shown when the main CTA is scrolled out of view. ------------- */
  .apdp__sticky { display: none; }

  @media screen and (max-width: 749px) {
    .apdp__sticky {
      display: block;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }

    .apdp__sticky.is-visible { transform: translateY(0); }

    .apdp__sticky .apdp__sticky-add {
      width: 100%;
      min-height: 0;
      padding: 0.95rem;
      border: none;
      border-radius: 0;
      background: var(--anemoia-cta, #fea500);
      color: var(--anemoia-cta-ink, #fff);
      font-size: 0.82rem;
      letter-spacing: 0.14em;
    }

    /* Text-only bar: no cart image, keep the label visible during add. */
    .apdp__sticky-add .apdp__add-img { display: none; }
    .apdp__sticky-add.is-adding { gap: 0; }
    .apdp__sticky-add.is-adding .apdp__add-label { opacity: 1; max-width: none; overflow: visible; }

    /* Notify takes over the same bar for a sold-out size — the Add to cart bar
       exactly, only the text changes. */
    .apdp__sticky .apdp__sticky-notify {
      width: 100%;
      min-height: 0;
      padding: 0.95rem;
      border: none;
      border-radius: 0;
      background: var(--anemoia-cta, #fea500);
      color: var(--anemoia-cta-ink, #fff);
      font-size: 0.82rem;
      letter-spacing: 0.14em;
    }
    .apdp__sticky .apdp__sticky-notify:hover { transform: none; }
  }

  /* -- Right card: info + CTA (sticky so only the images scroll) ----------- */
  .apdp__pane--info {
    background: var(--apdp-card-right);
    position: sticky;
    top: clamp(5rem, 11vh, 7.5rem);
    align-self: start;
  }

  .apdp__info-inner { display: flex; flex-direction: column; gap: 1.2rem; }

  .apdp__title {
    margin: 0;
    font-size: clamp(1.4rem, 2.1vw, 2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }

  .apdp__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-anemoia);
    font-size: 1.5rem;
    color: var(--apdp-ink);
  }
  .apdp__price-was { font-family: var(--font-anemoia); font-size: 1rem; opacity: 0.5; text-decoration: line-through; }

  /* -- Options ------------------------------------------------------------ */
  .apdp__options { display: flex; flex-direction: column; gap: 1.1rem; }

  /* Breathing room under the size row — the low-stock label hangs below the
     chips on hover, so the CTA must not sit right against them. */
  .apdp__cta { margin-top: 1.5rem; }

  .apdp__option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
  }
  .apdp__option-name { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

  .apdp__sizeguide-link {
    padding: 0;
    border: none;
    background: none;
    color: var(--apdp-ink);
    font: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  /* Row gap leaves room for the low-stock label that hangs under a chip. */
  .apdp__values { display: flex; flex-wrap: wrap; gap: 1.6rem 0.45rem; }

  /* The mobile sticky bar's "Select your size" jumps here; the chips pulse once
     on arrival so the tap visibly lands. A ring rather than a border colour:
     the resting border differs between SOLAR and LUNAR, and animating it would
     flash the wrong colour in one of them. */
  .apdp__option.is-calling .apdp__value:not(.is-selected) { animation: apdp-call 1.2s ease; }

  @keyframes apdp-call {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0); }
    30%, 55% { box-shadow: 0 0 0 4px rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0.45); }
  }

  @media (prefers-reduced-motion: reduce) {
    .apdp__option.is-calling .apdp__value:not(.is-selected) { animation: none; }
  }

  /* Every size chip is the SAME circle. The width used to come from the label
     plus 0.9rem of side padding, so S-XL all sat on the 3rem floor while XXL's
     extra character pushed it out into an ellipse. Centre the label in a square
     instead, with only enough side padding to keep a long value off the border:
     anything up to ~4 characters stays a circle, and a genuinely long value
     ("One Size") still grows into a pill rather than overflowing. */
  .apdp__value {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0 0.35rem;
    border: 1.5px solid #ff6bb7;
    border-radius: 999px;
    background: #fff;
    color: var(--apdp-ink);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }
  .apdp__value:hover { border-color: var(--apdp-cta); }
  .apdp__value.is-selected { background: var(--apdp-cta); border-color: var(--apdp-border); color: var(--anemoia-cta-ink, #fff); }
  .apdp__value.is-unavailable { opacity: 0.35; text-decoration: line-through; }
  /* A sold-out size is still selectable — it is how you reach "Notify me" — so
     the chosen one has to stay readable rather than fade out with the rest. */
  .apdp__value.is-unavailable.is-selected { opacity: 0.8; }

  /* -- Low stock ("last few left" on this size) ---------------------------
     A gold blip pulses in the top-right of the chip from the moment JS marks
     it off the variant inventory — no red ring, nothing that reads as an
     error. The label hangs under the chip on hover (plus keyboard focus, so
     it is reachable without a mouse) and stays put once the size is chosen.
     A healthy size shows neither. */
  .apdp__value-blip {
    /* RGB channels rather than a hex so the halo below can reuse them at a
       lower alpha — and so the selected chip can swap the whole pair. */
    --apdp-blip: 255, 223, 70;
    display: none;
    position: absolute;
    top: 0.45rem;
    right: 0.52rem;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: rgb(var(--apdp-blip));
    pointer-events: none;
  }

  .apdp__value.is-low .apdp__value-blip {
    display: block;
    animation: apdp-blip 1.9s ease-out infinite;
  }

  /* The halo is a box-shadow, not a second element: it can grow past the chip
     without ever taking part in its layout. */
  @keyframes apdp-blip {
    0% { box-shadow: 0 0 0 0 rgba(var(--apdp-blip), 0.6); }
    70% { box-shadow: 0 0 0 0.45rem rgba(var(--apdp-blip), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--apdp-blip), 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .apdp__value.is-low .apdp__value-blip { animation: none; }
  }

  /* A chosen chip is filled with the CTA colour, which the gold blip would sink into. */
  .apdp__value.is-low.is-selected .apdp__value-blip { --apdp-blip: 255, 255, 255; }

  .apdp__value-low {
    display: none;
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--apdp-ink-soft);
    pointer-events: none;
  }

  /* Desktop sits closer to the screen than a phone does, so the same label
     reads a size down there. */
  @media screen and (min-width: 750px) {
    .apdp__value-low {
      font-size: 0.62rem;
      letter-spacing: 0.07em;
    }
  }

  .apdp__value.is-low:hover .apdp__value-low,
  .apdp__value.is-low:focus-visible .apdp__value-low { display: block; }

  /* Once a nearly-gone size is CHOSEN the label stays put, pointer or touch
     alike. On touch this is the only way it can be read (no hover, and
     :focus-visible does not fire on a tap). */
  .apdp__value.is-low.is-selected .apdp__value-low { display: block; }

  /* -- Add to cart (homepage / collection CTA: pill + cart image) ----
     "Notify me when available" is deliberately the SAME button — same size,
     fill, border, radius and type — differing only in its text and in having
     no cart image, so both share this rule set. */
  .apdp__add,
  .apdp__notify {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: var(--apdp-cta-h);
    padding: 0.5rem 1.6rem;
    border: 1.5px solid var(--apdp-border);
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.25s ease, transform 0.2s ease;
  }
  .apdp__add:hover,
  .apdp__notify:hover { background: var(--anemoia-cta-hover, #e89400); transform: translateY(-1px); }
  .apdp__add[disabled] { opacity: 0.45; cursor: not-allowed; }

  /* inline-flex would otherwise beat the [hidden] default of display: none. */
  .apdp__add[hidden],
  .apdp__notify[hidden] { display: none; }

  .apdp__add-label { transition: opacity 0.2s ease, max-width 0.25s ease; max-width: 16rem; }

  .apdp__add-img {
    display: block;
    width: 1.9rem;
    height: 1.9rem;
    object-fit: contain;
    transition: width 0.25s ease, height 0.25s ease;
  }

  /* Clicked feedback: label collapses, cart image swells + pops, centred. */
  .apdp__add.is-adding { gap: 0; }
  .apdp__add.is-adding .apdp__add-label { opacity: 0; max-width: 0; overflow: hidden; }
  .apdp__add.is-adding .apdp__add-img { width: 2.3rem; height: 2.3rem; animation: apdp-cart-pop 0.5s ease; }
  @keyframes apdp-cart-pop {
    0% { transform: scale(0.9); }
    45% { transform: scale(1.35); }
    100% { transform: scale(1); }
  }

  /* Already signed up for this size: keeps the confirmation on screen. */
  .apdp__notify[disabled] { opacity: 0.55; cursor: default; transform: none; }
  .apdp__notify[disabled]:hover { background: var(--anemoia-cta, #fea500); transform: none; }

  /* -- Buy with Shop / More payment options ------------------------------- */
  /* Tight against Add to cart: the two CTAs read as one stacked pair. */
  .apdp__buyform { margin-top: 0.3rem; }
  /* Sold out: a wallet checkout that cannot complete is worse than no button. */
  .apdp__buyform.is-unavailable { display: none; }

  /* The wallet button renders in Shopify's shadow DOM, so its shape comes from
     the accelerated-checkout custom properties rather than a selector of ours.
     They MUST be set on the <shopify-accelerated-checkout> element itself:
     base.css sets them there too, and a rule on the element beats one merely
     inherited from this wrapper. Geometry only — Shop's brand purple is
     deliberately left alone. The values match Add to cart, so the two CTAs are
     the same height with the same pill corners. */
  /* Do NOT clip this element to a pill: it wraps the wallet button AND the
     "More payment options" link, so a rounded overflow:hidden here is applied
     to a box far taller than the button and slices the button's top corners
     off on the diagonal. The custom property below is what rounds the button;
     27px is half the 54px CTA height, i.e. the same pill as Add to cart. */
  .apdp__dynamic shopify-accelerated-checkout {
    display: block;
    margin: 0;
    --shopify-accelerated-checkout-button-block-size: var(--apdp-cta-h);
    --shopify-accelerated-checkout-button-inline-size: 100%;
    --shopify-accelerated-checkout-button-border-radius: 27px;
    --shopify-accelerated-checkout-inline-alignment: center;
  }

  /* Shopify's own button is inline-width by default; both the wrapper and the
     button have to be stretched or it sits shrink-to-fit against the left. */
  .apdp__dynamic .shopify-payment-button { display: block; width: 100%; margin: 0; }

  .apdp__dynamic .shopify-payment-button__button {
    display: block;
    width: 100%;
    min-height: var(--apdp-cta-h);
    border-radius: 999px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  /* Fallback when Shop Pay is unavailable to the buyer: same pill as the main
     CTA but outlined, so it never reads as a second Add to cart. */
  .apdp__dynamic .shopify-payment-button__button--unbranded {
    background: transparent;
    color: var(--apdp-ink);
    border: 1.5px solid var(--apdp-ink);
    transition: opacity 0.25s ease, transform 0.2s ease;
  }
  .apdp__dynamic .shopify-payment-button__button--unbranded:hover {
    background: transparent;
    opacity: 0.72;
    transform: translateY(-1px);
  }

  /* Plain underlined text, per the reference. */
  .apdp__dynamic .shopify-payment-button__more-options {
    display: block;
    width: 100%;
    margin-top: 0.55rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.9rem;
    color: var(--apdp-ink);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    opacity: 0.9;
  }
  .apdp__dynamic .shopify-payment-button__more-options:hover { opacity: 1; }
  .apdp__dynamic .shopify-payment-button__more-options[aria-hidden='true'] { display: none; }

  /* -- Info accordions ---------------------------------------------------- */
  .apdp__accordions { display: flex; flex-direction: column; border-top: 1px solid var(--apdp-line); margin-top: 0.3rem; }
  .apdp__accordion { border-bottom: 1px solid var(--apdp-line); }
  .apdp__accordion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
    color: var(--apdp-ink);
    transition: color 0.2s ease;
  }
  /* The icon is two bars painted with the head's own colour, so it follows the
     label rather than staying dark while the text turns. */
  .apdp__accordion-head:hover,
  .apdp__accordion-head:focus-visible { color: #ff6bb7; }
  .apdp__accordion-head:hover .apdp__accordion-icon::before,
  .apdp__accordion-head:hover .apdp__accordion-icon::after,
  .apdp__accordion-head:focus-visible .apdp__accordion-icon::before,
  .apdp__accordion-head:focus-visible .apdp__accordion-icon::after { background: #ff6bb7; }
  .apdp__accordion-head::-webkit-details-marker { display: none; }
  .apdp__accordion-icon { position: relative; width: 13px; height: 13px; flex: 0 0 auto; }
  .apdp__accordion-icon::before,
  .apdp__accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    background: var(--apdp-ink);
    transform: translate(-50%, -50%);
    transition: opacity 0.25s ease;
  }
  .apdp__accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .apdp__accordion[open] .apdp__accordion-icon::after { opacity: 0; }
  .apdp__accordion-body { padding: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.6; color: var(--apdp-ink-soft); }
  .apdp__accordion-body a { color: var(--apdp-ink); }
  .apdp__accordion-body ul { margin: 0; padding-left: 1.1rem; }
  .apdp__accordion-body li { margin: 0.15rem 0; }

  /* -- "You might also like" — its own section ---------------------------- */
  .apdp__related { max-width: var(--apdp-max); margin: clamp(2.5rem, 6vh, 4.5rem) auto 0; }
  .apdp__related-title {
    margin: 0 0 1.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }
  .apdp__related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.6rem, 1.5vw, 1.4rem); }

  /* The grid holds every candidate; only four are ever on screen. No JS: the
     first four. With it: the four the shuffle marked (anemoia-product.js). */
  .apdp__related-grid > .apdp__rcard:nth-child(n + 5) { display: none; }
  .apdp__related-grid.is-shuffled > .apdp__rcard { display: none; }
  .apdp__related-grid.is-shuffled > .apdp__rcard.is-shown { display: block; }

  .apdp__rcard { color: var(--apdp-on-space); }
  .apdp__rcard-text { display: block; text-decoration: none; color: inherit; }

  /* Back to the original translucent fill, so the world video reads through
     the card behind the shot. Only what sits on top of it changed. */
  .apdp__rcard-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 14px;
    margin-bottom: 0.6rem;
  }

  .apdp__rcard-link { display: block; position: absolute; inset: 0; }

  /* Every shot stacked in place; only .is-active is shown, and the swap is a
     cross-fade rather than a jump. */
  .apdp__rcard-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .apdp__rcard-img.is-active { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .apdp__rcard-img { transition: none; }
  }

  /* Arrows: on a mouse they fade in with the card; on touch, where there is no
     hover, they stay visible so the images can still be stepped through. */
  .apdp__rcard-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(250, 251, 248, 0.88);
    color: #16140f;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background 0.2s ease;
  }

  .apdp__rcard-arrow svg { width: 16px; height: 16px; }
  .apdp__rcard-arrow--prev { left: 0.5rem; }
  .apdp__rcard-arrow--next { right: 0.5rem; }
  .apdp__rcard-arrow:hover { background: #fafbf8; }
  .apdp__rcard-arrow:focus-visible { opacity: 1; outline: 2px solid var(--apdp-cta); outline-offset: 2px; }

  @media (hover: hover) {
    .apdp__rcard:hover .apdp__rcard-arrow { opacity: 1; }
  }

  @media (hover: none) {
    .apdp__rcard-arrow { opacity: 0.9; }
  }

  .apdp__rcard-title { margin: 0 0 0.15rem; font-size: 0.95rem; font-weight: 600; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6); }
  .apdp__rcard-price { margin: 0; font-size: 0.95rem; opacity: 0.85; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6); }

  /* -- One-line footer (bold white so it reads over the video) ------------ */
  .apdp__footer { max-width: var(--apdp-max); margin: clamp(2rem, 5vh, 3.5rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(246, 243, 236, 0.25); }
  .apdp__footer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .apdp__footer-group { display: inline-flex; gap: 1rem; }
  .apdp__footer-line a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
  }
  .apdp__footer-line a:hover { opacity: 0.75; }
  .apdp__footer-sep { color: #fff; opacity: 0.6; }

  /* -- Size guide dialog (light, matching the cards) ---------------------- */
  .apdp__sizeguide {
    width: min(46rem, 92vw);
    max-height: 86vh;
    padding: 0;
    border: 1px solid rgba(22, 20, 15, 0.25);
    border-radius: 14px;
    background: #f1efe9;
    color: var(--apdp-ink);
    overflow: auto;
  }
  .apdp__sizeguide::backdrop { background: rgba(0, 0, 0, 0.55); }
  .apdp__sizeguide-inner { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem); }
  .apdp__sizeguide-close { position: absolute; top: 0.8rem; right: 1.1rem; border: none; background: none; color: var(--apdp-ink); font-size: 1.9rem; line-height: 1; cursor: pointer; }
  .apdp__sizeguide-title { margin: 0 0 1.2rem; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
  .apdp__sizeguide-img { width: 100%; height: auto; margin-bottom: 1.2rem; }
  .apdp__sizeguide-text table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
  .apdp__sizeguide-text th,
  .apdp__sizeguide-text td { padding: 0.55rem; border: 1px solid rgba(22, 20, 15, 0.2); text-align: center; font-size: 1rem; }
  .apdp__sizeguide-text th { background: #e7e5dd; font-weight: 700; }
  .apdp__sizeguide-text p { font-size: 1rem; color: var(--apdp-ink-soft); margin: 0; }

  /* -- Mobile ------------------------------------------------------------- */
  @media screen and (max-width: 749px) {
    .apdp__cards { grid-template-columns: 1fr; }
    .apdp__pane--info { position: static; }
    .apdp__related-grid { grid-template-columns: repeat(2, 1fr); }

    /* Images become a horizontal swipe slider (one photo per view, snap). */
    .apdp__gallery {
      display: flex;
      grid-template-columns: none;
      gap: 0.6rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

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

    .apdp__media {
      flex: 0 0 100%;
      scroll-snap-align: center;
    }

    .apdp__dots {
      display: flex;
      justify-content: center;
      gap: 0.4rem;
      padding-top: 0.7rem;
    }

    .apdp__dot {
      width: 6px;
      height: 6px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: var(--apdp-ink);
      opacity: 0.3;
      cursor: pointer;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .apdp__dot.is-active {
      opacity: 0.9;
      transform: scale(1.35);
    }
  }

  /* -- LUNAR mode: dark cards + light text (CTA + selected size keep their fill) */
  html[data-anemoia-mode='lunar'] .apdp {
    --apdp-ink: #f3f0e8;
    --apdp-ink-soft: #b9b3a5;
    --apdp-card-left: rgba(18, 18, 24, 0.78);
    --apdp-card-right: rgba(18, 18, 24, 0.78);
    --apdp-tile: #1c1c24;
    --apdp-line: rgba(243, 240, 232, 0.16);
  }
  html[data-anemoia-mode='lunar'] .apdp__pane { border-color: rgba(243, 240, 232, 0.14); }

  /* Size chips: dark fill + light text so they read on the dark card.
     Exclude .is-selected so the CTA colour selected fill still wins. */
  html[data-anemoia-mode='lunar'] .apdp__value:not(.is-selected) {
    background: rgba(10, 10, 14, 0.5);
    border-color: #ff6bb7;
    color: var(--apdp-ink);
  }
  html[data-anemoia-mode='lunar'] .apdp__value:not(.is-selected):hover { border-color: var(--apdp-cta); }
  /* .is-selected keeps the CTA fill / dark ink from the base rule. */

  /* Size-guide dialog becomes a dark panel too. */
  html[data-anemoia-mode='lunar'] .apdp__sizeguide {
    background: #15151b;
    border-color: rgba(243, 240, 232, 0.25);
  }
  html[data-anemoia-mode='lunar'] .apdp__sizeguide-text th { background: rgba(243, 240, 232, 0.1); }
  html[data-anemoia-mode='lunar'] .apdp__sizeguide-text th,
  html[data-anemoia-mode='lunar'] .apdp__sizeguide-text td { border-color: rgba(243, 240, 232, 0.2); }

  /* -- Page chrome: show the world (background) + sound control, light nav -- */
  body:has(main[data-template='product']) .announcement-bar { display: none; }

  body:has(main[data-template='product']) .header__underlay-closed,
  body:has(main[data-template='product']) .header__underlay-open { background: transparent; }

  /* Light nav over the (dark) video background, matching the collection room. */
  body:has(main[data-template='product']) #header-component[transparent],
  body:has(main[data-template='product']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }
/* END_SECTION:anemoia-product */

/* START_SECTION:anemoia-waitlist (INDEX:11) */
.awl {
    --ac-max: 1500px;
    --ac-ink: #16140f;
    --ac-ink-soft: #4b463d;
    --ac-on-space: #f6f3ec;
    --ac-card-left: rgba(241, 239, 233, 0.92);
    --ac-card-right: rgba(231, 229, 221, 0.92);
    --ac-tile: #dcd9cf;
    --ac-line: rgba(22, 20, 15, 0.14);
    --ac-cta: var(--anemoia-cta, #fea500);
    --ac-border: #dedede;
    --ac-input-bg: #dcd9cf;
    --ac-input-border: #c7c2b5;
    --ac-input-ink: var(--ac-ink);
    --ac-card-edge: rgba(255, 255, 255, 0.4);
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent;
    color: var(--ac-on-space);
    font-family: var(--font-anemoia);
    padding: clamp(5.5rem, 12vh, 8rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 6vh, 4.5rem);
  }

  /* -- Two cards: form left, image right --------------------------------- */
  .awl__cards {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(1rem, 2.5vw, 2.2rem);
    align-items: start;
  }

  .awl__pane {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--ac-card-edge);
    border-radius: 20px;
    color: var(--ac-ink);
  }

  .awl__pane--form {
    background: var(--ac-card-left);
    padding: clamp(1.4rem, 2.6vw, 2.4rem);
  }
  .awl__form-inner { display: flex; flex-direction: column; gap: 1.1rem; }

  .awl__kicker {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-ink-soft);
  }
  .awl__title {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-transform: uppercase;
  }
  .awl__intro { font-size: 1.08rem; line-height: 1.6; color: var(--ac-ink-soft); }
  .awl__intro p { margin: 0 0 0.6rem; }

  /* The form gained a fourth question, so the fields need more air between them to
     stay readable as a stack of separate asks rather than one dense block. */
  .awl__form { display: flex; flex-direction: column; gap: 1.5rem; margin: 0.4rem 0 0; }
  .awl__field { display: flex; flex-direction: column; gap: 0.55rem; border: 0; padding: 0; margin: 0; }
  .awl__label {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ac-ink);
    padding: 0;
  }

  /* Honeypot: visually gone but present for bots. */
  .awl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Fields pinned across hover/focus/autofill (raise specificity over base.css). */
  .awl .awl__input,
  .awl .awl__input:hover,
  .awl .awl__input:focus,
  .awl .awl__input:active {
    width: 100%;
    padding: 0.9rem 1.05rem;
    border: 1.5px solid var(--ac-input-border);
    border-radius: 12px;
    background-color: var(--ac-input-bg);
    color: var(--ac-input-ink);
    font: inherit;
    /* Over 1rem on purpose: iOS Safari zooms the page on focus below 16px. */
    font-size: 1.05rem;
    transition: border-color 0.15s ease;
  }
  .awl .awl__input::placeholder { color: #6f6a5f; opacity: 0.7; }
  .awl .awl__input:focus { outline: none; border-color: var(--ac-cta); }
  .awl .awl__input:-webkit-autofill,
  .awl .awl__input:-webkit-autofill:hover,
  .awl .awl__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ac-input-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ac-input-bg) inset;
    box-shadow: 0 0 0 1000px var(--ac-input-bg) inset;
    caret-color: var(--ac-input-ink);
  }

  /* -- "Do you got swag?" Yes / No pills ---------------------------------- */
  .awl__choice { display: flex; gap: 0.5rem; }
  .awl__choice-opt { flex: 0 0 auto; cursor: pointer; }
  .awl__choice-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .awl__choice-pill {
    display: block;
    min-width: 4.75rem;
    padding: 0.6rem 1.3rem;
    border: 1.5px solid var(--ac-input-border);
    border-radius: 12px;
    background: var(--ac-input-bg);
    color: var(--ac-ink);
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .awl__choice-opt:hover .awl__choice-pill { border-color: var(--ac-cta); }
  .awl__choice-opt input:checked + .awl__choice-pill {
    background: var(--ac-cta);
    border-color: var(--ac-cta);
    color: var(--anemoia-cta-ink, #fff);
  }
  .awl__choice-opt input:focus-visible + .awl__choice-pill { outline: 2px solid var(--ac-cta); outline-offset: 2px; }

  /* Variation chips read exactly like the Yes/No ones above: nothing is marked
     until it's picked, so browsing the carousel never looks like an answer. */
  .awl__choice--variation { flex-wrap: wrap; }
  .awl__choice-hint { margin: 0.1rem 0 0; font-size: 0.72rem; line-height: 1.5; color: var(--ac-ink-soft); }

  /* -- "How much would you pay?" range slider ---------------------------- */
  .awl__field--range { gap: 0.5rem; }
  .awl__price-out {
    align-self: flex-start;
    font-family: var(--font-anemoia);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--ac-ink);
  }
  .awl__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ac-cta) var(--awl-fill, 25%), var(--ac-input-border) var(--awl-fill, 25%));
    outline: none;
    cursor: pointer;
  }
  .awl__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ac-cta);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  .awl__range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ac-cta);
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  .awl__range:focus-visible { box-shadow: 0 0 0 3px rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0.4); }
  .awl__range-scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--ac-ink-soft);
  }

  /* -- Status messages --------------------------------------------------- */
  .awl__status {
    margin: 0;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.98rem;
    line-height: 1.5;
  }
  .awl__status[hidden] { display: none; }
  /* On success, collapse the form to just the success note. */
  .awl__form.is-done > *:not(.awl__success) { display: none; }
  .awl__success { background: rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0.16); border: 1px solid rgba(var(--anemoia-cta-rgb, 254, 165, 0), 0.5); color: var(--anemoia-cta-deep, #6a4a18); }
  .awl__error { background: rgba(168, 50, 50, 0.12); border: 1px solid rgba(168, 50, 50, 0.4); color: #7a2222; }

  /* -- Submit (CTA pill) ------------------------------------------ */
  .awl__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    margin-top: 0.3rem;
    padding: 1rem 1.6rem;
    border: 1.5px solid var(--ac-border);
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, opacity 0.2s ease;
  }
  .awl__submit:hover { background: var(--anemoia-cta-hover, #e89400); transform: translateY(-1px); }
  .awl__submit[disabled] { opacity: 0.55; cursor: default; transform: none; }

  .awl__consent {
    margin: 0.2rem 0 0;
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--ac-ink-soft);
  }
  .awl__consent a { color: var(--ac-ink); text-decoration: underline; text-underline-offset: 2px; }

  /* -- Right card: image + hint line ------------------------------------- */
  .awl__pane--media {
    background: var(--ac-card-right);
    padding: clamp(1.4rem, 2.4vw, 2rem);
  }
  .awl__media-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
  .awl__figure {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }
  /* Once JS loads the product's images the figure becomes a fixed-ratio stage
     for the crossfading layers. Clickable everywhere (one image per click). */
  .awl__figure.is-dynamic { aspect-ratio: 4 / 5; cursor: pointer; }
  .awl__img {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    height: auto;
    object-fit: contain;
    display: block;
    background: transparent;
    filter: grayscale(100%) contrast(0.92) brightness(0.95);
    opacity: 0.85;
  }
  .awl__img--placeholder { aspect-ratio: 3 / 4; }

  /* Dynamic product images: stacked layers that crossfade on click. Greyed at
     rest (coming-soon), full colour while hovering — hover only ever changes the
     colour, never the picture. */
  .awl__gimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.4s ease;
    filter: grayscale(100%) contrast(0.92) brightness(0.95);
  }
  .awl__gimg.is-shown { opacity: 1; }
  /* Reveal colour on desktop hover and after a tap on touch (no :hover there). The
     one thing hover still does; the image itself only steps on a click. */
  .awl__figure.is-dynamic:hover .awl__gimg,
  .awl__figure.is-touched .awl__gimg { filter: none; }
  /* -- Variation carousel ------------------------------------------------ */
  /* Arrow / stage / arrow as a flex row rather than arrows overlaid on the figure:
     an overlaid arrow sits inside the figure's pointer box, so a click on it would
     also step the figure's images and light it up on hover. */
  .awl__carousel { display: flex; align-items: center; justify-content: center; gap: 0.2rem; width: 100%; }
  /* An author `display` beats [hidden]'s UA `display: none`. Without these two the
     page would paint EVERY listed product's carousel and question until JS pruned
     them. Same reason .awl__field--variation is repeated here: .awl__field is flex. */
  .awl__carousel[hidden],
  .awl__field--variation[hidden] { display: none; }
  /* The classic figure now sits in a wrapper so it can be hidden as a unit; the
     wrapper is the flex item, so it has to carry the width the figure used to. */
  .awl__classic { width: 100%; }
  .awl__stage { position: relative; flex: 1 1 auto; width: 100%; max-width: 300px; aspect-ratio: 4 / 5; }
  /* flex: 1 1 auto matters — between 750px and ~950px the media pane is the narrow
     1fr column, and a fixed 300px stage plus two arrows overflows it. */

  /* Doubled class on purpose: the ≤749px block below re-caps .awl__figure for the
     classic image, and at equal specificity that later rule would clamp an
     inset-0 slide to 240px and strand it against the left edge of the stage. */
  .awl__figure.awl__figure--slide {
    position: absolute;
    inset: 0;
    margin: 0;
    max-width: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.32s ease;
  }
  .awl__figure--slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

  /* Same chevron vocabulary as the craving hero's side arrows, ink-coloured for the
     light card and under its own class names so the two never share rules. */
  /* Glyph only — the PREV/NEXT wording the hero carries would crowd a 300px card,
     and the buttons keep their aria-labels, so nothing is lost for a screen reader. */
  .awl__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0.4rem 0.35rem;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ac-ink-soft);
    opacity: 0.75;
    transition: opacity 0.2s ease;
  }
  .awl__arrow:hover,
  .awl__arrow:focus-visible { opacity: 1; }
  .awl__arrow:focus-visible { outline: 2px solid var(--ac-cta); outline-offset: 2px; border-radius: 8px; }
  .awl__arrow-glyph {
    display: block;
    font-size: 2rem;
    line-height: 1;
    animation: awl-nudge 1.4s ease-in-out infinite;
  }
  .awl__arrow--prev .awl__arrow-glyph { animation-name: awl-nudge-prev; }
  /* The prev mirror is repeated inside the keyframes: an animated transform replaces
     a static one outright, so scaleX(-1) set on the element alone would be dropped. */
  @keyframes awl-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
  @keyframes awl-nudge-prev { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(5px); } }

  /* A dead control is worse than a late one: the arrows appear once JS has wired them. */
  .awl__carousel:not(.is-ready) .awl__arrow { visibility: hidden; }

  .awl__variation-name {
    margin: 0;
    text-align: center;
    font-family: var(--font-anemoia);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ac-ink-soft);
  }

  .awl__coming-txt--mobile { display: none; }
  /* A pointer that can't hover gets the tap wording whatever the width is. */
  @media (hover: none) {
    .awl__coming-txt--desktop { display: none; }
    .awl__coming-txt--mobile { display: inline; }
  }
  .awl__coming {
    margin: 0;
    font-family: var(--font-anemoia);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ac-ink-soft);
  }
  .awl__media-note {
    margin: 0;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ac-ink-soft);
  }

  /* -- One-line footer (white over the video, same as the PDP) ----------- */
  .awl__footer { max-width: var(--ac-max); margin: clamp(2rem, 5vh, 3.5rem) auto 0; padding-top: 1.4rem; border-top: 1px solid rgba(246, 243, 236, 0.25); }

  /* -- Mobile ------------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    .awl__cards { grid-template-columns: 1fr; }
    /* Product card FIRST on mobile: the variations are the thing being asked about,
       so they have to be seen before the question. Done with `order` rather than the
       theme's usual duplicate-markup-and-display-swap, because duplicating this pane
       would duplicate the variationPref radios into two groups fighting over one name.
       Cost: DOM order stays form-first (right for desktop and for the 1.5fr/1fr grid),
       so on mobile tab order reaches the form before the card above it. The chips give
       a keyboard path to pick a variation without touching the arrows. */
    .awl__pane--media { order: -1; }
    .awl__figure { max-width: 240px; }
    .awl__img { max-width: 220px; }
    /* The stage carries the width on the carousel path, not the figure. */
    .awl__stage { max-width: 240px; }
    .awl__coming-txt--desktop { display: none; }
    .awl__coming-txt--mobile { display: inline; }
    .awl__carousel { gap: 0; }
    .awl__arrow { min-width: 44px; min-height: 44px; }
    .awl__arrow-glyph { font-size: 1.7rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .awl__arrow-glyph { animation: none; }
    /* Without the animation the static mirror has to carry the prev arrow. */
    .awl__arrow--prev .awl__arrow-glyph { transform: scaleX(-1); }
    .awl__figure--slide { transition: none; }
    .awl__gimg { transition: none; }
  }

  /* -- LUNAR mode: dark cards + light text (CTA keeps its colour) ------------- */
  html[data-anemoia-mode='lunar'] .awl {
    --ac-ink: #f3f0e8;
    --ac-ink-soft: #b9b3a5;
    --ac-card-left: rgba(18, 18, 24, 0.78);
    --ac-card-right: rgba(18, 18, 24, 0.78);
    --ac-tile: #1c1c24;
    --ac-line: rgba(243, 240, 232, 0.16);
    --ac-input-bg: #dcd9cf;
    --ac-input-ink: #16140f;
    --ac-input-border: rgba(243, 240, 232, 0.3);
    --ac-card-edge: rgba(243, 240, 232, 0.14);
  }
  /* Choice pills read dark text on the grey fill in both modes. */
  html[data-anemoia-mode='lunar'] .awl .awl__choice-pill { color: #16140f; }

  /* Status messages: the translucent tints vanish on the dark lunar cards, so
     use solid fills with white text (red for errors, the CTA colour for success). */
  html[data-anemoia-mode='lunar'] .awl .awl__error {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
  }
  html[data-anemoia-mode='lunar'] .awl .awl__success {
    background: var(--ac-cta);
    border-color: var(--ac-cta);
    color: var(--anemoia-cta-ink, #fff);
  }

  /* -- Page chrome: show the world (background) + light nav, like the PDP - */
  body:has(main[data-template='page.waitlist']) .announcement-bar { display: none; }

  body:has(main[data-template='page.waitlist']) .header__underlay-closed,
  body:has(main[data-template='page.waitlist']) .header__underlay-open { background: transparent; }

  body:has(main[data-template='page.waitlist']) #header-component[transparent],
  body:has(main[data-template='page.waitlist']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }
/* END_SECTION:anemoia-waitlist */

/* START_SECTION:anemoia-world-page (INDEX:12) */
/* ---- Curved CRT "glass" over the whole viewport (after the dive) ---------
     Same glass as the About page: it only fades in once inside the screen (or in
     the static fallback), so the room phase stays clean. Fixed + pointer-events
     none, so it wraps the desktop without blocking the folder clicks. */
  .about__crt {
    position: fixed;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .anemoia-about.about--live[data-state="inside"] .about__crt,
  .anemoia-about.about--static .about__crt { opacity: 1; }

  /* Tube curvature: a strong full-screen vignette darkens toward the edges so
     the flat panel reads as a bulged CRT. */
  .about__crt-curve {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 5vw rgba(0, 0, 0, 0.3);
    background: radial-gradient(132% 142% at 50% 50%, transparent 62%, rgba(0, 0, 0, 0.42) 100%);
  }

  /* When the WebGL curvature pass is running it draws the vignette/scanlines, so
     drop the CSS ones to avoid doubling. */
  .about__crt.gl-on .about__crt-curve,
  .about__crt.gl-on .about__crt-scan,
  .about__crt.gl-on .about__crt-flicker { display: none; }

  /* Soft monochrome glare off the curved glass (top + bottom). */
  .about__crt-glare {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(78% 40% at 50% -12%, rgba(255, 255, 255, 0.08), transparent 62%),
      radial-gradient(64% 32% at 50% 112%, rgba(255, 255, 255, 0.04), transparent 62%);
    mix-blend-mode: screen;
  }

  .about__crt-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.32) 0,
      rgba(0, 0, 0, 0.32) 1px,
      transparent 2px,
      transparent 3px
    );
    opacity: 0.55;
  }

  /* Rolling shadow band — the classic CRT vertical roll. */
  .about__crt-flicker {
    position: absolute;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0.6;
    animation: about-roll 8s linear infinite;
  }

  @keyframes about-roll {
    0% { transform: translateY(-60%); }
    100% { transform: translateY(280%); }
  }

  /* WebGL curvature pass canvas (shown only once the shader is running). */
  .about__crt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
  }

  .about__crt.gl-on .about__crt-canvas { display: block; }

  /* (world-os desktop + wa__bg backdrop CSS removed — the desktop lives on
     its own page now: sections/anemoia-desktop.liquid.) */

  /* ---- The archive (floats over the backdrop; light text) ----------------- */
  .wa {
    --wa-ink: #f6f3ec;
    --wa-soft: rgba(246, 243, 236, 0.62);
    --wa-rule: rgba(246, 243, 236, 0.22);
    --wa-accent: #ffce45;
    background: transparent;
    color: var(--wa-ink);
    font-family: var(--font-anemoia);
  }

  .wa__inner {
    position: relative;
    z-index: 1;
    max-width: 96rem;
    margin: 0 auto;
    padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 5vw, 4rem) clamp(3rem, 8vw, 6rem);
    min-height: 100vh;
    min-height: 100svh;
  }

  /* Top row: eyebrow. */
  .wa__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-bottom: clamp(1.5rem, 5vw, 3rem);
  }

  .wa__eyebrow {
    font-family: var(--font-anemoia);
    font-size: clamp(0.66rem, 0.95vw, 0.78rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
    color: var(--wa-soft);
  }

  /* Big lowercase title (omnee). */
  .wa__title {
    margin: 0;
    font-family: var(--font-anemoia);
    font-weight: 600;
    font-size: clamp(2.6rem, 9vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: lowercase;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55);
  }

  .wa__intro {
    margin: clamp(1rem, 2vw, 1.6rem) 0 0;
    max-width: 42rem;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.55;
    color: var(--wa-soft);
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
  }

  /* Aligned grid of bordered, floating cards. */
  .wa__grid {
    margin: clamp(2.2rem, 5vw, 4rem) 0 0;
    display: grid;
    gap: clamp(0.7rem, 1.6vw, 1.3rem);
  }

  .wa__grid--cols-1 { grid-template-columns: 1fr; }
  .wa__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .wa__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .wa__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

  @media (max-width: 1200px) {
    .wa__grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 989px) {
    .wa__grid--cols-3,
    .wa__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 749px) {
    .wa__grid--cols-2 { grid-template-columns: 1fr; }
    .wa__grid--cols-3,
    .wa__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 479px) {
    .wa__grid--cols-2,
    .wa__grid--cols-3,
    .wa__grid--cols-4 { grid-template-columns: 1fr; }
  }

  /* -- Mobile dive intro (same behaviour as the About page): centred text, a
     "Tap to enter" button, and the camcorder LCD (world video) centred below.
     Scoped to page.world so it wins over the shared anemoia-dive.css base. -- */
  body:has(main[data-template='page.world']) .about__enter--tap { display: none; }

  @media screen and (max-width: 749px) {
    body:has(main[data-template='page.world']) .about__intro {
      align-items: flex-start;
      justify-content: flex-start;
    }

    body:has(main[data-template='page.world']) .about__intro-inner {
      max-width: none;
      width: 100%;
      margin-left: 0;
      padding: clamp(5rem, 16vh, 8rem) 1.25rem 0;
      text-align: center;
    }

    body:has(main[data-template='page.world']) .about__sub { margin-inline: auto; }

    /* Mobile enter = an INVISIBLE full-screen tap target (no pill UI — the
       terminal in the video shows the prompt); tapping anywhere flies in. */
    body:has(main[data-template='page.world']) .about__enter--tap {
      display: block;
      position: fixed;
      inset: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: transparent;
      font-size: 0;
      animation: none;
      cursor: pointer;
    }

    body:has(main[data-template='page.world']) .anemoia-about.about--live .about__intro::before {
      content: '';
      position: absolute;
      inset: 0 0 40% 0;
      z-index: -1;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
      pointer-events: none;
    }
  }

  /* -- Floating bordered card (omnee layout + collection animation) -------- */
  .wa__item { position: relative; margin: 0; }
  .wa__item:hover,
  .wa__item:focus-within,
  .wa__item.is-active { z-index: 50; }

  /* Idle bob (same feel as the collection room products). */
  .wa__floaty {
    display: block;
    color: inherit;
    text-decoration: none;
    animation: wa-bob var(--float-dur, 8s) ease-in-out var(--float-delay, 0s) infinite alternate;
    will-change: transform;
  }

  @keyframes wa-bob {
    from { transform: translateY(-0.5rem) rotate(-0.8deg); }
    to   { transform: translateY(0.5rem) rotate(1deg); }
  }

  .wa__item:hover .wa__floaty,
  .wa__item:focus-within .wa__floaty,
  .wa__item.is-active .wa__floaty { animation-play-state: paused; }

  .wa__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wa-rule);
    background: rgba(8, 9, 14, 0.42);
    backdrop-filter: blur(2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
    transition: transform 0.4s cubic-bezier(0.33, 0.07, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  }

  /* Hover: scale up + lift, like the collection products. */
  .wa__item:hover .wa__card,
  .wa__item:focus-within .wa__card,
  .wa__item.is-active .wa__card {
    transform: scale(1.06);
    border-color: rgba(246, 243, 236, 0.5);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55);
  }

  /* Name row at the top, inside the border. */
  .wa__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--wa-rule);
  }

  .wa__card-name {
    font-family: var(--font-anemoia);
    font-size: clamp(0.6rem, 0.8vw, 0.72rem);
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--wa-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wa__card-meta {
    font-family: var(--font-anemoia);
    font-size: clamp(0.56rem, 0.75vw, 0.66rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wa-soft);
    white-space: nowrap;
  }

  .wa__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(10, 10, 16, 0.4);
  }

  .wa__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.4s ease;
  }

  .wa__item:hover .wa__img,
  .wa__item:focus-within .wa__img,
  .wa__item.is-active .wa__img {
    transform: scale(1.06);
    filter: brightness(0.66);
  }

  .wa__media-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: var(--font-anemoia);
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--wa-soft);
  }

  /* Additional description, revealed on hover. */
  .wa__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(0.7rem, 1.4vw, 1.1rem);
    background: linear-gradient(180deg, transparent 22%, rgba(6, 7, 12, 0.9));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .wa__item:hover .wa__overlay,
  .wa__item:focus-within .wa__overlay,
  .wa__item.is-active .wa__overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .wa__overlay-story {
    margin: 0;
    font-family: var(--font-anemoia);
    font-size: clamp(0.74rem, 0.9vw, 0.88rem);
    line-height: 1.4;
    color: #fff;
  }

  /* Touch / no-hover: the description is revealed on TAP (via .is-active, set in
     anemoia-world-archive.js), matching the desktop hover. */
  @media (hover: none) {
    .wa__floaty { animation: none; }
  }

  /* One-line text footer (bold white, same as the PDP). */
  .wa__footer {
    margin: clamp(2.5rem, 6vw, 4rem) auto 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(246, 243, 236, 0.25);
  }

  .wa__footer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-family: var(--font-anemoia);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .wa__footer-group { display: inline-flex; gap: 1rem; }

  .wa__footer-line a {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
  }

  .wa__footer-line a:hover { opacity: 0.75; }
  .wa__footer-sep { color: #fff; opacity: 0.6; }

  /* ---- Page chrome for page.world: hide announcement bar; force white nav over
     the dark room (mirrors the About page chrome, keyed to this template). --- */
  body:has(main[data-template='page.world']) .announcement-bar { display: none; }

  body:has(main[data-template='page.world']) #header-component .header__underlay,
  body:has(main[data-template='page.world']) #header-component .header__underlay-closed {
    background: transparent;
  }

  body:has(main[data-template='page.world']) #header-component,
  body:has(main[data-template='page.world']) #header-component .header__row,
  body:has(main[data-template='page.world']) #header-component[transparent],
  body:has(main[data-template='page.world']) #header-component[transparent] .header__row {
    --color-foreground: rgb(255, 255, 255);
    --color-foreground-rgb: 255, 255, 255;
    --color-foreground-heading: rgb(255, 255, 255);
    --color-foreground-heading-rgb: 255, 255, 255;
    --color-border: rgba(255, 255, 255, 0.5);
    --color-border-rgb: 255, 255, 255;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }

  body:has(main[data-template='page.world']) #header-component a,
  body:has(main[data-template='page.world']) #header-component a:hover,
  body:has(main[data-template='page.world']) #header-component .header__menu-item,
  body:has(main[data-template='page.world']) #header-component .header__menu-item:hover,
  body:has(main[data-template='page.world']) #header-component .menu-list__link,
  body:has(main[data-template='page.world']) #header-component .menu-list__link:hover,
  body:has(main[data-template='page.world']) #header-component .menu-list__link-title,
  body:has(main[data-template='page.world']) #header-component .header__icon {
    color: #fff !important;
  }

  /* Intro heading: settings-driven legibility shadow + magenta glow (matches the
     homepage hero). Scoped to page.world so it overrides the shared
     anemoia-dive.css base and never touches the About page. */
  body:has(main[data-template='page.world']) .about__title,
  body:has(main[data-template='page.world']) .about__kicker,
  body:has(main[data-template='page.world']) .about__sub {
    text-shadow: var(--wa-heading-shadow, none);
  }

  html[data-anemoia-mode='lunar'] body:has(main[data-template='page.world']) .about__title,
  html[data-anemoia-mode='lunar'] body:has(main[data-template='page.world']) .about__kicker,
  html[data-anemoia-mode='lunar'] body:has(main[data-template='page.world']) .about__sub {
    text-shadow: var(--wa-heading-shadow-lunar, var(--wa-heading-shadow, none));
  }
/* END_SECTION:anemoia-world-page */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .utilities > * {
    text-align: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Anemoia (custom): drop shadow keeps the nav text legible over the
     video / media backgrounds the transparent header rides on. Applies to the
     menu links, the logo, and the SOLAR / LUNAR toggle next to the profile icon. */
  #header-component .menu-list__link,
  #header-component .header-logo,
  #header-component .logo-block,
  #header-component .anemoia-mode-toggle__label,
  #header-component .anemoia-mode-toggle__divider {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  /* Anemoia (custom): Apple Garamond's small x-height makes the stock nav type
     (HOME / SHOP / ABOUT / WORLD and the SOLAR / LUNAR toggle) read too small
     against the full-bleed media behind it — size both up on desktop. */
  @media screen and (min-width: 750px) {
    #header-component .menu-list__link {
      font-size: 1.15rem;
    }

    #header-component .anemoia-mode-toggle__button {
      font-size: 0.9rem;
    }
  }

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SECTION:hero (INDEX:25) */
.hero-wrapper {
    --hero-height-offset: 0px;
  }

  /* Being extra specific in the selector for performance reasons */
  body:has(> #header-group > .header-section > #header-component) .hero-wrapper:first-child {
    --hero-height-offset: var(--header-group-height, 0);
  }

  .hero {
    position: relative;
    min-height: calc(var(--hero-min-height) - var(--hero-height-offset));
  }

  .hero[data-shopify-visual-preview] {
    --hero-min-height: 600px;

    min-height: 600px;
  }

  .hero__container {
    position: relative;
    overflow: hidden;
    border: var(--hero-border-width) var(--hero-border-style) rgb(var(--color-border-rgb) / var(--hero-border-opacity));
    min-height: inherit;
    align-items: var(--vertical-alignment-mobile);
    justify-content: var(--horizontal-alignment);
    z-index: var(--layer-base);

    @media screen and (min-width: 750px) {
      align-items: var(--vertical-alignment);
    }
  }

  .hero__content-wrapper.page-width {
    grid-column: 2 / 3;
  }

  .hero__content-wrapper {
    position: relative;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hero__content-wrapper .group-block-content {
    position: relative;
  }

  .hero__media-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(var(--hero-media-count, 1), 1fr);
  }

  .hero--auto .hero__media {
    aspect-ratio: var(--hero-media-aspect-ratio);
  }

  .hero--no-blocks-auto-height {
    .hero__media {
      width: 100%;
      aspect-ratio: auto;
    }

    .hero__media-grid {
      /* When there are no blocks and the height is auto, allow the image to appear. */
      position: relative;
    }
  }

  .hero__media-wrapper {
    overflow: hidden;
    position: relative;
  }

  .hero__media {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
    z-index: var(--layer-base);
  }

  /* Mobile/Desktop media visibility */

  .hero__media-wrapper--mobile {
    display: none;
  }

  .hero__media-wrapper--desktop {
    display: block;
  }

  @media screen and (max-width: 749px) {
    .hero__media-wrapper--desktop {
      display: none;
    }

    .hero__media-wrapper--mobile {
      display: block;
    }

    .hero__media-grid {
      grid-template-columns: repeat(var(--hero-media-count-mobile, 1), 1fr);
    }

    /* Mobile stacking */
    .hero--stack-mobile .hero__media-grid {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(var(--hero-media-count-mobile, 1), calc(100% / var(--hero-media-count-mobile, 1)));
    }
  }

  .hero__link {
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
  }

  .hero__media-grid,
  .hero__content-wrapper {
    pointer-events: none;

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

  .hero__content-wrapper--design-mode * {
    pointer-events: auto;
  }

  .hero[data-blur-shadow='true'] {
    --blurred-reflection-filter-saturate: saturate(1.5);
    --blurred-reflection-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
    --blurred-reflection-box-shadow: rgb(0 0 0 / 5%) 0 0 1rem;
    --blurred-reflection-filter-blur: blur(20px);
    --blurred-reflection-scale: scale(2, 1.25);
    --blurred-reflection-padding-block-end: 60px;
  }

  .hero[data-blur-shadow='true'] .hero__container::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: var(--blurred-reflection-box-shadow);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
  }

  .hero__blurred-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    mask-image: var(--blurred-reflection-mask-image);
    filter: var(--blurred-reflection-filter-saturate);
    pointer-events: none;
    transform: translateY(50%);
    overflow: hidden;
  }

  .hero__blurred-image--desktop {
    display: none;

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

  .hero__blurred-image--mobile {
    display: block;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .hero__blurred-image img,
  .hero__blurred-image svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: var(--blurred-reflection-filter-blur);
    opacity: var(--blur-opacity);
    transform: var(--blurred-reflection-scale);
    padding-block-end: var(--blurred-reflection-padding-block-end);

    &:not(:only-child) {
      width: 50%;

      &:last-child {
        right: 0;
        left: auto;
      }
    }
  }
/* END_SECTION:hero */

/* START_SECTION:layered-slideshow (INDEX:26) */
.layered-slideshow-section {
    position: relative;
  }

  layered-slideshow-component {
    display: block;
    width: 100%;
  }

  .layered-slideshow__container {
    --radius: calc(var(--corner-radius, 1) * 1rem);
    --button-width: 56px;
    --border-color: var(--color-background);
    --inactive-tabs-width: calc((var(--total-tabs) - 1) * var(--button-width));
    --active-panel-width: calc(100cqi - var(--inactive-tabs-width));
    width: 100%;
    position: relative;
    container-type: inline-size;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .layered-slideshow__container:not([size='auto']) {
    height: 100%;
  }

  .layered-slideshow__container[size='auto'] {
    height: auto;
  }

  @media screen and (min-width: 750px) {
    layered-slideshow-component {
      min-height: var(--layered-min-height-desktop, 0px);
    }
  }

  .layered-slideshow__tablist {
    display: grid;
    grid-template-columns: var(--active-tab);
    position: absolute;
    inset: 0;
    height: 100%;
    pointer-events: none;
    z-index: var(--layer-raised);
  }

  .layered-slideshow__tablist button {
    width: var(--button-width);
    height: 100%;
    pointer-events: all;
    opacity: 0;
    cursor: grab;
    border: none;
    background: transparent;
    padding: 0;
    position: relative;
    outline: none;
    transition: opacity 0.2s ease;
  }

  .layered-slideshow__tablist button:active {
    cursor: grabbing;
  }

  .layered-slideshow__tablist button[aria-selected='true'] {
    cursor: default;
  }

  .layered-slideshow__tablist button:focus-visible {
    opacity: 1;
  }

  .layered-slideshow__container[data-dragging] {
    cursor: grabbing;
  }

  .layered-slideshow__container[data-instant-transitions],
  .layered-slideshow__container:is([data-dragging], [data-instant-transitions])
    :is(
      .layered-slideshow__tablist,
      .layered-slideshow__panels,
      .layered-slideshow__panel-content,
      .layered-slideshow__content
    ) {
    transition: none;
  }

  .layered-slideshow__panels {
    display: grid;
    grid-template-columns: var(--active-tab);
    height: 100%;
    overflow: hidden;
  }

  .layered-slideshow__panel {
    position: relative;
    height: 100%;
    min-width: var(--button-width);
    border-radius: var(--radius);
    z-index: calc(var(--total-tabs) - var(--index));
  }

  .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
    width: var(--active-panel-width);
    border-left: var(--border-width) solid var(--border-color);
  }

  .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
    padding-inline-start: calc((var(--radius) * 2) + var(--padding-inline-start, 0px));
  }

  .layered-slideshow__panel-content {
    border: var(--border-width) solid var(--border-color);
    border-left: none;
    border-radius: var(--radius);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    width: calc(var(--active-panel-width) + (var(--radius) * 2));
  }

  .layered-slideshow__panel-content :is(img, video, svg) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Video poster visibility - poster shows initially and hides when panel becomes active */
  .layered-slideshow__video-poster {
    z-index: 1;
  }

  .layered-slideshow__video {
    z-index: 0;
  }

  /* When panel is active, hide poster so video is visible */
  .layered-slideshow__panel:not([inert]) .layered-slideshow__video-poster {
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__video-poster {
      transition: opacity 0.3s ease;
    }
  }

  .layered-slideshow__content {
    height: 100%;
    position: relative;
    z-index: 1;
  }

  .layered-slideshow__content > * {
    margin: auto;
  }

  .layered-slideshow__content.background-transparent {
    background-color: transparent;
  }

  .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
    box-shadow: 4px 0 12px 0 rgba(0, 0, 0, 0.1);
  }

  /* Shared transitions (desktop and mobile) */
  @media (prefers-reduced-motion: no-preference) {
    .layered-slideshow__panels,
    .layered-slideshow__tablist {
      transition-property: grid-template-columns, grid-template-rows;
      transition-duration: 0.6s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    .layered-slideshow__content {
      opacity: 0;
      transform: translateY(0.5lh);
      transition: opacity 0.48s, transform 0.48s;
    }

    .layered-slideshow__panel:not([inert]) .layered-slideshow__content {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.24s;
    }
  }

  @media screen and (max-width: 749px) {
    .layered-slideshow__container {
      --button-height: 44px;
      --inactive-tabs-height: calc((var(--total-tabs) - 1) * var(--button-height));
    }

    .layered-slideshow__container:not([size='auto']) {
      --layered-total-height: calc(var(--layered-panel-height-mobile, 260px) + var(--inactive-tabs-height));
      --active-panel-height: var(--layered-panel-height-mobile, 260px);
      min-height: var(--layered-total-height);
      height: var(--layered-total-height);
    }

    .layered-slideshow__container[size='auto'] {
      height: auto;
    }

    .layered-slideshow__tablist {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__tablist button {
      width: 100%;
      height: var(--button-height);
    }

    .layered-slideshow__panels {
      grid-template-rows: var(--active-tab);
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .layered-slideshow__panel {
      min-height: var(--button-height);
      width: 100%;
      height: 100%;
      position: relative;
      z-index: calc(var(--total-tabs) - var(--index));
    }

    .layered-slideshow__panel:first-child .layered-slideshow__panel-content {
      width: 100%;
      height: var(--active-panel-height);
      border-top: var(--border-width) solid var(--border-color);
      left: 0;
      right: 0;
      border-left: var(--border-width) solid var(--border-color);
    }

    .layered-slideshow__panel-content {
      position: absolute;
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--radius);
      box-sizing: border-box;
      width: 100%;
      /* Clamp overlap to (button-height - border-width) to prevent visual issues with large radius + border */
      height: calc(var(--active-panel-height) + min(var(--radius) * 2, var(--button-height) - var(--border-width)));
      top: unset;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
    }

    .layered-slideshow__panel:not(:first-child) .layered-slideshow__panel-content {
      border-top: none;
    }

    .layered-slideshow__panel:not(:first-child) {
      margin-top: calc(var(--border-width) * -1);
    }

    .layered-slideshow__content {
      padding-inline-start: var(--padding-inline-start, 0px);
      padding-inline-end: var(--padding-inline-end, 0px);
    }

    /* Adjust padding for non-first slides to account for radius overlap at the top (not sides on mobile) */
    .layered-slideshow__panel:not(:first-child) .layered-slideshow__content {
      padding-block-start: calc((var(--radius) * 2) + var(--padding-block-start, 0px));
      padding-inline-start: var(--padding-inline-start, 0px);
    }

    .layered-slideshow__panel--drop-shadow:not(:last-child) .layered-slideshow__panel-content {
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
/* END_SECTION:layered-slideshow */

/* START_SECTION:logo (INDEX:27) */
.logo-section {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-section--center {
    margin-inline: auto;
  }

  .logo-section--flex-end {
    margin-inline-start: auto;
  }

  .logo-section--flex-start {
    margin-inline-end: auto;
  }

  .logo-section__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-section__image {
    object-fit: contain;
    width: 100%;
  }
/* END_SECTION:logo */

/* START_SECTION:main-blog-post (INDEX:29) */
.blog-post-comments-container {
    width: 100%;
    max-width: var(--normal-content-width);
    margin: 0 auto;
  }

  .blog-post-comments {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3xl);
  }

  .blog-post-comment__author {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
    margin-top: var(--margin-md);
    font-size: var(--font-size--body-sm);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--gap-2xs);
  }

  .blog-post-comments-pagination,
  .blog-post-comments-pagination a {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current {
    color: var(--color-foreground);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a {
    display: block;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .blog-post-comments-pagination .current,
  .blog-post-comments-pagination a:hover {
    border-bottom: 1px solid var(--color-foreground);
  }
/* END_SECTION:main-blog-post */

/* START_SECTION:main-blog (INDEX:30) */
/**
   * Blog posts page layout
   */
  .blog-posts {
    --page-content-width: var(--narrow-page-width);
    --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
    --columns-gap: 36px;
    --rows-gap: 36px;
  }

  .blog-posts-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    column-gap: var(--columns-gap);
    row-gap: var(--rows-gap);
  }

  /**
   * Blog post item grid positioning and scaling.
   * Layout is calculated in Liquid based on total article count.
   * Mobile overrides are applied per-item in inline styles for proper specificity.
   */
  .blog-post-item {
    grid-column: span var(--col-span);
  }

  /**
   * When there's no image, the blog post item has a border.
   */
  .blog-post-item {
    border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-20));
    padding: 0 1rem 1rem;
  }

  .blog-post-item:has(.blog-post-card__image-container) {
    border: none;
    padding: 0;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:31) */
/* ---------------------------------------------------------------------------
     Anemoia (custom): the /cart page rides over the collection-room ("shop")
     world video with the header made transparent (sections/header.liquid) and
     the world backdrop wired in (snippets/anemoia-world.liquid). The section is
     made see-through and the cart itself becomes one big glass card, matching
     the Contact page. The section color scheme is scheme-2 (light cream), which
     the LUNAR remap flips to a dark card automatically.
     --------------------------------------------------------------------------- */

  /* Clear the transparent header, then let the world show through the section. */
  main[data-template='cart'] {
    /* Comfortable capped width, centered — a bit narrower than the full
       page-width, and shrinks on small screens. */
    --acart-width: min(1200px, 92vw);
    padding-block-start: clamp(6rem, 12vh, 8.5rem);
    padding-block-end: clamp(2.5rem, 5vh, 4rem); /* breathing room after the footer */
  }
  main[data-template='cart'] .section-background {
    background: transparent;
  }
  /* The cart content is short; don't stretch it to full viewport height, which
     leaves a big empty gap after the footer (most noticeable on mobile). */
  main[data-template='cart'] > .shopify-section { flex-grow: 0; }
  main[data-template='cart'] .cart-items-component { height: auto; }
  /* Drop the theme's 3-column page grid on the cart so the card isn't trapped
     in the (narrow) central column — size it directly instead. */
  main[data-template='cart'] .section {
    display: block;
  }

  /* The cart itself = one glass card, centered, like the Contact card. */
  main[data-template='cart'] .cart-page {
    width: var(--acart-width);
    max-width: none;
    margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 2.8rem) clamp(1.75rem, 3vw, 3.25rem);
    border-radius: 20px;
    border: 1px solid rgba(var(--color-foreground-rgb), 0.12);
    background-color: var(--color-background);
    background-color: color-mix(in srgb, var(--color-background) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  }

  /* Single-column table layout (Image 2): items span the full card width so the
     built-in horizontal PRODUCT / QUANTITY / TOTAL table kicks in, and the
     summary drops below, right-aligned — instead of the cramped sidebar grid. */
  main[data-template='cart'] .cart-page:not(.cart-page--empty),
  main[data-template='cart'] .section--page-width .cart-page:not(.cart-page--empty):has(.cart-summary--extend) {
    display: block;
    grid-template-columns: none;
  }

  main[data-template='cart'] .cart-page--empty {
    min-height: 30vh;
  }
  main[data-template='cart'] .cart-page--empty .cart-page__columns { display: none; }

  /* Header row: title left, "Continue shopping" right. */
  main[data-template='cart'] .cart-page__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  main[data-template='cart'] .cart-title h1 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  main[data-template='cart'] .cart-page__continue {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.15s ease;
    white-space: nowrap;
  }
  main[data-template='cart'] .cart-page__continue:hover { opacity: 0.6; }

  /* PRODUCT / QUANTITY / TOTAL column labels — aligned to the item grid,
     desktop only (the item rows stack on mobile). */
  main[data-template='cart'] .cart-page__columns { display: none; }
  @media screen and (min-width: 900px) {
    main[data-template='cart'] .cart-page__columns {
      display: grid;
      grid-template-columns: 7.5rem 1fr 1fr minmax(6rem, auto);
      column-gap: var(--gap-md);
      margin-block: var(--margin-lg) var(--margin-sm);
      padding-bottom: var(--padding-sm);
      border-bottom: 1px solid var(--color-border);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70, 0.7));
    }
    main[data-template='cart'] .cart-page__col--product { grid-column: 1 / 3; }
    main[data-template='cart'] .cart-page__col--quantity { grid-column: 3; }
    main[data-template='cart'] .cart-page__col--total { grid-column: 4; text-align: end; }
  }

  /* Summary sits below the table, right-aligned and width-constrained. */
  main[data-template='cart'] .cart-page__summary {
    margin-block-start: var(--margin-xl);
    padding-top: var(--padding-lg);
    border-top: 1px solid var(--color-border);
  }
  @media screen and (min-width: 750px) {
    main[data-template='cart'] .cart-page__summary {
      max-width: 460px;
      margin-inline-start: auto;
    }
    main[data-template='cart'] .cart-summary__inner {
      padding: 0;
      align-items: stretch;
    }
  }

  /* Minimal footer: white links over the video, aligned to the card edges
     (footer is a sibling of the section grid, so match the width directly). */
  main[data-template='cart'] .acart__footer {
    width: var(--acart-width);
    margin: clamp(2rem, 5vh, 3.5rem) auto 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid rgba(246, 243, 236, 0.25);
  }

  /* -- Mobile polish ------------------------------------------------------ */
  @media screen and (max-width: 749px) {
    main[data-template='cart'] {
      padding-block-end: 1.5rem;
    }
    main[data-template='cart'] .cart-page {
      padding: 1.25rem 1.1rem;
    }
    /* The global cart font bump is oversized for the narrow mobile card —
       shrink the item text and keep it left-aligned. */
    main[data-template='cart'] .cart-items__title {
      font-size: 1.02rem;
      text-align: left;
    }
    main[data-template='cart'] .cart-items__details,
    main[data-template='cart'] .cart-items__details * {
      font-size: 0.88rem;
      text-align: left;
    }
    main[data-template='cart'] .cart-items__price,
    main[data-template='cart'] .cart-items__price * {
      font-size: 0.92rem;
    }
    /* Smaller checkout button. */
    main[data-template='cart'] .cart__checkout-button {
      height: clamp(25px, var(--height-buy-buttons), 46px);
      font-size: 0.82rem;
    }
    /* Pull the footer up a touch (the huge gap after it is fixed above). */
    main[data-template='cart'] .acart__footer {
      margin-top: 1.75rem;
    }
  }

  /* Page chrome: transparent header + light nav over the video, like the PDP /
     Contact page (kept identical so the two pages read as one world). */
  body:has(main[data-template='cart']) .header__underlay-closed,
  body:has(main[data-template='cart']) .header__underlay-open {
    background: transparent;
  }

  body:has(main[data-template='cart']) #header-component[transparent],
  body:has(main[data-template='cart']) #header-component[transparent] .header__row {
    --color-foreground: rgb(246, 243, 236);
    --color-foreground-rgb: 246, 243, 236;
    --color-foreground-heading: rgb(246, 243, 236);
    --color-foreground-heading-rgb: 246, 243, 236;
    --color-border: rgba(246, 243, 236, 0.5);
    --color-border-rgb: 246, 243, 236;
    --color-primary-button-background: rgb(246, 243, 236);
    --color-primary-button-text: rgb(22, 20, 15);
  }

  .cart-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--padding-5xl);
  }

  .cart-page--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .cart-page--empty .cart-page__title,
  .cart-page--empty .cart-page__more-blocks {
    margin-top: var(--margin-6xl);
  }

  .cart-page__more-blocks {
    width: 100%;
  }

  .cart-page--empty .cart-title {
    text-align: center;
  }

  .cart-page__main {
    grid-column: 1;
  }

  .cart-page__summary {
    padding-top: var(--padding-xl);
  }

  .cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }

  @media screen and (min-width: 750px) {
    .cart-page {
      grid-template-columns: 1fr min(50vw, var(--sidebar-width));
      grid-template-rows: min-content min-content 1fr;
    }

    .cart-page__summary {
      display: grid;
      height: 100%;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      grid-template-rows: subgrid;
      padding-top: 0;

      /* needed to support blurred effect from hero section */
      position: relative;
    }

    .section--page-width .cart-page:has(.cart-summary--extend) {
      grid-column: 2 / 4;
      grid-template-columns: 1fr minmax(
          var(--sidebar-width),
          calc((100vw - var(--page-width)) / 2 + var(--sidebar-width))
        );
    }
  }

  @media screen and (min-width: 1400px) {
    .cart-page {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:marquee (INDEX:35) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_SECTION:marquee */

/* START_SECTION:media-with-content (INDEX:36) */
.section--page-width {
    &.media-with-content {
      grid-template-areas: 'margin-left media margin-right' 'margin-left content margin-right';

      @media screen and (min-width: 750px) {
        /* Wide proportion is media 3.5 parts, content 2.5 parts. Which equals 7|5. So divide the central column by 7+5 and multiply accordingly */
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 7)
          calc((var(--full-page-grid-central-column-width) / 12) * 5) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left media content margin-right';
      }
    }

    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 12) * 5)
          calc((var(--full-page-grid-central-column-width) / 12) * 7) var(--full-page-grid-margin);

        grid-template-areas: 'margin-left content media margin-right';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          repeat(2, calc(var(--full-page-grid-central-column-width) / 2)) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc((var(--full-page-grid-central-column-width) / 3) * 2)
          calc(var(--full-page-grid-central-column-width) / 3) var(--full-page-grid-margin);
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: var(--full-page-grid-margin)
          calc(var(--full-page-grid-central-column-width) / 3)
          calc((var(--full-page-grid-central-column-width) / 3) * 2) var(--full-page-grid-margin);
      }
    }
  }

  .section--full-width {
    &.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2.5fr 3.5fr;

        grid-template-areas: 'content media';
      }
    }

    &.media-with-content--medium {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 1fr 1fr;
      }
    }

    &.media-with-content--narrow {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 2fr 4fr;
      }
    }

    &.media-with-content--narrow.media-with-content--media-right {
      @media screen and (min-width: 750px) {
        --media-with-content-grid-columns: 4fr 2fr;
      }
    }
  }

  /* Keep the CSS specificity lower assuming that liquid won't assign this class with a full width section */
  .media-with-content.media-with-content--media-extend {
    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'margin-left content margin-right';

    @media screen and (min-width: 750px) {
      grid-template-areas: 'media media content margin-right';
    }
  }

  .media-with-content--media-extend.media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content--media-right {
    @media screen and (min-width: 750px) {
      grid-template-areas: 'margin-left content media media';
    }
  }

  .media-with-content {
    --media-with-content-grid-columns: var(--full-page-grid-with-margins);

    grid-template-columns: var(--media-with-content-grid-columns);
    grid-template-areas: 'media media media' 'content content content';

    @media screen and (min-width: 750px) {
      --media-with-content-grid-columns: 3.5fr 2.5fr;

      /* Default desktop layout is wide media, on the left, in full page section */
      grid-template-areas: 'media content';
    }

    .media-block {
      grid-area: media;
    }

    .media-with-content__content {
      grid-area: content;
    }

    /* Inner blocks spacing */
    .media-with-content__content > .group-block-content {
      padding-inline: var(--page-margin);
      padding-block: calc(2 * var(--page-margin));

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

    &.section--page-width .media-with-content__content > .group-block-content {
      padding-inline: 0;

      @media screen and (min-width: 750px) {
        padding-inline-start: var(--page-margin);
      }
    }

    &.section--page-width.media-with-content--media-right .media-with-content__content > .group-block-content {
      padding-inline-end: var(--page-margin);
      padding-inline-start: 0;
    }
  }

  .media-with-content[data-shopify-visual-preview] {
    --hero-min-height: 500px;

    min-height: 500px;
  }
/* END_SECTION:media-with-content */

/* START_SECTION:password-footer (INDEX:37) */
.password-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: var(--padding-xl);
  }

  .password-footer__powered-by {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--padding-xs);
    height: 1em;

    > a {
      display: flex;
    }

    .icon-shopify {
      display: inline;
      height: 1.3em;
      color: var(--color-foreground);
    }
  }

  .password-footer__links {
    display: flex;
    align-items: center;
    gap: var(--gap-2xl);

    @media screen and (max-width: 749px) {
      flex-direction: column;
      gap: var(--gap-sm);
    }
  }

  .password-footer__admin-link {
    margin: 0;
  }

  .password-footer__button {
    height: var(--minimum-touch-target);
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;

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

/* START_SECTION:password (INDEX:38) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

/* START_SECTION:product-hotspots (INDEX:41) */
/* Section layout */
  .section-product-hotspots {
    position: relative;
  }

  .section-product-hotspots__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    width: 100%;
    height: 100%;
  }

  /* Image container */
  .section-product-hotspots__content {
    position: relative;
    aspect-ratio: var(--ratio, 21 / 9);
    overflow: hidden;
  }

  /* Hide hotspots without products on touch devices (tablets included) */
  @media (hover: none) {
    .hotspot.hotspot--hidden-touch {
      display: none;
    }
  }

  /* Responsive adjustments */
  @media screen and (max-width: 749px) {
    /* Hide dialog on mobile - hotspot opens quick-add modal instead */
    .hotspot .hotspot-dialog {
      display: none;
    }
  }

  /* Hotspot button - positioned element with clickable area */
  .hotspot {
    position: absolute;
    cursor: pointer;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: none;
    transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
    z-index: var(--layer-flat);
  }

  .hotspot:has(.hotspot-dialog[open]) {
    z-index: var(--layer-raised);
  }

  .hotspot .hotspot-trigger {
    padding: 0;
    border: none;
  }

  .hotspot-dialog__product-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--padding-xs);
    padding-inline-start: 0;
    overflow: hidden;
  }

  /* Visual target circle */
  .hotspot-trigger {
    width: var(--hotspot-size);
    height: var(--hotspot-size);
    background: var(--hotspot-bg, rgb(0 0 0 / 0.5));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: width 0.1s ease-out, height 0.1s ease-out;
  }

  /* On mobile, ensure trigger is tappable */
  @media screen and (max-width: 749px) {
    .hotspot-trigger {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
  }

  /* Bullseye using ::after pseudo-element */
  .hotspot-trigger::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--hotspot-size) * 0.4);
    height: calc(var(--hotspot-size) * 0.4);
    background: var(--hotspot-bullseye, #fff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.1s ease-out, height 0.1s ease-out, background 0.1s ease-out;
  }

  /* Bullseye grows on hover or when dialog is open (desktop only) */
  @media screen and (min-width: 750px) {
    .hotspot:hover .hotspot-trigger::after,
    .hotspot:has(.hotspot-dialog[open]) .hotspot-trigger::after {
      width: calc(var(--hotspot-size) * 0.55);
      height: calc(var(--hotspot-size) * 0.55);
      transition: width 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
      transition-delay: 0.2s;
    }
  }

  .hotspots-container {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
    overflow: clip;
  }

  .hotspots__background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Dialog positioning */
  .hotspot .hotspot-dialog {
    position: absolute;
    padding: 0;
    border-radius: var(--style-border-radius-popover);
    border: var(--style-border-popover);
    width: max-content;
    min-width: var(--minimum-width-dialog);
    max-width: var(--maximum-width-dialog);
    box-shadow: var(--shadow-popover);

    &[data-placement*='bottom'] {
      --offset-y: 0px;
      --origin-y: calc(var(--hotspot-size) / 2);
      top: calc((var(--button-size) - var(--hotspot-size)) / 2 + var(--dialog-vertical-offset, 0px));
      bottom: unset;
    }
    &[data-placement*='top'] {
      --offset-y: 0px;
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      top: unset;
      bottom: calc((var(--button-size) - var(--hotspot-size)) * 0.5 - var(--dialog-vertical-offset, 0px));
    }
    &[data-placement*='left'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      --origin-x: calc(100% - (var(--hotspot-size) * 0.5));
      left: unset;
      right: 100%;
    }
    &[data-placement*='right'] {
      --offset-x: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      --origin-x: calc(var(--hotspot-size) * 0.5);
      left: 100%;
      right: unset;
    }
    &[data-placement*='center'] {
      left: 50%;
      translate: -50% 0;
      right: unset;
    }
    &[data-placement*='center'][data-placement*='bottom'] {
      --origin-y: calc(var(--hotspot-size) * 0.5);
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * -0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      top: 100%;
      bottom: unset;
      margin: 0;
    }
    &[data-placement*='center'][data-placement*='top'] {
      --origin-y: calc(100% - (var(--hotspot-size) * 0.5));
      --origin-x: 50%;
      --offset-y: calc((var(--button-size) - var(--hotspot-size)) * 0.5);
      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
      --offset-x: 0;
      bottom: 100%;
    }
  }

  .hotspot .hotspot-dialog:is(:focus, :focus-visible),
  .hotspot .hotspot-dialog__link:is(:focus, :focus-visible) {
    outline: none;
  }

  .hotspot-dialog__product {
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .hotspot-dialog__product-image,
  .hotspot-dialog svg.hotspot-dialog__placeholder-product-image {
    width: var(--width-product-image-dialog);
    height: var(--width-product-image-dialog);
    aspect-ratio: 1;
    padding: var(--padding-product-image-popover, var(--padding-xs));
    object-fit: cover;
    border-radius: var(--style-border-radius-popover);
  }

  .hotspot-dialog__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-flat);
  }

  .hotspot-dialog__product-title {
    margin-block-end: var(--product-title-gap);
    padding-inline-end: var(--padding-sm);
    min-width: 0;
  }

  .hotspot .hotspot-dialog .hotspot-dialog__sold-out-badge {
    display: flex;
    width: fit-content;
    justify-self: flex-end;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
    font-size: var(--font-body--size);
    padding: var(--padding-2xs) var(--padding-sm);
    background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-sm);
    opacity: var(--opacity-80);
  }

  /* Dialog transitions */
  .hotspot .hotspot-dialog {
    --hotspot-blur: 4px;
    --hotspot-scale: 0.8;
    --hotspot-entry-duration: 0.2s;
    --hotspot-exit-duration: 0.1s;

    /* Firefox doesn't have reverse transitions */
    /* in webkit/chromium we can set a closing attribute as we transition the exit and hook there */
    filter: blur(var(--hotspot-blur));
    opacity: 0;
    transform: scale(var(--hotspot-scale)) translate(0, 0);
    transition-property: display, opacity, filter, transform;
    transition-duration: var(--hotspot-entry-duration);
    transition-timing-function: ease;

    transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
    transform-origin: var(--origin-x) var(--origin-y);
    transition-timing-function: cubic-bezier(0.65, -0.49, 0.35, 1.12);

    &[data-closing='true'] {
      transition-duration: var(--hotspot-exit-duration);
      transition-timing-function: ease-out;
      transform: scale(1) translate(0, calc(var(--hotspot-size) * 0.25));
    }

    /* We can only set transition-behavior once we've measured the dialog dimensions */
    &[data-showing='true'] {
      transition-behavior: allow-discrete;
    }
  }

  .hotspot .hotspot-dialog[open][data-showing='true'] {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    filter: blur(0px);
  }

  @starting-style {
    .hotspot .hotspot-dialog[open][data-showing='true'] {
      opacity: 0;
      filter: blur(var(--hotspot-blur));
      transform: scale(var(--hotspot-scale)) translate(var(--offset-x), var(--offset-y));
      transform-origin: var(--origin-x) var(--origin-y);
    }
  }

  /* Safety triangles for dialogs */
  .hotspot .hotspot-dialog::after {
    content: '';
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: all;
    transition: opacity 0.22s ease-out, translate 0.22s 0.1s ease-out;
    scale: var(--scale-x, 1) var(--scale-y, 1);
    z-index: var(--layer-flat);
  }

  .hotspot-dialog[open]:is([data-placement*='left'], [data-placement*='right'])::after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    width: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
  }

  .hotspot-dialog[open][data-placement*='right']::after {
    right: 100%;
    left: unset;
  }

  .hotspot-dialog[open][data-placement*='left']::after {
    left: 100%;
    right: unset;
    --scale-x: -1;
  }

  .hotspot-dialog[open][data-placement*='top']::after {
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center']::after {
    height: calc(var(--button-size) / 2 + var(--hotspot-size) * 0.5);
    width: 100%;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: polygon(0 0, 100% 0, 50% calc(100% - var(--hotspot-size) * 0.25));
    --scale-x: 1;
    --scale-y: 1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='bottom']::after {
    top: unset;
    bottom: 100%;
    --scale-y: -1;
  }

  .hotspot-dialog[open][data-placement*='center'][data-placement*='top']::after {
    top: 100%;
    bottom: unset;
  }

  /* Quick add button */
  .hotspot-dialog[open] {
    .quick-add {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: auto;
      height: auto;
      position: relative;
      z-index: var(--layer-flat);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .sticky-add-to-cart__title {
    font-size: var(--font-paragraph-medium--size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--font-paragraph--line-height);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sticky-add-to-cart__variant {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    font-size: var(--font-paragraph-small--size);
    margin-top: var(--margin-3xs);
  }

  .sticky-add-to-cart__price {
    font-weight: var(--font-weight-semibold);
  }

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

  /* Mobile adjustments */
  @media screen and (max-width: 749px) {
    .sticky-add-to-cart__bar {
      bottom: 0;
      width: 100%;
      max-width: none;
      border-radius: 0;

      &::before {
        --border: 1px;
      }
    }

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

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

    .sticky-add-to-cart__title {
      font-size: var(--font-paragraph--size);
    }

    .sticky-add-to-cart__button {
      padding: var(--padding-lg);
    }

    .sticky-add-to-cart__price {
      font-size: var(--font-paragraph-small--size);
    }

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

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

    sticky-add-to-cart:not([data-variant-available='true']) .sticky-add-to-cart__button {
      width: auto;
    }
  }

  /* Small mobile - hide text content and compare price */
  @media screen and (max-width: 389px) {
    .sticky-add-to-cart__bar {
      .compare-at-price {
        display: none;
      }
    }

    .sticky-add-to-cart__title {
      display: none;
    }

    /* For product with only default variant show title */
    .sticky-add-to-cart__info[data-singleton='true'] .sticky-add-to-cart__title {
      display: block;
    }

    /* For single variant show title and variant, truncate both. variant should be identifiable with truncation */
    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__title {
      display: block;
    }

    .sticky-add-to-cart__info[data-single-option='true'] .sticky-add-to-cart__variant {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
/* END_SECTION:product-information */

/* START_SECTION:quick-order-list (INDEX:45) */
.quick-order-list {
    --quantity-selector-width: 124px;
    --image-size: 43px;
    --quantity-header-padding: calc(var(--minimum-touch-target) + var(--gap-sm));
    --quick-order-quantity-column-width: calc(
      var(--quantity-selector-width) + 2 * var(--gap-sm) + 2 * var(--minimum-touch-target)
    );
    --transform-offset-negative: calc(-1 * var(--icon-stroke-width));
    --quick-order-first-column-width: 2fr; /* Takes 2 fractions of available space */
    --quick-order-price-column-width: 1fr; /* Takes 1 fraction */
    --quick-order-total-column-width: 1fr; /* Takes 1 fraction */

    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .quick-order-list__container {
    width: 100%;
  }

  /* Grid container setup */
  .quick-order-list__grid {
    width: 100%;
    display: block; /* Container is block, children use grid */
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-body {
    contain: layout; /* Isolate layout calculations for performance */
  }

  .quick-order-list__grid-header,
  .quick-order-list__grid-row {
    display: grid;
    grid-template-columns:
      var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
      var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
      var(--quick-order-price-column-width) /* Price column - takes 1 part */
      var(--quick-order-total-column-width); /* Total column - takes 1 part */
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list__grid-header {
    border-block-end: var(--style-border-width) solid var(--color-border);
    padding-block-end: var(--padding-xl);
    margin-block-end: var(--padding-sm);
    opacity: var(--opacity-85);
    font-weight: normal;
    font-size: var(--font-size--xs);
    letter-spacing: var(--letter-spacing--body-loose);
  }

  /* Add padding to quantity column header to align with content */
  .quick-order-list__grid-header .quick-order-list__grid-cell--quantity {
    padding-inline-start: var(--quantity-header-padding);
  }

  .quick-order-list__grid-row {
    padding-block-start: var(--padding-sm);
    padding-block-end: var(--padding-sm);
    content-visibility: auto;
    contain-intrinsic-size: auto
      calc(2 * var(--padding-sm) + var(--image-size) + var(--minimum-touch-target) + var(--padding-2xl));
  }

  @media screen and (min-width: 750px) {
    .quick-order-list__grid-row {
      contain-intrinsic-size: auto calc(2 * var(--padding-sm) + var(--image-size));
    }
  }

  .quick-order-list__grid-cell--variant {
    text-align: start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--quantity .variant-item__inner-container {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-order-list__grid-cell--price {
    text-align: end;
    justify-self: stretch;
  }

  .quick-order-list__grid-cell--total {
    text-align: end;
    justify-self: stretch;
  }

  .variant-item__image-container,
  .quick-order-list__table-image {
    width: var(--image-size);
    height: auto;
  }

  .quick-order-list .pagination {
    margin-block-start: 0;
    padding-block-start: var(--padding-xl);
    padding-block-end: 0;
  }

  .variant-item__inner-container {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .volume-pricing-info-placeholder {
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
  }

  .variant-item__quantity .quantity-selector {
    display: flex;
    flex: 0 0 var(--quantity-selector-width);
    min-width: var(--quantity-selector-width);
    font-size: var(--font-size--xs);
    height: auto;
  }

  .variant-item__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):hover .remove-icon-top {
    transform: translate(var(--transform-offset-negative), var(--icon-stroke-width)) rotate(-15deg);
  }

  .variant-item__remove:not(.variant-item__remove--hidden):is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  /* Hide remove button with opacity to prevent layout shift */
  .variant-item__remove--hidden {
    opacity: 0;
    pointer-events: none;
    cursor: default;
  }

  .variant-item__name {
    font-weight: var(--font-weight-medium);
  }

  .variant-item__sku {
    font-size: var(--font-size--3xs);
    opacity: var(--opacity-85);
  }

  .variant-item__details {
    display: inline-flex;
    flex-direction: column;
  }

  .variant-item__totals {
    flex: 0 0 auto;
    padding-block-start: var(--padding-2xs);
  }

  /* Compare at price styles */
  .variant-item__discounted-prices {
    display: flex;
    gap: var(--gap-2xs);
    justify-content: flex-end;
  }

  .variant-item__discounted-prices dd {
    margin: 0;
  }

  /* Mobile layout */
  @media screen and (max-width: 749px) {
    .quick-order-list__grid-header,
    .quick-order-list__grid-row {
      grid-template-columns: 1fr auto; /* Variant column and total column on mobile */
      gap: var(--gap-sm);
      max-width: 100%;
      overflow: hidden;
      align-items: flex-start;
    }

    .quick-order-list__grid-header .quick-order-list__grid-cell--total {
      text-align: end;
    }

    .quick-order-list__grid-row {
      margin-block-end: var(--margin-2xl);
      padding-block-end: var(--padding-2xl);
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .quick-order-list__grid-row:last-child {
      margin-block-end: 0;
      border-block-end: none;
    }

    .variant-item__inner {
      flex: 1 1 auto;
      padding-inline-end: var(--padding-lg);
    }

    .variant-item__inner-container {
      display: flex;
      gap: var(--gap-md);
      align-items: flex-start;
    }

    .variant-item__details {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0; /* Allow text to shrink */
    }

    .variant-item__totals {
      flex: 0 0 auto;
      text-align: end;
      padding-block-start: var(--padding-2xs);
    }

    .variant-item__totals .variant-item__total-price {
      font-size: var(--font-size--sm);
      font-weight: var(--font-weight-medium);
    }

    .variant-item__title-container .variant-item__name {
      display: block;
      font-size: var(--font-size--sm);
      line-height: var(--line-height-tight);
      margin: 0;
    }

    .variant-item__mobile-price-container {
      margin-block-end: var(--margin-xs);
    }

    .variant-item__mobile-price {
      font-size: var(--font-size--sm);
      opacity: var(--opacity-85);
      white-space: nowrap;
    }

    /* Mobile compare at price styles */
    .variant-item__discounted-prices--mobile {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: flex-start;
      gap: var(--gap-xs);
      margin-block-start: var(--margin-2xs);
      margin-block-end: 0;
    }

    .variant-item__discounted-prices--mobile dd {
      display: inline;
    }

    .variant-item__mobile-quantity {
      display: flex;
      align-items: center;
      gap: 0;
    }

    /* Mobile-only content styles */
    .variant-item__mobile-info {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .variant-item__image-container {
      flex: 0 0 var(--image-size);
      width: var(--image-size);
      height: var(--image-size);
    }

    .quick-order-list__table-image {
      width: 100%;
      height: 100%;
    }

    .variant-item__mobile-quantity .quantity-selector {
      display: flex;
      flex: 0 0 var(--quantity-selector-width);
      min-width: var(--quantity-selector-width);
      font-size: var(--font-size--xs);
      margin: 0;
      padding: 0;
    }

    /* Mobile remove button styling */
    .variant-item__remove--mobile {
      background-color: transparent;
      color: var(--color-foreground);
      width: var(--minimum-touch-target);
      height: var(--minimum-touch-target);
      min-width: var(--minimum-touch-target);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      padding: 0;
      margin: 0;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
    }

    .variant-item__remove--mobile svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }

    .variant-item__remove--mobile:not(.variant-item__remove--hidden):hover {
      opacity: var(--opacity-70);
    }

    .quick-order-list .pagination {
      padding-block-start: var(--padding-2xl);
    }
  }

  .quick-order-list-disabled {
    pointer-events: none;
  }

  .quick-order-list-total {
    background: var(--color-background);
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* Tablet and Desktop styles - sticky footer */
  @media screen and (min-width: 750px) {
    .quick-order-list-total {
      position: sticky;
      inset-block-end: 0;
      z-index: var(--layer-raised);
    }
  }

  .quick-order-list-total__info,
  .quick-order-list-total__confirmation {
    min-height: 8rem;
    padding-block-start: var(--padding-4xl);
  }

  .quick-order-list-total__info {
    align-items: flex-start;
    gap: var(--gap-md);
  }

  .quick-order-list-total__confirmation {
    display: flex;
    gap: var(--gap-2xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-2xl) var(--padding-xl);
  }

  .quick-order-list-total__column {
    display: flex;
    flex-direction: column;
  }

  .quick-order-list-total__actions {
    display: flex;
  }

  /* Desktop layout - Use CSS Grid to match main table alignment */
  @media screen and (min-width: 750px) {
    .quick-order-list-total__info {
      display: grid;
      grid-template-columns:
        var(--quick-order-first-column-width) /* Variant column - takes 2 parts of available space */
        var(--quick-order-quantity-column-width) /* Fixed pixel width for quantity */
        var(--quick-order-price-column-width) /* Price column - takes 1 part */
        var(--quick-order-total-column-width); /* Total column - takes 1 part */
    }

    .quick-order-list-total__column {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: var(--gap-md);
    }

    .quick-order-list-total__summary {
      grid-column: 2 / 5;
      display: grid;
      grid-template-columns: var(--quick-order-quantity-column-width, 234px) auto;
    }

    .quick-order-list-total__items {
      grid-column: 1;
      justify-self: center;
      text-align: center;
    }

    .quick-order-list-total__price {
      grid-column: 3;
      justify-self: end;
      text-align: end;
    }
  }

  /* Tablet-specific overrides - 750px to 989px */
  @media screen and (min-width: 750px) and (max-width: 989px) {
    .quick-order-list-total__actions {
      flex-direction: column;
    }

    .quick-order-list-total__messages {
      align-items: stretch;
    }

    .quick-order-list__remove-all-button {
      padding-inline: 0;
    }
  }

  .quick-order-list__button.button--full-width {
    width: 100%;
  }

  .quick-order-list__button.button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .quick-order-list-total .button--unstyled {
    border: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--color-foreground);
    cursor: pointer;
  }

  .quick-order-list__remove-all-button svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    flex-shrink: 0;
  }

  .quick-order-list-total__items span {
    display: block;
    margin-block-end: var(--margin-xs);
  }

  .quick-order-list-total__items .h5 {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__subtotal-value {
    display: block;
    margin-block-end: var(--margin-xs);
    line-height: var(--font-paragraph--line-height);
  }

  /* Ensure text-component displays properly */
  .quick-order-list-total__subtotal-value text-component {
    display: block;
  }

  .quick-order-list-total__subtotal {
    margin: 0;
    letter-spacing: var(--letter-spacing--body-loose);
    opacity: var(--opacity-85);
  }

  .quick-order-list-total__tax-note {
    opacity: var(--opacity-subdued-text);
  }

  .quick-order-list-total__messages {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success,
  .quick-order-list-total__error {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .quick-order-list-total__success .icon-success,
  .quick-order-list-total__error .quick-order-list-total__icon--error {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: inherit;
  }

  .quick-order-list-total__success .icon-success svg,
  .quick-order-list-total__error .quick-order-list-total__icon--error svg {
    width: 100%;
    height: 100%;
  }

  .quick-order-list-total__error:empty,
  .quick-order-list-total__success:empty {
    display: none;
  }

  .quick-order-list-total__info.confirmation-visible {
    display: none;
  }

  .quick-order-list-total__confirmation-text {
    white-space: nowrap;
  }

  .quick-order-list-total__confirmation-buttons {
    display: flex;
    gap: var(--gap-md);
    align-items: center;
  }

  .quick-order-list-total__confirmation button {
    margin: 0;
    white-space: nowrap;
  }

  .quick-order-list__remove-all-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .quick-order-list-total__info {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .quick-order-list-total__column {
      order: 3; /* Move column to the end on mobile */
      width: 100%;
      flex: 1 1 auto;
    }

    .quick-order-list-total__actions {
      flex-direction: column;
      width: 100%;
    }

    .quick-order-list-total__messages {
      width: 100%;
      align-items: center;
      margin-block-start: var(--margin-xs);
    }

    .quick-order-list-total__summary {
      order: 1; /* First on mobile */
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      gap: var(--gap-md);
    }

    .quick-order-list-total__items {
      text-align: center;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__items span {
      display: inline;
      margin-block-end: 0;
    }

    .quick-order-list-total__items .h5 {
      display: inline;
    }

    .quick-order-list-total__price {
      text-align: center;
      width: 100%;
    }

    .quick-order-list-total__product-total {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--gap-xs);
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal-value {
      display: inline-block;
      margin-block-end: 0;
    }

    .quick-order-list-total__product-total .quick-order-list-total__subtotal {
      display: inline;
    }

    .quick-order-list__button,
    .quick-order-list__remove-all-button {
      width: 100%;
      justify-content: center;
    }

    .quick-order-list-total__confirmation {
      flex-direction: column;
    }

    .quick-order-list-total__tax-note {
      margin-block-start: var(--margin-xs);
    }
  }
/* END_SECTION:quick-order-list */

/* START_SECTION:slideshow (INDEX:50) */
.slideshow-section {
    slideshow-arrows .slideshow-control:first-of-type {
      margin-inline-start: var(--padding-xs);
    }

    slideshow-arrows .slideshow-control:last-of-type {
      margin-inline-end: var(--padding-xs);
    }

    .slideshow--with-hints--mobile-with-hints {
      gap: var(--slideshow-gap, 0);
      grid-column: 1 / -1;
    }

    /* Hide navigation arrows at boundaries for with-hints mode */
    .slideshow--with-hints--mobile-with-hints slideshow-arrows .slideshow-control {
      transition: opacity 0.3s ease;
    }

    /* Override animation for boundary arrows in with-hints mode on hover */
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:first-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--previous,
    slideshow-component.slideshow--with-hints--mobile-with-hints:has(
        slideshow-slide:last-child:not([aria-hidden='true'])
      )
      > slideshow-container
      > slideshow-arrows
      .slideshow-control--next {
      animation: none;
      opacity: 0;
      pointer-events: none;
    }

    @media screen and (max-width: 749px) {
      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        padding-inline: var(--page-margin);
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slide {
        width: 96%;
      }

      .slideshow--with-hints--mobile-with-hints slideshow-slides {
        gap: min(var(--slideshow-gap, 0), 10px);
      }
    }

    @media screen and (min-width: 750px) {
      .slideshow--with-hints {
        gap: var(--slideshow-gap, 0);
        grid-column: 1 / -1;
      }

      .slideshow--with-hints slideshow-slides {
        padding-inline: var(--page-margin);
        gap: var(--slideshow-gap, 0);
      }

      .slideshow--with-hints slideshow-slide {
        width: calc((100vw - var(--page-margin) * 2));
        overflow: hidden;
      }

      .slideshow--with-hints slideshow-arrows .slideshow-control {
        transition: opacity 0.3s ease;
      }

      slideshow-component.slideshow--with-hints:has(slideshow-slide:first-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--previous,
      slideshow-component.slideshow--with-hints:has(slideshow-slide:last-child:not([aria-hidden='true']))
        > slideshow-container
        > slideshow-arrows
        .slideshow-control--next {
        animation: none;
        opacity: 0;
        pointer-events: none;
      }
    }
  }
/* END_SECTION:slideshow */

/* CSS from block stylesheet tags */
/* START_BLOCK:_accordion-row (INDEX:51) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

/* START_BLOCK:_announcement (INDEX:52) */
.text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width).h1,
  .text-block:not(.text-block--full-width).h2,
  .text-block:not(.text-block--full-width).h3,
  .text-block:not(.text-block--full-width).h4,
  .text-block:not(.text-block--full-width).h5,
  .text-block:not(.text-block--full-width).h6 {
    text-wrap: balance;
  }

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

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

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

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

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

/* START_BLOCK:_blog-post-card (INDEX:53) */
.blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

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

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

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

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

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

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

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

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

  .blog-post-featured-image.size-style {
    --width: var(--size-style-width, 100%);
  }

  .blog-post-featured-image--height-fit {
    height: fit-content;
  }

  .blog-post-featured-image--height-fill {
    height: 100%;
  }

  .blog-post-featured-image__image {
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  @media screen and (max-width: 749px) {
    .blog-post-featured-image {
      --width: var(--width-mobile, var(--width));
      --custom-width: var(--custom-width-mobile, var(--custom-width));
    }

    .blog-post-featured-image.size-style {
      --width: var(--size-style-width-mobile, var(--size-style-width, 100%));
    }
  }
/* END_BLOCK:_blog-post-featured-image */

/* START_BLOCK:_blog-post-image (INDEX:57) */
.blog-post-card__image {
    width: 100%;
    object-fit: cover;
    object-position: center center;
    height: calc(var(--blog-post-card-img-height) * var(--blog-post-card-scale));
  }

  .blog-post-card__image--small {
    --blog-post-card-img-height: 280px;
  }

  .blog-post-card__image--medium {
    --blog-post-card-img-height: 340px;
  }

  .blog-post-card__image--large {
    --blog-post-card-img-height: 400px;
  }
/* END_BLOCK:_blog-post-image */

/* START_BLOCK:_blog-post-info-text (INDEX:58) */
.blog-post-details {
    display: flex;
    gap: var(--gap-sm);
    font-size: var(--font-paragraph-size);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    white-space: nowrap;
    flex-wrap: wrap;
  }

  .blog-post-details > span {
    text-overflow: clip;
    overflow: hidden;
  }
/* END_BLOCK:_blog-post-info-text */

/* START_BLOCK:_card (INDEX:59) */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius, 0);
    border-width: var(--border-width, 0);
    border-style: var(--border-style, none);
    border-color: var(--border-color);
    container-type: inline-size;
  }

  .card__content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);
    display: flex;
    flex-direction: column;
    aspect-ratio: var(--card-ratio, 1);
  }

  .card__content.background-transparent {
    background-color: transparent;
  }

  /* When card has both image and content, use min-height from container query */
  .card__content--has-min-height {
    min-height: calc(100cqw / var(--card-ratio-numeric));
  }

  .card__inner {
    flex: 1;
  }

  .card__media-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .card__media-wrapper video {
    z-index: var(--layer-raised);
  }

  .card__link {
    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
  }

  .card__link ~ :is(.card__content, .card__media-wrapper) {
    pointer-events: none;

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

  /* Needs the .card__link ~ to be specific enough to take effect. */
  .card__link ~ .card__content--design-mode {
    pointer-events: auto;
  }
/* END_BLOCK:_card */

/* START_BLOCK:_carousel-content (INDEX:60) */
.carousel-content slideshow-slides {
    --slideshow-gap: var(--carousel-gap);
  }

  .carousel-content slideshow-slides > .card {
    flex: 0 0 auto;
    width: calc(
      (100% - (var(--carousel-gap, 8px) * (var(--carousel-mobile-columns, 2) - 1)) - var(--peek-next-slide-size, 0px)) /
        var(--carousel-mobile-columns, 2)
    );
  }

  @media screen and (min-width: 750px) {
    .carousel-content slideshow-slides > .card {
      width: calc(
        (100% - (var(--carousel-gap, 8px) * (var(--carousel-columns, 4) - 1)) - var(--peek-next-slide-size, 0px)) /
          var(--carousel-columns, 4)
      );
    }
  }

  .carousel-content .slideshow-control[disabled] {
    display: none;
  }

  .carousel-content slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .carousel-content .slideshow-control--next {
    margin-inline-start: auto;
  }
/* END_BLOCK:_carousel-content */

/* START_BLOCK:_cart-products (INDEX:61) */
.cart-page__title + .cart-page__items {
    margin-block-start: var(--margin-lg);
  }
/* END_BLOCK:_cart-products */

/* START_BLOCK:_cart-summary (INDEX:62) */
.cart-summary__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2xl);
    container-type: inline-size;
    padding: 0;
    position: sticky;
    top: 0;
    align-self: start;

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
      grid-row: 1 / -1;
    }
  }

  body:has(> #header-group header-component[sticky]) .cart-summary__inner {
    top: var(--header-height, 0);
  }

  .cart-summary {
    @media screen and (max-width: 749px) {
      border: none;
    }

    @media screen and (min-width: 750px) {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: 1 / -1;
    }
  }

  .cart-summary--extend {
    height: 100%;

    @media screen and (min-width: 750px) {
      border-right: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* If extend is on, only include top and bottom borders when the border radius is 0. */
  .cart-summary--extend:not(.has-border-radius) {
    @media screen and (min-width: 750px) {
      border-top: none;
      border-bottom: none;
    }
  }

  .cart-summary--extend .cart-summary__inner {
    height: 100%;
    padding: var(--padding-md) 0 var(--padding-4xl);

    @media screen and (min-width: 750px) {
      grid-row: 2 / -1;
      padding-inline: var(--page-margin);
      width: var(--sidebar-width);
    }
  }

  /* If extend is off, apply the border radius to the inner summary container */
  .cart-summary__inner.has-border-radius {
    border-radius: var(--border-radius);
  }

  @media screen and (max-width: 749px) {
    .inherit-parent-scheme--mobile {
      --color-background: inherit;
      --color-background-rgb: inherit;
      --color-foreground: inherit;
      --color-foreground-rgb: inherit;
      --color-primary: inherit;
      --color-primary-rgb: inherit;
      --color-primary-hover: inherit;
      --color-primary-hover-rgb: inherit;
      --color-border: inherit;
      --color-border-rgb: inherit;
      --color-shadow: inherit;
      --color-shadow-rgb: inherit;
      --color-foreground-heading: inherit;
      --color-primary-button-text: inherit;
      --color-primary-button-background: inherit;
      --color-primary-button-border: inherit;
      --color-primary-button-hover-text: inherit;
      --color-primary-button-hover-background: inherit;
      --color-primary-button-hover-border: inherit;
      --color-secondary-button-text: inherit;
      --color-secondary-button-background: inherit;
      --color-secondary-button-border: inherit;
      --color-secondary-button-hover-text: inherit;
      --color-secondary-button-hover-background: inherit;
      --color-secondary-button-hover-border: inherit;
      --color-input-text: inherit;
      --color-input-text-rgb: inherit;
      --color-input-background: inherit;
    }
  }
/* END_BLOCK:_cart-summary */

/* START_BLOCK:_cart-title (INDEX:63) */
.cart-title h1 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-sm);
  }

  .cart-title .cart-bubble {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--style-border-radius-buttons-primary);
    aspect-ratio: auto;
    padding: var(--cart-padding);
  }

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

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

  .cart-title .cart-bubble__text {
    color: var(--color-foreground);
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    font-size: clamp(var(--font-size--3xs), 0.75em, var(--font-size--xs));
  }
/* END_BLOCK:_cart-title */

/* START_BLOCK:_collection-image (INDEX:66) */
.collection-image {
    width: var(--image-width);
  }

  .collection-image .collection-image__featured-image {
    aspect-ratio: var(--ratio);
    object-fit: cover;
  }
/* END_BLOCK:_collection-image */

/* START_BLOCK:_collection-link (INDEX:68) */
.collection-links__link {
    --min-font-size: var(--font-size--4xl);
    --max-font-size: var(--font-size--6xl);

    display: flex;
    color: inherit;
    text-decoration: none;
    text-wrap: pretty;
    font-size: clamp(var(--min-font-size), 4.5vw, var(--max-font-size));

    /* When hovering over container, dim non-current links (text layout only) */
    @media (hover: hover) {
      collection-links-component:not([layout='spotlight']) .collection-links__container:hover & {
        opacity: var(--opacity-subdued-text);
      }

      collection-links-component:not([layout='spotlight']) .collection-links__container:hover &[aria-current='true'] {
        opacity: 1;
      }
    }

    [layout='spotlight'] & {
      /* Spotlight layout: dimmed by default */
      opacity: var(--disabled-opacity);

      &[aria-current='true'] {
        opacity: 1;
      }
    }

    .text-block {
      display: inline-block;
    }

    @media screen and (max-width: 749px) {
      --min-font-size: var(--font-size--3xl);
      --max-font-size: var(--font-size--5xl);

      [layout='spotlight'] & {
        white-space: normal;
        scroll-snap-align: start;
        text-wrap: pretty;

        span {
          text-wrap: pretty;
        }
      }
    }
  }

  .collection-links__count {
    font-size: 0.5em;
    opacity: var(--disabled-opacity);
    font-weight: var(--font-paragraph--weight);
  }

  .collection-links__image {
    align-items: center;
    justify-content: center;

    &:not([hidden]) {
      display: flex;
    }

    &[reveal] {
      --offset: 15px;

      position: fixed;
      top: 0;
      left: 0;
      z-index: var(--layer-temporary);
      display: block;
      translate: calc(var(--x) + var(--offset)) calc(var(--y) + var(--offset));
      pointer-events: none;
      width: auto;

      image-block {
        --image-height-basis: 5rem;

        height: var(--image-height);
      }
    }
  }
/* END_BLOCK:_collection-link */

/* START_BLOCK:_featured-blog-posts-card (INDEX:72) */
.featured-blog-posts-card {
    text-align: var(--text-align);
  }

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

  .resource-list--grid .resource-list__item {
    min-width: 0;
  }

  /* Editorial layout */
  .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
    .featured-blog-posts-card__content {
      --flex-wrap: nowrap;
    }
  }

  @media screen and (max-width: 749px) {
    .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
      .featured-blog-posts-card__image,
      .blog-placeholder-svg {
        aspect-ratio: unset;
      }
    }
  }

  .featured-blog-posts-card__inner a,
  .featured-blog-posts-card__inner button {
    pointer-events: auto;
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .featured-blog-posts-card__content * {
    pointer-events: auto;
  }

  .featured-blog-posts-card__content {
    --flex-wrap: wrap;
  }

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

/* START_BLOCK:_featured-blog-posts-image (INDEX:73) */
.featured-blog-posts-card__image {
    width: 100%;
  }

  .featured-blog-posts-card__image .blog-placeholder-svg {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
/* END_BLOCK:_featured-blog-posts-image */

/* START_BLOCK:_featured-product-gallery (INDEX:75) */
.featured-product-section .card-gallery .quick-add__button {
    position: absolute;
    right: var(--quick-add-offset, var(--padding-sm));
    bottom: var(--quick-add-offset, var(--padding-sm));
  }
/* END_BLOCK:_featured-product-gallery */

/* START_BLOCK:_featured-product (INDEX:78) */
.featured-product-content-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gap-sm);
  }
/* END_BLOCK:_featured-product */

/* START_BLOCK:_footer-social-icons (INDEX:79) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }
/* END_BLOCK:_footer-social-icons */

/* START_BLOCK:_header-logo (INDEX:80) */
.header-logo {
    display: flex;
    height: 100%;
    font-size: var(--font-size--md);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
    color: var(--color-foreground);
    justify-content: center;
    align-items: center;
    text-decoration: none;

    &[data-hidden-on-home-page] {
      display: none;

      #header-component:is(
          [sticky='always']:not([data-scroll-direction='none']),
          [sticky='scroll-up'][data-scroll-direction='up']
        )
        & {
        display: flex;
      }
    }

    @media screen and (max-width: 749px) {
      padding: 0;
    }

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

    &:hover {
      text-decoration: none;
    }
  }

  .header-logo__image {
    object-fit: contain;
    height: var(--header-logo-image-height-mobile);
    width: var(--header-logo-image-width-mobile);

    @media screen and (min-width: 750px) {
      height: var(--header-logo-image-height);
      width: var(--header-logo-image-width);
    }
  }

  .header-logo:has(.header-logo__image-container--inverse) .header-logo__image-container--original {
    display: var(--header-logo-display, block);
  }

  .header-logo__image-container--inverse {
    display: var(--header-logo-inverse-display, none);
  }
/* END_BLOCK:_header-logo */

/* START_BLOCK:_header-menu (INDEX:81) */
.header__drawer {
    --header-drawer-min-height: 60px;
    display: flex;
    min-height: var(--header-drawer-min-height);
    align-items: center;
  }

  #header-component[data-menu-style='drawer'] .header__drawer {
    display: flex;
    min-height: var(--header-drawer-min-height);
  }

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

  .header--compact .header__drawer {
    min-height: var(--minimum-touch-target);
  }

  .menu-list--mobile {
    &.menu-list {
      display: grid;
    }

    & .menu-list__list {
      width: max-content;
      margin-inline: auto;
      gap: var(--menu-horizontal-gap);
    }

    & li {
      width: max-content;
      padding-block: var(--padding-sm);
    }

    & li:first-of-type {
      padding-inline-start: var(--menu-horizontal-gap);
    }

    & li:last-of-type {
      padding-inline-end: var(--menu-horizontal-gap);
    }

    & a {
      color: var(--color-foreground);
    }
  }

  .menu-list__scroll-container {
    position: relative;
    overflow-x: auto;
    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    padding-block: var(--padding-2xs);
  }

  .menu-list {
    --menu-horizontal-gap: var(--gap-xl);
    --menu-vertical-gap: var(--gap-xl);

    display: flex;
    height: 100%;
  }

  .menu-list__list {
    display: flex;
    justify-content: var(--grid-area-alignment);
  }

  .menu-list__list-item {
    flex-shrink: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .menu-list__list-item[aria-hidden='true'] {
    visibility: hidden;
  }

  .menu-list__link {
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    margin-block: 0;

    &::after {
      content: '';
      position: absolute;
      display: none;
      top: var(--header-padding);
      height: var(--box-height);
      left: 0;
      right: 0;
    }

    &[data-safety-box='true']::after {
      display: block;
    }

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

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

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

  .menu-list__list-item:not([slot='overflow']) {
    flex-direction: column;
  }
  .menu-list__list-item:not([slot='overflow'])::after {
    content: '';
    width: 100%;
    height: var(--header-padding);
    margin-bottom: calc(-1 * var(--header-padding));
  }

  [slot='overflow'] > .menu-list__link::after {
    content: none;
  }

  /*
    High specificity selectors to subdue non-hovered links without javascript.
    If the need for js-generated `hovered` and `focused` classes arises for another reason we can simplify these.
  */
  .menu-list:where(:has(.menu-list__list-item:hover)),
  .menu-list:where(:has(.menu-list__list-item:focus-within)),
  .menu-list:where(:has(.menu-list__list-item:not([aria-hidden='true']) .menu-list__link--active)) {
    .menu-list__link {
      color: rgb(var(--menu-top-level-font-color-rgb) / var(--opacity-subdued-text));
    }
  }

  /* stylelint-disable-next-line selector-max-specificity */
  .menu-list:not(:has(.menu-list__list-item:hover)) .menu-list__link--active,
  .menu-list .menu-list__list-item:where(:hover, :focus-within) .menu-list__link,
  .menu-list .menu-list__list-item[slot='overflow'] .menu-list__link[aria-expanded='true'] {
    color: var(--menu-top-level-font-color);
  }

  .overflow-menu::part(list) {
    /* Make sure focus outline is not cut off by overflow hidden */
    --focus-outline-size: calc(var(--focus-outline-offset) + var(--focus-outline-width));

    gap: 0;
    margin-inline: calc(-1 * var(--menu-horizontal-gap) / 2);
  }

  .overflow-menu {
    background-color: transparent;
    padding: var(--focus-outline-size);
    margin: calc(-1 * var(--focus-outline-size));
  }

  /** mega menu **/
  .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-padding-block-start: var(--padding-3xl);
    --submenu-padding-block-end: var(--padding-3xl);

    background-color: transparent;
  }

  .header__row[style*='--border-bottom-width: 0px'] {
    .menu-list__submenu.color-scheme-matches-parent,
    .overflow-menu.color-scheme-matches-parent::part(overflow) {
      --submenu-padding-block-start: 0px;
    }
  }

  .menu-list__list-item:where(:not([slot='overflow'])) > .menu-list__submenu,
  .overflow-menu::part(overflow) {
    --submenu-content-opacity: 0;
    --submenu-content-animation: opacity calc(var(--submenu-animation-speed) * 0.75) var(--animation-easing);

    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: calc(100% - 1px + var(--border-bottom-width) - (var(--full-open-header-height) - var(--submenu-height)));
    z-index: var(--layer-header-menu);
    padding-inline: var(--padding-inline);
    /* Clip path starts at header height so it doesn't mess with the pointer events in the header */
    clip-path: rect(var(--header-height) 100% var(--full-open-header-height) 0); /* stylelint-disable-line */
    transition: clip-path var(--submenu-animation-speed) var(--ease-out-cubic); /* stylelint-disable-line */
  }

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

  /* Show the submenus on hover */
  .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu,
  /* Show the overflow menu when a menu item is hovered */
  .overflow-menu:has([slot="overflow"] [aria-expanded='true'])::part(overflow-list),
  /* Keep the submenus open when they are hovered */
  .menu-list__submenu:is(:hover),
  .overflow-menu::part(overflow):hover {
    --submenu-content-opacity: 1;

    visibility: visible;
  }

  .overflow-menu::part(overflow) {
    --menu-top-level-font-size: var(--font-size--xlarge);

    display: grid;
    grid-template-columns: var(--full-page-grid-with-margins);
  }

  .overflow-menu::part(overflow-list) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(auto, 200px) 1fr;
    grid-template-areas: 'left right';
    grid-template-rows: max-content;
    grid-gap: 0;
    grid-column: 2;
  }

  .menu-list__list-item:is([slot='overflow']) {
    --menu-top-level-font-color: var(--color-foreground);
    --menu-top-level-font-color-rgb: var(--color-foreground-rgb);

    display: contents;
    white-space: normal;

    .menu-list__link {
      grid-area: left;
      grid-row: auto;
      height: min-content;
      font-size: var(--font-size--xl);
      transition: var(--submenu-content-animation);
    }

    .menu-list__submenu {
      visibility: hidden;
      grid-row: 1;
      grid-area: right;
      grid-row-end: span calc(var(--overflow-count) + 1);
      padding-inline-start: var(--menu-horizontal-gap);
    }

    .menu-list__submenu-inner {
      transform: none;
      grid-column: unset;
      padding-block: 0;
    }

    .menu-list__link[aria-expanded='true'] + .menu-list__submenu {
      visibility: visible;
    }
  }

  .header-menu {
    height: 100%;
  }

  .menu-list__submenu-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .menu-list__submenu-inner,
  .overflow-menu::part(overflow-list) {
    padding-block-start: var(--submenu-padding-block-start);
    padding-block-end: var(--submenu-padding-block-end);
    padding-inline: var(--section-padding-inline);
    opacity: var(--submenu-content-opacity);
    transition: var(--submenu-content-animation);
    transform: translateY(calc(var(--full-open-header-height) - var(--submenu-height)));

    /* Make overflow menu scrollable when content exceeds viewport */
    max-height: calc(80vh - var(--header-height));
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) transparent;
  }

  .mega-menu__link {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);
    white-space: normal;
    text-decoration: none;
    display: inline-flex;
    padding: var(--padding-2xs) 0;

    &:hover {
      color: var(--menu-child-active-font-color);
    }
  }

  .mega-menu__link--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-active-font-color);
    }
  }

  @media screen and (max-width: 989px) {
    .mega-menu__content-list-item--hidden-tablet {
      display: none;
    }
  }

  .mega-menu__link:has(.mega-menu__link-image) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    object-fit: cover;
    border-radius: var(--menu-image-border-radius);
  }

  /* Fix alignment for collection image mode links without images */

  /* Target only top-level links (direct children of column > div) in collection image mode */
  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image)) {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    padding-block: var(--padding-sm) 0;
  }

  .mega-menu__grid:has(.mega-menu__link-image)
    .mega-menu__column
    > div
    > .mega-menu__link:not(:has(.mega-menu__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: var(--padding-sm);
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(var(--menu-columns-tablet), minmax(0, 1fr));
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
    width: 100%;

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-columns-desktop), minmax(0, 1fr));
    }
  }

  .mega-menu__column {
    grid-column: span 1;
  }

  .mega-menu__column--span-2 {
    grid-column: span 2;
  }

  .mega-menu__column--span-3 {
    grid-column: span 3;
  }

  .mega-menu__column--span-4 {
    grid-column: span 4;
  }

  .mega-menu__column--wide-collection-image {
    grid-column: span 1;

    @media screen and (min-width: 990px) {
      grid-column: span 2;
    }
  }

  .mega-menu__submenu .mega-menu__column--wide-collection-image {
    grid-column: span 1;
  }

  .mega-menu__content-list {
    display: grid;
    justify-content: end;
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);
  }

  .mega-menu__content-list--products {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 1fr));

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

  .mega-menu__content-list--collections {
    grid-template-columns: repeat(var(--menu-content-columns-tablet), minmax(0, 300px));

    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(var(--menu-content-columns-desktop), minmax(0, 300px));
    }
  }

  .mega-menu__list {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span var(--menu-columns-tablet);
    gap: var(--menu-vertical-gap) var(--menu-horizontal-gap);

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-columns-desktop);
    }
  }

  .mega-menu__content {
    grid-column: span var(--menu-content-columns-tablet) / -1;

    @media screen and (min-width: 990px) {
      grid-column: span var(--menu-content-columns-desktop) / -1;
    }
  }

  .menu-list__list-item[slot='overflow'] .section {
    grid-template-columns: 1fr;
  }

  .menu-list__list-item[slot='overflow'] .section .mega-menu__grid {
    grid-column: 1;
  }

  .mega-menu__content-list li {
    white-space: normal;
  }

  /* mega more menu */
  .mega-menu__more-list {
    --menu-child-font-size: var(--font-size--xl);

    width: 200px;
  }

  .mega-menu__submenu {
    /* preserves the inherited grid layout when this submenu wrapper is used */
    display: contents;
  }
/* END_BLOCK:_header-menu */

/* START_BLOCK:_image (INDEX:84) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  image-block {
    --image-height-basis: 10rem;
    --image-height-small: calc(var(--image-height-basis) * 2);
    --image-height-medium: calc(var(--image-height-basis) * 3);
    --image-height-large: calc(var(--image-height-basis) * 4);

    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--ratio);
    width: 100%;
    max-width: calc(var(--image-height) * var(--ratio));
    height: var(--image-height);
    overflow: hidden;

    @media screen and (min-width: 750px) {
      --image-height-small: calc(var(--image-height-basis) * 2.5);
      --image-height-medium: calc(var(--image-height-basis) * 3.5);
      --image-height-large: calc(var(--image-height-basis) * 4.5);
    }

    @media screen and (max-width: 749px) {
      height: auto;
    }

    &[height='small'] {
      --image-height: var(--image-height-small);
    }

    &[height='medium'] {
      --image-height: var(--image-height-medium);
    }

    &[height='large'] {
      --image-height: var(--image-height-large);
    }

    &[ratio='portrait'] {
      --ratio: 4 / 5;
    }

    &[ratio='square'] {
      --ratio: 1 / 1;

      @media screen and (min-width: 750px) {
        max-width: var(--image-height);
      }
    }

    &[ratio='landscape'] {
      --ratio: 16 / 9;
    }

    img {
      object-fit: cover;
      width: 100%;
      height: auto;
      aspect-ratio: var(--ratio);
      border-radius: var(--border-radius);
    }
  }
/* END_BLOCK:_image */

/* START_BLOCK:_marquee (INDEX:88) */
marquee-component {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-background);
  }

  .marquee__wrapper {
    display: flex;
    gap: var(--marquee-gap);
    width: fit-content;
    white-space: nowrap;
  }

  .marquee__content {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
  }

  .marquee__content :is(p, h1, h2, h3, h4, h5, h6) {
    white-space: nowrap;
  }

  .marquee__content .marquee__repeated-items * {
    max-width: none;
  }

  .marquee__repeated-items {
    min-width: max-content;
    display: flex;
    gap: var(--marquee-gap);
    align-items: center;
    justify-content: center;
  }

  .marquee__repeated-items > * {
    align-content: center;
  }

  .hero__content-wrapper.layout-panel-flex--column marquee-component {
    --margin-inline: var(--full-page-margin-inline-offset);

    width: -webkit-fill-available;
    min-height: max-content;
  }

  @media (prefers-reduced-motion: no-preference) {
    marquee-component:not([data-disabled]) .marquee__wrapper {
      animation: marquee-motion var(--marquee-speed) linear infinite var(--marquee-direction);
    }
  }

  @keyframes marquee-motion {
    to {
      transform: translate3d(calc(-50% - (var(--marquee-gap) / 2)), 0, 0);
    }
  }
/* END_BLOCK:_marquee */

/* START_BLOCK:_product-details (INDEX:93) */
/* Clear padding on mobile, if not full-width */
  @media screen and (max-width: 749px) {
    .product-information.section--page-width .product-details > .group-block {
      padding-inline: 0;
    }
  }

  .view-product-title {
    display: none;
  }

  /* Container styles */
  .product-details {
    display: flex;
    align-self: start;
    justify-content: center;
  }

  @media screen and (min-width: 750px) {
    .product-details > .group-block {
      height: min-content;
    }

    .full-height--desktop {
      height: 100%;
      max-height: calc(100vh - var(--header-group-height, 0));
      min-height: fit-content;
    }

    .full-height--desktop .group-block {
      align-self: var(--details-position, 'flex-start');
    }
  }
/* END_BLOCK:_product-details */

/* START_BLOCK:_search-input (INDEX:98) */
.search-page-input {
    width: 100%;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding-block: var(--padding-lg);
    padding-inline: calc(var(--icon-size-lg) + var(--margin-xl) * 1.5);
    text-overflow: ellipsis;
    overflow: hidden;
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);

    @media screen and (max-width: 749px) {
      padding-inline: calc(var(--margin-xs) + var(--icon-size-lg) + var(--padding-md));
    }
  }

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

  .search-page-input__parent {
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .search-results__no-results {
    opacity: var(--opacity-subdued-text);
  }

  search-page-input-component {
    position: relative;
    width: 100%;
    display: flex;
    top: 0;
    max-width: var(--size-style-width);
    align-items: center;
    background-color: var(--color-background);
    margin: var(--margin-2xl) 0 var(--margin-md);

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

  search-page-input-component .search__icon,
  search-page-input-component .search__icon:hover,
  search-page-input-component .search__reset-button,
  search-page-input-component .search__reset-button:hover {
    background: transparent;
    position: absolute;
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  search-page-input-component .search__icon svg,
  search-page-input-component .search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__icon svg {
    color: var(--color-input-text);
  }

  search-page-input-component .search__icon {
    left: var(--margin-lg);

    @media screen and (max-width: 749px) {
      left: var(--margin-md);
    }
  }

  search-page-input-component .search__reset-button {
    border-radius: 100%;
    color: var(--color-input-text);
    right: var(--margin-lg);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--animation-speed) var(--animation-easing),
      visibility var(--animation-speed) var(--animation-easing);

    @media screen and (max-width: 749px) {
      right: var(--margin-md);
    }
  }

  search-page-input-component:has(.search-page-input:not(:placeholder-shown)) .search__reset-button {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  search-page-input-component .search__reset-button-icon {
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  search-page-input-component .search__reset-button:active .search__reset-button-icon {
    transform: scale(0.9);
  }

  search-page-input-component .search__reset-button-icon svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  search-page-input-component .search__reset-button--hidden {
    cursor: default;
    opacity: 0;
    transition: opacity var(--animation-speed) var(--animation-easing);
    pointer-events: none;
    visibility: hidden;
  }

  search-page-input-component .search__reset-button-text {
    display: none;
  }
/* END_BLOCK:_search-input */

/* START_BLOCK:_slide (INDEX:99) */
.slide__content {
    height: 100%;
    position: relative;
    z-index: var(--layer-flat);

    @supports (animation-timeline: auto) {
      opacity: 0;
      animation: slide-reveal both linear;
      animation-timeline: var(--slideshow-timeline);
    }

    @media (prefers-reduced-motion) {
      opacity: 1;
      animation: none;
    }
  }

  .slide__content > * {
    margin: auto;
  }

  .slide__content.background-transparent {
    background-color: transparent;
  }

  slideshow-slide > .slide__image-container {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
  }

  .slide__image-container > .slide__image,
  .slide__image-container > .slide__video,
  .slide__image-container > .slide__video-poster {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .slide__image-container > .slide__video-poster {
    position: absolute;
  }

  /*
   * Force Safari to recalculate the timeline state on timeline refresh (after loop)
   */
  slideshow-component[refreshing-timeline] .slide__content {
    animation: none;
  }

  slideshow-slide .slide__image-container--rounded {
    border-radius: var(--corner-radius, 0);
  }
/* END_BLOCK:_slide */

/* START_BLOCK:_social-link (INDEX:100) */
.social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:_social-link */

/* START_BLOCK:accordion (INDEX:102) */
.accordion {
    flex: 1;
    width: 100%;
  }

  .accordion--dividers accordion-custom:not(:first-child) .details {
    border-block-start: var(--style-border-width) solid var(--color-border);
  }

  /* When accordion borders are not set, show fallback borders */
  .accordion--dividers {
    /* stylelint-disable-next-line declaration-property-value-disallowed-list */
    --show-fallback-borders: 0;
  }

  .accordion--dividers:not([class*='color-'])[style*='--border-width: 0'],
  .accordion--dividers:not([class*='color-'])[style*='--border-style: none'] {
    --show-fallback-borders: 1;
  }

  .accordion--dividers accordion-custom:first-child .details {
    border-block-start: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers accordion-custom:last-child .details {
    border-block-end: calc(var(--style-border-width) * var(--show-fallback-borders)) solid var(--color-border);
  }

  .accordion--dividers .details-content {
    padding-block-end: var(--padding-sm);
  }

  .accordion--caret .icon-plus,
  .accordion--plus .icon-caret {
    display: none;
  }

  /* because we can't pass apply a specific class on a block based on its parent block setting */
  .accordion .details__header {
    font-family: var(--summary-font-family);
    font-style: var(--summary-font-style);
    font-weight: var(--summary-font-weight);
    font-size: var(--summary-font-size);
    line-height: var(--summary-font-line-height);
    text-transform: var(--summary-font-case);
    min-height: var(--minimum-touch-target);
  }
/* END_BLOCK:accordion */

/* START_BLOCK:comparison-slider (INDEX:108) */
comparison-slider-component {
    display: block;
  }

  .comparison-slider {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider:not(:has(img)) {
    min-width: 25dvh;
  }

  .comparison-slider__container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* Container and Layout */
  .comparison-slider__media-wrapper {
    --compare: 50;

    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template: 1fr / 1fr;
    overflow: hidden;
  }

  /* Layer Containers */
  .comparison-slider__layer {
    grid-area: 1 / 1;
    position: relative;
    width: 100%;
    height: 100%;
    transition: clip-path var(--transition-duration, 0s) ease-in-out;
  }

  .comparison-slider__layer--after {
    z-index: var(--layer-base);
  }

  /* Before Layer Clipping (inverse of after layer) */
  [data-orientation='horizontal'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 calc((100 - var(--compare)) * 1%) 0 0);
  }

  [data-orientation='vertical'] .comparison-slider__layer--before {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 calc(var(--compare) * 1%) 0);
  }

  /* After Layer Clipping */
  [data-orientation='horizontal'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(0 0 0 calc(var(--compare) * 1%));
  }

  [data-orientation='vertical'] .comparison-slider__layer--after {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    clip-path: inset(calc((100 - var(--compare)) * 1%) 0 0 0);
  }

  /* Images and Placeholders */
  .before-image,
  .after-image,
  .comparison-slider__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }

  .comparison-slider__placeholder {
    position: absolute;
    inset: 0;
  }

  .comparison-slider__placeholder svg {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    fill: var(--color-foreground);
  }

  /* Range Input (Hidden but Functional) */
  .cs-slider {
    position: absolute;
    inset: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit;
    appearance: none;
  }

  [data-orientation='horizontal'] .cs-slider {
    cursor: ew-resize;
  }

  [data-orientation='vertical'] .cs-slider {
    cursor: ns-resize;
    writing-mode: vertical-lr;
    direction: rtl;
  }

  /* Range Input Thumb */
  .cs-slider::-webkit-slider-thumb,
  .cs-slider::-moz-range-thumb {
    width: var(--button-size);
    height: var(--button-size);
    border: 0;
    background: transparent;
    cursor: inherit;
    appearance: none;
  }

  /* Range Input Track */
  .cs-slider::-webkit-slider-track,
  .cs-slider::-moz-range-track {
    background: transparent;
    border: 0;
    appearance: none;
  }

  /* Visual Slider Elements */
  .comparison-slider__media-wrapper::before,
  .comparison-slider__media-wrapper::after {
    content: '';
    position: absolute;
    pointer-events: none;
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out;
    z-index: var(--layer-raised);
  }

  /* Slider Track Line */
  .comparison-slider__media-wrapper::after {
    background: var(--color-background);
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
  }

  .comparison-slider__media-wrapper::before {
    background: var(--color-background);
  }

  .comparison-slider__media-wrapper[data-orientation='horizontal']::after {
    inset: 0 auto;
    left: calc(var(--compare) * 1%);
    width: 4px;
    transform: translateX(-50%);
  }

  .comparison-slider__media-wrapper[data-orientation='vertical']::after {
    inset: auto 0;
    top: calc((100 - var(--compare)) * 1%);
    height: 4px;
    transform: translateY(-50%);
  }

  /* Slider Handle */
  .cs-slider__handle {
    position: absolute;
    z-index: var(--layer-heightened);
    pointer-events: none;
    width: var(--button-size);
    height: var(--button-size);
    background: var(--color-background);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px 0 rgb(0 0 0 / 0.1);
    transition: left var(--transition-duration, 0s) ease-in-out, top var(--transition-duration, 0s) ease-in-out,
      gap 0.2s ease-in-out;
    gap: var(--gap-sm);
    padding: var(--padding-xs);
  }

  .comparison-slider__media-wrapper:hover .cs-slider__handle {
    gap: var(--gap-2xs);
  }

  .cs-slider__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  [data-orientation='horizontal'] .cs-slider__handle {
    top: 50%;
    left: calc(var(--compare) * 1%);
    transform: translate(-50%, -50%);
    flex-direction: row;
  }

  [data-orientation='vertical'] .cs-slider__handle {
    left: 50%;
    top: calc((100 - var(--compare)) * 1%);
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Text Labels */
  .comparison-slider__text {
    position: absolute;
    padding: var(--padding-xs);
    pointer-events: none;
  }

  .comparison-slider__text--with-bg {
    background: var(--text-background-color);
    border-radius: var(--text-corner-radius);
  }

  /* Horizontal: before/after control inline (left/right), position controls block (top/bottom) */
  [data-orientation='horizontal'] .comparison-slider__text--before {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='horizontal'] .comparison-slider__text--after {
    inset-inline-end: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='start'] .comparison-slider__text {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='horizontal'][data-text-position='end'] .comparison-slider__text {
    inset-block-end: var(--padding-sm);
  }

  /* Vertical: before/after control block (top/bottom), position controls inline (left/right) */
  [data-orientation='vertical'] .comparison-slider__text--before {
    inset-block-start: var(--padding-sm);
  }

  [data-orientation='vertical'] .comparison-slider__text--after {
    inset-block-end: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='start'] .comparison-slider__text {
    inset-inline-start: var(--padding-sm);
  }

  [data-orientation='vertical'][data-text-position='end'] .comparison-slider__text {
    inset-inline-end: var(--padding-sm);
  }
/* END_BLOCK:comparison-slider */

/* START_BLOCK:contact-form-submit-button (INDEX:109) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:110) */
.contact-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
  }

  .contact-form__form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);

    @media screen and (min-width: 750px) {
      flex-direction: row;
      align-items: center;
    }
  }

  .contact-form__input {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    padding: var(--padding-lg) var(--padding-xl);
    border-radius: var(--style-border-radius-inputs);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    -webkit-font-smoothing: antialiased;
  }

  .contact-form__input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .contact-form__error,
  .contact-form__success {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }
/* END_BLOCK:contact-form */

/* START_BLOCK:email-signup (INDEX:112) */
.email-signup-block {
    --arrow-button-size: 58px;
    --arrow-button-size-integrated: 42px;
    --arrow-button-size-small: 20px;
    --arrow-icon-size: 32px;
    --arrow-icon-size-small: 24px;

    min-width: fit-content;

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

  .email-signup__heading {
    padding-block: var(--padding-sm);
  }

  .email-signup__form {
    display: flex;
    flex-direction: column;
  }

  .email-signup__input-group {
    display: flex;
    align-items: stretch;
    background-color: transparent;
  }

  .email-signup__input-group:not(.email-signup__input-group--integrated):not(.email-signup__input-group--underline) {
    gap: var(--gap-xs);
    align-items: center;
  }

  .email-signup__input-group:not(.email-signup__input-group--arrow):not(.email-signup__input-group--underline):not(
      .email-signup__input-group--integrated
    ) {
    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .email-signup__input-group--integrated {
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);
    background-color: var(--color-input-background);
  }

  .email-signup__input-group--integrated.email-signup__input-group--no-border {
    border: none;
  }

  .email-signup__input {
    flex: 1;
    min-width: 0;
    border-width: var(--border-width);
    border-radius: var(--border-radius);
    border-style: solid;
    border-color: var(--color-input-border);

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

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

  .email-signup__input.paragraph {
    color: var(--color-input-text);
    outline-color: var(--color-input-background);
  }

  .email-signup__button {
    white-space: nowrap;
    padding: 0;

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

  .email-signup__input,
  .email-signup__button--text {
    padding: var(--padding-lg) var(--padding-3xl);
  }

  .email-signup__input-group--underline {
    --box-shadow-color: var(--color-input-border);
    --box-shadow-multiplier: 1;
    --box-shadow-focused-multiplier: 1.75;

    box-shadow: 0 calc(var(--border-width) * var(--box-shadow-multiplier)) 0 var(--box-shadow-color);
    transition: box-shadow var(--animation-values);
    margin-block-end: calc(var(--border-width) * var(--box-shadow-focused-multiplier));

    &:focus-within {
      --box-shadow-multiplier: var(--box-shadow-focused-multiplier);
      --box-shadow-color: var(--color-input-text);
    }
  }

  .email-signup__input-group .email-signup__input--underline {
    color: var(--color-input-text);
    background-color: transparent;
    padding: 12px 0;
    border: none;
    border-radius: 0;

    &:focus-visible {
      outline: none;
    }
  }

  .email-signup__input::placeholder {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
  }

  .email-signup__input-group .email-signup__input--none {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border: none;
  }

  .email-signup__button-icon {
    color: currentcolor;
    padding: 5px;

    @media screen and (max-width: 749px) {
      padding: 0;
      align-self: center;
      justify-self: center;
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }
  }

  .email-signup__button--arrow {
    width: var(--arrow-button-size-small);
    height: var(--arrow-button-size-small);
    padding: 0;

    &:not(.email-signup__button--integrated) {
      width: var(--arrow-button-size);
      height: var(--arrow-button-size);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size);
        height: var(--arrow-icon-size);
        padding: 0;
      }
    }
  }

  .email-signup__button--integrated {
    --button-offset: var(--margin-xs);
    align-self: stretch;
    margin: var(--button-offset);
    flex-shrink: 0;

    @media screen and (max-width: 749px) {
      width: fit-content;
    }

    &.email-signup__button--text {
      padding: 0 var(--padding-3xl);
    }

    &.email-signup__button--text.button-unstyled {
      padding: 0 var(--padding-xl);
    }

    &.button-unstyled {
      border-radius: var(--border-radius);
    }

    > .email-signup__button-icon {
      padding: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__input--underline + .email-signup__button--integrated {
    margin: 0;
    align-self: center;

    &.email-signup__button--text {
      padding-block: 9px;
    }

    &.email-signup__button--text.button-unstyled {
      padding-inline: 0;
      min-width: 44px;
      min-height: 44px;
    }

    &.button-unstyled {
      border-radius: 0;
    }

    &.email-signup__button--arrow {
      width: var(--arrow-button-size-integrated);
      height: var(--arrow-button-size-integrated);
      display: flex;
      align-items: center;
      justify-content: center;

      > .email-signup__button-icon {
        width: var(--arrow-icon-size-small);
        height: var(--arrow-icon-size-small);
      }
    }
  }

  .email-signup__button:not(.button-unstyled) {
    background-color: var(--button-background-color);
    color: var(--button-color);
    text-transform: var(--button-text-case-primary);
  }

  .email-signup__button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

  .email-signup__button.button-unstyled {
    background-color: transparent;
    color: var(--color-input-text);
  }

  .email-signup__button.button-unstyled:hover {
    color: rgb(var(--color-input-text-rgb) / var(--opacity-70));
    cursor: pointer;
  }

  .email-signup__message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .email-signup__message-text {
    margin: 0;
  }
/* END_BLOCK:email-signup */

/* START_BLOCK:filters (INDEX:114) */
.facets-block-wrapper {
    @media screen and (min-width: 750px) {
      margin: var(--facets-margin);
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-block-wrapper--vertical {
    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
    }
  }

  .facets-toggle {
    --icon-offset: -3px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--minimum-touch-target);
    margin: var(--facets-margin);
    padding-block: var(--facets-inner-padding-block);
    padding-inline: var(--facets-inner-padding-inline);

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-toggle__wrapper {
    margin-left: var(--icon-offset);
  }

  .facets-toggle__button {
    box-shadow: none;

    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .filter-count-bubble {
    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    line-height: normal;
    place-content: center;
    color: var(--color-foreground);
    border: var(--icon-stroke-width) solid var(--color-background);
  }

  .facets-mobile__title-wrapper .h3 {
    margin-block-end: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .facets-mobile__title-wrapper .filter-count-bubble {
    width: 22px;
    height: 22px;
  }

  .facets-mobile__title-wrapper .filter-count-bubble__text {
    font-size: var(--font-size--xs);
  }

  .filter-count-bubble__background {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
    border-radius: var(--style-border-radius-50);
  }

  .filter-count-bubble__text {
    font-size: 11px;
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  .facets-toggle--no-filters {
    @media screen and (max-width: 749px) {
      /* stylelint-disable-next-line declaration-no-important */
      justify-content: unset !important;

      & > .facets-mobile-wrapper {
        width: 100%;
      }
    }
  }

  .facets-block-wrapper--vertical + .facets-toggle {
    @media screen and (max-width: 749px) {
      margin: 0;
    }
  }

  .facets-mobile-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    justify-content: flex-end;
  }

  .facets-mobile-wrapper--multiple-controls {
    justify-content: space-between;
  }

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

  .facets {
    --facets-form-horizontal-gap: 20px;
    --facets-horizontal-max-input-wrapper-height: 230px;
    --facets-upper-z-index: var(--layer-raised);
    --facets-open-z-index: var(--layer-heightened);
    --facets-sticky-z-index: var(--layer-sticky);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
    --facets-grid-panel-width: 300px;
    --facets-clear-padding: var(--padding-md);
    --facets-clear-shadow: 0 -4px 14px 0 rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
    --facets-input-label-color: rgb(var(--color-input-text-rgb) / var(--opacity-60));
    --facets-clear-all-min-width: 120px;
    --facets-see-results-min-width: 55%;
    --facets-mobile-gap: 22px;
    --facets-low-opacity: 10%;
    --facets-hover-opacity: 75%;

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

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

  .facets--horizontal {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: var(--padding-block-start) var(--padding-block-end);
      display: flex;
      align-items: center;
      position: relative;
      z-index: var(--facets-upper-z-index);
      border: none;
      height: auto;
      top: initial;
      bottom: initial;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--vertical {
    display: none;

    @media screen and (min-width: 750px) {
      padding-block: 0 var(--padding-block-end);
      display: block;
      position: static;
      top: auto;
      bottom: auto;
      height: auto;
      max-height: none;
      width: auto;
      overflow: visible;
    }
  }

  .facets--drawer {
    border-radius: 0;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    padding-inline: 0;
  }

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

  .facets-drawer__form-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__form-wrapper .facets__form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .facets-drawer__filters {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
  }

  .facets-drawer__filters .facets__filters-wrapper,
  .facets-drawer__filters .filter-remove-buttons,
  .facets-drawer__filters .sorting-filter-component {
    overflow: visible;
  }

  .facets.facets-controls-wrapper {
    @media screen and (min-width: 750px) {
      grid-column: column-1 / column-12;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
      gap: 0 var(--facets-form-horizontal-gap);
      padding-bottom: var(--padding-xs);
    }
  }

  .facets__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--padding-lg);
    width: 100%;
  }

  :is(.facets--drawer, .facets--vertical) .facets__inputs:not(:has(.show-more)) {
    padding-block-end: var(--padding-sm);
  }

  /* Facets - Form */
  .facets__form-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground-muted);
    width: 100%;
  }

  .facets--horizontal .facets__form-wrapper {
    @media screen and (min-width: 750px) {
      flex-direction: row;
      height: auto;
    }
  }

  .facets__form {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
  }

  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      flex-flow: row nowrap;
      height: auto;
    }
  }

  .facets:not(.facets--drawer) .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      margin-inline-end: var(--margin-md);
    }
  }

  .facets--horizontal .facets__filters-wrapper {
    @media screen and (min-width: 750px) {
      max-width: 60%;
      display: flex;
      flex-wrap: wrap;
      column-gap: var(--gap-xl);
      margin-inline-end: 0;
    }
  }

  /* Facets - Summary */
  .facets__summary {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;
    --icon-opacity: 0.5;

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

    font-size: var(--font-h5--size);
    display: flex;
    justify-content: space-between;

    &:hover {
      --icon-opacity: 1;
    }
  }

  .facets__filters-wrapper:hover .facets__summary,
  .facets__filters-wrapper:has(.facets__panel[open]) .facets__summary {
    opacity: var(--facets-hover-opacity);
  }

  .facets__filters-wrapper .facets__summary:hover,
  .facets__filters-wrapper .facets__panel[open] .facets__summary {
    opacity: 1;
  }

  .facets--horizontal .facets__summary {
    @media screen and (min-width: 750px) {
      font-size: var(--font-paragraph--size);
      justify-content: flex-start;
      height: var(--minimum-touch-target);
    }
  }

  .facets__summary .icon-caret {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    color: rgb(var(--color-foreground-rgb) / var(--icon-opacity));
    margin-block: var(--margin-2xs);
    transition: color var(--animation-speed) var(--animation-easing);
  }

  .facets--drawer .facets__summary .icon-caret {
    margin-inline-start: var(--margin-2xs);
  }

  /* Facets - Bubble */
  .facets__bubble {
    display: inline-flex;
    font-family: var(--font-paragraph--family);
    font-weight: var(--font-paragraph--weight);
    aspect-ratio: 1 / 1;
  }

  /* Facets - Inputs */
  .facets__inputs-wrapper {
    margin-block: var(--padding-xs) var(--padding-xs);
  }

  .facets__inputs .show-more {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    margin-block-end: var(--padding-xl);
  }

  .facets:not(.facets--drawer) .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      gap: var(--gap-sm);
    }
  }

  .facets--horizontal .facets__inputs .show-more {
    @media screen and (min-width: 750px) {
      display: contents;
    }
  }

  .facets--horizontal .facets__inputs-wrapper {
    @media screen and (min-width: 750px) {
      max-height: var(--facets-horizontal-max-input-wrapper-height);
      scrollbar-width: none;
      -ms-overflow-style: none;
      overflow-x: auto;
      padding: var(--padding-md);
      margin-block: 0;
    }
  }

  .facets--vertical .facets__inputs:has(.show-more) .facets__inputs-wrapper {
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-sm);
    margin-block: calc(var(--padding-sm) * -1);
    margin-inline: calc(var(--padding-sm) * -1);
  }

  @media screen and (max-width: 749px) {
    .facets__inputs:has(.show-more) .facets__inputs-wrapper {
      padding-block: var(--padding-sm);
      padding-inline: var(--padding-sm);
      margin-block: calc(var(--padding-sm) * -1);
      margin-inline: calc(var(--padding-sm) * -1);
    }
  }

  .facets__inputs-wrapper:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper .facets__inputs-list {
    display: flex;
    gap: var(--facets-mobile-gap);
    flex-direction: column;

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

  @media screen and (min-width: 750px) {
    .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches {
      gap: var(--gap-sm);
    }

    .facets--horizontal
      .facets__inputs-wrapper
      .facets__inputs-list--swatches:not(.facets__inputs-list--swatches-grid) {
      display: grid;
      grid-template-columns: repeat(var(--swatch-columns, 4), 1fr);
    }
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches {
    --facets-mobile-gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--grid {
    --min-column-width: 20%;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column-width), 1fr));
    gap: var(--gap-sm);

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

  .facets-block-wrapper:not(.facets-block-wrapper--vertical) .facets__inputs-list--grid {
    @media screen and (min-width: 750px) {
      width: var(--facets-grid-panel-width);
    }
  }

  .facets__inputs-wrapper--row:not(:has(.facets__inputs-list)),
  .facets__inputs-wrapper--row .facets__inputs-list {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .facets__inputs .show-more__button {
    --show-more-icon-size: 22px;
    --show-more-gap: 8px;

    gap: var(--show-more-gap);

    @media screen and (min-width: 750px) {
      --show-more-icon-size: 16px;
      --show-more-gap: 6px;
    }
  }

  .facets__inputs .show-more__button .icon-plus {
    width: var(--show-more-icon-size);
    height: var(--show-more-icon-size);

    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  /* Facets - Panel */
  .facets__panel {
    padding: 0 var(--drawer-padding);
  }

  .facets:not(.facets--drawer) .facets__panel,
  .facets-controls-wrapper .facets__panel {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets__panel {
    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  .facets-mobile-wrapper .facets__panel-content {
    border-radius: var(--style-border-radius-popover);
  }

  .facets-mobile-wrapper {
    --facets-upper-z-index: var(--layer-raised);
    --facets-panel-min-width: 120px;
    --facets-panel-height: 300px;
  }

  .facets--horizontal .facets__panel-content {
    @media screen and (min-width: 750px) {
      border-radius: var(--style-border-radius-popover);
      position: absolute;
      top: 100%;
      width: max-content;
      min-width: var(--facets-panel-min-width);
      max-width: var(--facets-panel-width);
      max-height: var(--facets-panel-height);
      z-index: var(--facets-upper-z-index);
      box-shadow: var(--shadow-popover);
      border: var(--style-border-popover);
      background-color: var(--color-background);
      overflow-y: hidden;
      gap: 0;
    }
  }

  :is(.facets--drawer, .facets--vertical) :is(.facets__item, .sorting-filter)::before {
    content: '';
    display: block;
    height: 0;
    width: calc(100% - var(--drawer-padding) * 2);
    border-top: var(--style-border-width) solid var(--color-border);
    margin: 0 auto;
  }

  @media screen and (min-width: 750px) {
    .facets:not(.facets--drawer) :is(.facets__item, .sorting-filter)::before {
      width: 100%;
    }

    .facets--horizontal .facets__item:not(:first-of-type)::before,
    .facets--horizontal .sorting-filter::before {
      content: none;
    }
  }

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

  /* Facets - Text */
  .facets__label,
  .facets__clear-all-link,
  .clear-filter {
    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link {
    display: none;
    cursor: pointer;
    padding: var(--padding-xs);
    color: var(--button-color);
    transition: text-decoration-color var(--animation-speed) var(--animation-easing),
      color var(--animation-speed) var(--animation-easing);
  }

  .facets__clear-all-link:hover {
    --button-color: var(--color-primary-hover);

    text-decoration: underline;
    text-decoration-color: var(--button-color);
  }

  .facets__clear-all-link--horizontal {
    height: var(--minimum-touch-target);
    padding-inline: var(--facets-form-horizontal-gap);
    min-width: var(--facets-clear-all-min-width);
  }

  .facets__clear-all-link--active {
    display: block;
  }

  .facets__label,
  .products-count-wrapper {
    text-transform: var(--facet-label-transform);
  }

  .clear-filter {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
  }

  .clear-filter:hover {
    text-decoration: underline;
  }

  /* Clear button */
  .facets__clear {
    display: none;
  }

  .facets--horizontal .facets__clear {
    @media screen and (min-width: 750px) {
      width: 100%;
      justify-content: flex-end;
      padding: 0 var(--facets-clear-padding) var(--facets-clear-padding) 0;
      cursor: pointer;
    }
  }

  .facets__clear--active {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Facets - Label */
  .facets__label {
    color: var(--color-foreground);
    cursor: pointer;
    white-space: nowrap;

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

  /* Products count */
  .products-count-wrapper {
    display: none;
  }

  .facets--horizontal .products-count-wrapper {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-left: auto;
      flex-shrink: 0;
      align-items: center;
      height: var(--minimum-touch-target);
    }
  }

  /* Mobile specific components */
  .facets__title-wrapper {
    background-color: var(--color-background);
    color: var(--color-foreground);
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-xs);
    padding-inline-start: var(--drawer-padding);
    padding-inline-end: var(--padding-2xs);
    z-index: var(--facets-sticky-z-index);
  }

  :is(.facets--horizontal, .facets--vertical) .facets__title-wrapper {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-drawer__title {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

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

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

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

  /* Status */
  .facets__status:not(:empty) {
    width: max-content;
    display: flex;
    margin-inline-start: auto;
    font-weight: 500;
    color: var(--color-foreground);
  }

  .facets__panel[open] .facets__status {
    display: none;
  }

  .facets--filters-title {
    margin-block-end: 0;
    color: var(--color-foreground);
    height: fit-content;

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

  .facets--horizontal .facets__panel .facets__status:has(:not(:empty)) {
    @media screen and (min-width: 750px) {
      display: flex;
      margin-inline-start: var(--margin-xs);
      margin-inline-end: var(--margin-xs);
    }
  }

  /* Horizontal filter style */
  .facets--horizontal .facets__form {
    @media screen and (min-width: 750px) {
      gap: 0 var(--facets-form-horizontal-gap);
    }
  }

  /* Facets - Actions */
  .facets__drawer-actions {
    --to-top-gradient-background: linear-gradient(
      to top,
      rgb(var(--color-background-rgb) / var(--opacity-90)),
      rgb(var(--color-background-rgb) / var(--opacity-80)),
      rgb(var(--color-background-rgb) / var(--opacity-40)),
      transparent
    );

    position: sticky;
    bottom: 0;
    z-index: var(--facets-sticky-z-index);
    order: 1;
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--gap-sm);
    padding-block-start: var(--padding-xs);
    padding-block-end: var(--padding-md);
    padding-inline: var(--padding-lg);
    margin-top: auto;
    background-image: var(--to-top-gradient-background);
    background-color: var(--color-background);
  }

  /* Clear all button */
  .facets__clear-all {
    display: none;
    cursor: pointer;
    min-width: var(--facets-clear-all-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
    color: var(--button-color, inherit);
  }

  .facets__clear-all--active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: transform var(--animation-values), opacity var(--animation-values);
  }

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

  .facets__see-results {
    min-width: var(--facets-see-results-min-width);
    flex-grow: 1;
    padding-block: var(--padding-lg);
  }

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

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

/* START_BLOCK:footer-policy-list (INDEX:117) */
.policy-list-trigger {
    anchor-name: --terms-policies-trigger;
    cursor: pointer;
    font-size: var(--font-size, 0.75rem);
    text-transform: var(--text-transform, none);
  }

  .policy_list {
    li {
      border-radius: calc(var(--style-border-radius-popover) - 8px);

      a {
        color: var(--color-foreground);
        display: inline-block;
        padding: 8px;
        text-align: start;
        width: 100%;
        outline-color: #0000;
        font-size: var(--font-size, 0.75rem);
        text-transform: var(--text-transform, none);
      }

      &:is(:hover, :focus-within) {
        background: rgb(var(--color-foreground-rgb) / 0.15);
      }
    }
  }

  .terms-policies-popover {
    position-anchor: --terms-policies-trigger;
    inset: unset;
    bottom: calc(anchor(top) + 1rem);
    left: anchor(left);
    border-radius: var(--style-border-radius-popover);
    background: linear-gradient(var(--color-background) 0 100%),
      linear-gradient(rgb(var(--color-background-rgb) / 0.15) 0 100%);
    background-clip: padding-box, border-box;
    border: 1px solid #0000;
    box-shadow: var(--shadow-popover);
    padding: 8px;
    margin: 0;
    opacity: 0;
    scale: 0.94;
    translate: 0 6px;
    transform-origin: 3.9em 100%;
  }

  .terms-policies-popover.\:popover-open,
  .terms-policies-popover:popover-open {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  @media screen and (max-width: 749px) {
    .terms-policies-popover {
      left: anchor(center);
      transform: translate(-50%, 0);
      transform-origin: 0% 100%;
    }
  }

  @supports not (position-anchor: --account-button-trigger) {
    .terms-policies-popover {
      bottom: unset;
      top: calc(var(--anchor-top) * 1px);
      left: calc(var(--anchor-left) * 1px);
      transform: translate(0, calc(-100% - 1.25rem));
    }

    @media screen and (max-width: 749px) {
      .terms-policies-popover {
        left: calc((var(--anchor-left) + (var(--anchor-width) / 2)) * 1px);
        transform: translate(-50%, calc(-100% - 1.25rem));
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .terms-policies-popover {
      transition-property: display, overlay, opacity, scale, translate;
      transition-behavior: allow-discrete;
      transition-duration: 0.3s;
      transition-timing-function: var(--ease-out-quad);
    }

    @starting-style {
      .terms-policies-popover.\:popover-open,
      .terms-policies-popover:popover-open {
        opacity: 0.7;
        translate: 0 6px;
        scale: 0.94;
      }
    }
  }
/* END_BLOCK:footer-policy-list */

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

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

/* START_BLOCK:image (INDEX:120) */
.image-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .placeholder-image {
    position: relative;
    aspect-ratio: var(--ratio);
    overflow: hidden;
  }

  .image-block {
    display: flex;

    /* When the image is nested in a group, section, etc, respect the parent's horizontal alignment */
    justify-content: var(--horizontal-alignment, 'inline-start');
  }

  .image-block--height-fill .image-block__image {
    height: 100%;
  }

  .image-block__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
  }
/* END_BLOCK:image */

/* START_BLOCK:logo (INDEX:122) */
.logo-block {
    width: calc(var(--logo-width) + var(--padding-inline-start) + var(--padding-inline-end));
    max-width: 100%;
    max-height: calc(var(--logo-height, 100%) + var(--padding-block-start) + var(--padding-block-end));
    font-size: var(--logo-height);
    display: flex;

    @media screen and (max-width: 749px) {
      max-height: calc(
        var(--logo-height-mobile, var(--logo-height, 100%)) + var(--padding-block-start) + var(--padding-block-end)
      );
      font-size: var(--logo-height-mobile, var(--logo-height));
      width: calc(
        var(--logo-width-mobile, var(--logo-width)) + var(--padding-inline-start) + var(--padding-inline-end)
      );
    }
  }

  .logo-block__image-wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .logo-block__image {
    object-fit: contain;
    width: 100%;
  }
/* END_BLOCK:logo */

/* START_BLOCK:menu (INDEX:123) */
.menu {
    width: 100%;
  }

  .menu:not(:has(.menu__heading--empty)) .details-content {
    margin-block-start: var(--spacing--size);
  }

  .menu__item + .menu__item {
    margin-block-start: var(--spacing--size);
  }

  .menu .menu__heading--empty {
    display: none;
  }

  .menu__heading__default {
    display: contents;
  }

  .menu__heading__accordion {
    display: none;
  }

  @media screen and (max-width: 749px) {
    /* Always show the fallback heading on mobile when accordion is enabled */
    .menu--accordion .menu__heading--empty {
      display: flex;
    }

    .menu--accordion .menu__heading__accordion {
      display: contents;
    }

    .menu--accordion .menu__heading__default {
      display: none;
    }

    .menu--accordion .details-content {
      margin-block-start: var(--spacing--size);
    }

    .menu--accordion .menu__details {
      padding-inline: 0;
    }

    .menu--dividers .menu__details {
      border-block-end: var(--style-border-width) solid var(--color-border);
    }

    .menu--dividers .details-content {
      padding-block-end: var(--padding-sm);
    }
  }
/* END_BLOCK:menu */

/* START_BLOCK:page (INDEX:125) */
.page-block {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: auto;
    align-items: flex-start;
  }

  .page-title {
    margin-bottom: var(--margin-xl);
  }
/* END_BLOCK:page */

/* START_BLOCK:payment-icons (INDEX:126) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payment-icons */

/* START_BLOCK:popup-link (INDEX:127) */
.popup-link__button svg {
    display: inline-block;
    position: relative;
    top: var(--margin-2xs);
  }

  .popup-link__content {
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover);
    background-color: var(--color-background);
    padding: var(--padding-4xl) var(--padding-xl) var(--padding-xl);
    max-width: var(--normal-content-width);
    max-height: var(--modal-max-height);

    @media screen and (min-width: 750px) {
      padding: var(--padding-5xl);
    }
  }

  .popup-link__content[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .popup-link__content--drawer {
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
  }

  /* Needed to ensure the drawer is full height */
  .popup-link__content--drawer:modal {
    max-height: 100dvh;
  }

  .popup-link__close {
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    opacity: 0.8;
    animation: none;
  }
/* END_BLOCK:popup-link */

/* START_BLOCK:product-custom-property (INDEX:130) */
product-custom-property-component {
    display: block;
    width: 100%;
  }

  product-custom-property-component .__heading {
    margin-inline: 0;
    margin-block: 0 var(--padding-sm);
  }

  product-custom-property-component .__heading:has(+ .__description) {
    margin-block-end: var(--padding-2xs);
  }

  product-custom-property-component .__description {
    font-size: min(0.85em, var(--font-paragraph--size));
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-inline: 0;
    margin-block: 0 var(--padding-md);
  }

  product-custom-property-component .__field {
    position: relative;
  }

  product-custom-property-component .__input-wrapper {
    position: relative;
  }

  product-custom-property-component input,
  product-custom-property-component textarea {
    width: 100%;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* Add padding for inputs with counter inside */
  product-custom-property-component .__input-wrapper input {
    padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component .__input-wrapper textarea {
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  product-custom-property-component textarea {
    min-height: 80px;
  }

  @supports (resize: vertical) {
    @media (hover: hover) and (pointer: fine) {
      product-custom-property-component textarea {
        resize: vertical; /* stylelint-disable-line */
      }
    }
  }

  product-custom-property-component .__character-label {
    position: absolute;
    left: var(--input-padding-x);
    bottom: var(--padding-sm);
    pointer-events: none;
  }

  product-custom-property-component .__character-count {
    font-style: italic;
    /* stylelint-disable-next-line declaration-no-important */
    color: var(--color-input-text) !important;
  }

  /* We should consolidate input styles that share the same behavior */
  .custom-property__input {
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    /* this is needed to override the styles from field__input */
    box-shadow: none;

    &:is(:hover, :focus) {
      /* this is needed to override the styles from field__input */
      box-shadow: none;
    }

    &:focus {
      /* this is needed to override the styles from field__input */
      outline: var(--focus-outline-width) solid var(--color-input-background);
    }
  }
/* END_BLOCK:product-custom-property */

/* START_BLOCK:product-inventory (INDEX:132) */
.product-inventory__status {
    display: flex;
    align-items: center;
    font-size: var(--font-paragraph--size);
    line-height: var(--font-paragraph--line-height);
    gap: var(--padding-xs);
  }

  .product-inventory__icon,
  .product-inventory__icon svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .product-inventory__icon-low {
    color: var(--color-lowstock);
  }

  .product-inventory__icon-in_stock {
    color: var(--color-instock);
  }

  .product-inventory__icon-out_of_stock {
    color: var(--color-outofstock);
  }

  .product-inventory__icon circle:first-of-type {
    opacity: 0.3;
  }
/* END_BLOCK:product-inventory */

/* START_BLOCK:product-recommendations (INDEX:133) */
.block-resource-list {
    display: flex;
    flex-direction: column;
    row-gap: var(--gap);
    min-width: 0;
    min-height: 0;
    container-type: inline-size;
    container-name: resource-list;
    border-radius: var(--border-radius, 0);
  }

  .product-recommendations-wrapper {
    width: 100%;
  }

  .product-recommendations-wrapper:has(product-recommendations[data-shopify-editor-preview]) {
    width: 100vw;
  }
/* END_BLOCK:product-recommendations */

/* START_BLOCK:review (INDEX:136) */
.rating-wrapper {
    gap: var(--gap-xs);
    min-width: fit-content;
  }

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

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

  .rating-wrapper,
  .rating {
    display: flex;
    align-items: center;
  }

  .rating-wrapper.justify-right {
    flex-direction: row-reverse;
  }

  .rating {
    gap: var(--gap-3xs);
  }

  .rating-wrapper .rating-count,
  .rating-wrapper .rating-count-separator {
    color: var(--star-fill-color);
    margin: 0;
    white-space: nowrap;
  }

  .rating-count-separator {
    opacity: var(--opacity-20);
    padding-left: calc(var(--padding-xs) / 2);
    padding-right: var(--padding-xs);
  }

  .stars {
    height: var(--star-size);
    fill: var(--empty-star-fill-color);
  }

  .filled-star {
    fill: var(--star-fill-color);
  }
/* END_BLOCK:review */

/* START_BLOCK:social-links (INDEX:138) */
.social-icons__wrapper {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
    justify-content: center;

    @media screen and (min-width: 750px) {
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
  }

  .social-icons__icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: flex;
    flex-shrink: 0;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .social-icons__icon {
    display: none;
  }

  .social-icons__icon-wrapper:has(.social-icons__icon path) {
    width: var(--icon-size-lg);

    .social-icons__icon {
      display: block;
    }

    .social-icons__icon-label {
      display: none;
    }
  }

  /* Disabled state for editor */
  .shopify-design-mode .social-icons__icon-wrapper--disabled {
    opacity: var(--disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .shopify-design-mode .social-icons__icon-wrapper--disabled a {
    pointer-events: none;
  }
/* END_BLOCK:social-links */

/* START_BLOCK:spacer (INDEX:139) */
/* Fill opposite direction */
  .layout-panel-flex--column > .spacer-block {
    width: 100%;
  }

  .layout-panel-flex--row > .spacer-block {
    height: 100%;
  }

  /* Flex - Percent */
  :is(.layout-panel-flex--row, .layout-panel-flex--column) > .spacer-block--size-percent {
    flex: var(--spacer-size);
  }

  /* Flex - Pixel */
  .layout-panel-flex--row > .spacer-block--size-pixel {
    width: var(--spacer-size);
  }

  .layout-panel-flex--column > .spacer-block--size-pixel {
    height: var(--spacer-size);
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    /* Percent */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-percent {
      flex: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-percent,
    .mobile-column > .spacer-block--size-percent:not(.spacer-block--size-mobile-pixel) {
      width: 100%;
      flex: var(--spacer-size-mobile);
    }

    /* Pixel */
    .layout-panel-flex--row:not(.mobile-column) > .spacer-block--size-mobile-pixel {
      width: var(--spacer-size-mobile);
      height: 100%;
    }

    .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
    .mobile-column > .spacer-block--size-mobile-pixel {
      width: 100%;
      flex: 0;
      height: var(--spacer-size-mobile);
    }
  }
/* END_BLOCK:spacer */

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

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:144) */
accordion-custom {
    details {
      &::details-content,
      .details-content {
        block-size: 0;
        overflow-y: clip;
        opacity: 0;
        interpolate-size: allow-keywords;
        transition: content-visibility var(--animation-speed-slow) allow-discrete,
          padding-block var(--animation-speed-slow) var(--animation-easing),
          opacity var(--animation-speed-slow) var(--animation-easing),
          block-size var(--animation-speed-slow) var(--animation-easing);
      }

      /* Disable transitions when the content toggle is not caused by the direct user interaction, e.g. opening the filters on mobile. */
      &:not(:focus-within)::details-content,
      &:not(:focus-within) .details-content {
        transition: none;
      }

      &:not([open]) {
        &::details-content,
        .details-content {
          padding-block: 0;
        }
      }

      &[open] {
        &::details-content,
        .details-content {
          opacity: 1;
          block-size: auto;

          @starting-style {
            block-size: 0;
            opacity: 0;
            overflow-y: clip;
          }

          &:focus-within {
            overflow-y: visible;
          }
        }
      }
    }
  }

  accordion-custom[data-disable-on-mobile='true'] summary {
    @media screen and (max-width: 749px) {
      cursor: auto;
    }
  }

  accordion-custom[data-disable-on-desktop='true'] summary {
    @media screen and (min-width: 750px) {
      cursor: auto;
    }
  }
/* END_SNIPPET:accordion-custom-component */

/* START_SNIPPET:anemoia-cart-recommendations (INDEX:148) */
.acart-recs {
    --acart-recs-cta: var(--anemoia-cta, #fea500);
    /* The row's side gutter, shared with the heading and the arrow placement so
       all three line up on the same edge. */
    --acart-recs-gutter: var(--cart-drawer-padding, 1.25rem);
    display: block;
    padding: var(--padding-2xs) 0 0;
    /* Push the section down toward the summary so the gap before "Estimated
       total" shrinks (shares the flex free space with the sticky summary). */
    margin-top: auto;
    min-width: 0;
  }

  .acart-recs__title {
    margin: 0 0 0.4rem;
    padding-inline: var(--acart-recs-gutter);
    font-size: var(--font-size--2xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.6);
  }

  @media screen and (min-width: 750px) {
    .acart-recs {
      --acart-recs-gutter: var(--padding-2xl);
    }
  }

  .acart-recs__viewport {
    position: relative;
  }

  .acart-recs__row {
    display: flex;
    gap: var(--gap-xs);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-inline: var(--acart-recs-gutter);
    /* Snapping measures from the scrollport, not the padding box, so without
       this the browser lands on the first card by scrolling the left gutter
       away the moment the row appears — losing the indent and lighting up the
       "previous" arrow on a row nobody has touched. */
    scroll-padding-inline: var(--acart-recs-gutter);
    padding-bottom: 0;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar — the peeking next card signals it scrolls. */
    scrollbar-width: none;
  }

  .acart-recs__row::-webkit-scrollbar {
    display: none;
  }

  /* Round arrows straddling the ends of the row, centred on the cards' images.
     Desktop only: a finger already swipes the row, and on a phone the drawer is
     too narrow to give up the width. */
  .acart-recs__nav {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.14);
    border-radius: 999px;
    background: var(--color-background, #fff);
    color: rgb(var(--color-foreground-rgb) / 0.85);
    cursor: pointer;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.14);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  /* Half on the gutter, half over the first/last card, as on the reference. */
  .acart-recs__nav--prev { left: calc(var(--acart-recs-gutter) - 1rem); }
  .acart-recs__nav--next { right: calc(var(--acart-recs-gutter) - 1rem); }

  .acart-recs__nav svg {
    width: 1rem;
    height: 1rem;
  }

  .acart-recs__nav:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgb(0 0 0 / 0.2);
  }

  .acart-recs__nav[hidden] {
    display: none;
  }

  @media screen and (min-width: 750px) {
    /* Shown from here up. An end the JS has hidden stays hidden: the [hidden]
       rule carries the higher specificity. */
    .acart-recs__nav {
      display: inline-flex;
    }
  }

  .acart-recs__card {
    position: relative;
    flex: 0 0 auto;
    width: clamp(6rem, 28%, 7rem);
    scroll-snap-align: start;
    border-radius: 6px;
    overflow: hidden;
    background: rgb(var(--color-foreground-rgb) / 0.06);
  }

  .acart-recs__media {
    display: block;
    aspect-ratio: 1 / 1;
  }

  .acart-recs__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .acart-recs__price {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    padding: 0.08rem 0.35rem;
    border-radius: 5px;
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    background: rgb(0 0 0 / 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .acart-recs__form {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
  }

  .acart-recs__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    cursor: pointer;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
    transition: background 0.2s ease, transform 0.15s ease;
  }

  .acart-recs__add:hover {
    background: var(--anemoia-cta-hover, #e89400);
    transform: translateY(-1px);
  }

  .acart-recs__add[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .acart-recs__plus {
    width: 0.9rem;
    height: 0.9rem;
  }
/* END_SNIPPET:anemoia-cart-recommendations */

/* START_SNIPPET:anemoia-cart-shipping-bar (INDEX:149) */
.acart-ship {
    --acart-ship-cta: var(--anemoia-cta, #fea500);
    /* Width the cart pointer needs alongside it. While the bar is in progress the
       fill travels the track MINUS this, so the cart can never ride off the end;
       once the goal is reached the reserve is dropped and the bar fills. */
    --acart-ship-ptr: 2.9rem;
    padding: var(--padding-lg) var(--cart-drawer-padding, 1.25rem) var(--padding-sm);
  }

  @media screen and (min-width: 750px) {
    .acart-ship {
      padding-inline: var(--padding-2xl);
    }
  }

  .acart-ship__label {
    margin: 0;
    font-size: var(--font-size--sm);
    line-height: 1.35;
    color: var(--color-foreground);
  }

  .acart-ship__label strong {
    font-weight: 700;
  }

  .acart-ship__track {
    position: relative;
    height: 5px;
    margin-top: 0.85rem;
    border-radius: 999px;
    background: rgb(var(--color-foreground-rgb) / 0.14);
  }

  /* The pointer LEADS the fill, so the fill's travel has to stop a pointer-width
     short of the track end — otherwise a nearly-full bar (99%: "spend another
     $1.00") pushes the cart out past the track and the drawer clips it in half.
     --acart-ship-pct is unitless precisely so it can scale a length here. */
  .acart-ship__fill {
    height: 100%;
    width: calc(var(--acart-ship-pct, 0) / 100 * (100% - var(--acart-ship-ptr, 2.9rem)));
    min-width: 5px;
    border-radius: 999px;
    background: var(--acart-ship-cta);
    position: relative;
    transition: width 0.45s var(--animation-easing, ease);
  }

  /* Pointer LEADS the fill: its left edge sits at the fill's end so the CTA colour
     progress stops just before the cart image (no overlap). Sized off the same
     --acart-ship-ptr the fill reserves, so the two can't drift apart.
     max-width/min-width are explicit because base.css sets `img { max-width: 100% }`,
     which otherwise clamps this to the FILL's width — near 0% the fill is 5px wide
     and the cart shrank to an invisible speck. */
  .acart-ship__ptr {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-8%, -50%);
    width: var(--acart-ship-ptr, 2.9rem);
    height: var(--acart-ship-ptr, 2.9rem);
    min-width: var(--acart-ship-ptr, 2.9rem);
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.35));
  }

  /* Goal reached: the bar reads FULL. The reserved travel above exists so an
     in-progress pointer can't ride off the end — but at 100% there is nothing
     left to make room for, so the fill runs the whole track and the cart tucks
     in at the end on top of it, rather than leaving a pointer-width of empty
     rail behind it. */
  .acart-ship__track--complete .acart-ship__fill {
    width: 100%;
  }

  .acart-ship__track--complete .acart-ship__ptr {
    left: auto;
    right: 0;
    transform: translate(15%, -50%);
  }

  /* Solar shows cartslider.png; Lunar swaps to cart.png (cartslider is invisible
     against the dark lunar drawer). Only one pointer renders per mode. */
  .acart-ship__ptr--lunar {
    display: none;
  }

  html[data-anemoia-mode='lunar'] .acart-ship__ptr--solar {
    display: none;
  }

  html[data-anemoia-mode='lunar'] .acart-ship__ptr--lunar {
    display: block;
  }
/* END_SNIPPET:anemoia-cart-shipping-bar */

/* START_SNIPPET:anemoia-footer (INDEX:152) */
.anemoia-footer__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .anemoia-footer__group { display: inline-flex; gap: 1rem; }

  .anemoia-footer__line a {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
  }

  .anemoia-footer__line a:hover { opacity: 0.75; }
  .anemoia-footer__sep { color: #fff; opacity: 0.6; }

  /* Social links: text on desktop, Files-image icons on mobile. */
  .anemoia-footer__social { align-items: center; gap: 0.9rem; }
  .anemoia-footer__social a { display: inline-flex; align-items: center; }
  .anemoia-footer__icon {
    display: none;
    width: 1.05rem;
    height: 1.05rem;
    object-fit: contain;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
  }

  /* Mobile: text links share a row; the social icons get their own row below. */
  @media screen and (max-width: 749px) {
    .anemoia-footer__line {
      gap: 0.3rem 0.6rem;
      font-size: 0.66rem;
      letter-spacing: 0.06em;
    }

    /* A touch heavier than desktop's 400 so the smaller type still reads as
       solidly as the desktop line does. */
    .anemoia-footer__line a { font-weight: 600; }

    .anemoia-footer__sep { display: none; }
    .anemoia-footer__group { order: 1; gap: 0.6rem; }
    .anemoia-footer__social {
      order: 2;
      flex-basis: 100%;
      justify-content: center;
    }

    .anemoia-footer__txt { display: none; }
    .anemoia-footer__icon { display: block; width: 1.15rem; height: 1.15rem; }
  }
/* END_SNIPPET:anemoia-footer */

/* START_SNIPPET:anemoia-mode-toggle (INDEX:155) */
.anemoia-mode-toggle {
    display: inline-flex;
    align-items: center;
  }

  .anemoia-mode-toggle__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: var(--minimum-touch-target);
    font-size: var(--font-size--2xs, 0.6875rem);
    letter-spacing: 0.1em;
    color: currentcolor;
    cursor: pointer;
  }

  .anemoia-mode-toggle__label {
    opacity: 0.45;
  }

  .anemoia-mode-toggle__divider {
    opacity: 0.45;
  }

  html[data-anemoia-mode='solar'] .anemoia-mode-toggle__label--solar,
  html[data-anemoia-mode='lunar'] .anemoia-mode-toggle__label--lunar {
    opacity: 1;
  }

  /* Sun / moon icons: hidden on desktop (text switch is used there). The
     inactive one stays clearly visible (and tappable); the active one glows. */
  .anemoia-mode-toggle__icon {
    display: none;
    width: 1.5rem;
    height: 1.5rem;
    color: #f6f3ec;
    opacity: 0.55;
  }

  .anemoia-mode-toggle__icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* Active SOLAR: warm, pulsing sun glow. */
  html[data-anemoia-mode='solar'] .anemoia-mode-toggle__icon--solar {
    opacity: 1;
    color: #ffcf5a;
    animation: anemoia-sun-glow 2.4s ease-in-out infinite;
  }

  /* Active LUNAR: cool, breathing moon glow. */
  html[data-anemoia-mode='lunar'] .anemoia-mode-toggle__icon--lunar {
    opacity: 1;
    color: #e2e9ff;
    animation: anemoia-moon-glow 2.8s ease-in-out infinite;
  }

  @keyframes anemoia-sun-glow {
    0%, 100% {
      filter: drop-shadow(0 0 2px rgba(255, 196, 74, 0.55));
      transform: scale(1);
    }
    50% {
      filter: drop-shadow(0 0 9px rgba(255, 196, 74, 0.95));
      transform: scale(1.1);
    }
  }

  @keyframes anemoia-moon-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(200, 215, 255, 0.5)); }
    50% { filter: drop-shadow(0 0 9px rgba(200, 215, 255, 0.9)); }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .anemoia-mode-toggle__icon {
      transition: opacity 0.2s ease, color 0.2s ease;
    }
  }

  @media screen and (prefers-reduced-motion: reduce) {
    .anemoia-mode-toggle__icon--solar,
    .anemoia-mode-toggle__icon--lunar {
      animation: none;
    }
  }

  /* Mobile: lift the toggle out of the cramped header row and stack the two
     icons vertically just below the cart, top-right of the viewport. */
  @media screen and (max-width: 749px) {
    .anemoia-mode-toggle {
      position: fixed;
      top: calc(var(--header-height, 60px) + 0.5rem);
      right: 0.65rem;
      z-index: 30;
    }

    .anemoia-mode-toggle__button {
      flex-direction: column;
      gap: 0.55rem;
      min-height: 0;
      color: #f6f3ec;
      filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
    }

    .anemoia-mode-toggle__label,
    .anemoia-mode-toggle__divider {
      display: none;
    }

    .anemoia-mode-toggle__icon {
      display: block;
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    .anemoia-mode-toggle__label {
      transition: opacity 0.2s ease;
    }
  }

  .anemoia-mode-toggle__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
/* END_SNIPPET:anemoia-mode-toggle */

/* START_SNIPPET:anemoia-nfc-window (INDEX:156) */
/* ---- NFC XP window (scoped .nfcxp-*) ----------------------------------- */
  .nfcxp-overlay {
    position: fixed;
    inset: 0;
    z-index: 30; /* above the CRT glass (7) and the Back button (8) */
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
    background: rgba(3, 7, 16, 0.55);
  }

  /* display:grid above would defeat the hidden attribute without these */
  .nfcxp-overlay[hidden], .nfcxp-msg[hidden] { display: none; }

  .nfcxp-win {
    display: flex;
    flex-direction: column;
    width: min(26rem, 100%);
    max-height: calc(100svh - 1.5rem);
    font-family: Tahoma, 'Segoe UI', Verdana, sans-serif;
    font-size: 0.85rem;
    color: #1a1a1a;
    background: #ece9d8;
    border: 3px solid #0855dd;
    border-top: 0;
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  }

  .nfcxp-titlebar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.2rem 0.3rem 0.2rem 0.55rem;
    background: linear-gradient(180deg, #2989f8 0%, #0955e3 12%, #0a4fd6 45%, #0d5bdd 82%, #0846c4 100%);
    border-radius: 5px 5px 0 0;
  }

  .nfcxp-titlebar__icon {
    width: 0.9rem;
    height: 0.75rem;
    background: linear-gradient(180deg, #ffe89a, #e8b64c);
    border: 1px solid #8a6d1d;
    border-radius: 1px 3px 1px 1px;
  }

  .nfcxp-titlebar__text {
    flex: 1;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(9, 27, 80, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 44px hit area around the small visual X */
  .nfcxp-close {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -0.55rem -0.45rem -0.55rem 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nfcxp-close__box {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #f1997e 0%, #e56b4c 40%, #cb3a12 100%);
    border: 1px solid #fff;
    border-radius: 3px;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.6);
  }

  .nfcxp-close:hover .nfcxp-close__box { filter: brightness(1.15); }
  .nfcxp-close:active .nfcxp-close__box { filter: brightness(0.9); }

  .nfcxp-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9rem 0.9rem 0.2rem;
  }

  .nfcxp-text { margin: 0 0 0.7rem; line-height: 1.45; }

  .nfcxp-label {
    display: block;
    margin-bottom: 0.3rem;
  }

  /* The `.nfcxp-win` prefix is load-bearing, not tidiness: base.css styles
     fields with `input:not([type='...'])` (0,1,1), which outranks a lone class
     (0,1,0) and hands the field the active colour scheme's colours. In LUNAR
     that is black ink on a black fill — an invisible claim code. This dialog is
     classic XP in both modes, so the light field is pinned across every state
     the browser might otherwise repaint. */
  .nfcxp-win .nfcxp-input,
  .nfcxp-win .nfcxp-input:hover,
  .nfcxp-win .nfcxp-input:focus,
  .nfcxp-win .nfcxp-input:active {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.6rem;
    font-family: inherit;
    font-size: 1rem; /* ≥16px so iOS Safari doesn't zoom the page on focus */
    color: #111;
    background-color: #fff;
    border: 1px solid #7f9db9;
    border-radius: 0;
    box-shadow: inset 1px 1px 2px rgba(64, 84, 106, 0.28); /* sunken */
  }

  .nfcxp-win .nfcxp-input::placeholder { color: #767676; opacity: 1; }

  .nfcxp-win .nfcxp-input:focus {
    outline: none;
    border-color: #2a5fbe;
    box-shadow: inset 1px 1px 2px rgba(64, 84, 106, 0.28), 0 0 0 1px rgba(42, 95, 190, 0.35);
  }

  /* Autofill repaints the field from the UA's own palette; pin it too. */
  .nfcxp-win .nfcxp-input:-webkit-autofill,
  .nfcxp-win .nfcxp-input:-webkit-autofill:hover,
  .nfcxp-win .nfcxp-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
    caret-color: #111;
  }

  .nfcxp-input--area { resize: vertical; min-height: 5.5rem; }

  #nfcxp-code { text-transform: uppercase; letter-spacing: 0.12em; }

  /* Honeypot: visually gone, still in the form for bots */
  .nfcxp-hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .nfcxp-hint {
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    color: #55534a;
  }

  .nfcxp-dest {
    margin: 0 0 0.8rem;
    padding: 0.55rem 0.6rem;
    background: #fff;
    border: 1px solid #7f9db9;
    box-shadow: inset 1px 1px 2px rgba(64, 84, 106, 0.28);
    overflow-wrap: anywhere;
  }

  .nfcxp-dest__arrow { color: #245edb; font-weight: 700; }

  .nfcxp-group {
    margin: 0 0 0.8rem;
    padding: 0.4rem 0.6rem 0.5rem;
    border: 1px solid #b9b5a4;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.8);
  }

  .nfcxp-group__legend { padding: 0 0.3rem; color: #1741a0; }

  .nfcxp-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem; /* 44px touch target, retro look intact */
    cursor: pointer;
  }

  .nfcxp-radio input { accent-color: #1741a0; width: 1rem; height: 1rem; }

  .nfcxp-field { margin-bottom: 0.8rem; }

  .nfcxp-btnrow {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    flex: 0 0 auto;
    padding: 0.55rem 0.9rem 0.8rem;
    margin: 0 -0.9rem;
  }

  .nfcxp-btn {
    min-width: 5.5rem;
    min-height: 2.75rem; /* 44px */
    padding: 0.3rem 1rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: #1a1a1a;
    background: linear-gradient(180deg, #fefefe 0%, #f4f3ee 45%, #e9e6d8 55%, #dcd8c8 100%);
    border: 1px solid #7c7c68;
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.22);
    cursor: pointer;
  }

  .nfcxp-btn--default { border-color: #23408c; box-shadow: inset 0 0 0 1px #9fbcf1, inset 1px 1px 0 rgba(255, 255, 255, 0.9), 1px 1px 2px rgba(0, 0, 0, 0.22); }
  .nfcxp-btn:hover { filter: brightness(1.04); }
  .nfcxp-btn:active { box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3); }
  .nfcxp-btn[disabled] { color: #8b887b; cursor: wait; filter: grayscale(0.3); }

  .nfcxp-overlay.is-busy, .nfcxp-overlay.is-busy * { cursor: wait; }

  /* ---- Message box ------------------------------------------------------- */
  .nfcxp-msg {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(3, 7, 16, 0.3);
  }

  .nfcxp-win--msg { width: min(20rem, 100%); }

  .nfcxp-body--msg {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding-top: 1rem;
  }

  .nfcxp-body--msg .nfcxp-text { margin: 0.1rem 0 0.6rem; }

  .nfcxp-msg__icon { font-size: 1.7rem; line-height: 1; }
  .nfcxp-msg__icon.is-info { color: #1741a0; }
  .nfcxp-msg__icon.is-warn { color: #d59b00; }

  .nfcxp-btnrow--msg { justify-content: center; margin: 0; }
/* END_SNIPPET:anemoia-nfc-window */

/* START_SNIPPET:background-media (INDEX:164) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:165) */
.bento-box {
    display: grid;
    column-gap: var(--bento-gap);
    row-gap: calc(var(--bento-gap) * 1.5);
    width: 100%;
  }

  .bento-box:has(.collection-card--image-bg) {
    row-gap: var(--bento-gap);
  }

  .bento-box ~ .bento-box {
    padding-block-start: var(--bento-gap);
  }

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

    .bento-box__item {
      /* Prevent grid items from overflowing their cells when children have aspect-ratio */
      min-width: 0;
      overflow: hidden;
    }

    .bento-box__item:nth-child(3n + 1) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 2) {
      grid-column: span 1;
    }

    .bento-box__item:nth-child(3n + 3) {
      grid-column: span 2;
    }

    /* Ensure last items create a full row */
    .bento-box__item:last-child:nth-child(3n + 5) {
      grid-column: span 1;
    }

    .bento-box__item:last-child:nth-child(3n + 4) {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 901px) {
    .bento-box {
      grid-template-columns: repeat(12, 1fr);
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K L L L L';
    }

    .bento-box__item:nth-child(1) {
      grid-area: A;
    }

    .bento-box__item:nth-child(2) {
      grid-area: B;
    }

    .bento-box__item:nth-child(3) {
      grid-area: C;
    }

    .bento-box__item:nth-child(4) {
      grid-area: D;
    }

    .bento-box__item:nth-child(5) {
      grid-area: E;
    }

    .bento-box__item:nth-child(6) {
      grid-area: F;
    }

    .bento-box__item:nth-child(7) {
      grid-area: G;
    }

    .bento-box__item:nth-child(8) {
      grid-area: H;
    }

    .bento-box__item:nth-child(9) {
      grid-area: I;
    }

    .bento-box__item:nth-child(10) {
      grid-area: J;
    }

    .bento-box__item:nth-child(11) {
      grid-area: K;
    }

    .bento-box__item:nth-child(12) {
      grid-area: L;
    }

    /* === Overrides for specific item counts === */

    /* Exactly 1 item */
    .bento-box--items-1 {
      grid-template-areas: 'A A A A A A A A A A A A';
    }

    /* Exactly 2 items */
    .bento-box--items-2 {
      grid-template-areas: 'A A A A A A B B B B B B';
    }

    /* Exactly 4 items */
    .bento-box--items-4 {
      grid-template-areas:
        'A A A A B B B B B B B B'
        'C C C C C C C C D D D D';
    }

    /* Exactly 5 items */
    .bento-box--items-5 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E E E E';
    }

    /* Exactly 7 items */
    .bento-box--items-7 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D D D D E E E'
        'F F F F F F G G G G G G';
    }

    /* Exactly 8 items */
    .bento-box--items-8 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H H H H H H H';
    }

    /* Exactly 10 items */
    .bento-box--items-10 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G G G G G G G H H H'
        'I I I J J J J J J J J J';
    }

    /* Exactly 11 items */
    .bento-box--items-11 {
      grid-template-areas:
        'A A A B B B B B B C C C'
        'D D D D D D E E E F F F'
        'G G G H H H I I I I I I'
        'J J J J K K K K K K K K';
    }
  }
/* END_SNIPPET:bento-grid */

/* START_SNIPPET:blog-comment-form (INDEX:166) */
.blog-post-comments__form-container {
    --comment-form-gap: var(--gap-md);

    width: 100%;
    max-width: var(--normal-content-width);
    margin: var(--margin-4xl) auto 0;
  }

  .blog-post-comments__form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--comment-form-gap);

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

  .blog-post-comments__form-input {
    padding: var(--padding-lg) var(--padding-xl);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
  }

  .blog-post-comments__form-input--textarea {
    resize: vertical;
    min-height: var(--input-textarea-min-height);
  }

  .blog-post-comments__form-message {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
  }

  .blog-post-comments__form-body {
    grid-column: 1 / -1;
  }

  .blog-post-comments__form-input:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .blog-post-comments__form-moderated {
    font-size: var(--font-size--xs);
  }

  .blog-post-comments__form-submit {
    margin-block-start: var(--comment-form-gap);
  }
/* END_SNIPPET:blog-comment-form */

/* START_SNIPPET:button (INDEX:168) */
.link {
    text-decoration: none;
    text-decoration-color: currentcolor;

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

/* START_SNIPPET:buy-buttons-styles (INDEX:169) */
.buy-buttons-block {
    --buy-button-preferred-width: 185px;

    width: 100%;
  }

  .product-form-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .product-form-buttons:not(:has(.quantity-rules)) {
    gap: calc(var(--gap-sm) / 2);

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

  .product-form-buttons
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex: 1 1 var(--buy-button-preferred-width, 0);
    min-width: fit-content;
  }

  .product-form-buttons--stacked
    > *:not(.quantity-selector-wrapper, .quantity-rules, .quantity-label, .volume-pricing, .product-form-text__error) {
    flex-basis: 51%;
  }

  .product-form-buttons button {
    width: 100%;
    padding-block: var(--padding-lg);
  }

  .quantity-selector {
    flex-grow: 0;
    flex-shrink: 0;
    height: var(--height-buy-buttons);
  }

  .quantity-label {
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--sm);
    margin-block-end: var(--gap-xs);
  }

  .quantity-label__cart-count {
    color: var(--color-foreground-secondary);
  }

  .quantity-rules {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    row-gap: calc(var(--gap-xs) / 2);
    flex: 1 0 100%;
    width: 100%;
    font-size: var(--font-size--xs);
    color: var(--color-foreground-secondary);
    margin-block-start: var(--gap-xs);
    margin-block-end: var(--gap);
  }

  .product-form-buttons:has(~ .volume-pricing .volume-pricing__title) .quantity-rules {
    margin-block-end: var(--gap-md);
  }

  .quantity-rules__item {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .quantity-rules__item:not(:last-child) {
    padding-right: var(--padding-xl);
    margin-right: var(--margin-2xs);
  }

  .quantity-rules__item:not(:last-child)::after {
    content: '•';
    position: absolute;
    inset-inline-end: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5em;
    line-height: 0;
  }

  .add-to-cart-button {
    height: var(--height-buy-buttons);
    text-transform: var(--button-text-case-primary);
  }

  .add-to-cart-button.button-secondary {
    text-transform: var(--button-text-case-secondary);
  }

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

  .product__pickup-availabilities {
    width: 100%;
  }

  .pickup-availability__column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .pickup-availability__row {
    display: flex;
    gap: var(--padding-xs);
  }

  .pickup-availability__dialog-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .pickup-availability__header-container {
    padding-block-end: var(--padding-2xl);
  }

  .pickup-location__wrapper {
    display: flex;
    flex-direction: column;
    padding-block: var(--padding-2xl);
    border-top: 1px solid var(--color-border);
    gap: var(--padding-xs);
  }

  .pickup-location__address-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
  }

  .pickup-location__dialog {
    padding: var(--padding-2xl);
    position: fixed;
    border-radius: 0;
    width: var(--sidebar-width);
    max-width: 95vw;
    height: 100%;
    margin: 0 0 0 auto;
    border: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    background-color: var(--color-background);
  }

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

  .pickup-location__text-sm {
    font-size: var(--font-size--sm);
    margin: 0;
  }

  .pickup-location__text-xs {
    font-size: var(--font-size--xs);
    margin: 0;
  }

  .pickup-location__button {
    width: fit-content;
    color: var(--color-primary);
    font-size: var(--font-size--xs);
    font-family: var(--font-body--family);
    padding: 0;
    cursor: pointer;
    margin-block: var(--margin-xs);
  }

  .pickup-location__button:hover {
    color: var(--color-primary-hover);
  }

  .pickup-location__h4 {
    margin: 0;
  }

  .pickup-location__text-bold {
    font-size: var(--font-size--md);
    font-weight: 600;
    margin: 0;
  }

  .pickup-location__availability-wrapper {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    font-family: var(--font-paragraph--family);
  }

  .pickup-location__address {
    font-style: normal;
  }

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

  .volume-pricing {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
  }

  .volume-pricing:not(:has(.volume-pricing__title)) {
    margin-top: 0;
    margin-bottom: 0;
  }

  .volume-pricing__title {
    display: block;
    margin-block-end: var(--gap-sm);
    font-size: var(--font-size--sm);
    font-weight: var(--font-body--weight);
    color: var(--color-foreground);
  }

  .volume-pricing__table {
    width: 100%;
  }

  .volume-pricing__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-md);
    font-size: var(--font-size--sm);
  }

  .volume-pricing__row--even {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing__row--odd {
    background: var(--color-background);
  }

  .volume-pricing__collapsible-wrapper {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    interpolate-size: allow-keywords;
    transition: opacity var(--animation-speed-slow) var(--animation-easing),
      block-size var(--animation-speed-slow) var(--animation-easing);
  }

  .volume-pricing__toggle {
    width: 100%;
    padding-bottom: 0;
    padding-inline: 0;
    text-align: left;
    color: var(--color-foreground-secondary);
    font-size: var(--font-size--xs);
    cursor: default;
    margin-block-start: 0;
    pointer-events: none;
  }

  button.volume-pricing__toggle {
    /* Need the extra specificity to override .product-form-buttons button */
    padding-block: var(--padding-sm);
  }

  .volume-pricing__toggle-text {
    cursor: pointer;
    display: inline-block;
    pointer-events: auto;
  }

  .volume-pricing__show-less {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__collapsible-wrapper {
    opacity: 1;
    block-size: auto;

    @starting-style {
      block-size: 0;
      opacity: 0;
      overflow-y: clip;
    }
  }

  .volume-pricing--expanded .volume-pricing__show-more {
    display: none;
  }

  .volume-pricing--expanded .volume-pricing__show-less {
    display: inline;
  }

  /* Accelerated checkout styles — co-located here so they compile on pages
     where the quick-add modal can display buy buttons (e.g. collection pages). */
  .accelerated-checkout-block[data-shopify-visual-preview] {
    width: 300px;
  }

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

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

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

  .shopify-payment-button__more-options[aria-hidden='true'] {
    display: none;
  }
/* END_SNIPPET:buy-buttons-styles */

/* START_SNIPPET:card-gallery (INDEX:170) */
.card-gallery {
    overflow: hidden;
    container-type: inline-size; /* Make card-gallery a container */
    container-name: card-gallery-container; /* Optional: name the container */
  }

  .card-gallery__placeholder svg {
    height: 100%;
    width: 100%;
  }

  .card-gallery svg {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
  }

  .product-card-gallery__title-placeholder {
    padding: var(--padding-md);
    font-size: var(--font-size--2xl);
    line-height: var(--line-height--display-loose);
    word-break: break-word;
    color: var(--color-foreground);
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    aspect-ratio: var(--gallery-aspect-ratio);
    border-radius: var(--product-corner-radius);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-card-gallery__title-placeholder a {
    color: var(--color-foreground);
  }

  @media screen and (min-width: 750px) {
    .product-grid[data-product-card-size='extra-large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-3xl);
      font-size: var(--font-size--3xl);
    }

    .product-grid[data-product-card-size='large'] .product-card-gallery__title-placeholder {
      padding: var(--padding-2xl);
      font-size: var(--font-size--2xl);
    }

    .product-grid[data-product-card-size='medium'] .product-card-gallery__title-placeholder {
      padding: var(--padding-xl);
      font-size: var(--font-size--xl);
    }

    .product-grid[data-product-card-size='small'] .product-card-gallery__title-placeholder {
      padding: var(--padding-sm);
      font-size: var(--font-size--lg);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-3xl) + 50px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-2xl) + 50px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-xl) + 50px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size='extra-large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-3xl) + 40px);
    }

    .product-grid[data-product-card-size='large']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-2xl) + 40px);
    }

    .product-grid[data-product-card-size='medium']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-xl) + 40px);
    }

    .product-grid[data-product-card-size='small']
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  @media screen and (max-width: 749px) {
    .product-card-gallery__title-placeholder {
      font-size: var(--font-size--xl);
      padding: var(--padding-md);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-right
      .product-card-gallery__title-placeholder {
      padding-right: calc(var(--padding-sm) + 50px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-top-left
      .product-card-gallery__title-placeholder {
      padding-top: calc(var(--padding-sm) + 40px);
    }

    .product-grid[data-product-card-size]
      .card-gallery.card-gallery--badge-bottom-left
      .product-card-gallery__title-placeholder {
      padding-bottom: calc(var(--padding-sm) + 40px);
    }
  }

  [product-grid-view='zoom-out'] .card-gallery .product-card-gallery__title-placeholder {
    /* stylelint-disable-next-line declaration-no-important */
    padding: var(--padding-xs) !important;
    font-size: var(--font-size--xs);
  }

  [product-grid-view='zoom-out'] .card-gallery .slideshow-control {
    min-width: auto;
  }

  ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
    display: block;
  }

  [product-grid-view='zoom-out']
    .card-gallery
    > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
    display: none;
  }

  ul[product-grid-view='zoom-out'] .card-gallery > img {
    display: block;
  }

  .card-gallery slideshow-arrows .slideshow-control {
    /* Align icons with quick-add button */
    padding-inline: var(--padding-xl);

    @container (max-width: 249px) {
      padding-inline: 0 var(--padding-sm);
    }
  }

  /*
   * Card galleries preview the next or previous images on 'pointerenter', so we
   * try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .card-gallery
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:card-gallery */

/* START_SNIPPET:cart-bubble (INDEX:171) */
.cart-bubble {
    --cart-padding: 0.2em;

    position: relative;
    width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    border-width: 0;
    display: flex;
    line-height: normal;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-button-text);
    padding-inline: var(--cart-padding);
  }

  .cart-bubble[data-maintain-ratio] {
    aspect-ratio: 1;
  }

  .cart-bubble[data-maintain-ratio] .cart-bubble__background {
    border-radius: var(--style-border-radius-50);
  }

  .cart-bubble__background {
    position: absolute;
    inset: 0;
    background-color: var(--color-primary-button-background);
    border-radius: var(--style-border-radius-lg);
  }

  .cart-bubble__text {
    font-size: var(--font-size--3xs);
    z-index: var(--layer-flat);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:cart-bubble */

/* START_SNIPPET:cart-items-component (INDEX:172) */
.cart-items-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

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

    html:active-view-transition-type(empty-cart-page) {
      .cart-items-component {
        view-transition-name: cart-page-content;
      }
    }
  }

  ::view-transition-old(cart-page-content) {
    animation: cart-page-content-old var(--animation-speed-fast) var(--animation-easing) forwards;
  }

  @keyframes cart-page-content-old {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      filter: blur(4px);
    }
  }

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

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

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

  @keyframes cart-contents-new {
    from {
      scale: 1.05;
      translate: 0 128px;
      filter: blur(1px);
      opacity: 0;
    }
  }
/* END_SNIPPET:cart-items-component */

/* START_SNIPPET:cart-products (INDEX:173) */
.cart-items {
    --cart-item-media-width-min: 2.5rem;
    --cart-item-media-width-max: 7.5rem;

    container-name: cart-items;
    container-type: inline-size;
    width: 100%;
  }

  .cart-items-disabled {
    pointer-events: none;
  }

  .cart-page--empty .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 0;
    text-align: center;
  }

  .cart-drawer:not(:has(.cart-form)) .cart-items__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .cart-items__table {
    width: 100%;
    border-spacing: 0;
  }

  .cart-items__table * {
    margin: 0;
  }

  .cart-items__table-row {
    --cart-item-price-width: 6rem;

    display: grid;
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) minmax(var(--cart-item-price-width), auto);
    grid-template-areas:
      'media details price'
      'media quantity price'
      'media error error';
    column-gap: var(--gap-md);
    align-items: start;
    padding-bottom: var(--cart-items-gap);
    margin-bottom: var(--margin-lg);
  }

  /* Cart drawer: separate grid areas for variants and unit price */
  .cart-drawer .cart-items__table-row--full-width-variants {
    grid-template-columns: clamp(2.5rem, 15cqi, 7.5rem) minmax(0, 1fr) auto;
    grid-template-rows: repeat(4, min-content) 1fr;
    grid-template-areas:
      'media details price'
      'media variants variants'
      'media unit_price unit_price'
      'media quantity quantity'
      'media error error';

    .cart-items__details {
      display: contents;
    }

    .cart-items__product-info {
      grid-area: details;
    }

    .cart-items__variants-wrapper {
      grid-area: variants;

      &:empty {
        display: none;
      }

      p {
        margin: 0;
      }
    }

    .cart-items__unit-price-wrapper {
      grid-area: unit_price;
      font-size: var(--font-size--sm);
    }

    .cart-items__price {
      min-width: auto;
      width: max-content;
    }
  }

  .cart-items__table-row.cart-items__nested-line td:first-child {
    width: 60%;
    justify-self: right;
  }

  html:active-view-transition-type(page-navigation) .cart-items__table-row {
    /* stylelint-disable-next-line declaration-no-important */
    view-transition-name: none !important;
  }

  .cart-items__table-row.removing {
    overflow: hidden;
    animation: removeRow calc(var(--animation-speed) * 2) var(--animation-easing) forwards;
    animation-delay: var(--animation-speed);
  }

  @keyframes removeRow {
    0% {
      height: var(--row-height);
    }

    100% {
      opacity: 0;
      height: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      border-color: transparent;
    }
  }

  .cart-items__table-row:last-child {
    padding-bottom: 0;
  }

  .cart-items--dividers .cart-items__table-row {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--cart-items-gap);
  }

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

  .cart-items--dividers .cart-items__table-row:last-of-type {
    border-block-end: none;
    padding-block-end: 0;
    margin-bottom: 0;
  }

  .cart-items__details {
    grid-area: details;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-70));
  }

  .cart-items__details > * + *,
  .cart-items__bundle li {
    margin-block-start: var(--margin-3xs);
  }

  .cart-items__details * {
    font-size: var(--font-size--sm);
  }

  .cart-items__details a {
    text-decoration: none;
  }

  .cart-items__title {
    font-size: var(--font-size--md);
    color: var(--color-foreground);
    text-transform: var(--product-title-case);
    display: block;
    margin-block-start: calc((var(--font-size--md) - 1lh) / 2);
  }

  .cart-items__variants {
    display: block;
  }


  .cart-items__variant {
    display: inline;
  }

  .cart-items__variant dt,
  .cart-items__variant dd {
    display: inline;
    margin: 0;
  }

  .cart-items__quantity {
    grid-area: quantity;
    margin-block-start: var(--margin-xs);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-xs);
    width: fit-content;
  }

  .cart-items__quantity-controls > .volume-pricing-info {
    margin-inline-start: calc(-1 * var(--minimum-touch-target) - var(--gap-xs));
  }

  .cart-items__quantity .quantity-selector {
    display: inline-flex;
    font-size: var(--font-size--sm);
    height: auto;
  }

  .cart-items__remove {
    background-color: transparent;
    color: var(--color-foreground);
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    justify-content: center;
    box-shadow: none;
    padding: 0;
  }

  .cart-items__media {
    grid-area: media;
    padding: 0;
  }

  .cart-items__price {
    grid-area: price;
    min-height: unset;
    min-width: var(--cart-item-price-width);
    text-align: end;
    display: block;
    font-size: var(--font-size--sm);
    line-height: var(--line-height);
  }


  .cart-items__price-unit {
    font-size: var(--font-size--xs);
    padding-block-start: var(--padding-2xs);
  }

  .cart-items__media-container {
    display: flex;
    aspect-ratio: var(--ratio);
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cart-items__media-image {
    aspect-ratio: inherit;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: auto;
  }

  .cart-items__empty-button {
    margin-top: var(--margin-md);
    padding-inline: var(--padding-4xl);
    padding-block: var(--padding-lg);
    /* Anemoia (custom): explicit CTA fill so the label stays legible in
       both SOLAR and LUNAR cart-drawer schemes (the generic .button colors
       collapse the text into the background here). */
    background: var(--anemoia-cta, #fea500);
    border: 1.5px solid #dedede;
    color: var(--anemoia-cta-ink, #fff);
  }

  .cart-items__empty-button:hover {
    background: var(--anemoia-cta-hover, #e89400);
  }

  .cart-items__empty-button .button-text {
    color: var(--anemoia-cta-ink, #fff);
  }

  /* Anemoia (custom): empty-state subtext */
  .cart-items__empty-subtext {
    margin: 0;
    color: var(--color-foreground-muted);
    text-align: center;
  }

  /* Error message */
  .cart-items__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    grid-area: error;
    margin-block-start: var(--margin-xs);
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: opacity var(--drawer-animation-speed) var(--animation-easing),
      transform var(--drawer-animation-speed) var(--animation-easing);

    @starting-style {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  .cart-item__error {
    display: flex;
    align-items: flex-start;
    width: 100%;
    font-size: var(--font-size--sm);
    padding-block: var(--padding-2xs);
  }

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

  @container cart-items (min-width: 720px) {
    /* Cart page: original layout */
    .cart-items__table-row {
      --cart-item-price-width: 6rem;

      grid-template-columns: 7.5rem 1fr 1fr minmax(var(--cart-item-price-width), auto);
      grid-template-rows: min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media details error error';
    }

    .cart-items__quantity,
    .cart-items__price {
      grid-area: initial;
    }

    .cart-items__quantity {
      margin-top: 0;
    }

    .cart-items__price {
      min-height: var(--minimum-touch-target);
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    /* Cart drawer: separate areas for variants and unit price */
    .cart-drawer .cart-items__table-row--full-width-variants {
      grid-template-rows: min-content min-content min-content 1fr;
      grid-template-areas:
        'media details quantity price'
        'media variants variants variants'
        'media unit_price unit_price unit_price'
        'media error error error';

      .cart-items__quantity,
      .cart-items__price {
        grid-area: initial;
      }
    }
  }

  .cart__subtotal-container,
  .cart__total-container {
    display: flex;
    flex-direction: column;
  }

  .cart__total-container {
    row-gap: var(--gap-2xs);

    &.cart__total-container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart__subtotal-container:empty {
    display: none;
  }

  .cart__summary-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

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

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

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

  .cart__total {
    font-weight: var(--font-weight-bold);
  }

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

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

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

  .cart-primary-typography {
    font-family: var(--cart-primary-font-family);
    font-style: var(--cart-primary-font-style);
    font-weight: var(--cart-primary-font-weight);
  }

  .cart-secondary-typography {
    font-family: var(--cart-secondary-font-family);
    font-style: var(--cart-secondary-font-style);
    font-weight: var(--cart-secondary-font-weight);
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__additional-checkout-buttons {
    width: 100%;
  }

  shopify-accelerated-checkout-cart {
    --shopify-accelerated-checkout-inline-alignment: center;
    --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-primary);
    --shopify-accelerated-checkout-row-gap: var(--checkout-button-gap, 10px);
  }

  /* Remove animation */
  .remove-icon-bottom,
  .remove-icon-top {
    transition: transform var(--animation-speed) var(--animation-easing);
  }

  .cart-items__remove:hover .remove-icon-top {
    transform: translate(calc(-1 * var(--icon-stroke-width)), var(--icon-stroke-width)) rotate(-15deg);
  }

  .cart-items__remove:is(:hover, :active) .remove-icon-bottom {
    transform: translateY(var(--icon-stroke-width));
  }

  .cart-items__table-row.removing .remove-icon-bottom {
    transform: translateY(0);
  }

  .cart-items__table-row.removing .remove-icon-top {
    animation: removeButtonClickedIconTop var(--animation-speed) var(--animation-easing) forwards;
  }

  @keyframes removeButtonClickedIconTop {
    50% {
      transform: translate(0, calc(-1 * var(--icon-stroke-width)));
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .cart-items__properties {
    display: block;
    margin-block-start: var(--margin-2xs);
  }

  .cart-items__property {
    display: block;
  }

  .cart-items__properties dt,
  .cart-items__properties dd {
    display: inline;
    margin: 0;
    overflow-wrap: break-word;
  }

  @media screen and (min-width: 750px) {
    .cart-items .quantity-selector {
      --quantity-selector-width: 105px;
      height: var(--button-size-md);
      width: var(--quantity-selector-width);
    }

    .cart-items .quantity-selector button {
      width: var(--button-size-md);
      height: var(--button-size-md);
    }

    .cart-items .quantity-selector input {
      max-width: calc(var(--quantity-selector-width) - var(--button-size-md) * 2);
    }
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    html:active-view-transition-type(empty-cart-drawer) {
      .cart-items__empty-button,
      .cart__checkout-button {
        view-transition-name: cart-drawer-primary-action;

        & > .button-text {
          view-transition-name: cart-drawer-primary-action-text;
        }
      }
    }
  }

  ::view-transition-old(cart-drawer-primary-action-text),
  ::view-transition-new(cart-drawer-primary-action-text) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    overflow-clip-margin: 1em;
  }

  ::view-transition-old(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) reverse forwards;
  }
  ::view-transition-new(cart-drawer-primary-action-text) {
    animation: cart-drawer-primary-action-text var(--animation-speed) var(--animation-easing) forwards;
  }

  ::view-transition-old(cart-drawer-primary-action),
  ::view-transition-new(cart-drawer-primary-action) {
    height: 100%;
  }

  ::view-transition-group(cart-drawer-primary-action-text),
  ::view-transition-group(cart-drawer-primary-action) {
    animation-duration: var(--spring-d300-b0-duration);
    animation-timing-function: var(--spring-d300-b0-easing);
  }

  @keyframes cart-drawer-primary-action-text {
    from {
      filter: blur(3px);
      opacity: 0;
    }
    to {
      filter: none;
      opacity: 1;
    }
  }
/* END_SNIPPET:cart-products */

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

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

  .cart-totals:not(:has(.cart-actions)) {
    margin-block-start: var(--margin-3xs);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--margin-xl);
  }

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

  .cart-totals__tax-note {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-totals__tax-note small {
    font-size: var(--font-size--2xs);
  }

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

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

  .cart-discounts__label {
    display: flex;
    align-items: center;
    gap: var(--gap-2xs);
  }

  .cart-discounts__label svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    display: inline-block;
  }

  .cart-totals__original-container,
  .cart-totals__container {
    display: flex;
    flex-direction: column;
  }

  .cart-totals__container {
    row-gap: var(--gap-2xs);

    &.cart-totals__container--has-installments {
      row-gap: var(--gap-xs);
    }
  }

  .cart-totals__original-container:empty {
    display: none;
  }

  .cart-totals {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
    width: 100%;
    border-block-start: none;

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

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

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

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

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

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

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

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

  .cart-note {
    width: 100%;
  }

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

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

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

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  /* Anemoia (custom): Check out is the last CTA in the buy path, so it wears
     the same pill as Add to cart everywhere else — same fill, border, radius
     and type. It was inheriting Horizon's generic .button (the near-black
     primary from the colour scheme), which made the one button that closes the
     sale the only one that did not look like a call to action. */
  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
    border: 1.5px solid #dedede;
    border-radius: 999px;
    background: var(--anemoia-cta, #fea500);
    color: var(--anemoia-cta-ink, #fff);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 0.25s ease, transform 0.2s ease;
  }

  /* The label is a nested <span>, which would otherwise take its colour from
     the scheme's button-text token rather than the pill it sits on. */
  .cart__ctas .cart__checkout-button .button-text {
    color: var(--anemoia-cta-ink, #fff);
  }

  .cart__ctas .cart__checkout-button:hover:not([disabled]) {
    background: var(--anemoia-cta-hover, #e89400);
    transform: translateY(-1px);
  }

  /* Matches the sold-out pill on the shop cards: the fill stays, faded. */
  .cart__ctas .cart__checkout-button[disabled] {
    opacity: 0.5;
    transform: none;
    cursor: not-allowed;
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

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

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

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

  .cart-discount {
    width: 100%;
  }

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

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

  .cart-discount__button {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:176) */
.collection-card {
    --fixed-card-height: var(--height-small);

    flex: 1 1 var(--card-width-small);
  }

  .collection-card > svg {
    height: 100%;
    width: 100%;
    aspect-ratio: var(--ratio);
  }

  .collection-card--image-bg .collection-card__inner {
    height: 100%;
  }

  .collection-card__inner {
    gap: var(--gap);

    a,
    button {
      pointer-events: auto;
    }
  }

  /* allow all blocks to be selectable in editor preview */
  .shopify-design-mode .collection-card__content * {
    pointer-events: auto;
  }

  .collection-card__content {
    max-width: 100%;
    --flex-wrap: wrap;
  }

  /* Nested image block rules */

  .collection-card.collection-card--image-bg {
    aspect-ratio: var(--ratio);
  }

  .collection-card.collection-card--image-bg .collection-card__content {
    padding: var(--padding-lg);
  }

  .collection-card--image-height-fixed {
    height: 100%;
  }

  /* Bento layout rules */
  .collection-card--image-height-fixed .collection-card__image {
    height: var(--fixed-card-height);
    width: 100%;
  }

  .collection-card--image-height-fixed.collection-card--image-bg {
    height: var(--fixed-card-height);
    aspect-ratio: unset;
  }

  .collection-card__image .resource-image__image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  .collection-card--image-bg .collection-card__image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .collection-card__image svg {
    height: 100%;
    width: 100%;
  }

  .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio {
    &.collection-card.collection-card--image-bg,
    &.collection-card .placeholder-svg {
      aspect-ratio: 99;
    }
  }
/* END_SNIPPET:collection-card */

/* START_SNIPPET:divider (INDEX:178) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:editorial-blog-grid (INDEX:179) */
.editorial-blog__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .shopify-block {
      height: 100%;
    }
  }

  .editorial-blog__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-blog__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-blog__spacer {
      display: none;
    }

    /* Mobile layout - also horizontally mirrored from collection grid */
    .editorial-blog__item-0 {
      width: 66%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-1 {
      width: 83%;
      align-self: flex-start; /* Originally flex-end, now flex-start */
    }

    .editorial-blog__item-2 {
      width: 83%;
      align-self: flex-end; /* Originally flex-start, now flex-end */
    }

    .editorial-blog__item-3 {
      width: 100%;
      align-self: center; /* Stays centered */
    }
  }
/* END_SNIPPET:editorial-blog-grid */

/* START_SNIPPET:editorial-collection-grid (INDEX:180) */
.editorial-collection__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    .resource-list__item,
    .collection-card {
      height: 100%;
    }
  }

  .editorial-collection__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-collection__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-collection__spacer {
      display: none;
    }

    .editorial-collection__item-0 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 4 / 5;
    }

    .editorial-collection__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 5 / 5;
    }

    .editorial-collection__item-2 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 8 / 6;
    }

    .editorial-collection__item-3 {
      width: 100%;
      align-self: center;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-collection-grid */

/* START_SNIPPET:editorial-product-grid (INDEX:181) */
.editorial-product__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--gap-xl);

    /* Make the aspect ratio super high on width, then increase the height of
     * slideshow containers until they fill all the available space */
    .card-gallery {
      /* stylelint-disable-next-line declaration-no-important */
      --gallery-aspect-ratio: 99 !important;
    }

    .card-gallery,
    slideshow-component,
    slideshow-container,
    slideshow-slides,
    .product-media__image {
      height: 100%;
    }
  }

  .editorial-product__spacer {
    aspect-ratio: 1;
  }

  @media screen and (max-width: 749px) {
    .editorial-product__grid {
      display: flex;
      flex-direction: column;
      gap: var(--gap-2xl);
    }

    .editorial-product__spacer {
      display: none;
    }

    .editorial-product__item-0 {
      width: 83%;
      align-self: flex-start;
      aspect-ratio: 7 / 6;
    }

    .editorial-product__item-1 {
      width: 83%;
      align-self: flex-end;
      aspect-ratio: 4 / 5;
    }

    .editorial-product__item-2 {
      width: 66%;
      align-self: flex-start;
      aspect-ratio: 5 / 5;
    }

    .editorial-product__item-3 {
      width: 100%;
      aspect-ratio: 8 / 6;
    }
  }
/* END_SNIPPET:editorial-product-grid */

/* START_SNIPPET:filter-remove-buttons (INDEX:182) */
/* Facets - Remove buttons */
  .facets-remove {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;

    display: none;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    padding: 0 var(--drawer-padding);
    margin: 0;

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

      gap: var(--gap-2xs);
    }
  }

  .facets-remove:has(facet-remove-component) {
    display: flex;
    margin-block-start: var(--margin-2xs);
    margin-block-end: var(--margin-md);
  }

  .facets:not(.facets--drawer) .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      padding: 0;
    }
  }

  .facets--horizontal .facets-remove--mobile-and-vertical {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets-remove__pill {
    .svg-wrapper,
    .swatch {
      flex-shrink: 0;
    }
  }

  .facets--horizontal .facets-remove {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:filter-remove-buttons */

/* START_SNIPPET:gift-card-recipient-form-styles (INDEX:186) */
.recipient-form {
    --options-border-radius: var(--variant-picker-button-radius);
    --options-border-width: var(--variant-picker-button-border-width);

    display: flex;
    flex-direction: column;
    padding-bottom: var(--padding-2xl);
  }

  .recipient-form__send-to {
    padding: 0;
    margin-block-end: var(--margin-xs);
  }

  .gift-card-form-option {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
    padding: 0;
    border: none;
  }

  .gift-card-form-option__button-label {
    display: flex;
    align-items: center;
    position: relative;
    padding-block: var(--padding-sm);
    padding-inline: var(--padding-lg);
    border: var(--style-border-width) solid var(--color-variant-border);
    border-radius: var(--options-border-radius);
    border-width: var(--options-border-width);
    overflow: clip;
    justify-content: center;
    min-width: auto;
    background-color: var(--color-variant-background);
    color: var(--color-variant-text);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-variant-hover-background);
      border-color: var(--color-variant-hover-border);
      color: var(--color-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label:has(:focus-visible) {
    --variant-picker-stroke-color: var(--color-foreground);

    border-color: var(--color-foreground);
    outline: var(--focus-outline-width) solid var(--color-foreground);
    outline-offset: var(--focus-outline-offset);
  }

  .gift-card-form-option__button-label:has(:checked) {
    color: var(--color-selected-variant-text);
    background-color: var(--color-selected-variant-background);
    border-color: var(--color-selected-variant-border);
    transition: background-color var(--animation-speed) var(--animation-easing),
      border-color var(--animation-speed) var(--animation-easing);

    &:hover {
      background-color: var(--color-selected-variant-hover-background);
      border-color: var(--color-selected-variant-hover-border);
      color: var(--color-selected-variant-hover-text);
    }
  }

  .gift-card-form-option__button-label input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }

  .recipient-fields {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    transition: opacity 0.3s var(--animation-easing);
    padding-block-start: var(--padding-xl);
  }

  .recipient-fields[hidden] {
    display: none;
  }

  .field--send-on {
    display: flex;
    flex-direction: column;
  }

  .recipient-form__message {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    margin-top: var(--margin-sm);
  }

  .recipient-form-field-label {
    position: absolute;
    left: var(--padding-sm);
    bottom: var(--padding-sm);
    font-style: italic;
    color: var(--color-input-text);
  }

  .recipient-fields__textarea {
    min-height: 5.5rem;
    overflow-y: auto;

    /* Space for the character count */
    padding-bottom: calc(var(--padding-sm) * 3);
    scroll-padding-bottom: calc(var(--padding-sm) * 3);
  }

  .recipient-fields__input {
    flex-grow: 1;
    transition: background-color var(--animation-speed) ease, border-color var(--animation-speed) ease;
    padding: var(--input-padding);
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    text-align: left;
    font-size: var(--font-paragraph--size);
    border: var(--style-border-width-inputs) solid var(--color-input-border);
    border-radius: var(--style-border-radius-inputs);

    &:autofill {
      background-color: var(--color-input-background);
      color: var(--color-input-text);
    }

    &:is(:focus, :hover) {
      background-color: var(--color-input-hover-background);
    }

    &:is(:focus) {
      outline-color: var(--color-input-background);
    }
  }

  /* Date picker calendar icon
   * Safari doesn't show the icon and Firefox correctly applies the color from the input field.
   * Webkit browsers need the mask-image trick to use the correct icon color.
   */
  .field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-image: none;
    background-color: currentColor;
    mask-type: match-source;
  }

  /* For Webkit browsers - text cursor for input area */
  .field--send-on .recipient-fields__input::-webkit-datetime-edit {
    cursor: text;
  }

  .field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
  .field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
    /* Override the disabled color */
    color: var(--color-input-text);
  }

  /* Fallback for other browsers */
  .field--send-on .recipient-fields__input {
    cursor: text;
  }

  /* For Firefox - entire field is clickable, so show pointer */
  @supports (-moz-appearance: none) {
    .field--send-on .recipient-fields__input {
      cursor: pointer;
    }
  }
/* END_SNIPPET:gift-card-recipient-form-styles */

/* START_SNIPPET:grid-density-controls (INDEX:188) */
.column-options-wrapper {
    --icon-offset: -3px;

    display: flex;
    gap: var(--gap-sm);
    min-width: fit-content;
    justify-content: flex-end;
    height: var(--minimum-touch-target);
    align-items: center;
    margin-right: var(--icon-offset);
  }

  .column-options-wrapper:only-child {
    margin-left: auto;
  }

  .facets__form-wrapper > .column-options-wrapper:first-child {
    margin-left: auto;
  }

  .facets .column-options-wrapper {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    margin: 0;
    padding: 0;
    border: none;

    @media screen and (min-width: 750px) {
      gap: var(--gap-2xs);
    }
  }

  .column-options__option {
    display: none;
    position: relative;
  }

  .column-options__option:has(.column-picker-mobile--single),
  .column-options__option:has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options__option:has(.column-picker--default),
  .column-options__option:has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  /* Override base rule for grid density controls - only when visible */
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--single),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker-mobile--double) {
    @media screen and (max-width: 749px) {
      display: flex;
    }
  }

  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--default),
  .column-options-wrapper .column-options__option:has(input[type="radio"]):has(.column-picker--zoom-out) {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .column-options__legend {
    padding: 0;
    margin: 0;
  }

  .column-options__option-input {
    /* this is a repeating pattern a bit with the variant picker buttons */

    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .column-picker {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    padding: var(--padding-2xs);
    border-radius: var(--style-border-radius-xs);
    transition: background-color var(--animation-speed) ease, color var(--animation-speed) ease;
  }

  .column-options__option:hover .column-picker {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .column-options__option-input:checked ~ .column-picker {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }
/* END_SNIPPET:grid-density-controls */

/* START_SNIPPET:group (INDEX:189) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

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

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

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

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

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

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

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

  shopify-account {
    --shopify-account-font-heading: var(--font-heading--family);
    --shopify-account-font-heading-weight: var(--font-heading--weight);
    --shopify-account-font-body: var(--font-body--family);
    --shopify-account-font-body-weight: var(--font-body--weight);
    --shopify-account-radius-base: var(--style-border-radius-popover);
    --shopify-account-radius-button: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-button-small: var(--style-border-radius-buttons-primary);
    --shopify-account-radius-input: var(--style-border-radius-buttons-primary);
    --shopify-account-color-background: var(--color-background);
    --shopify-account-color-text: var(--color-foreground);
    --shopify-account-color-accent: var(--color-primary-button-background);
    --shopify-account-color-accent-text: var(--color-primary-button-text);
    --shopify-account-dialog-position-top: var(--account-offset-top);

    &:not(:defined) {
      min-width: 44px;
      height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      /* Match the line height of the other buttons */
      line-height: normal;
    }
  }

  .account-button__fallback {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--shopify-account-color-accent, #0a142f);
  }

  .account-button--text shopify-account {
    color: inherit;
  }

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

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

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

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

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

  /* Needed to ensure the drawer is full height */
  .cart-drawer__dialog:modal {
    max-height: 100dvh;
    overflow-y: hidden;
  }

  /* Anemoia (custom): on mobile the cart is a floating panel, not a full-screen
     takeover — leave a gap on the left and bottom, with rounded corners. */
  @media screen and (max-width: 749px) {
    .cart-drawer__dialog {
      width: 87vw;
      max-width: 87vw;
      height: calc(100dvh - 1.5rem);
      margin: 0 0 1.5rem auto;
      border-radius: 0;
      overflow: hidden;
    }

    .cart-drawer__dialog:modal {
      max-height: calc(100dvh - 1.5rem);
    }
  }

  .cart-drawer__inner {
    height: 100%;
    overflow: hidden;
  }

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

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

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

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

  /* Anemoia (custom): on mobile the drawer auto-focuses the close button, whose
     focus ring reads as a circle around the X. Drop it on touch only (desktop
     keyboard users keep the ring). */
  @media screen and (max-width: 749px) {
    .cart-drawer__close-button,
    .cart-drawer__close-button:focus,
    .cart-drawer__close-button:focus-visible {
      outline: none;
      box-shadow: none;
    }

    .cart-drawer__close-button:focus-visible::after {
      content: none;
      display: none;
    }
  }

  .cart-drawer--empty .cart-drawer__content {
    text-align: center;
    min-height: auto;
  }

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

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

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

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

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

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

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

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

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

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

  .cart-drawer__summary .cart__summary-totals:not(:has(.cart__subtotal-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

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

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

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

  /* ---- Anemoia (custom): drawer layout polish ------------------------- */
  /* PRODUCT / TOTAL column header, aligned to the item edges + divider. */
  .cart-drawer__cols {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-block: var(--margin-2xs) var(--margin-md);
    margin-inline: var(--padding-xl);
    padding-bottom: var(--padding-xs);
    border-bottom: var(--style-border-width) solid var(--color-border);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground-rgb) / 0.5);
  }

  @media screen and (min-width: 750px) {
    .cart-drawer__cols {
      margin-inline-start: var(--padding-xl);
      margin-inline-end: var(--padding-2xl);
    }
  }

  /* ONE consistent row layout for every product — with or without variants /
     unit price, single item or many. The theme gives variant products a
     different `--full-width-variants` grid; the extra ancestor classes here
     (higher specificity) force them all to the same media | details | price
     layout so the image always aligns with the description. */
  .cart-drawer .cart-drawer__items .cart-items__table-row,
  .cart-drawer .cart-drawer__items .cart-items__table-row--full-width-variants {
    grid-template-columns: 108px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas:
      'media details price'
      'media quantity quantity'
      'media error error';
    column-gap: var(--gap-lg);
    align-items: start;
  }

  /* Keep the details as one flowing column (title, price, size stacked) rather
     than the theme splitting them into separate grid areas for variant rows. */
  .cart-drawer .cart-drawer__items .cart-items__table-row .cart-items__details {
    display: block;
  }

  /* Smaller product name so it fits the details column next to the big image. */
  .cart-drawer__items .cart-items__details .cart-items__title {
    font-size: 0.98rem;
    line-height: 1.22;
  }

  .cart-drawer__items .cart-items__details * {
    font-size: 0.86rem;
  }

  .cart-drawer__items .cart-items__media-container {
    border-radius: 6px;
  }

  .cart-drawer__items .cart-items__quantity {
    margin-top: var(--margin-lg);
  }

  .cart-drawer__items .cart-items__quantity-controls {
    width: 100%;
  }

  .cart-drawer__items .cart-items__remove {
    margin-inline-start: auto;
  }

  /* Tighten the gap between the recommendations and the summary: give the recs
     all the flex free space (so they sit right above the total) and trim the
     summary's top padding + the space under its divider. */
  .cart-drawer__content:has(.acart-recs) .cart-drawer__summary {
    margin-top: 0;
  }

  .cart-drawer .cart-drawer__summary {
    padding-top: var(--padding-2xs);
  }

  .cart-drawer .cart-drawer__summary .cart__summary-totals:not(.cart__subtotal-container:empty) {
    padding-block-start: var(--padding-md);
  }

  /* Estimated total value back to the default (non-enlarged) summary text size
     in the drawer — the /cart page keeps its larger total. */
  .cart-drawer__summary .cart-totals__total-value {
    font-size: var(--cart-font-size--sm);
  }

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

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

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

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

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

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

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

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

  header-actions {
    display: flex;

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

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

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

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

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

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

    position: relative;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:header-drawer (INDEX:191) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

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

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }

  /* -- Anemoia (custom): frosted "PDP card" drawer --------------------------
     Instead of a full-height solid slab, the mobile menu is a translucent,
     blurred card (matching the product page cards) floating below the header,
     showing only the page links — product/collection imagery is hidden. */
  .menu-drawer {
    top: calc(var(--header-height, 60px) + 0.75rem);
    left: 0.75rem;
    height: auto;
    max-height: calc(100dvh - var(--header-height, 60px) - 1.5rem);
    width: min(78vw, 20rem);
    max-width: min(78vw, 20rem);
    padding-block: var(--padding-xs);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    background: rgba(231, 229, 221, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);

    /* Dark ink on the light card (mirrors the PDP cards). */
    --color-foreground: #16140f;
    color: #16140f;
  }

  .menu-drawer .menu-drawer__menu-item,
  .menu-drawer .menu-drawer__menu-item--mainlist,
  .menu-drawer .menu-drawer__close-button {
    color: #16140f;
  }

  /* Exclude products: hide featured product/collection cards and link images. */
  .menu-drawer__featured-content,
  .menu-drawer__link-image {
    display: none;
  }

  .menu-drawer__menu--grid {
    display: block;
    grid-template-columns: none;
  }

  .menu-drawer__menu--grid .menu-drawer__menu-item::before {
    display: none;
  }

  /* No close (X) icon on the menu card — tap the hamburger or backdrop to close. */
  .menu-drawer > .menu-drawer__close-button {
    display: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:196) */
.jumbo-text__container {
    width: 100%;
  }

  footer .jumbo-text__container {
    pointer-events: none;
  }

  jumbo-text {
    display: block;
    font-family: var(--font-family, inherit);
    font-style: var(--font-style, normal);
    color: var(--color, inherit);
    font-weight: var(--font-weight, inherit);
    letter-spacing: var(--letter-spacing, -0.02em);
    line-height: var(--line-height, 1);
    opacity: 0;
    visibility: hidden;
    text-align: var(--text-align);
    text-box: var(--text-trim, trim-end cap text);
    text-transform: var(--text-transform, none);
    transition: opacity 0.3s ease;
    width: 100%;
    margin-left: var(--margin-left-nudge, 0);
    margin-right: var(--margin-right-nudge, 0);
    overflow: visible;
  }

  jumbo-text.ready {
    opacity: 1;
    visibility: visible;
  }

  jumbo-text[data-cap-text='true'] {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    text-box-edge: cap text;
  }

  .jumbo-text-line {
    display: inline-flex;
    white-space: pre;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Blur effect */
    .ready[data-text-effect='blur'] {
      filter: blur(20px);
      opacity: 0.5;
      scale: 1.05;
      transition: filter 1.6s var(--animation-timing-fade-in), opacity 1.3s var(--animation-timing-fade-in),
        scale 1.6s var(--animation-timing-fade-in);
    }

    .jumbo-text-visible[data-text-effect='blur'] {
      filter: blur(0);
      opacity: 1;
      scale: 1;
    }

    /* Reveal effect */
    .ready[data-text-effect='reveal'] {
      overflow: hidden;
    }

    .ready[data-text-effect='reveal'] .jumbo-text-line {
      transform: translateY(100%);
    }

    .jumbo-text-visible[data-text-effect='reveal'] .jumbo-text-line {
      transition: transform 0.5s var(--animation-timing-fade-in) calc(var(--line-index) * 0.05s);
      transform: translateY(0);
    }

    .jumbo-text-visible[data-text-effect='reveal'] {
      overflow: visible;
      transition: overflow 0s linear 0.75s;
    }
  }
/* END_SNIPPET:jumbo-text */

/* START_SNIPPET:list-filter (INDEX:199) */
.facets input:checked + label {
    font-weight: 500;
  }

  .facets .checkbox .icon-checkmark {
    transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  .facets .checkbox:not(.checkbox--disabled):hover .icon-checkmark {
    border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Hover state for checked checkboxes - targeting via adjacent sibling */
  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__input:checked + .checkbox__label .icon-checkmark {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
  }

  .facets .checkbox:not(.checkbox--disabled):hover .checkbox__label-text {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-90));
  }

  .facets .checkbox .checkbox__label-text {
    transition: color 0.2s ease, font-weight 0.2s ease;
  }

  /* Pill style */
  .facets__pill-label {
    --pill-label-padding-inline: var(--padding-xs);
    --pill-label-border-radius: var(--style-border-radius-md);
    --pill-label-border-width: var(--variant-picker-button-border-width);
    --pill-label-height: var(--button-size-md);
    --pill-label-focus-outline-color: var(--color-foreground);
    --pill-label-color: var(--color-foreground);
    --pill-label-color-rgb: var(--color-foreground-rgb);
    --pill-label-background-color: var(--color-background);
    --pill-label-background-color-rgb: var(--color-background-rgb);
    --pill-label-border-opacity: var(--facets-low-opacity);

    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 var(--pill-label-border-width) rgb(var(--pill-label-color-rgb) / var(--opacity-10-25));
    border-radius: var(--pill-label-border-radius);
    height: var(--pill-label-height);
    width: 100%;
    padding-inline: var(--pill-label-padding-inline);
    color: rgb(var(--pill-label-color-rgb));
    background-color: rgb(var(--pill-label-background-color-rgb));
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing),
      background-color var(--animation-speed) var(--animation-easing);
    outline-color: var(--pill-label-focus-outline-color);

    &:hover {
      --pill-label-border-opacity: 100%;
    }
  }

  .facets__pill-input {
    &:checked + .facets__pill-label {
      --pill-label-color-rgb: var(--color-background-rgb);
      --pill-label-background-color-rgb: var(--color-foreground-rgb);
      --pill-label-border-opacity: 0;

      font-weight: 500;
    }

    &:disabled + .facets__pill-label {
      opacity: var(--disabled-opacity);
      cursor: not-allowed;

      &:hover {
        --pill-label-border-opacity: var(--facets-low-opacity);
      }
    }
  }

  .facets__status-wrapper {
    display: flex;
    align-items: center;
  }

  .facets--drawer .facets__status-wrapper {
    @media screen and (max-width: 749px) {
      gap: var(--gap-3xs);
    }
  }

  .facets--vertical .facets__status-wrapper {
    gap: var(--gap-xs);
  }

  .facets--horizontal .facets__status-wrapper {
    gap: 0;
  }

  .facets__pill-input:disabled + .facets__pill-label svg {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--style-border-radius-md);
  }

  .facets__pill-label svg line {
    stroke-width: 1.5px;
    stroke: rgb(var(--color-foreground-rgb) / var(--facets-low-opacity));
  }

  .facets__pill-wrapper {
    position: relative;
  }

  .facets__pill-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    opacity: 0;
    cursor: pointer;
  }

  /* Swatches */
  .facets__status--swatches {
    display: none;
  }

  .facets__swatch-wrapper {
    display: flex;
  }

  .variant-option__swatch-wrapper {
    position: relative;
    overflow: visible;
    border-radius: var(--options-border-radius);
  }

  .variant-option--swatches-disabled {
    pointer-events: none;
    cursor: not-allowed;
  }

  .variant-option--swatches-disabled .variant-option__swatch-wrapper {
    overflow: hidden;
  }

  .facets--horizontal .facets__status--swatches {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .facets--horizontal .sorting-filter .facets__status {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  .facets__status--swatches .swatch {
    width: calc(var(--variant-picker-swatch-width) / 1.5);
    height: calc(var(--variant-picker-swatch-height) / 1.5);
  }

  .facets__status--swatches .swatch + .swatch {
    margin-left: calc(var(--variant-picker-swatch-width) / -3);
    outline: 1px solid rgb(var(--color-background-rgb));
  }

  .facets__inputs-wrapper .facets__inputs-list--images {
    display: grid;
    grid-template-columns: repeat(var(--image-columns), 125px);
    gap: var(--gap-sm);
  }

  .facets--drawer .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(3, 1fr);

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--images {
    grid-template-columns: repeat(2, 1fr);
  }

  .facets--drawer .facets__inputs-list--images {
    padding-top: var(--padding-xs);
  }

  .facets__image-wrapper {
    aspect-ratio: 1/1;
    width: 100%;
    padding: var(--padding-xs);
    position: relative;
    overflow: hidden;
  }

  .facets__image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: calc(var(--border-radius) / 2);
  }

  .facets__image-label {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block-end: var(--padding-xs);
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .facets__image-label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .facets__image-label:hover {
    font-weight: 500;
  }

  /* Filter-specific variant-option styles */
  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
    --focus-outline: var(--focus-outline-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-35-55));

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) .swatch {
    --focus-outline: var(--focus-outline-width) solid currentcolor;

    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label:has(:focus-visible) {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover {
    outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) {
    --focus-outline: none;
  }

  .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:has(:checked) .swatch {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  .facets__inputs-list--swatches .variant-option__button-label {
    --color-variant-text: var(--color-foreground);
  }

  .facets__inputs-list--swatches {
    --variant-picker-swatch-width: 32px;
    --variant-picker-swatch-height: 32px;

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

  .facets--vertical .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    gap: var(--gap-sm);
  }

  .facets--vertical .facets__inputs-list--swatches .facets__inputs-list-item {
    display: flex;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid {
    --columns: 2;

    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option--swatches {
    cursor: pointer;
    overflow: visible;
  }

  .facets__inputs-list-item--disabled .variant-option--swatches {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid label {
    cursor: pointer;
    word-break: break-word;
    white-space: normal;
  }

  .facets__inputs-list--swatches-grid .facets__inputs-list-item--disabled label {
    cursor: not-allowed;
  }

  .facets__inputs-list-item--disabled .variant-option__button-label {
    cursor: not-allowed;
  }

  .facets__inputs-wrapper
    .facets__inputs-list--swatches-grid
    .variant-option__button-label--has-swatch:has(input[type='checkbox']) {
    align-items: center;
    overflow: visible;
    justify-content: flex-start;
    display: flex;
    width: 100%;
    flex-basis: unset;
    gap: var(--gap-sm);
  }

  .facets__inputs-wrapper .facets__inputs-list--swatches-grid .variant-option__button-label:has(:checked) {
    color: rgb(var(--color-foreground-rgb));
    background-color: rgb(var(--color-background-rgb));
    font-weight: 500;
    transition: font-weight 0.2s ease;
  }

  .facets .variant-option--swatches {
    --options-border-radius: var(--variant-picker-swatch-radius);

    width: auto;
  }

  .facets__inputs-list-item:not(.facets__inputs-list-item--disabled) .variant-option__button-label:hover {
    font-weight: 500;
  }

  /* Variant option images (filters) */
  .variant-option--images {
    --image-facet-border-width: var(--variant-picker-button-border-width);
    --image-facet-border-opacity: var(--facets-low-opacity);
    --image-facet-border-radius: var(--style-border-radius-xs);

    position: relative;
    border-radius: var(--image-facet-border-radius);
    box-shadow: inset 0 0 0 var(--image-facet-border-width)
      rgb(var(--color-foreground-rgb) / var(--image-facet-border-opacity));

    &:hover {
      --image-facet-border-opacity: 100%;
    }

    &:has(input:checked) {
      font-weight: 500;
      transition: font-weight 0.2s ease;
    }

    &:has(input:checked):hover {
      --image-facet-border-width: calc(var(--variant-picker-button-border-width) + 0.5px);
    }

    &:has(input:focus-visible) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: var(--focus-outline-offset);
    }
  }

  .variant-option--images input {
    /* remove the checkbox from the page flow */
    position: absolute;

    /* set the dimensions to match those of the label */
    inset: 0;

    /* hide it */
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border: none;
    border-radius: 0;
    background: transparent;
    appearance: auto;
    display: block;
    cursor: pointer;
  }

  .facets__inputs-list-item--disabled .variant-option--images {
    --image-facet-border-opacity: 0;

    opacity: var(--disabled-opacity);
    cursor: not-allowed;

    &:hover {
      --image-facet-border-opacity: 0;
    }

    img {
      opacity: var(--disabled-opacity);
    }

    input,
    label,
    .facets__image-label {
      cursor: not-allowed;
    }

    .facets__image-wrapper {
      border: var(--style-border-width) solid rgb(var(--color-foreground-rgb) / var(--opacity-30));
      border-radius: var(--image-facet-border-radius);
    }
  }

  /* Position disabled-svg */
  .variant-option--images svg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    stroke-width: var(--border-width);
    stroke: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  /* Position label text and handle overflow */
  .facets__inputs-list-item,
  .variant-option--images {
    min-width: 0;
  }

  /* Safari < 16.4 outline border-radius workaround - filter-specific */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch {
      outline: none;
      position: relative;
      overflow: visible;
    }

    .facets__inputs-list--swatches-grid .variant-option__button-label--has-swatch:hover .swatch::after {
      content: '';
      position: absolute;
      inset: calc(-1 * var(--focus-outline-offset));
      border: var(--focus-outline);
      border-radius: var(--focus-outline-radius, 50%);
      background-color: transparent;
      display: inherit;
    }
  }
/* END_SNIPPET:list-filter */

/* START_SNIPPET:localization-form (INDEX:200) */
/* Localization */
  localization-form-component {
    display: flex;
    width: var(--width, auto);

    @media screen and (min-width: 750px) {
      position: relative;
    }
  }

  localization-form-component[data-show-filter='false'] .country-selector-form__wrapper {
    padding-block-start: var(--padding-xs);
  }

  .localization-form {
    width: 100%;
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)) {
    --button-color: var(--color-primary);
    --button-background-color: var(--language-button-background-color, var(--color-background));
    --button-border-color: var(--language-button-border-color, var(--color-border));

    text-decoration-color: transparent;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.125em;
    transition: text-decoration-color var(--animation-speed) var(--animation-easing);
  }

  localization-form-component .button:is(:not(.country-filter__reset-button)):hover,
  .localization-form__list-item:hover,
  .localization-form__list-item:focus {
    --button-color: var(--color-primary-hover);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
  }

  .localization-form__list-item[aria-current='true'] {
    --button-color: var(--color-primary-active);

    background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-10));
  }

  .localization-form__list-item-disabled {
    pointer-events: none;
  }

  .localization-form__list-item:focus-visible {
    outline: none;
  }

  localization-form-component .localization-selector {
    display: flex;
    align-items: center;
    gap: var(--margin-2xs);
  }

  localization-form-component .country-filter__search-icon {
    left: 8px;
    right: auto;
    color: var(--color-foreground-muted);
    pointer-events: none;
  }

  .country-filter__search-icon .svg-wrapper svg {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .disclosure {
    width: 100%;
  }

  .localization-form__list {
    position: relative;
    width: 100%;
    padding-block: 0 var(--padding-xs);
    font-size: var(--font-size-lg);
    scroll-padding: var(--padding-xs) 0;
    overflow-y: auto;
    white-space: nowrap;

    /* Hide scrollbar which would cause extra right padding in Safari */
    scrollbar-width: none;

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

  .localization-form__list-item:not([hidden]) {
    margin-block-end: var(--margin-3xs);
    display: flex;
    gap: var(--margin-sm);
    padding: 8px;
    border-radius: 8px;
    line-height: var(--font-line-height-md);
    align-items: center;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--animation-speed) var(--animation-easing);

    .country {
      flex: 1;
      color: var(--color-foreground);
    }

    &:hover {
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &[aria-current='true'] {
      .country {
        font-weight: 500;
      }
    }
  }

  .localization-form__list-item#no-results-message {
    grid-template-columns: 1fr;
    text-align: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .is-searching .localization-form__list-item .country {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
  }

  .localization-form__list-item .country mark {
    font-weight: 500;
    background: none;
    color: var(--color-foreground);
  }

  .country-filter {
    position: relative;
    padding: var(--padding-xs);
    border-bottom: var(--style-border-width) solid transparent;
    transition: border-color var(--animation-values);
  }

  .country-filter.is-scrolled {
    border-color: var(--color-border);
  }

  .country-selector-form__wrapper {
    overflow-y: auto;
    max-height: 100%;
    flex-grow: 1;
  }

  .language-selector {
    display: flex;
    gap: var(--gap-xs);
    padding: var(--padding-md) var(--padding-lg);
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .language-selector__label {
    flex-shrink: 0;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .localization-form__select {
    border: none;
    color: var(--color-foreground);
    appearance: none;
    background-color: var(--color-input-background);
    padding-block: var(--padding-3xs);
    padding-inline: var(--padding-xs) calc(var(--icon-size-xs) + var(--padding-xs));
    text-align: right;
    cursor: pointer;
    max-width: 40vw;
    text-overflow: ellipsis;
    field-sizing: content;

    &:focus-visible {
      outline: var(--focus-outline-width) solid currentcolor;
    }

    &:focus {
      outline: none;
    }
  }

  #header-component[transparent] localization-form-component .localization-form .localization-form__select {
    background-color: transparent;
  }

  .localization-form__select option {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }

  .language-selector .svg-wrapper.icon-caret {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
  }

  .language-selector--collapse-space {
    padding-inline-end: var(--padding-2xs);
  }

  .language-selector--collapse-space .localization-form__select {
    padding-inline-end: var(--icon-size-xs);
  }

  .language-selector--collapse-space .svg-wrapper.icon-caret {
    right: 0;
  }

  .localization-form .icon-checkmark {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .localization-form .svg-wrapper.icon-checkmark {
    visibility: hidden;
  }

  .localization-form__list-item[aria-current='true'] .svg-wrapper.icon-checkmark {
    visibility: visible;
  }

  .country-filter__input {
    width: 100%;
    height: 44px;
    font-size: var(--font-size-lg);
    padding: var(--padding-md) var(--padding-lg) var(--padding-md) calc(var(--margin-md) + var(--padding-xl));
    border: 1px solid var(--color-foreground);
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    outline-offset: -1px;

    @media screen and (min-width: 750px) {
      height: 36px;
    }
  }

  .country-filter__input::placeholder {
    color: inherit;
  }

  .country-filter .field {
    position: relative;
  }

  .country-filter .field__label {
    font-size: var(--font-size-lg);
    left: var(--margin-2xl);
    top: var(--margin-xl);
    pointer-events: none;
    position: absolute;
  }

  .country-filter__input:focus ~ .field__label,
  .country-filter__input:not(:placeholder-shown) ~ .field__label,
  .country-filter__input:-webkit-autofill ~ .field__label {
    font-size: var(--font-size-xs);
    top: var(--margin-xs);
  }

  .country-filter .field__button:not([hidden]) {
    display: flex;
    height: fit-content;
    position: absolute;
    padding: 0;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    background-color: transparent;
    color: var(--color-input-text);
    border: 0;
  }

  input[type='search']::-webkit-search-cancel-button {
    appearance: none;
  }

  .country-selector__close-button {
    display: none;
  }
/* END_SNIPPET:localization-form */

/* START_SNIPPET:media (INDEX:201) */
.media-block {
    overflow: hidden;
    position: relative;

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

  .media-block__media {
    height: var(--media-height-mobile, auto);
    object-fit: var(--image-position, 'cover');
    object-position: center center;
    width: 100%;

    @media screen and (min-width: 750px) {
      height: 100%;
      position: absolute;
    }
  }

  deferred-media[class].media-block__media
    :is(.deferred-media__poster-button img, .deferred-media__poster-button ~ video) {
    object-fit: var(--video-position, 'cover');
  }

  /* This is to support corner radius on video and align the video to the center of the block */
  .media-block__placeholder {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    position: relative;
  }

  .media-block__media--video {
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 749px) {
      --media-height-mobile: auto;
    }
  }
/* END_SNIPPET:media */

/* START_SNIPPET:overlay (INDEX:206) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:pagination-controls (INDEX:207) */
.pagination {
    --pagination-size: 36px;
    --pagination-inset: 2px;
    --pagination-radius: 6;

    display: flex;
    justify-content: center;
    padding: var(--padding-xl) var(--padding-sm);
    margin-top: var(--padding-xl);
    position: relative;
  }

  .pagination__list {
    display: flex;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .pagination__item {
    width: var(--pagination-size);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }

  .pagination__link {
    display: grid;
    place-items: center;
    color: var(--color-foreground);
    text-decoration: none;
    width: 100%;
    height: 100%;
    user-select: none;
    position: relative;
    outline-color: var(--color-foreground);
    -webkit-tap-highlight-color: transparent;
    font-size: var(--font-size--md);
    font-weight: var(--font-weight-normal);
    border-radius: calc(var(--pagination-radius) * 1px);
    transition: color var(--hover-transition-duration) var(--hover-transition-timing),
      opacity var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .pagination__link:focus-visible {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .pagination__link--current {
    color: var(--color-background);
    font-weight: var(--font-weight-medium);
    cursor: default;
  }

  .pagination__link--gap {
    cursor: default;
    pointer-events: none;
  }

  .pagination__link--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pagination__link--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pagination__link svg {
    width: 0.5rem;
    height: 0.75rem;
    flex-shrink: 0;
  }

  .pagination__item--mobile-only {
    display: none;
  }

  /* Fallback for browsers without anchor positioning support */
  @supports not (anchor-name: --pagination-active) {
    .pagination__link:not(.pagination__link--gap)::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      z-index: -1;
      opacity: 0;
      transition: background var(--hover-transition-duration) var(--hover-transition-timing),
        opacity var(--hover-transition-duration) var(--hover-transition-timing);
    }

    .pagination__link[aria-current='page']::before {
      background: var(--color-foreground);
      opacity: 1;
    }

    .pagination__link:hover:not([aria-current='page'], .pagination__link--gap, .pagination__link--disabled)::before {
      opacity: 1;
    }
  }

  /* Modern approach with anchor positioning */
  @supports (anchor-name: --pagination-active) {
    .pagination__list::before {
      content: '';
      z-index: -1;
      position: absolute;
      width: calc(var(--pagination-size) - (2 * var(--pagination-inset)));
      aspect-ratio: 1;
      pointer-events: none;
      opacity: 0;
      border-radius: calc(var(--pagination-radius) * 1px);
      background: rgb(var(--color-foreground-rgb) / var(--opacity-10));
      transition: left var(--hover-transition-duration) var(--hover-transition-timing),
        top var(--hover-transition-duration) var(--hover-transition-timing);
    }

    /* Hide hover indicator on touch devices */
    @media (hover: none) and (pointer: coarse) {
      .pagination__list::before {
        content: unset;
      }
    }

    .pagination__list:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled))::before {
      opacity: 1;
    }

    /* Style current page directly */
    .pagination__link[aria-current='page']::before {
      content: '';
      position: absolute;
      inset: var(--pagination-inset);
      border-radius: calc(var(--pagination-radius) * 1px);
      background: var(--color-foreground);
      z-index: -1;
    }

    .pagination__list
      .pagination__item:has(
        .pagination__link:is(:hover, :focus-visible):not(.pagination__link--gap, .pagination__link--disabled)) {
      anchor-name: --pagination-hover;
    }

    /* Position hover indicator using anchor */
    .pagination__list::before {
      position-anchor: --pagination-hover;
      left: calc(anchor(left) + var(--pagination-inset));
      top: calc(anchor(top) + var(--pagination-inset));
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after,
    .pagination__item--gap + .pagination__item .pagination__link::after {
      position: absolute;
      content: '';
      pointer-events: auto;
    }

    .pagination__item:has(+ .pagination__item--gap) .pagination__link::after {
      inset: 0 -50% 0 100%;
    }

    .pagination__item--gap + .pagination__item .pagination__link::after {
      inset: 0 100% 0 -50%;
    }
  }

  @media screen and (max-width: 749px) {
    .pagination {
      --pagination-size: 44px;
      --pagination-inset: 5px;

      padding: var(--padding-lg) var(--padding-sm);
    }

    .pagination__link {
      font-size: var(--font-size--sm);
    }

    .pagination__item--mobile-hide {
      display: none;
    }

    .pagination__item--mobile-only {
      display: grid;
    }

    .pagination__item:has(.pagination__link--gap) {
      width: calc(var(--pagination-size) * 0.5);
    }
  }
/* END_SNIPPET:pagination-controls */

/* START_SNIPPET:password-layout-styles (INDEX:208) */
.password-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .password-dialog {
    max-width: 100vw;
    max-height: 100svh;
    width: 100vw;
    height: 100svh;
    border: none;
    transition: opacity var(--animation-values), display var(--animation-speed) allow-discrete,
      overlay var(--animation-speed) allow-discrete;

    &::backdrop {
      display: none;
    }
  }

  .password-dialog[open] {
    opacity: 1;
    top: 0;
    left: 0;
  }

  @starting-style {
    .password-dialog[open] {
      opacity: 0;
    }
  }

  .password-dialog:not([open]) {
    opacity: 0;
  }

  @starting-style {
    .password-dialog:not([open]) {
      opacity: 1;
    }
  }

  .password-dialog__close-button {
    cursor: pointer;
  }

  .password-dialog__header {
    position: absolute;
    top: 0;
    right: 0;
    padding: var(--padding-lg);
    z-index: var(--layer-raised);
  }

  .password-dialog__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    height: 100%;
    transition: transform var(--animation-values);
  }

  .password-dialog__content .email-signup__message {
    padding-block-start: var(--padding-xl);
  }

  .password-dialog[open] .password-dialog__content {
    transform: translateY(0);
  }

  @starting-style {
    .password-dialog[open] .password-dialog__content {
      transform: translateY(1em);
    }
  }

  .password-dialog:not([open]) .password-dialog__content {
    transform: translateY(1em);
  }

  @starting-style {
    .password-dialog:not([open]) .password-dialog__content {
      transform: translateY(0);
    }
  }

  .storefront-password-form {
    max-width: 400px;
    width: 100%;
  }

  .email-signup__input-group,
  .password-dialog__submit-button {
    width: 100%;

    @media screen and (min-width: 750px) {
      width: auto;
    }
  }
/* END_SNIPPET:password-layout-styles */

/* START_SNIPPET:predictive-search-styles (INDEX:212) */
/* Shared predictive search styles (used by both predictive-search and predictive-search-empty sections) */
  .predictive-search-dropdown {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--layer-base);
  }

  .predictive-search-results__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size--body-md);
    font-weight: 500;
    margin-block: var(--margin-sm) var(--margin-xs);
    width: 100%;
    text-transform: var(--title-case);

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

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

  .predictive-search-results__no-results {
    animation-delay: 100ms;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-in);
  }

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

  /* Predictive search section styles */
  input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* stylelint-disable-line */
  }

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

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

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

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

    @media screen and (min-width: 750px) {
      height: fit-content;
    }
  }
  .dialog-modal .predictive-search-form__header-inner {
    @media screen and (min-width: 750px) {
      border: 0;
    }
  }

  .search-modal__content .predictive-search-form__content {
    max-height: var(--modal-max-height);
  }

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

  .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;

    @media screen and (max-width: 749px) {
      border-bottom-color: transparent;
    }
  }

  .predictive-search:has(.predictive-search-dropdown[aria-expanded='true'])
    .predictive-search-form__header-inner:focus-within {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-radius: var(--search-border-radius);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
    }
  }

  .dialog-modal .predictive-search-form__header {
    border: 0;
    border-radius: 0;
    background-color: var(--color-background);
    border-bottom: var(--style-border-width) solid var(--color-border);

    @media screen and (min-width: 750px) {
      padding: var(--padding-2xs) var(--padding-2xs) 0;
      border-bottom: var(--search-border-width) solid var(--color-border);
    }

    @media screen and (max-width: 749px) {
      transition: box-shadow 0.2s ease;
      box-shadow: none;
    }
  }

  .search-action .predictive-search:has(.predictive-search-dropdown) .predictive-search-form__header:focus-within {
    border-radius: var(--search-border-radius) var(--search-border-radius) 0 0;
    transition: box-shadow var(--animation-speed) var(--animation-easing);
    background-color: var(--color-background);

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs) var(--style-border-radius-inputs) 0 0;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal .predictive-search__close-modal-button {
      padding-inline-start: var(--margin-xs);
      margin-inline-start: 0;
    }
  }

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

  .dialog-modal .predictive-search-form__header:has(.predictive-search-form__header-inner:focus-within) {
    @media screen and (min-width: 750px) {
      border-bottom-color: transparent;
    }
  }

  @media screen and (max-width: 749px) {
    .dialog-modal {
      .predictive-search__reset-button-icon {
        display: none;
      }

      .predictive-search__reset-button-text {
        display: block;
      }

      .predictive-search-form__content {
        /* The parent has overflow auto, we want to prevent a double scrollbar during animation */
        max-height: 100%;
      }

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

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

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

  .predictive-search-results__pill {
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-foreground);
    transition: background-color var(--animation-speed-medium) var(--animation-timing-hover),
      box-shadow var(--animation-speed-medium) var(--animation-timing-bounce),
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    margin: 2px;

    &:hover {
      transform: scale(1.03);
      box-shadow: 0 2px 5px rgb(0 0 0 / var(--opacity-8));
    }
  }

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

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

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

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

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

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

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

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

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

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

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

    &:hover {
      background-color: var(--card-bg-hover);
      border-radius: var(--product-corner-radius);
      padding: calc(var(--padding-2xs) + 2px);
      margin: calc((var(--padding-2xs) + 2px) * -1);
    }

    &:is([aria-selected='true'].keyboard-focus, &:focus-visible, &:has(.resource-card:focus-visible)) {
      background-color: var(--card-bg-hover);
      padding: calc(var(--padding-2xs) + 1px);
      margin: calc((var(--padding-2xs) + 1px) * -1);
      outline: var(--border-width-sm) solid var(--color-border);
      border-radius: calc(var(--product-corner-radius) + 1px);
      border-color: var(--card-border-focus);
    }
  }

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

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

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

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

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

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

    40% {
      opacity: 1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Products list styles */
  .predictive-search-results__products {
    padding-inline: var(--padding-xl);
  }

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

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

  .predictive-search-results__clear.button-unstyled {
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-easing);
    padding: 0;
    margin-left: var(--margin-sm);

    &:hover {
      opacity: 1;
    }
  }

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

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

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(1) {
    animation-delay: 30ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(2) {
    animation-delay: 60ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(3) {
    animation-delay: 90ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(4) {
    animation-delay: 120ms;
  }

  .predictive-search-results__wrapper-products .predictive-search-results__card:nth-child(n + 5) {
    animation-delay: 150ms;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* START_SNIPPET:price-filter (INDEX:213) */
/* Price filter */
  .price-facet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
  }
  .price-facet--horizontal {
    min-width: 360px;
  }

  .price-facet__inputs-wrapper {
    display: flex;
    flex-direction: row;
    padding: var(--style-border-width-inputs);
    gap: calc(var(--gap-sm) + (var(--style-border-width-inputs) * 2));
  }

  @container (max-width: 199px) {
    .price-facet__inputs-wrapper {
      flex-wrap: wrap;
    }
  }

  .price-facet__input {
    width: 100%;
    text-align: right;
    padding-left: calc(2.5 * var(--input-padding-x));
  }

  .price-facet__input::placeholder {
    color: var(--facets-input-label-color);
  }

  .price-facet__separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-paragraph--size);
  }

  .price-facet__highest-price {
    padding: var(--padding-xs) 0 var(--padding-sm);
  }

  .price-facet__highest-price--horizontal {
    padding: 0 var(--padding-md) var(--padding-xs);
  }

  .price-facet__label {
    top: 0;
    left: 0;
    color: var(--facets-input-label-color);
    padding: var(--input-padding-y) var(--input-padding-x);
    transform: none;
  }
/* END_SNIPPET:price-filter */

/* START_SNIPPET:product-badges-styles (INDEX:215) */
.product-badges {
    --badge-inset: max(var(--padding-xs), calc((var(--border-radius) + var(--padding-xs)) * (1 - cos(45deg))));

    position: absolute;
    z-index: var(--layer-flat);
  }

  .product-badges--bottom-left {
    bottom: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-left {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    left: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges--top-right {
    top: calc(var(--badge-inset) + var(--padding-block-start));
    right: calc(var(--badge-inset) + var(--padding-inline-start));
  }

  .product-badges__badge {
    --badge-font-size: var(--font-size--xs);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-foreground);
    background: var(--color-background);
    font-size: var(--badge-font-size);
    font-family: var(--badge-font-family);
    font-weight: var(--badge-font-weight);
    text-transform: var(--badge-text-transform);
    border-radius: var(--badge-border-radius);
  }

  .product-badges__badge--rectangle {
    padding-block: var(--badge-rectangle-padding-block);
    padding-inline: var(--badge-rectangle-padding-inline);
  }
/* END_SNIPPET:product-badges-styles */

/* START_SNIPPET:product-card (INDEX:216) */
.product-card__placeholder-image svg {
    height: 100%;
  }

  .product-card__content slideshow-component {
    --cursor: pointer;
  }

  @media screen and (max-width: 749px) {
    .product-card slideshow-arrows .slideshow-control {
      display: none;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-grid (INDEX:217) */
.product-grid {
    --product-grid-gap: var(--product-grid-gap-mobile);
    --mobile-columns: 2; /* Default value */

    isolation: isolate;

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

  .product-grid slideshow-arrows .slideshow-control {
    display: none;

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

  /* This triggers iOS < 16.4 */
  @supports not (background-color: rgb(from red 150 g b / alpha)) {
    /* Force aspect ratio to auto for iOS < 16.4 since it's not compatible with the infinite pagination */
    .product-grid .product-media,
    .product-grid .product-media-container {
      aspect-ratio: auto;
    }
  }

  .main-collection-grid {
    grid-column: var(--grid-column--mobile);
    padding: var(--grid--margin--mobile);

    @media screen and (min-width: 750px) {
      grid-column: var(--grid-column--desktop);
      padding: var(--padding-block-start) var(--padding-inline-end) var(--padding-block-end) var(--padding-inline-start);
    }
  }

  .main-collection-grid__empty {
    padding-block: var(--padding-6xl);
    padding-inline: var(--page-margin);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--padding-sm);
  }

  .main-collection-grid__empty-title {
    margin: 0;
  }
/* END_SNIPPET:product-grid */

/* START_SNIPPET:product-information-content (INDEX:218) */
.product-information {
    gap: var(--gap) 0;
  }

  /* Base grid layout */
  .product-information__grid {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }

  /* Default column positions */
  .product-details {
    order: 1;
  }

  .product-information__media {
    order: 0;
    width: 0;
    min-width: 100%;
  }

  .product-information__media .product-media-gallery__placeholder-image {
    width: 100%;
    height: 100%;
  }

  /* Mobile styles */
  @media screen and (max-width: 749px) {
    .product-information__media {
      grid-column: 1 / -1;
    }

    .product-details {
      grid-column: 2 / 3;
    }
  }

  /* Desktop styles */
  @media screen and (min-width: 750px) {
    .product-information__grid {
      grid-column: 2;
    }

    /* Position when there is no media */
    .product-information__grid.product-information--media-none {
      .product-details {
        width: var(--narrow-content-width);
        margin: 0 auto;
      }
    }

    /* Position when there is media */
    .product-information__grid:not(.product-information--media-none) {
      /* Media on the left side */
      &.product-information--media-left {
        grid-template-columns: 1fr min(50vw, var(--sidebar-width));

        .product-information__media {
          padding-right: calc(var(--gap, 0) / 2);
        }

        .product-details {
          padding-left: calc(var(--gap, 0) / 2);
        }

        &:has(.media-gallery--extend) {
          grid-column: 1 / 3;
        }
      }

      /* Media on the right side */
      &.product-information--media-right {
        grid-template-columns: min(50vw, var(--sidebar-width)) 1fr;

        .product-information__media {
          padding-left: calc(var(--gap, 0) / 2);
          order: 1;
        }

        .product-details {
          padding-right: calc(var(--gap, 0) / 2);
          order: 0;
        }

        &:has(.media-gallery--extend) {
          grid-column: 2 / -1;
        }
      }

      /* Equal width columns */
      &.product-information__grid--half,
      &.product-information__grid--half:has(.media-gallery--extend) {
        grid-column: 1 / -1;
        grid-template-columns:
          var(--full-page-grid-margin) calc(var(--full-page-grid-central-column-width) / 2) calc(
            var(--full-page-grid-central-column-width) / 2
          )
          var(--full-page-grid-margin);

        &.product-information--media-left {
          .product-information__media {
            grid-column: 2 / 3;

            &:has(.media-gallery--extend) {
              grid-column: 1 / 3;
            }
          }

          .product-details {
            grid-column: 3 / 4;
          }
        }

        &.product-information--media-right {
          .product-information__media {
            grid-column: 3 / 4;

            &:has(.media-gallery--extend) {
              grid-column: 3 / -1;
            }
          }

          .product-details {
            grid-column: 2 / 3;
          }
        }
      }
    }

    /* Handle full width section */
    .section--full-width {
      .product-information__grid:not(.product-information--media-none) {
        &.product-information--media-left,
        &.product-information--media-right {
          grid-column: 1 / -1;
        }

        &.product-information--media-left .product-details {
          padding-inline-end: var(--padding-lg);
        }

        &.product-information--media-right .product-details {
          padding-inline-start: var(--padding-lg);
        }

        &.product-information__grid--half.product-information--media-left {
          .product-information__media {
            grid-column: 1 / 3;
          }

          .product-details {
            grid-column: 3 / -1;
          }
        }

        &.product-information__grid--half.product-information--media-right {
          .product-information__media {
            grid-column: 3 / -1;
          }

          .product-details {
            grid-column: 1 / 3;
          }
        }
      }
    }
  }

  /* Wider sidebar for large screens */
  @media screen and (min-width: 1200px) {
    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-left {
      grid-template-columns: 2fr 1fr;
    }

    .product-information__grid:not(
        .product-information__grid--half,
        .product-information--media-none
      ).product-information--media-right {
      grid-template-columns: 1fr 2fr;
    }
  }

  .product-information__grid--limit-details .product-details > .group-block {
    --details-max-width: var(--sidebar-width);
    max-width: var(--details-max-width);
  }

  @media screen and (min-width: 1600px) {
    .product-information__grid--limit-details .product-details > .group-block {
      --details-max-width: 32rem;
    }
  }

  /* If the header is sticky, make product details content stick underneath the header */
  body:has(#header-group #header-component[data-sticky-state='active']) .product-details.sticky-content--desktop {
    --sticky-header-offset: var(--header-height);
  }
/* END_SNIPPET:product-information-content */

/* START_SNIPPET:product-media-gallery-content-styles (INDEX:219) */
media-gallery:where(.media-gallery--grid) .media-gallery__grid {
    display: none;
  }

  media-gallery.media-gallery--grid .media-gallery__grid .product-media-container {
    /* Needed for safari to stretch to full grid height */
    height: 100%;
  }

  @media screen and (min-width: 750px) {
    .media-gallery--two-column .media-gallery__grid {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Display grid view as a carousel on mobile, grid on desktop */
    media-gallery:is(.media-gallery--grid) slideshow-component {
      display: none;
    }

    media-gallery:where(.media-gallery--grid) .media-gallery__grid {
      display: grid;
    }
  }

  .product-media-container__zoom-button {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: var(--layer-flat);
    cursor: zoom-in;
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }

  .product-media__drag-zoom-wrapper {
    aspect-ratio: inherit;
    min-height: inherit;
    min-width: inherit;
    display: inherit;
    flex: inherit;
  }

  .media-gallery__mobile-controls {
    grid-area: auto;
  }

  .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-in;
  }
/* END_SNIPPET:product-media-gallery-content-styles */

/* START_SNIPPET:product-media-gallery-content (INDEX:220) */
.dialog-thumbnails-list-container {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    z-index: var(--layer-raised);
  }

  .dialog-thumbnails-list {
    --active-thumbnail-border-color: rgb(var(--color-border-rgb) / var(--media-border-opacity));

    position: relative;
    display: inline-flex;
    flex-direction: row;
    gap: 8px;
    bottom: 0;
    overflow-x: auto;
    opacity: 0;
    padding: var(--padding-lg);
    margin-inline: auto;
    scrollbar-width: none;
    animation: thumbnailsSlideInBottom calc(var(--animation-speed) * 0.75) var(--animation-easing) forwards;
    animation-delay: calc(var(--animation-speed) * 1.5);
  }

  .dialog--closed .dialog-thumbnails-list {
    animation: thumbnailsSlideOutBottom var(--animation-speed) var(--animation-easing) forwards;
  }

  @media screen and (min-width: 750px) {
    .dialog-thumbnails-list {
      position: fixed;
      flex-direction: column;
      inset: 50% var(--margin-lg) auto auto;
      right: 0;
      max-height: calc(100vh - 200px);
      overflow-y: auto;
      animation: thumbnailsSlideInTop var(--spring-d220-b0-duration) var(--spring-d220-b0-easing) forwards;
      animation-delay: calc(var(--spring-d220-b0-duration) * 0.5);
    }

    .dialog--closed .dialog-thumbnails-list {
      animation: thumbnailsSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
    }
  }

  .dialog-thumbnails-list__thumbnail {
    width: var(--thumbnail-width);
    height: auto;
    transition: transform var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
    border-radius: var(--media-radius);

    img {
      height: 100%;
      object-fit: cover;
      border-radius: var(--media-radius);
      aspect-ratio: var(--aspect-ratio);
    }

    &:is([aria-selected='true']) {
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
    }
  }

  @supports (anchor-name: --test) {
    .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
      --inset-offset: calc(var(--focus-outline-offset) / 2);

      content: '';
      position: absolute;
      inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
      position-anchor: --selected-thumbnail;
      outline: var(--focus-outline-width) solid currentcolor;
      outline-offset: calc(var(--focus-outline-offset) / 2);
      border: var(--style-border-width) solid var(--active-thumbnail-border-color);
      border-radius: var(--media-radius);
      z-index: var(--layer-raised);
    }

    @media (prefers-reduced-motion: no-preference) {
      .dialog-thumbnails-list:has(.dialog-thumbnails-list__thumbnail:is([aria-selected='true']))::after {
        transition-property: inset;
        transition-duration: var(--spring-d180-b0-duration);
        transition-timing-function: var(--spring-d180-b0-easing);
      }
    }

    .dialog-thumbnails-list__thumbnail:is([aria-selected='true']) {
      outline: none;
      border: none;
      anchor-name: --selected-thumbnail;
    }
  }

  .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    /* Move the controls above the thumbnails. Need to calculate the height of the thumbnails list */
    bottom: calc(var(--thumbnail-width) / var(--media-preview-ratio) + var(--padding-lg) * 2);
    right: var(--padding-lg);
  }

  @media screen and (min-width: 750px) {
    .dialog-zoomed-gallery .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
      /* Move the controls up to match the padding on the thumbnails */
      bottom: var(--padding-lg);

      /* Move the controls to the left of the thumbnails list on the right */
      right: calc(var(--thumbnail-width) + var(--padding-lg) * 2);
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  .dialog-zoomed-gallery__dialog {
    background-color: var(--color-background);
    view-transition-name: zoom-dialog-ui;
  }

  .dialog-zoomed-gallery {
    cursor: zoom-out;
  }

  .dialog--preloading {
    opacity: 0;
  }

  @media screen and (max-width: 749px) {
    .dialog-zoomed-gallery {
      /* Prevent scroll wheel or swipe scrolling */
      overscroll-behavior: none;
      scrollbar-width: none;
      display: flex;
      scroll-snap-type: x mandatory;
      overflow-x: hidden;
      scroll-behavior: smooth;
      height: 100%;

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

    .dialog-zoomed-gallery .product-media-container {
      flex: 0 0 100%;
      scroll-snap-align: start;
      position: relative;
    }

    .dialog-zoomed-gallery .product-media-container--image .product-media {
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .dialog-zoomed-gallery .product-media-container--video,
    .dialog-zoomed-gallery .product-media-container--external_video {
      align-content: center;
    }

    .dialog-zoomed-gallery
      :is(.product-media-container--video, .product-media-container--external_video, .product-media-container--model)
      .product-media {
      aspect-ratio: auto;
      align-items: center;
      height: 100%;

      .product-media__image {
        height: 100%;
      }
    }

    .product-media__drag-zoom-wrapper {
      display: flex;
      aspect-ratio: auto;
      height: 100%;
      width: 100%;
      overflow: scroll;
      scrollbar-width: none;
      justify-content: center;

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

    .product-media__drag-zoom-wrapper .product-media__image {
      --product-media-fit: contain;

      object-fit: var(--product-media-fit);
      overflow: hidden;
      transform: scale(var(--drag-zoom-scale))
        translate(var(--drag-zoom-translate-x, 0), var(--drag-zoom-translate-y, 0));
    }

    .media-gallery--hint {
      --slideshow-gap: var(--gap-2xs);

      :not(.dialog-zoomed-gallery) > .product-media-container:not(:only-child) {
        width: 90%;

        .product-media img {
          object-fit: cover;
        }
      }
    }
  }

  .dialog-zoomed-gallery__close-button {
    color: #fff;
    mix-blend-mode: difference;
    z-index: var(--layer-raised);
  }

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

    .media-gallery__mobile-controls[thumbnails] .slideshow-controls__thumbnail {
      width: var(--thumbnail-width);
      height: auto;
    }
  }

  .dialog-zoomed-gallery .product-media-container--zoomable.product-media-container--image {
    cursor: zoom-out;
  }

  .dialog-zoomed-gallery .product-media-container--video deferred-media,
  .dialog-zoomed-gallery .product-media-container--external_video deferred-media {
    height: auto;
    aspect-ratio: var(--ratio);
  }

  .dialog-zoomed-gallery .product-media-container--model .product-media__image {
    /* Make the height match the height of the model-viewer */
    height: 100vh;
  }

  :root:active-view-transition .dialog-zoomed-gallery__dialog {
    background-color: transparent;
  }

  ::view-transition-group(zoom-dialog-ui) {
    z-index: calc(var(--layer-overlay) + 1);
  }

  ::view-transition-old(gallery-item-open),
  ::view-transition-new(gallery-item-open) {
    animation-timing-function: step-start;
  }

  ::view-transition-old(gallery-item-close),
  ::view-transition-new(gallery-item-close) {
    animation-timing-function: step-end;
  }

  @media screen and (min-width: 750px) {
    :root:active-view-transition .product-media__image {
      background-color: transparent;
    }
  }

  ::view-transition-group(gallery-item-open),
  ::view-transition-group(gallery-item-close) {
    z-index: var(--layer-overlay);
    border-radius: var(--gallery-media-border-radius);
    overflow: clip;
  }

  ::view-transition-group(gallery-item-open) {
    animation-timing-function: var(--spring-d300-b0-easing);
    animation-duration: var(--spring-d300-b0-duration);
  }

  ::view-transition-group(gallery-item-close) {
    animation-timing-function: var(--spring-d220-b0-easing);
    animation-duration: var(--spring-d220-b0-duration);
  }

  @media screen and (max-width: 749px) {
    ::view-transition-group(gallery-item-open),
    ::view-transition-group(gallery-item-close) {
      animation-timing-function: step-start;
      animation-duration: 0.1s;
    }

    ::view-transition-new(gallery-item-open) {
      animation: fade-in var(--spring-d180-b0-duration) var(--spring-d180-b0-easing) forwards;
      animation-timing-function: var(--spring-d180-b0-easing);
      animation-duration: var(--spring-d180-b0-duration);
    }

    ::view-transition-old(gallery-item-close) {
      animation: fade-out 0.08s linear forwards;
    }
  }

  @keyframes fade-in {
    from {
      scale: 0.98;
      opacity: 0.8;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  /*
   * Product media gallery slideshow context styles
   */
  .product-media-gallery__slideshow--single-media slideshow-container {
    @media screen and (max-width: 749px) {
      grid-area: unset;
    }
  }

  /* Display grid view as a carousel on mobile, grid on desktop */
  media-gallery:is(.media-gallery--grid) slideshow-component {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  @media screen and (max-width: 749px) {
    /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
    .media-gallery--hint
      :is(
        slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
        slideshow-slide[aria-hidden='false'] + slideshow-slide
      ) {
      content-visibility: auto;

      slideshow-component[actioned] & {
        content-visibility: visible;
      }
    }
  }

  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-component:has(slideshow-controls[thumbnails]) {
      &:has(slideshow-controls[pagination-position='right']) {
        display: grid;
        grid-template:
          'container controls' auto
          'arrows controls' min-content
          / 1fr auto;
      }

      &:has(slideshow-controls[pagination-position='left']) {
        display: grid;
        grid-template:
          'controls container' auto
          'controls arrows' min-content
          / auto 1fr;
      }

      slideshow-controls[pagination-position='left'] {
        order: -1;
      }
    }
  }

  .media-gallery--carousel slideshow-arrows .slideshow-control {
    padding-inline: 0 var(--padding-md);
    opacity: 1;
  }

  @media screen and (max-width: 749px) {
    slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  @media screen and (min-width: 750px) {
    slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
      .shopify-model-viewer-ui__controls-area {
      /* Position the controls just above the counter */
      bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
    }
  }

  slideshow-slide.product-media-container--tallest {
    content-visibility: visible;
  }
/* END_SNIPPET:product-media-gallery-content */

/* START_SNIPPET:product-media (INDEX:221) */
.product-media {
    aspect-ratio: var(--gallery-aspect-ratio, var(--ratio));
    min-height: 0;
    min-width: 0;
  }

  .product-media__image {
    object-position: var(--focal-point, center center);
  }

  /*** Media border-radius feature ****/
  @media screen and (min-width: 750px) {
    .media-gallery--carousel slideshow-container,
    .media-gallery--grid .product-media > * {
      border-radius: var(--media-radius, 0);
      overflow: hidden;
    }

    /* When the CAROUSEL is on the LEFT side */
    .product-information:not(.product-information--media-right)
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    /* When the CAROUSEL is on the RIGHT side */
    .product-information.product-information--media-right
      .media-gallery--carousel.media-gallery--extend
      slideshow-container {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* When the GRID is on the LEFT side */
    .product-information:not(.product-information--media-right) {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(odd)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media
        > * {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    /* When the GRID is on the RIGHT side */
    .product-information.product-information--media-right {
      /* One column */
      .media-gallery--grid.media-gallery--extend:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column:not(.media-gallery--large-first-image)
        .product-media-container:nth-of-type(even)
        .product-media
        > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--extend.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(odd))
        .product-media
        > * {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
/* END_SNIPPET:product-media */

/* START_SNIPPET:quantity-selector (INDEX:222) */
.quantity-selector-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(var(--gap-sm) / 2);

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

  .price-per-item {
    display: block;
    color: var(--color-foreground);
    font-size: var(--font-size--sm);
    font-weight: normal;
  }
/* END_SNIPPET:quantity-selector */

/* START_SNIPPET:quick-add-modal-styles (INDEX:223) */
#quick-add-dialog {
    display: contents;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal {
      width: var(--quick-add-modal-width);
      height: var(--quick-add-modal-height);
      max-width: none;
    }
  }

  .quick-add-modal {
    padding: 0;
    border: var(--style-border-popover);
    overflow: hidden;
    box-shadow: 0 5px 30px rgb(0 0 0 / var(--opacity-15));

    @media screen and (max-width: 749px) {
      position: fixed;
      margin: auto 0 0 0;
      min-height: unset;
      max-width: 100%;
      border-radius: 0;
      overflow: clip;
      height: fit-content;
    }
  }

  .quick-add-modal[open] {
    @media screen and (max-width: 750px) {
      border-top-left-radius: var(--style-border-radius-popover);
      border-top-right-radius: var(--style-border-radius-popover);
    }
  }

  .quick-add-modal[open] {
    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .quick-add-modal .view-more-details__wrapper {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal[open] {
    animation: modalSlideInTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal.dialog-closing {
    animation: modalSlideOutTop var(--animation-speed) var(--animation-easing) forwards;
  }

  .quick-add-modal__close {
    position: absolute;
    top: var(--margin-2xs);
    right: var(--margin-2xs);
    transition: transform 0.15s var(--animation-timing-bounce);
    z-index: var(--layer-raised);
    overflow: visible;
    transform-origin: center;
  }

  .quick-add-modal__close:active {
    transform: scale(0.99) translateY(1px);
  }

  .quick-add-modal__close {
    &:focus-visible {
      outline: none;
    }

    &:focus-visible::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: calc(var(--style-border-radius-popover) - var(--margin-2xs));
      outline: var(--focus-outline-width) solid currentColor;
    }
  }

  .quick-add-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 100% 1fr;
    position: relative;
    overflow-y: auto;
    max-height: 100vh;
    flex-grow: 1;

    @media screen and (max-width: 749px) {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto;
      padding-inline: var(--padding-xl);
      padding-block: var(--padding-xl);
      gap: var(--gap-lg);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      height: auto; /* Prevent a bug in Safari where height:fit-content is not respected */
      max-height: 100vh;
    }
  }

  .quick-add-modal__content .media-gallery--grid .media-gallery__grid {
    grid-template-columns: 1fr;
  }

  .quick-add-modal__content .media-gallery--grid.media-gallery--two-column .product-media-container:first-child {
    grid-column: auto;
  }

  .quick-add-modal__content {
    /* One column */
    .media-gallery--grid:not(.media-gallery--two-column) .product-media > *,
      /* Two column, small first image */
      .media-gallery--grid.media-gallery--two-column:not(.media-gallery--large-first-image)
      .product-media-container:nth-of-type(odd)
      .product-media > *,
      /* Two column, large first image */
      .media-gallery--grid.media-gallery--two-column.media-gallery--large-first-image
        .product-media-container:is(:first-of-type, :nth-of-type(even))
        .product-media > *,
        /* Carousel */
      .media-gallery--carousel slideshow-container {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .quick-add-modal__content .view-more-details__wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
  }

  .view-more-details__wrapper .view-more-details {
    display: flex;
    align-items: center;
    width: fit-content;
  }

  .quick-add-modal__content .product-header {
    @media screen and (max-width: 749px) {
      display: flex;
      flex-direction: column;
      grid-column: 2 / -1;
      grid-row: 1;
      padding-right: var(--padding-2xl);
    }
  }

  .quick-add-modal__content .product-header a:not(product-price *) {
    @media screen and (max-width: 749px) {
      font-size: var(--font-size--md);
      font-weight: 500;
      color: inherit;
      width: fit-content;
    }
  }

  .quick-add-modal__content variant-picker,
  .quick-add-modal__content product-form-component {
    @media screen and (max-width: 749px) {
      grid-column: 1 / -1;
    }
  }

  .quick-add-modal__content .product-media-container__zoom-button {
    cursor: default;
  }

  .quick-add-modal__content .product-details {
    grid-column: 4 / -1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    position: relative;

    dialog[open] & {
      animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
      animation-delay: 0.1s;
    }

    @media screen and (max-width: 749px) {
      grid-column: 2 / span 2;
      grid-row: span 1;
      max-height: 100%;
      height: 100%;
    }
  }

  @property --quick-add-modal-mask-start {
    syntax: '<length>';
    initial-value: 0px;
    inherits: false;
  }

  @property --quick-add-modal-mask-end {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
  }

  @keyframes detect-scroll {
    from,
    to {
      --can-scroll: ;
    }
  }

  @supports (animation-timeline: scroll(self)) {
    dialog[open] .quick-add-modal__content .product-details {
      mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--quick-add-modal-mask-start), #000 100%);
      animation: 0.3s var(--animation-timing-fade-in) 0.1s both fadeSlideIn, scrollStart 1s linear both,
        scrollEnd 1s linear both, detect-scroll 1ms linear none;
      animation-timeline: auto, scroll(self), scroll(self), scroll(self);
      animation-range: normal, 0px 48px, calc(100% - 48px) 100%, 0% 100%;
    }
  }

  @keyframes scrollStart {
    from {
      --quick-add-modal-mask-start: 0px;
    }
    to {
      --quick-add-modal-mask-start: 48px;
    }
  }

  @keyframes scrollEnd {
    from {
      --quick-add-modal-mask-end: 0px;
    }
    to {
      --quick-add-modal-mask-end: 48px;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    flex-grow: 1;
    width: auto;
  }

  .quick-add-modal__content > * {
    min-height: 0;
  }

  .quick-add-modal__content .product-details :is(.view-product-title, .buy-buttons-block) {
    flex: 0 0 auto;
  }
  .quick-add-modal__content .product-details :is(.buy-buttons-block) {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    padding-bottom: var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) {
    position: static;
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) > product-form-component {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form) form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .quick-add-modal__content .product-details .buy-buttons-block:has(gift-card-recipient-form)::before {
    display: none;
  }

  .quick-add-modal__content .product-details .buy-buttons-block__bar {
    display: block;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-block: var(--gap-md) var(--padding-3xl);
    background-color: var(--color-background);
    z-index: var(--layer-raised);

    &::before {
      --quick-add-modal-mask-end-progressive-enhanced: 0px;

      position: absolute;
      content: '';
      display: block;
      inset: auto 0 100% 0;
      pointer-events: none;
      height: min(var(--gap-2xl), var(--gap));
      background-color: inherit;
      mask-image: linear-gradient(
        to top,
        #000 0%,
        #000 calc(var(--gap-2xs)),
        transparent calc(100% - var(--quick-add-modal-mask-end-progressive-enhanced)),
        transparent
      );
    }
  }

  @supports (animation-timeline: scroll(self)) {
    .quick-add-modal__content .product-details :is(.buy-buttons-block)::before,
    .quick-add-modal__content .product-details .buy-buttons-block__bar::before {
      --mask-if-scroll: var(--can-scroll) var(--quick-add-modal-mask-end);
      --mask-if-no-scroll: 48px;
      --quick-add-modal-mask-end-progressive-enhanced: var(--mask-if-scroll, var(--mask-if-no-scroll));
      height: calc(var(--gap-2xs) + 48px);
    }
  }

  .quick-add-modal__content .product-details .variant-picker {
    flex: 0 0 auto;

    padding-block: min(var(--gap-2xl), var(--gap));
    margin-block-end: calc(var(--focus-outline-offset) + var(--focus-outline-width));
  }

  .quick-add-modal__content .variant-option--swatches {
    padding-inline-start: var(--padding-2xs);
  }

  .quick-add-modal__content .variant-option--swatches legend {
    margin-inline-start: calc(-1 * var(--padding-2xs));
  }

  .quick-add-modal__content:not(:has(.product-information__media)) .product-details {
    grid-column: 1 / -1;
  }

  .quick-add-modal__content .view-product-title {
    display: flex;
    padding-block: 0;
    margin-block-end: 12px;

    /* Prevent overlap between title and close button */
    padding-inline-end: calc(var(--padding-2xl) + calc(var(--minimum-touch-target) / 2));
  }

  .quick-add-modal__content .view-product-title a {
    color: inherit;
    text-decoration: none;
    text-align: left;
    font-size: var(--font-size--2xl);
    font-weight: 600;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s var(--animation-easing);
  }

  .quick-add-modal__content .product-details product-price {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price.text-block--align-center {
    margin-inline: 0;
  }

  .quick-add-modal__content .product-details product-price.text-center {
    --text-align: left;
  }

  .quick-add-modal__content .product-details product-price > * {
    text-align: left;
  }

  .quick-add-modal__content
    .product-details
    *:not(
      .group-block,
      .group-block-content,
      .buy-buttons-block,
      .buy-buttons-block *,
      .view-product-title,
      .view-product-title *,
      variant-picker,
      variant-picker *,
      product-price,
      product-price *,
      product-inventory,
      product-inventory *,
      .view-more-details__wrapper,
      .view-more-details__wrapper *
    ) {
    @media screen and (min-width: 750px) {
      /* stylelint-disable-next-line declaration-no-important */
      display: none !important;
    }
  }

  .quick-add-modal__content
    .group-block:not(
      :has(
          .buy-buttons-block,
          .buy-buttons-block *,
          .view-product-title,
          .view-product-title *,
          variant-picker,
          variant-picker *,
          product-price,
          product-price *,
          product-inventory,
          product-inventory *,
          .view-more-details__wrapper,
          .view-more-details__wrapper *
        ),
      .buy-buttons-block
    ) {
    display: none;
  }

  @media screen and (min-width: 750px) {
    .quick-add-modal__content .group-block-content {
      gap: 0;
    }

    .quick-add-modal__content .media-gallery__grid {
      gap: min(var(--gap-2xs), var(--image-gap));
      border-radius: var(--style-border-radius-popover, 0);
    }

    .quick-add-modal__content .media-gallery--grid .product-media img {
      border-radius: 0;
    }
  }

  .quick-add-modal__content .product-details > .group-block {
    padding-block: var(--padding-3xl) 0;
  }

  .quick-add-modal__content :where(.product-details > .group-block > .group-block-content > *) {
    padding-inline: var(--padding-3xl);
  }

  .quick-add-modal__content slideshow-slide:not([aria-hidden='false']) {
    content-visibility: auto;
  }

  .quick-add-modal__content .product-information__media {
    width: 100%;
    grid-column: 1 / span 1;
    grid-row: 1;
    position: relative;
    top: 0;
    animation: fadeIn 0.4s var(--animation-timing-fade-in) both;

    @media screen and (min-width: 750px) {
      position: sticky;
      grid-column: 1 / 4;
      width: var(--quick-add-modal-gallery-width);
      overflow-y: auto;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

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

  .quick-add-modal__content .product-information__media media-gallery {
    pointer-events: none;

    @media screen and (min-width: 750px) {
      position: absolute;
      inset: 0;
    }
  }

  .quick-add-modal media-gallery {
    padding: 0;
  }

  .quick-add-modal__content .product-information__media slideshow-arrows {
    display: none;
  }

  .quick-add-modal__content .product-information__media slideshow-container {
    display: block;
  }

  .quick-add-modal__content .product-information__media slideshow-slides {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    overflow: visible;
    scroll-snap-type: none;
  }

  .quick-add-modal__content .product-information__media slideshow-slide {
    width: 100%;
    flex: none;
    scroll-snap-align: unset;
    position: relative;
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--animation-easing);
  }

  .quick-add-modal__content .product-information__media slideshow-slide[aria-hidden='true'] {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(1) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(2) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.05s;
  }

  .quick-add-modal__content .product-information__media slideshow-slide:nth-child(3) {
    animation: fadeSlideIn 0.3s var(--animation-timing-fade-in) both;
    animation-delay: 0.1s;
  }

  .quick-add-modal__content .product-information__media :is(slideshow-controls, slideshow-controls[thumbnails]) {
    display: none;
  }

  .quick-add-modal__content .sticky-content,
  .quick-add-modal__content .sticky-content--desktop {
    top: 0;
  }

  .quick-add-modal__content .text-block.rte:not(product-price),
  .quick-add-modal__content .view-more-details__wrapper {
    display: none;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
/* END_SNIPPET:quick-add-modal-styles */

/* START_SNIPPET:quick-add-styles (INDEX:225) */
/* Quick Add */
  .quick-add {
    --quick-add-offset: var(--padding-sm);
    --quick-add-right: calc(var(--quick-add-offset) + var(--padding-inline-end));
    --quick-add-bottom: calc(var(--quick-add-offset) + var(--padding-block-end));

    position: absolute;
    inset: 0;
    z-index: var(--layer-raised);
    pointer-events: none;

    @media screen and (min-width: 750px) {
      --quick-add-offset: var(--padding-md);
    }
  }

  .quick-add .variant-option__button-label input[data-option-available='false'] {
    cursor: not-allowed;
  }

  .quick-add[class*='color-scheme-'] {
    background-color: #0000;
  }

  product-card:is(:hover, :focus-within) .quick-add__button {
    opacity: 1;
  }

  .quick-add__button {
    display: var(--quick-add-mobile-display, none);
    align-items: center;
    background: linear-gradient(var(--color-background) 0 100%) padding-box;
    padding: 0;
    border-radius: 50px;
    border: 2px solid hsl(0 0% 0% / 0.15);
    height: var(--button-size-md);
    cursor: pointer;
    opacity: var(--quick-add-mobile-opacity, 0);
    overflow: hidden;
    color: var(--color-foreground);
    pointer-events: all;
    position: absolute;
    right: max(var(--quick-add-right), calc((var(--border-radius) + var(--quick-add-right)) * (1 - cos(45deg))));
    bottom: max(var(--quick-add-bottom), calc((var(--border-radius) + var(--quick-add-bottom)) * (1 - cos(45deg))));
    backdrop-filter: blur(20px) saturate(180%);

    &:hover {
      scale: 1.03;

      /* Hover stabilizer: extends hit area to maintain hover state */
      &::before {
        content: '';
        position: absolute;
        inset: -10px;
        z-index: -1;
      }
    }

    &:active {
      scale: 0.99;
    }

    .quick-add[stay-visible] & {
      display: grid;
    }

    @media screen and (min-width: 750px) {
      display: var(--quick-add-display, flex);
      opacity: 0;
    }
  }

  .quick-add__button.add-to-cart-button {
    height: var(--button-size-md);
  }

  .quick-add__button .add-to-cart-text {
    background: var(--color-background);
    overflow: hidden;
    border-radius: 50px;
    height: 100%;
    gap: 0;
  }

  .quick-add__button .svg-wrapper .checkmark-burst {
    width: 22px;
    height: 22px;
  }

  .quick-add__button .add-to-cart-icon {
    /* account for border width */
    height: 100%;
    width: calc(var(--button-size-md) - 4px);
  }

  .quick-add__button .add-to-cart-text__content {
    display: grid;
    grid-template-columns: 0fr;

    & > span {
      min-width: 0;

      span {
        padding-right: var(--padding-sm);
        opacity: 0;
        display: inline-block;
        filter: blur(2px);
        translate: 0.5ch 0;
      }
    }
  }

  .quick-add__button[data-added='true'] .add-to-cart-text {
    animation-name: atc-fade-out;
  }

  .quick-add__button[data-added='true'] .add-to-cart-text--added {
    translate: 0 0;
    animation-name: atc-fade-in;
  }

  .quick-add__product-form-component {
    height: 100%;
  }

  .quick-add__product-form-component .shopify-product-form {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    container-type: inline-size;
    height: 100%;
  }

  .quick-add-modal .product-media {
    width: 100%;
    height: 100%;
  }

  .quick-add-modal deferred-media {
    display: none;
  }

  .quick-add-modal .media-gallery--carousel slideshow-component {
    --cursor: default;
  }

  .quick-add__button:is(:hover, :focus-visible) {
    .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .quick-add__button .add-to-cart-text__content {
      grid-template-columns: 1fr;

      span span {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
      }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .quick-add__button {
      transition-property: scale, translate, opacity;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);
    }

    .quick-add__button:is(:hover, :focus-visible) {
      .add-to-cart-text__content,
      .add-to-cart-text__content span span {
        transition-delay: var(--animation-speed);
      }
    }

    .quick-add__button .add-to-cart-text__content {
      transition-property: grid-template-columns;
      transition-duration: var(--animation-speed);
      transition-timing-function: var(--ease-out-cubic);

      span span {
        transition-property: opacity, filter, translate;
        transition-duration: var(--animation-speed-slow);
        transition-timing-function: var(--ease-out-quad);
      }
    }
  }
/* END_SNIPPET:quick-add-styles */

/* START_SNIPPET:resource-card (INDEX:227) */
.resource-card {
    --resource-card-secondary-image-opacity: 0;
    --resource-card-primary-image-opacity: calc(1 - var(--resource-card-secondary-image-opacity));

    display: flex;
    flex-direction: column;
    row-gap: var(--padding-xs);
    position: relative;
    text-decoration: none;
    height: 100%;
    opacity: 0;
    animation: fadeIn var(--animation-speed-medium) var(--animation-timing-fade-in) forwards;
  }

  .resource-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .resource-card__content {
    display: flex;
    flex-direction: column;
    color: var(--color-foreground);
    gap: var(--padding-3xs);

    .price {
      font-weight: 500;
    }

    .volume-pricing-note {
      display: block;
      margin-top: var(--padding-3xs);
      font-family: var(--font-body--family);
      font-weight: normal;
      font-size: min(0.85em, var(--font-paragraph--size));
      line-height: normal;
      letter-spacing: normal;
      text-transform: none;
      color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    }
  }

  .resource-card[data-resource-type='article'] .resource-card__content,
  .resource-card[data-resource-type='page'] .resource-card__content {
    gap: var(--padding-xs);
  }

  .resource-card__image {
    aspect-ratio: var(--resource-card-aspect-ratio, auto);
    object-fit: cover;
    border-radius: var(--resource-card-corner-radius);
    opacity: var(--resource-card-primary-image-opacity);
  }

  .resource-card__image--secondary {
    position: absolute;
    top: 0;
    opacity: var(--resource-card-secondary-image-opacity);
    border-radius: var(--resource-card-corner-radius);
  }

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

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

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

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

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

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

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

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

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

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

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

  .resource-card__subtext {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
    margin-block-start: 0;
  }

  .resource-card__subtext.paragraph {
    font-size: var(--font-size--body-sm);
    line-height: var(--line-height--body-tight);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .resource-card:has(.resource-card__image--secondary) {
    &:hover,
    &:focus {
      --resource-card-secondary-image-opacity: 1;
    }
  }
/* END_SNIPPET:resource-card */

/* START_SNIPPET:resource-image (INDEX:228) */
.resource-image {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    z-index: var(--layer-base);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: var(--ratio);
  }

  .resource-image__image {
    object-fit: cover;
    aspect-ratio: var(--ratio);
    width: 100%;
    height: 100%;
  }

  .resource-image--placeholder {
    width: 100%;
    height: 100%;
  }
/* END_SNIPPET:resource-image */

/* START_SNIPPET:resource-list-carousel (INDEX:229) */
.resource-list__carousel {
    --slide-width: 60vw;
    width: 100%;
    position: relative;
    container-type: inline-size;
    container-name: resource-list-carousel;

    .slideshow-control[disabled] {
      display: none;
    }

    .slideshow-control--next {
      margin-inline-start: auto;
    }
  }

  @container resource-list-carousel (max-width: 749px) {
    .resource-list__carousel .resource-list__slide {
      --slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
    }
  }

  @container resource-list-carousel (min-width: 750px) {
    .resource-list__carousel .resource-list__slide {
      --section-slide-width: calc(
        (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
          var(--column-count)
      );
      --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
      --slide-width: var(--section-slide-width, var(--fallback-slide-width));
    }
  }

  .resource-list__carousel slideshow-slides {
    gap: var(--resource-list-column-gap);

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

  .resource-list__carousel slideshow-arrows {
    padding-inline: var(--util-page-margin-offset);
  }

  .resource-list__carousel .resource-list__slide {
    width: var(--slide-width);
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 0;
  }

  /*
   * Resource list carousels have peeking slides on both sides.
   * We try to kick load them beforehand (they are lazy loaded otherwise).
   */
  .resource-list__carousel
    :is(
      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
      slideshow-slide[aria-hidden='false'] + slideshow-slide
    ) {
    content-visibility: auto;

    slideshow-component[actioned] & {
      content-visibility: visible;
    }
  }
/* END_SNIPPET:resource-list-carousel */

/* START_SNIPPET:search-modal (INDEX:232) */
/* Search modal style */
  .search-modal {
    --search-border-radius: var(--style-border-radius-popover);
    --search-border-width: var(--style-border-width);
  }

  .search-modal__content {
    /* Approx set the top so when the content is at max height, the modal is centered */
    --modal-top-margin: calc(50dvh - var(--modal-max-height) / 2 - 2rem);
    --modal-width: 66dvw;

    padding: 0;
    border: var(--style-border-popover);

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

  /* Hide the default dialog backdrop on small screens */
  @media screen and (max-width: 749px) {
    .search-modal__content::backdrop {
      display: none;
    }
  }

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

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }
  }

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

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

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

  .dialog-modal
    .predictive-search-form__header:has(
      .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
    )::before {
    content: '';
    position: absolute;
    right: calc(var(--padding-sm) + var(--minimum-touch-target));
    top: 0;
    bottom: 0;
    width: var(--border-width-sm);
    background-color: var(--color-border);
  }

  .dialog-modal
    .predictive-search-form__header:has(.predictive-search__reset-button:not(.predictive-search__reset-button[hidden]))
    > .predictive-search__close-modal-button {
    &::before {
      content: none;
    }
  }

  @media screen and (min-width: 750px) {
    .dialog-modal
      .predictive-search-form__header:has(
        .predictive-search__reset-button:not(.predictive-search__reset-button[hidden])
      )::before {
      right: calc(var(--padding-2xl) * 2);
    }
  }

  predictive-search-component {
    --resource-card-corner-radius: var(--product-corner-radius);

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

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

    @media screen and (min-width: 750px) {
      --to-top-gradient-background: linear-gradient(
        to top,
        rgb(var(--color-background-rgb) / var(--opacity-90)),
        rgb(var(--color-background-rgb) / var(--opacity-80)),
        rgb(var(--color-background-rgb) / var(--opacity-40)),
        transparent
      );

      padding-block: var(--padding-xs) var(--padding-lg);
      background-image: var(--to-top-gradient-background);
    }
  }

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

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

  .predictive-search-form__content {
    max-height: 50dvh;
    overflow-y: auto;
    background-color: var(--color-background);

    /* Firefox */
    scrollbar-width: none;

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

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

    @media screen and (max-width: 749px) {
      border-radius: 0;
    }

    @media screen and (min-width: 750px) {
      max-height: var(--modal-max-height);
    }
  }

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

  .predictive-search-form__header-inner {
    background: var(--color-background);
    border: var(--search-border-width) solid var(--color-border);
    color: var(--color-foreground);
    border-radius: var(--style-border-radius-popover);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    @media screen and (max-width: 749px) {
      border-radius: var(--style-border-radius-inputs);
      border: none;
    }
  }

  .predictive-search-form__header-inner:focus-within {
    outline-offset: var(--focus-outline-offset);

    @media screen and (min-width: 750px) {
      outline: var(--focus-outline-width) solid var(--color-primary);
    }
  }

  .predictive-search-form__header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--layer-heightened);
    width: 100%;
    align-items: center;
    background-color: var(--color-input-background);
    border: var(--search-border-width) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);

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

  .predictive-search-form__header:focus-within,
  .predictive-search-form__header-inner:focus-within,
  .predictive-search-form__header-inner:has(.search-input:is(:focus, :focus-visible)) {
    outline: none;
    box-shadow: none;
    /* stylelint-disable-next-line declaration-no-important */
    border-color: var(--color-border) !important;
  }

  input.search-input {
    border-radius: var(--style-border-radius-inputs);
    padding-block: var(--padding-sm);
    font-size: var(--font-size--md);
    width: 100%;
    color: var(--color-foreground);
    padding-inline: calc(var(--margin-lg) + var(--icon-size-lg)) 0;
    background: transparent;
    text-overflow: ellipsis;
    overflow: hidden;
    outline: none;
    border: 0;
  }

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

  .search-input,
  .search-input:is(:focus, :focus-visible, :focus-within),
  .predictive-search-form__header *:is(:focus, :focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .search-input:hover {
    background-color: transparent;
  }

  .predictive-search__icon {
    position: absolute;
    left: var(--margin-xl);
    top: auto;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: rgb(var(--color-foreground-rgb) / var(--opacity-60));

    @media screen and (min-width: 750px) {
      left: var(--margin-md);
    }
  }

  .predictive-search__icon > svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    padding: 0;
    margin-inline-end: var(--margin-md);
    background: transparent;
    color: var(--color-foreground);
    opacity: 0.68;
    transition: opacity var(--animation-speed-medium) var(--animation-timing-fade-out),
      visibility var(--animation-speed-medium) var(--animation-timing-fade-out);

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

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

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

  .predictive-search__reset-button[hidden] {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .predictive-search__reset-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    transition: background-color var(--animation-speed-medium) ease-in-out,
      transform var(--animation-speed-medium) var(--animation-timing-bounce);
    border-radius: 50%;

    &:hover {
      background-color: rgb(var(--color-primary-hover-rgb) / var(--opacity-8));
    }
  }

  .predictive-search__reset-button:active .predictive-search__reset-button-icon {
    transform: scale(0.85);
    transition-timing-function: var(--animation-timing-active);
    transition-duration: 100ms;
  }

  .predictive-search__reset-button svg {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
  }

  .predictive-search__reset-button-text {
    display: none;
  }

  .predictive-search__search-button {
    margin: auto;
    z-index: var(--layer-raised);
    transition: transform var(--animation-speed-medium) var(--animation-timing-bounce),
      box-shadow var(--animation-speed-medium) var(--animation-timing-hover);
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgb(0 0 0 / var(--opacity-5));
    }

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

  .predictive-search__close-modal-button {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    margin-inline-start: var(--margin-sm);
    padding: 0;
    box-shadow: none;

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

    .svg-wrapper,
    svg {
      width: var(--icon-size-xs);
      height: var(--icon-size-xs);
    }
  }

  .predictive-search__close-modal-button:hover {
    --button-color: var(--color-foreground);
    --button-background-color: transparent;
  }
/* END_SNIPPET:search-modal */

/* START_SNIPPET:search (INDEX:233) */
.search-action {
    --search-border-radius: var(--style-border-radius-inputs);
    --search-border-width: var(--style-border-width-inputs);

    display: flex;
  }

  @media screen and (max-width: 749px) {
    .search-action--hidden-on-drawer {
      display: none;
    }
  }

  @media screen and (min-width: 750px) {
    [data-menu-style='drawer'] .search-action--hidden-on-drawer {
      display: none;
    }

    [data-menu-style='menu'] .search-action--hidden-on-menu {
      display: none;
    }
  }

  [data-menu-style='menu'] .header__column--left .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--padding-lg) * -1);
    }
  }

  .header__column--right .search-action {
    @media screen and (min-width: 750px) {
      margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
  }

  @media screen and (min-width: 750px) {
    .header__column--right .search-action--text {
      margin-inline: 0;
    }

    [data-menu-style='menu'] .header__column--left .search-action--text {
      margin-inline: 0;
    }
  }
/* END_SNIPPET:search */

/* START_SNIPPET:section (INDEX:234) */
.section-wrapper {
    --section-height-offset: 0px;
  }

  .section[data-shopify-visual-preview] {
    min-height: var(--section-preview-height);
    padding-top: 0;
  }

  .section[data-shopify-visual-preview] .custom-section-background {
    display: none;
  }

  body:has(> #header-group > .header-section > #header-component[transparent]):not(
      :has(> #header-group > .header-section + .shopify-section)
    )
    > main
    > .section-wrapper:first-child {
    --section-height-offset: var(--header-group-height, 0);
  }

  .custom-section-background {
    grid-column: 1 / -1;
  }

  .custom-section-content {
    z-index: var(--layer-flat);
  }
/* END_SNIPPET:section */

/* START_SNIPPET:skip-to-content-link (INDEX:236) */
.skip-to-content-link {
    position: absolute;
    left: -99999px;
  }

  .skip-to-content-link:focus {
    z-index: var(--layer-temporary);
    overflow: auto;
    width: auto;
    height: auto;
    padding: var(--padding-lg) var(--padding-4xl);
    left: var(--margin-lg);
    top: var(--margin-lg);
    background-color: var(--color-background);
    box-shadow: 0 0 0 var(--focus-outline-offset) var(--color-background);
  }
/* END_SNIPPET:skip-to-content-link */

/* START_SNIPPET:slideshow-arrow (INDEX:238) */
.slideshow-control--large {
    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .icon-caret {
      --icon-stroke-width: 1px;
    }

    .svg-wrapper,
    svg {
      width: var(--slideshow-controls-icon);
      height: var(--slideshow-controls-icon);
    }
  }

  /* Slideshow control shape styles */
  .slideshow-control.slideshow-control--shape-square,
  .slideshow-control.slideshow-control--shape-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary-button-background);
    color: var(--color-primary-button-text);
  }

  .slideshow-control.slideshow-control--shape-circle {
    border-radius: 50%;
  }

  .slideshow-control.slideshow-control--shape-square {
    border-radius: 0;
  }

  .slideshow-control .icon-caret {
    rotate: -90deg;
  }
/* END_SNIPPET:slideshow-arrow */

/* START_SNIPPET:slideshow-arrows (INDEX:239) */
slideshow-arrows {
    --cursor-previous: w-resize;
    --cursor-next: e-resize;

    position: absolute;
    inset: 0;
    display: flex;
    z-index: var(--layer-heightened);
    pointer-events: none;
    mix-blend-mode: difference;
    align-items: flex-end;

    &[position='left'] {
      justify-content: flex-start;
      padding-inline: var(--padding-xs);
    }

    &[position='right'] {
      justify-content: flex-end;
      padding-inline: var(--padding-xs);
    }

    &[position='center'] {
      justify-content: space-between;
      align-items: center;
    }
  }

  slideshow-arrows:has(.slideshow-control--shape-square),
  slideshow-arrows:has(.slideshow-control--shape-circle) {
    mix-blend-mode: normal;
  }

  slideshow-component[disabled='true'] slideshow-arrows {
    display: none;
  }

  slideshow-arrows .slideshow-control {
    pointer-events: auto;
    opacity: 0;
    min-height: var(--minimum-touch-target);
    min-width: var(--minimum-touch-target);
    padding: 0 var(--padding-xs);
    color: var(--color-white);
  }

  slideshow-arrows .slideshow-control.slideshow-control--style-none {
    display: none;
  }
/* END_SNIPPET:slideshow-arrows */

/* START_SNIPPET:slideshow-controls (INDEX:240) */
slideshow-controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    scrollbar-width: none;
    min-height: var(--minimum-touch-target);
    grid-area: controls;

    &[controls-on-media] {
      position: absolute;
      bottom: 0;
    }
  }

  slideshow-controls::-webkit-scrollbar {
    display: none;
  }

  slideshow-controls button {
    --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
    --color-active: var(--color-foreground);
    --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));

    display: inline-block;
    height: var(--minimum-touch-target);
    width: var(--minimum-touch-target);
    cursor: pointer;
  }

  slideshow-controls .icon {
    width: var(--icon-size-sm);
    height: var(--icon-size-xs);
  }

  slideshow-controls[pagination-position='center'] {
    align-items: center;
    justify-content: center;
  }

  slideshow-controls[pagination-position='center'][thumbnails] {
    width: 100%;
  }

  slideshow-controls[pagination-position='center']:not([controls-on-media], [thumbnails], [icons-on-media]) {
    justify-content: space-between;
  }

  @media screen and (min-width: 750px) {
    slideshow-controls[thumbnails]:is([pagination-position='right'], [pagination-position='left']) {
      display: flex;
      flex-direction: column;
      height: 0;
      min-height: 100%;

      .slideshow-controls__thumbnails-container {
        overflow: hidden auto;
      }

      &:not([controls-on-media]) {
        .slideshow-controls__thumbnails-container {
          position: sticky;
          top: var(--sticky-header-offset, 0);
        }

        .slideshow-controls__thumbnails {
          padding-block-start: var(--focus-outline-offset);
        }
      }
    }

    slideshow-controls:is([pagination-position='right'], [pagination-position='left']) .slideshow-controls__thumbnails {
      flex-direction: column;
    }

    slideshow-controls:not([controls-on-media]) {
      &:is([pagination-position='left'], [pagination-position='right']) .slideshow-controls__thumbnails {
        padding-block: var(--padding-2xs);
      }

      &[pagination-position='right'] .slideshow-controls__thumbnails {
        padding-inline-end: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }

      &[pagination-position='left'] .slideshow-controls__thumbnails {
        padding-inline-start: var(--slideshow-thumbnails-padding-inline, var(--focus-outline-offset));
      }
    }
  }

  slideshow-controls:not([controls-on-media])[icons-on-media] {
    &[pagination-position='right'] {
      justify-content: flex-end;
    }

    &[pagination-position='left'] {
      justify-content: flex-start;
    }
  }

  slideshow-controls[controls-on-media] {
    z-index: var(--layer-raised);

    &:has(.slideshow-controls__dots, .slideshow-controls__counter) {
      --color-foreground: #fff;
      --color-foreground-rgb: var(--color-white-rgb);
    }

    &[pagination-position='right'] {
      right: 0;
    }

    &[pagination-position='left'] {
      left: 0;
    }

    &[pagination-position='center'] {
      width: 100%;
    }

    &:not([thumbnails])[pagination-position='left'] {
      width: fit-content;
      align-self: flex-start;
    }

    &:not([thumbnails])[pagination-position='right'] {
      width: fit-content;
      align-self: flex-end;
    }
  }

  .slideshow-controls__arrows {
    display: flex;
    justify-content: space-between;
    height: var(--minimum-touch-target);
    grid-area: arrows;

    button {
      padding: 0 var(--padding-xs);
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    list-style: none;

    button {
      --color: rgb(var(--color-foreground-rgb) / var(--opacity-30));
      --color-active: var(--color-foreground);
      --color-hover: rgb(var(--color-foreground-rgb) / var(--opacity-50));
    }
  }

  slideshow-controls:has(.slideshow-controls__dots),
  slideshow-component[autoplay] slideshow-controls {
    mix-blend-mode: difference;
  }

  .slideshow-controls__dots {
    gap: 0.6rem;
    padding: var(--padding-sm) var(--padding-lg);
    border-radius: 3rem;
    overflow: hidden;

    button {
      --size: 0.56rem;

      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(var(--size) * 2);
      height: calc(var(--size) * 2);
      margin: calc(var(--size) / -2);
      font-size: 0;
      border-radius: calc(var(--size));

      &::after {
        content: '';
        display: block;
        background-color: var(--color);
        height: var(--size);
        width: var(--size);
        border-radius: calc(var(--size) / 2);
        box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.15);

        @supports not (view-timeline-axis: inline) {
          &[aria-selected='true'] {
            --color: var(--color-active);
          }
        }

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

      &[aria-selected='true'] {
        --color: var(--color-active);

        &::after {
          box-shadow: inset 0 0 0 1.5px hsl(0 0% 0% / 0.4);
        }
      }
    }
  }

  .slideshow-controls__dots,
  .slideshow-controls__counter {
    &:only-child {
      margin-inline: auto;
    }
  }

  .slideshow-controls__counter {
    color: var(--color-foreground);
    background-color: rgb(0 0 0 / 40%);
    width: auto;
    border-radius: 2rem;
    padding: 0.3rem var(--padding-sm);
    margin-inline: var(--margin-sm);
    backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--xs);

    .slash {
      color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
      padding-inline: var(--padding-2xs);
      margin-block-start: -0.1rem;
    }
  }

  .slideshow-control[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Slideshow Thumbnails */
  .slideshow-controls__thumbnails-container {
    display: flex;
    width: 100%;
    max-height: 100%;
    overflow-x: scroll;
    scrollbar-width: none;
  }

  .slideshow-controls__thumbnails {
    display: inline-flex;
    padding-inline: var(--slideshow-thumbnails-padding-inline, var(--padding-sm));
    padding-block: var(--slideshow-thumbnails-padding-block, var(--padding-sm));
    gap: var(--gap-xs);
    margin-inline: auto;
    height: fit-content;

    .slideshow-control {
      border-radius: var(--thumbnail-radius, var(--media-radius));
      width: clamp(44px, 7vw, var(--thumbnail-width));
      height: auto;
      aspect-ratio: var(--aspect-ratio);

      img {
        height: 100%;
        object-fit: cover;
        border-radius: var(--thumbnail-radius, var(--media-radius));
      }

      &:is([aria-selected='true']) {
        outline: var(--focus-outline-width) solid currentcolor;
        outline-offset: calc(var(--focus-outline-offset) / 2);
        border: var(--style-border-width) solid rgb(var(--color-border-rgb) / var(--media-border-opacity));
      }
    }
  }

  .slideshow-controls__thumbnail {
    position: relative;
  }

  .slideshow-controls__thumbnail-badge {
    position: absolute;
    top: var(--padding-2xs);
    right: var(--padding-2xs);
    width: clamp(16px, 10%, 20px);
    height: clamp(16px, 10%, 20px);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .slideshow-controls__thumbnail-badge svg {
    width: 60%;
    height: 60%;
    fill: var(--color-foreground);
    opacity: 0.6;
  }

  /* Slideshow Play/Pause */
  .slideshow-control:is(.icon-pause, .icon-play) {
    color: var(--color-active);

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

    svg {
      display: none;
    }
  }

  slideshow-component:is([autoplay]) {
    &:is([paused]) {
      .icon-play > svg {
        display: block;
      }
    }

    &:not([paused]) {
      .icon-pause > svg {
        display: block;
      }
    }
  }
/* END_SNIPPET:slideshow-controls */

/* START_SNIPPET:slideshow-styles (INDEX:242) */
/*
   * Slideshow Component
   */
  slideshow-component {
    --cursor: grab;
    --slide-offset: 6px;

    position: relative;
    display: flex;
    flex-direction: column;
    timeline-scope: var(--slideshow-timeline);
  }

  .slideshow--single-media {
    --cursor: default;
  }

  a slideshow-component {
    --cursor: pointer;
  }

  slideshow-component [data-placeholder='true'] * {
    cursor: grab;
  }

  /*
   * Slideshow Slides
   */
  slideshow-slides {
    width: 100%;
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-color: transparent transparent;
    scrollbar-width: none;
    gap: var(--slideshow-gap, 0);
    cursor: var(--cursor);
    min-height: var(--slide-min-height);
    align-items: var(--slideshow-align-items, normal);

    @media (prefers-reduced-motion) {
      scroll-behavior: auto;
    }

    &::-webkit-scrollbar {
      width: 0;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border: none;
    }

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

  .slideshow--stretch-content slideshow-slides > * {
    height: auto;
  }

  slideshow-component[disabled='true'] slideshow-slides {
    overflow: hidden;
  }

  /**
   * By default, slideshows have overflow: hidden (no compositor layer).
   * When the slideshow enters the viewport, JavaScript adds [in-viewport] which enables scrolling.
   */
  slideshow-component:not([in-viewport]) slideshow-slides {
    overflow: hidden;
  }

  slideshow-component[mobile-disabled] slideshow-slides {
    @media screen and (max-width: 749px) {
      overflow: hidden;
    }
  }

  slideshow-slides[gutters*='start'] {
    padding-inline-start: var(--gutter-slide-width, 0);
    scroll-padding-inline-start: var(--gutter-slide-width, 0);
  }

  slideshow-slides[gutters*='end'] {
    padding-inline-end: var(--gutter-slide-width, 0);
  }

  slideshow-component[dragging] {
    --cursor: grabbing;

    * {
      pointer-events: none;
    }
  }

  slideshow-component[dragging] slideshow-arrows {
    display: none;
  }

  slideshow-container {
    width: 100%;
    display: block;
    position: relative;
    grid-area: container;
    container-type: inline-size;
    background-color: var(--color-background);
  }

  /*
   * Be specific about HTML children structure to avoid targeting nested slideshows.
   * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
   */
  slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
    content-visibility: visible;
  }

  @keyframes slide-reveal {
    0% {
      translate: calc(var(--slideshow-slide-offset, 6) * 1rem) 0;
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      translate: calc(var(--slideshow-slide-offset, 6) * -1rem) 0;
      opacity: 0;
    }
  }

  /*
   * Slideshow Slide
   */
  slideshow-slide {
    position: relative;
    scroll-snap-align: center;
    width: var(--slide-width, 100%);
    max-height: 100%;
    flex-shrink: 0;
    view-timeline-name: var(--slideshow-timeline);
    view-timeline-axis: inline;
    content-visibility: auto;
    contain-intrinsic-size: auto none;
    border-radius: var(--corner-radius, 0);
    overflow: hidden;

    slideshow-component[actioned] &,
    &[aria-hidden='false'] {
      content-visibility: visible;
    }

    slideshow-component slideshow-slide:not([aria-hidden='false']) {
      content-visibility: hidden;
    }

    &[hidden]:not([reveal]) {
      display: none;
    }

    /* Make inactive slides appear clickable */
    &[aria-hidden='true'] {
      cursor: pointer;
    }
  }

  slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui__controls-area {
    bottom: var(--padding-sm);
    right: var(--padding-sm);
  }

  slideshow-component.slideshow--content-below-media slideshow-slide {
    display: grid;
  }

  .slideshow--content-below-media slideshow-slide :is(.slide__image-container, .slide__content) {
    position: static;
  }

  .slideshow--content-below-media slideshow-slide {
    grid-template-rows: var(--grid-template-rows);

    @media screen and (min-width: 750px) {
      grid-template-rows: var(--grid-template-rows-desktop);
    }
  }
/* END_SNIPPET:slideshow-styles */

/* START_SNIPPET:sorting (INDEX:244) */
.sorting-filter__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--drawer-padding) 0;
    padding-block: var(--padding-sm);
    margin-inline-end: var(--margin-md);
    position: relative;
  }

  .sorting-filter__container .facets__label {
    font-size: var(--font-h4--size);
  }

  .sorting-filter__select-wrapper {
    display: flex;
    position: relative;
    border-radius: var(--variant-picker-button-radius);
    align-items: center;
    overflow: clip;
    padding: var(--padding-2xs) var(--padding-xs);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .sorting-filter__select-wrapper:has(:focus-visible) .sorting-filter__select {
    outline: none;
  }

  .sorting-filter__container .sorting-filter__select {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    padding-inline-end: var(--icon-size-2xs);
    text-align: right;

    /* Needed for Safari */
    text-align-last: right;
  }

  .sorting-filter__select .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .sorting-filter {
    @media screen and (min-width: 750px) {
      z-index: var(--facets-upper-z-index);
    }
  }

  .sorting-filter__options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    color: var(--color-foreground);
    z-index: var(--facets-upper-z-index);
    box-shadow: var(--shadow-popover);
    border: var(--style-border-popover);
    background-color: var(--color-background);
    border-radius: var(--style-border-radius-popover);
    width: max-content;
    min-width: var(--facets-panel-min-width);
    min-height: 0;

    transition: grid-template-rows var(--animation-speed-slow) var(--animation-easing),
      opacity var(--animation-speed-slow) var(--animation-easing);
  }

  details[open] .sorting-filter__options {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  .sorting-filter__options-inner {
    display: flex;
    flex-direction: column;
    grid-row: 1 / span 2;
    gap: var(--gap-sm);
    padding: calc(var(--drawer-padding) / 2);
    color: var(--color-foreground);
    overflow: clip;
    scrollbar-width: none;
    -ms-overflow-style: none;

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

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

  .sorting-filter__option {
    cursor: pointer;
    display: grid;
    grid-template-columns: var(--icon-size-sm) 1fr;
    gap: var(--margin-2xs);
    align-items: center;
    min-width: 180px;
    max-width: 16em;
    padding: var(--padding-2xs) calc(var(--drawer-padding) / 2) var(--padding-2xs) var(--padding-2xs);

    &:hover {
      border-radius: calc(var(--style-border-radius-popover) / 2);
      background-color: rgb(var(--color-foreground-rgb) / var(--opacity-8));
    }

    &:focus {
      border-radius: calc(var(--style-border-radius-popover) / 2);
    }
  }

  .sorting-filter__input {
    display: none;

    &:checked + .sorting-filter__checkmark + .sorting-filter__label {
      font-weight: 500;
    }
  }

  .sorting-filter__checkmark {
    visibility: hidden;
  }

  *:checked ~ .sorting-filter__checkmark {
    visibility: visible;
  }

  .sorting-filter__label {
    cursor: pointer;
    pointer-events: none;
  }

  .facets-toggle--no-filters .sorting-filter__select-wrapper {
    @media screen and (max-width: 749px) {
      padding-inline-start: 0;
    }
  }

  .facets-mobile-wrapper .sorting-filter .facets__panel {
    padding-inline: 0;
    position: relative;
  }

  .facets-mobile-wrapper .sorting-filter .facets__status {
    display: none;
  }

  .facets-mobile-wrapper:has(> :nth-child(2)) .sorting-filter .sorting-filter__options {
    left: 0;
    right: unset;
  }

  .facets-mobile-wrapper .sorting-filter .facets__label {
    margin-inline-end: var(--margin-2xs);
    font-size: var(--font-paragraph--size);
    color: var(--color-foreground-muted);
  }

  .facets-toggle .sorting-filter__container {
    @media screen and (max-width: 749px) {
      padding: 0;
    }
  }

  .facets-toggle .sorting-filter__container .facets__label {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets-toggle .sorting-filter::before {
    @media screen and (max-width: 749px) {
      display: none;
    }
  }

  .facets--drawer .sorting-filter {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }
/* END_SNIPPET:sorting */

/* START_SNIPPET:text (INDEX:252) */
:root {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] .text-block {
    --text-align-default: right;
  }

  [style*='--horizontal-alignment: flex-start'] > .text-block {
    --text-align-default: left;
  }

  [style*='--horizontal-alignment: center'] > .text-block {
    --text-align-default: center;
  }

  [style*='--horizontal-alignment: flex-end'] > .text-block {
    --text-align-default: right;
  }

  .text-block {
    width: var(--width);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: var(--horizontal-alignment);
  }

  .text-block > * {
    width: var(--width);
    max-inline-size: min(100%, var(--max-width, 100%));
    text-align: var(--text-align, var(--text-align-default));
    text-wrap: var(--text-wrap);
  }

  .text-block:not(.text-block--full-width).rte,
  .text-block:not(.text-block--full-width).paragraph {
    /* Safari doesn't support pretty, so fallback to balance */
    text-wrap: balance;
    text-wrap: pretty;
  }

  .text-block:not(.text-block--full-width):is(.h1, .h2, .h3, .h4, .h5, .h6) {
    text-wrap: balance;
  }

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

  .text-block h1,
  .text-block.h1 > * {
    margin-block: var(--font-h1--spacing);
  }

  .text-block h2,
  .text-block.h2 > * {
    margin-block: var(--font-h2--spacing);
  }

  .text-block h3,
  .text-block.h3 > * {
    margin-block: var(--font-h3--spacing);
  }

  .text-block h4,
  .text-block.h4 > * {
    margin-block: var(--font-h4--spacing);
  }

  .text-block h5,
  .text-block.h5 > * {
    margin-block: var(--font-h5--spacing);
  }

  .text-block h6,
  .text-block.h6 > * {
    margin-block: var(--font-h6--spacing);
  }

  .text-block p,
  .text-block.p > * {
    margin-block: var(--font-paragraph--spacing);
  }

  .text-block > *:first-child {
    margin-block-start: 0;
  }

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

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

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

  .text-block--background {
    background-color: var(--text-background-color);
    border-radius: var(--text-corner-radius);

    /* To avoid text being cropped when using a border radius we add a minimum padding. */
    padding-block-start: max(var(--text-padding), var(--padding-block-start, 0));
    padding-block-end: max(var(--text-padding), var(--padding-block-end, 0));
    padding-inline-start: max(var(--text-padding), var(--padding-inline-start, 0));
    padding-inline-end: max(var(--text-padding), var(--padding-inline-end, 0));
  }

  .custom-color,
  .custom-color > :is(h1, h2, h3, h4, h5, h6, p, *) {
    color: var(--color);
  }
/* END_SNIPPET:text */

/* START_SNIPPET:variant-main-picker (INDEX:261) */
/* Variant picker container styles - unique to main variant picker */
  .variant-picker {
    width: 100%;
  }

  .variant-picker__form {
    width: 100%;
  }

  .variant-picker[data-shopify-visual-preview] {
    min-width: 300px;
    padding-inline-start: max(4px, var(--padding-inline-start));
  }

  /* Dropdown variant option styles */
  .variant-option__select-wrapper {
    display: flex;
    position: relative;
    border: var(--style-border-width-inputs) solid var(--color-border);
    border-radius: var(--style-border-radius-inputs);
    align-items: center;
    margin-top: var(--margin-2xs);
    overflow: clip;
  }

  .variant-option__select-wrapper:has(.swatch) {
    --variant-picker-swatch-width: 20px;
    --variant-picker-swatch-height: 20px;
  }

  .variant-option__select-wrapper:hover {
    border-color: var(--color-variant-hover-border);
  }

  .variant-option__select:focus-visible {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }

  .variant-option__select {
    padding-block: var(--padding-md);
    padding-inline: var(--padding-lg) calc(var(--padding-lg) + var(--icon-size-2xs));
    appearance: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
  }

  .variant-option__select-wrapper .icon {
    position: absolute;
    right: var(--padding-md);
    top: 50%;
    transform: translateY(-50%);
    width: var(--icon-size-2xs);
    height: var(--icon-size-2xs);
    pointer-events: none;
  }

  .variant-option__select--has-swatch {
    padding-inline-start: calc((2 * var(--padding-sm)) + var(--variant-picker-swatch-width));
  }

  .variant-option__select-wrapper .swatch {
    position: absolute;
    top: 50%;
    left: var(--padding-md);
    transform: translateY(-50%);
  }

  /* Variant picker alignment modifiers */
  .variant-picker--center,
  .variant-picker--center .variant-option {
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .variant-picker--right,
  .variant-picker--right .variant-option {
    text-align: right;
    justify-content: right;
  }
/* END_SNIPPET:variant-main-picker */

/* START_SNIPPET:variant-swatches (INDEX:262) */
swatches-variant-picker-component {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: var(--product-swatches-alignment-mobile);

    @media screen and (min-width: 750px) {
      justify-content: var(--product-swatches-alignment);
    }

    --overflow-list-padding-block: calc(
        var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
      )
      calc(var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width));
    --overflow-list-padding-inline: calc(
        var(--product-swatches-padding-inline-start) + var(--focus-outline-offset) + (1.5 * var(--focus-outline-width))
      )
      calc(var(--product-swatches-padding-inline-end) + var(--focus-outline-offset) + var(--focus-outline-width));

    overflow-list::part(list) {
      gap: var(--gap-sm);
    }
  }

  swatches-variant-picker-component overflow-list[disabled='true'] {
    --overflow-list-padding-block: 0px;
    margin-block-start: calc(
      var(--product-swatches-padding-block-start) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
    margin-block-end: calc(
      var(--product-swatches-padding-block-end) + var(--focus-outline-offset) + var(--focus-outline-width)
    );
  }

  .hidden-swatches__count {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;

    &::before {
      /* This doesn't work in Safari without the counter-reset. https://stackoverflow.com/a/40179718 */
      counter-reset: overflow-count var(--overflow-count);
      content: '+' counter(overflow-count);
      line-height: 1;
      cursor: pointer;
    }
  }

  .hidden-swatches__count:hover {
    color: var(--color-foreground-rgb);
  }
/* END_SNIPPET:variant-swatches */

/* START_SNIPPET:video (INDEX:263) */
.video-interaction-hint {
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: var(--layer-flat);
  }

  .video-interaction-hint:hover {
    opacity: 1;
  }
/* END_SNIPPET:video */

/* START_SNIPPET:volume-pricing-info (INDEX:264) */
.volume-pricing-info {
    display: inline-flex;
  }

  .volume-pricing-info__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--minimum-touch-target);
    height: var(--minimum-touch-target);
    color: var(--color-foreground-secondary);
    cursor: pointer;
    transition: color var(--animation-speed) var(--animation-easing);
    flex-shrink: 0;
  }

  .volume-pricing-info__button:hover {
    color: var(--color-foreground);
  }

  .volume-pricing-info__button .svg-wrapper {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
  }

  .volume-pricing-info__button--with-label {
    width: auto;
    gap: var(--gap-sm);
  }

  .volume-pricing-info__popover {
    --volume-pricing-popover-max-width: 320px;
    --volume-pricing-popover-spacing: 8px;
    --volume-pricing-popover-viewport-margin: 16px;

    min-inline-size: 280px;
    max-inline-size: var(--volume-pricing-popover-max-width);
    background: var(--color-background);
    border: var(--style-border-popover);
    border-radius: var(--style-border-radius-popover, 0);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
    padding: 0;
    margin: 0;
    transition-property: display, opacity, translate;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out-quad);
    transition-behavior: allow-discrete;
    translate: 0 20px;
    opacity: 0;
  }

  /* Native anchor positioning for supported browsers */
  .volume-pricing-info__popover {
    inset: unset;
    top: calc(anchor(bottom) + var(--volume-pricing-popover-spacing));
    left: anchor(left);
  }

  @supports (position-try-fallbacks: --top-left) {
    .volume-pricing-info__popover {
      position-try-fallbacks: --top-left;
    }

    @position-try --top-left {
      top: calc(anchor(top) - var(--volume-pricing-popover-spacing));
      bottom: auto;
      transform: translateY(-100%);
    }
  }

  /* Fallback positioning using custom properties */
  @supports not (position-anchor: --volume-pricing-trigger) {
    .volume-pricing-info__popover {
      position: fixed;
      top: calc(var(--anchor-bottom) * 1px + var(--volume-pricing-popover-spacing));
      left: max(
        var(--volume-pricing-popover-viewport-margin),
        min(
          var(--anchor-left) * 1px,
          100vw - var(--volume-pricing-popover-max-width) - var(--volume-pricing-popover-viewport-margin)
        )
      );
    }
  }

  .volume-pricing-info__popover:popover-open {
    translate: 0 0;
    opacity: 1;
  }

  @starting-style {
    .volume-pricing-info__popover:popover-open {
      translate: 0 20px;
      opacity: 0;
    }
  }

  .volume-pricing-info__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    padding: var(--padding-md);
    font-size: var(--font-size--xs);
  }

  .volume-pricing-info__rules,
  .volume-pricing-info__rules > span {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .volume-pricing-info__table {
    display: flex;
    flex-direction: column;
  }

  .volume-pricing-info__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-sm) var(--padding-md);
    font-size: var(--font-size--sm);
    background: var(--color-background);
    border-inline-start: 3px solid transparent;
    transition: border-color var(--animation-speed) var(--animation-easing);
  }

  .volume-pricing-info__row:nth-child(odd) {
    background: rgb(var(--color-foreground-rgb) / var(--opacity-5));
  }

  .volume-pricing-info__row--active {
    border-inline-start-color: var(--color-foreground);
    font-weight: var(--font-weight-medium);
  }

  .volume-pricing-info__quantity {
    color: var(--color-foreground);
  }

  .volume-pricing-info__price {
    display: flex;
    align-items: center;
    color: var(--color-foreground);
  }

  .volume-pricing-info__checkmark {
    display: none;
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: var(--color-primary);
  }

  .volume-pricing-info__row--active .volume-pricing-info__checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
/* END_SNIPPET:volume-pricing-info */