/** Shopify CDN: Minification failed

Line 1670:13 Expected identifier but found whitespace
Line 1670:15 Unexpected "{"
Line 1670:24 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:bunk-bundles (INDEX:1) */
/* ── FOOLPROOF :root fallback (mirrors bunk-foundation.css) — black canvas + fonts even if base CSS is missing ── */
:root{
  --bunk-bg:#13100c; --bunk-bg-radial:radial-gradient(120% 90% at 50% 0,#211e19,#0a0806 70%);
  --bunk-cta:#FFE100; --bb-bg:transparent;
  --f-display:"Bebas Neue",Impact,sans-serif; --f-body:"Space Mono",ui-monospace,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive; --f-tape:"Patrick Hand","Comic Sans MS",cursive;
}
.bunk-bundles{background:var(--bb-bg);padding:var(--pt,40px) 0 var(--pb,40px);position:relative}
.bb-col{width:min(460px,100%);margin:0 auto;padding:0 16px}
.bb-tag{font-family:var(--f-hand);font-size:18px;text-align:center;opacity:.9;margin:0 0 2px}
.bb-head{font-family:var(--f-hand);font-weight:700;font-size:34px;text-align:center;margin:0;line-height:1}
.bb-micro{font-family:var(--f-body);font-size:11px;letter-spacing:.4px;color:#8f8676;text-align:center;margin:6px 0 22px}

/* rail — horizontal scroll-snap on mobile */
.bb-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding:6px 2px 14px;align-items:flex-start}
.bb-rail::-webkit-scrollbar{display:none}
.bb-card{flex:0 0 84%;max-width:330px;scroll-snap-align:center;position:relative;background:#efe7d3;border-radius:5px;
  padding:30px 14px 16px;transform:rotate(calc(var(--r,-8) * .1deg));box-shadow:0 16px 44px #0009;margin-top:12px}
.bb-card:before{content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
  background-image:radial-gradient(#0000000d 1px,transparent 1px);background-size:3px 3px;opacity:.5;mix-blend-mode:multiply}
.bb-card--anchor{flex-basis:90%;max-width:360px;box-shadow:0 22px 60px #000b;border:1px solid #d8c79c}
.bb-nametape{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);font-family:var(--f-tape);
  text-transform:uppercase;font-size:14px;letter-spacing:.5px;padding:5px 14px;white-space:nowrap;max-width:94%;
  overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 10px #0006}
.bb-photo{position:relative;z-index:2;border-radius:3px;overflow:hidden;aspect-ratio:4/5;background:#1a160f}
.bb-photo .bunk-photo,.bb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bb-photo--ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-tape);text-transform:uppercase;font-size:13px;color:#6f6657;padding:12px;border:1px dashed #4a4233}
.bb-mk{position:relative;z-index:2;padding:12px 4px 2px;text-align:center}
.bb-line{font-family:var(--f-hand);font-size:18px;line-height:1.25;color:#2c2619;margin:0 0 4px}
.bb-support{font-family:var(--f-hand);font-size:15px;color:#5b5240;margin:0 0 4px}
.bb-inside{font-family:var(--f-body);font-size:10.5px;line-height:1.5;color:#5b5240;margin:4px 0 8px}
.bb-price{font-family:var(--f-display);font-size:26px;letter-spacing:.5px;margin:2px 0 0;
  filter:drop-shadow(0 1px 1px #0006)}
/* D74: scoped .bb-card prefix BEATS the global .bunk-tape{padding:6px 18px;position:absolute} in
   bunk-foundation.css (equal-specificity cascade trap — foundation loads later and was crushing
   the tape band on every surface) */
.bb-card .bb-shoptape{display:inline-block;position:relative;margin-top:12px;background:var(--bunk-cta,#FFE100);color:#1a1608;font-family:var(--f-body);
  font-weight:700;letter-spacing:1px;font-size:12px;padding:13px 24px;border:0;border-radius:3px;cursor:pointer;
  transform:rotate(-1.6deg);box-shadow:0 7px 18px #0006}
.bb-shoptape.is-busy{opacity:.6;pointer-events:none}
.bb-ghost{flex:0 0 auto;align-self:center;font-family:var(--f-body);font-size:11px;color:#6f685c;letter-spacing:1px;white-space:nowrap;padding:0 8px}

/* referral */
.bb-ref{margin:26px auto 0;max-width:380px;text-align:center;background:#15120d;border:1px solid #2a241b;border-radius:10px;padding:20px 18px}
.bb-ref-head{font-family:var(--f-hand);font-weight:700;font-size:26px;margin:0 0 4px}
.bb-ref-sub{font-family:var(--f-body);font-size:11px;line-height:1.6;color:#b6ad99;margin:0 0 14px}
.bb-ref-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.bb-ref-btn{font-family:var(--f-body);font-size:11px;letter-spacing:.4px;color:#1a1608;background:var(--bunk-cta,#FFE100);
  border:0;border-radius:3px;padding:9px 14px;cursor:pointer;text-decoration:none}
.bb-ref-tc{font-family:var(--f-body);font-size:9px;letter-spacing:.3px;color:#6f685c;margin:12px 0 0}
.bb-ref-tc a{color:#8a8170}

@media (min-width:750px){
  .bb-rail{justify-content:flex-start;flex-wrap:nowrap}
}

/* ============================================================
   DESKTOP  ≥ 1024px — bundle cards wrap into a centered 3-across
   postcard grid (tilts/nametape/shoptape untouched).
   Math: 3×360 + 2×34(gap) = 1148px, fits inside min(1240px,92%).
   Specificity: .bb-col.bb-col--narrow beats both the base .bb-col
   rule and the 750px .bb-rail rule above (no !important needed).
   ============================================================ */
@media (min-width: 1024px){
  /* widths + readability matched to the approved desktop build (Sid 11 Jul) */
  .bb-col.bb-col--narrow{
    width: min(1560px, 94%);
  }
  .bb-col.bb-col--narrow .bb-rail{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    overflow-x: visible;
    scroll-snap-type: none;
    justify-content: center;
    align-items: flex-start;
  }
  .bb-col.bb-col--narrow .bb-rail > .bb-card{
    flex: 0 1 400px;
    max-width: 400px;
    scroll-snap-align: none;
  }
  .bb-col.bb-col--narrow .bb-rail > .bb-card--anchor{
    flex-basis: 400px;
    max-width: 400px;
  }
  .bb-col.bb-col--narrow .bb-rail > .bb-ghost{
    flex-basis: 100%;
  }
  /* readability on cream (Fable P1.2): hooks dark + bigger, spec lines dark ink, price foil halo */
  .bb-line{ font-size: 24px; color: #2c2619; }
  .bb-inside{ font-size: 13.5px; color: #2e2a1d; }
  .bb-price{ font-size: 30px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
  /* bold upper tape headings (Sid 11 Jul #4) + ink-stroke ported from DESKTOP-SITE ds-bundles-tape (15 Jul lock) */
  .bb-nametape{ font-weight: 700; font-size: 17px; letter-spacing: 2px; -webkit-text-stroke: .5px currentColor; }

  /* intro scale ported from DESKTOP-SITE ds-bundles-tag/-head/-micro (15 Jul lock) — was frozen at mobile size on desktop */
  .bb-tag{ font-size: 22px; }
  .bb-head{ font-size: 56px; }
  .bb-micro{ font-size: 12.5px; margin: 10px 0 52px; }

  /* tape-CTA idiom ported from DESKTOP-SITE ds-bundles-shoptape (Fable 11 Jul lock: torn-tape clip-path, never a rounded rectangle) */
  .bb-card .bb-shoptape{
    font-family: var(--f-display,"Bebas Neue",sans-serif);
    font-weight: 400;
    letter-spacing: 2px;
    font-size: 19px;
    padding: 15px 34px 16px;  /* D74 S3 (Sid): "make it more broad" — taller, wider band */
    min-width: 78%;
    border-radius: 0;
    clip-path: polygon(1.5% 20%,98% 5%,99% 82%,1% 96%);
    /* D74 S3 (Sid pick off the real-shot board): deeper drop + 3° tilt — the tape straddles the
       card's bottom edge, slapped-on. z-index keeps the buy button above the card face. */
    transform: translateY(55%) rotate(-3deg);
    position: relative;
    z-index: 5;
    box-shadow: 0 7px 16px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.14);
  }
  .bb-card .bb-shoptape:hover{ transform: translateY(53%) rotate(-3deg); }
  /* hang-room so the straddling tape never clips in the scroll rail */
  .bb-rail{ padding-bottom: 52px; }

  /* white-border / corner-bleed check (Sid 16 Jul): rotate() on .bb-card + border-radius+overflow:hidden on .bb-photo
     is the classic Chromium rounded-corner clip bug — a hairline of the card's cream bg can leak through the photo's
     rounded corners once transformed. Force the box to own its clip so the corner stays clean. */
  .bb-photo{ -webkit-transform: translateZ(0); transform: translateZ(0); }
  .bb-photo .bunk-photo, .bb-photo img{ border-radius: 3px; }
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) ═════════════════════════ */
@media (max-width: 1023px){
  /* Sid 26 Jul: "the price on this set's polaroid is too small, can't read it".
     The element is <p class="bb-price bunk-sv">, and the sitewide mobile readability floor
     .bunk-sv{font-size:12px} was winning over .bb-price. Two-class scope so the price wins. */
  .bb-price.bunk-sv{ font-size:34px; }
  .bb-inside, .bb-micro, .bb-ghost, .bb-ref-sub, .bb-ref-btn{ font-size:12px; }
  .bb-ref-btn{ min-height:44px; box-sizing:border-box; }
}
/* END_SECTION:bunk-bundles */

/* START_SECTION:bunk-bunkers (INDEX:2) */
:root{
  --bunk-bg:#13100c; --bk-bg:transparent; --bunk-cta:#FFE100;
  --f-display:"Bebas Neue",Impact,sans-serif; --f-body:"Space Mono",ui-monospace,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive; --f-tape:"Patrick Hand","Comic Sans MS",cursive;
}
.bunk-bunkers{background:var(--bk-bg);padding:var(--pt,40px) 0 var(--pb,40px);position:relative}
.bk-col{width:min(460px,100%);margin:0 auto;padding:0 16px}
.bk-tag{font-family:var(--f-hand);font-size:17px;text-align:center;opacity:.9;margin:0 0 1px}
.bk-head{font-family:var(--f-hand);font-weight:700;font-size:34px;text-align:center;margin:0;line-height:1}
.bk-micro{font-family:var(--f-body);font-size:11px;letter-spacing:.4px;color:#8f8676;text-align:center;margin:6px 0 20px}
.bk-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 2px 14px;align-items:flex-start}
.bk-rail::-webkit-scrollbar{display:none}
.bk-card{flex:0 0 76%;max-width:280px;scroll-snap-align:center;position:relative;cursor:pointer;border-radius:4px;
  transform:rotate(calc(var(--r,-6) * .1deg));box-shadow:0 12px 34px #0008;margin-top:10px}
.bk-card:focus-visible{outline:2px solid var(--bunk-cta);outline-offset:3px}
.bk-expand{position:absolute;bottom:7px;right:8px;font-size:12px;color:#0007;opacity:.55}
.bk-phflag{position:absolute;top:-9px;left:8px;z-index:3;background:#7a3b32;color:#ffd;font-family:var(--f-body);font-size:8px;letter-spacing:.3px;padding:2px 6px;border-radius:2px}
/* text post-it */
.bk-card--review_text{background:var(--ac,#f4e9b8);padding:24px 16px 30px;min-height:150px}
.bk-pin{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:#0003;box-shadow:0 1px 2px #0006}
.bk-stars{display:block;color:#d8a200;font-size:12px;letter-spacing:1px;margin-bottom:5px}
.bk-quote{font-family:var(--f-hand);font-size:18px;line-height:1.3;color:#2a2414;margin:0 0 8px}
.bk-by{font-family:var(--f-body);font-size:10px;letter-spacing:.3px;color:#4a4232;margin:0;display:flex;align-items:center;gap:6px}
.bk-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
/* video + image cards */
.bk-card--review_video,.bk-card--review_image{background:#1b1812;border:1px solid #342e22;padding:8px 8px 10px}
.bk-vid,.bk-shot{position:relative;border-radius:3px;overflow:hidden;aspect-ratio:3/4;background:#0c0a07}
.bk-vid .bunk-photo,.bk-shot .bunk-photo,.bk-vid img,.bk-shot img{width:100%;height:100%;object-fit:cover;display:block}
.bk-vid-ph,.bk-shot-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--f-tape);text-transform:uppercase;font-size:12px;color:#6f6657;border:1px dashed #4a4233}
.bk-play{position:absolute;inset:0;margin:auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#000a;color:#fff;border-radius:50%;font-size:16px}
.bk-card--review_video .bk-by,.bk-card--review_image .bk-by{color:#cfc6b2;padding:8px 4px 0}
/* be-the-first */
.bk-card--first{flex:0 0 64%;max-width:230px;background:#15120d;border:1px dashed #3a3326;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 16px;min-height:150px}
.bk-firstline{font-family:var(--f-hand);font-size:19px;color:#cfc6b2;margin:0}
.bk-firstcta{font-family:var(--f-body);font-size:11px;letter-spacing:.4px;color:var(--bunk-cta);text-decoration:none;border-bottom:1px dashed #7a6e2e;margin-top:10px}
.bk-empty{text-align:center;background:#15120d;border:1px dashed #3a3326;border-radius:10px;padding:30px 20px;max-width:380px;margin:0 auto}
.bk-app{margin-top:18px}
/* lightbox */
.bk-lb{position:fixed;inset:0;z-index:200;background:#0a0806f2;display:flex;align-items:center;justify-content:center;padding:24px}
.bk-lb[hidden]{display:none}
.bk-lb-stage{max-width:520px;width:100%;max-height:84vh;overflow:auto}
.bk-lb-stage img,.bk-lb-stage video,.bk-lb-stage iframe{width:100%;border-radius:6px;display:block;max-height:78vh;object-fit:contain;background:#000}
.bk-lb-stage .bk-lb-quote{font-family:var(--f-hand);font-size:30px;line-height:1.3;color:#211c12;background:#f4e9b8;border-radius:6px;padding:34px 28px;text-align:center}
.bk-lb-stage .bk-lb-by{font-family:var(--f-body);font-size:12px;color:#b6ad99;text-align:center;margin-top:14px}
.bk-lb-x{position:absolute;top:16px;right:18px;background:none;border:0;color:#e9e4d8;font-size:24px;cursor:pointer;line-height:1}
.bk-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:#15120dcc;border:1px solid #ffffff22;color:#e9e4d8;width:42px;height:42px;border-radius:50%;font-size:22px;cursor:pointer}
.bk-lb-prev{left:12px} .bk-lb-next{right:12px}
@media(prefers-reduced-motion:reduce){.bk-rail{scroll-behavior:auto}}

/* ============================================================
   DESKTOP  ≥ 1024px — review wall wraps into a centered 3-across
   postcard grid instead of the mobile scroll rail. Tilts/post-it
   look untouched; only the rail's own layout mode changes.
   Math: 3×360 + 2×34(gap) = 1148px, fits inside min(1240px,92%).
   Specificity: .bk-col.bk-col--narrow beats the plain .bk-col
   rule above (no !important needed).
   ============================================================ */
@media (min-width: 1024px){
  .bk-col.bk-col--narrow{
    width: min(1240px, 92%);
  }
  .bk-col.bk-col--narrow .bk-rail{
    display: flex;
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 34px;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 0 14px;
  }
  .bk-col.bk-col--narrow .bk-rail > .bk-card,
  .bk-col.bk-col--narrow .bk-rail > .bk-card--first{
    flex: 0 1 360px;
    max-width: 360px;
    scroll-snap-align: none;
  }
}

/* ═══ MOBILE READABILITY PASS (Sid 25 Jul) ═════════════════════════════════ */
@media (max-width: 1023px){
  .bk-micro{ font-size:12px; }
}
/* END_SECTION:bunk-bunkers */

/* START_SECTION:bunk-endslate (INDEX:3) */
:root{ --bunk-bg:#13100c; --f-body:'Space Mono',ui-monospace,monospace; }
.bunk-endslate{background-color:var(--bunk-bg);background-image:var(--bunk-bg-radial)}
.bunk-endslate__inner{position:relative;z-index:2;padding:34px 26px 30px;margin:0 auto;max-width:680px;border-top:1px solid #1d1810}
.bunk-endslate__stamp{display:block;width:80px;height:auto;margin:0 2px 2px auto;transform:rotate(7deg);opacity:.94;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.bunk-endslate__body{font-family:var(--f-body);font-size:12px;line-height:1.96;color:#d7cfbe;max-width:344px;margin:4px auto 0;text-align:center}
.bunk-endslate__body b{color:#efe7d4;font-weight:700}
@media (min-width:750px){ .bunk-endslate__body{font-size:13px} }
/* END_SECTION:bunk-endslate */

/* START_SECTION:bunk-footer (INDEX:5) */
/* FOOLPROOF FALLBACK (identical to bunk-base.css) — black canvas + fonts + CTA even if base CSS is missing */
:root{ --bunk-bg:#13100c; --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806); --bunk-kraft:#b9a07a; --bunk-cream:#f2e6c8; --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347; --f-display:'Bebas Neue',Impact,sans-serif; --f-body:'Space Mono',ui-monospace,monospace; --f-hand:'Caveat',cursive; --f-tape:'Patrick Hand',cursive; }
/* ================================================================
   bunk-footer.liquid — scoped styles
   Mobile-first (430px base) → tablet 750-989 → desktop ≥990
================================================================ */

.bunk-footer {
  --footer-bg: var(--bunk-bg);
  background-color: var(--footer-bg);
  background-image: var(--bunk-bg-radial);
  border-top: 1px solid #1d1810;
  padding-top: var(--pt-m, 28px);
  padding-bottom: var(--pb-m, 28px);
  position: relative;
  overflow: hidden;
}

/* bg image layer */
.bunk-footer__bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bunk-footer__bg-img-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  mix-blend-mode: luminosity;
}

.bunk-footer__inner {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

/* ─── BUNK CLUB STRIP ─── */
.bunk-club {
  background: radial-gradient(120% 90% at 50% 0%, #1c1813, #100d09);
  border: 1px solid #2a241b;
  border-radius: 8px;
  padding: 18px 16px 16px;
  text-align: center;
  margin-bottom: 28px;
}

.bunk-club__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

.bunk-club__pre {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 26px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* The stamp in the club head sits just shy of touching "club" — small, rotated */
.bunk-club__stamp-wrap {
  display: inline-flex;
  align-items: center;
  transform: rotate(-5deg);
  flex-shrink: 0;
}

.bunk-club__stamp {
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}

.bunk-club__stamp-fallback {
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: 3px;
}

.bunk-club__word {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 38px;
  transform: rotate(-2deg);
  display: inline-block;
  /* "just shy of kissing" — pull left slightly */
  margin-left: -2px;
}

.bunk-club__promise {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 17px;
  color: #bdb4a2;
  margin: 0 0 14px;
}

.bunk-club__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.bunk-club__row {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 340px;
}

.bunk-club__input {
  flex: 1;
  background: #0c0a07;
  border: 1px solid #4a3f28;
  border-right: 0;
  color: #f0e9d6;
  font-family: var(--f-body);
  font-size: 11.5px;
  padding: 11px 12px;
  border-radius: 4px 0 0 4px;
  outline: none;
  min-width: 0;
  -webkit-appearance: none;
}
.bunk-club__input::placeholder { color: #6a6052; }
.bunk-club__input:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: -2px;
  z-index: 1;
}

.bunk-club__join {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: 2px;
  color: #1a1a1a;
  background: var(--btn-color, var(--bunk-cta));
  border: 0;
  padding: 11px 18px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.bunk-club__join:hover { opacity: 0.88; }
.bunk-club__join:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: 2px;
}

/* D-PORT 16 Jul: invite line (ds-club__invite, locked build) */
.bunk-club__invite { font-family: var(--f-body); font-size: 12.5px; letter-spacing: .3px; color: #cbc3b2; margin: 12px 0 4px; text-align: center; }
.bunk-club__consent {
  font-family: var(--f-body);
  font-size: 9px;
  line-height: 1.6;
  color: #6a6052;
  max-width: 300px;
  text-align: center;
  margin: 0;
}

.bunk-club__success {
  font-family: var(--f-body);
  font-size: 11px;
  color: #9bbf86;
  margin: 0;
}

.bunk-club__error {
  font-family: var(--f-body);
  font-size: 10px;
  color: #ff7050;
  margin: 0;
}

/* ─── FOOTER LOCKUP (stamp + tagline) ─── */
.bunk-footer__lockup {
  text-align: center;
  margin-bottom: 26px;
}

.bunk-footer__stamp-wrap {
  display: inline-block;
  transform: none;          /* slant is baked into the stamp PNG (matches the header) — no extra rotation */
  margin-bottom: 0;         /* tighten: Mood on Demand sits right below the logo */
}

.bunk-footer__stamp {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55));
}

.bunk-footer__stamp-fallback {
  font-family: var(--f-display);
  font-size: 52px;
  letter-spacing: 4px;
}

/* LOCKED: MOOD ON DEMAND. in red marker hand, rotated */
.bunk-footer__mood {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-1.5deg);
  display: inline-block;
  margin: 2px 0 0;   /* Sid 27 Jun — sit right below the logo (was 8px + the logo wrap's 6px) */
  /* red marker gradient LOCKED — same gradient as .bunk-red but with shadow */
  background: var(--bunk-redmk);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none; /* gradient text can't mix with text-shadow; skip for ink look */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}

.bunk-footer__straightlogo {
  height: auto;
  width: min(184px, 54%);   /* squarish stamp — narrower than the old wide wordmark */
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}
.bunk-footer__moodstop {
  background: linear-gradient(135deg,#fafafa,#b9bcc2 42%,#fff 52%,#9aa0a6 78%,#e9ecef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── NAV COLUMNS ─── */
.bunk-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 0;
  margin-bottom: 26px;
}

.bunk-footer__nav-col {
  flex: 1 1 50%;
  min-width: 130px;
  padding-right: 12px;
}

.bunk-footer__nav-head {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 2.5px;
  color: #8a8273;
  margin: 0 0 9px;
  text-transform: uppercase;
}

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

.bunk-footer__nav-link {
  display: block;
  font-family: var(--f-body);
  font-size: 11px;
  color: #cbc3b2;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s;
}
.bunk-footer__nav-link:hover { color: #f0e9d6; }
.bunk-footer__nav-link:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── SOCIAL LINKS ─── */
.bunk-footer__social {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.bunk-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  color: #cbc3b2;
  text-decoration: none;
  transition: color 0.15s;
}
.bunk-footer__social-link:hover { color: #f0e9d6; }
.bunk-footer__social-link:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: 2px;
  border-radius: 50%;
}

.bunk-footer__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.bunk-footer__social-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ─── LEGAL DISCLAIMER ─── */
.bunk-footer__legal {
  border-top: 1px solid #221d15;
  padding-top: 14px;
  margin-bottom: 16px;
}

.bunk-footer__legal-text {
  font-family: var(--f-body);
  font-size: 9.5px;
  line-height: 1.85;
  color: #8c8472;
  margin: 0 0 10px;
}

.bunk-footer__legal-text strong { color: #cbb96a; }

/* Licence number DL */
.bunk-footer__licences {
  font-family: var(--f-body);
  font-size: 9px;
  color: #6f685c;
  line-height: 1.7;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bunk-footer__lic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.bunk-footer__licences dt {
  color: #8a8273;
  font-weight: 700;
}
.bunk-footer__licences dt::after { content: ':'; }
.bunk-footer__licences dd {
  margin: 0;
  color: #6f685c;
}

/* ─── BOTTOM BAR ─── */
.bunk-footer__bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  border-top: 1px solid #1a1610;
  padding-top: 12px;
}

.bunk-footer__copy {
  font-family: var(--f-body);
  font-size: 9px;
  color: #6f685c;
}

.bunk-footer__age-seal {
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: #ff7050;
  border: 1px solid #5a2a22;
  border-radius: 20px;
  padding: 3px 10px;
}

/* ─── TABLET (750–989) ─── */
@media (min-width: 750px) {
  .bunk-footer {
    padding-top: calc(var(--pt) * 0.75);
    padding-bottom: calc(var(--pb) * 0.75);
  }

  .bunk-footer__inner {
    padding: 0 28px;
  }

  .bunk-footer__nav-col {
    flex: 1 1 25%;
  }

  .bunk-club__row {
    max-width: 380px;
  }

  .bunk-footer__lockup {
    display: flex;
    align-items: center;
    gap: 22px;
    justify-content: center;
  }

  .bunk-footer__stamp-wrap {
    margin-bottom: 0;
  }
}

/* ─── DESKTOP (≥990) ─── */
@media (min-width: 990px) {
  .bunk-footer {
    padding-top: var(--pt);
    padding-bottom: var(--pb);
  }

  .bunk-footer__inner {
    padding: 0 32px;
  }

  .bunk-footer__nav-col {
    flex: 1 1 25%;
  }

  .bunk-club {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  .bunk-footer__legal-text {
    font-size: 10px;
  }

  .bunk-footer__licences {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 18px;
  }
}

/* ============================================================
   DESKTOP  ≥ 1024px — widen the footer column so the 4 nav
   columns sit properly side-by-side with real air, instead of
   the tablet's 2-up wrap. Stamp + "Mood on Demand." lockup stays
   centered as-is (untouched). Nothing structural — layout only.
   ============================================================ */
@media (min-width: 1024px){
  .bunk-footer__inner{
    width: min(1240px, 92%);
    margin: 0 auto;
    padding: 0;
  }
  .bunk-footer__nav{
    flex-wrap: nowrap;
    gap: 0 32px;
  }
  .bunk-footer__nav-col{
    flex: 1 1 25%;
    padding-right: 0;
  }

  /* BUNK CLUB lockup — scale ported from DESKTOP-SITE ds-club (15 Jul lock): the "Join the [stamp] club"
     wordmark was frozen at mobile size even at 990px; bring it up to the desktop scale. Does NOT touch
     the footer closer stamp/"Mood on Demand." below — that stays exactly as locked. */
  .bunk-club{ max-width: 640px; }
  .bunk-club__pre{ font-size: 40px; }
  .bunk-club__stamp{ height: 54px; }
  .bunk-club__word{ font-size: 58px; }
  .bunk-club__row{ max-width: 520px; }
  .bunk-club__input{ font-size: 13px; padding: 15px 16px; }
  .bunk-club__join{
    font-size: 20px;
    padding: 12px 30px;
    border-radius: 0; /* Fable 11 Jul square-CTA lock (ds-club__join) — flush to the field, no rounded app-button */
  }

  /* footer closer stamp — size only, ported from DESKTOP-SITE ds-footer__logo (96px, 15 Jul lock).
     .bunk-footer__straightlogo currently sizes off width:min(184px,54%) with no height cap, which renders
     ~150px tall on desktop — the "Mood on Demand." text/positioning below it is untouched per the lock. */
  .bunk-footer__straightlogo{ width: auto; height: 96px; }
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) ═════════════════════════
   The footer nav was the single biggest offender: 96 links at 11px type and
   26px tall. Every one of them is a real destination. */
@media (max-width: 1023px){
  .bunk-footer__nav-link{ font-size:12px; min-height:44px; display:flex; align-items:center; }
  .bunk-footer__copy{ font-size:12px; }
  .bunk-footer__social-link{ min-height:44px; }

  /* Sid 26 Jul: "on the mobile side again, we have two Bunk and Mood on Demand, so the second
     one can go." The story's closing beat (09) already carries the BUNK stamp + Mood on Demand.
     right above this, so on a phone the footer closer is the second one and it goes. Mobile only
     — the desktop footer closer is untouched and still locked. */
  .bunk-footer__lockup{ display:none; }
}
/* END_SECTION:bunk-footer */

/* START_SECTION:bunk-format (INDEX:6) */
/* ================================================================
   bunk-format.liquid — PICK YOUR FORMAT section styles
   Mobile-first · scrapbook column ~460px · uses bunk-base tokens
   ================================================================ */

/* ── FOOLPROOF FALLBACK ──────────────────────────────────────────
   These tokens normally come from bunk-base.css. Re-declared here so
   that if bunk-base.css is ever missing/late-loading, this section
   still has a black canvas + the right fonts + the yellow CTA instead
   of a white, unstyled screen. Values are identical to bunk-base.css. */
:root{
  --bunk-bg:#13100c;
  --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806);
  --bunk-kraft:#b9a07a; --bunk-cream:#f2e6c8;
  --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347;
  --f-display:'Bebas Neue',Impact,sans-serif;
  --f-body:'Space Mono',ui-monospace,monospace;
  --f-hand:'Caveat',cursive;
  --f-tape:'Patrick Hand',cursive;
}

.bunk-format {
  text-align: center;
  overflow: visible;
  /* self-paint the textured matte cardstock (vignette) so it's never flat/white, even without the foundation CSS */
  background-color: var(--bunk-bg, #13100c);
  background-image: var(--bunk-bg-radial, radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806));
}

/* ── custom bg overrides ── */
.bunk-format--kraft { background: var(--bunk-kraft); }
.bunk-format--custom { background: var(--fmt-bg, var(--bunk-bg)); }

/* ── content-width variants ── */
/* responsive width (matches the moods .bm-col pattern: min(target, 100%)) so the column never
   exceeds the viewport on mobile — overrides the foundation's fixed width:var(--col). (fix 17 Jun) */
.bunk-format .bunk-col { width: min(100%, var(--col, 460px)); max-width: 100%; margin: 0 auto; padding: 0 16px; }
.bunk-format--wide .bunk-col { width: min(100%, 720px); }
.bunk-format--full .bunk-col { width: 100%; }

/* ── HEADER ── */
.bunk-format__head {
  margin-bottom: 4px;
}
.bunk-format__title {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 47px;
  line-height: 1.18;            /* was 1.04 → clipped descenders (y) + the '?' with the -2deg tilt */
  margin: 0 0 2px;
  padding: 0.04em 0.18em 0.14em;
  transform: rotate(-2deg);
  display: inline-block;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.bunk-format__sub {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .4px;
  color: #c9bfa8;
  margin: 10px 0 0; /* 24 Jul (Sid): title→sub was touching (-1px measured) */
}

/* ── CARDS list ── */
/* must out-specify `.bunk-format .bunk-col {padding:0 16px}` (the cards div is also a .bunk-col).
   padding (not margin) so the gap to "+ more formats" can't collapse through .bunk-col;
   clears the See More tape that overhangs the last card ~15px */
/* DESKTOP (Sid, 2 Jul): format postcards sit in one row, centered. */
/* desktop-only Option-1 elements stay off on mobile */
.bunk-format__precision-d,
.bunk-format__pricerow-d,
.bunk-format__baggy-d{ display:none; }

@media (min-width: 1024px){
  /* Fable Option-1 "the polaroid owns it" — Sid-locked 11 Jul (ported from the approved
     standalone desktop build). Bigger cards/photos, dark hooks, foil price + halo,
     ADD-TO-BAGGY tape straddling the card's bottom edge → PDP. */
  .bunk-format .bunk-col,
  .bunk-format .bunk-col.bunk-format__cards{
    width: min(1560px, 94%);
  }
  /* 18 Jul FIX: match the 11-Jul APPROVED standalone (.ds-format__row) — a 3-COLUMN GRID that
     never wraps. The old flex `flex:0 1 480px` wrapped the 3rd card at 1440 (container ~1354px <
     3×480+2×56=1552px) → the "2-across + overlap" bug Sid caught. Grid columns are always 3-equal. */
  .bunk-format .bunk-col.bunk-format__cards{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    align-items: flex-start;
    gap: 56px;
    margin-top: 48px; /* 24 Jul: desktop air between the sub-line and the rotated name-tapes */
  }
  .bunk-format .bunk-col.bunk-format__cards > .bunk-format__card{
    width: 100%;
    max-width: 480px;
    min-width: 0;
    /* D75 (Sid): the polaroid should SAY it's clickable — lift + tiny wiggle on hover */
    cursor: pointer;
    transition: transform .28s cubic-bezier(.22,.9,.32,1), box-shadow .28s ease;
    margin: 0 auto;                /* scoped (0,3,0) to BEAT the base .bunk-format__card{margin:52px 14px} that sits later in source — the 14px side margin would overflow the grid track */
  }
  .bunk-format .bunk-col.bunk-format__cards > .bunk-format__card:hover{
    transform: translateY(-7px) rotate(-.7deg);
    box-shadow: 0 22px 48px rgba(0,0,0,.65);
  }
  @media (min-width: 1440px){
    .bunk-format .bunk-col.bunk-format__cards{ max-width: 1400px; gap: 72px; }
  }
  .bunk-format__head{
    text-align: center;
  }
  .bunk-format__title{ font-size: 76px; } /* D-PORT2 (16 Jul): standalone .ds-format__title locked size — was falling through to the legacy 990px block's 64px because that block leaked past 1024px (now bounded, see below) */
  .bunk-format .bunk-format__pol{ padding: 10px 10px 32px; } /* D-PORT2 (16 Jul): restructured facts to FLOW below the photo (see .bunk-format__fmk below), so the pol no longer needs a fixed 290px reservation — just enough cream for the ADD-TO-BAGGY tape to overhang, matching standalone .ds-format__pol (8px 8px 30px). */
  .bunk-format .bunk-format__fmk{  /* scoped: BEATS the base .bunk-format__fmk{position:absolute} that sits LATER in source (the standing cascade trap — see BUILD-NOTES 16 Jul) */
    position: static;             /* D-PORT2: standalone .ds-format__facts is normal-flow, stacked under the photo — was absolute-positioned inside a padding reservation, which is only an approximation and can clip/overlap on longer copy. Flow now, so the card grows to fit exactly like the source. */
    left: auto; right: auto; bottom: auto; z-index: auto;
    text-align: center;
    padding: 16px 22px 8px;       /* matches standalone .ds-format__facts padding (16px 24px 8px) */
  }
  .bunk-format__hook{ font-size: 27px; color: #2e2717; } /* D-PORT2: locked = 27px (was 26px) */
  .bunk-format__fmk .bunk-format__line{ font-size: 15px; font-weight: 600; color: #2c2419; max-width: 34ch; margin: 8px auto 0; } /* Sid 18 Jul: less faint (was 13.5px/#3a3324). Parent selector so this desktop rule beats the later global base rule. */
  .bunk-format__toptape.bunk-tape{ top: -15px; font-size: 17px; font-weight: 700; letter-spacing: 2px; -webkit-text-stroke: .35px currentColor; transform: translateX(-50%) rotate(-1.6deg); } /* Sid 18 Jul: match the mood-tape writing (.bm-tape-top). 2-class selector so it beats the later global base rule at desktop. */
  .bunk-format__card.open .bunk-format__ladder{ max-height: 900px; } /* D-PORT2: desktop ladder needs more room than mobile's 640px cap now that the legacy 990px block's 760px override is bounded away from 1024+; generous cap, content-driven, never clips */
  .bunk-format__precision-d{
    display: block;
    font-family: var(--f-body);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .3px;
    color: #6b5f45;               /* dark ink on cream (Fable P1.2) */
    margin: 16px 0 0;             /* D-PORT: match locked spacing (was 8px) */
  }
  .bunk-format__pricerow-d{
    display: flex;
    justify-content: center;      /* D-PORT: locked centres the price (was flex-end) */
    align-items: baseline;
    gap: 6px;
    margin-top: 14px;
  }
  .bunk-format__pricerow-d .bunk-format__cardprice{
    font-family: var(--f-display);
    font-size: 40px;              /* D-PORT: locked = 40px (was 34) */
    letter-spacing: .5px;
    -webkit-text-stroke: .4px rgba(22,16,6,.5);   /* D-PORT: crisp dark edge on cream */
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.85)) drop-shadow(0 2px 4px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.9)); /* foil halo, +3rd shadow per locked */
  }
  /* D-PORT (Sid 16 Jul · Fable): desktop was showing a DEAD baggy-d link → PDP and HIDING the real
     See-More → flavour-ladder → ADD-TO-BAGGY buy flow. The locked Fable desktop uses the ladder (like mobile).
     baggy-d markup + CSS removed; the ladder/shopwrap now show on desktop and use the real BunkCart add. */
  .bunk-format__cornertape{ display: none !important; }
  /* hover: deepen the shadow only — the card's inline rotate must survive */
  .bunk-format__pol:hover{ box-shadow: 0 20px 40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5); }
}
.bunk-format .bunk-col.bunk-format__cards {
  padding-bottom: 72px;
  margin-top: 36px; /* 24 Jul (Sid): sub-line was touching the polaroid name-tapes (0px measured); base = both surfaces */
}

/* ── each FORMAT CARD ── */
.bunk-format__card {
  position: relative;
  margin: 52px 14px 0;
}

/* ── POLAROID wrapper ── */
.bunk-format__polwrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
}

.bunk-format__pol {
  position: relative;
  width: 92%;
  padding: 6px 6px 96px;
  box-shadow: 0 13px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
  overflow: visible;
}

/* ── TOP TAPE (format name) ── */
.bunk-format__toptape {
  position: absolute;
  z-index: 8;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  -webkit-text-stroke: .3px currentColor;
  opacity: 1;
  pointer-events: none;
  display: inline-block;
}

/* ── SLIDESHOW window ── */
.bunk-format__win {
  /* Sid 25 Jul, after 8 failed attempts at a JS swipe: COPY THE STORY'S MECHANISM.
     The story carousel works with a finger, a trackpad AND a mouse because the BROWSER
     scrolls it (scroll-snap) — no JS input handling at all. These photos used to be stacked
     absolutely and crossfaded by script, so every input needed its own hand-written handler
     and a desktop mouse got none. Now it is a real scrolling strip, exactly like .bs-ctrack. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 22px rgba(0,0,0,.5);
  cursor: grab;
  /* Sid 25 Jul: the scroll conversion made this box render 8px TALLER than its aspect-ratio
     (the auto scrollbar reserves a gutter), so the photo spilled over "The Easy Yes" /
     "The Everyday Box" / "The Connoisseur's Drops". Clip the block axis and pin the height. */
  overflow-y: clip;
  height: auto;
  flex: none;
  -ms-overflow-style: none;
}
.bunk-format__track{
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.bunk-format__track::-webkit-scrollbar{ display:none; width:0; height:0 }
.bunk-format__slide{ min-height:0; align-self:stretch; }
.bunk-format__slide img,
.bunk-format__slide .bunk-photo{ display:block; width:100%; height:100%; object-fit:cover; }

.bunk-format__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  opacity: 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.bunk-format__slide.on { opacity: 1; }
.bunk-format__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bunk-format__slide--placeholder {
  background: linear-gradient(168deg, #1e1a14, #13100c);
}

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

/* ── SLIDE DOTS ── */
.bunk-format__dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  gap: 5px;
  justify-content: center;
  z-index: 6;
  pointer-events: none;
}
.bunk-format__dot {
  width: 18px;
  height: 18px;
  padding: 6px;
  background-clip: content-box;
  pointer-events: auto;   /* container is passthrough; the DOTS take the tap */
  cursor: pointer;
  border-radius: 50%;
  background-color: rgba(255,255,255,.55);
  transition: background-color .3s;
}
.bunk-format__dot.on { background-color: #fff; }

/* ── COPY MARKER band (inside polaroid bottom white space) ── */
.bunk-format__fmk {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 30px;
  text-align: center;
  z-index: 3;
}
.bunk-format__hook {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  color: #241f17;
  margin: 0;
  transform: rotate(-1deg);
  display: inline-block;
  /* Sid 25 Jul: "the polaroid picture and text is too close" and then "can't even read... the
     text is literally on the picture" — the hook was overlapping the photo on all three cards
     (Proxy 14px, Mass 30px, Emergency 13px). Real clearance, not a nudge. */
  margin-top: 26px;
}
.bunk-format__line {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  color: #2c2419;
  margin: 8px auto 0;
  max-width: 288px;
  letter-spacing: .1px;
}

/* ── CORNER TAPE decoration ── */
.bunk-format__cornertape {
  position: absolute;
  z-index: 8;
  bottom: -9px;
  right: 12px;
  width: 74px;
  height: 25px;
  transform: rotate(40deg);
  background: linear-gradient(180deg, rgba(230,216,182,.94), rgba(201,185,147,.86));
  opacity: .95;
  clip-path: polygon(3% 12%, 97% 0, 100% 88%, 1% 100%);
  box-shadow: 0 2px 7px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.34), inset 0 -3px 4px rgba(0,0,0,.16);
  pointer-events: none;
}

/* ── ADD TO BAGGY CTA tape ── */
.bunk-format__shopwrap {
  position: absolute;
  z-index: 8;
  bottom: -15px;             /* tape straddles the polaroid bottom edge — ~2/3 on cream, ~1/3 hanging onto black (matches the moods .bm-shoptape reference) */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;   /* full-width wrap → tape truly centered (was 0-width, so translateX did nothing) */
  align-items: flex-end;     /* anchor the tape's BOTTOM to the wrap bottom so 'bottom:-15px' lands the overhang, not the whole tape, below the edge */
  pointer-events: none;      /* the thin wrap strip shouldn't block; the tape re-enables clicks */
}
.bunk-format__shoptape { pointer-events: auto; }
.bunk-format__shoptape {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transform: rotate(-1.8deg);
  padding: 8px 22px 9px;
  font-size: 18px;
  letter-spacing: 2px;
  border: 0;
  cursor: pointer;
  background: var(--fmt-btn, var(--bunk-cta));
  color: #1a1a1a;
  font-family: var(--f-display);
  clip-path: polygon(2% 18%, 98% 2%, 99% 86%, 1% 98%);
  box-shadow: 0 3px 10px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bunk-format__shoptape:hover,
.bunk-format__shoptape:focus-visible {
  transform: rotate(-1.8deg) scale(1.04);
  box-shadow: 0 5px 16px rgba(0,0,0,.65), inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.16);
}
@media (prefers-reduced-motion: reduce) {
  .bunk-format__shoptape { transition: none; }
}

/* ── THUMBPRINT SVGs ── */
.bunk-format__fp {
  height: 54px;
  width: auto;
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(-15deg);
  pointer-events: none;
  z-index: 9;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.42));
}
/* reveal tape now carries a chevron, not the press-thumbprint (that lives on the real chips) */
.bunk-format__fp--hide{ display: none; }
.bunk-format__chev{
  display: inline-block;
  width: 9px; height: 9px;
  margin: -3px 0 0 8px;
  border-right: 2.6px solid currentColor;
  border-bottom: 2.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .28s ease;
  flex-shrink: 0;
}
.bunk-format__shoptape[aria-expanded="true"] .bunk-format__chev{ transform: translateY(3px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce){ .bunk-format__chev{ transition: none; } }
.bunk-format__fp--mini {
  height: 1.9em;
  width: auto;
  position: static;
  transform: rotate(-13deg);
  vertical-align: -.42em;
  margin: 0 1px 0 4px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.32));
}

/* ── MOOD LADDER (accordion reveal) ── */
.bunk-format__ladder {
  overflow: hidden;
  max-height: 0;
  transition: max-height .36s cubic-bezier(.4,0,.2,1);
  margin: 0 4px;
}
.bunk-format__ladder[hidden] {
  /* use JS to toggle hidden attr + max-height together */
  display: block !important; /* keep it in flow; JS drives max-height */
  max-height: 0;
}
.bunk-format__card.open .bunk-format__ladder {
  max-height: 640px;
}
@media (prefers-reduced-motion: reduce) {
  .bunk-format__ladder { transition: none; }
}

.bunk-format__lrail {
  position: relative;
  padding: 32px 2px 8px 22px;
  margin-top: 10px;
}
.bunk-format__lrail::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 42px;
  bottom: 22px;
  border-left: 2px dashed #3a3324;
  pointer-events: none;
}

.bunk-format__lcue {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 20px;
  color: #b3ab98;
  margin: 0 0 4px 2px;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ── DOSE CHIP ── */
.bunk-format__chip {
  position: relative;
  display: block;
  text-decoration: none;
  background: linear-gradient(180deg, #191510, #120f0a);
  border: 1px solid #2e271b;
  border-radius: 6px;
  padding: 12px 13px 11px;
  margin: 0 0 11px;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  transition: border-color .2s, box-shadow .2s;
}
.bunk-format__chip:hover,
.bunk-format__chip:focus-visible {
  border-color: #4a4030;
  box-shadow: 0 5px 16px rgba(0,0,0,.6);
  outline: none;
}
.bunk-format__chip::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 24px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ac, #fff);
  box-shadow: 0 0 0 3px #120f0a, 0 0 7px var(--ac, #fff);
}

.bunk-format__chl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bunk-format__cf {
  font-family: var(--f-display);
  font-size: 21px;
  letter-spacing: 1px;
  color: #f0ece2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bunk-format__cprice {
  font-family: var(--f-display);
  font-size: 23px;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bunk-format__cpre {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  vertical-align: 1px;
  margin-right: 2px;
  opacity: .95;
}
.bunk-format__csub {
  font-family: var(--f-body);
  font-size: 11.5px;
  color: #d2c8b2;
  margin: 6px 0 0;
  line-height: 1.55;
  letter-spacing: .1px;
}
.bunk-format__cfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  gap: 8px;
}
.bunk-format__cbadge {
  display: inline-block;
  font-family: var(--f-tape);
  font-size: 11px;
  letter-spacing: .3px;
  padding: 3px 9px;
  transform: rotate(-2deg);
  clip-path: polygon(3% 12%, 97% 0, 100% 88%, 1% 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.bunk-format__cfoot .bunk-format__cshop {
  display: inline-flex;
  position: relative;        /* specificity 0-0-2-0 beats foundation .bunk-tape{position:absolute} (loads later) → back IN-FLOW so margin-left:auto pushes it RIGHT */
  align-items: center;
  gap: 2px;
  font-size: 16px;
  letter-spacing: 2px;
  /* Audit 25 Jul: this button measured 117x31px — about two-thirds of a thumb pad, against the
     44px floor both Apple and Google publish. A mis-tap either does nothing or hits the card link
     behind it. Padding grows the hit area without changing the tape graphic's look.
     Two-class scope so the foundation .bunk-tape{padding:6px 18px} rule cannot win. */
  padding: 11px 12px 12px;
  min-height: 44px;
  box-sizing: border-box;
  margin-left: auto;
  transform: rotate(-1.6deg);
  clip-path: polygon(2% 15%, 98% 3%, 99% 90%, 1% 97%);
  box-shadow: 0 2px 7px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.4);
  border: 0;
  cursor: pointer;
  background: var(--fmt-btn, var(--bunk-cta));
  color: #1a1a1a;
  font-family: var(--f-display);
  transition: transform .15s ease;
}
.bunk-format__cshop:hover,
.bunk-format__cshop:focus-visible {
  transform: rotate(-1.6deg) scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .bunk-format__cshop { transition: none; }
}

/* ── COMING SOON ghost line ── */
.bunk-format__more {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  margin: 0 0 18px;            /* spacing now comes from .bunk-format__cards padding-bottom (margin would collapse through .bunk-col) */
  text-align: center;
  position: relative;
  z-index: 9;                  /* above the overhanging tape (z-index 8) so it can never be covered */
}

/* ── TOAST ── */
.bunk-format__toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(16px);
  z-index: 70;
  background: #15120d;
  color: var(--bunk-cta);
  border: 1px solid #5a4d18;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11.5px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .28s ease, transform .28s ease;
}
.bunk-format__toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .bunk-format__toast { transition: none; }
}

/* ── TABLET ── */
@media (min-width: 750px) and (max-width: 989px) {
  .bunk-format__title { font-size: 56px; }
  .bunk-format__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .bunk-format__card:last-child { grid-column: 1 / -1; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ── LEGACY DESKTOP (990–1023px gap only) ──
   D-PORT2 (16 Jul): this block predates the 1024px Fable desktop layer and used to be
   unbounded (min-width:990px, no ceiling) — because it loads AFTER the 1024px block in
   source, its rules (960px column, 3-col grid + 18px gap, title 64px, card margin-top 56px,
   pol 94%, ladder 760px) were WINNING the cascade at every desktop width ≥990px, silently
   undoing the locked 1024px layout (row capped at 960px instead of 1560px, grid instead of
   flex, wrong title size, etc). Bounded to the narrow 990–1023px gap only, so it now serves
   as a sane in-between step and can no longer leak into the real desktop layer.
   Dead rules removed: `.bunk-format{text-align:center}` (base rule at L382 already sets
   this — redundant everywhere) and `.bunk-format--narrow .bunk-col` (no `content_width`
   schema setting ever emits a `--narrow` class — unreachable). */
@media (min-width: 990px) and (max-width: 1023px) {
  .bunk-format .bunk-col { width: min(100%, 960px); }
  .bunk-format__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 18px;
    align-items: start;
  }
  .bunk-format__title { font-size: 64px; }
  .bunk-format__card { margin-top: 56px; }
  .bunk-format__card.open .bunk-format__ladder { max-height: 760px; }
  .bunk-format__pol { width: 94%; }
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) — see bunk-hero for why ══ */
@media (max-width: 1023px){
  /* Sid 25 Jul: "by formats mass bunk cant even read... the text is literally on the picture".
     Root cause: the caption block is position:absolute inside a fixed 96px padding reservation,
     so longer copy rides UP over the photo (Mass overlapped by 30px, Proxy 14, Emergency 13).
     DESKTOP already fixed exactly this on 16 Jul by putting the block in normal flow — its own
     comment says the reservation "can clip/overlap on longer copy". That fix was never carried
     to mobile. Porting it: the card now grows to fit its copy instead of overlapping. */
  .bunk-format .bunk-format__fmk{
    position: static;
    left: auto; right: auto; bottom: auto; z-index: auto;
    text-align: center;
    padding: 14px 16px 6px;
  }
  .bunk-format .bunk-format__pol{ padding: 6px 6px 30px; }
  .bunk-format__cbadge,
  .bunk-format__cpre{ font-size:12px; }
  .bunk-format .bunk-format__shoptape{ min-height:44px; padding-top:11px; padding-bottom:12px; box-sizing:border-box; }
}
/* END_SECTION:bunk-format */

/* START_SECTION:bunk-hero (INDEX:7) */
/* FOOLPROOF FALLBACK (identical to bunk-base.css) — black canvas + fonts + CTA even if base CSS is missing */
:root{ --bunk-bg:#13100c; --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806); --bunk-kraft:#b9a07a; --bunk-cream:#f2e6c8; --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347; --acc-sourapple:#B6E03A; --acc-mango:#F39A1F; --acc-blueberry:#6F3FA3; --f-display:'Bebas Neue',Impact,sans-serif; --f-body:'Space Mono',ui-monospace,monospace; --f-hand:'Caveat',cursive; --f-tape:'Patrick Hand',cursive; }
/* ================================================================
   bunk-hero — scoped styles
   Mobile-first (430px column). Scale up at 750 + 990.
   Uses bunk-base tokens exclusively — no hard-coded colours.
   ================================================================ */

.bunk-hero {
  /* reset section defaults — hero is full-bleed, no internal padding */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--bunk-bg);
  background-image: var(--bunk-bg-radial);
  overflow: hidden;
  position: relative;
}

/* ── SLIDESHOW PHOTO WRAP ──────────────────────────────────────── */
.bunk-hero__photo-wrap {
  position: relative;
  width: 410px;
  max-width: calc(100vw - 20px);
  margin: 26px auto 0;
  transform: rotate(-1.3deg);
  z-index: 0;
}

/* curl-shadow under corners */
.bunk-hero__photo-wrap::before,
.bunk-hero__photo-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 18px;
  width: 44%;
  height: 30px;
  box-shadow: 0 24px 24px rgba(0,0,0,.70);
}
.bunk-hero__photo-wrap::before {
  left: 16px;
  transform: skew(-9deg) rotate(-4deg);
}
.bunk-hero__photo-wrap::after {
  right: 16px;
  transform: skew(9deg) rotate(4deg);
}

/* album-mount corners */
.bunk-hero__pc {
  position: absolute;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #1c1916, #070605);
  box-shadow: 0 1px 4px rgba(0,0,0,.70);
  z-index: 6;
}
.bunk-hero__pc--bl {
  bottom: -3px;
  left: -3px;
  clip-path: polygon(0 100%, 100% 100%, 0 0);
}
.bunk-hero__pc--br {
  bottom: -3px;
  right: -3px;
  clip-path: polygon(100% 100%, 0 100%, 100% 0);
}

/* mood washi tapes */
.bunk-hero__tape {
  font-size: 13px;
  letter-spacing: 1px;
  padding: 5px 12px;
}
.bunk-hero__tape--wf {
  background: var(--acc-sourapple);
  color: #1a2a08;
  top: -14px;
  left: 24px;
  transform: rotate(-9deg);
}
.bunk-hero__tape--social {
  background: var(--acc-mango);
  color: #2a1604;
  top: -12px;
  right: 20px;
  transform: rotate(8deg);
}
.bunk-hero__tape--disc {
  background: var(--acc-blueberry);
  color: #1c0e2e;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
}

/* viewport window */
.bunk-hero__win {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,.55);
  /* darkroom print-edge on mobile too (Sid 25 Jul, picked 3px off the render board).
     Desktop overrides this to 5px in the >=1024 block — that stays as approved.
     Ghost/fan cards deliberately NOT brought to mobile (Sid's explicit call). */
  border: 3px solid #EDE4CE;
  box-sizing: border-box;
  /* Sid 25 Jul: "I cannot swipe through the slideshow pictures". The swipe JS was fine —
     touch-action:auto let the browser claim the horizontal drag first. pan-y keeps vertical
     page scrolling with the browser; pinch-zoom preserves accessibility zoom. */
  touch-action: pan-y pinch-zoom;
}

/* slides */
.bunk-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;                       /* outgoing sits beneath */
  transition: opacity .48s cubic-bezier(.22,.9,.32,1); will-change: opacity; /* D75: one curve everywhere — the crossfade rides the same wrist-flick as the deal */
}
.bunk-hero__slide.is-on {
  opacity: 1;
  z-index: 2;                       /* incoming rides ON TOP of the held outgoing */
}
/* outgoing holds fully opaque beneath while the incoming fades in — no black dip (Sid 11 Jul) */
.bunk-hero__slide.is-prev {
  opacity: 1;
  z-index: 1;
  transition: none;
}

/* ── card-hand ghosts (desktop only — see ≥1024 block; off by default) ── */
.bunk-hero__ghost { display: none; }
.bunk-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bunk-hero__img-placeholder {
  width: 100%;
  height: 100%;
}
.bunk-hero__img-placeholder-svg {
  width: 100%;
  height: 100%;
}

/* dot nav */
.bunk-hero__dots {
  position: absolute;
  bottom: 38px;
  left: 0;
  right: 0;
  display: flex;
  gap: 5px;
  justify-content: center;
  z-index: 5;
}
.bunk-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.40);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .25s;
}
.bunk-hero__dot.is-on,
.bunk-hero__dot[aria-selected="true"] {
  background: #fff;
}
.bunk-hero__dot:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: 2px;
}

/* pause button */
.bunk-hero__pause {
  position: absolute;
  top: 34px;
  right: 8px;
  z-index: 7;
  width: 28px;
  height: 28px;
  border: 0;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.bunk-hero__pause:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: 2px;
}
/* ▐▐ bars when playing, ▶ triangle when paused — CSS only */
.bunk-hero__pause-icon {
  display: inline-block;
  width: 10px;
  height: 12px;
  box-shadow: -4px 0 0 0 #fff, 4px 0 0 0 #fff;
  transition: box-shadow .15s;
}
.bunk-hero__pause[aria-pressed="true"] .bunk-hero__pause-icon {
  /* play triangle */
  box-shadow: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}

/* ── COPY BAND ─────────────────────────────────────────────────── */
.bunk-hero__band {
  padding: 6px 20px 10px;
  text-align: {{ section.settings.text_align | default: 'center' }};
}

.bunk-hero__ctw {
  position: relative;
  margin: 14px 12px 8px;
}

/* masking-tape "we do the science." note */
.bunk-hero__scitape {
  display: inline-block;
  position: absolute;
  top: -9px;
  left: 18px;
  z-index: 6;
  background: linear-gradient(178deg, rgba(231,217,183,.95), rgba(204,189,151,.90));
  padding: 6px 16px 7px;
  transform: rotate(-4.5deg);
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: #27314c;
  box-shadow: 0 2px 7px rgba(0,0,0,.50), inset 0 2px 3px rgba(255,255,255,.42), inset 0 -3px 4px rgba(0,0,0,.16);
  clip-path: polygon(2% 15%, 97% 0, 99% 84%, 1% 100%);
  pointer-events: none;
}

/* "Mood on Demand." big display line — LOCKED */
.bunk-hero__mod {
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(26px, 10vw, 58px);
  line-height: .9;
  margin: 12px 0 22px;
  text-align: center;
  transform: rotate(-1.5deg);
  white-space: nowrap;
  max-width: 100%;
}

/* CTA wrapper + button */
.bunk-hero__cta-wrap {
  position: relative;
  /* space restored after "Mood on Demand." was removed; Sid 27 Jun — nudged the CTA + tape a little further down */
  margin-top: 48px;
}
.bunk-hero__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--btn-col, var(--bunk-cta));
  color: #1a1a1a;
  text-decoration: none;
  border-radius: 5px;
  padding: 17px;
  font-family: var(--f-display);
  font-size: 28px;
  letter-spacing: 3px;
  box-shadow: 0 5px 0 #c9b400, 0 12px 22px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.50);
  transform: rotate(-.4deg);
  transition: transform .12s ease, box-shadow .12s ease;
  border: 0;
  cursor: pointer;
  overflow: visible;
}
.bunk-hero__cta:active {
  transform: rotate(-.4deg) translateY(3px) scale(.99);
  box-shadow: 0 2px 0 #c9b400, 0 5px 12px rgba(0,0,0,.50);
}
.bunk-hero__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* thumbprint press-cue — faded fingerprint SVG on the CTA */
.bunk-hero__fpw {
  display: inline-block; /* 0×0 marker — the print anchors to the CTA button (below), not to this span */
}
.bunk-hero__fp {
  position: absolute;
  right: 6px;             /* grazes the last letters / spills toward the corner (life-size press) */
  top: 50%;
  height: 76px;           /* life-size thumb press — locked treatment (Sid 10th-date lock) */
  width: auto;
  transform: translateY(-50%) rotate(-17deg);
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.40));
  animation: bunk-fppulse 2.5s ease-in-out infinite;
}
@keyframes bunk-fppulse {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(0,0,0,.30)); }
  50%       { filter: drop-shadow(0 0 6px rgba(70,52,8,.60)); }
}
@media (prefers-reduced-motion: reduce) {
  .bunk-hero__fp { animation: none; }
}

/* micro legal line — LOCKED */
.bunk-hero__micro {
  font-family: var(--f-body);
  color: #8c8472;
  /* 11px -> 12px (Sid 25 Jul): 11px is under the readable floor on a phone. The mobile
     cut below is short enough that the bigger type still lands in TWO lines, not three. */
  font-size: 12px;
  line-height: 1.6;
  /* +clearance: CTA carries a 0 5px lip + 0 12px drop shadow; 5px top let it clip the line. Drop it lower. */
  /* Sid 26 Jul: with "3rd-party tested" gone the line got short and looked stranded on the left.
     Centre it under the CTA — look at the whole picture after a removal, not just the removal. */
  margin: 18px auto 2px;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* D74 (24 Jul, density=A): the merged line wears the silver system ink */
.bunk-hero__micro--merged { color: #cfc7b6; }

/* MOBILE: two tiers. Trust half reads at full size in the silver system ink; the legal tail
   drops to its own line, smaller and a lighter shade, so the eye lands on the first line
   and the legal wording is still there in full (Sid 25 Jul). */
.bunk-hero__micro-a { display: block; }
.bunk-hero__micro-b {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  color: #8c8472;
  margin-top: 2px;
}

/* ── TRUST TICKERS ─────────────────────────────────────────────── */
.bunk-hero__tickers {
  margin-top: 12px;
}
.bunk-hero__tick {
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  background: #0a0a08;
}
.bunk-hero__tick + .bunk-hero__tick {
  border-top: 1px solid #241f17;
}
.bunk-hero__tick-inner {
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: 0 1px 1px rgba(0,0,0,.50);
}

/* ticker A — scroll right */
.bunk-hero__tick--a .bunk-hero__tick-inner {
  animation: bunk-ticker-r 60s linear infinite;
}
/* ticker B — scroll left */
.bunk-hero__tick--b .bunk-hero__tick-inner {
  animation: bunk-ticker-l 60s linear infinite;
}
/* pause on hover/focus-within */
.bunk-hero__tick--a:hover .bunk-hero__tick-inner,
.bunk-hero__tick--a:focus-within .bunk-hero__tick-inner {
  animation-play-state: paused;
}
.bunk-hero__tick--b:hover .bunk-hero__tick-inner,
.bunk-hero__tick--b:focus-within .bunk-hero__tick-inner {
  animation-play-state: paused;
}

@keyframes bunk-ticker-r {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@keyframes bunk-ticker-l {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── TABLET (750-989px) ────────────────────────────────────────── */
@media (min-width: 750px) {
  .bunk-hero__photo-wrap {
    width: 460px;
    max-width: 70vw;
  }
  .bunk-hero__mod {
    font-size: 72px;
  }
  .bunk-hero__cta {
    font-size: 32px;
    max-width: 460px;
    margin: 0 auto;
  }
  .bunk-hero__band {
    max-width: 520px;
    margin: 0 auto;
  }
}

/* ── DESKTOP (≥990px) ──────────────────────────────────────────── */
/* DESKTOP (Sid, 2 Jul): the SAME scrapbook, scaled with intent — hero slideshow
   centered → CTA centered directly below → tickers full-bleed below. Never a
   generic photo-left/copy-right split. Mobile (<990px) untouched. */
@media (min-width: 990px) {
  .bunk-hero {
    padding: 44px 5vw 0 !important;
  }
  .bunk-hero__photo-wrap {
    width: 500px;
    max-width: 42vw;
    margin: 36px auto 0;   /* keeps the mood tapes clear of the header */
    transform: rotate(-1.1deg);   /* hand-laid, subtle */
  }
  .bunk-hero__band {
    max-width: 560px;
    margin: 30px auto 0;
    text-align: center;
    padding: 0;
  }
  .bunk-hero__cta {
    font-size: 34px;
    max-width: 460px;
    margin: 0 auto;
  }
  .bunk-hero__tickers {
    margin: 38px -5vw 0;      /* full-bleed out of the hero's side padding */
    width: calc(100% + 10vw);
  }

  /* ── DESKTOP PRESS-CUE = option D (Sid 6 Jul) ──────────────────────
     Desktop has a cursor, so the resting fingerprint reads oddly. Hide it
     at rest, fade it in on hover/focus of the CTA (keeps the BRAND fingerprint,
     just made desktop-native). Mobile (<990px) keeps the always-on print. */
  .bunk-hero__fp {
    opacity: 0;
    animation: none;                 /* no pulse while hidden */
    transition: opacity .28s ease;
  }
  .bunk-hero__cta:hover .bunk-hero__fp,
  .bunk-hero__cta:focus-visible .bunk-hero__fp {
    opacity: .9;                     /* fades in as the cursor lands */
  }
  /* the ACTUAL hero press-cue is the foundation-css ::after fingerprint — hide it at
     rest on desktop too, reveal on hover/focus (the inline SVG above is display:none here). */
  .bunk-hero__cta::after {
    opacity: 0;
    transition: opacity .28s ease;
  }
  .bunk-hero__cta:hover::after,
  .bunk-hero__cta:focus-visible::after {
    opacity: 1;                      /* fingerprint fades in on hover */
  }
  /* "we do the science" tape — greyed + a touch more anti-clockwise (Sid 6 Jul) */
  .bunk-hero__scitape {
    background: linear-gradient(178deg, rgba(190,192,196,.96), rgba(150,152,158,.92));
    color: #20242e;
    transform: rotate(-8deg);
  }
}

/* ── DESKTOP ≥1024 — the approved 9-Jul desktop build, ported (Sid 11 Jul) ──
   Photo scales to the locked mobile proportion (≈58vh), hand-tilt -1.4°, and the
   card-hand ghosts fan out: prev/next slides peek left+right, clickable/swipeable. */
@media (min-width: 1024px) {
  .bunk-hero__photo-wrap {
    width: clamp(340px, calc(58vh * 0.75), 520px);
    max-width: none;
    transform: rotate(-1.4deg);
  }
  /* curl-shadow + album-mount corners scale up to the desktop proportions (ds-hero source, 9 Jul) */
  .bunk-hero__photo-wrap::before,
  .bunk-hero__photo-wrap::after {
    bottom: 20px;
    height: 34px;
  }
  .bunk-hero__photo-wrap::before { left: 18px; }
  .bunk-hero__photo-wrap::after  { right: 18px; }
  .bunk-hero__pc { width: 36px; height: 36px; }
  .bunk-hero__pc--bl { bottom: -4px; left: -4px; }
  .bunk-hero__pc--br { bottom: -4px; right: -4px; }

  /* mood-tape positions match the locked ds-hero desktop source (labels/rotation already correct — FLOW rename D53 kept) */
  .bunk-hero__tape--wf     { top: -16px; left: 30px; }
  .bunk-hero__tape--social { top: -14px; right: 24px; }
  .bunk-hero__tape--disc   { bottom: -15px; }

  .bunk-hero__ghost {
    display: block;
    position: absolute;
    top: 20px;
    bottom: 40px;
    width: 88%;
    z-index: -2;
    border: 0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    opacity: .62;
    filter: saturate(.88) brightness(.84);
    box-shadow: 0 16px 34px rgba(0,0,0,.6);
    transition: opacity .25s ease, transform .25s ease;
  }
  .bunk-hero__ghost img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  /* ═══ FAN-5 (Fable spec 18 Jul · Sid "make it" 24 Jul): 5-print card hand — biggest centre,
     each seat outward smaller/lower/darker. Print-edge cream = #EDE4CE. ═══ */
  .bunk-hero__ghost { border: 4px solid #EDE4CE; box-sizing: border-box; opacity: .75;
    box-shadow: 0 14px 30px rgba(0,0,0,.55); will-change: transform, opacity; } /* D75: GPU-hint against the jerk */
  .bunk-hero__ghost--l { left: 0;  transform: translateX(-34%) translateY(14px) rotate(-5deg) scale(.86); transform-origin: bottom left; /* tuned: 58→30% lands the 120px peek (measured 1440) */ }
  .bunk-hero__ghost--r { right: 0; transform: translateX(34%)  translateY(14px) rotate(5deg)  scale(.86); transform-origin: bottom right; }
  .bunk-hero__ghost--l:hover { opacity: .85; transform: translateX(-36%) translateY(14px) rotate(-5.5deg) scale(.875); }
  .bunk-hero__ghost--r:hover { opacity: .85; transform: translateX(36%)  translateY(14px) rotate(5.5deg)  scale(.875); }
  .bunk-hero__ghost--l2,
  .bunk-hero__ghost--r2 { z-index: -3; opacity: .5; filter: saturate(.85) brightness(.78);
    box-shadow: 0 10px 22px rgba(0,0,0,.5); }
  .bunk-hero__ghost--l2 { left: 0;  transform: translateX(-50%) translateY(26px) rotate(-9deg) scale(.74); transform-origin: bottom left; /* tuned: 92→44% lands the 56px peek */ }
  .bunk-hero__ghost--r2 { right: 0; transform: translateX(50%)  translateY(26px) rotate(9deg)  scale(.74); transform-origin: bottom right; }
  .bunk-hero__ghost--l2:hover { opacity: .62; transform: translateX(-52%) translateY(26px) rotate(-9deg) scale(.74); }
  .bunk-hero__ghost--r2:hover { opacity: .62; transform: translateX(52%)  translateY(26px) rotate(9deg)  scale(.74); }
  .bunk-hero__ghost:focus-visible { outline: 2px solid var(--bunk-cta); outline-offset: 2px; }

  /* THE DEAL — 620ms, one wrist-flick curve; the dealt print travels to centre and dissolves in */
  .bunk-hero__photo-wrap.is-deal-next .bunk-hero__ghost--r,
  .bunk-hero__photo-wrap.is-deal-prev .bunk-hero__ghost--l {
    z-index: 4;
    transition: transform 480ms cubic-bezier(.22,.9,.32,1);
    animation: bunkDealFade 480ms cubic-bezier(.22,.9,.32,1) forwards;
  }
  .bunk-hero__photo-wrap.is-deal-next .bunk-hero__ghost--r { transform: translateX(4%) translateY(0) rotate(0deg) scale(.97); }
  .bunk-hero__photo-wrap.is-deal-prev .bunk-hero__ghost--l { transform: translateX(-4%) translateY(0) rotate(0deg) scale(.97); }
  @keyframes bunkDealFade { 0%{opacity:.75} 60%{opacity:.95} 100%{opacity:0} }
  /* the outer card on the dealt side promotes one seat inward (truthful shuffle) */
  .bunk-hero__photo-wrap.is-deal-next .bunk-hero__ghost--r2,
  .bunk-hero__photo-wrap.is-deal-prev .bunk-hero__ghost--l2 {
    transition: transform 480ms cubic-bezier(.22,.9,.32,1), opacity 480ms cubic-bezier(.22,.9,.32,1);
    opacity: .75;
  }
  .bunk-hero__photo-wrap.is-deal-next .bunk-hero__ghost--r2 { transform: translateX(58%) translateY(14px) rotate(5deg) scale(.86); }
  .bunk-hero__photo-wrap.is-deal-prev .bunk-hero__ghost--l2 { transform: translateX(-58%) translateY(14px) rotate(-5deg) scale(.86); }
  /* D75 (Sid: "it jerks"): the far-wing breath RETIRED — the opacity dip read as flicker.
     The far wing now holds perfectly still during a deal. */
  /* D75: the settle guard — while .is-settling, ghosts snap to their new seats with NO transition
     (kills the visible backwards slide of the promoted card when the deal class dropped) */
  .bunk-hero__photo-wrap.is-settling .bunk-hero__ghost { transition: none !important; animation: none !important; }

  .bunk-hero__tape { font-size: 14px; letter-spacing: 1px; padding: 6px 14px; z-index: 8; }

  /* FAN-5 fallback (Fable §5): 1024-1279px the outer pair tucks away — the approved 3-print hand,
     deal transition intact; the full 5-print fan is the ≥1280 reward */
  @media (max-width: 1279px) {
    .bunk-hero__ghost--l2, .bunk-hero__ghost--r2 { display: none; }
  }

  /* slideshow window — ds-hero desktop source: deeper drop shadow + grabbable cursor cue */
  .bunk-hero__win {
    box-shadow: 0 18px 44px rgba(0,0,0,.62); /* FAN-5: the hero print's deeper, honest shadow */
    border: 5px solid #EDE4CE;               /* FAN-5: darkroom print-edge on the centre print */
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
  }
  .bunk-hero__win:active { cursor: grabbing; }

  /* dot nav + pause button — desktop sizing/position from the locked source */
  .bunk-hero__dots { bottom: 14px; gap: 6px; }
  .bunk-hero__dot { width: 7px; height: 7px; }
  .bunk-hero__pause { top: 16px; right: 12px; width: 32px; height: 32px; }

  /* copy band spacing — matches ds-hero__copy-col (30px clearance off the DISCONNECT tape) */
  .bunk-hero__cta-wrap { margin-top: 24px; }

  /* CTA — locked desktop treatment (min-width, not a capped max-width; deeper shadow; real :hover lift) */
  .bunk-hero__cta {
    min-width: 420px;
    max-width: none;
    padding: 21px 40px;
    box-shadow: 0 5px 0 #c9b400, 0 14px 26px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.50);
  }
  .bunk-hero__cta:hover {
    transform: rotate(-.4deg) translateY(-2px);
    box-shadow: 0 7px 0 #c9b400, 0 18px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.50);
  }
  .bunk-hero__cta:active {
    transform: rotate(-.4deg) translateY(3px) scale(.99);
    box-shadow: 0 2px 0 #c9b400, 0 6px 14px rgba(0,0,0,.50);
  }

  .bunk-hero__micro { font-size: 12px; margin: 20px auto 0; }
  /* desktop rejoins the two tiers into the ONE approved line — frozen desktop, unchanged */
  .bunk-hero__micro-a,
  .bunk-hero__micro-b { display: inline; font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
  .bunk-hero__micro-b::before { content: ' · '; }

  .bunk-hero__tick { padding: 11px 0; }
  .bunk-hero__tick-inner { font-size: 13px; letter-spacing: 1.4px; }
  .bunk-hero__tickers { margin-top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .bunk-hero__ghost { transition: none; animation: none; } /* FAN-5: no deal travel under reduced motion */
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) ══════════════════════════
   Two problems he flagged on the phone: text under the readable floor, and
   controls under the 44px thumb standard. Floor type at 12px, and give the
   small controls a real hit area without changing how they look. Placed LAST
   in the file so it beats the base rules above (documented cascade trap). */
@media (max-width: 1023px){
  .bunk-hero__micro{ font-size:12px; }
  .bunk-hero__micro-b{ font-size:12px; }
  .bunk-sv{ font-size:12px; }
  /* carousel dots stay 6px to look at, but carry a 44px invisible hit area */
  .bunk-hero__dot{ position:relative; }
  .bunk-hero__dot::after{ content:''; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%); }
  .bunk-hero__pause{ min-width:44px; min-height:44px; }
}
/* END_SECTION:bunk-hero */

/* START_SECTION:bunk-lab-reports (INDEX:8) */
:root{
  --bunk-bg:#13100c; --bunk-cta:#FFE100;
  --f-display:"Bebas Neue",Impact,sans-serif; --f-body:"Space Mono",ui-monospace,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive; --f-tape:"Patrick Hand","Comic Sans MS",cursive;
}
.bunk-lab{padding:40px 0;min-height:60vh}
.lab-gate{max-width:520px;margin:0 auto;padding:0 22px}
.lab-gate-card{background:#15120d;border:1px solid #2a241b;border-radius:12px;padding:28px 22px;text-align:center}
.lab-gate-h{font-family:var(--f-hand);font-weight:700;font-size:26px;margin:0 0 10px}
.lab-gate-b{font-family:var(--f-body);font-size:11.5px;line-height:1.8;color:#b6ad99;margin:0 0 18px}
.lab-gate-row{display:flex;flex-direction:column;gap:10px;align-items:center}
.lab-gate-yes{background:var(--bunk-cta,#FFE100);color:#1a1608;font-family:var(--f-body);font-weight:700;letter-spacing:.5px;font-size:12px;padding:12px 20px;border:0;border-radius:3px;cursor:pointer;transform:rotate(-1deg)}
.lab-gate-no{font-family:var(--f-body);font-size:11px;color:#8a8170;text-decoration:none;border-bottom:1px dashed #4a4233}
.lab-body{max-width:520px;margin:0 auto;padding:0 22px}
.lab-h1{font-family:var(--f-display);font-size:40px;letter-spacing:1px;margin:0 0 8px}
.lab-intro{font-family:var(--f-body);font-size:11.5px;line-height:1.8;color:#a89f8c;margin:0 0 22px}
.lab-soon{background:#15120d;border:1px dashed #3a3326;border-radius:10px;padding:22px 18px;text-align:center}
.lab-soon-h{font-family:var(--f-hand);font-weight:700;font-size:22px;color:#cfc6b2;margin:0 0 6px}
.lab-soon-b{font-family:var(--f-body);font-size:11px;line-height:1.7;color:#a89f8c;margin:0 0 14px}
.lab-request{font-family:var(--f-body);font-size:12px;letter-spacing:.4px;color:var(--bunk-cta);text-decoration:none;border-bottom:1px dashed #7a6e2e}
.lab-list{margin:20px 0 0}
.lab-row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px dashed #2a251d;padding:12px 2px;font-family:var(--f-body);font-size:11px}
.lab-batch{color:#cfc6b2;font-weight:700;display:block} .lab-prod{color:#8a8170;font-size:10px}
.lab-row-link{color:var(--bunk-cta);text-decoration:none} .lab-row-soon{color:#6f685c}
.lab-edu{font-family:var(--f-body);font-size:11.5px;line-height:1.85;color:#b6ad99;margin:22px 0 0;border-top:1px dashed #2a251d;padding-top:18px}
.lab-foot{font-family:var(--f-body);font-size:9px;letter-spacing:.3px;line-height:1.7;color:#6f685c;margin:26px 0 0}
/* END_SECTION:bunk-lab-reports */

/* START_SECTION:bunk-moods (INDEX:9) */
/* ============================================================
   bunk-moods — SHOP BY MOOD
   Mobile-first · scrapbook column 460px max · uses bunk-base tokens
   ============================================================ */

/* ── FOOLPROOF FALLBACK (identical to bunk-base.css) ──
   Keeps a black canvas + correct fonts + yellow CTA even if
   bunk-base.css fails to load → never a white/unstyled screen. */
:root{
  --bunk-bg:#13100c;
  --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806);
  --bunk-kraft:#b9a07a; --bunk-cream:#f2e6c8;
  --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347;
  --f-display:'Bebas Neue',Impact,sans-serif;
  --f-body:'Space Mono',ui-monospace,monospace;
  --f-hand:'Caveat',cursive;
  --f-tape:'Patrick Hand',cursive;
}

.bunk-moods{
  background-color: var(--bunk-bg);
  background-image: var(--bunk-bg-radial);
  padding-top: var(--pt-m, 32px);
  padding-bottom: var(--pb-m, 32px);
  position: relative;
  overflow: hidden;
}

/* ---- TRUST TICKER ---- */
.bm-ticker{
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
  background: #0a0a08;
  border-top: 1px solid #241f17;
  border-bottom: 1px solid #241f17;
  margin-bottom: 4px;
}
/* Sid 25 Jul: "there's a ticker that I don't think should be there. Remove that, and then fix
   the space between... it's too much." The moods section opened with a trust ticker that
   repeated what the hero ticker already says, pushing "Choose your Mood" 91px down the page.
   Hidden rather than deleted so it is one line to restore. Gap closed per the standing rule. */
.bm-ticker{ display: none; }
.bm-ticker + *{ margin-top: 0; }
.bm-ticker span{
  display: inline-block;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: #c9bfa8;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
  animation: bm-ticker-scroll 60s linear infinite;
  padding-right: 0;
}
@keyframes bm-ticker-scroll{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}
@media (prefers-reduced-motion: reduce){
  .bm-ticker span{ animation: none }
}
.bm-ticker:hover span{ animation-play-state: paused }

/* ---- INTRO ---- */
.bm-intro{
  padding: 20px 14px 6px;
}
.bm-heading{
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1.16;                 /* was .96 → clipped the tall 'd' / descenders of the Caveat script */
  max-width: 100%;
  margin: 0 0 2px;
  padding: 0.06em 0.2em 0.14em;      /* room for ascenders/descenders + the -2deg tilt */
  transform: rotate(-2deg);
  display: inline-block;
  overflow: visible;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.bm-subhead{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .4px;
  color: #c9bfa8;
  margin: 1px 0 6px;   /* hug the heading as a tight subline — no dead space (Sid) */
}

/* ---- COLUMN WIDTH ---- */
.bm-col{
  position: relative;
}
.bm-col--narrow{ width: min(460px, 100%); margin: 0 auto; }
.bm-col--wide   { width: min(720px, 100%); margin: 0 auto; }
.bm-col--full   { width: 100%; }

/* ============================================================
   MOOD CARD
   ============================================================ */
.bm-mood{
  position: relative;
  margin: 48px 14px 0;
  cursor: pointer;
}

/* ---- POLAROID ---- */
.bm-polwrap{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 12px 0 0;
}
.bm-pol{
  position: relative;
  width: 92%;
  /* bunk-paper supplies the cream gradient + grit ::before */
  padding: 6px 6px 54px;   /* bottom band hosts the in-flow fact marker + straddling tape */
  transform: rotate(-1.5deg);
  box-shadow: 0 13px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---- TOP TAPE — overlaps and pins the photo edge ---- */
.bm-tape-top{
  position: absolute;
  z-index: 8;
  top: -13px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-size: 13px;
  letter-spacing: 1px;
  opacity: .95;
  /* box-shadow from .bunk-tape */
}

/* ---- SLIDESHOW WINDOW ---- */
.bm-win{
  /* Sid 25 Jul: same conversion as the format cards — copy the STORY's mechanism. The browser
     scrolls a real strip (scroll-snap), so a finger, a trackpad and a mouse all work with no
     JS input handling. See .bs-ctrack in bunk-story.liquid. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 22px rgba(0,0,0,.5);
  cursor: grab;
  z-index: 2;   /* lift above .bunk-paper grit ::before */
  /* same gutter fix as the format cards — do not let the strip grow past its aspect box */
  overflow-y: clip;
  height: auto;
  flex: none;
  -ms-overflow-style: none;
}
.bm-track{
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.bm-track::-webkit-scrollbar{ display:none; width:0; height:0 }
.bm-slide{ min-height:0; align-self:stretch; }
.bm-slide img, .bm-slide .bunk-photo{ display:block; width:100%; height:100%; object-fit:cover; }
.bm-slide{
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  opacity: 1;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.bm-slide--on{
  opacity: 1;
  z-index: 2;                    /* incoming rides on top */
}
/* outgoing holds opaque beneath while the incoming fades in — dissolve, never a dip (Sid 11 Jul) */
.bm-slide--prev{
  opacity: 1;
  z-index: 1;
  transition: none;
}
.bm-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Enforce 3:4, no letterbox */
}
@media (prefers-reduced-motion: reduce){
  .bm-slide{ transition: none }
}

/* ---- DOTS ---- */
.bm-dots{
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  display: flex;
  gap: 5px;
  justify-content: center;
  z-index: 6;
}
.bm-dot{
  width: 18px; height: 18px;
  padding: 6px;
  background-clip: content-box;
  pointer-events: auto;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 2px rgba(0,0,0,.6);
  display: block;
}
.bm-dot--on{
  background: #fff;
}

/* ---- PRODUCT-FACT MARKER — handwritten dark ink ON THE CREAM border (Sid 11 Jul):
        in-flow below the photo window, inside the polaroid's cream band ---- */
.bm-fact__hook{
  display: block;
  font-family: var(--f-hand);
  font-weight: 700;
  /* Sid 26 Jul: 28px was too big — match the by-format card hooks ("The Everyday Box",
     "The Connoisseur's Drops") exactly, which are .bunk-format__hook at 24px. */
  font-size: 24px;
  line-height: 1.05;
  color: #241f17;
  margin-bottom: 6px;
}
.bm-fact__cap{ font-size: 1.32em; line-height: 0.9; }
.bm-fact__line{ display:block; }
.bm-fact__line + .bm-fact__line{ margin-top: 3px; }
.bm-fact strong{ font-weight: 700; color: #16120c; }
.bm-fact{
  position: relative;
  text-align: center;
  /* Sid 25 Jul: "choose your mood polaroid text is not readible... have that in the diff font
     like on mass bunk in by formats, same font, keep that consistent on the home page.
     the title can be hand written big, details and sub lines in that other font".
     So: the FIRST clause becomes the handwritten hook (Caveat 22px, like .bunk-format__hook at 24),
     the rest becomes Space Mono 13px/600 (like .bunk-format__line), key phrases bolded. */
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.45;
  color: #241f17;
  z-index: 3;
  margin: 10px 0 0;
  padding: 0 10px;
  pointer-events: none;
  transform: rotate(-.6deg);
  min-height: 1.3em;               /* rotating lines vary — hold the band height steady */
}

/* ---- GRADIENT OVERLAY ---- */
.bm-photo-grad{
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(0deg, rgba(0,0,0,.35), transparent 42%);
  pointer-events: none;
}

/* ---- SHOP CTA TAPE (bottom edge, expands the accordion) ---- */
.bm-shoptape{
  position: absolute;
  z-index: 8;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.8deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 24px 9px;
  font-size: 19px;
  letter-spacing: 2.5px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.bm-shoptape:focus-visible{
  outline: 2px solid var(--bunk-cta);
  outline-offset: 3px;
}

/* fingerprint SVG embedded in tapes */
.bm-fp{
  height: 1.4em;
  width: auto;
  vertical-align: -.38em;
  margin: 0 1px 0 4px;
  transform: rotate(-13deg);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.32));
  flex-shrink: 0;
}
.bm-fp--sm{
  height: 1.9em;            /* life-size press cue on the real ADD TO BAGGY chip (Sid: thumbprint bigger) */
  margin: 0 -2px 0 5px;
}

/* reveal-tape chevron (▾) — the accordion affordance; flips up when the card is open */
.bm-chevron{
  display: inline-block;
  width: 9px; height: 9px;
  margin: -3px 0 0 8px;
  border-right: 2.6px solid currentColor;
  border-bottom: 2.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform .28s ease;
  flex-shrink: 0;
}
.bm-shoptape[aria-expanded="true"] .bm-chevron{ transform: translateY(3px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce){ .bm-chevron{ transition: none; } }

/* ---- LEGAL NOTE (Social mood) ---- */
.bm-recnote{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  color: #a8a190;
  text-align: center;
  margin: 30px 16px 0;
  text-transform: uppercase;
}

/* ============================================================
   FORMAT LADDER (accordion)
   ============================================================ */
.bm-ladder{
  margin: 0 4px;
  overflow: hidden;
  /* JS toggles 'hidden' attr; CSS drives the height animation */
  max-height: 0;
  transition: max-height .32s ease;
}
/* When JS removes hidden and adds .is-open: */
.bm-ladder.is-open{
  max-height: 900px;
}
@media (prefers-reduced-motion: reduce){
  .bm-ladder, .bm-ladder.is-open{ transition: none }
}

.bm-lrail{
  position: relative;
  padding: 14px 2px 4px 18px;
  margin-top: 8px;
}
.bm-lrail::before{
  content: "";
  position: absolute;
  left: 7px; top: 18px; bottom: 34px;
  border-left: 2px dashed #3a3324;
}

/* ---- CHIP ---- */
.bm-chip{
  position: relative;
  display: block;
  background: linear-gradient(180deg, #191510, #120f0a);
  border: 1px solid #2e271b;
  border-radius: 6px;
  padding: 12px 13px 11px;
  margin: 0 0 11px;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}
/* rail bullet */
.bm-chip::before{
  content: "";
  position: absolute;
  left: -15px; top: 24px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ac);
  box-shadow: 0 0 0 3px #120f0a, 0 0 7px var(--ac);
}

.bm-chip-header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.bm-chip-name{
  font-family: var(--f-display);
  font-size: 21px;
  letter-spacing: 1px;
  color: #f0ece2;
}
.bm-chip-price{
  font-family: var(--f-display);
  font-size: 23px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.bm-chip-from{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .5px;
  vertical-align: 1px;
  margin-right: 1px;
  opacity: .8;
}
.bm-chip-desc{
  font-family: var(--f-body);
  font-size: 12px;
  color: #cdc3aa;
  line-height: 1.5;
  margin: 6px 0 2px;
  letter-spacing: .2px;
}
.bm-chip-sub{
  font-family: var(--f-body);
  font-size: 11.5px;
  color: #d2c8b2;
  margin: 5px 0 0;
  line-height: 1.5;
  letter-spacing: .1px;
}
.bm-chip-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  flex-wrap: wrap;
  gap: 6px;
}
.bm-chip-badge{
  display: inline-block;
  font-family: var(--f-tape);
  font-size: 11px;
  letter-spacing: .3px;
  padding: 3px 9px;
  transform: rotate(-2deg);
  clip-path: polygon(3% 12%, 97% 0, 100% 88%, 1% 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.bm-chip-foot .bm-chip-shop{
  display: inline-flex;
  position: relative;        /* specificity 0-0-2-0 beats foundation .bunk-tape{position:absolute} (loads later) → back IN-FLOW so margin-left:auto pushes it RIGHT */
  align-items: center;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 3px 11px 4px;
  margin-left: auto;
  transform: rotate(-1.6deg);
  border: none;
  cursor: pointer;
}
.bm-chip-shop:focus-visible{
  outline: 2px solid #1a1a1a;
  outline-offset: 2px;
}

/* ---- GHOST ---- */
.bm-ghost{
  position: relative;
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 1px;
  color: #6b6457;
  padding: 4px 0 6px 2px;
  margin: 0;
}
.bm-ghost::before{
  content: "";
  position: absolute;
  left: -13px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1.5px dashed #4a4233;
  background: transparent;
}

/* ============================================================
   COMING SOON
   ============================================================ */
.bm-soon-section{
  margin-top: 30px;
  text-align: center; /* D75 (Sid 25 Jul): "center more moods and the line — everything is centered" */
}
.bm-soon-head{
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 2px; /* D75: left offset dropped — centered like the rest */
  transform: rotate(-1.5deg);
  display: inline-block;
}
.bm-soon-sub{
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: .5px;
  color: #7d756a;
  margin: 3px 0 12px 24px;
}
.bm-soon-row{
  display: flex;
  gap: 10px;
  padding: 0 16px 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bm-soon-row::-webkit-scrollbar{ display: none }

.bm-neg{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  transform: rotate(var(--r, 0deg));
}
.bm-neg-img{
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #2a241b;
}
.bm-neg-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) brightness(.30) contrast(.85) blur(.6px);
}
.bm-neg-img--placeholder{
  background: #1a1611;
}
.bm-neg-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.55));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.bm-neg-name{
  font-family: var(--f-hand);
  font-weight: 700;
  font-size: 21px;
  line-height: 1;
  text-align: center;
  color: #cfc8ba;
  padding: 0 6px;
}
.bm-neg-soon{
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 2px;
  color: #8a8170;
  border: 1px solid #4a4233;
  padding: 2px 6px;
  border-radius: 2px;
}

/* ============================================================
   FLOATING BAGGY FAB
   ============================================================ */
.bm-fab{
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bunk-cta);
  color: #1a1a1a;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 1.5px;
  padding: 11px 15px;
  border-radius: 26px;
  box-shadow: 0 6px 20px rgba(0,0,0,.55);
  cursor: pointer;
}
.bm-fab-ct{
  background: #1a1a1a;
  color: var(--bunk-cta);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: var(--f-body);
  font-weight: 700;
}

/* ============================================================
   TOAST
   ============================================================ */
.bm-toast{
  position: fixed;
  left: 50%; bottom: 74px;
  transform: translateX(-50%) translateY(18px);
  z-index: 70;
  background: #15120d;
  color: var(--bunk-cta);
  border: 1px solid #5a4d18;
  padding: 9px 15px;
  border-radius: 8px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11.5px;
  opacity: 0;
  transition: opacity .28s, transform .28s;
  pointer-events: none;
  white-space: nowrap;
}
.bm-toast--show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .bm-toast{ transition: none }
}

/* ============================================================
   TABLET  750 – 989
   ============================================================ */
@media (min-width: 750px) and (max-width: 989px){
  .bm-col--narrow{ width: min(560px, 96%); }
  .bunk-moods{
    padding-top: calc(var(--pt) * .8);
    padding-bottom: calc(var(--pb) * .8);
  }
  .bm-mood{ margin-left: 20px; margin-right: 20px; }
}

/* ============================================================
   DESKTOP  ≥ 990
   ============================================================ */
/* DESKTOP (Sid, 2 Jul): a grid of 3 postcards across — each mood keeps its full
   polaroid card language; non-card rows (intro / coming-soon) span the row. */
@media (min-width: 1024px){
  /* 18 Jul FIX (Sid: "i want them 3 poloroids side by side"): match the 11-Jul APPROVED
     .dsm-grid — a 3-COLUMN GRID that never wraps. The old flex `flex:0 1 440px` wrapped the
     3rd polaroid at ~1440 (container 94% < 3×440 + 2×56 = 1432). The prior "ported verbatim
     from .dsm-grid" comment was FALSE — the approved uses grid, this used flex. Now true.
     bak: bunk-moods.liquid.PRE-3ACROSS-18jul-bak */
  .bm-col.bm-col--narrow{
    width: min(1360px, 94%);   /* .dsm-grid max-width */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px;
    padding: 0 32px;
    align-items: start;
    margin: 0 auto;
  }
  .bm-col.bm-col--narrow > .bm-mood{
    min-width: 0;
    margin: 0;
    position: relative;
    cursor: pointer;
  }
  .bm-col.bm-col--narrow > :not(.bm-mood){
    grid-column: 1 / -1;       /* intro + coming-soon span the full row (was flex-basis:100%) */
  }
  /* taped-in stagger — never a rigid 3-up strip (.dsm-card:nth-child) */
  .bm-col.bm-col--narrow > .bm-mood:nth-child(2){ margin-top: 34px; }
  .bm-col.bm-col--narrow > .bm-mood:nth-child(3){ margin-top: 12px; }

  /* per-card resting tilt + hover-settle (.dsm-polwrap / .dsm-card:hover) — desktop-only,
     pointer interaction; mobile has no hover so this never fires there */
  .bm-mood[data-mood="flow"]   .bm-polwrap{ transform: rotate(-1.1deg); }
  .bm-mood[data-mood="social"] .bm-polwrap{ transform: rotate(.6deg); }
  .bm-mood[data-mood="disc"]   .bm-polwrap{ transform: rotate(-.5deg); }
  .bm-polwrap{ transition: transform .25s ease; }
  .bm-mood:hover .bm-polwrap,
  .bm-mood:focus-within .bm-polwrap{ transform: rotate(0deg) translateY(-4px); }
  @media (prefers-reduced-motion: reduce){ .bm-polwrap{ transition: none; } }

  /* polaroid — photo dominates, thinner cream band below it (.dsm-pol, Sid 11 Jul) */
  .bm-pol{
    width: 100%;
    padding: 18px 18px 58px;
    border-radius: 2px;
    box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.04) inset;
  }

  /* bold upper tape headings (Sid 11 Jul #4) — modest weight/size bump, readability */
  .bm-tape-top{
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 2px;
    -webkit-text-stroke: .35px currentColor;
  }
  .bm-fact{ font-size: 20px; margin: 11px 8px 0; }

  /* dissolve layering — seamless cross-fade, no eye-flash (.dsm-slide, Sid 11 Jul) */
  .bm-slide{ transition: opacity 1.1s ease-in-out; }

  /* shop-tape geometry matched to the locked standalone (.dsm-shoptape) */
  .bm-shoptape{
    bottom: -16px;
    transform: translateX(-50%) rotate(1deg);
    font-size: 15px;
  }

  .bm-recnote{ margin: 40px 0 0; }

  /* ---- See-More reveal / ladder chips — desktop styling ported verbatim from
     .dsm-ladder / .dsm-chip (locked standalone); mobile's rail+bullet timeline
     treatment stays untouched below 1024px ---- */
  .bm-ladder{ margin-top: 40px; }
  .bm-lrail{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin-top: 0;
  }
  .bm-lrail::before{ content: none; }   /* no dashed rail line on desktop */

  .bm-chip{
    background: linear-gradient(168deg,#1c1913,#141109 60%);
    border: 1px solid rgba(255,255,255,.06);
    border-left: 3px solid var(--ac);
    border-radius: 3px;
    padding: 16px 18px;
    margin: 0;
    box-shadow: none;
  }
  .bm-chip::before{ content: none; }   /* no rail bullet on desktop */

  .bm-chip-name{ font-size: 20px; letter-spacing: .5px; }
  .bm-chip-price{ font-size: 22px; letter-spacing: .5px; }
  .bm-chip-from{ font-size: 11px; margin-right: 2px; opacity: 1; color: #9a8f74; }
  .bm-chip-desc{ font-family: var(--f-hand); font-size: 17px; color: #d7cfbe; margin: 6px 0 2px; line-height: 1.25; }
  .bm-chip-sub{ font-size: 12px; color: #9a8f74; margin: 4px 0 12px; letter-spacing: .3px; }
  .bm-chip-badge{
    font-family: var(--f-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    transform: none;
    clip-path: none;
    box-shadow: none;
  }
  .bm-chip-foot .bm-chip-shop{
    font-size: 13px;
    padding: 8px 16px;
    transform: none;
    letter-spacing: normal;
  }

  .bm-ghost{
    text-align: center;
    font-size: 11px;
    color: #5c5546;
    letter-spacing: .6px;
    padding: 4px 0 0;
  }
  .bm-ghost::before{ content: none; }   /* no dashed bullet on desktop */
  /* Sid 18 Jul: fix the "more feelings soon" row on desktop — it kept mobile's left-indent + a 160px card cap,
     so it sat indented with dead space on the right. Zero the indent + let the 3 cards flex evenly to the grid width. */
  .bm-soon-head{ margin-left: 0; font-size: 30px; }
  .bm-soon-sub{ margin-left: 0; }
  .bm-soon-row{ padding: 0; overflow-x: visible; flex-wrap: nowrap; gap: 24px; }
  .bm-neg{ max-width: none; }
}
@media (min-width: 990px){
  .bunk-moods{
    padding-top: var(--pt);
    padding-bottom: var(--pb);
  }
  .bm-col--narrow{ width: min(460px, 100%); }
  .bm-heading{
    font-size: clamp(42px, 4vw, 58px);
  }
  /* wider layouts can show 2 mood cards side-by-side */
  .bm-col--wide .bm-mood,
  .bm-col--full .bm-mood{
    display: inline-block;
    vertical-align: top;
    width: calc(50% - 20px);
    margin: 24px 10px 0;
  }
  /* (Sid 18 Jul) .bm-soon-row / .bm-neg desktop rules moved up into the 1024px block so they aren't overridden by this later 990px block */
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) ═════════════════════════ */
@media (max-width: 1023px){
  .bm-chip-from, .bm-ghost, .bm-soon-sub, .bm-chip-badge, .bm-neg-soon,
  .bm-chip-sub, .bm-recnote, .bm-fab-ct{ font-size:12px; }
  .bm-mood .bm-shoptape{ min-height:44px; padding-top:11px; padding-bottom:12px; box-sizing:border-box; }

  /* Sid 26 Jul: "three lines is looking too bad as sublines... you can take it further than the
     line above to fit it better." So the detail lines run WIDER than the handwritten hook above
     them — the hook is pulled in deliberately so the contrast reads as hand-laid, not accidental.
     Copy was also trimmed in templates/index.json (the widest line needed 374px inside a 334px
     card, so width alone could not land it without going under the 12px readability floor). */
  .bm-fact{ padding-left:0; padding-right:0; }
  .bm-fact__line{ margin-left:-6px; margin-right:-6px; }
  .bm-fact__hook{ max-width:250px; margin-left:auto; margin-right:auto; }
}
/* END_SECTION:bunk-moods */

/* START_SECTION:bunk-pdp (INDEX:10) */
/* FOOLPROOF FALLBACK (identical to bunk-base.css) — black canvas + fonts + CTA even if base CSS is missing */
:root{ --bunk-bg:#13100c; --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806); --bunk-kraft:#b9a07a; --bunk-cream:#f2e6c8; --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347; --f-display:'Bebas Neue',Impact,sans-serif; --f-body:'Space Mono',ui-monospace,monospace; --f-hand:'Caveat',cursive; --f-tape:'Patrick Hand',cursive; }
.bunk-pdp{position:relative;overflow:hidden;background:var(--bunk-bg);
  padding-top:var(--pt);padding-bottom:96px}
.bunk-pdp.bunk-pdp--bg-kraft{background:var(--bunk-kraft)}
.bunk-pdp.bunk-pdp--bg-custom{background:var(--pdp-bg,var(--bunk-bg))}
.bunk-pdp__col{width:var(--col,460px);max-width:100vw;margin:0 auto;position:relative;
  background:var(--bunk-bg-radial);min-height:100vh}
.bunk-pdp--w-narrow .bunk-pdp__col{--col:460px}
.bunk-pdp--w-wide .bunk-pdp__col{--col:560px}
.bunk-pdp--w-full .bunk-pdp__col{--col:100vw}

/* ── header ── */
/* 17 Jul - HIDDEN. This bar duplicated the global header on every PDP: two burgers, two bags,
   the product name twice. Measured on the live render, both surfaces (Fable called it "two
   headers"). The locked design has exactly ONE header: logo + burger left, THE PROXY BUNK
   centred, bag right. The global bar owns that now and carries the name in CAPS via the
   understrip (D48). The visually-hidden h1 below still ships for SEO.
   Do NOT write a glob path in a CSS comment here - the slash-star closes the comment early
   and takes the rest of the stylesheet down. That mistake cost an hour today. */
.bunk-pdp__hdr{display:none !important}
.bunk-pdp__hdr--legacy{position:sticky;top:0;z-index:50;min-height:58px;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;padding:5px 13px;
  background:linear-gradient(180deg,rgba(17,14,10,.97),rgba(17,14,10,.78));
  backdrop-filter:blur(8px);border-bottom:1px solid #241f17}
.bunk-pdp__hlft{display:flex;align-items:center;gap:9px;justify-self:start}
.bunk-pdp__hrgt{display:flex;align-items:center;gap:7px;justify-self:end}
.bunk-pdp__logo{height:46px;width:auto;display:block;cursor:pointer}
.bunk-pdp__icbtn{min-width:44px;min-height:44px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;background:none;border:0;padding:0}
.bunk-pdp__ptg{justify-self:center;font-family:var(--f-display);font-weight:400;
  font-size:23px;line-height:1;white-space:nowrap;transform:rotate(-1deg);
  text-transform:uppercase;letter-spacing:2px;pointer-events:none} /* PRODUCT NAME in caps on the bar — Sid 15 Jul (was lowercase page-tag); matches desktop */

/* ── mood dots ── */
.bunk-pdp__moods{display:flex;gap:9px;justify-content:center;align-items:center;
  flex-wrap:wrap;padding:13px 18px 2px}
.bunk-pdp__mlead{font-family:var(--f-body);font-size:9px;letter-spacing:1.4px;
  color:#7d7565;text-transform:uppercase;width:100%;margin-bottom:2px;text-align:center}
.bunk-pdp__mlead-m{display:none}/* mobile-only "choose your strain" label — swapped in inside the max-width:1023px block */
.bunk-pdp__mdot{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);
  font-size:10.5px;color:#8a8273;border:1px solid #2c2820;border-radius:20px;
  padding:4px 11px 4px 8px;transition:.2s;opacity:.5}
.bunk-pdp__d{width:10px;height:10px;border-radius:50%}
.bunk-pdp__mdot.is-on{opacity:1;border-color:var(--ac);color:#e7dfcd;background:rgba(255,255,255,.04)}
/* D50i: OIL mood dot stacks its strain beneath the mood (Super OG ↔ Disconnect · Super Lemon Haze ↔ Flow) */
.bunk-pdp__mdinner{display:inline-flex;align-items:center;gap:6px}
.bunk-pdp__mdot.has-strain{flex-direction:column;align-items:center;gap:2px;padding:6px 13px;border-radius:14px}
.bunk-pdp__mstrain{font-family:var(--f-body);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#8a8273}
.bunk-pdp__mdot.has-strain.is-on .bunk-pdp__mstrain{color:#cbb98a}

/* ── Sid 18 Jul (Option 1): each mood dot sits ON TOP of its respective flavour. The moods
   row + the flavour seg become two stacked 3-column grids of equal width (344px = .is-three),
   centred on the same axis, so dot[i] caps flavour[i]. Gummy only (has mood blocks); the oil
   keeps its strain/size toggles. JS untouched (the dots still light via the existing sync). ── */
.bunk-pdp__moods--paired{display:grid;grid-template-columns:repeat(3,1fr);width:344px;max-width:100%;
  margin:0 auto;padding:13px 0 0;gap:7px 0;align-items:end;justify-items:center}
.bunk-pdp__moods--paired .bunk-pdp__mlead{grid-column:1/-1;justify-self:center;margin-bottom:5px}
.bunk-pdp__moods--paired .bunk-pdp__mdot{margin:0}
/* oil: 2 dots over the 2 strain pills (matches .bunk-pdp__seg.is-two width) — Sid 18 Jul */
.bunk-pdp__moods--paired.is-two{grid-template-columns:repeat(2,1fr);width:300px}
.bunk-pdp__pills--flav{padding-top:4px}

/* ── flavour pills ── */
.bunk-pdp__form{margin:0}
.bunk-pdp__pills{padding:14px 18px 6px;text-align:center}
.bunk-pdp__seglab{font-family:var(--f-body);font-size:12px;letter-spacing:1.6px;color:#7d7565;margin:0 0 7px}
.bunk-pdp__seg{display:inline-flex;border:1px solid #3a342a;border-radius:3px;overflow:hidden;margin:0 auto;max-width:360px}
.bunk-pdp__seg.is-three{width:344px}.bunk-pdp__seg.is-two{width:300px}
.bunk-pdp__pill{flex:1;background:transparent;border:0;border-right:1px solid #2a251d;
  color:#b8b0a0;font-family:var(--f-body);font-weight:700;font-size:11.5px;letter-spacing:.4px;
  padding:9px 4px;cursor:pointer;line-height:1.25}
.bunk-pdp__seg.is-three .bunk-pdp__pill{font-size:10.5px;padding:9px 2px}
.bunk-pdp__pill:last-child{border-right:0}
.bunk-pdp__pill small{display:block;font-weight:400;font-size:14px;letter-spacing:.3px;color:#7d7565;margin-top:2px}
.bunk-pdp__pill.is-on{background:rgba(255,255,255,.07);color:#f0ead8}
.bunk-pdp__pill.is-on small{color:#cfc7b6}
.bunk-pdp__seg.is-gold .bunk-pdp__pill.is-on{background:rgba(255,213,0,.10)}
.bunk-pdp__pill[data-available="false"]{opacity:.4;text-decoration:line-through}

/* ── polaroid ── */
.bunk-pdp__phero{position:relative;margin:8px 14px 2px}
/* 24 Jul (Sid: "extend the polaroid so it fits and doesn't hide") — the chin was a FIXED 162px and
   the caption band absolute, so longer copy clipped over the photo + under the tape. Now the caption
   is IN-FLOW: the polaroid extends itself to fit any content, both surfaces. */
.bunk-pdp__ppol{position:relative;width:92%;margin:0 auto;padding:7px 7px 44px;
  transform:rotate(-1deg);box-shadow:0 14px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.bunk-pdp__ppol::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 40px rgba(120,98,60,.16);
  background:radial-gradient(120% 80% at 50% 22%,rgba(0,0,0,0),rgba(90,70,40,.10))}
.bunk-pdp__pwin{position:relative;z-index:2;width:100%;aspect-ratio:3/4;overflow:hidden;
  background:#000;box-shadow:inset 0 0 22px rgba(0,0,0,.5)}
.bunk-pdp__gtrack{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bunk-pdp__gtrack::-webkit-scrollbar{display:none}
.bunk-pdp__gslide{flex:0 0 100%;height:100%;scroll-snap-align:center;scroll-snap-stop:always}
.bunk-pdp__gslide .bunk-photo,.bunk-pdp__gslide img,.bunk-pdp__gslide svg{
  width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;display:block;pointer-events:none}
.bunk-pdp__gdots{position:absolute;left:0;right:0;bottom:9px;z-index:4;display:flex;gap:5px;
  justify-content:center;pointer-events:none}
.bunk-pdp__gdot{width:16px;height:16px;padding:5px;background-clip:content-box;cursor:pointer;border-radius:50%;background:rgba(255,255,255,.45);
  box-shadow:0 0 3px rgba(0,0,0,.7);transition:.2s}
.bunk-pdp__gdot.is-on{background:#fff;background-clip:content-box;width:17px;height:17px}
.bunk-pdp__swipehint{position:absolute;right:9px;bottom:7px;z-index:4;font-family:var(--f-body);
  font-size:8px;letter-spacing:.6px;color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}

/* tagline tape on the polaroid */
.bunk-pdp__ptape{top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);
  padding:6px 20px;font-size:16px;letter-spacing:1.4px;opacity:.96}

/* marker band: desc + price + dose */
.bunk-pdp__pmk{position:relative;margin:12px 6px 0;text-align:center;z-index:3}
.bunk-pdp__phk{position:relative;z-index:3;font-family:var(--f-hand);font-weight:700;
  font-size:21.5px;line-height:1.16;color:#241f17;margin:0 auto 2px;max-width:264px;
  transform:rotate(-.6deg);text-wrap:balance}
.bunk-pdp__pprice{margin:7px 0 0}
.bunk-pdp__pricerow{display:flex;align-items:center;justify-content:center;gap:9px}
.bunk-pdp__price{font-family:var(--f-display);font-size:43px;line-height:.84;letter-spacing:1px}
.bunk-pdp__ptag .bunk-dtag{font-size:9px;letter-spacing:1px;padding:2px 7px;vertical-align:middle}
.bunk-pdp__ratio{font-family:var(--f-body);font-size:10.5px;letter-spacing:.4px;color:#4a4133;margin:3px 0 0;text-align:center}
.bunk-pdp__pdose{color:#473d2b;font-size:11.5px;margin:3px 0 0;font-family:var(--f-body)}
.bunk-pdp__pdose .bunk-hl{text-shadow:none}

/* polaroid corner tape + ADD tape */
.bunk-pdp__pcorner{position:absolute;z-index:8;bottom:-9px;right:14px;width:72px;height:24px;
  transform:rotate(40deg);background:linear-gradient(180deg,rgba(230,216,182,.94),rgba(201,185,147,.86));
  opacity:.95;clip-path:polygon(3% 12%,97% 0,100% 88%,1% 100%);
  box-shadow:0 2px 7px rgba(0,0,0,.45),inset 0 2px 3px rgba(255,255,255,.34),inset 0 -3px 4px rgba(0,0,0,.16)}
/* ADD tape straddles the polaroid bottom edge — ~2/3 on the cream, ~1/3 on black (matches the homepage tape) */
.bunk-pdp__pshopwrap{position:absolute;z-index:8;bottom:-14px;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
/* D75 (Sid, third ask): PROPERLY broad — and this time it lands, because the 2-class scope BEATS the
   global .bunk-tape{padding:6px 18px} in bunk-foundation.css that silently crushed every earlier pass. */
.bunk-pdp__pshopwrap .bunk-pdp__pshoptape{position:relative;display:inline-block;pointer-events:auto;transform:rotate(-1.8deg);
  padding:17px 40px 18px;min-width:84%;text-align:center;font-size:21px;letter-spacing:2px;border:0;cursor:pointer;opacity:.97;
  clip-path:polygon(2% 18%,98% 2%,99% 86%,1% 98%)}

/* thumbs */
.bunk-pdp__thumbs{display:flex;gap:7px;overflow-x:auto;margin-top:36px;padding:12px 16px 4px;scrollbar-width:none}
.bunk-pdp__thumbs::-webkit-scrollbar{display:none}
.bunk-pdp__th{flex:none;width:50px;height:64px;padding:0;border-radius:2px;opacity:.5;cursor:pointer;
  border:2px solid transparent;transition:.2s;background:none}
.bunk-pdp__th img{width:100%;height:100%;object-fit:cover;display:block;border-radius:1px}
.bunk-pdp__th.is-on{opacity:1;border-color:var(--ac)}
.bunk-pdp__galct{font-family:var(--f-body);font-size:9px;letter-spacing:1px;color:#6f685c;text-align:center;margin:8px 0 0}

/* ── consult / story / facts / details ── */
.bunk-pdp__consult,.bunk-pdp__doseexp{text-align:center;font-family:var(--f-body);color:#8a8273}
.bunk-pdp__consult{font-size:9.5px;letter-spacing:.4px;margin-top:10px}
/* D4 psychoactive line (mobile) — verbatim on all products; amber (stronger) / green (15mg gentler) */
.bunk-pdp__psycho{font-family:var(--f-body);font-size:11px;line-height:1.5;letter-spacing:.2px;color:#e7cf9a;margin:9px auto 0;max-width:340px;padding:8px 12px;background:rgba(255,207,112,.07);border-left:2px solid #d9a441;border-radius:3px;text-align:left}
/* D68 (24 Jul) — "terpenes" suffix on ft. lines: small, silver, asterisk-like · D72 readability: 9.5px */
.bunk-pdp__terp{font-size:9.5px;color:#a89f8d;letter-spacing:.35px;vertical-align:super;text-transform:lowercase}
/* Sid 26 Jul: the formulation ratio, handwritten, in brackets after the terpenes */
.bunk-pdp__ratioh{font-family:var(--f-hand);font-weight:700;font-size:1.25em;letter-spacing:.5px;color:inherit}
/* D67 (24 Jul) — the intention line: silver system ink, sits under the heads-up */
.bunk-pdp__medline{font-family:var(--f-body);font-size:10.5px;line-height:1.55;letter-spacing:.25px;color:#cfc7b6;margin:8px auto 0;max-width:340px;text-align:left}
.bunk-pdp__psycho-k{font-family:var(--f-body);font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#d9a441;margin-right:6px}
.bunk-pdp__psycho.is-soft{color:#cfe0b0;background:rgba(122,176,74,.08);border-left-color:#6f9b3f}
.bunk-pdp__psycho.is-soft .bunk-pdp__psycho-k{color:#8bbf5a}
.bunk-pdp__howto{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px 9px;margin:16px auto 0;max-width:360px}
.bunk-pdp__howstep{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-body);font-size:10px;letter-spacing:.3px;color:#b9bcc2}
.bunk-pdp__hownum{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #5a564c;border-radius:50%;font-size:9px;color:#d8d3c6;flex:0 0 auto}
.bunk-pdp__howarrow{color:#6a6052;font-size:11px}
.bunk-pdp__doseexp{font-size:9.5px;font-style:italic;color:#8f8676;line-height:1.5;max-width:320px;margin:8px auto 9px}
.bunk-pdp__story{font-family:var(--f-body);font-size:12px;line-height:1.95;color:#cfc7b6;max-width:344px;margin:22px auto 0;padding:0 22px;text-align:center}
/* D50a: per-flavour DYNAMIC description — sits near the price, swaps on pick */
.bunk-pdp__doselead{display:none;font-family:var(--f-body);font-size:13px;letter-spacing:.4px;color:#d7cfbc;text-align:center;margin:24px auto 0}
.bunk-pdp__flavdesc{font-family:var(--f-body);font-size:12.5px;line-height:1.85;color:#d7cfbc;max-width:352px;margin:14px auto 0;padding:0 20px;text-align:center;transition:opacity .2s ease}
/* D50a: strain card lights up with the picked flavour/strain */
.bunk-pdp__straincard{transition:opacity .25s ease,box-shadow .25s ease,transform .25s ease}
.bunk-pdp__straincard.is-active{box-shadow:0 0 0 1px var(--sc),0 8px 22px rgba(0,0,0,.42);transform:translateY(-2px)}
.bunk-pdp__strainrow:has(.bunk-pdp__straincard.is-active) .bunk-pdp__straincard:not(.is-active){opacity:.5}
.bunk-pdp__facts{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;padding:14px 18px 0;max-width:380px;margin:0 auto}
.bunk-pdp__fact{font-family:var(--f-body);font-size:10px;letter-spacing:.3px;color:#cbc3b2;
  border:1px solid #312b22;border-radius:2px;padding:6px 9px;background:rgba(0,0,0,.2)}
.bunk-pdp__details{max-width:344px;margin:20px auto 0;padding:0 22px}
.bunk-pdp__dh2{font-family:var(--f-hand);font-weight:700;font-size:23px;text-align:center;margin:0 0 9px}
.bunk-pdp__drow{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed #2a251d;padding:8px 2px;font-family:var(--f-body);font-size:11px}
.bunk-pdp__dk{color:#7d7565;letter-spacing:1px;text-transform:uppercase;font-size:9px;align-self:center}
.bunk-pdp__dv{color:#d3cbba;text-align:right}
/* Sid 18 Jul: ingredient + manufacturer rows stack full-width (long declarations read badly right-aligned in a narrow column) */
.bunk-pdp__drow--ing,.bunk-pdp__drow--mfr{flex-direction:column;gap:5px}
.bunk-pdp__drow--ing .bunk-pdp__dv,.bunk-pdp__drow--mfr .bunk-pdp__dv{text-align:left;line-height:1.6;color:#c8c0af}
.bunk-pdp__drow--mfr .bunk-pdp__dv{font-size:10.5px;color:#a49c8b}
.bunk-pdp__coa{display:block;text-align:center;font-family:var(--f-body);font-size:10px;letter-spacing:.5px;
  color:#cbb96a;text-decoration:none;margin:12px 0 0;border:1px solid #4a3f1e;border-radius:3px;padding:9px}
/* D2 strain comparison (mobile) — ported from desktop; scrapbook cards, stack on phones, side-by-side ≥600 */
.bunk-pdp__strains{max-width:360px;margin:26px auto 0;padding:0 22px}
.bunk-pdp__strainhead{font-family:var(--f-hand);font-weight:700;font-size:25px;letter-spacing:.3px;color:#f2e6c8;text-align:center;margin:0 0 3px;transform:rotate(-1deg)}
.bunk-pdp__strainsub{font-family:var(--f-body);font-size:10px;line-height:1.5;letter-spacing:.3px;color:#9a8f74;text-align:center;margin:0 0 15px}
.bunk-pdp__strainrow{display:flex;flex-direction:column;gap:10px}
.bunk-pdp__straincard{background:linear-gradient(168deg,#1c1913,#141109 60%);border:1px solid rgba(255,255,255,.06);border-top:3px solid var(--sc);border-radius:3px;padding:15px 16px}
.bunk-pdp__straintag{display:inline-block;font-family:var(--f-body);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--sctext,#12100b);background:var(--sc);padding:3px 10px;border-radius:999px}
.bunk-pdp__strainname{font-family:var(--f-display);font-size:26px;letter-spacing:.5px;color:#f2e6c8;margin:9px 0 2px}
.bunk-pdp__strainhd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bunk-pdp__strainhd .bunk-pdp__strainname{margin:0}
.bunk-pdp__strainmood{font-family:var(--f-body);font-size:10.5px;letter-spacing:.4px;color:var(--sc);filter:brightness(1.45);margin:0 0 8px}
.bunk-pdp__strainnote{font-family:var(--f-body);font-size:11.5px;line-height:1.65;color:#cdc4ad;margin:0}
/* Sid 18 Jul (gummy "two strains, three characters" — Option C style): hero line + aroma per card, red explainer below */
.bunk-pdp__strainhero{font-family:var(--f-body);font-size:11px;line-height:1.45;color:#e7dec9;margin:0 0 6px}
.bunk-pdp__strainaroma{font-family:var(--f-body);font-size:10px;letter-spacing:.3px;color:var(--sc);filter:brightness(1.85);margin:0} /* D72 readability: SLH green read dim on dark (Sid flag) — brightness 1.4→1.85, 9.5→10px */
/* D68 (24 Jul) — terp compound line + the science footer · D72 readability: 8.5→9.5px, ink lifted */
.bunk-pdp__straintrp{font-family:var(--f-body);font-size:9.5px;letter-spacing:.35px;color:#a89f8d;margin:5px 0 0}
.bunk-pdp__strainsci{font-family:var(--f-body);font-size:10.5px;line-height:1.6;color:#cfc7b6;max-width:420px;margin:12px auto 0;text-align:center}
.bunk-pdp__strainexplain{font-family:var(--f-body);font-size:11px;line-height:1.7;color:#cfc7b6;max-width:400px;margin:15px auto 2px;text-align:center;min-height:3.4em;transition:opacity .16s ease}
.bunk-pdp__strainmorestrains{font-family:var(--f-body);font-size:10.5px;letter-spacing:.3px;color:#C41F00;text-align:center;margin:6px 0 0} /* bunk red — Sid 18 Jul */
.bunk-pdp__strainvs{display:none}
.bunk-pdp__strainfoot{font-family:var(--f-body);font-size:10px;line-height:1.6;color:#8f856c;text-align:center;margin:13px 0 0}
.bunk-pdp__strainfoot a{color:#f2e6c8;text-decoration:underline;text-underline-offset:3px}
@media (min-width:750px){
  .bunk-pdp__strains{max-width:560px}
  .bunk-pdp__strainrow{flex-direction:row;align-items:stretch;gap:12px}
  .bunk-pdp__straincard{flex:1 1 0}
  .bunk-pdp__strainvs{display:flex;align-items:center;font-family:var(--f-hand);font-size:20px;color:#6c6455;padding:0 2px}
}

/* ── decision-point trust: micro-strip (in cream marker band) + deep block ── */
.bunk-pdp__trustmini{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;margin-top:11px;padding:8px 10px;
  background:#1d1a14;border:1px solid #3a3326;border-radius:6px;font-family:var(--f-body);font-size:10.5px;letter-spacing:.3px;color:#cfc6b2}
.bunk-pdp__minicoa{margin-left:auto;color:var(--bunk-cta,#FFE100);text-decoration:none;border-bottom:1px dashed #7a6e2e;white-space:nowrap}
/* relocated trust line (moved out of the hero so the photo can't cover the price) — sits on the dark page below the description */
.bunk-pdp__trustrelo{max-width:344px;margin:13px auto 0;padding:0 22px;text-align:center;line-height:1.7;
  font-family:var(--f-body);font-size:11px;letter-spacing:.3px;color:#8a8273}
.bunk-pdp__trustrelo .bunk-pdp__minicoa{margin-left:0}
.bunk-pdp__trust{max-width:344px;margin:26px auto 0;padding:0 22px}
.bunk-pdp__teardiv{height:16px;margin:0 0 14px;background:repeating-linear-gradient(90deg,#2a241b 0 10px,transparent 10px 16px);opacity:.7}
.bunk-pdp__trustlbl{font-family:var(--f-hand);font-weight:700;font-size:21px;margin:0 0 12px}
.bunk-pdp__tcards{display:flex;gap:11px}
.bunk-pdp__tcard{flex:1;position:relative;background:#1b1812;border:1px solid #342e22;border-radius:8px;padding:13px 12px;
  font-family:var(--f-body);font-size:11.5px;line-height:1.4;color:#e7dfce}
.bunk-pdp__tcard:nth-child(1){transform:rotate(-1deg)} .bunk-pdp__tcard:nth-child(2){transform:rotate(.9deg)}
.bunk-pdp__tcard b{display:block;font-size:10.5px;letter-spacing:.4px;margin-bottom:3px;color:#fff}
.bunk-pdp__ttape{position:absolute;top:-7px;left:14px;width:40px;height:12px;background:#B6E03A;opacity:.85;transform:rotate(-3deg)}
.bunk-pdp__tcard:nth-child(2) .bunk-pdp__ttape{background:#F39A1F;left:auto;right:14px;transform:rotate(4deg)}
.bunk-pdp__trustdoc{font-family:var(--f-hand);font-weight:700;font-size:19px;margin:18px 0 1px}
.bunk-pdp__trustsub{font-family:var(--f-body);font-size:12.5px;color:#a89e88;letter-spacing:.3px;margin:0 0 12px}
.bunk-pdp__truste1{font-family:var(--f-body);font-size:12.5px;color:#a89e88;margin:12px 0 4px}
.bunk-pdp__trustpriv{font-family:var(--f-hand);font-size:19.5px;color:#d4cbb6;margin:2px 0 12px}
.bunk-pdp__trustret{font-family:var(--f-body);font-size:10.5px;line-height:1.5;color:#8a8273;margin:0}

/* ── modes (oil) ── */
.bunk-pdp__modes{padding:22px 22px 0;max-width:380px;margin:0 auto}
.bunk-pdp__modeh{font-family:var(--f-hand);font-weight:700;font-size:24px;text-align:center;margin:0 0 12px}
.bunk-pdp__mode{display:flex;gap:12px;align-items:center;border:1px solid #312b22;border-radius:3px;
  padding:11px 13px;margin:0 0 9px;background:rgba(0,0,0,.2)}
.bunk-pdp__micon{width:30px;height:30px;flex:none}
.bunk-pdp__mname{font-family:var(--f-display);font-size:19px;letter-spacing:.6px;color:#e7dfcd;line-height:1}
.bunk-pdp__mdesc{font-family:var(--f-body);font-size:9.5px;color:#8f8676;margin-top:3px}
.bunk-pdp__monset{margin-left:auto;font-family:var(--f-body);font-size:9.5px;color:#cbb96a;white-space:nowrap}
.bunk-pdp__cline{font-family:var(--f-body);font-size:9px;color:#6f685c;text-align:center;line-height:1.7;margin:14px auto 0;max-width:330px;padding:0 22px}

/* ── ticker ── */
.bunk-pdp__tick{position:relative;z-index:2;overflow:hidden;border-top:1px solid #1c1810;
  border-bottom:1px solid #1c1810;background:rgba(0,0,0,.18);padding:7px 0;margin-top:26px}
.bunk-pdp__run{display:inline-block;white-space:nowrap;font-family:var(--f-body);font-size:10px;
  letter-spacing:2px;animation:bunk-pdp-mq 30s linear infinite}
@keyframes bunk-pdp-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bunk-pdp__run{animation:none}}

/* ── end-slate ── */
.bunk-pdp__endslate{position:relative;z-index:2;padding:34px 26px 30px;margin-top:26px;border-top:1px solid #1d1810}
.bunk-pdp__esstamp{display:block;width:80px;height:auto;margin:0 2px 2px auto;transform:rotate(7deg);opacity:.94;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.bunk-pdp__esbody{font-family:var(--f-body);font-size:12px;line-height:1.96;color:#d7cfbe;max-width:344px;margin:4px auto 0;text-align:center}
.bunk-pdp__esbody b{color:#efe7d4;font-weight:700}

/* ── floating bag ── */
.bunk-pdp__fab{position:fixed;right:16px;bottom:74px;z-index:66;display:flex;align-items:center;gap:8px;
  background:var(--bunk-cta);color:#1a1a1a;font-family:var(--f-display);font-size:15px;letter-spacing:1.5px;
  padding:11px 15px;border-radius:26px;border:0;box-shadow:0 6px 20px rgba(0,0,0,.55);cursor:pointer}
.bunk-pdp__fabct{background:#1a1a1a;color:var(--bunk-cta);border-radius:50%;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;font-size:11px}

/* ── toast ── */
.bunk-pdp__toast{position:fixed;left:50%;bottom:140px;transform:translateX(-50%) translateY(18px);z-index:70;
  background:#15120d;color:var(--bunk-cta);border:1px solid #5a4d18;padding:9px 15px;border-radius:8px;
  font-family:var(--f-body);font-weight:700;font-size:11.5px;opacity:0;transition:.28s;pointer-events:none;white-space:nowrap}
.bunk-pdp__toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── sticky add bar ── */
.bunk-pdp__sbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(110%);
  width:var(--col,460px);max-width:100vw;z-index:60;display:flex;align-items:center;gap:10px;padding:9px 14px;
  background:linear-gradient(0deg,rgba(12,10,7,.99),rgba(12,10,7,.93));border-top:1px solid #2a241b;
  backdrop-filter:blur(8px);transition:transform .28s}
.bunk-pdp__sbar.is-show{transform:translateX(-50%) translateY(0)}
.bunk-pdp__sbname{font-family:var(--f-display);font-size:20px;letter-spacing:.5px;color:#ece4d2}
.bunk-pdp__sbprice{font-family:var(--f-display);font-size:20px;letter-spacing:.5px;margin-left:2px}
.bunk-pdp__sbadd{position:relative;margin-left:auto;background:var(--bunk-cta);color:#1a1407;border:0;
  font-family:var(--f-display);font-size:18px;letter-spacing:1.5px;padding:9px 18px;border-radius:3px;cursor:pointer}

/* ── drawer ── */
.bunk-pdp__scrim{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.28s}
.bunk-pdp__scrim.is-open{opacity:1;pointer-events:auto}
.bunk-pdp__drawer{position:fixed;top:0;bottom:0;left:50%;width:var(--col,460px);max-width:100vw;
  transform:translateX(-50%) translateX(-110%);z-index:80;
  background:radial-gradient(130% 70% at 50% 0%,#221e18,#13100c 55%,#090706);
  opacity:0;transition:.28s;overflow-y:auto;padding:16px 24px 34px;
  pointer-events:none} /* closed: never intercept clicks meant for the sticky header (burger/logo) underneath (18 Jul fix) */
.bunk-pdp__drawer.is-open{transform:translateX(-50%);opacity:1;pointer-events:auto}
.bunk-pdp__dtop{display:flex;justify-content:space-between;align-items:center;margin:2px 0 8px}
.bunk-pdp__dttl{font-family:var(--f-hand);font-weight:700;font-size:30px;transform:rotate(-2deg)}
.bunk-pdp__dx{min-width:42px;min-height:42px;display:flex;align-items:center;justify-content:flex-end;
  cursor:pointer;color:#cfc8b8;background:none;border:0}
.bunk-pdp__dgrp{margin:15px 0}
.bunk-pdp__dh{font-family:var(--f-hand);font-weight:700;font-size:32px;margin:0 0 4px;transform:rotate(-1.5deg)}
.bunk-pdp__di{display:flex;align-items:center;gap:11px;padding:7px 6px 7px 18px;font-family:var(--f-hand);
  font-weight:700;font-size:29px;line-height:1;text-decoration:none;cursor:pointer}
.bunk-pdp__di .bunk-sv{display:inline-block;padding-right:9px}
.bunk-pdp__dutil{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;border-top:1px solid #2a241b;padding-top:14px}
.bunk-pdp__dutil span{font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.5px}

/* ── age gate ── */
.bunk-pdp__agegate{position:fixed;inset:0;z-index:200;background:rgba(8,6,4,.94);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.bunk-pdp__agegate.is-hide{display:none}
.bunk-pdp__agebox{max-width:340px;text-align:center}
.bunk-pdp__agestamp{height:69px;width:auto;transform:translateX(-24px) rotate(-4deg);display:block;margin:0 auto 7px}
.bunk-pdp__age21{font-family:var(--f-display);font-size:62px;letter-spacing:3px;margin:4px 0 9px}
.bunk-pdp__agecopy{font-family:var(--f-body);font-size:13px;line-height:1.7;color:#c4bca8;margin:0 0 18px}
.bunk-pdp__agebtns{display:flex;gap:10px}
.bunk-pdp__ageyes{flex:1;background:var(--bunk-cta);color:#1a1407;border:0;font-family:var(--f-display);
  font-size:21px;letter-spacing:1px;padding:13px;border-radius:3px;cursor:pointer}
.bunk-pdp__ageno{flex:none;background:transparent;color:#8a8273;border:1px solid #3a342a;
  font-family:var(--f-body);font-size:13px;padding:13px 16px;border-radius:3px;cursor:pointer}

/* ── small phones ── */
@media(max-width:380px){
  .bunk-pdp__ptape{font-size:14px;padding:6px 15px}
}

/* ── tablet ── */
@media(min-width:750px) and (max-width:989px){
  .bunk-pdp__col{--col:560px}
  .bunk-pdp__sbar,.bunk-pdp__drawer{width:560px}
}

/* ── desktop ── */
@media(min-width:990px){
  .bunk-pdp__col{--col:600px}
  .bunk-pdp__sbar,.bunk-pdp__drawer{width:600px}
  .bunk-pdp__story,.bunk-pdp__esbody{font-size:13px}
}

/* ══ DESKTOP PDP — 2-COLUMN ONE-SCREEN (Sid 9 Jul, replaces the rejected centred build) ══
   Sid's law: photo LEFT, buy panel RIGHT, buying NEVER a scroll away.
   price + ADD TO BAGGY stay ON the polaroid (left) so the buy is always on screen.
   Right column = mood → flavour → how-it-works → consult → story → lab report.
   The .bunk-pdp__hero2 wrapper is a transparent block below 1024 (mobile untouched);
   at ≥1024 it becomes the 2-col grid, and the <form> is display:contents so its
   children (pills + polaroid) join the grid while the form still submits. Serves all
   4 product pages (one section). Verified 390 / 1280 / 1440, gummies + oil. */
@media(min-width:1024px){
  /* widen the content column for the 2-col hero — must beat the width-modifier
     rule (.bunk-pdp--w-narrow .bunk-pdp__col{--col:460px}, specificity 0,2,0) */
  .bunk-pdp--w-narrow .bunk-pdp__col,
  .bunk-pdp--w-wide .bunk-pdp__col,
  .bunk-pdp__col{--col:1000px}
  .bunk-pdp__sbar,.bunk-pdp__drawer{width:500px}
  .bunk-pdp__story,.bunk-pdp__esbody{font-size:13px}

  /* the 2-col hero grid — tight, centered, reads as a panel not a sprawl */
  .bunk-pdp__hero2{
    display:grid;
    grid-template-columns:minmax(350px,430px) minmax(340px,460px);
    justify-content:center;
    align-items:start;
    column-gap:clamp(30px,3.5vw,60px);
    padding:24px 20px 12px;
    max-width:100%;
  }
  /* dissolve the form box → pills + polaroid become grid items; form still submits */
  .bunk-pdp__hero2>.bunk-pdp__form{display:contents}

  /* LEFT — big polaroid at its LOCKED 3:4; the width scales with viewport HEIGHT so
     the 3:4 photo + marker + ADD always fit one screen (big on tall displays, a touch
     smaller on short laptops) and the photo is NEVER cropped off its 3:4. */
  .bunk-pdp__hero2 .bunk-pdp__phero{grid-column:1;grid-row:1/span 30;align-self:start;margin:0;width:100%}
  .bunk-pdp__hero2 .bunk-pdp__ppol{width:clamp(300px,calc((100vh - 300px) * 0.75),420px);max-width:none;margin:0}
  .bunk-pdp__hero2 .bunk-pdp__thumbs{margin-top:20px;justify-content:flex-start;padding-left:0}

  /* RIGHT — the buy panel: generous, left-aligned, fills the column */
  .bunk-pdp__hero2>.bunk-pdp__moods{grid-column:2;justify-content:flex-start;padding:0;margin:2px 0}
  .bunk-pdp__hero2 .bunk-pdp__mlead{text-align:left}
  /* Sid 18 Jul (Option 1): paired dots-above-flavours fills column 2 at full width so its 3 cells
     line up exactly with the full-width flavour seg below (dot[i] caps flavour[i]). */
  .bunk-pdp__hero2>.bunk-pdp__moods--paired{width:100%;max-width:none;padding:0;margin:2px 0;justify-items:center;align-items:end}
  .bunk-pdp__hero2 .bunk-pdp__moods--paired .bunk-pdp__mlead{justify-self:start;text-align:left;margin-bottom:6px}
  .bunk-pdp__hero2 .bunk-pdp__pills--flav{padding-top:6px}
  .bunk-pdp__hero2 .bunk-pdp__pills{grid-column:2;text-align:left;padding:14px 0 4px}
  .bunk-pdp__hero2 .bunk-pdp__seglab{font-size:10px;letter-spacing:1.8px}
  .bunk-pdp__hero2 .bunk-pdp__seg.is-two,
  .bunk-pdp__hero2 .bunk-pdp__seg.is-three{margin:0;max-width:none;width:100%}
  .bunk-pdp__hero2 .bunk-pdp__pill{font-size:13px;padding:14px 6px}
  .bunk-pdp__hero2 .bunk-pdp__seg.is-three .bunk-pdp__pill{font-size:12px;padding:14px 3px}
  .bunk-pdp__hero2 .bunk-pdp__pill small{font-size:9.5px;margin-top:3px}
  .bunk-pdp__hero2>.bunk-pdp__howto{grid-column:2;justify-content:flex-start;margin:18px 0 0;max-width:none}
  .bunk-pdp__hero2>.bunk-pdp__consult{grid-column:2;text-align:left;margin:9px 0 0}
  .bunk-pdp__hero2>.bunk-pdp__doseexp{grid-column:2;text-align:left;margin:8px 0 0;max-width:none}
  .bunk-pdp__hero2>.bunk-pdp__story{grid-column:2;text-align:left;max-width:none;margin:16px 0 0;padding:16px 0 0;border-top:1px dashed #2a251d}
  .bunk-pdp__hero2>.bunk-pdp__flavdesc{grid-column:2;text-align:left;max-width:none;margin:14px 0 0;padding:14px 0 0;border-top:1px dashed #2a251d;font-size:13.5px;line-height:1.72;color:#d7cfbc}
  .bunk-pdp__hero2>.bunk-pdp__trustrelo{grid-column:2;text-align:left;margin:12px 0 0}

  /* below-hero desktop widening — ports the standalone .dspdp-below proportions/typography
     (max-width:1000/640, side-by-side cards, left-aligned headings) onto the SAME blocks in
     their CURRENT DOM position. Position is untouched: .bunk-pdp__strains stays right after
     .hero2 per Sid's 16 Jul move; this only fixes WIDTH + type so desktop doesn't render the
     narrow single-column (mobile) card widths under the wide 2-col hero above it. */
  .bunk-pdp__strains{max-width:1000px;margin:34px auto 0;padding:0 clamp(16px,3vw,28px)}
  /* Sid 18 Jul: the strain comparison MOVED into the buy column — on desktop it fills column 2
     under the heads-up (beside the tall polaroid), not the old full-width band. Initial placement;
     final width/format/centering = Fable pass. */
  .bunk-pdp__hero2>.bunk-pdp__strains--incol{grid-column:2;max-width:none;width:100%;margin:20px 0 0;padding:16px 0 0;border-top:1px dashed #2a251d}
  /* Sid 18 Jul (Option C, Tight Duo): 2-up SIDE BY SIDE in the ~460px column; tag beside the name, colour on the LEFT spine, compact. Centered heading/sub/footer. */
  .bunk-pdp__strains--incol .bunk-pdp__strainhead{text-align:center;font-size:24px}
  .bunk-pdp__strains--incol .bunk-pdp__strainsub{text-align:center;max-width:380px;margin:0 auto 14px;font-size:10.5px}
  .bunk-pdp__strains--incol .bunk-pdp__strainrow{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:stretch}
  .bunk-pdp__strains--incol .bunk-pdp__straincard{padding:12px 13px;border-top:1px solid rgba(255,255,255,.06);border-left:3px solid var(--sc);border-radius:4px;text-align:left}
  .bunk-pdp__strains--incol .bunk-pdp__strainname{font-size:15px;line-height:1}
  .bunk-pdp__strains--incol .bunk-pdp__straintag{font-size:7px;padding:2px 6px;letter-spacing:.6px}
  .bunk-pdp__strains--incol .bunk-pdp__strainmood{font-size:9.5px;margin:0 0 6px}
  .bunk-pdp__strains--incol .bunk-pdp__strainnote{font-size:9.5px;line-height:1.5}
  .bunk-pdp__strains--incol .bunk-pdp__strainvs{display:none}
  .bunk-pdp__strains--incol .bunk-pdp__strainfoot{text-align:center;margin:12px 0 0}
  .bunk-pdp__strainhead{font-size:30px;letter-spacing:.4px;text-align:left;margin:0 0 4px}
  .bunk-pdp__strainsub{font-size:12px;letter-spacing:.4px;text-align:left;margin:0 0 20px}
  .bunk-pdp__strainrow{flex-direction:row;align-items:stretch;gap:14px;flex-wrap:wrap}
  .bunk-pdp__straincard{flex:1 1 300px;padding:20px 22px}
  .bunk-pdp__straintag{font-size:10px;padding:3px 11px}
  .bunk-pdp__strainname{font-size:30px;letter-spacing:.6px;margin:12px 0 2px}
  .bunk-pdp__strainmood{font-size:12px;letter-spacing:.5px;margin:0 0 10px}
  .bunk-pdp__strainnote{font-size:13.5px;line-height:1.7}
  .bunk-pdp__strainvs{display:flex;align-self:center;font-size:22px;padding:2px 4px}
  .bunk-pdp__strainfoot{font-size:12px;line-height:1.7;text-align:left;margin:16px 0 0}

  .bunk-pdp__facts{max-width:1000px;justify-content:center;padding:14px clamp(16px,3vw,28px) 0} /* D75 (Sid): chips centered */

  /* NOTE: standalone's row-of-3 mode cards (.dspdp-modesrow) needs a wrapper div the
     target markup doesn't have (.mode cards are direct siblings of the heading here) —
     restructuring the grid without that wrapper risks pulling the heading into the row.
     NOT PORTED for that reason (kept as the existing stacked list); only widened + resized
     to sit comfortably at the desktop column width. Flag: add a .bunk-pdp__modesrow wrapper
     in the liquid markup in a follow-up pass if the 3-across row is wanted here too. */
  .bunk-pdp__modes{max-width:1000px;padding:0 clamp(16px,3vw,28px);margin:0 0 12px}
  .bunk-pdp__modeh{font-size:24px;text-align:left}
  .bunk-pdp__mname{font-size:21px}
  .bunk-pdp__mdesc{font-size:11.5px}
  .bunk-pdp__monset{font-size:10.5px}
  .bunk-pdp__cline{text-align:left;max-width:none;padding:0}

  .bunk-pdp__trust{max-width:640px;margin:26px auto 0;padding:0 clamp(16px,3vw,28px)}
  .bunk-pdp__trustlbl{font-size:26px;margin:0 0 16px}
  .bunk-pdp__tcards{gap:16px}
  .bunk-pdp__tcard{padding:16px 16px;font-size:12.5px}
  .bunk-pdp__trustdoc{font-size:22px;margin:20px 0 2px}
  .bunk-pdp__trustsub{font-size:13px;margin:0 0 12px}
  .bunk-pdp__truste1{font-size:13px;margin:12px 0 4px}
  .bunk-pdp__trustpriv{font-size:21px;margin:2px 0 12px}
  .bunk-pdp__trustret{font-size:11.5px;line-height:1.6}

  .bunk-pdp__details{max-width:640px;margin:0 auto 44px;padding:0 clamp(16px,3vw,28px)}
  .bunk-pdp__dh2{font-size:26px;text-align:left;margin:0 0 12px}
  .bunk-pdp__drow{padding:10px 2px;font-size:12.5px}
  .bunk-pdp__dk{font-size:10px}
  .bunk-pdp__coa{display:inline-block;text-align:left;font-size:11px;padding:10px 16px;margin:14px 0 0}

  /* white-border check (16 Jul port): .bunk-pdp__gslide img/svg use object-fit:cover +
     aspect-ratio:3/4 forced on the box — identical to the locked standalone's .dspdp-slide
     img. Cover always fills 100% of the box, so it CANNOT letterbox/pillarbox on its own —
     the desktop frame being bigger doesn't introduce a new border by itself. The real risk
     is source-level: a product PNG shot as a cutout on a plain white/near-white studio
     background reads as a stark white edge where it meets the cream polaroid paper once
     it's scaled up big on desktop. The window already had an inward vignette
     (.bunk-pdp__pwin box-shadow) to soften exactly this seam; strengthening it only at
     desktop (bigger frame = the seam is more visible) is the safe CSS-only mitigation —
     it does not touch mobile and cannot affect full-bleed lifestyle photos. If any gallery
     slide still shows a hard white edge after this, it needs an asset-level re-crop, not CSS. */
  .bunk-pdp__pwin{box-shadow:inset 0 0 34px rgba(0,0,0,.62)}
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) ═════════════════════════
   The product pages carried the most unreadable type on the site — the size
   price was 8.5px (fixed earlier), and 30-odd more classes sat at 9-11.5px.
   Floor everything at 12px; grow the controls to the 44px thumb standard. */
@media (max-width: 1023px){
  /* Sid 25 Jul, three fixes in the buy panel:
     1. The two mood tabs came out different sizes (Disconnect 108x52, Flow 150x71) because
        "SUPER LEMON HAZE" wrapped to a second line at the bigger type. Equal cells, one line each.
     2. He does not want the price under 1ML / 3ML — the big price above already updates on select.
     3. "CHOOSE YOUR SIZE" sat 20px below the bar above and 7px above the one below. Even it out. */
  .bunk-pdp__moods--paired .bunk-pdp__mdot{ width:100%; box-sizing:border-box; justify-content:center; }
  .bunk-pdp__moods--paired .bunk-pdp__mdot.has-strain{ padding-left:8px; padding-right:8px; }
  .bunk-pdp__mstrain{ white-space:nowrap; }
  .bunk-pdp__pill small{ display:none; }
  .bunk-pdp__seg{ margin-bottom:13px; }
  .bunk-pdp__seglab{ margin:0 0 13px; }
  /* Sid 25 Jul: "should we even have CHOOSE YOUR SIZE... 1ml, 3ml is pretty explanatory".
     Agreed — a two-option 1ML/3ML toggle explains itself, so the label goes and everything
     above the fold moves up. CHOOSE YOUR STRAIN stays: "Super OG / Super Lemon Haze" is not
     self-evident to a first-time buyer. A modest gap replaces the label. */
  .bunk-pdp__seglab--size{ display:none; }
  /* Sid 26 Jul, oil batch: the CHOOSE YOUR STRAIN toggle repeats what the two mood chips above
     already say (Disconnect/SUPER OG · Flow/SUPER LEMON HAZE), so on mobile the pills go and the
     mood chips become the picker (their heading now reads "choose your strain" — the pill buttons
     stay in the DOM, hidden, because the chip taps proxy-click them; all the switching logic rides
     on that). Desktop is locked (D76) and keeps the toggle. */
  .bunk-pdp--oil .bunk-pdp__pills--strain{ display:none; }
  .bunk-pdp--oil .bunk-pdp__mlead-d{ display:none; }
  .bunk-pdp--oil .bunk-pdp__mlead-m{ display:inline; }
  /* close the gap the removed toggle leaves — but keep A LITTLE air above the size tabs
     (Sid 26 Jul: "just a little gap, it's too close right now") */
  .bunk-pdp--oil .bunk-pdp__moods--paired{ margin-bottom:10px; }
  /* Sid 26 Jul, oil batch: dose line ("50mg of active cannabinoids · ft. …") goes ON TOP of the
     price in the marker band; the ratio line under it lost its 50mg half (now said above), so
     "full-spectrum Vijaya" shifts up on its own. */
  .bunk-pdp--oil .bunk-pdp__pprice{ display:flex; flex-direction:column; }
  .bunk-pdp--oil .bunk-pdp__pdose{ order:-1; }
  /* Sid 26 Jul, oil batch: "The evening strain, deep and earthy…" was touching the ADD TO BAGGY
     tape (the tape overhangs the polaroid by 14px). The dose headline now carries the clearance
     and the description tucks under it. */
  .bunk-pdp--oil .bunk-pdp__pmk .bunk-pdp__pdose{ display:none; }
  .bunk-pdp--oil .bunk-pdp__doselead{ display:block; }
  .bunk-pdp--oil .bunk-pdp__flavdesc{ margin-top:6px; }
  /* Sid 26 Jul: the MASS hook is ONE line, stretched to the width of the picture, a little bigger.
     Scoped to Mass by its own handle class so the Proxy hook is untouched. */
  /* Sid 26 Jul: measured — at 25.5px this line is 352px wide inside a 353px picture, so it TOUCHED
     both edges and the leading H grazed the paper. 24px gives it ~9px left and ~13px right, biased
     a little left as he asked, with the whole "around." readable. */
  .bunk-pdp--the-mass-bunk .bunk-pdp__phk{ max-width:none; margin-left:-20px; margin-right:-6px;
    font-size:24px; white-space:nowrap; text-wrap:nowrap; }

  /* Sid 26 Jul: "center the price" — the PRO/FRESHER tag was sitting IN the row, so the price was
     pushed 31px left of the card's centre. Taking the tag out of the flow lets the price centre. */
  /* Sid 26 Jul: price CENTRED on the card, tag sitting right beside it at its old distance.
     A 3-column grid does both: the price owns the middle column so it is centred no matter how
     wide the tag is, and the tag starts the third column so it stays next to the price rather
     than flying out to the card edge. */
  .bunk-pdp__pricerow{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
  .bunk-pdp__pricerow .bunk-pdp__price{ grid-column:2; }
  .bunk-pdp__pricerow .bunk-pdp__ptag{ grid-column:3; justify-self:start; margin-left:10px;
    position:static; transform:none; }

  /* Sid 26 Jul: the polaroid hook = exactly TWO lines, text out to the edges of the picture */
  .bunk-pdp--oil .bunk-pdp__phk{ max-width:none; margin-left:-6px; margin-right:-6px; font-size:18.5px; white-space:nowrap; text-wrap:nowrap; }
  .bunk-pdp--oil .bunk-pdp__pmk{ margin-top:16px; }
  /* Sid 26 Jul: on PRODUCT pages (mobile) the polaroid almost touches the screen edges —
     the photo and the whole card grow. Home/other sections untouched. */
  .bunk-pdp__phero{ margin-left:6px; margin-right:6px; }
  .bunk-pdp__ppol{ width:auto; margin-left:2px; margin-right:2px; }
  /* (26 Jul: the legacy inline tape svg is display:none in foundation — the REAL print is
     .bunk-pdp__pshoptape::after; its mobile offset lives in bunk-foundation.css) */
  /* Sid 26 Jul (oil batch, then extended to gummies on his 2nd pass: "make sure, just like the
     oils, when we select the flavor, whatever flavor it is is displayed on top"): the selected
     strain's card surfaces to the TOP of the strain stack; "vs" stays between the two cards
     whichever is active. Un-scoped from --oil so the gummy flavour picks do it too — the gummy
     pick() already toggles .is-active on [data-straincard] from the flavour's data-card. */
  .bunk-pdp__strainrow .bunk-pdp__straincard{ order:2; }
  .bunk-pdp__strainrow .bunk-pdp__strainvs{ order:1; }
  .bunk-pdp__strainrow .bunk-pdp__straincard.is-active{ order:0; }

  /* Sid 26 Jul: "The price on the Gummies PDP is too small. Why is it like this?" — because the
     gummy price carries the SILVER ink class and the mobile readability floor .bunk-sv{12px}
     (bunk-foundation.css, appended last) beat the 43px price rule. The oil price escapes it only
     because it is GOLD ink. Two-class scope wins it back at the oil's exact size. */
  .bunk-pdp__price.bunk-sv{ font-size:43px; }

  /* Sid 26 Jul: "The line below the CTA needs to come down a little bit. It's touching the tape."
     Measured: gummy description OVERLAPPED the tape by 7px, oil dose line cleared it by only 3px.
     The tape overhangs the polaroid, so both need real clearance below it. */
  .bunk-pdp--oil .bunk-pdp__doselead{ margin-top:42px; }
  .bunk-pdp:not(.bunk-pdp--oil) .bunk-pdp__flavdesc{ margin-top:42px; }
  /* Sid 25 Jul, standing rule: when something is removed, close the gap it leaves — do not
     leave a hole where the label was. Measured 39px between the two bars; target ~14px. */
  .bunk-pdp__seglab--size + .bunk-pdp__seg{ margin-top:-25px; }
  /* Sid 25 Jul: the thumbnail strip under the polaroid is redundant on a phone —
     the dots show position and the swipe already works. Desktop keeps it. */
  /* Sid 26 Jul: "the BUNK logo is still hidden behind the text on PDPs". The product name is
     white-space:nowrap at 23px and its grid cell has no min-width, so a long title ("EMERGENCY
     BUNK") spills out of the centre column and sits on top of the logo. Let the cell clamp. */
  .bunk-pdp__hdr{ grid-template-columns: auto minmax(0,1fr) auto; column-gap: 8px; }
  .bunk-pdp__ptg{ font-size:18px; letter-spacing:1.2px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .bunk-pdp__logo{ height:38px; }
  .bunk-pdp__thumbs{ display:none; }
  /* the caption points at that strip, so it goes with it — mobile only (Sid 26 Jul:
     formatting changes are mobile-only, the desktop is locked). */
  .bunk-pdp__galct{ display:none; }
  /* the strip used to be the spacer under the overhanging ADD TO BAGGY tape; with it
     gone the caption ran 12px UNDER the tape. Restore the clearance. */
  .bunk-pdp__galct{ margin-top:34px; }
  /* Sid 26 Jul: "make terpenes the same color as the other text". Formatting, so mobile only —
     desktop is his last approved and keeps its faded treatment until he says so. */
  /* Sid 26 Jul: "why are terpenes on another side? it looks like it's been pasted from some other
     place. Write it in the same sentence." Cause: the mobile 12px floor pushed this ABOVE the
     11.5px sentence around it, and vertical-align:super lifted it off the baseline. Now it flows. */
  .bunk-pdp__terp{ color:inherit; font-size:inherit; vertical-align:baseline; letter-spacing:inherit; }
  /* the ratio reads bigger, as he asked, and stays handwritten */
  /* Sid 26 Jul: ratio at the title's size and bold. NOTE this is the rule that WINS — an earlier
     .bunk-pdp__ratioh in this same block loses to it on source order, so edit here, not there. */
  .bunk-pdp__ratioh{ font-size:25.5px; font-weight:800; }
  /* Sid 26 Jul: with terpenes now full-size in the sentence, the LONGEST flavour line
     ("Sour Apple 15mg · ft. Super Lemon Haze terpenes (3:1)") no longer fits one line, and the
     ratio was being orphaned on a line of its own. Fitting it would need 10.2px, which is smaller
     than he just asked for. So: give the line the full picture width and balance the wrap, so it
     breaks into two even lines instead of dropping the ratio alone. */
  .bunk-pdp__pdose{ margin-left:-8px; margin-right:-8px; }
  /* Sid 26 Jul: "terpenes need to be in the line above, otherwise it seems like we've mixed
     terpenes in the ratio of 3:1." He is right — gluing them read as a TERPENE ratio, which is
     not what 3:1 is. So terpenes stays in the sentence with the strain, and the ratio drops to
     its own line underneath, big and bold. */
  .bunk-pdp__dsuffix{ white-space:normal; }
  .bunk-pdp__ratioh{ display:block; }
  /* and the polaroid gets a little more length so the longer line is not cramped */
  .bunk-pdp:not(.bunk-pdp--oil) .bunk-pdp__ppol{ padding-bottom:60px; }
  .bunk-pdp__mlead, .bunk-pdp__galct, .bunk-pdp__hownum, .bunk-pdp__psycho-k,
  .bunk-pdp__straintag, .bunk-pdp__dk, .bunk-pdp__cline,
  .bunk-pdp__consult, .bunk-pdp__straintrp, .bunk-pdp__doseexp, .bunk-pdp__mdesc,
  .bunk-pdp__monset, .bunk-pdp__strainsub, .bunk-pdp__strainaroma, .bunk-pdp__fact,
  .bunk-pdp__coa, .bunk-pdp__run, .bunk-pdp__ratio, .bunk-pdp__medline,
  .bunk-pdp__strainsci, .bunk-pdp__trustret, .bunk-pdp__dv, .bunk-pdp__strainmood,
  .bunk-pdp__strainmorestrains, .bunk-pdp__howarrow, .bunk-pdp__minicoa,
  .bunk-pdp__strainhero, .bunk-pdp__strainexplain, .bunk-pdp__fabct,
  .bunk-pdp__mstrain, .bunk-pdp__pill, .bunk-pdp__strainnote,
  .bunk-pdp__swipehint{ font-size:12px; }
  .bunk-pdp__minicoa{ display:inline-flex; align-items:center; min-height:44px; }
  .bunk-pdp__coa{ min-height:44px; display:flex; align-items:center; justify-content:center; }
  .bunk-pdp__pill{ min-height:44px; }
  .bunk-pdp__sbadd{ min-height:44px; box-sizing:border-box; }
  .bunk-pdp__fab{ min-height:44px; }
  .bunk-pdp__dx{ min-height:44px; }
}
/* END_SECTION:bunk-pdp */

/* START_SECTION:bunk-proof (INDEX:11) */
/* FOOLPROOF FALLBACK (identical to bunk-base.css) — black canvas + fonts + CTA even if base CSS is missing */
:root{ --bunk-bg:#13100c; --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806); --bunk-kraft:#b9a07a; --bunk-cream:#f2e6c8; --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347; --f-display:'Bebas Neue',Impact,sans-serif; --f-body:'Space Mono',ui-monospace,monospace; --f-hand:'Caveat',cursive; --f-tape:'Patrick Hand',cursive; }
/* ================================================================
   bunk-proof — PROOF section
   "RECEIPTS. NOT VIBES."
   Mobile-first (430px base). Extends bunk-base.css tokens.
   ================================================================ */

/* —— background variants —— */
.bunk-proof.bp-bg--kraft   { background: var(--bunk-kraft); }
.bunk-proof.bp-bg--custom  { background: var(--bp-custom-bg, var(--bunk-bg)); }
.bunk-proof.bp-bg--matte,
.bunk-proof                { background-color: var(--bunk-bg, #13100c); background-image: var(--bunk-bg-radial, radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806)); }

/* —— optional background image (custom) —— */
.bp-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bp-bg-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .18;
}

/* —— inner column widths —— */
.bp-inner            { position: relative; z-index: 1; padding-inline: 16px; }
.bp-inner--narrow    { max-width: 460px; margin-inline: auto; }
.bp-inner--wide      { max-width: 720px; margin-inline: auto; }
.bp-inner--full      { max-width: 100%; }

/* —— heading (LOCKED: RECEIPTS. NOT VIBES.) —— */
.bp-heading {
  font-family: var(--f-display);
  font-size: clamp(40px, 10.5vw, 52px);
  letter-spacing: 2px;
  line-height: .92;
  margin: 0 0 6px;
  transform: rotate(-1deg);
  display: inline-block;
}

.bp-sub {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .4px;
  color: #b3ab98;
  margin: 0 0 18px;
}

/* —— science polaroid pair —— */
.bp-sciwrap {
  display: flex;
  gap: 11px;
  margin: 0 0 20px;
}

.bp-sci {
  flex: 1;
  position: relative;
  transform: rotate(-.6deg);
  padding: 6px 6px 14px;
  box-shadow: 0 7px 18px rgba(0,0,0,.55);
  border-radius: 2px;
}

.bp-sci--r {
  transform: rotate(.7deg);
}

.bp-sci__img {
  width: 100%;
  display: block;
  border-radius: 2px;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* washi tape strip on polaroid top — LOCKED visual element */
.bp-scitape {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.6deg);
  width: 60px;
  height: 17px;
  background: linear-gradient(180deg, rgba(231,217,183,.94), rgba(208,193,155,.88));
  opacity: .92;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  clip-path: polygon(3% 12%, 99% 4%, 97% 92%, 1% 96%);
  pointer-events: none;
  z-index: 9;
}

/* —— receipt cards list —— */
.bp-receipts {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 20px;
}

/* individual receipt — LOCKED: cream paper + slight tilt — */
.bp-receipt {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  /* bunk-paper supplies the cream gradient + grain overlay */
  color: #221c12;
  padding: 12px 14px;
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  transform: rotate(-.5deg);
  overflow: hidden;
  text-align: left; /* receipts always left-align internally */
}

.bp-receipt:nth-child(even) {
  transform: rotate(.6deg);
}

/* green tick badge */
.bp-rk {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cfe3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: inset 0 0 0 1px #9bbf86;
}

.bp-rtext { flex: 1; min-width: 0; }

.bp-rt {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .3px;
  line-height: 1.2;
  margin: 0 0 3px;
}

.bp-rd {
  font-family: var(--f-body);
  font-size: 10px;
  color: #5a4f3c;
  margin: 0;
  line-height: 1.45;
}

/* —— COA dashed link box —— */
.bp-coa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 4px 0 0;
  border: 1px dashed #4a3f28;
  border-radius: 4px;
  padding: 13px 16px;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: #cbb96a;
  text-decoration: none;
  transition: border-color .18s, color .18s;
}

.bp-coa:hover,
.bp-coa:focus-visible {
  border-color: #cbb96a;
  color: #e8d48c;
  outline: none;
}

.bp-coa:focus-visible {
  outline: 2px solid var(--bunk-cta);
  outline-offset: 2px;
}

/* —— tablet (750–989) —— */
@media (min-width: 750px) {
  .bp-heading { font-size: 56px; }

  .bp-sciwrap { gap: 16px; margin-bottom: 24px; }

  .bp-receipts { gap: 11px; }

  .bp-receipt { padding: 14px 18px; }

  .bp-rt  { font-size: 13.5px; }
  .bp-rd  { font-size: 10.5px; }
}

/* —— desktop (≥990) —— */
@media (min-width: 990px) {
  .bp-heading { font-size: clamp(52px, 5.5vw, 70px); }

  /* Two-column layout: science images left, receipts right */
  .bp-inner--narrow .bp-proof-grid,
  .bp-inner--wide   .bp-proof-grid,
  .bp-inner--full   .bp-proof-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
    align-items: start;
  }

  .bp-sciwrap {
    flex-direction: column;
    gap: 18px;
    margin-bottom: 0;
  }

  .bp-sci { transform: rotate(-.8deg); }
  .bp-sci--r { transform: rotate(.9deg); }

  .bp-receipts { gap: 12px; }

  .bp-coa { margin-top: 12px; }
}
/* END_SECTION:bunk-proof */

/* START_SECTION:bunk-samplers (INDEX:13) */
:root{ --bunk-bg:#13100c; --bunk-cta:#FFE100; --f-body:'Space Mono',ui-monospace,monospace; --f-hand:'Caveat',cursive; }
.bunk-samplers{background-color:var(--bunk-bg);background-image:var(--bunk-bg-radial);padding:30px 0 6px}
.bunk-samplers__inner{position:relative;z-index:2;padding:0 20px}
.bunk-samplers__card{background:radial-gradient(120% 90% at 50% 0%,#1c1813,#100d09);border:1px solid #2a241b;border-radius:8px;padding:20px 16px 18px;text-align:center;max-width:480px;margin:0 auto}
.bunk-samplers__head{font-family:var(--f-hand);font-weight:700;font-size:30px;color:#f0e9d6;margin:0 0 4px;transform:rotate(-1.5deg)}
.bunk-samplers__promise{font-family:var(--f-body);font-size:11.5px;line-height:1.7;color:#bdb4a2;margin:0 auto 14px;max-width:360px}
.bunk-samplers__form{display:flex;flex-direction:column;align-items:center;gap:9px}
.bunk-samplers__row{display:flex;gap:8px;width:100%;max-width:360px;flex-wrap:wrap}
.bunk-samplers__row input{flex:1 1 140px;min-width:0;background:#0c0a07;border:1px solid #4a3f28;color:#f0e9d6;font-family:var(--f-body);font-size:11.5px;padding:11px 12px;border-radius:4px;outline:none;-webkit-appearance:none}
.bunk-samplers__row input::placeholder{color:#6a6052}
.bunk-samplers__row input:focus-visible{outline:2px solid var(--bunk-cta);outline-offset:-2px}
.bunk-samplers__consent{font-family:var(--f-body);font-size:9.5px;line-height:1.6;color:#8c8472;max-width:340px;display:flex;gap:6px;align-items:flex-start;text-align:left}
.bunk-samplers__consent a{color:#bdb4a2}
.bunk-samplers__join{font-family:var(--f-display,'Bebas Neue',sans-serif);font-size:18px;letter-spacing:2px;color:#1a1a1a;background:var(--bunk-cta);border:0;padding:11px 22px;border-radius:4px;cursor:pointer;transition:opacity .15s}
.bunk-samplers__join:disabled{opacity:.45;cursor:not-allowed}
.bunk-samplers__join:not(:disabled):hover{opacity:.88}
.bunk-samplers__ok{font-family:var(--f-body);font-size:11px;color:#9bbf86;margin:0 0 6px}
.bunk-samplers__err{font-family:var(--f-body);font-size:10px;color:#ff7050;margin:0 0 6px}
/* END_SECTION:bunk-samplers */

/* START_SECTION:bunk-story (INDEX:14) */
/* ── FOOLPROOF FALLBACK (mirrors bunk-foundation.css) — textured matte + correct fonts even if base CSS is missing ── */
:root{
  --bunk-bg:#13100c; --bunk-bg-radial:radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806);
  --bunk-cream:#f2e6c8; --bunk-cta:#FFE100; --bunk-stamp:#C41F00; --bunk-red-solid:#ff6347;
  --f-display:'Bebas Neue',Impact,sans-serif; --f-body:'Space Mono',ui-monospace,monospace;
  --f-hand:'Caveat',cursive; --f-tape:'Patrick Hand',cursive; --f-marker:'Permanent Marker','Caveat',cursive;
}
.bunk-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bunk-story{
  background-color:var(--bunk-bg,#13100c);
  background-image:var(--bunk-bg-radial,radial-gradient(130% 26% at 50% 0%,#211e19,#15120d 46%,#0a0806));
  position:relative; overflow:hidden; padding-top:var(--pt,48px); padding-bottom:var(--pb,48px);
  color:#ece6d7; font-family:var(--f-body);
}
@media(max-width:600px){ .bunk-story{ padding-top:var(--pt-m,24px); padding-bottom:var(--pb-m,24px); } }

/* intro */
.bs-intro{ text-align:center; padding:8px 16px 4px; }
.bs-pagetag{ font-family:var(--f-hand); font-weight:700; font-size:30px; margin:0; transform:rotate(-1.5deg); display:inline-block; color:#d0d5db; }
.bs-introsub{ font-family:var(--f-body); font-size:12px; letter-spacing:.5px; color:#b3ab98; margin:6px 0 0; }

.bs-track{ position:relative; }

/* a beat */
.bs-beat{ position:relative; padding:0 0 34px; border-bottom:1px solid #1c1813; scroll-margin-top:var(--bs-offset, var(--header-height, 84px)); }

/* ── per-beat SWIPEABLE CAROUSEL — hero = slide 1, swipe the rest; WHOLE picture, never cropped (letterboxed on the matte) ── */
.bs-carousel{ position:relative; background:#000; overflow:hidden; touch-action:pan-y; }
/* Sid 25 Jul: the pictures were letterboxed — the track was a 0.55 box (375x682 on a phone)
   while every story photograph is natively 3:4, so object-fit:contain painted ~100px of black
   bar above and below all 29 of them. Match the FRAME to the photographs instead of cropping
   the photographs: contain then fills edge to edge and no picture is lost. */
.bs-ctrack{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; height:auto; aspect-ratio:3 / 4; }
.bs-ctrack::-webkit-scrollbar{ display:none; }
.bs-cslide{ position:relative; flex:0 0 100%; width:100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always; background:#000; display:flex; align-items:center; justify-content:center; }
.bs-fr{ margin:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
.bs-cslide .bs-fr img{ width:100%; height:100%; display:block; object-fit:contain; background:#000; }
/* dots (top-centre, clear of the headline below) · side arrows (hover) · slow-auto toggle */
/* Sid 25 Jul: dots move from the top of the print to the bottom. No scrim — a gradient over the
   photo edge reads Instagram-story and breaks the hand-laid print; each dot carries its own
   hairline dark halo instead, which survives a bright photo bottom invisibly (Fable). */
.bs-cdots{ position:absolute; left:0; right:0; top:auto; bottom:12px; z-index:5; display:flex; gap:7px; justify-content:center; pointer-events:none; }
/* Sid 25 Jul: "keep the dots on the site how they are on the by format polaroids".
   Matching .bunk-format__dot exactly — 18px box, 6px padding, background-clip:content-box
   so the visible dot is 6px but the tap target is the full 18px. */
.bs-cdot{ width:18px; height:18px; padding:6px; background-clip:content-box; border-radius:50%;
  background-color:rgba(255,255,255,.55); box-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:background-color .3s; pointer-events:auto; cursor:pointer; border:0; }
.bs-cdot.is-on{ background-color:var(--bunk-cta,#FFE100); }
.bs-cnav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:42px; height:42px; border-radius:50%; background:#0a0806aa; color:#fff; border:1px solid #ffffff22; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:.18s; }
.bs-carousel:hover .bs-cnav{ opacity:.85; }
.bs-cnav:hover{ opacity:1; background:#0a0806e0; }
.bs-cnav--prev{ left:10px; } .bs-cnav--next{ right:10px; } .bs-cnav.is-gone{ display:none; }
.bs-cauto{ position:absolute; bottom:12px; right:12px; z-index:8; width:30px; height:30px; border-radius:50%; background:#0a0806cc; color:#e9e4d8; border:1px solid #ffffff22; font-size:12px; cursor:pointer; opacity:.55; transition:.18s; }
.bs-cauto:hover{ opacity:1; } .bs-cauto.is-gone{ display:none; }
/* keyboard accessibility: arrows are hover-only by mouse, but must appear + be obvious on keyboard focus */
.bs-carousel:focus-within .bs-cnav{ opacity:.85; }
.bs-story :focus-visible, .bs-cnav:focus-visible, .bs-cdot:focus-visible, .bs-cauto:focus-visible, .bs-cta:focus-visible, .bs-capf input:focus-visible, .bs-capf button:focus-visible, .bs-ditem:focus-visible{ outline:2px solid var(--bunk-cta,#FFE100); outline-offset:2px; }
.bs-cnav:focus-visible{ opacity:1; }
@media(prefers-reduced-motion:reduce){ .bs-ctrack{ scroll-behavior:auto; } }

/* beat header — CLEAN live type, never on the photo (no scrim) */
.bs-beathead{ max-width:820px; margin:0 auto; padding:32px 24px 4px; }
.bs-order--image-first .bs-beathead{ padding-top:30px; }
.bs-kicker{ font-family:var(--f-marker); font-size:17px; letter-spacing:.3px; color:#d0d5db; margin-bottom:12px; display:inline-block; transform:rotate(-1.6deg); text-shadow:0 1px 5px rgba(0,0,0,.55); }
.bs-beat:nth-of-type(3n+2) .bs-kicker{ color:#e8c84a; }   /* gold pen */
.bs-beat:nth-of-type(3n) .bs-kicker{ color:#e8584a; }     /* red pen */
.bs-hl{ font-family:var(--f-display); font-weight:400; line-height:.92; letter-spacing:.5px; font-size:clamp(40px,7vw,92px); margin:0; color:#ece6d7; }
.bs-hl--close{ font-size:clamp(54px,11vw,150px); color:#fff; text-align:center; }

/* copy */
.bs-copy{ max-width:820px; margin:0 auto; padding:24px 24px 6px; }
.bs-body{ font-size:17px; line-height:1.8; color:#e7dec9; }
.bs-body p{ margin:0 0 16px; }
.bs-closer{ font-family:var(--f-display); letter-spacing:1px; font-size:clamp(24px,4vw,40px); line-height:1.1; color:var(--bunk-cta,#e8c84a); margin:14px 0 6px; }
.bs-bridge{ font-size:19px; line-height:1.75; color:#f1e7cf; border-top:1px solid #2a261d; padding-top:16px; margin:10px 0 4px; }
.bs-note{ font-size:14px; color:#bcae8e; border-top:1px solid #2a261d; padding-top:14px; margin-top:14px; }
.bs-tease{ font-size:13.5px; color:#9c9079; margin-top:16px; }

/* letter (beat 2) — cream card */
.bs-beat--letter{ display:flex; justify-content:center; }
.bs-letter{ max-width:680px; background:#efe7d3; color:#211c12; border-radius:4px; padding:34px 34px 26px; margin:26px auto; box-shadow:0 18px 50px #0008; transform:rotate(-.4deg); }
.bs-letter .bs-kicker{ color:#7a6a45; }
.bs-letter .bs-body{ color:#2a2316; font-size:16px; }
.bs-quote{ font-style:italic; border-left:3px solid #c2a33f; margin:22px 0; padding:6px 0 6px 18px; color:#4a3f29; font-size:16px; }
.bs-sign{ font-family:var(--f-display); letter-spacing:1px; font-size:22px; margin-top:6px; color:#3a3120; }

/* close (beat 9) */
.bs-beat--close{ border-bottom:0; }
.bs-closewrap{ min-height:22vh; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:12px; padding:50px 18px; } /* D72 (24 Jul): 44vh→22vh — the end-slate's forced void read as a black page before the footer */
.bs-clogo{ display:block; width:118px; height:auto; margin:0 auto 6px; transform:rotate(-4deg); filter:drop-shadow(0 3px 8px rgba(0,0,0,.55)); } /* Sid 18 Jul: BUNK stamp above the tagline (replaces the "09" kicker) */
@media (min-width:1024px){ .bs-clogo{ width:150px; margin-bottom:10px; } }
.bs-slate{ font-size:14px; color:#cfc6b2; letter-spacing:.3px; max-width:46ch; margin:0 auto; }
.bs-slate--legal{ font-size:12px; color:#8a7e64; letter-spacing:.5px; }

/* doors (beat 4) */
.bs-doors{ display:flex; gap:14px; flex-wrap:wrap; margin:10px 0; }
.bs-door{ --m:#888; flex:1 1 200px; border-top:3px solid var(--m); background:#14110d; border-radius:0 0 10px 10px; padding:14px; display:block; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.bs-door:hover, .bs-door:focus-visible{ transform:translateY(-2px); background:#191510; box-shadow:0 8px 22px rgba(0,0,0,.4); outline:none; }
.bs-rl{ font-family:var(--f-display); letter-spacing:1.5px; font-size:clamp(22px,3vw,30px); color:var(--bunk-cta,#e8c84a); }
.bs-door .bs-rl{ color:var(--m); }
.bs-rt{ font-size:16px; color:#cfc6b2; margin-top:6px; }

/* cols (beat 5) */
.bs-cols{ display:flex; gap:18px; flex-wrap:wrap; margin:10px 0; }
.bs-col{ flex:1 1 280px; border-left:2px solid #2a261d; padding-left:16px; }

/* dayrows (beat 3) — line + photo per day */
.bs-dayrows{ display:flex; flex-direction:column; gap:18px; margin:10px 0; }
.bs-dayrow{ display:flex; gap:22px; align-items:center; }
.bs-dayrow.rgt{ flex-direction:row-reverse; }
.bs-dayrow .bs-dayc{ flex:1 1 0; min-width:0; }
.bs-dayrow .bs-dayp{ flex:0 0 300px; max-width:46%; }
.bs-dayrow .bs-rl{ font-size:clamp(26px,4vw,40px); }
.bs-dayrow .bs-rt{ font-size:18px; color:#e7dec9; margin-top:4px; }
.bs-dayrow .bs-fr{ width:100%; height:auto; border-radius:8px; }
.bs-dayrow .bs-fr img{ width:100%; height:auto; display:block; object-fit:contain; background:#000; border-radius:8px; }

/* capture (beat 8) */
.bs-cap{ margin:18px 0 4px; }
.bs-capt{ font-size:16px; color:#e7dec9; margin-bottom:12px; }
.bs-capf{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bs-capf input[type=email],.bs-capf input[type=tel],.bs-capf input[type=text]{ flex:1 1 200px; background:#100e0b; border:1px solid #3a3225; border-radius:7px; padding:10px 12px; color:#ece6d7; font:14px var(--f-body); }
.bs-consent{ flex:1 1 100%; font-size:11.5px; color:#b3ab98; display:flex; gap:7px; align-items:flex-start; line-height:1.5; }
.bs-consent a{ color:var(--bunk-cta,#e8c84a); }
.bs-capf button{ flex:0 0 auto; font:700 13px var(--f-body); background:var(--bunk-cta,#FFE100); color:#1a1400; border:0; border-radius:7px; padding:11px 16px; cursor:pointer; }
.bs-capf button:disabled{ opacity:.45; cursor:not-allowed; }
/* D73 (Sid 24 Jul): the submit reads "join the [BUNK stamp] club" — the stamp rides inline */
.bs-capstamp{ height:1.5em; width:auto; vertical-align:middle; margin:0 2px; display:inline-block; transform:rotate(-4deg); }
.bs-capok{ flex:1 1 100%; color:#46d06a; font-size:13px; font-weight:700; }
.bs-caperr{ flex:1 1 100%; color:#ff8a78; font-size:12.5px; }

/* CTA */
.bs-cta{ display:inline-flex; align-items:center; gap:9px; margin:24px 0 6px; background:var(--bunk-stamp,#C41F00); color:#fff; border-radius:9px; padding:12px 18px; font-family:var(--f-display); letter-spacing:1.5px; font-size:22px; text-decoration:none; width:fit-content; box-shadow:0 8px 24px rgba(196,31,0,.28); }
.bs-cta:hover{ filter:brightness(1.08); }
.bs-cta__arrow{ font-size:15px; opacity:.85; border-left:1px solid #ffffff44; padding-left:9px; }

/* Mood on Demand. = the homepage red metallic MARKER (Caveat) + SILVER period (matches the hero band) */
.bs-hl--close.bs-markred{ font-family:var(--f-hand); font-weight:700; white-space:nowrap; letter-spacing:0; line-height:1; font-size:clamp(46px,12vw,90px);
  background:linear-gradient(135deg,#ffae94,#ff6347 40%,#ffd2c2 52%,#ff7050 72%,#ffa085); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); }
.bs-hl--close .bs-dot{ background:linear-gradient(135deg,#fafafa,#b9bcc2 42%,#fff 52%,#9aa0a6 78%,#e9ecef); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* responsive */
@media(max-width:760px){
  .bs-dayrow,.bs-dayrow.rgt{ flex-direction:column; gap:10px; }
  .bs-dayrow .bs-dayp{ flex:none; max-width:100%; width:100%; }
  .bs-cols{ flex-direction:column; gap:12px; }
  .bs-col{ flex:none; border-left:0; border-top:2px solid #2a261d; padding:12px 0 0; }
  .bs-doors{ flex-direction:column; }
  .bs-door{ flex:none; border-radius:8px; }
}
@media(max-width:600px){
  .bs-hl{ font-size:clamp(32px,8.5vw,46px); }
  .bs-kicker{ font-size:13px; margin-bottom:9px; }
  .bs-beathead,.bs-copy{ padding-left:16px; padding-right:16px; }
  .bs-copy{ max-width:100%; }
  .bs-body{ font-size:15.5px; line-height:1.7; }
  .bs-bridge{ font-size:17px; }
  .bs-closer{ font-size:clamp(22px,6vw,30px); }
  .bs-dayrow .bs-rt{ font-size:16px; }
  .bs-cta{ font-size:20px; padding:12px 16px; }
}

/* the desktop album grid stays off on mobile — the carousel is the mobile experience */
.bs-dgrid{ display:none; }
.bs-herowide{ display:none; } /* D72 mobile-parity: the desktop wide-shot zone doubled up with the carousel on phones — hidden <1024 like every other dgrid */

/* ============================================================
   DESKTOP ≥ 1024px — ALBUM SPREADS (Fable design, Sid-locked 11 Jul,
   ported from the approved standalone desktop build; supersedes the
   2-Jul "carousel stays" call).
   Each beat = an album page laid flat: photos edge-to-edge as a
   full-width grid row (or hero mosaic), the writing below on ONE
   shared left rail. No hidden scrollers, nothing chopped, the page
   breathes 110px between spreads. Mobile (<1024) untouched.
   ============================================================ */
@media (min-width: 1024px){
  .bs-track,
  .bs-beats{ max-width:none; margin:0; padding:0; }
  .bs-beat{ --sm: clamp(32px, 4vw, 72px); --sg: 16px;
    padding:110px 0; border-bottom:1px solid #1c1813; max-width:none; }
  .bs-beat:first-of-type{ padding-top:24px; }
  .bs-beat--close{ border-bottom:0; }
  /* Sid 18 Jul: tighten the gap between beat 07 and 08 (was ~220px stacked) */
  .bs-beat[data-beat="7"]{ padding-bottom:48px; }
  .bs-beat[data-beat="8"]{ padding-top:48px; }
  /* Sid 18 Jul: centre beat 08's headline + kicker */
  .bs-beat[data-beat="8"] .bs-beathead{ text-align:center; }

  /* the mobile carousel retires on desktop; the album grid takes over */
  .bs-carousel{ display:none; }
  .bs-dgrid{
    display:grid; gap:var(--sg); margin:0 0 44px; padding:0 var(--sm);
    grid-template-columns:repeat(3,1fr); align-items:start;
  }
  .bs-dgrid[data-n="4"]{ grid-template-columns:repeat(4,1fr); }
  /* natural-ratio frames on a mount tone — whole picture, never letterboxed black */
  .bs-dfr{ margin:0; background:#0c0a07; overflow:hidden;
    box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 0 0 1px #000; }
  .bs-dfr img,
  .bs-dfr .bunk-photo{ width:100%; height:auto; object-fit:contain; background:#0c0a07; display:block; }
  /* MOSAIC — one hero print pasted proud (2×2), supports tucked beside; empty cells = composed matte */
  .bs-dgrid--mosaic{ grid-template-columns:repeat(4,1fr); }
  .bs-dgrid--mosaic .bs-dfr{ aspect-ratio:3/4; }
  .bs-dgrid--mosaic .bs-dfr img{ height:100%; }
  .bs-dgrid--mosaic .bs-dfr.is-hero{ grid-column:1/3; grid-row:1/3; aspect-ratio:auto; height:100%; }

  /* ═══ D-PORT 16 Jul — the locked standalone beat shapes (ds-story-split / hero-wide) ═══ */
  /* beat 05 — ONE wide 16:9 DJ shot, full rail width (ds-story-hero-wide)
     D72/3a (Sid approved 24 Jul): the slot's configured picture is a tall portrait, which rendered
     ~1570px tall at full rail = the "black page" between beats 4-5. The frame is now a HARD 16:9;
     the same picture crops into it (no picture swapped). */
  .bs-herowide{ display:block; margin:0 0 44px; padding:0 var(--sm); }
  /* D73 (Sid 24 Jul: "you can't even see the picture · remove the unnecessary black space") —
     the 16:9 crop buried the portrait. Now: the WHOLE picture, height-capped, centred on the mount. */
  .bs-herowide .bs-dfr{ margin:0; background:#0c0a07; overflow:hidden; height:min(72vh,680px);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 0 0 1px #000; }
  .bs-herowide .bs-dfr img{ width:auto; max-width:100%; height:100%; object-fit:contain; display:block; background:#0c0a07; } /* scoped to BEAT the generic .bs-dfr img{width:100%;height:auto} */
  /* beats 01 + 07 + 08 — SPLITS (ds-story-split): 01+07 text LEFT / photo RIGHT · 08 photo LEFT / text RIGHT (07 added Sid 18 Jul) */
  .bs-beat[data-beat="1"],
  .bs-beat[data-beat="7"],
  .bs-beat[data-beat="8"]{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:clamp(28px,3.2vw,56px); align-items:center;
    padding-left:var(--sm); padding-right:var(--sm);
  }
  .bs-beat[data-beat="1"] > *,
  .bs-beat[data-beat="7"] > *{ grid-column:1; }
  .bs-beat[data-beat="1"] .bs-dgrid,
  .bs-beat[data-beat="7"] .bs-dgrid{ grid-column:2; grid-row:1 / span 9; grid-template-columns:1fr; padding:0; margin:0; }
  .bs-beat[data-beat="8"] > *{ grid-column:2; }
  .bs-beat[data-beat="8"] .bs-dgrid{ grid-column:1; grid-row:1 / span 9; grid-template-columns:1fr; padding:0; margin:0; }
  /* inside a split the section carries the rail padding — strip it from the children */
  .bs-beat[data-beat="1"] .bs-beathead, .bs-beat[data-beat="1"] .bs-copy,
  .bs-beat[data-beat="7"] .bs-beathead, .bs-beat[data-beat="7"] .bs-copy,
  .bs-beat[data-beat="8"] .bs-beathead, .bs-beat[data-beat="8"] .bs-copy{ padding-left:0; padding-right:0; }

  /* ONE left rail: photos, kicker, headline, body, CTA all hang off --sm */
  .bs-intro,
  .bs-beathead,
  .bs-copy{ max-width:none; margin:0; padding:0 var(--sm); text-align:left; }
  .bs-beathead{ margin-top:44px; margin-bottom:8px; }
  .bs-order--header-first .bs-beathead{ margin-top:0; margin-bottom:40px; }
  .bs-kicker{ color:#d0d5db; font-size:20px; }   /* kicker ink = SILVER everywhere (ink = function) */
  .bs-hl{ font-size:clamp(44px,4.6vw,92px); line-height:.92; max-width:22ch; }
  .bs-body{ font-size:17.5px; line-height:1.8; max-width:70ch; }
  .bs-closer, .bs-bridge, .bs-note{ max-width:70ch; }

  /* letter (beat 2) — wider, centred, keeps the tilt */
  .bs-letter{ max-width:820px; margin:0 auto; }

  /* dayrows (beat 3): SAT/SUN/MON become the beat's photo zone — a 3-up triptych,
     label + line UNDER each print (they're the joke, not captions) */
  .bs-dayrows{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sg); margin-top:8px; align-items:start; }
  .bs-dayrow,
  .bs-dayrow.rgt{ display:flex; flex-direction:column; }
  .bs-dayrow .bs-dayp{ order:-1; flex:none; width:100%; max-width:100%; margin:0 0 14px; }
  .bs-dayrow .bs-dayp .bs-fr{ background:#0c0a07; box-shadow:0 14px 34px rgba(0,0,0,.4); aspect-ratio:3/4; } /* Sid 18 Jul: equal-height triptych so the row isn't jagged */
  .bs-dayrow .bs-dayp img{ width:100%; height:100%; object-fit:contain; display:block; }

  /* doors (beat 4) widen to the rail; bigger label */
  .bs-doors{ max-width:none; }
  .bs-door .bs-rl{ font-size:clamp(28px,2.4vw,40px); }

  /* CTAs cut like tape, not app buttons: no radius, clipped edges, no glow */
  .bs-cta{
    border-radius:0;
    clip-path:polygon(2% 18%,98% 2%,99% 86%,1% 98%);
    transform:rotate(-1deg);
    box-shadow:0 6px 16px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.4);
  }
}

/* ═══ MOBILE READABILITY + THUMB PASS (Sid 25 Jul) ═════════════════════════ */
@media (max-width: 1023px){
  /* story dots keep their 7px look; the hit area grows to 44px underneath */
  .bs-cdot{ position:relative; }
  .bs-cdot::after{ content:''; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%); }
  .bs-cauto{ min-width:44px; min-height:44px; }
  .bs-cnav{ min-width:44px; min-height:44px; }
}
/* END_SECTION:bunk-story */

/* START_SECTION:bunk-switch (INDEX:15) */
:root{
  --bunk-bg:#13100c; --sw-bg:transparent; --bunk-cta:#FFE100;
  --f-display:"Bebas Neue",Impact,sans-serif; --f-body:"Space Mono",ui-monospace,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive; --f-tape:"Patrick Hand","Comic Sans MS",cursive;
}
.bunk-switch{background:var(--sw-bg);padding:var(--pt,32px) 0 var(--pb,32px)}
.sw-col{width:min(460px,100%);margin:0 auto;padding:0 16px}
.sw-band{background:#15120d;border:1px solid #2a241b;border-radius:11px;padding:24px 20px;text-align:center;position:relative;overflow:hidden}
.sw-band:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff0a 1px,transparent 1px);background-size:3px 3px;opacity:.5;pointer-events:none}
.sw-head{font-family:var(--f-display);font-size:30px;letter-spacing:1px;margin:0;line-height:1;position:relative}
.sw-sub{font-family:var(--f-hand);font-size:18px;color:#cfc6b2;margin:6px 0 14px;position:relative}
.sw-points{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0;margin:0 0 16px;position:relative}
.sw-points li{font-family:var(--f-body);font-size:10.5px;letter-spacing:.3px;color:#cbc3b2;border:1px solid #312b22;border-radius:3px;padding:6px 10px;background:rgba(0,0,0,.25)}
.sw-cta{display:inline-block;background:var(--bunk-cta,#FFE100);color:#1a1608;font-family:var(--f-body);font-weight:700;letter-spacing:.6px;font-size:12px;padding:11px 20px;border-radius:3px;text-decoration:none;transform:rotate(-1.4deg);box-shadow:0 7px 18px #0006;position:relative}
.sw-legal{font-family:var(--f-body);font-size:9px;letter-spacing:.4px;color:#6f685c;margin:14px 0 0;position:relative}
/* END_SECTION:bunk-switch */

/* START_SECTION:bunk-whatis (INDEX:16) */
:root{
  --bunk-bg:#13100c; --wi-bg:transparent; --bunk-cta:#FFE100;
  --f-display:"Bebas Neue",Impact,sans-serif; --f-body:"Space Mono",ui-monospace,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive; --f-tape:"Patrick Hand","Comic Sans MS",cursive;
}
.bunk-whatis{background:var(--wi-bg);padding:var(--pt,40px) 0 var(--pb,40px)}
.wi-col{width:min(460px,100%);margin:0 auto;padding:0 22px;text-align:center}
.wi-head{font-family:var(--f-hand);font-weight:700;font-size:30px;margin:0 0 10px;line-height:1.05}
.wi-body{font-family:var(--f-body);font-size:12px;line-height:1.85;color:#cfc7b6;margin:0 0 10px}
.wi-body p{margin:0} .wi-body strong{color:#fff;font-weight:700}
.wi-heritage{font-family:var(--f-hand);font-size:17px;color:#9a907c;margin:0 0 12px}
.wi-lablink{font-family:var(--f-body);font-size:11px;letter-spacing:.4px;color:var(--bunk-cta);text-decoration:none;border-bottom:1px dashed #7a6e2e}
.wi-tear{height:16px;margin:26px 0 18px;background:repeating-linear-gradient(90deg,#2a241b 0 10px,transparent 10px 16px);opacity:.7}
.wi-h3{font-family:var(--f-hand);font-weight:700;font-size:24px;margin:0 0 14px}
.wi-strains{display:flex;gap:12px;justify-content:center}
.wi-strain{flex:1;position:relative;background:#1b1812;border:1px solid #342e22;border-radius:8px;padding:18px 12px 13px;text-align:left}
.wi-strain:nth-child(1){transform:rotate(-1deg)} .wi-strain:nth-child(2){transform:rotate(1deg)}
.wi-stape{position:absolute;top:-9px;left:12px;font-family:var(--f-tape);text-transform:uppercase;font-size:11px;letter-spacing:.4px;padding:3px 8px;transform:rotate(-2deg)}
.wi-shero{font-family:var(--f-hand);font-weight:700;font-size:18px;line-height:1.25;color:#fff;margin:8px 0 2px}
.wi-saroma{font-family:var(--f-body);font-size:10px;letter-spacing:.3px;color:#9a907c;margin:0}
.wi-explain{font-family:var(--f-body);font-size:11px;line-height:1.7;color:#ff6347;max-width:380px;margin:16px auto 2px}
.wi-explain + .wi-explain{margin-top:0}
.wi-more{font-family:var(--f-body);font-size:11px;letter-spacing:.3px;margin:6px 0 0}
.wi-micro{font-family:var(--f-body);font-size:9.5px;letter-spacing:.3px;color:#6f685c;margin:4px 0 0}
/* END_SECTION:bunk-whatis */

/* START_SECTION:collection-links (INDEX:18) */
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:24) */
.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:25) */
.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:26) */
.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:27) */
.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:28) */
body {
    --header-height: 60px;
    --header-group-height: var(--header-height);
    --transparent-header-offset-boolean: 0; /* stylelint-disable-line declaration-property-value-disallowed-list */
  }

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

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

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

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

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

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

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

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

    --closed-underlay-height: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    position: relative;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ===== BUNK HYBRID C — desktop washi-tape tabs + page-tag understrip (approved 28 Jun) ===== */
  /* Hidden below 1024px so the mobile header/burger stays byte-identical. */
  .bunk-tapebar,
  .bunk-understrip {
    display: none;
  }

  /* ===== A1 · FABLE FIX B (17 Jul overnight) — MOBILE product-name bar =====
     Bug: on mobile, only the home page's [data-bunk-scrolltag] understrip showed; PDPs fell to the
     base display:none, so the product name rendered at zero height on phones. Fix: on mobile only,
     show the NON-home understrip so the name is visible, matching the desktop >=1024 behaviour.
     Scoped max-width:1023.98px + :not([data-bunk-scrolltag]) so the signed-off DESKTOP header and the
     HOME scroll-tag are both byte-identical. Revert = delete this @media block. */
  @media (max-width: 1023.98px) {
    .bunk-understrip:not([data-bunk-scrolltag]) {
      display: flex;
      position: absolute;
      inset: 0 0 auto 0;
      height: 100%;
      justify-content: center;
      align-items: center;
      padding: 0;
      background: transparent;
      border: 0;
      pointer-events: none;
      z-index: 3;
    }
    .bunk-understrip:not([data-bunk-scrolltag]) .bunk-understrip__tag {
      font-family: 'Caveat', cursive;
      font-size: 21px;
      line-height: 1;
      transform: rotate(-2deg);
      background: linear-gradient(135deg, #fafafa, #b9bcc2 42%, #fff 52%, #9aa0a6 78%, #e9ecef);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      white-space: nowrap;
    }
  }

  /* ===== D55 · MOBILE PORT OF THE LOCKED BAR (Sid 16 Jul — his board picks) =====
     The locked bar = stamp/☰ · page-tag dead-centre · bag. Search + account live in the DRAWER
     (they are already there: drawer util rows /search + /account). Was ≥1024-only; now ALL widths,
     so mobile finally matches the signed-off desktop. Revert = re-nest these two selectors in the
     ≥1024 block below. */
  #header-component search-button.search-action,
  #header-component .account-button {
    display: none !important;
  }
  /* the tag rides the bar itself (sticky lives on a parent section) */
  #header-component { position: relative; }

  /* ===== D55 · THE SCROLL-REACTIVE HOME HEADER — BOTH SURFACES =====
     Only the home page carries [data-bunk-scrolltag]; every other page keeps the locked static tag. */
  .bunk-understrip[data-bunk-scrolltag] {
    display: flex;
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;              /* rides the bar at ANY height (60 mobile · 84 desktop) */
    justify-content: center;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    pointer-events: none;
    z-index: 5;
  }
  .bunk-understrip[data-bunk-scrolltag] .bunk-understrip__tag {
    font-family: 'Caveat', cursive;
    font-size: 21px;
    line-height: 1;
    transform: rotate(-2deg);
    background: linear-gradient(135deg, #fafafa, #b9bcc2 42%, #fff 52%, #9aa0a6 78%, #e9ecef);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .22s ease;
  }
  /* at the hero the stamp owns the centre → no tag */
  .bunk-scrollhdr.is-hero .bunk-understrip__tag { opacity: 0; }

  /* THE STAMP: centred at the hero, slides LEFT once you scroll into a section (Sid's pick B).
     The `left` VALUE is set inline by JS in px (see the D55 script): px→px so the slide actually
     interpolates, and an inline style is immune to any cascade fight over this element. CSS owns
     only the frame + the motion. */
  /* ⚠️ ID-scoped ON PURPOSE (16 Jul): Horizon sets `top`/`height` on the logo via an ID-strength rule,
     so a plain `.bunk-scrollhdr .header-logo` (0,2,0) LOSES those two properties while still winning
     `position`/`width`. Result at 375: the <a> collapsed to top:60/height:0 and the 52px stamp centred
     on the bar's bottom EDGE — half of it hanging over the hero photo. `#header-component.bunk-scrollhdr`
     = (1,2,0) and takes them back. Don't "simplify" this selector. */
  #header-component.bunk-scrollhdr .header-logo {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0;
    z-index: 6;
    /* ⚡ Fable: ease-OUT ~250–280ms = "paper sliding to a stop", not a symmetric computer ease.
       280ms also respects the site's own motion ceiling (the drawer law caps at ≤280ms) — the first
       build shipped 300ms and quietly broke it. */
    transition: left .28s cubic-bezier(.22, .61, .36, 1);
  }
  /* the stamp never outgrows the bar */
  #header-component.bunk-scrollhdr .header-logo__image--bunk {
    max-height: calc(100% - 8px);
    width: auto;
  }
  /* D56 + ⚡Fable: the burger does NOT slide — it steps to its spot behind a fast fade (JS drives it).
     Only the stamp glides. */
  #header-component.bunk-scrollhdr .header__drawer {
    transition: opacity .12s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    #header-component.bunk-scrollhdr .header-logo,
    #header-component.bunk-scrollhdr .header__drawer { transition: none; }
  }

  @media screen and (min-width: 1024px) {
    /* hide the stock Horizon desktop menu links; the tape tabs replace them */
    #header-component .header-menu,
    #header-component .header__navigation-bar-row {
      display: none !important;
    }

    /* keep the burger = "the index" on desktop (Horizon hides .header__drawer once its menu shows) */
    #header-component .header__drawer {
      display: flex !important;
    }
    #header-component .header__icon--menu {
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
    }

    .bunk-tapebar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 22px;
      padding: 9px 0 11px;
      background: #0e0b08;
      border-top: 1px solid #221d16;
    }

    .bunk-tabtape {
      position: relative;
      clip-path: polygon(0% 14%, 100% 4%, 100% 90%, 0% 98%);
      font-family: 'Patrick Hand', cursive;
      font-size: 15px;
      letter-spacing: 0.4px;
      line-height: 1;
      color: #2a2316;
      text-decoration: none;
      white-space: nowrap;
      padding: 7px 16px;
      border-radius: 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
      transition: transform 0.14s ease, filter 0.14s ease;
    }

    /* translucent torn-tape edges */
    .bunk-tabtape::before,
    .bunk-tabtape::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 15px;
      height: 12px;
      background: rgba(255, 255, 255, 0.16);
      pointer-events: none;
    }
    .bunk-tabtape::before { left: -7px; transform: translateY(-50%) rotate(8deg); }
    .bunk-tabtape::after { right: -7px; transform: translateY(-50%) rotate(-8deg); }

    .bunk-tabtape--mood { background: #B6E03A; transform: rotate(-1.4deg); }
    .bunk-tabtape--fmt { background: #d8c79c; transform: rotate(1deg); }
    .bunk-tabtape--story { background: linear-gradient(135deg, #d7d2c6, #b9bcc2); transform: rotate(-0.8deg); }
    .bunk-tabtape--chip {
      font-family: 'Space Mono', ui-monospace, monospace;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 0.6px;
      background: #FFE100;
      transform: rotate(0.6deg);
    }
    .bunk-tabtape--chip::before,
    .bunk-tabtape--chip::after { display: none; }

    .bunk-tabtape:hover { transform: rotate(0deg) translateY(-1px); filter: brightness(1.04); }
    .bunk-tabtape:focus-visible { outline: 2px solid #FFE100; outline-offset: 2px; }

    /* D-PORT 16 Jul (Sid): page-tag moves ONTO the bar, dead-centred — the locked ds-head layout
       (stamp+☰ left · handwritten tag CENTRE · bag right). The old separate black band under the
       bar ("homepage" strip + its border = Sid's "random thin black bar") is gone. */
    .bunk-understrip {
      position: absolute;
      inset: 0 0 auto 0;
      height: 84px;               /* the top row's height — tag rides the bar */
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      background: transparent;
      border: 0;
      pointer-events: none;
      z-index: 3;
    }
    .bunk-understrip__tag {
      font-family: 'Caveat', cursive;
      font-size: 24px;
      line-height: 1;
      transform: rotate(-2deg);
      background: linear-gradient(135deg, #fafafa, #b9bcc2 42%, #fff 52%, #9aa0a6 78%, #e9ecef);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    /* NOTE (D55, 16 Jul): `#header-component{position:relative}` and the search/account bar-hide moved
       OUT of this ≥1024 block and are now GLOBAL (see the D55 block above) — mobile needs them too. */
  }

  @media (prefers-reduced-motion: reduce) {
    .bunk-tabtape { transition: none; }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:29) */
.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:30) */
.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:31) */
.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:33) */
.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:34) */
/**
   * 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:35) */
.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:39) */
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:40) */
.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:41) */
.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:42) */
.section-password {
    flex-grow: 1;
    display: flex;
  }

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

/* START_SECTION:product-hotspots (INDEX:45) */
/* 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:46) */
.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:49) */
.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:54) */
.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:55) */
.details__icon {
    height: auto;
    margin-inline-end: var(--margin-xs);
  }
/* END_BLOCK:_accordion-row */

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

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

/* START_BLOCK:_cart-summary (INDEX:66) */
.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:67) */
.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:70) */
.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:72) */
.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:76) */
.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:77) */
.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:79) */
.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:82) */
.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:83) */
.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:84) */
.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);
    }
  }

  /* BUNK stamp logo — bundled fallback, reads big */
  .header-logo__image--bunk {
    height: 52px;
    width: auto;
    object-fit: contain;

    @media screen and (min-width: 750px) {
      height: 62px;
    }
  }

  .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:85) */
.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:88) */
.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:92) */
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:97) */
/* 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:102) */
.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:103) */
.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:104) */
.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:106) */
.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:112) */
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:113) */
.submit-button {
    min-width: max-content;
  }
/* END_BLOCK:contact-form-submit-button */

/* START_BLOCK:contact-form (INDEX:114) */
.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:116) */
.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:118) */
.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:121) */
.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:123) */
.icon-block {
    display: flex;
    flex-shrink: 0;
  }

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

/* START_BLOCK:image (INDEX:124) */
.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:126) */
.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:127) */
.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:129) */
.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:130) */
.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:131) */
.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:134) */
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:136) */
.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:137) */
.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:140) */
.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:142) */
.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:143) */
/* 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:144) */
product-swatches {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
  }
/* END_BLOCK:swatches */

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

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:accordion-custom-component (INDEX:148) */
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:background-media (INDEX:150) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:bento-grid (INDEX:151) */
.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:152) */
.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:157) */
.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:158) */
.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:159) */
.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:160) */
.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:161) */
.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:162) */
.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);
  }

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

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

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

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

  .cart-note {
    width: 100%;
  }

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

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

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

  .cart-note__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-note__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  .cart-note__instructions {
    color: var(--color-input-text);
    background-color: var(--color-input-background);
    border-width: var(--style-border-width-inputs);
    border-color: var(--color-input-border);
    transition: box-shadow var(--animation-speed) ease;
    box-shadow: var(--input-box-shadow);
    min-height: 5.5rem;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--font-size--sm);
    padding: max(4px, calc(var(--style-border-radius-inputs) * (1 - cos(45deg))));
  }

  .cart-totals__icon {
    height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    margin: 0;
  }

  .cart__ctas {
    width: 100%;
    display: grid;
    gap: var(--checkout-button-gap);
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .cart__ctas .cart__checkout-button {
    width: 100%;
    height: clamp(25px, var(--height-buy-buttons), 55px);
    padding-inline: var(--padding-4xl);
  }

  .cart-drawer__summary .cart-totals:not(:has(.cart-totals__original-container:empty)) {
    border-block-start: var(--style-border-width) solid var(--color-border);
    padding-block-start: var(--padding-2xl);
  }

  .cart-drawer__summary .cart-note {
    @media screen and (min-width: 750px) {
      margin-block-start: var(--margin-3xs);
    }
  }

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

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

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

  .cart-discount {
    width: 100%;
  }

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

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

  .cart-discount__button {
    height: 100%;
  }

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

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

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

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

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

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

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

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

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

  .cart-discount__summary:hover {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }

  .cart-discount__label {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-2xs);
    font-size: var(--font-size--2xs);
    font-weight: 500;
  }

  @media screen and (min-width: 750px) {
    .cart-summary--extend {
      height: 100%;
    }
  }
/* END_SNIPPET:cart-summary */

/* START_SNIPPET:collection-card (INDEX:165) */
.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:167) */
.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:168) */
.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:169) */
.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:170) */
.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:171) */
/* 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:175) */
.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:177) */
.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:178) */
.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:179) */
.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;
  }

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

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

  .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:180) */
.header__icon--menu {
    position: initial;
  }

  .menu-drawer-container .header__icon--summary {
    color: var(--color-foreground);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
  }

  .header__icon--summary .header-drawer-icon {
    margin: auto;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__featured-content {
    z-index: var(--layer-base);
    container-type: inline-size;
  }

  .menu-drawer__featured-content--childlist {
    z-index: var(--layer-flat);
  }

  .menu-drawer__featured-content-list {
    display: flex;
    gap: 1em;
    overflow-x: auto;
    padding-block-end: var(--padding-lg);
  }

  .menu-drawer__featured-content-list-item {
    flex: 0 0 auto;
  }

  .menu-drawer__featured-content-list-item--product {
    width: 35cqi;
  }

  .menu-drawer__featured-content-list-item--collection img.resource-card__image {
    width: 80cqi;
  }

  .menu-drawer__featured-content-list-item:first-child {
    margin-inline-start: var(--margin-xl);
  }

  .menu-drawer__featured-content-list-item:last-child {
    margin-inline-end: var(--margin-xl);
  }

  .menu-drawer__navigation {
    padding: 0;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  details:not(.menu-open) .header__icon--menu .header-drawer-icon--close {
    display: none;
  }

  details.menu-open .header__icon--menu .header-drawer-icon--close {
    @media screen and (min-width: 750px) {
      display: none;
    }
  }

  details.menu-open .header__icon--menu .header-drawer-icon--open {
    display: none;

    @media screen and (min-width: 750px) {
      display: flex;
    }
  }

  .menu-drawer {
    position: fixed;
    transform: translateX(-100%);
    visibility: hidden;
    height: var(--drawer-height);
    width: var(--drawer-width);
    max-width: var(--drawer-max-width);
    z-index: var(--layer-menu-drawer);
    left: 0;
    top: 0;
    padding: 0;
    background-color: var(--color-background);
    overflow: auto;
    display: flex;
    border-right: var(--style-border-drawer);
    box-shadow: var(--shadow-drawer);
    flex-direction: column;

    @media screen and (min-width: 750px) {
      width: 25rem;
    }
  }

  /* When opening a submenu we don't want the first-level menu to be scrollable, so we reset the overflow  */
  .menu-drawer.menu-drawer--has-submenu-opened {
    overflow: initial;
  }

  .menu-drawer__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    backdrop-filter: brightness(0.75);
    z-index: var(--layer-heightened);
    opacity: 0;
    transition: opacity var(--drawer-animation-speed) ease;

    .menu-open & {
      opacity: 1;
    }
  }

  .menu-drawer,
  details[open] > .menu-drawer__submenu {
    transition: transform var(--drawer-animation-speed) ease, visibility var(--drawer-animation-speed) ease,
      opacity var(--drawer-animation-speed) ease;
  }

  .menu-open > .menu-drawer,
  .menu-open > .menu-drawer__submenu:not(.menu-drawer__menu--childlist) {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-drawer__inner-container {
    position: relative;
    height: 100%;
  }

  .menu-drawer__navigation-container {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: space-between;
    overflow-y: auto;
    height: 100%;
  }

  .menu-drawer__inner-submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;

    @media screen and (min-width: 750px) {
      margin-top: var(--drawer-header-desktop-top);
    }
  }

  .menu-drawer__nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu {
    --menu-drawer-inline-padding: calc(var(--padding-sm) + 7px);

    list-style: none;
    padding-inline: var(--drawer-padding);
    margin-inline: 0;
    margin-block-start: 0;
  }

  .menu-drawer__menu--grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: var(--padding-sm);
    padding-inline-end: var(--menu-drawer-inline-padding);
    padding-block-start: var(--padding-xs);
  }

  .menu-drawer__menu--childlist:not(.menu-drawer__menu--grid) {
    flex-grow: 1;
  }

  .menu-drawer__menu.has-submenu,
  .menu-drawer__menu--childlist:not(:has(.menu-drawer__animated-element)) {
    margin-block-end: var(--margin-xs);

    @media screen and (min-width: 750px) {
      margin-block-end: 2.5rem;
    }
  }

  .menu-drawer__list-item--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__list-item--deep:not(.menu-drawer__list-item--divider) .menu-drawer__menu {
    margin-block-start: -0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu {
    margin-block-start: -0.4rem;
  }

  .menu-drawer__menu-container--divider {
    border-block-end: 1px solid var(--color-border);
  }

  .menu-drawer__menu > .menu-drawer__list-item {
    display: flex;
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__list-item--deep .menu-drawer__list-item,
  .menu-drawer__list-item--flat .menu-drawer__list-item {
    min-height: auto;
  }

  .menu-drawer__menu .menu-drawer__list-item--flat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block-end: var(--margin-md);
  }

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat {
    margin-block-end: var(--margin-sm);

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

  .menu-drawer__menu--childlist .menu-drawer__list-item--flat.menu-drawer__list-item--divider {
    margin-block-end: 0;
  }

  .menu-drawer__list-item--flat .menu-drawer__menu--childlist {
    width: 100%;
    padding-inline: 0;
  }

  .menu-drawer-container[open] .menu-drawer__animated-element {
    animation: menu-drawer-nav-open var(--drawer-animation-speed) ease-in-out;
    animation-delay: calc(var(--drawer-animation-speed) + (var(--menu-drawer-animation-index) - 1) * 0.1s);
    animation-fill-mode: backwards;
  }

  .menu-drawer__menu accordion-custom .details-content--no-animation {
    animation: none;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition: none;
  }

  .menu-drawer__menu details,
  .menu-drawer__menu-item,
  .menu-drawer__menu accordion-custom {
    width: 100%;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item:not(.menu-drawer__menu-item--child) {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
  }

  .menu-drawer__menu-item--mainlist {
    min-height: calc(2 * var(--padding-lg) + var(--icon-size-xs));
    font-family: var(--menu-top-level-font-family);
    font-style: var(--menu-top-level-font-style);
    font-weight: var(--menu-top-level-font-weight);
    font-size: var(--menu-top-level-font-size);
    line-height: var(--menu-top-level-font-line-height);
    text-transform: var(--menu-top-level-font-case);
    color: var(--menu-top-level-font-color);
    justify-content: space-between;

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

  .menu-drawer__menu-item--parent {
    font-family: var(--menu-parent-font-family);
    font-style: var(--menu-parent-font-style);
    font-weight: var(--menu-parent-font-weight);
    font-size: var(--menu-parent-font-size);
    line-height: var(--menu-parent-font-line-height);
    text-transform: var(--menu-parent-font-case);
    color: var(--menu-parent-font-color);

    &:hover {
      color: var(--menu-parent-font-color);
    }
  }

  .menu-drawer__menu-item--child {
    font-family: var(--menu-child-font-family);
    font-style: var(--menu-child-font-style);
    font-weight: var(--menu-child-font-weight);
    font-size: var(--menu-child-font-size);
    line-height: var(--menu-child-font-line-height);
    text-transform: var(--menu-child-font-case);
    color: var(--menu-child-font-color);

    &:hover {
      color: var(--menu-child-font-color);
    }
  }

  .menu-drawer__menu--childlist summary.menu-drawer__menu-item {
    display: flex;
    width: 100%;
    padding-inline-end: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu,
  .menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }

  .menu-drawer__list-item--deep .menu-drawer__menu {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__list-item--deep.menu-drawer__list-item--divider .menu-drawer__menu {
    padding-block-end: 0.3rem;
  }

  .menu-drawer__list-item--flat.menu-drawer__list-item--divider .menu-drawer__menu--grandchildlist {
    padding-block-end: 0.5rem;
  }

  .menu-drawer__menu-item {
    display: flex;
    padding: var(--padding-2xs) 0;
    position: relative;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
  }

  .menu-drawer__menu-item:has(> .menu-drawer__link-image) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__link-image {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Fix alignment for collection image mode links without images in drawer */

  /* Target menu items in grids that have images */
  .menu-drawer__menu--grid:has(.menu-drawer__link-image) .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image)) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: var(--padding-3xs);
    padding: 0;
  }

  .menu-drawer__menu--grid:has(.menu-drawer__link-image)
    .menu-drawer__menu-item:not(:has(> .menu-drawer__link-image))::before {
    content: '';
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-foreground-muted);
    opacity: 0.1;
    border-radius: var(--menu-image-border-radius);
  }

  .menu-drawer__close-button {
    position: relative;
    right: auto;
    top: auto;
    width: fit-content;
    height: fit-content;
    color: inherit;
    padding: var(--padding-lg);
  }

  .menu-drawer__back-button {
    display: flex;
    width: 100%;
    padding: var(--padding-md) var(--padding-xl);
    border: none;
    align-items: center;
    color: var(--color-foreground);
    background-color: transparent;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    overflow-x: hidden;
    line-height: 1.2;
    box-shadow: none;
  }

  .menu-drawer__menu-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /** Styles when the country selector is hidden */
  .menu-drawer .language-selector:not(.menu-drawer__submenu *) {
    width: fit-content;
    padding-inline-start: 0;

    .localization-form__select {
      text-align: left;
    }
  }

  .menu-drawer__menu-item > .svg-wrapper {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding-block: var(--padding-lg);
    padding-inline-start: var(--padding-xl);
    flex-shrink: 0;
  }

  .menu-drawer__list-item--divider .menu-drawer__menu-item > .svg-wrapper {
    padding-block: var(--padding-md);
  }

  .menu-drawer svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__submenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100dvh;
    left: 0;
    background-color: var(--color-background);
    z-index: var(--layer-flat);
    transform: translateX(-5%);
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
  }

  .menu-drawer__back-button > .svg-wrapper {
    margin-right: var(--padding-md);
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .menu-drawer__utility-links {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-block: auto var(--padding-sm);
    margin-inline-start: var(--padding-xl);
    background-color: rgb(var(--color-foreground) 0.03);
  }

  .menu-drawer__account {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
    height: 44px;
    font-size: 1.4rem;
    color: rgb(var(--color-foreground));
  }

  .menu-drawer__account svg {
    height: var(--icon-size-sm);
    width: var(--icon-size-sm);
  }

  .menu-drawer__account shop-user-avatar {
    --shop-avatar-size: 2.4rem;

    margin-right: 0.55rem;
    margin-left: -0.45rem;
  }

  .menu-drawer__link-image,
  .menu-drawer__featured-product-image,
  .menu-drawer__featured-collection-image,
  .menu-drawer__featured-collection-link::before {
    border-radius: var(--menu-image-border-radius);
  }

  @keyframes menu-drawer-nav-open {
    0% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    100% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes menu-drawer-subnav-open {
    0% {
      visibility: visible;
      opacity: 1;
      transform: translateX(0);
    }

    100% {
      visibility: hidden;
      opacity: 0;
      transform: translateX(-1rem);
    }
  }

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

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

  .drawer-localization .country-filter {
    padding-block: 8px;
  }

  .drawer-localization .drawer-localization__button {
    display: flex;
    padding: 0;
    position: relative;
    text-decoration: none;
    height: 44px;

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

  .drawer-localization .drawer-localization__button .icon-caret {
    width: fit-content;
    height: fit-content;
    margin: 0;
    padding: var(--padding-xl) var(--padding-xl) var(--padding-xl) var(--padding-xs);
  }

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

  .menu-drawer__localization .language-selector.h5 {
    padding-inline-start: 0;
  }

  .drawer-localization {
    display: contents;
    color: var(--color-foreground);
  }

  .drawer-localization localization-form-component {
    position: relative;
    height: 100%;
  }

  .drawer-localization .mobile-localization,
  .drawer-localization .drawer-localization__button--label {
    display: flex;
    gap: var(--gap-xs);
    margin-block: 0;
    align-items: center;
  }

  .drawer-localization__button--label.h6 {
    font-family: var(--menu-localization-font);
  }

  .drawer-localization img {
    width: var(--icon-size-sm);
  }

  .drawer-localization .localization-button__icon,
  .drawer-localization .localization-button__icon svg {
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
  }

  .drawer-localization summary.is-disabled {
    pointer-events: none;
  }

  .drawer-localization .localization-wrapper {
    width: 100%;
  }

  .drawer-localization .localization-form {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drawer-localization .localization-form > * {
    padding-inline: var(--padding-xl);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret {
    transform: translateY(-50%) rotate(0deg);
  }

  .drawer-localization .language-selector .svg-wrapper.icon-caret svg {
    transform: none;
  }
/* END_SNIPPET:header-drawer */

/* START_SNIPPET:jumbo-text (INDEX:185) */
.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:188) */
.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:189) */
/* 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:190) */
.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:195) */
.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:196) */
.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:197) */
.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:201) */
/* 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:202) */
/* 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:204) */
.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:205) */
.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:206) */
.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:207) */
.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:208) */
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:209) */
.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:210) */
.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:211) */
.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:212) */
#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:214) */
/* 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:216) */
.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:217) */
.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:218) */
.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:221) */
/* 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:222) */
.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:223) */
.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:225) */
.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:227) */
.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:228) */
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:229) */
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:231) */
/*
   * 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:233) */
.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:241) */
: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:250) */
/* 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:251) */
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:252) */
.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:253) */
.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 */