/* ============================================================
   AYASA — dark, cinematic, materials-driven
   Palette: charcoal steel + slate blue (logo) + annealing
   spectrum (gold → ember → deep blue)
   ============================================================ */

:root {
  --bg: #0d0e11;
  --bg-2: #14161b;
  --bg-3: #1b1e25;
  --ink: #ece9e2;
  --muted: #a09d94;
  --line: rgba(236, 233, 226, 0.1);
  --brand: #657599;       /* Ayasa slate — from the logo */
  --brand-light: #8b98b8;
  --brand-deep: #4a5878;
  --brand-fill: #2e3648;
  --slate: #8b98b8;
  --slate-deep: #4a5878;
  --gold: #d9a45b;
  --ember: #c96a3b;
  --deepblue: #3f5b8f;
  --anneal: linear-gradient(90deg, #d9a45b 0%, #c96a3b 38%, #7a4a63 68%, #3f5b8f 100%);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
a { color: var(--slate); text-decoration: none; }
a:hover { color: var(--ink); }
strong { font-weight: 600; }

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brand-light);
  margin-bottom: 1.1rem;
  font-weight: 500;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  transition: box-shadow 0.35s ease;
}
/* the scrolled backdrop lives on a pseudo-element: backdrop-filter on .nav itself
   would make the nav the containing block for the fixed-position mobile menu,
   pinning the full-screen overlay inside the 60px bar */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(13, 14, 17, 0.92); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity 0.35s ease;
}
.nav.scrolled { box-shadow: 0 1px 0 var(--line); }
.nav.scrolled::before { opacity: 1; }
.nav-logo { font-size: 0.85rem; letter-spacing: 0.3em; color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: 0.7rem; }
.nav-logo img { display: block; }
.nav-logo span { color: var(--brand-light); margin: 0 0.15em; }
.hero-mark { display: block; margin: 0 auto 1.6rem; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5)); }
.footer-badge { display: block; margin-bottom: 1rem; }
.nav-links { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); align-items: center; }
.nav-links a { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  border: 1px solid var(--slate-deep); border-radius: 999px;
  padding: 0.35rem 1.1rem; color: var(--ink) !important;
}
.nav-cta:hover { background: var(--slate-deep); }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: 0.25s; }

/* ---------- buttons ---------- */
/* de-nativised so <button class="btn"> looks identical to <a class="btn">:
   without this, form buttons keep the UA's 2px outset bevel and Arial */
.btn {
  display: inline-block; border-radius: 999px; padding: 0.75rem 1.7rem;
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--anneal); color: #14110c; }
.btn-primary:hover { color: #000; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--slate); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,14,17,0.55) 0%, rgba(13,14,17,0.25) 45%, rgba(13,14,17,0.92) 100%);
}
.hero-inner { position: relative; text-align: center; max-width: 880px; padding: 6rem 1.5rem 4rem; }
.hero-sub { max-width: 560px; margin: 1.6rem auto 2.4rem; color: var(--muted); font-size: 1.05rem; }
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  color: var(--muted); font-size: 1.1rem; animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { background: var(--bg); padding: 2.4rem 1.4rem; text-align: center; }
.stat strong {
  display: block; font-family: var(--font-display); font-size: 2.4rem; font-weight: 400;
  color: var(--brand-light);
}
.stat span { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- sections ---------- */
/* --page-pad mirrors the horizontal padding so full-bleed strips inside a
   section can break out of it exactly (see the mobile clip and pill rows) */
.section {
  --page-pad: clamp(1.2rem, 6vw, 6rem);
  padding: clamp(4.5rem, 9vw, 8rem) var(--page-pad); max-width: 1280px; margin: 0 auto;
}
.section-head { max-width: 760px; margin-bottom: 3rem; }
.section-sub { color: var(--muted); margin-top: 1.2rem; }

/* ---------- story ---------- */
.story-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.story-text p { margin-bottom: 1.2rem; color: #c9c6be; }
.story-quote {
  border-left: 2px solid; border-image: var(--anneal) 1;
  padding: 0.4rem 0 0.4rem 1.8rem; margin-top: 0.4rem; position: sticky; top: 7rem;
}
.story-photo { width: 100%; height: auto; border-radius: 14px; margin-bottom: 1.4rem; display: block; }
.story-quote blockquote, .quote-card blockquote {
  font-family: var(--font-display); font-style: italic; font-size: 1.35rem; line-height: 1.5; color: var(--ink);
}
.story-quote figcaption, .quote-card figcaption { margin-top: 1.2rem; font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand-light); }

/* ---------- ember ---------- */
.section-ember { position: relative; }
.ember-band { height: 3px; background: var(--anneal); border-radius: 3px; margin-bottom: 3.5rem; max-width: 220px; }
.ember-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); }
.ember-text p { margin-bottom: 1.2rem; color: #c9c6be; }
.fact { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.6rem; margin-bottom: 1.1rem; }
.fact strong { display: block; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.fact p { color: var(--muted); font-size: 0.95rem; }
.palette { display: flex; gap: 6px; margin: 0.7rem 0 0.8rem; }
.palette span { flex: 1; height: 34px; border-radius: 7px; }
.palette span:nth-child(1) { background: linear-gradient(135deg, #e8b968, #c98f3e); }
.palette span:nth-child(2) { background: linear-gradient(135deg, #cf7040, #a94f2c); }
.palette span:nth-child(3) { background: linear-gradient(135deg, #8a5068, #5f3a55); }
.palette span:nth-child(4) { background: linear-gradient(135deg, #46648f, #2c4368); }

/* ---------- range ---------- */
.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
/* homepage tonality pills — same chips as the shop and product pages. Premium and
   Elements already have their own grids and headings here, so range pills would
   say nothing; tonality is what is worth filtering on this page. */
.range-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2rem; }
/* display:grid, so [hidden] needs saying out loud — same reason as .model-card */
.range-grid[hidden] { display: none; }
@media (max-width: 900px) {
  /* one sideways-scrolling row, full-bleed — see .scale-filters for why width:0
     plus min-width is what keeps a nowrap row from widening the whole page */
  .range-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: 0;
    min-width: calc(100% + 2 * var(--page-pad));
    margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad));
    padding-left: var(--page-pad); padding-right: var(--page-pad);
    scroll-padding-left: var(--page-pad);
  }
  .range-filters::-webkit-scrollbar { display: none; }
  .range-filters .filter-chip { flex: 0 0 auto; }
}
.model-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.7rem 1.7rem 1.5rem; display: flex; flex-direction: column; gap: 0.9rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.model-card:hover { transform: translateY(-4px); border-color: rgba(101, 117, 153, 0.55); }
/* featured cards: the photo owns the card's upper region at rest (solid core,
   long fade toward the text) and the mask breathes open to the full card on
   hover — the clear photograph, revealed */
@property --mask-solid { syntax: "<percentage>"; initial-value: 20%; inherits: false; }
@property --mask-fade { syntax: "<percentage>"; initial-value: 50%; inherits: false; }
/* isolation + negative z keep the photo under ALL card content without
   positioning the children — the stretched link must anchor to the card */
.model-card-photo { overflow: hidden; isolation: isolate; }
.model-card-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-size: cover; background-position: top right;
  opacity: 0.72;
  --mask-solid: 20%;
  --mask-fade: 50%;
  -webkit-mask-image: radial-gradient(140% 110% at 100% 0%, #000 var(--mask-solid), transparent var(--mask-fade));
  mask-image: radial-gradient(140% 110% at 100% 0%, #000 var(--mask-solid), transparent var(--mask-fade));
  transition: opacity 0.5s ease, --mask-solid 0.5s ease, --mask-fade 0.5s ease;
}
.model-card-photo:hover .model-card-bg { opacity: 0.9; --mask-solid: 85%; --mask-fade: 200%; }
.model-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.model-head h3 { font-size: 1.3rem; }
.model-scale { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--slate); }
.model-desc { color: var(--muted); font-size: 0.93rem; flex: 1; }
.notemap { display: flex; align-items: center; gap: 1.1rem; }
.notemap svg { flex: 0 0 auto; }
.notemap-bottom { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.notemap-bottom b { color: var(--brand-light); font-weight: 500; }
.model-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hear-btn {
  display: inline-flex; align-items: center; gap: 0.7rem; align-self: flex-start;
  background: var(--brand-fill); border: 1px solid var(--brand-deep); border-radius: 999px;
  color: var(--ink); padding: 0.5rem 1.1rem 0.5rem 0.6rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hear-btn:hover { border-color: var(--brand-light); background: var(--brand-deep); }
.hear-play {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--anneal); color: #14110c; font-size: 0.6rem; padding-left: 2px;
}
.model-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.95rem; }
.badge { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 999px; }
.badge-stock { background: rgba(120, 170, 120, 0.14); color: #9fce9f; }
.badge-order { background: rgba(115, 133, 176, 0.16); color: var(--slate); }
.model-price { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.model-link { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.elements-head { margin-top: 5.5rem; }
.range-grid-elements .model-card { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.range-note { margin-top: 2.2rem; color: var(--muted); font-size: 0.92rem; }

/* ---------- artists ---------- */
.section-artists {
  text-align: left; position: relative; overflow: hidden;
}
.section-artists::before {
  /* Petal-geometry watermark from the logo. Drawn as the visible CROP rather
     than as a 640px box hanging 220px past the section's right edge and 120px
     above its top: the box version needed the section to hide its overflow,
     which then cut off the video band, and clip-path could not save it because
     it paints without changing layout. Same pixels — a 640px image shown
     through a 420x520 window, offset to where the box used to sit. */
  content: ""; position: absolute; right: 0; top: 0; width: 420px; height: 520px;
  background: var(--watermark, none) no-repeat 0 -120px / 640px 640px;
  opacity: 0.05; pointer-events: none;
}
.feature-quote {
  display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden; margin-bottom: 1.4rem;
}
.feature-photo { align-self: stretch; }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.feature-body { padding: clamp(1.6rem, 4vw, 3rem); position: relative; }
.feature-body::before {
  content: "“"; position: absolute; top: -0.35em; left: 0.3rem;
  font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--brand); opacity: 0.22;
}
.feature-body blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.45; color: var(--ink);
}
.feature-body figcaption { margin-top: 1.6rem; }
.feature-body figcaption strong { display: block; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.feature-body figcaption span { display: block; margin-top: 0.3rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-light); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.quote-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 2rem; position: relative;
}
.quote-card::before {
  content: "“"; position: absolute; top: 0.15em; left: 1rem;
  font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--brand); opacity: 0.2;
}
.quote-card blockquote { font-size: 1.12rem; position: relative; }
.quote-card figcaption strong { display: block; color: var(--ink); letter-spacing: 0.06em; }
.quote-card figcaption span { display: block; margin-top: 0.2rem; color: var(--muted); letter-spacing: 0.08em; font-size: 0.68rem; }
.with-avatar { display: flex; align-items: center; gap: 0.9rem; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  border: 1px solid var(--brand-deep); flex: 0 0 auto;
}

/* ---------- player carousel ---------- */
.carousel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 2.6rem 0 1.2rem;
}
.carousel-head p { color: var(--muted); font-size: 1.02rem; }
.carousel-head strong { color: var(--brand-light); font-weight: 600; }
/* Four across, fixed rather than auto-fit: the homepage shows seven artists
   plus the "more" card, which is exactly two full rows. auto-fit made the
   count follow the window width, so the two pages disagreed. */
.player-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .player-grid { grid-template-columns: repeat(3, 1fr); }
}
.player-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
}
/* Square, not the taller 4/4.4 it was when the name sat on the photo. These
   are landscape 600x450 originals cropped to portrait, so a shorter card keeps
   MORE of the original width — 450px of crop instead of 409px. Shorter and
   sharper at the same time. */
.player-card > img {
  width: 100%; aspect-ratio: 4 / 4; object-fit: cover; object-position: 50% 22%; display: block;
}
.player-info { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.player-info h3 { font-size: 1.2rem; line-height: 1.25; }
.player-cred {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--brand-light); line-height: 1.4;
}
.player-quote {
  font-family: var(--font-display); font-style: italic;
  font-size: 0.92rem; line-height: 1.45; color: var(--muted);
}
/* the whole card is an anchor now, so hover and focus live on the card itself */
.player-card-linked { transition: transform 0.25s ease, border-color 0.25s ease; }
.player-card-linked:hover { transform: translateY(-4px); border-color: rgba(101, 117, 153, 0.55); }
.player-card-linked:focus-visible { border-color: var(--brand); outline: none; }

/* ---------- the full artists page ---------- */
.section-artists-page .section-head { max-width: 46rem; margin-bottom: 2.8rem; }
.section-artists-page .section-head p:not(.kicker) { color: var(--muted); margin-top: 0.9rem; }
.artists-page-foot {
  text-align: center; margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.4rem, 5vw, 4rem); border-top: 1px solid var(--line);
}
.artists-page-foot p { color: var(--muted); margin-bottom: 1.3rem; }

.player-card-more { justify-content: center; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.player-more-inner { text-align: center; padding: 2rem 1.6rem; }
.player-more-inner span {
  font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--brand-light); display: block;
}
.player-more-inner p { color: var(--muted); margin: 0.7rem 0 1.1rem; font-size: 0.95rem; }
.player-more-inner a { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---------- makers / partners ---------- */
.section-makers { border-top: 1px solid var(--line); }
.makers-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.makers-grid p { margin-bottom: 1.2rem; color: #c9c6be; }
.makers-grid .btn { margin-top: 0.6rem; }
.section-partners { text-align: center; }
.section-partners .section-head { margin-left: auto; margin-right: auto; }
.partner-cta { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.partner-cta span { color: var(--muted); font-size: 0.85rem; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 3.5rem clamp(1.2rem, 6vw, 6rem) 2rem; background: var(--bg-2); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2.4rem; max-width: 1280px; margin: 0 auto; }
.footer-logo { font-size: 0.85rem; letter-spacing: 0.3em; font-weight: 500; }
.footer-logo span { color: var(--brand-light); }
.footer-tag { color: var(--muted); font-size: 0.9rem; margin-top: 0.6rem; }
.footer-grid strong { display: block; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-light); margin-bottom: 0.7rem; }
.footer-grid p { color: var(--muted); font-size: 0.9rem; }
.newsletter { margin-top: 1rem; }
.newsletter label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.55rem; }
.newsletter-row { display: flex; gap: 0.5rem; }
.newsletter input {
  flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.6rem 1.1rem; color: var(--ink); font-family: var(--font-body); font-size: 0.9rem;
}
.newsletter input:focus { outline: none; border-color: var(--slate); }
.newsletter .btn { padding: 0.6rem 1.3rem; }
.footer-fine { max-width: 1280px; margin: 2.6rem auto 0; color: #6d6b64; font-size: 0.75rem; border-top: 1px solid var(--line); padding-top: 1.4rem; }

/* ---------- demo lightbox ---------- */
.demo-lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.demo-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 9, 11, var(--demo-backdrop, 0.88));
  backdrop-filter: blur(var(--demo-blur, 6px));
}
/* knobs that hold in either design (Settings → video player) */
.demo-lightbox.no-pills .demo-tabs { display: none; }
.demo-tabs { opacity: var(--pill-opacity, 1); }

/* ============================================================
   The carousel design. Everything here is scoped to .deck, so
   classic renders byte-identically to before the setting existed.
   ============================================================ */
/* the card chrome dissolves: what is left is the footage, and the words
   stand on the backdrop with nothing behind them */
.demo-lightbox.deck .demo-panel,
.demo-lightbox.no-panel .demo-panel {
  background: none; border: 0; box-shadow: none;
}
.demo-lightbox.deck .demo-panel {
  /* the base panel clips, to hide the video sliding during a classic swipe. The
     deck does not slide the video, and its outer cards are meant to run off the
     edges of a narrow window rather than be cut square. */
  overflow: visible;
  width: min(1500px, 96vw); max-width: none;
  height: 94svh; height: 94dvh; max-height: none;
  /* The maximized carousel is the bar's shape at full size: artist on the left
     where the title used to stand, clip and deck in the middle, instrument and
     its buy on the right. */
  display: grid; align-items: start; gap: 0 1.4rem;
  grid-template-columns: var(--exp-side, 300px) minmax(0, 1fr) var(--exp-side, 300px);
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 1rem 1.2rem 1.2rem;
}
/* height drives, so width follows the clip and the bars have nowhere to live.
   JS replaces the fallback ratio with the real one once metadata lands. */
/* the columns */
.demo-lightbox.deck .demo-stage { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; min-height: 0; }
.demo-lightbox.deck .demo-scroll {
  grid-column: 1; grid-row: 1 / span 2; align-self: end;
  max-height: 100%; overflow: hidden; padding: 0;
}
.demo-lightbox.deck .demo-mini-info {
  display: flex; flex-direction: column; gap: 0.3rem;
  grid-column: 3; grid-row: 1; align-self: end; position: static; height: auto; padding: 0;
}
.demo-lightbox.deck .demo-cta { grid-column: 3; grid-row: 2; align-self: end; margin: 0.35rem 0 0; }
/* The bar met this same duplication and answered it one way round (see its own
   rule further down): the buy row keeps the button and the heart, and the info
   block's pair goes. Maximized, the answer flips, because here the info block
   is on screen from the first frame while the bar below it only arrives after
   four seconds of watching — so off a product page, where that late bar is
   just the model's name and a shop button, both of which are printed directly
   above it, it is the late one that goes and nothing pops in.
   On a product page it stays: there it is the real buy bar, price and options
   and all, the one thing the block above it cannot do — and then the info
   block's own pair is the same offer twice, exactly as in the bar. */
.demo-lightbox.deck:not(.minimized) .demo-cta-shop { display: none; }
/* And now that this pair is the only one on the screen, it has to stand as a
   row. The row rule is mobile-only, and the heart's own place is the corner of
   the info block — which read fine while the bar underneath carried the real
   button-and-heart, and reads as a heart adrift now that it does not. The bar
   never needed this because it hides these two and keeps the buy row instead. */
.demo-lightbox.deck:not(.minimized) .demo-mini-actions {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: nowrap;
  margin-top: 0.45rem;
}
.demo-lightbox.deck:not(.minimized) .demo-mini-shop { flex: 0 0 auto; }
.demo-lightbox.deck:not(.minimized) .demo-mini-heart {
  position: static; width: 38px; height: 38px; flex: 0 0 auto;
}
.demo-lightbox.deck:not(.minimized) .demo-cta:not(.demo-cta-shop) ~ .demo-mini-info
  .demo-mini-actions { display: none; }
/* The words sit at the foot of the screen now, where the deck also reaches, so
   they need the same ground the bar gives them: the dark is complete by the
   time the words start and does its fading in the space above. It lies above
   the cards and below the playing clip, which separates the text from the
   thumbnails without laying a slab across the clip itself. */
.demo-lightbox.deck:not(.minimized) .demo-panel::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 20;
  height: var(--exp-fade, 0px); pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0, rgba(8, 9, 11, 0.93) var(--fade-len, 64px));
}
.demo-lightbox.deck:not(.minimized) .demo-scroll,
.demo-lightbox.deck:not(.minimized) .demo-mini-info,
.demo-lightbox.deck:not(.minimized) .demo-cta {
  position: relative; z-index: 22;   /* on top of that ground, not under it */
}
/* the deck names every artist on its own cards, so the pills have no job here */
.demo-lightbox.deck .demo-tabs { display: none; }
/* the two rules the old stacked layout needed to separate its rows */
.demo-lightbox.deck .demo-artist { border-top: 0; padding-top: 0; }
.demo-lightbox.deck .demo-cta-row { border-top: 0; padding-top: 0; }
/* the title leaves the scrim — the artist stands in that corner now */
.demo-lightbox.deck .demo-top {
  position: absolute; inset: 1rem 1.2rem auto auto; left: auto;
  z-index: 30; padding: 0; background: none;
}
.demo-lightbox.deck .demo-top-id { display: none; }
/* buying: the case picker and shirt chips are tall and this is a column, so it
   scrolls inside its own box rather than stretching the player */
.demo-lightbox.deck .demo-cta-casewrap { max-height: 46dvh; overflow-y: auto; }

.demo-lightbox.deck .demo-panel video {
  /* display:block is load-bearing: a video is inline by default, so the auto
     margins below never centred it and the whole deck hugged the left edge */
  display: block;
  width: auto; height: 100%; max-height: none;
  aspect-ratio: 9 / 16; object-fit: cover;
  margin: 0 auto; border-radius: var(--deck-radius, 14px); border-top: 0;
  position: relative; z-index: 21;
  transition: opacity 0.22s ease;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
/* the deck is measured onto the video's own box by layoutDeck, so a card is
   exactly a video and the centre one sits precisely underneath it */
/* The stage is the deck's world: the deck and the now-playing caption measure
   themselves into it, so fencing the deck is a matter of fencing this. On the
   expanded player it is just a box around the video and lets the deck spread. */
.demo-stage { position: relative; display: contents; }
.demo-lightbox.deck .demo-stage { display: block; }
.demo-deck { position: absolute; z-index: 5; pointer-events: none; }
.demo-slide {
  position: absolute; inset: 0; margin: 0; padding: 0;
  background: var(--bg-2); border: 0; cursor: pointer;
  border-radius: var(--deck-radius, 14px); overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
/* see layoutDeck: the maximized deck centres on the clip, so its cards scale
   about their own middle rather than rising from a shared baseline */
.demo-lightbox.deck:not(.minimized) .demo-slide { transform-origin: 50% 50%; }
.demo-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.demo-slide-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 0.7rem 0.6rem;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 11, 0.85));
  font-size: var(--card-name, 14px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the playing clip names its artist too. Its own element rather than the centre
   card's caption, because that card sits under the video in its own stacking
   context — layoutDeck puts this on the video's measured lower edge. */
.demo-now {
  position: absolute; z-index: 22; margin: 0; pointer-events: none;
  transform: translateY(-100%);
  padding: 1.6rem 0.8rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 11, 0.85));
  border-radius: 0 0 var(--deck-radius, 14px) var(--deck-radius, 14px);
  font-size: var(--now-name, 16px); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-slide:hover { filter: brightness(1.15); }
/* the deck already says which clip is playing */
.demo-lightbox.deck .demo-dots { display: none; }
@media (prefers-reduced-motion: reduce) {
  .demo-slide { transition: none; }
}
.demo-panel {
  position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 1.1rem 1.1rem 1rem; width: min(400px, 92vw); max-height: 92svh; display: flex; flex-direction: column; gap: 0.9rem;
  overflow: hidden; /* clips the sliding video during swipe / autoplay-next transitions */
}
.demo-top { display: flex; align-items: start; gap: 0.5rem; }
/* desktop card: title left, buttons right — the same three children the
   mobile scrim shows in natural order (chevron · title ····· close) */
.demo-top-id { order: -1; margin-right: auto; min-width: 0; }
.demo-title { font-family: var(--font-display); font-size: 1.25rem; }
.demo-title a, .demo-cta-price strong a { color: inherit; }
.demo-title a:hover, .demo-cta-price strong a:hover { color: var(--brand-light); }
.demo-sub { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-light); margin-top: 0.15rem; }
.demo-close {
  background: none; border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px;
  color: var(--muted); cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center;
}
.demo-close:hover { color: var(--ink); border-color: var(--brand); }
.demo-panel video {
  width: 100%; aspect-ratio: 9 / 16; max-height: 62svh; object-fit: contain;
  background: #000; border-radius: 12px;
  min-height: 0; /* lets the video give way gracefully when the buy form needs room */
}
/* tabs + artist live in a wrapper that can shrink and scroll (invisibly, with a
   fade hint) whenever the panel runs out of room — mobile sheet, mini-player,
   or a desktop lightbox with the case picker open */
.demo-scroll {
  display: flex; flex-direction: column; gap: 0.9rem;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.demo-scroll::-webkit-scrollbar { display: none; }
.demo-scroll.scroll-fade {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
}
.demo-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* the pills live one level down now (two rows the phone packs independently).
   Off mobile they all sit in the first row, which wraps exactly as the strip
   itself used to — without this the gap would fall between the ROWS only and
   the pills would jam together. */
.demo-tab-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.demo-tab-row:empty { display: none; }
.demo-tab {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); padding: 0.4rem 0.95rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.demo-tab:hover { color: var(--ink); border-color: var(--brand-deep); }
.demo-tab.active { background: var(--brand-fill); border-color: var(--brand); color: var(--ink); }
.demo-artist {
  display: flex; align-items: flex-start; gap: 0.85rem;
  border-top: 1px solid var(--line); padding-top: 0.9rem;
}
/* avatar centers on the name + credential lines, not the whole bio block */
.demo-artist-avatar, .demo-artist-initial { margin-top: 0.45rem; }
.demo-artist-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%;
  border: 1px solid var(--brand-deep); flex: 0 0 auto;
}
.demo-artist-initial {
  display: grid; place-items: center; background: var(--brand-fill);
  color: var(--brand-light); font-family: var(--font-display); font-size: 1.2rem;
}
.demo-artist-text { flex: 1; min-width: 0; }
.demo-artist-text strong a { color: var(--ink); }
.demo-artist-text strong a:hover { color: var(--brand-light); }
.demo-artist-text strong { display: block; font-size: 0.9rem; letter-spacing: 0.06em; }
.demo-artist-cred {
  display: block; margin-top: 0.15rem; font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand-light);
}
.demo-artist-bio { margin-top: 0.35rem; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.demo-artist-links { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.demo-artist-links a { color: var(--muted); display: inline-flex; padding: 0.15rem; }
.demo-artist-links a:hover { color: var(--brand-light); }


/* Expanded grid, layout B: full-height footage left, posters and words right. */
.demo-view-toggle {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: none; color: var(--muted); cursor: pointer;
}
.demo-view-toggle:hover { color: var(--ink); border-color: var(--brand); }
.demo-view-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
.demo-view-toggle svg { pointer-events: none; }
.demo-view-toggle[hidden], .demo-grid-heading, .demo-slide-state { display: none; }
.demo-view-toggle:focus-visible, .demo-slide:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
.demo-lightbox.deck.grid-active .demo-panel {
  grid-template-columns: var(--grid-video-width, 34%) minmax(0, 1fr) minmax(0, var(--grid-info-width, 300px));
  column-gap: clamp(18px, 2.4vw, 34px);
}
.demo-lightbox.deck.grid-active .demo-stage { grid-column: 1 / -1; grid-row: 1 / -1; }
.demo-lightbox.deck.grid-active .demo-panel video {
  position: absolute; inset: 0 auto auto 0; margin: 0;
  width: var(--grid-video-width); height: var(--grid-video-height);
}
.demo-lightbox.deck.grid-active .demo-scroll {
  grid-column: 2; grid-row: 1 / -1; max-height: 100%; overflow-y: auto;
}
.demo-lightbox.deck.grid-active .demo-mini-info { min-width: 0; }
.demo-lightbox.deck.grid-active .demo-mini-name { overflow-wrap: anywhere; }
.demo-lightbox.deck.grid-active .demo-artist-bio {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.demo-lightbox.deck.grid-active .demo-artist { flex-wrap: wrap; }
.demo-lightbox.deck.grid-active .demo-artist-links { flex-wrap: wrap; }
.demo-lightbox.deck.grid-active .demo-grid-heading {
  display: flex; align-items: center; gap: 0.8rem; height: 34px; margin: 0;
  position: absolute; top: 0; left: calc(var(--grid-video-width) + clamp(18px, 2.4vw, 34px));
  max-width: calc(100% - var(--grid-video-width) - 170px);
  font: 500 0.7rem/1.4 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap; overflow: hidden;
}
.demo-grid-heading span { color: var(--muted); font-size: 0.65rem; letter-spacing: 0.05em; }
.demo-lightbox.deck.grid-active .demo-deck {
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  pointer-events: auto; scrollbar-width: thin; scrollbar-color: var(--brand-deep) transparent;
}
.demo-lightbox.deck.grid-active .demo-deck { scrollbar-gutter: stable; }
.demo-lightbox.deck.grid-active .demo-slide img { object-fit: cover; object-position: center; }
.demo-lightbox.deck.grid-active .demo-deck::after {
  content: ""; display: block; width: 1px; height: var(--grid-content-height);
  pointer-events: none;
}
.demo-lightbox.deck.grid-active .demo-slide {
  inset: 0 auto auto 0; transform-origin: 0 0; opacity: 0.86;
  outline: 2px solid transparent; outline-offset: -2px;
  box-shadow: none; transition: transform 0.34s ease, opacity 0.2s ease;
}
.demo-lightbox.deck.grid-active .demo-slide:hover,
.demo-lightbox.deck.grid-active .demo-slide:focus-visible { opacity: 1; filter: none; outline-color: var(--brand-light); }
.demo-lightbox.deck.grid-active .demo-slide.current { opacity: 1; outline-color: var(--gold); }
.demo-lightbox.deck.grid-active.opening .demo-slide { transition: none; }
.demo-lightbox.deck.grid-active .demo-slide-name {
  font-size: var(--grid-card-name, 14px); text-align: left;
  white-space: normal; line-height: 1.3; letter-spacing: 0.035em;
  padding: 1.8rem 0.6rem 0.6rem;
}
.demo-lightbox.deck.grid-active .demo-slide.current .demo-slide-state {
  display: block; position: absolute; top: 0.5rem; left: 0.5rem;
  padding: 0.3rem 0.45rem; border-radius: 999px;
  background: rgba(8, 9, 11, 0.8); color: var(--gold);
  font: 600 9px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
}
.demo-lightbox.deck.grid-active .demo-now,
.demo-lightbox.deck.grid-active .demo-panel::after { display: none; }
.demo-lightbox.deck.grid-active .demo-cta { grid-template-rows: 1fr; transition: none; }
.demo-lightbox.deck.grid-active .demo-cta-inner { opacity: 1; transform: none; transition: none; }
.demo-lightbox.deck.grid-active .demo-cta-row { flex-wrap: wrap; }
.demo-lightbox.deck.grid-active .demo-cta-casewrap { max-height: 34dvh; }
@media (max-width: 900px) {
  .demo-lightbox.deck.grid-active .demo-grid-heading span { display: none; }
  .demo-lightbox.deck.grid-active .demo-mini-actions { flex-wrap: nowrap; }
  .demo-lightbox.deck.grid-active .demo-mini-shop { min-width: 0; flex: 1 1 auto; padding: 0.85rem 0.6rem; font-size: 0.64rem; letter-spacing: 0.08em; }
  .demo-lightbox.deck.grid-active .demo-artist-avatar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-lightbox.deck.grid-active .demo-slide { transition: none; }
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .story-grid, .ember-grid, .makers-grid { grid-template-columns: 1fr; }
  .story-quote { position: static; }
}
@media (max-width: 1020px) {
  .nav-links {
    position: fixed; inset: 0; background: rgba(13, 14, 17, 0.97);
    flex-direction: column; justify-content: center; gap: 1.6rem;
    transform: translateX(100%); transition: transform 0.3s ease;
  }
  .nav-links.open { transform: none; }
  .nav-links a { font-size: 1rem; }
  .nav-burger { display: flex; z-index: 110; }
  .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ============================================================
   SHOP — collection grid, product page, cart (Shopify port)
   ============================================================ */

/* ---------- collection ---------- */
.shop-section .section-head { margin-bottom: 1.6rem; }
.shop-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-bottom: 1.6rem; border-bottom: 1px solid var(--line); padding-bottom: 1rem;
}
.shop-toolbar-right { display: inline-flex; align-items: center; gap: 1.2rem; }
.shop-filters { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filter-chip {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); padding: 0.45rem 1.1rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.filter-chip:hover { color: var(--ink); border-color: var(--slate); }
.filter-chip.on { color: var(--ink); border-color: var(--brand); background: var(--brand-fill); }
/* a chip that navigates instead of filtering (a category that lives in another
   collection) — same skin, so the row reads as one set of choices. line-height is
   spelled out because an <a> inherits the body's, where a <button> defaults to
   normal: without it the link chip stands 4px taller than its neighbours. */
a.filter-chip {
  display: inline-flex; align-items: center;
  text-decoration: none; line-height: normal;
}

/* ---------- sticky filter rails ---------- */
/* One mechanism for every filter row on the site: homepage range, shop toolbar,
   product-page scales, artist listening room.
   The WRAPPER is what sticks, never the row itself — below 900px these rows are
   horizontal scrollers, and a sticky box inside its own scroll container sticks
   to that container, which looks exactly like nothing happening.
   Each rail releases where its parent ends, so a rail governs precisely its own
   grid and never floats on over the next block. --nav-h is published by initNav
   from the real bar height (it rides clamped padding, so it moves with width). */
/* --rail-pad is the band's TOTAL breathing room, split evenly above and below the
   pills. Pinning at nav-h + half of it, while the backdrop reaches back up by that
   same half, lands the band's top edge exactly on the nav's bottom with the pills
   centred inside. Pinning at plain nav-h hid the upper half behind the nav and left
   every bit of the slack below, which is what read as off-centre. Only the sticky
   offset moves, so nothing shifts in normal flow. */
.pill-rail {
  --rail-pad: 0.75rem;
  position: sticky; top: calc(var(--nav-h, 4.4rem) + var(--rail-pad) / 2); z-index: 60;
}
/* the backdrop rides a pseudo-element and bleeds to both edges — --page-pad
   mirrors the section padding, the same trick the mobile strips use. It fades in
   only while pinned, so in normal flow the row sits on the page as it always did.
   Insets rather than padding: real padding would shift the layout on stick. */
.pill-rail::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(var(--rail-pad) / -2) calc(var(--page-pad, 1.2rem) * -1);
  background: rgba(13, 14, 17, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  opacity: 0; transition: opacity 0.3s ease;
}
.pill-rail.stuck::before { opacity: 1; }
/* the region a rail governs, tagged by stickyRail. Scroll anchoring would shift
   scrollY on its own when a filter collapses the grid, competing with the
   deliberate alignment that follows — see alignToFilteredTop. */
.pill-rail-scope { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) { .pill-rail::before { transition: none; } }
.shop-count { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.shop-sort { color: var(--muted); font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.6rem; }
select, .shop-sort select {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; padding: 0.55rem 0.9rem;
}
select:focus { outline: none; border-color: var(--slate); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.shop-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.shop-card:hover { transform: translateY(-4px); border-color: rgba(101, 117, 153, 0.55); color: var(--ink); }
.shop-card-photo { aspect-ratio: 1; background: #fff; }
.shop-card-photo img { width: 100%; height: 100%; object-fit: contain; }
.shop-card-body { padding: 1.2rem 1.4rem 1.3rem; display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; flex: 1; }
.shop-card-body h3 { font-size: 1.15rem; }
.shop-card-price { margin-top: auto; font-family: var(--font-display); font-size: 1.1rem; }
.shop-card-price s { color: var(--muted); margin-right: 0.5rem; font-size: 0.9rem; }
.badge-soldout { background: rgba(200, 90, 80, 0.15); color: #d99a8f; }
.shop-pagination { margin-top: 2.4rem; text-align: center; color: var(--muted); }
.shop-pagination span, .shop-pagination a { padding: 0.3rem 0.7rem; }

/* ---------- product page ---------- */
.product-section { padding-top: clamp(6.5rem, 10vw, 9rem); }
/* Desktop: gallery left, head + info stacked on the right. The clips are NOT in
   here — they sit full width above Keep exploring, at a size worth looking at.
   Mobile (below): one column, reordered so the name and price come before the
   photo and the clips before the buy. */
.product-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "gallery head"
    "gallery info";
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.product-photo { background: #fff; border-radius: 16px; overflow: hidden; position: relative; }
.product-photo img { width: 100%; height: auto; display: block; }
/* gallery carousel: photos only — performances live in their own strip below */
.gal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(13, 14, 17, 0.55); color: var(--ink); cursor: pointer;
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  backdrop-filter: blur(4px); transition: background 0.2s ease, border-color 0.2s ease;
}
.gal-nav:hover { border-color: var(--slate); background: rgba(13, 14, 17, 0.78); }
.gal-prev { left: 0.8rem; }
.gal-next { right: 0.8rem; }
/* the thumbnail row and the video strip below it share one width:
   6 thumbs + their gaps === 4 video cards + theirs */
.product-section { --strip-gap: 0.6rem; --demo-card-w: 118px; }
.product-thumbs { display: flex; gap: var(--strip-gap); margin-top: 0.8rem; flex-wrap: wrap; }
.product-thumb {
  width: calc((4 * var(--demo-card-w) - 2 * var(--strip-gap)) / 6); aspect-ratio: 1;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: #fff; padding: 0; opacity: 0.65; transition: 0.2s;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb:hover, .product-thumb.active { opacity: 1; border-color: var(--slate); }
.product-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 0.9rem; }
.product-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.product-price { font-family: var(--font-display); font-size: 1.5rem; }
.product-price s { color: var(--muted); font-size: 1.1rem; margin-right: 0.6rem; }
.product-notes { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; }
.product-desc { color: #c9c6be; margin-bottom: 1.8rem; }
.product-desc p { margin-bottom: 1rem; }
.desc-more { display: none; }
/* The reveal pill, defined once for both screens. Only `display` belongs to a
   breakpoint: a side-scrolling phone has no rows to hide, so it starts off and
   each grid turns it on. It used to be dressed inside the desktop block alone,
   which left the phone grid's button in the browser's own chrome — white, and
   nothing like the rest of the page. */
.demos-more {
  display: none; margin: 1.2rem auto 0;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); padding: 0.5rem 1.3rem; cursor: pointer;
  font-family: var(--font-body); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.demos-more:hover { color: var(--ink); border-color: var(--slate); }
.demos-more[hidden] { display: none; }
/* a phone shows the clips as a grid when the studio says so, and then it has
   rows to hide like the desktop does */
@media (max-width: 900px) {
  /* --demo-cols is set by fitDemoRows from the studio's answer; the 2 here is
     the fallback for a theme whose data file predates the knob, and is what
     this grid drew before it existed. */
  .product-demos .demo-strip[data-mobile="grid"] {
    display: grid; grid-template-columns: repeat(var(--demo-cols, 2), minmax(0, 1fr)); gap: 0.7rem;
    width: auto; min-width: 0; overflow-x: visible; scroll-snap-type: none;
  }
  .product-demos .demo-strip[data-mobile="grid"] .demo-card {
    flex: none; width: auto; min-width: 0; scroll-snap-align: none;
  }
  .product-demos .demo-strip[data-mobile="grid"] .demo-card[hidden] { display: none; }
  .demo-strip[data-mobile="grid"] ~ .demos-more { display: block; }
  .demo-strip[data-mobile="grid"] ~ .demos-more[hidden] { display: none; }
  /* Past three columns the card is narrower than the things drawn on it —
     measured on a 375px phone: at four columns the card is 74px and an artist
     name needs 81px, and by six the 43px play badge covers 94% of it. So below
     100px the badge is sized from the card instead of fixed, and the name goes
     rather than clip. The card asks its own width for this (container query),
     so it stays right whatever the column count and the phone together make. */
  .product-demos .demo-strip[data-mobile="grid"] .demo-card { container-type: inline-size; }
  /* the full .product-demos path on purpose: the fixed 43px badge is set later
     in this file at (0,2,0), and a container query adds no specificity of its own */
  @container (max-width: 99px) {
    .product-demos .demo-strip[data-mobile="grid"] .demo-card-info { display: none; }
    .product-demos .demo-strip[data-mobile="grid"] .demo-card-play {
      width: 42cqw; height: 42cqw; font-size: 17cqw; padding-left: 1cqw;
    }
  }
}
/* live total (handpan + case) just above the buy button */
.buy-total { margin: 0 0 0.7rem; font-family: var(--font-display); font-size: 1.05rem; }
.buy-total[hidden] { display: none; }

/* Order-now step: the choices unfold in place, pushing only the button down.
   .collapsible is added by JS wherever the two-step applies, so a page without
   options keeps the plain form. */
.buy-options.collapsible {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.buy-options.collapsible.open { grid-template-rows: 1fr; }
.buy-options.collapsible .buy-options-inner { overflow: hidden; min-height: 0; }
/* the post-reveal scroll parks Add to cart at the screen's bottom edge */
.buy-row { scroll-margin-bottom: 12px; }
/* opening the case picker lifts its label clear of the fixed header */
.product-option { scroll-margin-top: 70px; }

/* ---------- desktop clips: full width above Keep exploring ----------
   Chosen over the small strip that used to sit under the gallery thumbnails
   (2026-08-13). A grid that fills the row rather than a strip running off the
   edge, like the artist page, at a size where the play button and the artist's
   name are actually readable. Mobile keeps the side-scrolling strip. */
@media (min-width: 901px) {
  /* full width under both columns: an implicit third row spanning the grid. It
     stays a grid CHILD so the mobile `order: 3` keeps working — the clips belong
     between the price and the buy area on a phone. */
  .product-demos { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 3rem); }
  .product-demos .demo-strip {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 44vw), 1fr));
    width: auto; min-width: 0; overflow-x: visible;
  }
  .product-demos .demo-card {
    flex: none; min-width: 0; border-radius: 16px;
  }
  .product-demos .demo-card[hidden] { display: none; }
  /* one row, the rest behind the button — see fitDemoRows. The look is in the
     base rule; the desktop only decides that the button is there at all
     ([hidden] still wins on specificity). */
  .demos-more { display: block; }
  .product-demos .demo-card-info { left: 1rem; right: 1rem; bottom: 0.95rem; }
  .product-demos .demo-card-info strong { font-size: 1.08rem; }
  .product-demos .demo-card-info span { display: block; }
  .product-demos .demo-card-play { width: 54px; height: 54px; font-size: 0.85rem; padding-left: 4px; }
  /* the description is trimmed to land the buy button level with the gallery's
     thumbnails, so it needs its Read more on desktop too */
  .desc-more {
    display: inline-block; margin: 0.2rem 0 1.4rem; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--brand-light); font-family: var(--font-body);
    font-size: 0.8rem; letter-spacing: 0.06em;
  }
  .desc-more[hidden] { display: none; }
  .product-desc.clamped {
    display: -webkit-box; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 0;
  }
}
.product-option { margin-bottom: 1.3rem; }
.product-option label { display: block; font-size: 0.85rem; letter-spacing: 0.06em; margin-bottom: 0.5rem; color: var(--ink); }
.option-required { display: block; color: var(--muted); font-size: 0.78rem; letter-spacing: 0; margin-top: 0.15rem; }
.product-option select { width: 100%; }
.option-row { display: flex; gap: 0.6rem; }
.option-row select { flex: 1; }
.option-note { color: #d99a8f; font-size: 0.82rem; margin-top: 0.5rem; }
.option-error { color: #d99a8f; font-size: 0.88rem; margin-bottom: 1rem; }
.product-buy { width: 100%; text-align: center; cursor: pointer; border: 0; font-family: var(--font-body); }
.product-buy[disabled] { opacity: 0.55; cursor: default; transform: none; }

/* ---------- cart ---------- */
.cart-section { padding-top: clamp(6.5rem, 10vw, 9rem); max-width: 980px; }
.cart-lines { border-top: 1px solid var(--line); }
.cart-line {
  display: grid; grid-template-columns: 84px 1fr auto auto; gap: 1.2rem; align-items: center;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line);
}
/* sized to its grid track, not a fixed width — the mobile rule narrows the
   column to 64px, and a hard 84px spilled into the text and closed the gap */
.cart-line-photo { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #fff; }
.cart-line-photo img { width: 100%; height: 100%; object-fit: contain; }
.cart-line-title { display: block; color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; }
.cart-line-title:hover { color: var(--brand-light); }
.cart-line-prop { color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; }
.cart-line-remove { display: inline-block; margin-top: 0.4rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cart-line-remove:hover { color: #d99a8f; }
.cart-line-qty input {
  width: 64px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-family: var(--font-body); padding: 0.5rem 0.6rem; text-align: center;
}
.cart-line-price { font-family: var(--font-display); font-size: 1.05rem; text-align: right; }
.cart-summary { margin-top: 1.8rem; margin-left: auto; max-width: 380px; }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 1.15rem; font-family: var(--font-display); }
.cart-summary-note { color: var(--muted); font-size: 0.82rem; margin: 0.6rem 0 1.2rem; }
/* cart guard: an instrument without a case can't be shipped, so checkout waits */
.cart-blocked {
  border: 1px solid rgba(200, 90, 80, 0.45); border-radius: 14px;
  background: rgba(200, 90, 80, 0.07); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.cart-blocked-title { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.35rem; }
.cart-blocked-note { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.cart-blocked-cases {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem; margin-top: 0.9rem;
}
.cart-actions { display: flex; gap: 0.7rem; justify-content: flex-end; }
.cart-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.cart-actions .btn { cursor: pointer; border-width: 1px; font-family: var(--font-body); }
.cart-actions .btn-ghost { background: none; }

@media (max-width: 900px) {
  /* one column, resequenced: name and price answer "what and how much" before
     the photo, and the performances come before the buy decision — on a scale
     bought for its sound, hearing it has to precede Add to cart */
  /* row-gap off: each block sets its own, so the clips can sit 0.8rem under
     the thumbnails exactly as they do on desktop */
  .product-grid { grid-template-columns: 1fr; grid-template-areas: none; row-gap: 0; }
  /* gallery, then what it is and what it costs, then the performances */
  .product-gallery { order: 1; }
  .product-head { order: 2; margin-top: 1.4rem; }
  /* the price is the last line of the head here — its own bottom margin would
     stack with the strip's, leaving a 45px trench */
  .product-head .product-meta { margin-bottom: 0; }
  /* .product-grid prefix: the base .product-demos margin sits later in the file */
  .product-grid .product-demos { order: 3; margin-top: 1.1rem; }
  .product-info { order: 4; margin-top: 1.6rem; }
  /* both rows fill the column, so photo, thumbnails and clips share their edges */
  .product-thumb { width: calc((100% - 5 * var(--strip-gap)) / 6); }
  /* the clip sizing lives next to the .product-demos block below — same
     specificity, so it has to come later in the file to win */
  .cart-line { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; }
  .cart-line-qty { grid-column: 1; }
  .cart-line-price { grid-column: 2; text-align: left; }
}

/* ---------- Shopify cookie-consent banner: minimal, dark ---------- */
#shopify-pc__banner.shopify-pc__banner__dialog {
  /* compact card, bottom-left, instead of the default full-width white bar */
  position: fixed !important;
  inset: auto auto 20px 20px !important;
  width: min(400px, calc(100vw - 40px)) !important;
  padding: 1.1rem 1.2rem 1rem !important;
  background: rgba(20, 22, 27, 0.96) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
}
#shopify-pc__banner__body-title {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--brand-light) !important;
  font-weight: 500 !important;
  margin: 0 0 0.5rem !important;
}
#shopify-pc__banner .shopify-pc__banner__body,
#shopify-pc__banner .shopify-pc__banner__body p {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
#shopify-pc__banner__body-policy-link {
  color: var(--slate) !important;
  text-decoration: none !important;
}
#shopify-pc__banner__body-policy-link:hover { color: var(--ink) !important; }
#shopify-pc__banner .shopify-pc__banner__btns {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 0.9rem !important;
  flex-wrap: wrap !important;
}
/* Accept + Decline: equal-weight pills (kept equally prominent for compliance) */
#shopify-pc__banner__btn-accept,
#shopify-pc__banner__btn-decline {
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  padding: 0.45rem 1.15rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}
#shopify-pc__banner__btn-accept {
  background: var(--anneal) !important;
  color: #14110c !important;
  border: 0 !important;
}
#shopify-pc__banner__btn-decline {
  background: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
#shopify-pc__banner__btn-decline:hover { border-color: var(--slate) !important; }
#shopify-pc__banner__btn-manage-prefs {
  order: 3;
  background: none !important;
  border: 0 !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  cursor: pointer !important;
  padding: 0.45rem 0.3rem !important;
  margin: 0 !important;
  width: auto !important;
}
#shopify-pc__banner__btn-manage-prefs:hover { color: var(--ink) !important; }
#shopify-pc__banner__btn-manage-prefs span { font-size: inherit !important; }

/* ---------- cookie preferences modal, same treatment ---------- */
#shopify-pc__prefs .shopify-pc__prefs__dialog,
#shopify-pc__prefs__dialog,
.shopify-pc__prefs__dialog {
  background: var(--bg-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  font-family: var(--font-body) !important;
}
#shopify-pc__prefs h2, #shopify-pc__prefs h3 {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}
#shopify-pc__prefs p, #shopify-pc__prefs label, #shopify-pc__prefs span {
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
}
#shopify-pc__prefs a { color: var(--slate) !important; }
#shopify-pc__prefs .shopify-pc__prefs__option {
  border-color: var(--line) !important;
}
#shopify-pc__prefs button {
  font-family: var(--font-body) !important;
  border-radius: 999px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  cursor: pointer !important;
}
#shopify-pc__prefs__header-accept, #shopify-pc__prefs__save {
  background: var(--anneal) !important;
  color: #14110c !important;
  border: 0 !important;
}
#shopify-pc__prefs__header-decline {
  background: none !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}
#shopify-pc__prefs__header-save {
  background: var(--brand-fill) !important;
  border: 1px solid var(--brand-deep) !important;
  color: var(--ink) !important;
}
#shopify-pc__prefs__header-save:hover { border-color: var(--brand-light) !important; }
#shopify-pc__prefs__header-close {
  border-color: var(--line) !important;
  color: var(--muted) !important;
  background: none !important;
}
#shopify-pc__prefs__header-close svg, #shopify-pc__prefs__header-close path,
#shopify-pc__prefs__header-close circle {
  fill: none !important;
  stroke: var(--muted) !important;
}

/* ============================================================
   MOBILE — breakpoint fixes & polish
   ============================================================ */

@media (max-width: 900px) {
  /* the artists feature grid demanded ~524px min-width and widened
     every section on phones (min-content propagates through the
     .shopify-section grid wrapper) — stack it instead */
  .feature-quote { grid-template-columns: 1fr; }
  .feature-photo img { min-height: 0; max-height: 360px; }
}

@media (max-width: 520px) {
  /* nav: keep wordmark + burger inside 375px */
  .nav { padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .nav-logo { font-size: 0.72rem; letter-spacing: 0.2em; gap: 0.55rem; }
  .nav-logo img { width: 26px; height: 26px; }

  /* calmer hero headline wrap on small screens */
  h1 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
  .hero-sub { font-size: 0.95rem; }
  .hero-ctas .btn { padding: 0.7rem 1.4rem; }

  /* section rhythm a touch tighter */
  .section-head { margin-bottom: 2.2rem; }

  /* stats: 2-up, odd last stat spans the full row (no empty cell) */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* artists: two across rather than four full-height cards to scroll past */
  .player-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  /* the credential is back below the photo, where extra lines cost height
     rather than covering the artist's face */
  .player-info { padding: 0.8rem 0.85rem 0.95rem; gap: 0.3rem; }
  .player-info h3 { font-size: 1.05rem; }
  /* tracking, not size, is what costs lines here — at 145px the longest
     credentials tip onto a fourth line as soon as it opens up */
  .player-cred { font-size: 0.56rem; letter-spacing: 0.04em; }
  .player-quote { font-size: 0.8rem; line-height: 1.4; }
  .player-more-inner { padding: 1.4rem 1rem; }
  .player-more-inner span { font-size: 2.6rem; }

  /* product page */
  .product-section { padding-top: 5.6rem; }
  .product-head h1 { font-size: 1.7rem; }
  .product-price { font-size: 1.3rem; }
  .option-row { flex-direction: column; gap: 0.5rem; }
  /* width comes from the column (see the 900px block) — height follows aspect-ratio */

  /* collection toolbar wraps cleanly */
  .shop-toolbar { flex-wrap: wrap; }

  /* cart: summary uses full width, buttons stretch */
  .cart-section { padding-top: 5.6rem; }
  .cart-summary { max-width: none; }
  .cart-actions { justify-content: stretch; }
  .cart-actions .btn { flex: 1; text-align: center; }

  /* footer + newsletter breathing room */
  .footer { padding-top: 2.6rem; }

  /* cookie banner hugs the full width minus margin */
  #shopify-pc__banner.shopify-pc__banner__dialog {
    inset: auto 14px 14px 14px !important;
    width: auto !important;
  }
}

/* ---------- product page: "Hear it played" performance strip ---------- */
/* compact video strip: a third grid child that fills the dead space under the
   thumbnails, so the performances sit beside the buy area instead of below the
   fold. On mobile the grid is one column and it lands after the buy button. */
.product-demos { margin-top: 0.8rem; } /* same gap the thumbnails keep from the photo */
.product-demos[hidden] { display: none; }
.product-demos .demo-strip { gap: var(--strip-gap); padding-bottom: 0.3rem; }
/* full portrait frame, uncropped — only the width is scaled down */
.product-demos .demo-card { flex: 0 0 var(--demo-card-w); border-radius: 12px; }
.product-demos .demo-card-play { width: 43px; height: 43px; font-size: 0.68rem; padding-left: 3px; }
.product-demos .demo-card-info { left: 0.55rem; right: 0.55rem; bottom: 0.5rem; }
.product-demos .demo-card-info strong { font-size: 0.8rem; }
.product-demos .demo-card-info span { display: none; } /* credential is unreadable this small */
@media (min-width: 901px) {
  .product-grid { row-gap: 0; }
  .product-head { grid-area: head; }
  .product-gallery { grid-area: gallery; }
  .product-info { grid-area: info; }
  /* no `demos` area any more — the clips live outside this grid now */
}
@media (max-width: 900px) {
  /* the description opens to two lines; the rest is a tap away, so the buy
     form stays within reach on a phone */
  .product-desc.clamped {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden; margin-bottom: 0.6rem;
  }
  .product-desc.clamped p { margin-bottom: 0; }
  /* centred and close under the clamped text */
  .desc-more {
    display: block; margin: 0.5rem auto 1.6rem; padding: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--brand-light); font-family: var(--font-body);
    font-size: 0.8rem; letter-spacing: 0.06em;
  }
  .desc-more[hidden] { display: none; }
  /* clips keep their desktop size and scroll sideways — the cut-off card is
     the affordance. Full-bleed to the screen edge; the first card still lines
     up with the photo thanks to the matching padding. */
  .product-demos { min-width: 0; }
  /* same guard as the filters: zero min-content, full-bleed rendered width */
  .product-demos .demo-strip {
    width: 0;
    min-width: calc(100% + 2 * var(--page-pad));
    margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad));
    padding-left: var(--page-pad); padding-right: var(--page-pad);
    scroll-padding-left: var(--page-pad);
  }
}
.demo-strip {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 0.8rem;
  scrollbar-width: thin; scrollbar-color: var(--brand-deep) transparent;
  /* scroll container must not inflate the section (grid min-content) */
  width: 0; min-width: 100%;
}
.demo-card {
  position: relative; flex: 0 0 min(230px, 62vw); aspect-ratio: 9 / 16;
  border-radius: 16px; overflow: hidden; cursor: pointer; scroll-snap-align: start;
  border: 1px solid var(--line); background: var(--bg-2);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* no hover lift here — the inline preview is the hover response; a quiet
   border glow is the only static cue */
.demo-card:hover, .demo-card:focus-visible { border-color: rgba(101, 117, 153, 0.55); }
.demo-card:focus-visible { outline: 1px solid var(--brand); outline-offset: 3px; }
.demo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* label rides on top so a half-scrolled card already tells you its scale */
.demo-card::after {
  content: ""; position: absolute; inset: 0 0 45% 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.82), rgba(8, 9, 11, 0.35) 55%, transparent);
}
.demo-card-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); z-index: 2;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--anneal); color: #14110c;
  display: grid; place-items: center; font-size: 0.85rem; padding-left: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  transition: opacity 0.4s ease;
}
/* while a preview is playing the badge whispers instead of blocking the view */
.demo-card:has(.demo-preview.on) .demo-card-play { opacity: 0.4; }
/* hover preview: a pure cross-fade — poster dissolves into the playing
   video, nothing moves */
.demo-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-preview.on { opacity: 1; }
/* watched marker: quiet text on cards already opened this session */
.demo-card.watched::before {
  content: "watched"; position: absolute; bottom: 0.85rem; right: 1rem; z-index: 3;
  font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(236, 233, 226, 0.78);
  background: rgba(13, 14, 17, 0.6); border-radius: 999px; padding: 0.2rem 0.65rem;
  backdrop-filter: blur(3px);
}
.demo-card-info { position: absolute; left: 1rem; right: 1rem; top: 0.9rem; z-index: 2; }
/* side-scrolling strips (product pages): cards are always fully visible, so
   labels sit at the bottom as before and the watched tag takes the top corner */
.demo-strip .demo-card::after {
  inset: 40% 0 0 0;
  background: linear-gradient(180deg, transparent, rgba(8, 9, 11, 0.9));
}
.demo-strip .demo-card-info { top: auto; bottom: 0.95rem; }
.demo-strip .demo-card.watched::before { bottom: auto; top: 0.85rem; }
.demo-card-info strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.08rem; color: var(--ink); line-height: 1.2;
}
.demo-card-info span {
  display: block; margin-top: 0.3rem; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-light);
}

/* ---------- homepage model cards: whole card clickable ---------- */
.model-card { position: relative; }
/* stretched link: the "View in shop" anchor covers the entire card */
.model-card-linked .model-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* interactive children stay above the stretched link */
.model-actions { position: relative; z-index: 2; }
/* only genuinely clickable cards behave clickable */
.model-card:not(.model-card-linked):hover { transform: none; border-color: var(--line); }
/* hovering anywhere on the card confirms the destination.
   NB: never transform .model-link itself — a transform would turn it into
   the containing block for its stretched ::after and collapse the overlay. */
.model-link { transition: color 0.2s ease; }
.model-link .arrow { display: inline-block; transition: transform 0.2s ease; }
.model-card-linked:hover .model-link { color: var(--ink); }
.model-card-linked:hover .model-link .arrow { transform: translateX(4px); }
.model-card-linked:has(.model-link:focus-visible) { border-color: var(--brand); }

/* ---------- lightbox buy bar (product pages only) ---------- */
/* the bar sits collapsed in the layout (0fr row + a negative margin cancelling
   the panel's flex gap); reveal grows the space over 2s, then the content
   fades in over 2s starting 1s into the growth */
.demo-cta {
  display: grid; grid-template-rows: 0fr;
  margin-top: -0.9rem;
  transition: grid-template-rows 2s cubic-bezier(0.16, 1, 0.3, 1), margin-top 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.demo-cta.visible { grid-template-rows: 1fr; margin-top: 0; }
.demo-cta-inner {
  overflow: hidden; min-height: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, transform 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.demo-cta.visible .demo-cta-inner { opacity: 1; transform: none; }
.demo-cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--line); padding-top: 0.85rem;
}
.demo-cta-price { margin: 0; }
.demo-cta-price s { color: var(--muted); margin-right: 0.5rem; font-size: 0.85rem; }
.demo-cta-price strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; color: var(--ink); }
.demo-cta-btn { cursor: pointer; border: 0; font-family: var(--font-body); padding: 0.55rem 1.3rem; white-space: nowrap; }
.demo-cta-btn[disabled] { opacity: 0.6; cursor: default; }
.demo-cta-casewrap {
  margin-top: 0.75rem; max-height: 34svh; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: none;
}
.demo-cta-casewrap::-webkit-scrollbar { display: none; }
.demo-cta-casewrap label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.4rem; }
.demo-case-picker { grid-template-columns: repeat(3, 1fr); margin-top: 0.4rem; }
.demo-case-label { margin-top: 0.85rem; }
.demo-cta-casewrap > label:first-child { margin-top: 0; }
/* the borrowed options block arrives with the page's own fold applied; inside
   the bar it is always open, and its margins are the bar's to set */
.demo-cta-casewrap #buyOptions { display: block; margin: 0; }
.demo-cta-casewrap #buyOptions .buy-options-inner { overflow: visible; }
.demo-cta-casewrap .product-option { margin-bottom: 1rem; }
.demo-cta-casewrap .product-option:last-child { margin-bottom: 0; }
.demo-cta-casewrap .shirt-picker { grid-template-columns: repeat(4, 1fr); }
.demo-cta-add {
  display: block; width: 100%; margin-top: 0.8rem; padding: 0.7rem 1rem;
  border: 0; cursor: pointer; text-align: center; font-family: var(--font-body);
}
.demo-cta-add[disabled] { opacity: 0.6; cursor: default; }
.demo-cta-add[hidden] { display: none; } /* display:block above would defeat [hidden] */
/* step 1 → step 2: the small button fades out, the buy form fades in */
.demo-cta-btn { transition: opacity 0.32s ease; }
.demo-cta-btn.fading { opacity: 0; pointer-events: none; }
@keyframes demo-fade-in { from { opacity: 0; } }
.demo-cta-casewrap:not([hidden]), .demo-cta-add:not([hidden]) { animation: demo-fade-in 0.45s ease; }
.demo-cta-error { color: #d99a8f; font-size: 0.8rem; margin: 0.5rem 0 0; }

/* ---------- range on product pages (always open, filtered by pills) ---------- */
/* filter chips — same chips as the shop page; a row above and below the grid */
.scale-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.2rem 0 1.4rem; }
.scale-filters-bottom { margin: 1.6rem 0 0; } /* injected between the cards and the specials */
@media (max-width: 900px) {
  /* one sideways-scrolling row, full-bleed like the clip strip — wrapped pills
     cost three rows (105px) of the space the cards want.
     width:0 + min-width:100% zeroes the row's min-content: the .shopify-section
     wrappers are grids, and an auto track sizes to its item's min-content, so a
     nowrap row without this guard widens the whole page (the 337px mystery). */
  .scale-filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    width: 0;
    min-width: calc(100% + 2 * var(--page-pad));
    margin-left: calc(-1 * var(--page-pad)); margin-right: calc(-1 * var(--page-pad));
    padding-left: var(--page-pad); padding-right: var(--page-pad);
    scroll-padding-left: var(--page-pad);
  }
  .scale-filters::-webkit-scrollbar { display: none; }
  .scale-filters .filter-chip { flex: 0 0 auto; }
}
/* .model-card is display:flex — without this, filtered-out cards ignore [hidden].
   Unscoped on purpose: the homepage range grids filter too now, and a rule that
   only knew about .scale-cards is exactly why they would not. */
.model-card[hidden] { display: none; }
.scale-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.7rem; }
.scale-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.9rem 0.6rem 0.8rem; color: var(--ink);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.scale-item:hover { border-color: rgba(101, 117, 153, 0.55); transform: translateY(-2px); color: var(--ink); }
.scale-item.active { border-color: var(--brand-light); background: var(--brand-fill); }
.scale-item-static { cursor: default; }
.scale-item-static:hover { transform: none; border-color: var(--line); }
.scale-icon svg { width: 64px; height: 64px; display: block; }
.scale-badge {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--brand-deep); background: var(--bg-3);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--brand-light);
}
.scale-item strong { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; line-height: 1.2; }
.scale-price { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; min-height: 1em; }
.scale-panel .scale-cards, .keep-exploring .scale-cards { margin-top: 1rem; }
.model-card.scale-current { border-color: var(--brand-light); }
.model-link-price {
  font-family: var(--font-display); font-size: 1rem; color: var(--muted);
  text-transform: none; letter-spacing: 0.02em;
}
.more-scales-label, .keep-elements-label {
  margin: 1.8rem 0 0.9rem; font-family: var(--font-display); font-weight: 500;
  font-size: 1.1rem; color: var(--brand-light);
}
/* kicker-style, matching "The sound" etc. */
.more-scales-label {
  margin-bottom: 0.35rem;
  font-family: var(--font-body); font-weight: 500; font-size: 0.72rem;
  letter-spacing: 0.34em; text-transform: uppercase;
}
.more-scales-sub { margin: 0 0 1rem; font-size: 0.88rem; color: var(--muted); }
.keep-exploring { margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.keep-exploring .section-head { margin-bottom: 0.2rem; }
.keep-elements-label { margin: 2rem 0 1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--brand-light); }

/* ---------- required-choice popup ---------- */
.choice-popup {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%); z-index: 600;
  background: var(--bg-3); border: 1px solid var(--brand); border-radius: 12px;
  color: var(--ink); font-size: 0.95rem; padding: 0.85rem 1.3rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); max-width: min(90vw, 420px); text-align: center;
  animation: choice-pop 0.3s ease; transition: opacity 0.4s ease;
}
.choice-popup.out { opacity: 0; }
@keyframes choice-pop { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } }

/* ---------- case picker (product page) ---------- */
#caseSelect { display: none; } /* hidden source of truth; the picker drives it */
.case-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-family: var(--font-body); font-size: 0.9rem; padding: 0.55rem 0.9rem;
  cursor: pointer; text-align: left;
}
.case-trigger:hover, .case-trigger[aria-expanded="true"] { border-color: var(--slate); }
/* min-height reserves the chosen item's thumbnail, so the trigger doesn't grow
   by 8px the first time you pick something and shove the page down */
.case-trigger-label { display: flex; align-items: center; gap: 0.55rem; min-width: 0; min-height: 26px; }
.case-trigger-label img { width: 26px; height: 26px; border-radius: 6px; background: #fff; object-fit: contain; flex: 0 0 auto; }
.case-trigger-chev { color: var(--muted); transition: transform 0.25s ease; }
.case-trigger[aria-expanded="true"] .case-trigger-chev { transform: rotate(180deg); }
.case-picker-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.case-picker-wrap.open { grid-template-rows: 1fr; }
.case-picker-wrap > .case-picker { overflow: hidden; min-height: 0; }
.case-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; margin-top: 0.55rem; }
.case-card {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 0.45rem 0.45rem 0.55rem;
  cursor: pointer; text-align: center; color: var(--ink); font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 0.35rem; align-items: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.case-card:hover { border-color: var(--slate); }
.case-card.on { border-color: var(--brand-light); background: var(--brand-fill); }
.case-thumb { display: block; width: 100%; aspect-ratio: 1; background: #fff; border-radius: 8px; overflow: hidden; }
.case-thumb img { width: 100%; height: 100%; object-fit: contain; }
.case-name { font-size: 0.7rem; line-height: 1.25; }
.case-price { font-size: 0.7rem; color: var(--brand-light); }
.case-card[disabled] { opacity: 0.45; cursor: default; }

/* free t-shirt: colour tiles, then size chips (the selects are the source of
   truth; these drive them). Two columns so the four tiles read as a block. */
.option-row[hidden] { display: none; } /* the row is flex, which defeats [hidden] */
.case-picker-wrap > .shirt-picker { overflow: hidden; min-height: 0; } /* same collapse as the cases */
.shirt-picker {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin-top: 0.55rem;
}
.shirt-card {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px;
  padding: 0.5rem 0.5rem 0.6rem; cursor: pointer; text-align: center;
  color: var(--ink); font-family: var(--font-body);
  display: flex; flex-direction: column; gap: 0.4rem; align-items: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.shirt-card:hover { border-color: var(--slate); }
.shirt-card.on { border-color: var(--brand-light); background: var(--brand-fill); }
.shirt-thumb { display: block; width: 100%; aspect-ratio: 1; background: #0d0e11; border-radius: 8px; overflow: hidden; }
/* contain matches the case tiles; switch to cover if the real shirt photos
   turn out to be lifestyle shots rather than flat product shots */
.shirt-thumb img { width: 100%; height: 100%; object-fit: contain; }
.shirt-name { font-size: 0.78rem; }
/* declining is a different kind of choice, so it gets no photo and less weight */
.shirt-none { justify-content: center; border-style: dashed; background: none; }
.shirt-none-text { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.shirt-none.on .shirt-none-text { color: var(--ink); }
.shirt-sizes { margin-top: 0.9rem; }
.shirt-sizes[hidden] { display: none; }
.shirt-sizes-label { font-size: 0.85rem; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.size-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.size-chip {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.5rem 0.3rem; cursor: pointer; color: var(--ink);
  font-family: var(--font-body); display: flex; flex-direction: column; gap: 0.1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.size-chip:hover { border-color: var(--slate); }
.size-chip.on { border-color: var(--brand-light); background: var(--brand-fill); }
.size-chip strong { font-size: 0.9rem; font-weight: 500; }
.size-chip span { font-size: 0.62rem; color: var(--muted); }

/* ---------- demo lightbox: desktop mini-player ---------- */
.demo-min {
  background: none; border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px;
  color: var(--muted); cursor: pointer; flex: 0 0 auto;
  display: grid; place-items: center;
}
.demo-min:hover { color: var(--ink); border-color: var(--brand); }
/* the icons are decoration, never event targets: a tap must resolve to the
   BUTTON, or a handler that swaps its own icon leaves the click's target
   orphaned and every delegated .closest() guard downstream stops seeing it */
.demo-min svg, .demo-close svg { pointer-events: none; }
@media (min-width: 641px) {
  /* Minimized, in carousel mode, is a strip across the foot of the screen with
     the playing clip in the middle of the SCREEN rather than in a corner: the
     artist stands on its left, the instrument and its buy on the right, and the
     deck keeps running behind it. This replaces the 240px corner here — classic
     keeps that corner, so it is one setting away whenever it is wanted. */
  .demo-lightbox.deck.minimized { inset: auto 0 0 0; place-items: end stretch; }
  .demo-lightbox.deck.minimized .demo-backdrop { display: none; }
  .demo-lightbox.deck.minimized .demo-panel {
    width: 100%; max-width: none; max-height: none; border-radius: 0;
    display: grid; align-items: end; gap: 0 1.4rem;
    grid-template-columns: var(--bar-side, 300px) minmax(0, 1fr) var(--bar-side, 300px);
    grid-template-rows: 1fr auto;
    padding: 0 1.5rem calc(1.1rem + var(--name-drop, 0px));
    /* no hard edge: the page fades into it */
    /* The dark is COMPLETE by the time the words start, and does its fading in
       the space above them: --fade-top is the names' own line, measured in JS
       because only the laid-out text knows where it falls, and the ramp is hung
       above it rather than below. The names then sit on solid ground — reading
       them was the point — while the clip and the deck higher up still stand on
       the page rather than on a slab. */
    background: linear-gradient(180deg,
      transparent calc(var(--fade-top, 0px) - var(--fade-len, 64px)),
      rgba(8, 9, 11, 0.93) calc(var(--fade-top, 0px) - 10px));
    box-shadow: none; overflow: visible;
  }
  .demo-lightbox.deck.minimized .demo-panel video {
    /* the playing clip is the bar's clip height times its boost; the cards behind
       are measured back down to the height itself, so growing this leaves them */
    height: calc(var(--bar-video, 200px) * var(--deck-boost, 1));
    width: auto; max-height: none;
    display: block; margin: 0 auto;
  }
  /* The deck may not leave this column, so the artist's words and the
     instrument's are never under a picture. It clips, and fades at both edges
     rather than cutting a card square — a hard edge reads as broken, a fade
     reads as more that way. */
  .demo-lightbox.deck.minimized .demo-stage {
    grid-column: 2; grid-row: 1 / span 2; align-self: end;
    position: relative; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  /* the artist column: the pills go, the artist line stays */
  /* The artist's block hangs from the bottom like the model's. Its height is set
     in JS to match that block exactly, which is what puts the two names on one
     line — bottom-anchored boxes of equal height start at the same place. */
  .demo-lightbox.deck.minimized .demo-scroll {
    grid-column: 1; grid-row: 1 / span 2; align-self: end;
    overflow: hidden; max-height: none; padding: 0;
  }
  .demo-lightbox.deck.minimized .demo-tabs { display: none; }
  .demo-lightbox.deck.minimized .demo-artist { border: 0; padding: 0; }
  /* No box, no border, no rounded corner: the bar's own faded black simply runs
     on under the artist's text and the model's. The column is narrower now, so
     the bio has the room to be taller instead. */
  .demo-lightbox.deck.minimized .demo-artist-bio {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 0.76rem; line-height: 1.45;
  }
  /* the instrument column: name, scale, then price and the button */
  .demo-lightbox.deck.minimized .demo-mini-info {
    display: flex; flex-direction: column; gap: 0.25rem; position: static;
    grid-column: 3; grid-row: 1; align-self: end; height: auto; padding: 0;
    min-width: 0; overflow: visible;
  }
  .demo-lightbox.deck.minimized .demo-mini-name { font-size: 1.15rem; }
  .demo-lightbox.deck.minimized .demo-mini-actions { margin-top: 0.35rem; }
  .demo-lightbox.deck.minimized .demo-mini-shop { flex: 0 0 auto; }
  .demo-lightbox.deck.minimized .demo-mini-heart { position: static; width: 36px; height: 36px; }
  /* the buy bar joins it underneath, already open — nobody waits four seconds
     for a price they came back to the bar to read */
  .demo-lightbox.deck.minimized .demo-cta {
    grid-column: 3; grid-row: 2; align-self: end; margin: 0.25rem 0 0;
    grid-template-rows: 1fr; opacity: 1;
    /* The reveal belongs to the full player, where the price arrives once you have
       watched a little. Docked it is simply there — and animating it moved the
       names for half a second after the layout had already been measured. */
    transition: none;
  }
  .demo-lightbox.deck.minimized .demo-cta-row { border: 0; padding-top: 0; }
  /* The buy row already carries the button and the heart, so the info block's
     own pair would be the same offer twice. And off a product page that row's
     text is the model's NAME, which is printed directly above it — a price is
     worth repeating there, a name is not. */
  .demo-lightbox.deck.minimized .demo-mini-actions { display: none; }
  .demo-lightbox.deck.minimized .demo-cta-shop .demo-cta-price { display: none; }
  .demo-lightbox.deck.minimized .demo-cta-actions { gap: 0.7rem; }
  /* the window buttons keep the bar's own top-right corner */
  /* the bar's right end, on the line the names start (JS supplies the height) */
  .demo-lightbox.deck.minimized .demo-top {
    position: absolute; inset: auto 1rem auto auto;
    padding: 0; background: none; z-index: 30;
  }
  /* and full size, the way the maximized player wears them — the bar has the
     room, and 28px was a corner player's compromise */
  .demo-lightbox.deck.minimized .demo-min,
  .demo-lightbox.deck.minimized .demo-close { width: 34px; height: 34px; }
  .demo-lightbox.deck.minimized .demo-min svg { width: 20px; height: 20px; }
  .demo-lightbox.deck.minimized .demo-close svg { width: 16px; height: 16px; }
  .demo-lightbox.deck.minimized .demo-top { gap: 0.5rem; }
  .demo-lightbox.deck.minimized .demo-top-id { display: none; }

  /* ---- the page underneath stays live ----
     Docked, this is a strip lying over someone's shopping, and most of that strip
     is scrim and empty column. The container and its panel stop taking clicks;
     each thing actually drawn takes its own back. So the page is clickable
     wherever the player is not, and covered wherever it is.
     The two text blocks shrink to their content as well, or their columns would
     go on catching clicks over empty space beside the words. */
  .demo-lightbox.deck.minimized,
  .demo-lightbox.deck.minimized .demo-panel,
  .demo-lightbox.deck.minimized .demo-stage,
  .demo-lightbox.deck.minimized .demo-scroll { pointer-events: none; }
  .demo-lightbox.deck.minimized .demo-panel video,
  .demo-lightbox.deck.minimized .demo-artist,
  .demo-lightbox.deck.minimized .demo-mini-info,
  .demo-lightbox.deck.minimized .demo-cta,
  .demo-lightbox.deck.minimized .demo-top,
  .demo-lightbox.deck.minimized .demo-side { pointer-events: auto; }
  /* the deck stays as layoutDeck leaves it: the cards behind are clickable, the
     centre one is not, because the clip sits on top of it */
  .demo-lightbox.deck.minimized .demo-mini-info { justify-self: start; }
  .demo-lightbox.deck.minimized .demo-cta { justify-self: start; }

  /* ---- the bar's own column of controls ---- */
  .demo-side { display: none; }
  .demo-lightbox.deck.minimized .demo-side {
    display: flex; flex-direction: column; gap: 0.4rem;
    position: absolute; z-index: 31;
  }
  .demo-side-btn {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
    flex: 0 0 auto;
  }
  .demo-side-btn:hover { color: var(--ink); border-color: var(--brand); }
  /* over the footage rather than beside it, when the clip leaves no room */
  .demo-side.on-clip .demo-side-btn {
    background: rgba(8, 9, 11, 0.55); border-color: rgba(255, 255, 255, 0.2); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  /* micro shows one button, and it climbs back to the bar it came from */
  .demo-lightbox.deck.minimized .demo-side-back { display: none; }
  .demo-lightbox.deck.minimized.bar-compact .demo-side-back { display: grid; }
  .demo-lightbox.deck.minimized.bar-compact .demo-side-close,
  .demo-lightbox.deck.minimized.bar-compact .demo-side-max,
  .demo-lightbox.deck.minimized.bar-compact .demo-side-mirror,
  .demo-lightbox.deck.minimized.bar-compact .demo-side-small { display: none; }



  /* ---- the small player ----
     Only the clip shrinks. The artist, the instrument, the deck and the pair at
     the far end all keep their places — this is a smaller player, not a
     different bar. The cards follow the clip because they are measured from it,
     which is the behaviour we want here rather than the exception. */
  .demo-lightbox.deck.minimized.bar-compact .demo-panel video { height: var(--micro-video, 120px); }


  /* ---- the bar, anchored left ----
     The playing clip stands a set distance from the browser's own left edge, and
     the artist and the instrument follow it across. What that distance buys is
     the deck's left-hand side: the stage begins at x=0 and clips, so the wider
     the offset, the more of the cards BEHIND the playing one come into view on
     its left — one number decides both where the clip sits and how much of its
     past is showing. */
  .demo-lightbox.deck.minimized.bar-left .demo-panel {
    /* vw, not %: the panel's own box is the page minus its padding and the
       scrollbar, and the middle asked for is the middle of the WINDOW. The gap
       comes off the first column so the artist's left edge lands exactly on that
       middle at 0, rather than a gap's width to the right of it. */
    grid-template-columns:
      calc(50vw + var(--artist-x, 0px) - 1.4rem) var(--bar-side, 300px) minmax(0, 1fr);
    padding-left: 0;   /* so the offset is measured from the browser edge itself */
  }
  .demo-lightbox.deck.minimized.bar-left .demo-stage { grid-column: 1; }
  .demo-lightbox.deck.minimized.bar-left .demo-panel video {
    margin-left: var(--bar-offset, 260px); margin-right: auto;
  }
  /* artist beside the clip, instrument last */
  .demo-lightbox.deck.minimized.bar-left .demo-scroll { grid-column: 2; }
  .demo-lightbox.deck.minimized.bar-left .demo-mini-info { grid-column: 3; grid-row: 1; }
  .demo-lightbox.deck.minimized.bar-left .demo-cta { grid-column: 3; grid-row: 2; }
  /* only the right edge fades: the left one is the screen's own edge, and a clip
     that dissolves before it reaches the glass looks like a mistake */
  .demo-lightbox.deck.minimized.bar-left .demo-stage {
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
  }

  /* These tie with the arrangement rules above on specificity, so they have to
     come after them — a mirror that loses on source order is just a class that
     does nothing. */
  /* ---- mirrored: the clip changes ends and the rest follows ---- */
  .demo-lightbox.deck.minimized.bar-mirror .demo-stage { grid-column: 3; }
  .demo-lightbox.deck.minimized.bar-mirror .demo-scroll { grid-column: 2; }
  .demo-lightbox.deck.minimized.bar-mirror .demo-mini-info,
  .demo-lightbox.deck.minimized.bar-mirror .demo-cta { grid-column: 1; }
  .demo-lightbox.deck.minimized.bar-mirror .demo-panel {
    grid-template-columns: minmax(0, 1fr) var(--bar-side, 300px) minmax(0, 1fr);
  }
  /* the left arrangement mirrors properly: the offset measures from the right edge */
  .demo-lightbox.deck.minimized.bar-left.bar-mirror .demo-panel {
    /* --mirror-stage is measured in JS so the artist's outer edge lands on the
       middle exactly, the way its inner edge does unmirrored. The fallback is the
       CSS guess, which is right to within a scrollbar. */
    grid-template-columns:
      minmax(0, 1fr) var(--bar-side, 300px)
      var(--mirror-stage, calc(50vw + var(--artist-x, 0px) - 1.4rem));
    padding-left: 1.5rem; padding-right: 0;
  }
  .demo-lightbox.deck.minimized.bar-left.bar-mirror .demo-panel video {
    margin-left: auto; margin-right: var(--bar-offset, 260px);
  }
  .demo-lightbox.deck.minimized.bar-mirror .demo-stage {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%);
    mask-image: linear-gradient(90deg, transparent, #000 8%);
  }
  .demo-lightbox.deck.minimized.bar-mirror .demo-top { inset: auto auto auto 1rem; }
  /* The instrument's block hangs off the side of its column that faces the middle.
     Unmirrored that is the column's left edge, which is where left-aligned text
     already sits; mirrored it is the RIGHT edge, so the block turns around with
     the bar. Without this the text drifts out to the browser's own edge and the
     two views stop being each other's reflection. */
  /* The BLOCK moves to the inner edge; the lines inside it do not. justify-self
     shrinks the box to its own content and parks it against that edge, so the
     text stays left-aligned and ragged on the right, reading the way the
     artist's does. align-items: flex-end would have right-aligned the lines
     themselves, which is a different thing and the wrong one. */
  .demo-lightbox.deck.minimized.bar-mirror .demo-mini-info {
    justify-self: end; align-items: flex-start; text-align: left;
  }
  .demo-lightbox.deck.minimized.bar-mirror .demo-cta { justify-self: end; }
  .demo-lightbox.deck.minimized.bar-mirror .demo-cta-inner { text-align: left; }
  /* price and buy swap ends too, or the row reads inside-out against the text */
  .demo-lightbox.deck.minimized.bar-mirror .demo-cta-row { flex-direction: row-reverse; }
  .demo-lightbox.deck.minimized.bar-mirror .demo-cta-actions { flex-direction: row-reverse; }
  .demo-lightbox.minimized { inset: auto 1.25rem 1.25rem auto; }
  .demo-lightbox.minimized .demo-backdrop { display: none; }
  .demo-lightbox.minimized .demo-panel {
    width: 240px; max-height: min(72svh, 660px); padding: 0.55rem 0.55rem 0.5rem; gap: 0.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  }
  .demo-lightbox.minimized .demo-panel video { max-height: 340px; border-radius: 9px; }
  .demo-lightbox.minimized .demo-title { font-size: 0.95rem; }
  .demo-lightbox.minimized .demo-sub { display: none; }
  .demo-lightbox.minimized .demo-min, .demo-lightbox.minimized .demo-close { width: 28px; height: 28px; }
  .demo-lightbox.minimized .demo-min svg, .demo-lightbox.minimized .demo-close svg { width: 14px; height: 14px; }
  /* the full content stays — tabs + artist scroll invisibly if the screen is short */
  .demo-lightbox.minimized .demo-scroll {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .demo-lightbox.minimized .demo-scroll::-webkit-scrollbar { display: none; }
  .demo-lightbox.minimized .demo-scroll.scroll-fade {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent);
  }
  .demo-lightbox.minimized .demo-tab { font-size: 0.68rem; }
  .demo-lightbox.minimized .demo-artist-bio { font-size: 0.75rem; }
  .demo-lightbox.minimized .demo-cta-row { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
  .demo-lightbox.minimized .demo-cta-price strong { font-size: 0.85rem; }
  .demo-lightbox.minimized .demo-case-picker { grid-template-columns: repeat(2, 1fr); }
  .demo-lightbox.minimized .demo-cta-casewrap { max-height: 180px; }
}

/* unmute chip — a restored player that could only resume muted (WebKit/iOS) */
.demo-unmute {
  position: absolute; z-index: 4; right: 0.6rem; top: 3.2rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(8, 9, 11, 0.72); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; color: #fff; font-family: var(--font-body);
  font-size: 0.68rem; letter-spacing: 0.04em; padding: 0.35rem 0.75rem;
  cursor: pointer;
}

/* stories-style position dots — the swipe affordance; mobile full-screen only */
.demo-dots { display: none; }
/* mobile-footer info block — hidden everywhere else (desktop mini included) */
.demo-mini-info { display: none; }
/* both hearts are mobile-only for now — the desktop card never had one, and its
   CTA row is a long product name plus a button in 364px, with no room to spare */
.demo-lightbox .demo-cta-heart { display: none; }
/* The heart was mobile-only because the desktop CARD had never carried one and
   its row had no space. The carousel's rows do, on both the stage and the bottom
   bar, so it comes along there — classic desktop stays exactly as it was. */
.demo-lightbox.deck .demo-cta-heart {
  display: flex; position: static; flex: 0 0 auto; width: 36px; height: 36px;
}
/* the action row groups the button with the heart, so space-between keeps the
   price on the left and the pair together on the right */
.demo-cta-actions { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
/* The name and the scale belong to the info block wherever it is shown — the
   phone's footer and the desktop bar both draw it, and only one of them is
   inside a media query. */
.demo-mini-name {
  font-family: var(--font-display); font-size: 1.25rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-mini-scale {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the model's name goes to its product from every player, minimized included */
.demo-mini-name a { color: inherit; }
.demo-mini-name a:hover { color: var(--brand-light); }
/* the footer heart rides in the info column, so it appears only there for now */

/* ---------- demo lightbox: mobile bottom sheet ---------- */
@media (max-width: 640px) {
  .demo-dots {
    position: absolute; z-index: 3;
    top: calc(max(1rem, env(safe-area-inset-top)) + 0.15rem);
    left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px;
  }
  .demo-dots span {
    width: 6px; height: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    transition: width 0.25s ease, background 0.25s ease;
  }
  .demo-dots span.on { width: 18px; background: rgba(255, 255, 255, 0.92); }
  .demo-lightbox.minimized .demo-dots { display: none; }
  .gal-nav { display: none; } /* gallery arrows: swipe is the gesture on mobile */
  .demo-lightbox { place-items: end center; }
  .demo-panel {
    width: 100vw;
    height: 100svh; max-height: 100svh;    /* fallback: pre-dvh engines */
    height: 100dvh; max-height: 100dvh;    /* the viewport as it actually is */
    border-radius: 0; border: 0;
    padding: 0 0 max(1rem, env(safe-area-inset-bottom));
  }
  /* the slide-up belongs to OPENING only (JS adds .opening for that moment).
     As a standing rule on .demo-panel it replayed every time the sheet came back
     from the footer — and since .minimized kills the animation, un-minimizing
     restarted it from translateY(28px) + opacity 0, leaving a strip of bare
     backdrop above the sheet. Expanding is a restore, not an arrival. */
  .demo-lightbox.opening .demo-panel {
    animation: demo-sheet-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* full-bleed video from the very top; the controls float over it on a scrim */
  .demo-top {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding: max(1rem, env(safe-area-inset-top)) 0.85rem 2.4rem;
    background: linear-gradient(180deg, rgba(8, 9, 11, 0.78) 0%, rgba(8, 9, 11, 0.38) 55%, transparent 100%);
    align-items: center; gap: 0.7rem;
  }
  /* the sheet's heart sits with the shop button, the sheet's only permanent
     action pair. It arrives with that row after a few seconds of watching,
     which is also about when saving becomes a thing anyone wants to do. */
  .demo-lightbox .demo-cta-heart {
    display: flex; position: static; flex: 0 0 auto; width: 36px; height: 36px;
  }

  /* natural DOM order on the scrim: chevron top-LEFT (the collapse spot every
     player app trained), title beside it, close on the right */
  .demo-top-id { order: 0; }
  /* frosted glass — reads on bright and dark footage alike. The chevron is the
     invited action (full white, stronger fill); close steps back a touch. */
  .demo-min, .demo-close {
    width: 40px; height: 40px; color: #fff;
    background: rgba(8, 9, 11, 0.45);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.18);
  }
  .demo-close {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(8, 9, 11, 0.3);
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* first-open coach (once ever, wired in JS): the sheet dips and springs
     back while a pill names the swipe that tucks the player away */
  .demo-panel.peek { animation: demo-peek 1.3s cubic-bezier(0.3, 0, 0.2, 1); }
  .demo-hint {
    position: absolute; z-index: 4; left: 50%;
    bottom: calc(33svh + 25px); bottom: calc(33dvh + 25px);
    transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
    background: rgba(8, 9, 11, 0.72); border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 999px; padding: 0.5rem 0.95rem; color: #fff;
    font-size: 0.7rem; letter-spacing: 0.04em;
    animation: demo-hint-in 0.5s ease both; transition: opacity 0.5s ease;
    /* it tells you to swipe down while sitting over the video: if it could take
       the touch, the swipe it teaches would die on the pill itself */
    pointer-events: none;
  }
  .demo-hint.out { opacity: 0; }
  .demo-hint svg { animation: demo-hint-arrow 1.6s ease infinite; }
  /* slim black bar above the full-bleed video */
  .demo-panel video {
    max-height: 62svh; max-height: 62dvh;   /* keeps its share of a taller sheet */
    border-radius: 0; border-top: 14px solid #000;
  }
  .demo-cta-casewrap { max-height: 26svh; max-height: 26dvh; } /* keep the video the hero on the sheet */

  /* ---- buying state: the sheet turns into a checkout ----
     Order now shrinks the video, retires the tabs and gives the options every
     remaining pixel, with Add to cart held at the bottom edge. */
  .demo-lightbox.buying .demo-panel video { max-height: 22svh; max-height: 22dvh; }
  .demo-lightbox.buying .demo-scroll { display: none; }
  /* stays a grid — its 0fr/1fr reveal still owns display; it just becomes a
     growing flex item of the panel */
  .demo-lightbox.buying .demo-cta { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
  .demo-lightbox.buying .demo-cta-inner {
    display: flex; flex-direction: column; min-height: 0;
  }
  .demo-lightbox.buying .demo-cta-casewrap {
    flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto;
    padding-bottom: 0.3rem; /* last chips clear of the scroll edge */
  }
  /* the growing options block is what pins this to the bottom, so a real
     margin here buys breathing room (margin-top:auto collapsed to nothing
     once the options filled the space) */
  .demo-lightbox.buying .demo-cta-add { margin-top: 1rem; margin-bottom: 0; }
  .demo-lightbox.buying .shirt-picker { grid-template-columns: repeat(2, 1fr); }
  .demo-scroll { padding: 0 1.1rem; }
  .demo-cta { margin-left: 1.1rem; margin-right: 1.1rem; }
  .demo-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  /* touch + fade hint carry the scroll affordance — no scrollbar needed */
  .demo-scroll { scrollbar-width: none; }
  .demo-scroll::-webkit-scrollbar { display: none; }
  /* tighter rhythm so the artist row stays visible alongside the cta bar */
  .demo-scroll { gap: 0.45rem; }
  .demo-artist { border-top: 0; padding-top: 0.1rem; }
  .demo-cta-row { padding-top: 0.6rem; }
  .demo-cta-price strong { font-size: 0.95rem; }
  .demo-cta-btn { padding: 0.45rem 1rem; font-size: 0.78rem; }
  .demo-scroll.scroll-fade {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent);
  }

  /* ---- artist pills: at most two rows, scrolling sideways (both states) ----
     Two INDEPENDENT rows, not a grid: a grid aligns every bottom pill to the
     column above it, so a short name left dead air beside it and shoved the next
     pill outwards. Each row is its own flex line at its own content width, both
     inside this one scroller, so they scroll together but pack separately and
     lean into each other. JS fills them (splitTabRows) — no CSS can pack rows
     independently, which is what masonry would have been for. */
  .demo-tabs {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.4rem; min-width: 0;
    /* never give up height: as a shrinkable item in the sheet's scroller, a tall
       artist bio (or the buy bar appearing) squeezed the strip and overflow-y
       clipped the second row clean off, with no scrollbar to get it back. The
       bio scrolls — the pills are navigation and must stay whole. */
    flex: 0 0 auto;
    overflow-x: auto; overflow-y: hidden;
    /* the strip owns sideways; up/down stays the panel's minimize/close gesture */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .demo-tabs::-webkit-scrollbar { display: none; }
  .demo-tab-row {
    display: flex; gap: 0.4rem; flex: 0 0 auto; width: max-content;
    flex-wrap: nowrap;   /* explicit: the base rule wraps, a scrolling row must not */
  }
  .demo-tab-row:empty { display: none; }   /* one row's worth stays one row */
  .demo-tab { white-space: nowrap; }
  /* the "more that way" hint, only while something is actually still hidden —
     a permanent mask would fade the last pill once you reached the end */
  .demo-tabs.more {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }

  /* ---- minimized: a full-width footer bar — info left, cropped video right ---- */
  .demo-lightbox.minimized { inset: auto 0 0 0; place-items: stretch; }
  .demo-lightbox.minimized .demo-backdrop { display: none; }
  .demo-lightbox.minimized .demo-panel {
    flex-direction: row; align-items: center; gap: 0;
    /* 100% of the fixed container, NOT 100vw — real phones clip 100vw at the
       right edge (browser UI, cutouts); safe-area padding for notched glass */
    width: 100%; height: auto; max-height: none;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    border-top: 1px solid var(--line); border-radius: 0;
    animation: none;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.5);
  }
  .demo-lightbox.minimized .demo-panel video {
    flex: 0 0 112px; width: 112px; height: 200px; max-height: none;
    object-fit: cover; /* full portrait frame — 112px wide at 9:16 is barely cropped */
    border: 0; border-radius: 0;
    order: 2; /* DOM has video before the info block — the footer wants info left, video right */
  }
  .demo-lightbox.minimized .demo-scroll,
  .demo-lightbox.minimized .demo-cta,
  .demo-lightbox.minimized .demo-dots { display: none; }
  /* artist pills, moved in from the sheet — select() keeps the active one in
     view, which matters because end-of-clip autoplay moves the selection.
     The shared rule above already makes this a two-row sideways strip; the
     footer only tightens the gap. The old max-height cap and the hand-nudged
     margin that made "both Malte pills share row one" are gone: the strip
     scrolls now, so it no longer needs coaxing to fit one particular model. */
  /* both axes: between the two rows, and between pills within a row */
  .demo-lightbox.minimized .demo-mini-info .demo-tabs,
  .demo-lightbox.minimized .demo-mini-info .demo-tab-row { gap: 0.28rem; }
  .demo-lightbox.minimized .demo-tab {
    flex: 0 0 auto; font-size: 0.64rem; padding: 0.28rem 0.5rem; letter-spacing: 0.05em;
  }
  /* the linked artist line, compact: name + credential on one truncated line */
  .demo-lightbox.minimized .demo-artist { border: 0; padding: 0; margin: 0; }
  .demo-lightbox.minimized .demo-artist-avatar,
  .demo-lightbox.minimized .demo-artist-bio { display: none; }
  .demo-lightbox.minimized .demo-artist-text {
    display: flex; align-items: baseline; gap: 0.45rem;
    min-width: 0; white-space: nowrap; overflow: hidden;
  }
  .demo-lightbox.minimized .demo-artist-text strong { font-size: 0.8rem; flex: 0 0 auto; }
  /* the cred keeps its maximized styling (brand blue, small caps) — just truncated */
  .demo-lightbox.minimized .demo-artist-cred {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-top: 0;
  }
  /* the top scrim collapses to two tiny buttons over the video's corner */
  .demo-lightbox.minimized .demo-top {
    position: absolute; inset: auto; top: 5px; right: 5px; left: auto;
    padding: 0; background: none; z-index: 3;
  }
  .demo-lightbox.minimized .demo-top-id { display: none; } /* title lives in the info block */
  .demo-lightbox.minimized .demo-top { gap: 0.35rem; }
  .demo-lightbox.minimized .demo-min, .demo-lightbox.minimized .demo-close {
    width: 26px; height: 26px; color: #fff;
    background: rgba(8, 9, 11, 0.55); border-color: rgba(255, 255, 255, 0.18);
  }
  .demo-lightbox.minimized .demo-min svg { width: 14px; height: 14px; }
  .demo-lightbox.minimized .demo-close svg { width: 12px; height: 12px; }
  .demo-lightbox.minimized .demo-mini-info {
    display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
    flex: 1; min-width: 0; position: relative;   /* the heart anchors to this column */
    height: 200px; overflow: hidden; /* the bar is exactly the video's height */
    padding: 0.7rem 0.7rem 0.8rem 1.1rem;
  }
  /* the name and scale styles moved out of this query — see below, they are the
     block's own and the desktop bar shows the same block */
  /* the bottom line is an action row now: the button takes the width that was
     dead space to its right, and the heart caps the end, its edge level with
     the video like everything else in this column */
  .demo-mini-actions {
    display: flex; align-items: center; gap: 0.6rem; margin-top: 3px;
  }
  .demo-mini-shop {
    flex: 1 1 auto; text-align: center;
    padding: 0.5rem 1rem; font-size: 0.72rem;
  }
  .demo-lightbox.minimized .demo-mini-heart {
    position: static; flex: 0 0 auto; width: 36px; height: 36px;
  }
  /* footer: the unmute chip sits over the video's bottom corner */
  .demo-lightbox.minimized .demo-unmute {
    top: auto; right: 8px;
    bottom: calc(env(safe-area-inset-bottom) + 8px);
  }
}
@keyframes demo-sheet-up { from { transform: translateY(28px); opacity: 0; } }
@keyframes demo-peek { 38% { transform: translateY(26px); } }
@keyframes demo-hint-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes demo-hint-arrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) {
  /* matches the .opening rule's specificity, or it would animate anyway */
  .demo-lightbox.opening .demo-panel { animation: none; }
  .demo-panel.peek { animation: none; }   /* the pill alone carries the coaching */
  .demo-hint svg { animation: none; }
}

/* ============================================================
   Shortlist — Phase 0 (docs/SHORTLIST-PLAN.md §3)
   ============================================================ */

/* hearts on cards — quiet by default, never competing with a buy button */
.shortlist-heart {
  position: absolute; top: 1.05rem; right: 1.05rem; z-index: 3;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(13, 14, 17, 0.55); backdrop-filter: blur(6px);
  color: var(--muted); cursor: pointer; padding: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.shortlist-heart:hover { color: var(--ink); border-color: var(--brand-light); }
.shortlist-heart svg path { transition: fill 0.2s ease; }
.shortlist-heart.on { color: #d99a8f; border-color: rgba(200, 90, 80, 0.5); }
.shortlist-heart.on svg path { fill: currentColor; }
.shortlist-heart.pop { animation: sl-pop 0.35s ease; }
@keyframes sl-pop { 40% { transform: scale(1.22); } }
/* model cards: keep long names clear of the heart */
.model-card .model-head { padding-right: 2.6rem; }
/* shop grid: heart floats on the (white) photo */
.shop-card-photo { position: relative; }
.shop-card .shortlist-heart { top: 0.7rem; right: 0.7rem; background: rgba(13, 14, 17, 0.35); }

/* product page: shortlist button (text variant kept for any other placement) */
.shortlist-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.9rem; padding: 0.45rem 0.9rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.05em; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
/* buy row: Add to cart takes the space, the heart sits beside it at equal height */
.buy-row { display: flex; align-items: stretch; gap: 0.6rem; }
.buy-row .product-buy { flex: 1; width: auto; }
.shortlist-btn-icon {
  flex: 0 0 auto; margin-top: 0; padding: 0; width: 52px;
  justify-content: center;
}
.shortlist-btn:hover { color: var(--ink); border-color: var(--brand-light); }
.shortlist-btn svg path { transition: fill 0.2s ease; }
.shortlist-btn.on { color: #d99a8f; border-color: rgba(200, 90, 80, 0.5); }
.shortlist-btn.on svg path { fill: currentColor; }

/* header dropdown panel */
.shortlist-panel {
  position: absolute; top: calc(100% + 10px); right: 1.2rem; z-index: 90;
  width: min(340px, calc(100vw - 2rem));
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.sl-panel-head { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 0.4rem; }
.sl-panel-list { list-style: none; margin: 0.3rem 0 0.6rem; }
.sl-panel-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.42rem 0; border-bottom: 1px solid var(--line);
}
.sl-panel-list li:last-child { border-bottom: 0; }
.sl-panel-list a { color: var(--ink); font-size: 0.92rem; }
.sl-panel-list a:hover { color: var(--brand-light); }
.sl-panel-remove {
  background: none; border: 0; color: var(--muted); font-size: 1rem;
  cursor: pointer; padding: 0 0.2rem; line-height: 1;
}
.sl-panel-remove:hover { color: #d99a8f; }
.sl-panel-note { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

/* waitlist popup */
.shortlist-popup {
  position: fixed; inset: 0; z-index: 650;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
}
.shortlist-popup[hidden] { display: none; }
.shortlist-popup-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 9, 12, 0.72); backdrop-filter: blur(4px);
}
.shortlist-popup-card {
  position: relative; max-width: 520px; width: 100%;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 18px;
  padding: 2rem 2rem 1.8rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: sl-card-up 0.3s ease;
}
@keyframes sl-card-up { from { transform: translateY(14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shortlist-popup-card { animation: none; } }
.shortlist-popup-close {
  position: absolute; top: 0.9rem; right: 1rem;
  background: none; border: 0; color: var(--muted); font-size: 1.5rem;
  cursor: pointer; line-height: 1; padding: 0.2rem;
}
.shortlist-popup-close:hover { color: var(--ink); }
.shortlist-popup-card h3 { font-size: 1.55rem; margin: 0.3rem 0 0.8rem; }
.sl-copy { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.8rem; }
.sl-copy strong { color: var(--ink); font-weight: 500; }
.shortlist-popup-card .newsletter-row { display: flex; gap: 0.6rem; margin: 1.1rem 0 0.9rem; }
/* pill radius + roomier sides to match the button beside it (as in the footer) */
.shortlist-popup-card .newsletter-row input[type="email"] {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink); padding: 0.65rem 1.1rem;
  font-family: var(--font-body); font-size: 0.9rem;
}
.shortlist-popup-card .newsletter-row input[type="email"]:focus { outline: none; border-color: var(--brand); }
.sl-check {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.78rem; color: var(--muted); line-height: 1.5; cursor: pointer;
}
.sl-check input { margin-top: 0.22rem; accent-color: var(--brand); }
.sl-error { color: #d99a8f; font-size: 0.8rem; margin-top: 0.6rem; }
.sl-success { color: #9fce9f; font-size: 0.92rem; margin-top: 0.9rem; }

/* shortlist panel v2: close button, notify opt-in, signup entry */
.shortlist-panel { padding-right: 2.4rem; }
.sl-panel-close {
  position: absolute; top: 0.55rem; right: 0.6rem;
  background: none; border: 0; color: var(--muted); font-size: 1.25rem;
  cursor: pointer; line-height: 1; padding: 0.25rem;
}
.sl-panel-close:hover { color: var(--ink); }
.sl-notify { margin: 0.7rem 0 0.8rem; }
.sl-notify[hidden] { display: none; }
.sl-panel-signup {
  display: block; width: 100%; margin-top: 0.8rem; padding: 0.55rem 0.9rem;
  background: var(--brand-fill); border: 1px solid var(--brand-deep); border-radius: 999px;
  color: var(--ink); font-family: var(--font-body); font-size: 0.8rem;
  letter-spacing: 0.05em; cursor: pointer; transition: border-color 0.2s ease;
}
.sl-panel-signup:hover { border-color: var(--brand-light); }
/* "Save to your Ayasa account" — plain navigation, shown only when the URL is set */
.sl-panel-account { display: block; width: 100%; margin-top: 0.5rem; text-align: center; }
/* popup consent small print */
.sl-fine { font-size: 0.74rem; color: var(--muted); line-height: 1.55; }
/* popup "Already have an Ayasa account?" line, under the email form */
.sl-account-line { font-size: 0.8rem; color: var(--muted); margin-top: 0.6rem; }
.sl-account-line a { color: var(--ink); text-decoration: underline; }
.sl-account-line a:hover { color: var(--brand-light); }

/* ---------- mobile scroll spotlight (see initScrollSpotlight) ----------
   Continuous dimmer: JS writes --spot (0 → 1) per scroll frame; photo,
   lift and border all scale with it in lockstep. .spot is only ever set
   on touch screens, and the media query keeps desktop pure hover. */
@media (hover: none) {
  /* the finger drives the values — a transition would trail a frame behind */
  .model-card.spot, .shop-card.spot { transition-duration: 0s; }
  .model-card.spot, .shop-card.spot { transform: translateY(calc(var(--spot, 0) * -4px)); }
  /* unlinked cards (Coming soon) match their desktop hover: photo yes, lift no */
  .model-card.spot:not(.model-card-linked) { transform: none; }
  .model-card-photo.spot .model-card-bg {
    transition-duration: 0s;
    opacity: calc(0.72 + var(--spot, 0) * 0.18);
    --mask-solid: calc(20% + var(--spot, 0) * 65%);
    --mask-fade: calc(50% + var(--spot, 0) * 150%);
  }
  @supports (border-color: color-mix(in srgb, red 50%, blue)) {
    .model-card.spot, .shop-card.spot {
      border-color: color-mix(in srgb, rgba(101, 117, 153, 0.55) calc(var(--spot, 0) * 100%), var(--line));
    }
    .model-card.spot:not(.model-card-linked) { border-color: var(--line); }
  }
}

/* ============================================================
   The live shop card (ayasa-cards.js) — the playable instrument in the
   note-map's old spot. Everything scoped under .pan-card / .pan-notemap so a
   card whose model has no built geometry keeps its old look untouched.
   The 600px box mirrors the studio's cardLayout; when that number next changes
   in the studio it should start being emitted rather than mirrored by hand.
   ============================================================ */
.model-card.pan-card { height: var(--card-h, 600px); overflow: hidden; }
.pan-notemap { flex-wrap: wrap; }
.pan-notemap .notemap-bottom { flex: 1 1 7rem; }

.pan-slot { display: flex; flex-direction: column; align-items: center; gap: 0.45rem;
            min-width: 0; flex: 1 1 auto; }
.pan-slot.beside { flex-direction: row; flex-wrap: wrap; align-items: center;
                   justify-content: flex-start; gap: 0.7rem; }
.pan-slot.beside .pan-figure { width: min(var(--panw, 13rem), calc(100% - 7.2rem)); margin: 0; }
.pan-slot.beside .pan-runs { flex-direction: column; align-items: flex-start; }

/* perspective belongs on the PARENT of the turning element — without it rotateY
   is a flat mirror, not a turn. z-index lifts the instrument above the card's
   stretched "View in shop" link (inset:0, z-index:1): perspective makes this a
   stacking context, and at z-index:auto the notes and the flip button would sit
   under the invisible link, unclickable. */
.pan-figure { flex: 0 0 auto; width: var(--panw, 13rem); max-width: 100%;
              position: relative; perspective: 900px; margin: 0 auto; z-index: 2; }
.pan-figure svg { width: 100%; height: auto; display: block; }

/* the turn: the VERTICAL axis, calibrated to the bottom-side photograph */
.pan-flip { position: relative; transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pan-flip.turned { transform: rotateY(180deg); }
.pan-flip .face { backface-visibility: hidden; position: relative; }
.pan-flip .face.back { position: absolute; top: 0; left: 0; width: 100%;
                       transform: rotateY(180deg); }
@media (prefers-reduced-motion: reduce) { .pan-flip { transition: none; } }

.flipbtn { position: absolute; top: 0; left: 0; z-index: 3;
           width: 1.78rem; height: 1.78rem; display: grid; place-items: center;
           border-radius: 50%; cursor: pointer; font-size: 0.94rem; line-height: 1;
           background: rgba(13, 14, 17, 0.62); color: #cfcabf;
           border: 1px solid rgba(236, 233, 226, 0.18); backdrop-filter: blur(2px); }
/* the hitbox reaches ~30% past the visible button — a small round target on a
   card full of dead-easy targets deserves the extra grace */
.flipbtn::after { content: ""; position: absolute; inset: -0.27rem; border-radius: 50%; }
.flipbtn:hover { color: #ece9e2; border-color: rgba(236, 233, 226, 0.45); }
.flipbtn[aria-pressed="true"] { color: #e0a765; border-color: rgba(224, 167, 101, 0.55); }
.underside-tag { position: absolute; top: 0; right: 0; z-index: 3;
                 font: 500 0.56rem/1 Inter, system-ui, sans-serif; letter-spacing: 0.14em;
                 text-transform: uppercase; color: #cfcabf; padding: 0.28em 0.5em;
                 border-radius: 999px; background: rgba(13, 14, 17, 0.62);
                 border: 1px solid rgba(236, 233, 226, 0.18); }

/* the play runs and the show-notes toggle; the backdrop keeps them readable
   when the card's hover opens the photo behind them */
.pan-runs { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center;
            position: relative; z-index: 2; }
.pan-runs button { appearance: none; border: 1px solid rgba(139, 152, 184, 0.45);
                   background: rgba(13, 14, 17, var(--btno, 0.55));
                   color: #a8a39a; border-radius: 999px; padding: 0.24em 0.7em;
                   cursor: pointer; font: 500 0.68rem Inter, system-ui, sans-serif;
                   letter-spacing: 0.04em; white-space: nowrap; }
.pan-runs button:hover { border-color: #d6a86b; color: #ece9e2; }
.pan-runs button.playing { background: #d6a86b; border-color: #d6a86b; color: #18120a; }
.pan-runs .notesbtn .i { font-size: 0.85em; line-height: 1; }
.pan-slot.beside .pan-runs .notesbtn { margin-bottom: 0.45rem; }
.pan-slot:not(.beside) .pan-runs .notesbtn { margin-right: 0.45rem; }
.pan-runs .notesbtn[aria-pressed="true"] { border-color: rgba(224, 167, 101, 0.55);
                                           color: #e0a765; }

/* show-notes overrides pan2d's strike-only mode; !important is earned, pan2d
   keys every rule on its instance id */
.pan-slot.labels-on svg text.label.strike-only { opacity: 1 !important;
                                                 animation: none !important; }

/* the bottom notes' lights for the both-sides run — nothing at rest */
.satdots { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.satdot { position: absolute; transform: translate(-50%, -50%);
          display: flex; flex-direction: column; align-items: center; gap: 2px;
          opacity: 0; transition: opacity 0.5s ease; }
.satdot i { width: 9px; height: 9px; border-radius: 50%; background: #e8b968;
            box-shadow: 0 0 10px 3px rgba(232, 185, 104, 0.75);
            transition: transform 0.5s ease, box-shadow 0.5s ease; }
.satdot span { font: 600 0.55rem/1 Inter, system-ui, sans-serif; color: #f8e9d2;
               text-shadow: 0 0 4px rgba(6, 8, 11, 0.9), 0 1px 2px rgba(6, 8, 11, 0.9);
               letter-spacing: 0.02em; }
/* Show notes names the whole instrument, so the bottom's ring comes out
   with the top's labels — quieter than a strike, so a note sounding still
   stands out from the ones merely named. */
.pan-slot.labels-on .satdot { opacity: 0.78; }
.pan-slot.labels-on .satdot i { transform: scale(0.72);
                                box-shadow: 0 0 6px 1px rgba(232, 185, 104, 0.45); }
.satdot.flash { opacity: 1; transition: opacity 0.12s ease; }
/* a strike outranks the resting ring: same rules, one class deeper, so the note
   sounding still reads when show-notes has lit every one of them */
.pan-slot.labels-on .satdot.flash { opacity: 1; }
.satdot.flash i, .pan-slot.labels-on .satdot.flash i {
  transform: scale(1.15); transition: transform 0.12s ease;
  box-shadow: 0 0 12px 4px rgba(232, 185, 104, 0.85); }

/* the Full 2D/3D Player overlay — the real viewer, full screen, one at a time */
/* Above the site header (z 100) and below the docked video player (z 200):
   the header is fixed too, and at 80 the player's own bar — close button and
   all — rendered underneath it, so the Full Player looked like it had no way
   out. The mini player stays on top on purpose; it keeps playing while the
   instrument is open. */
.fullplayer { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column;
              background: rgba(9, 10, 13, 0.97); }
.fullplayer .bar { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem;
                   color: #cfcabf; font: 500 0.8rem Inter, system-ui, sans-serif;
                   letter-spacing: 0.06em; border-bottom: 1px solid rgba(236, 233, 226, 0.08); }
.fullplayer .bar .x { margin-left: auto; appearance: none; cursor: pointer;
                      background: none; color: #ece9e2; font-size: 1.15rem; line-height: 1;
                      border: 1px solid rgba(236, 233, 226, 0.35); border-radius: 50%;
                      width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
                      -webkit-tap-highlight-color: transparent; }
.fullplayer .bar .x:hover { color: #ece9e2; border-color: rgba(236, 233, 226, 0.6); }
.fullplayer .host { flex: 1; min-height: 0; position: relative; }
.fullplayer .host canvas { width: 100% !important; height: 100% !important; display: block; }
.fullplayer .loading { position: absolute; inset: 0; display: grid; place-items: center;
                       color: #a8a39a; font: 400 0.85rem Inter, system-ui, sans-serif; }

/* ============================================================
   Homepage copy rework (Aug 2026) — hero extras, craft stages,
   reviews, buying, FAQ, final CTA + newsletter
   ============================================================ */

/* hero: review line + sound button */
.hero-review { margin-top: 1.3rem; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--muted); }
.hero-hear span { margin-left: 0.4em; font-size: 0.8em; }
.hero-hear.is-playing { border-color: var(--gold); color: var(--gold); }

/* range: scale pointer line */
.range-pointer { font-size: 0.95rem; }
.range-pointer a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.range-pointer a:hover { color: var(--ink); }

/* material & craft: the three build stages */
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.stage { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem 1.6rem 1.6rem; }
.stage-num {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: 1rem;
  border-radius: 50%; border: 1px solid var(--line);
  font-family: var(--font-display); font-size: 1rem; color: var(--gold);
}
.stage strong { display: block; margin-bottom: 0.6rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.stage p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .stages { grid-template-columns: 1fr; } }

/* customer reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: start; }
.review-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; margin: 0; }
.review-stars { color: var(--gold); letter-spacing: 0.25em; font-size: 1.1rem; margin-bottom: 1rem; }
.review-card blockquote { margin: 0; font-size: 0.95rem; line-height: 1.65; color: #c9c6be; }
.review-card figcaption { margin-top: 1.2rem; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-light); display: flex; flex-direction: column; gap: 0.25rem; }
.review-card figcaption span { color: var(--muted); letter-spacing: 0.1em; }
.review-cta { margin-top: 2.4rem; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; } }

/* buying an Ayasa */
.buy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; }
.buy-cards .fact { margin-bottom: 0; }

/* FAQ accordion */
.faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0.2rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brand-light); }
.faq-chev { color: var(--muted); transition: transform 0.25s; flex: none; }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-answer { padding: 0 0.2rem 1.4rem; max-width: 720px; }
.faq-answer p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.9rem; }
.faq-answer a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.faq-cta { margin-top: 2.4rem; }

/* final CTA + newsletter */
.section-final { text-align: center; }
.final-inner { max-width: 640px; margin: 0 auto; }
.final-inner h2 { margin-bottom: 2rem; }
.newsletter { margin-top: 4rem; padding-top: 2.6rem; border-top: 1px solid var(--line); }
.newsletter-lead { color: var(--ink); margin-bottom: 1.2rem; }
.newsletter-row { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.newsletter-row input[type="email"] {
  flex: 1 1 260px; max-width: 340px; padding: 0.85rem 1.1rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 0.95rem;
}
.newsletter-row input[type="email"]:focus { outline: none; border-color: var(--brand-light); }
.newsletter-note { margin-top: 1rem; font-size: 0.8rem; color: var(--muted); }
.newsletter-ok { color: var(--gold); }
.newsletter-err { color: #d98488; margin-bottom: 0.8rem; }

/* cache-bump 2026-08-27 */

/* ---------- condition dropdown (product page) + "from" price (grid) ---------- */
.price-cond { display: inline-flex; align-items: center; gap: 0.9rem; }
.cond-wrap { position: relative; display: inline-block; }
.cond-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-family: var(--font-body); font-size: 0.8rem; padding: 0.38rem 0.85rem;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.cond-trigger:hover, .cond-trigger[aria-expanded="true"] { border-color: var(--slate); color: var(--ink); }
.cond-trigger b { color: var(--ink); font-weight: 500; }
.cond-chev { font-size: 0.65em; color: var(--muted); transition: transform 0.25s ease; }
.cond-trigger[aria-expanded="true"] .cond-chev { transform: rotate(180deg); }
.cond-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; z-index: 30;
  background: var(--bg-3); border: 1px solid rgba(236, 233, 226, 0.18); border-radius: 12px;
  padding: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.cond-menu[hidden] { display: none; }
.cond-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; width: 100%;
  border-radius: 8px; color: var(--ink); font-family: var(--font-body); font-size: 0.85rem;
  padding: 0.5rem 0.7rem; cursor: pointer; text-align: left; box-sizing: border-box;
}
a.cond-row:hover { background: var(--brand-fill); color: var(--ink); }
.cond-row.on { background: var(--brand-fill); box-shadow: inset 0 0 0 1px var(--brand-light); cursor: default; }
.cond-row span { color: var(--brand-light); font-size: 0.8rem; }
.cond-foot {
  display: block; margin: 4px 5px 3px; padding-top: 7px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; line-height: 1.5;
}
.price-from { color: var(--muted); font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.04em; }
/* price + condition on top, ship date beneath — the date follows the condition */
.product-meta-stacked { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.product-meta-stacked .product-price { margin: 0; }

/* ---------- fullscreen photo viewer ---------- */
.gal-zoom { right: 0.8rem; top: 0.8rem; transform: none; width: 36px; height: 36px; font-size: 0; }
.pviewer {
  position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column;
  background: rgba(8, 9, 11, 0.94); backdrop-filter: blur(6px);
  padding: 0.9rem 1.2rem 0.8rem;
}
.pviewer.open { display: flex; }
.pv-top { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.pv-angle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.pv-angle::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.pv-angle[hidden] { visibility: hidden; display: inline-flex; } /* keeps the bar's height steady */
.pv-actions { display: flex; gap: 0.6rem; align-items: center; }
.pv-heart {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(236, 233, 226, 0.18);
  background: rgba(13, 14, 17, 0.55); color: var(--ink); display: grid; place-items: center;
  cursor: pointer; padding: 0;
}
.pv-heart[aria-pressed="true"], .pv-heart.on { color: var(--gold); border-color: var(--gold); }
.pv-x {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(236, 233, 226, 0.18);
  background: rgba(13, 14, 17, 0.55); color: var(--ink); font-size: 1rem;
  display: grid; place-items: center; cursor: pointer;
}
.pv-x:hover, .pv-heart:hover { border-color: var(--slate); }
.pv-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 0; }
.pv-nav {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(236, 233, 226, 0.18);
  background: rgba(13, 14, 17, 0.55); color: var(--ink); font-size: 1.4rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.pv-nav:hover { border-color: var(--slate); }
.pv-imgwrap {
  height: 100%; max-width: min(78vh, 72vw); aspect-ratio: 1; display: grid; place-items: center;
  overflow: hidden; border-radius: 12px;
}
.pv-img {
  max-width: 100%; max-height: 100%; display: block; cursor: zoom-in;
  transition: transform 0.35s ease; background: #fff; border-radius: 12px;
}
.pv-img.zoomed { transform: scale(2.4); cursor: zoom-out; transition: transform 0.35s ease; }
.pv-hint { text-align: center; color: var(--muted); font-size: 0.74rem; margin: 0.4rem 0 0.7rem; }
.pv-thumbs { display: flex; justify-content: center; gap: 0.55rem; flex-wrap: wrap; }
.pv-thumb {
  width: 58px; height: 58px; border-radius: 10px; border: 1px solid rgba(236, 233, 226, 0.14);
  background: #101116; padding: 0; cursor: pointer; overflow: hidden; position: relative;
}
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.75; }
.pv-thumb:hover img, .pv-thumb.on img { opacity: 1; }
.pv-thumb.on { border-color: var(--brand-light); box-shadow: 0 0 0 1px var(--brand-light); }
.pv-ttag {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0 2px;
  font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: rgba(8, 9, 11, 0.65);
}
.pv-3d { border-style: dashed; display: grid; place-items: center; }
.pv-3d span { font-family: var(--font-display); font-size: 0.95rem; color: var(--brand-light); }
.pv-3d:hover { border-color: var(--brand-light); }
@media (max-width: 700px) {
  .pv-nav { display: none; } /* phones swipe */
  .pv-imgwrap { max-width: 94vw; }
}

/* Full Player pill inside the product-page notes box (Roy 28-08) */
.product-notes .fp-btn-notes { margin-top: 0.9rem; }

/* long reviews fold to a short card (Roy 31-08) */
.review-quote.clamped { display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; }
.review-more {
  align-self: flex-start; margin-top: 0.6rem; padding: 0; background: none; border: 0;
  cursor: pointer; color: var(--brand-light); font-family: var(--font-body);
  font-size: 0.8rem; letter-spacing: 0.06em;
}
.review-more:hover { color: var(--ink); }
.review-card { display: flex; flex-direction: column; }

/* the reviews CTA sits in the grid: under the first card, beside the second */
.review-grid .review-cta { grid-column: 1; margin: 0.2rem 0 0; align-self: start; }
.review-first { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.review-first .review-card { width: 100%; }
/* fold-the-odd-one-out supersedes the fixed 10-line clamp (Roy 31-08) */
.review-quote.clamped { display: block; -webkit-line-clamp: unset; overflow: hidden; }
/* The photograph behind the product page's notes box — the card's own picture,
   framed again for a box that is nearly square where the card is tall. Whether
   it shows and how strongly are the shop's answer, set in the studio. */
.product-notes.has-notes-bg { position: relative; isolation: isolate; overflow: hidden; }
.product-notes .notes-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
}
/* faded from a corner, the way the card does it: strongest where nothing is
   written, gone by the time it reaches the notes and the pill */
.product-notes .notes-bg.fade {
  opacity: 0.62;
  -webkit-mask-image: radial-gradient(130% 105% at 100% 0%, #000 18%, transparent 62%);
  mask-image: radial-gradient(130% 105% at 100% 0%, #000 18%, transparent 62%);
}
/* the whole frame at one quiet strength, with a scrim so the text still reads */
.product-notes .notes-bg.even { opacity: 0.34; }
.product-notes .notes-bg.even::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(13, 14, 17, 0.35), rgba(13, 14, 17, 0.55));
}

/* No tap highlight on the instrument. A phone paints a translucent box over
   whatever was tapped, and on a round pan drawn inside a square SVG group that
   box is a blue rectangle across the note you just struck. The player is
   touch-first, so it takes its own feedback: the field lights, the note sounds. */
.pan-slot, .pan-figure { -webkit-tap-highlight-color: transparent; }

/* ---------- homepage rhythm & video bands ---------- */
/* The homepage gap was three different numbers: 0 between the hero and the
   stats strip, one half-gap between the strip and the range, and a full gap
   everywhere below. Two sections each contributing half of --home-gap makes
   every joint the same distance, and gives the band that sits in that gap a
   single number to be positioned from. Scoped to .home-sect, which only the
   ten index.json sections carry — the product, cart and artist pages keep the
   padding they have. */
:root {
  --home-gap-d: 220px;      /* desktop distance between two sections' content */
  --home-gap-m: 140px;      /* the same under 760px */
  --home-gap: var(--home-gap-d);
  /* The band is fade + core + fade tall. The fades ADD to it rather than eat
     into it, so making a fade bigger stretches the effect further up or down
     instead of trading video away for blur — and the two can never cross, which
     under the older share-of-the-height model put the gradient's stops out of
     order and collapsed the plateau into a hard edge. */
  --band-h: 170px;          /* the whole strip of video */
  --band-fade-t: 55px;      /* eaten from its top edge: the distance over */
  --band-fade-b: 65px;      /* which the video goes from nothing to full */
  --band-off: 30px;         /* plain background before the fade begins */
  --band-op: 0.55;
}
@media (max-width: 760px) { :root { --home-gap: var(--home-gap-m); } }

.home-sect { position: relative; --gap-above: calc(var(--home-gap) / 2); }
/* .section.home-sect, not .home-sect, so this wins over .section's own padding
   shorthand wherever it sits in the file */
.section.home-sect { padding-top: calc(var(--home-gap) / 2); padding-bottom: calc(var(--home-gap) / 2); }

/* The stats strip is a flush hairline band with no padding of its own, so the
   section after it has to carry the whole gap alone — and its band therefore
   starts at the strip's own edge, not half a gap above it. */
/* Written through the wrapper, because Shopify puts every section in its own
   <div class="shopify-section"> — so #stats and #range are never siblings and a
   plain `.stats + .section` matches nothing on the real page. The bare pair is
   kept for any context that renders the sections directly. */
.stats + .section.home-sect,
.shopify-section:has(> .stats) + .shopify-section .section.home-sect { padding-top: var(--home-gap); }
/* neither the hero nor the stats strip has bottom padding, so for the section
   after each of them the whole gap is that section's own — and a band there is
   measured from the previous section's edge rather than half a gap above it */
.stats + .home-sect, .hero + .home-sect,
.shopify-section:has(> .stats) + .shopify-section .home-sect,
.shopify-section:has(> .hero) + .shopify-section .home-sect { --gap-above: 0px; }

.home-band {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* --page-w is the viewport MINUS the scrollbar, set from JS. 100vw includes
     the scrollbar, so a 100vw band on a 1440 window overhangs a 1425 page by
     15px and gives the whole site a horizontal scrollbar. */
  width: var(--page-w, 100vw);
  height: var(--band-h);
  /* --band-drop is this joint's own: how much further down it sits than the
     shared offset would put it, eating that much more of the dead space */
  top: calc(var(--band-off) + var(--band-drop, 0px) - var(--gap-above));
  z-index: 0; pointer-events: none; overflow: hidden;
  opacity: var(--band-op);
  /* Eased, not linear. A straight alpha ramp reaches transparent at a constant
     rate and so lands on a faintly visible edge; the three intermediate stops
     are a smoothstep (3t²-2t³ at a quarter, half and three quarters), which
     reads soft at the same size. Stops are absolute lengths from each end, so
     the ramp keeps its shape whatever the core in the middle is doing. */
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.156) calc(var(--band-fade-t) * 0.25),
    rgba(0,0,0,0.5)   calc(var(--band-fade-t) * 0.5),
    rgba(0,0,0,0.844) calc(var(--band-fade-t) * 0.75),
    #000 var(--band-fade-t),
    #000 calc(100% - var(--band-fade-b)),
    rgba(0,0,0,0.844) calc(100% - var(--band-fade-b) * 0.75),
    rgba(0,0,0,0.5)   calc(100% - var(--band-fade-b) * 0.5),
    rgba(0,0,0,0.156) calc(100% - var(--band-fade-b) * 0.25),
    rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.156) calc(var(--band-fade-t) * 0.25),
    rgba(0,0,0,0.5)   calc(var(--band-fade-t) * 0.5),
    rgba(0,0,0,0.844) calc(var(--band-fade-t) * 0.75),
    #000 var(--band-fade-t),
    #000 calc(100% - var(--band-fade-b)),
    rgba(0,0,0,0.844) calc(100% - var(--band-fade-b) * 0.75),
    rgba(0,0,0,0.5)   calc(100% - var(--band-fade-b) * 0.5),
    rgba(0,0,0,0.156) calc(100% - var(--band-fade-b) * 0.25),
    rgba(0,0,0,0) 100%);
}
/* the band is the window; --slice slides the frame up so each joint shows the
   next strip down the video */
.home-band > video {
  position: absolute; left: 0; top: calc(var(--slice, 0px) * -1);
  width: 100%; height: auto; display: block;
}

/* The band is inserted as the first child, so every following sibling paints
   over it — but only if it is positioned too, since unpositioned blocks paint
   below positioned ones whatever the DOM order. Cheaper than a stacking
   context on the section, which would trap .pill-rail and .story-quote. */
.home-sect > *:not(.home-band) { position: relative; }

/* A band hangs upward out of the section that hosts it, and the artists section
   hid its overflow for the logo watermark, so it cut the band off. `clip` lets
   the margin below through while still producing no scrollable overflow — and,
   unlike `hidden`, it does not make a scroll container, so .pill-rail and
   .story-quote keep sticking. `hidden` first, as the fallback for a browser
   that does not know `clip`: it loses the bleed, which is only cosmetic.
   The watermark is trimmed to the section on its own, because clip-margin would
   otherwise let it hang over the page edge — clip-path paints, it does not
   change layout, which is why the section still needs to clip. */
.section-artists.home-sect { overflow: hidden; overflow: clip; overflow-clip-margin: 420px; }

@media (prefers-reduced-motion: reduce) {
  /* the band stays, holding one frame — the draw loop never starts */
  .home-band { opacity: calc(var(--band-op) * 0.85); }
}

/* Docked grid: a separate, bounded strip. It never sizes the video or the fade. */
.demo-dock-toggle { display: none !important; }
.demo-lightbox.minimized .demo-dock-toggle { display: grid !important; }
.demo-dock-grid[hidden] { display: none; }
.demo-dock-grid { position: fixed; z-index: 45; display: grid; grid-template-columns: 28px minmax(0,1fr) 28px; gap: 6px; pointer-events: none; }
.demo-dock-prev,.demo-dock-next { align-self: center; display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 1px solid #ffffff24; border-radius: 20px; color: var(--ink); background: #101217b8; cursor: pointer; pointer-events: auto; }
.demo-dock-prev:disabled,.demo-dock-next:disabled { opacity: .25; pointer-events: none; }
.demo-dock-window { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--dock-rows),var(--dock-tile-height)); grid-auto-columns: var(--dock-tile-width); gap: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x; pointer-events: auto; }
.demo-dock-window::-webkit-scrollbar { display: none; }
.demo-dock-clip { position: relative; padding: 0; min-width: 0; border: 1px solid #ffffff15; border-radius: 7px; overflow: hidden; background: #101216; color: var(--ink); cursor: pointer; }
.demo-dock-clip img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.demo-dock-clip span { position: absolute; inset: auto 0 0; padding: 20px 5px 5px; background: linear-gradient(transparent,#080a0de8); font-size: 9px; line-height: 1.25; text-align: left; pointer-events: none; }
.demo-dock-clip.active { border: 2px solid var(--gold); }
.demo-dock-clip.active::after { content: "▶"; position: absolute; top: 4px; left: 4px; color: var(--gold); background: #111b; border-radius: 3px; font-size: 8px; padding: 2px 4px; }
.demo-dock-clip:focus-visible,.demo-dock-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.demo-lightbox.dock-grid .demo-deck { visibility: hidden; pointer-events: none; }
.demo-lightbox.dock-grid .demo-deck .demo-slide { pointer-events: none !important; }
@media(min-width:641px) {
  .demo-lightbox.deck.minimized.dock-grid .demo-scroll { width: var(--dock-artist-width); transform: translateX(var(--dock-artist-x)); }
  .demo-lightbox.deck.minimized.dock-grid .demo-mini-info,.demo-lightbox.deck.minimized.dock-grid .demo-cta { width: var(--dock-model-width); max-width: none; transform: translateX(var(--dock-model-x)); justify-self: start; }
  .demo-lightbox.deck.minimized.dock-grid .demo-mini-name,.demo-lightbox.deck.minimized.dock-grid .demo-mini-scale,.demo-lightbox.deck.minimized.dock-grid .demo-artist-text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-lightbox.deck.minimized.dock-grid .demo-artist-avatar { display: none; }
  .demo-lightbox.deck.minimized.dock-grid .demo-cta-row { gap: 8px; }
  .demo-lightbox.deck.minimized.dock-grid .demo-cta-btn { padding: .55rem .65rem; font-size: .65rem; }
}
@media(max-width:640px) {
  .demo-lightbox.minimized .demo-dock-toggle { width: 26px; height: 26px; padding: 0; }
  .demo-lightbox.minimized.dock-grid .demo-mini-info { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: auto 1fr auto; align-content: start; gap: 6px 10px; }
  .demo-lightbox.minimized.dock-grid .demo-mini-info .demo-tabs { display: none; }
  .demo-lightbox.minimized.dock-grid .demo-mini-name { grid-column: 2; grid-row: 1; font-size: .85rem; }
  .demo-lightbox.minimized.dock-grid .demo-mini-scale { grid-column: 2; grid-row: 2; font-size: .55rem; }
  .demo-lightbox.minimized.dock-grid .demo-mini-info .demo-artist { grid-column: 1; grid-row: 1 / 3; overflow: hidden; align-self: start; }
  .demo-lightbox.minimized.dock-grid .demo-artist-text { display: block; white-space: normal; }
  .demo-lightbox.minimized.dock-grid .demo-artist-text strong { font-size: .75rem; }
  .demo-lightbox.minimized.dock-grid .demo-artist-cred { display: none; }
  .demo-lightbox.minimized.dock-grid .demo-mini-actions { grid-column: 1 / -1; grid-row: 3; }
  .demo-lightbox.minimized.dock-grid,.demo-lightbox.minimized.dock-grid .demo-panel { pointer-events: none; }
  .demo-lightbox.minimized.dock-grid video,.demo-lightbox.minimized.dock-grid .demo-mini-info,.demo-lightbox.minimized.dock-grid .demo-top { pointer-events: auto; }
}

.demo-lightbox.deck.minimized.dock-grid .demo-cta-inner { opacity: 1; transform: none; transition: none; }
@media(max-width:640px) {
  .demo-lightbox.minimized .demo-dock-toggle { display: grid; place-items: center; color: #fff; background: rgba(8,9,11,.55); border: 1px solid #ffffff2e; border-radius: 50%; cursor: pointer; }
}

/* Empty gaps stay click-through; gestures beginning on a card still bubble to
   the native horizontal scroller. */
.demo-dock-window { pointer-events: none; }
.demo-dock-clip { pointer-events: auto; }
@media(max-width:640px) {
  .demo-lightbox .demo-stage { display: contents; }
  .demo-lightbox .demo-deck,.demo-lightbox .demo-now,.demo-lightbox .demo-grid-heading,.demo-lightbox .demo-side { display: none; }
}

.demo-dock-clip { opacity: var(--dock-opacity, .85); }
.demo-dock-clip.active,.demo-dock-clip:hover,.demo-dock-clip:focus-visible { opacity: 1; }
.demo-dock-clip span { font-size: var(--dock-name-size, 9px); }

/* Softly tuck overflowing clips away before the neighbouring text/video. */
.demo-dock-window { mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); padding-inline: 12px; scroll-padding-inline: 12px; }

/* Mobile L: the existing player elements in a compact, responsive layout. */
.demo-mobile-meta { display: none; }
.demo-lightbox:fullscreen { width: 100%; height: 100%; background: #080a0d; }
@media (max-width: 640px) {
  .demo-lightbox.mobile-player { inset: 0; width: 100%; height: 100%; place-items: stretch; }
  .demo-lightbox.mobile-player .demo-panel {
    position: relative; display: grid; grid-template-columns: minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) 60px 96px; gap: 8px;
    width: 100%; height: 100svh; height: 100dvh; max-height: none;
    padding: 0 max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    border: 0; border-radius: 0; background: #080a0d; overflow: hidden;
  }
  .demo-lightbox.mobile-player.mobile-intro .demo-panel { grid-template-rows: minmax(0,1fr) 60px 128px; }
  .demo-lightbox.mobile-player .demo-stage { display: block; grid-row: 1; grid-column: 1; position: relative; height: 100%; min-height: 0; margin: 0 -10px; overflow: hidden; }
  .demo-lightbox.mobile-player .demo-panel video { display: block; position: static; width: 100%; height: 100%; max-height: none; aspect-ratio: auto !important; object-fit: cover; border: 0; border-radius: 0; margin: 0; }
  .demo-lightbox.mobile-player .demo-top { inset: 0 0 auto; top: 0 !important; padding: max(24px,env(safe-area-inset-top)) 10px 24px; display: flex; align-items: center; gap: 8px; z-index: 50; }
  .demo-lightbox.mobile-player .demo-top-id { display: block; flex: 1; min-width: 0; }
  .demo-lightbox.mobile-player .demo-title { font-size: 17px; line-height: 1.15; margin: 0; }
  .demo-lightbox.mobile-player .demo-sub { font-size: 9px; margin: 4px 0 0; }
  .demo-lightbox.mobile-player .demo-dots { z-index: 51; top: max(9px,calc(env(safe-area-inset-top) - 12px)); }
  .demo-lightbox.mobile-player .demo-mobile-meta { display: grid; grid-row: 3; grid-column: 1; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; min-height: 0; }
  .demo-lightbox.mobile-player .demo-scroll { display: block; grid-column: 1; grid-row: 1; height: 100%; max-height: 100%; width: auto; min-height: 0; padding: 0 0 8px; margin: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; transform: none; }
  .demo-lightbox.mobile-player .demo-scroll::-webkit-scrollbar,.demo-lightbox.mobile-player .demo-mobile-product::-webkit-scrollbar { display: none; }
  .demo-lightbox.mobile-player .demo-scroll.scroll-fade { mask-image: linear-gradient(#000 calc(100% - 16px),transparent); }
  .demo-lightbox.mobile-player .demo-tabs,.demo-lightbox.mobile-player .demo-artist-avatar { display: none; }
  .demo-lightbox.mobile-player .demo-artist { display: block; padding: 0; margin: 0; border: 0; }
  .demo-lightbox.mobile-player .demo-artist-text { display: block; white-space: normal; overflow: visible; }
  .demo-lightbox.mobile-player .demo-artist-text strong { display: block; font-size: 13px; line-height: 1.25; white-space: normal; overflow: visible; }
  .demo-lightbox.mobile-player .demo-artist-cred { display: block; font-size: 9px; line-height: 1.4; letter-spacing: .03em; white-space: normal; overflow: visible; text-overflow: clip; margin: 4px 0 0; }
  .demo-lightbox.mobile-player .demo-artist-bio { display: none; }
  .demo-lightbox.mobile-player.mobile-intro .demo-artist-bio { display: block; font-size: 11px; line-height: 1.45; margin: 6px 0 0; }
  .demo-lightbox.mobile-player .demo-mobile-product { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: none; pointer-events: auto; }
  .demo-lightbox.mobile-player.mobile-swap .demo-scroll { grid-column: 2; }
  .demo-lightbox.mobile-player.mobile-swap .demo-mobile-product { grid-column: 1; }
  .demo-lightbox.mobile-player .demo-mini-info { display: block; position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; transform: none; }
  .demo-lightbox.mobile-player .demo-mini-name { font: 17px/1.15 var(--font-display); white-space: normal; margin: 0; }
  .demo-lightbox.mobile-player .demo-mini-scale { font-size: 8px; line-height: 1.3; white-space: normal; margin: 4px 0 0; }
  .demo-lightbox.mobile-player .demo-mini-actions { display: flex; gap: 5px; margin-top: 8px; align-items: center; }
  .demo-lightbox.mobile-player .demo-mini-shop { flex: 0 1 auto; font-size: 8px; letter-spacing: .035em; white-space: nowrap; padding: 7px 9px; }
  .demo-lightbox.mobile-player .demo-mini-heart { display: flex; position: static; flex: 0 0 28px; width: 28px; height: 28px; }
  .demo-lightbox.mobile-player .demo-cta.demo-cta-shop { display: none; }
  .demo-lightbox.mobile-player .has-buy .demo-mini-actions { display: none; }
  .demo-lightbox.mobile-player .demo-cta { margin: 6px 0 0; display: block; }
  .demo-lightbox.mobile-player .demo-cta-inner { opacity: 1; transform: none; transition: none; overflow: visible; }
  .demo-lightbox.mobile-player .demo-cta-row { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
  .demo-lightbox.mobile-player .demo-cta-price { margin: 0; }
  .demo-lightbox.mobile-player .demo-cta-price strong { font-size: 15px; }
  .demo-lightbox.mobile-player .demo-cta-actions { gap: 5px; }
  .demo-lightbox.mobile-player .demo-cta-btn { font-size: 9px; padding: 7px 10px; }
  .demo-lightbox.mobile-player .demo-cta-heart { width: 28px; height: 28px; }
  .demo-lightbox.mobile-player .demo-dock-grid { position: static; grid-column: 1; grid-row: 2; display: block; width: 100%; height: 60px; min-width: 0; min-height: 0; z-index: 4; }
  .demo-lightbox.mobile-player .demo-dock-prev,.demo-lightbox.mobile-player .demo-dock-next { display: none; }
  .demo-lightbox.mobile-player .demo-dock-window { grid-template-rows: 60px; grid-auto-columns: 35px; height: 60px; gap: 6px; padding-inline: 0 14px; -webkit-mask-image: none; mask-image: none; }
  .demo-lightbox.mobile-player .demo-dock-clip { border-radius: 5px; }
  .demo-lightbox.mobile-player .demo-dock-clip img { object-fit: cover; }
  .demo-lightbox.mobile-player .demo-dock-clip span { display: none; }
  .demo-lightbox.mobile-player .demo-hint { bottom: 240px; }
  .demo-lightbox.mobile-player.minimized { inset: auto 0 0; height: auto; pointer-events: none; }
  .demo-lightbox.mobile-player.minimized .demo-panel {
    grid-template-columns: 123.75px minmax(0,1fr); grid-template-rows: auto minmax(72px,1fr) auto; gap: 4px 10px;
    height: calc(220px + 10px + max(10px,env(safe-area-inset-bottom))); width: 100%; max-height: none;
    padding-top: 10px; border: 0; background: none; box-shadow: none; overflow: visible; pointer-events: none;
  }
  .demo-lightbox.mobile-player.minimized .demo-panel::before { content: ''; position: absolute; z-index: -1; inset: -25px 0 0; background: linear-gradient(transparent,#080a0df0 25%,#080a0d); pointer-events: none; }
  .demo-lightbox.mobile-player.minimized .demo-stage { grid-column: 1; grid-row: 1 / 4; height: 220px; width: 123.75px; margin: 0; border-radius: 8px; pointer-events: auto; }
  .demo-lightbox.mobile-player.minimized .demo-panel video { width: 123.75px; height: 220px; border-radius: 8px; }
  .demo-lightbox.mobile-player.minimized .demo-top { position: absolute; top: 10px !important; left: auto; right: max(10px,env(safe-area-inset-right)); width: 62px; padding: 0; background: none; justify-content: flex-end; height: 28px; gap: 6px; pointer-events: none; }
  .demo-lightbox.mobile-player.minimized .demo-top-id,.demo-lightbox.mobile-player.minimized .demo-dots { display: none; }
  .demo-lightbox.mobile-player.minimized .demo-min,.demo-lightbox.mobile-player.minimized .demo-close { width: 28px; height: 28px; pointer-events: auto; }
  .demo-lightbox.mobile-player.minimized .demo-mobile-meta { display: contents; }
  .demo-lightbox.mobile-player.minimized .demo-scroll { grid-column: 2; grid-row: 1; display: block; height: auto; max-height: 88px; padding: 0; pointer-events: auto; align-self: start; }
  .demo-lightbox.mobile-player.minimized .demo-dock-grid { grid-column: 2; grid-row: 2; height: 100%; container-type: size; }
  .demo-lightbox.mobile-player.minimized .demo-dock-window { grid-template-rows: 100%; grid-auto-columns: calc(100cqh * 9 / 16); height: 100%; }
  .demo-lightbox.mobile-player.minimized .demo-mobile-product { grid-column: 2; grid-row: 3; align-self: end; max-height: 100%; }
  /* The title shares the controls' bottom line, while the subtitle can use
     the full column. Only the title reserves room for the two buttons. */
  .demo-lightbox.mobile-player.minimized .demo-artist-text strong { display: flex; align-items: flex-end; min-height: 28px; padding-right: 68px; font-size: 12px; line-height: 14px; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-panel { grid-template-rows: 28px auto minmax(72px,1fr) auto; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-stage { grid-row: 1 / 5; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-top { position: static; grid-column: 2; grid-row: 1; width: auto; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-dock-grid { grid-row: 3; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mobile-product { grid-row: 2; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-scroll { grid-row: 4; height: auto; max-height: 54px; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-artist-text strong { display: block; min-height: 0; padding-right: 0; }
  .demo-lightbox.mobile-player.minimized .demo-artist-cred { display: block; font-size: 9px; letter-spacing: 0; margin-top: 3px; }
  .demo-lightbox.mobile-player.minimized .demo-mini-info { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 3px 6px; padding: 0; height: auto; overflow: visible; }
  .demo-lightbox.mobile-player.minimized .demo-mini-name { grid-column: 1; grid-row: 1; font-size: 14px; align-self: end; }
  .demo-lightbox.mobile-player.minimized .demo-mini-scale { grid-column: 1 / -1; grid-row: 2; font-size: 7.5px; letter-spacing: .02em; margin: 0; }
  .demo-lightbox.mobile-player.minimized .demo-mini-actions { grid-column: 2; grid-row: 1; margin: 0; gap: 4px; }
  .demo-lightbox.mobile-player.minimized .demo-mini-shop { padding: 7px 6px; font-size: 7px; letter-spacing: 0; }
  .demo-lightbox.mobile-player.minimized .demo-mini-heart { width: 27px; height: 27px; flex-basis: 27px; }

  .demo-lightbox.mobile-player.minimized .demo-cta { display: none; }
  .demo-lightbox.mobile-player.minimized .has-buy .demo-mini-actions { display: flex; }
  .demo-lightbox.mobile-player.minimized .has-buy .demo-mini-info { display: grid; }
  .demo-lightbox.mobile-player.minimized .demo-unmute { left: 16px; right: auto; bottom: calc(max(10px,env(safe-area-inset-bottom)) + 7px); z-index: 52; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-panel { grid-template-rows: minmax(110px,30dvh) 0 minmax(0,1fr); }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-dock-grid,.demo-lightbox.mobile-player.buying:not(.minimized) .demo-scroll { display: none; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-mobile-meta { display: flex; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-mobile-product { width: 100%; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta-casewrap { max-height: none; overflow: visible; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-panel video { max-height: none; }
}
@media (max-width: 375px) {
  /* Keep the same low dock on narrow phones; crop the thumbnail a little
     more so the model, subtitle and shop actions can stay together. */
  .demo-lightbox.mobile-player.minimized .demo-panel { grid-template-columns: 99px minmax(0,1fr); }
  .demo-lightbox.mobile-player.minimized .demo-stage,
  .demo-lightbox.mobile-player.minimized .demo-panel video { width: 99px; }
  .demo-lightbox.mobile-player.minimized .demo-mini-name { font-size: 12.5px; line-height: 1.1; }
}

/* Expanded phone: model, clip strip, then artist, each across the width. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-panel {
    grid-template-rows: minmax(0,1fr) auto clamp(80px,12dvh,104px) 54px;
    gap: 8px;
  }
  .demo-lightbox.mobile-player.mobile-intro:not(.minimized):not(.buying) .demo-panel {
    grid-template-rows: minmax(0,1fr) auto clamp(80px,12dvh,104px) 86px;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mobile-meta { display: contents; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mobile-product {
    grid-column: 1; grid-row: 2; width: 100%; max-height: 120px;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mini-info {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; align-items: center;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mini-name { grid-column: 1; grid-row: 1; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mini-scale { grid-column: 1; grid-row: 2; margin: 0; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mini-actions { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-dock-grid {
    grid-column: 1; grid-row: 3; height: 100%; container-type: size;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-dock-window {
    height: 100%; grid-template-rows: 100%; grid-auto-columns: calc(100cqh * 9 / 16); gap: 8px;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-scroll {
    grid-column: 1; grid-row: 4; width: 100%; padding: 0; height: 100%; max-height: 100%;
  }
}

/* Model-first mini: title shares the top edge with window controls. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-panel { grid-template-rows: auto minmax(72px,1fr) auto; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-stage { grid-row: 1 / 4; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-top { position: absolute; width: 62px; grid-column: auto; grid-row: auto; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mobile-product { grid-row: 1; align-self: start; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-dock-grid { grid-row: 2; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-scroll { grid-row: 3; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-info { grid-template-columns: minmax(0,1fr); gap: 3px; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-name {
    grid-column: 1; grid-row: 1; align-self: start; padding-right: 68px;
    font-size: 18px; line-height: 1.15;
  }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-scale {
    grid-column: 1; grid-row: 2; padding-right: 68px; font-size: 9px; line-height: 1.3;
  }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-actions { grid-column: 1; grid-row: 3; justify-content: flex-end; }
}

@media (max-width: 375px) {
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-name { font-size: 16px; text-wrap: balance; }
}

/* Expanded footer: content-sized artist area and left-aligned clip strips. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-panel,
  .demo-lightbox.mobile-player.mobile-intro:not(.minimized):not(.buying) .demo-panel {
    grid-template-rows: minmax(0,1fr) auto clamp(80px,12dvh,104px) auto;
    padding-bottom: max(2px,env(safe-area-inset-bottom));
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-scroll {
    height: auto; max-height: 42px; overflow-y: auto; scrollbar-width: none;
  }
  .demo-lightbox.mobile-player.mobile-intro:not(.minimized):not(.buying) .demo-scroll { max-height: 76px; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-scroll.scroll-fade {
    mask-image: linear-gradient(#000 calc(100% - 9px),transparent);
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-dock-window {
    width: 100%; max-width: 100%; margin-inline: 0;
    padding-inline: 0; justify-content: start;
  }
}

/* Fade indicates more clips, so the last thumbnail stays fully visible. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player .demo-dock-grid:has(.demo-dock-next:disabled) .demo-dock-window {
    mask-image: none;
  }
}

/* Model and scale share a bottom edge with the shop actions. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mobile-product { padding-top: 0; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-info {
    grid-template-columns: minmax(0,1fr) auto; grid-template-rows: minmax(0,1fr) auto; min-height: 60px; gap: 3px 6px; align-items: end;
  }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-name {
    padding-right: 0; min-width: 0; align-self: end; font-size: var(--mini-fit-size,18px); overflow-wrap: anywhere;
  }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-scale {
    padding-right: 0; min-width: 0; font-size: var(--mini-fit-size,9px); overflow-wrap: anywhere;
  }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-actions {
    grid-column: 2; grid-row: 1 / 3; align-self: end; align-items: flex-end;
  }
}
@media (max-width: 375px) {
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-name { font-size: var(--mini-fit-size,16px); }
}

/* Mobile buying controls: price above the order/favourite row. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player .has-buy .demo-cta-row {
    flex-direction: column; align-items: flex-end; gap: 3px;
  }
}

/* Expanded mobile: model and buying details share a bottom-aligned row. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mobile-product.has-buy {
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-mini-info {
    grid-column: 1; grid-row: 1; grid-template-columns: minmax(0,1fr); align-self: end;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta {
    grid-column: 2; grid-row: 1; margin: 0; align-self: end;
  }
}

/* Keep the expanded mobile shop label centred in its pill. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized) .demo-mini-shop {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.2; min-height: 28px; box-sizing: border-box;
  }
}

/* Trial: model | price | order, with a readable narrow-phone fallback. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .demo-mobile-product.has-buy {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-mini-info {
    flex: 1 1 110px; min-width: 0;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-mini-name {
    overflow-wrap: anywhere; text-wrap: balance;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta {
    flex: 0 1 auto; margin-left: auto; max-width: 100%;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta-row {
    flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta-price {
    display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; gap: 2px;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta-price s { margin: 0; }
}
@media (max-width: 375px) {
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-mini-info { flex-basis: 100%; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta { flex-basis: 100%; }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-cta-row { justify-content: space-between; }
}

/* Price-between trial: each instrument label stays on one fitted line. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-mini-name {
    font-size: var(--mini-fit-size,17px); white-space: nowrap; text-wrap: nowrap;
  }
  .demo-lightbox.mobile-player:not(.minimized):not(.buying) .has-buy .demo-mini-scale {
    font-size: var(--mini-fit-size,8px); white-space: nowrap; text-wrap: nowrap;
  }
}

/* Expanded purchase controls are visible immediately, without watch-time delay. */
.demo-lightbox:not(.minimized) .demo-cta:not(.demo-cta-shop) {
  grid-template-rows: 1fr; margin-top: 0; transition: none;
}
.demo-lightbox:not(.minimized) .demo-cta:not(.demo-cta-shop) .demo-cta-inner {
  opacity: 1; transform: none; transition: none;
}

/* Mobile order options: compact identity/price header above the real options. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-mobile-product.has-buy {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    grid-auto-rows: min-content; align-content: start; align-items: end; gap: 8px 12px;
  }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-mini-info { grid-column: 1; grid-row: 1; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-mini-scale { margin-top: 2px; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta,
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta-inner { display: contents; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta-row {
    grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; gap: 6px;
  }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta-casewrap { grid-column: 1 / -1; grid-row: 2; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta-add { grid-column: 1 / -1; grid-row: 3; }
  .demo-lightbox.mobile-player.buying:not(.minimized) .demo-cta-error { grid-column: 1 / -1; grid-row: 4; }
}

/* Off-product expanded players show pricing; keep the mini-player shop link. */
.demo-lightbox.remote-purchase:not(.minimized) .demo-mini-actions { display: none; }
.demo-lightbox.remote-purchase.minimized .demo-cta-remote { display: none; }
.demo-remote-price { white-space: nowrap; }
@media (max-width: 640px) {
  .demo-lightbox.mobile-player:not(.minimized) .demo-stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 22px; z-index: 2;
    background: linear-gradient(transparent, #080a0d); pointer-events: none;
  }
}

/* Mobile mini controls: favourite, expand, close; model link replaces shop CTA. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player.minimized .demo-mini-shop { display: none; }
  .demo-lightbox.mobile-player.minimized .demo-mini-actions,
  .demo-lightbox.mobile-player.minimized .has-buy .demo-mini-actions { display: contents; }
  .demo-lightbox.mobile-player.minimized .demo-mini-heart {
    position: absolute; top: 10px; right: calc(max(10px,env(safe-area-inset-right)) + 68px);
    width: 28px; height: 28px; margin: 0; z-index: 50; pointer-events: auto;
  }
  .demo-lightbox.mobile-player.minimized .demo-mini-info {
    grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; min-height: 0;
  }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mobile-product { padding-top: 34px; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mini-info {
    grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; min-height: 0;
  }
  .demo-lightbox.mobile-player.minimized:not(.mobile-swap) .demo-artist-text strong { padding-right: 102px; }
}

/* Align dock controls with the model subtitle, reserving room for all three. */
@media (max-width: 640px) {
  .demo-lightbox.mobile-player.minimized .demo-mini-info { padding-right: 102px; min-height: 28px; }
  .demo-lightbox.mobile-player.minimized.mobile-swap .demo-mobile-product { padding-top: 0; }
  .demo-lightbox.mobile-player.minimized .demo-top { top: var(--mini-controls-top,10px) !important; }
  .demo-lightbox.mobile-player.minimized .demo-mini-heart { top: var(--mini-controls-top,10px); }
  .demo-lightbox.mobile-player.minimized .demo-mini-scale { font-size: var(--mini-fit-size,9px); }
  .demo-lightbox.mobile-player.minimized:not(.mobile-swap) .demo-artist-text strong { padding-right: 0; }
}

/* Desktop dock: readable artist copy and a direct shop link. */
@media (min-width: 641px) {
  .demo-lightbox.deck.minimized .demo-mini-actions { display: flex; align-items: center; gap: 8px; }
  .demo-lightbox.deck.minimized .demo-mini-shop { display: inline-flex; }
  .demo-lightbox.deck.minimized .demo-artist-bio { display: block; max-height: 5.8em; overflow-y: auto; scrollbar-width: none; }
  .demo-lightbox.deck.minimized .demo-artist-bio::-webkit-scrollbar { display: none; }
  .demo-lightbox.deck.minimized .demo-scroll { overflow-y: auto; scrollbar-width: none; }
  .demo-lightbox.deck.minimized .demo-scroll::-webkit-scrollbar { display: none; }
  .demo-dock-grid.all-fit { grid-template-columns: minmax(0,1fr); }
  .demo-dock-grid.all-fit .demo-dock-prev,.demo-dock-grid.all-fit .demo-dock-next { display: none; }
}

/* Desktop ordering uses the free side of the player for its real options. */
@media (min-width: 641px) {
  .demo-lightbox.deck.buying:not(.minimized) .demo-panel { grid-template-columns: var(--grid-video-width,40%) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr); gap: 14px 24px; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-stage { grid-column: 1; grid-row: 1 / -1; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-scroll,
  .demo-lightbox.deck.buying:not(.minimized) .demo-deck,
  .demo-lightbox.deck.buying:not(.minimized) .demo-grid-heading,
  .demo-lightbox.deck.buying:not(.minimized) .demo-mini-actions { display: none; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-mini-info { grid-column: 2; grid-row: 1; align-self: start; padding-right: 104px; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-cta { grid-column: 2; grid-row: 2; align-self: stretch; min-height: 0; margin: 0; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-cta-inner { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-cta-casewrap { flex: 0 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-cta-row,
  .demo-lightbox.deck.buying:not(.minimized) .demo-cta-add { flex-shrink: 0; }
  .demo-lightbox.deck.buying:not(.minimized) .shirt-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.demo-order-fallback { display: inline-block; margin-top: 8px; text-decoration: underline; }

@media (min-width: 641px) {
  .demo-lightbox.deck.buying:not(.minimized) .demo-mini-info { display: grid; grid-template-columns: minmax(0,max-content) auto; gap: 4px 10px; align-items: center; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-mini-name { grid-column: 1; grid-row: 1; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-mini-scale { grid-column: 1 / -1; grid-row: 2; }
  .demo-lightbox.deck.buying:not(.minimized) .demo-mini-info > .demo-cta-heart { grid-column: 2; grid-row: 1; justify-self: start; position: static; width: 36px; height: 36px; margin: 0; }
}

/* Desktop dock keeps navigation; purchasing belongs to the expanded player. */
@media (min-width: 641px) {
  .demo-lightbox.minimized .demo-cta { display: none; }
}
/* Hide the native fullscreen icon as well as disabling its action. */
.demo-lightbox video::-webkit-media-controls-fullscreen-button {
  display: none !important;
}
/* Three case families, with compact Evatek colors revealed on demand. */
.case-picker.case-families { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.case-families > .case-card { min-width: 0; position: relative; }
.case-families > .case-card .case-name { font-size: 0.83rem; }
.case-families .case-thumb, .case-trigger-label img { background: #0d0e11; }
.case-color-count { font-size: 0.66rem; color: var(--muted); }
.case-family-chevron { font-size: 0.75rem; line-height: 1; color: var(--muted); transition: transform 0.2s; }
.case-family[aria-expanded="true"] { border-color: var(--slate); }
.case-family[aria-expanded="true"] .case-family-chevron { transform: rotate(180deg); }
.case-colors { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; padding-top: 0.25rem; animation: case-colors-in 0.18s ease-out; }
.case-colors[hidden] { display: none; }
.case-colors-label { grid-column: 1 / -1; font-size: 0.76rem; color: var(--muted); margin: 0; }
.case-colors .case-card { min-width: 0; }
.case-family:focus-visible, .case-families .case-card:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }
@keyframes case-colors-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .case-colors { animation: none; } }

/* ---------- full FAQ page ---------- */
.faq-page .section-head { margin-bottom: 2.4rem; }
.faq-cat {
  font-family: var(--font-display); font-weight: 500; font-size: 1.45rem;
  margin: 2.8rem 0 0.9rem; letter-spacing: -0.01em;
}
.faq-page .faq-list { max-width: 820px; }
.faq-outro { margin-top: 4.5rem; color: var(--muted); font-size: 0.95rem; max-width: 720px; }
.faq-outro p { margin: 0; }
.faq-outro a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ page, design A: two columns of category tables ---------- */
.faq-page { padding-top: clamp(5.5rem, 8vw, 7rem); }
.faqp-head { margin-bottom: 1.8rem; }
.faqp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.faqp-card { background: var(--bg-2); border: 1px solid rgba(236, 233, 226, 0.12); border-radius: 14px; overflow: hidden; }
.faqp-cat {
  padding: 0.85rem 1.15rem; background: var(--bg-3); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em;
}
.faqp-item { border-top: 1px solid rgba(236, 233, 226, 0.07); }
.faqp-item:first-of-type { border-top: 0; }
.faqp-item summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem 1.15rem; cursor: pointer; list-style: none;
  font-family: var(--font-body); font-size: 0.87rem; color: #c9c6be;
}
.faqp-item summary::-webkit-details-marker { display: none; }
.faqp-item summary:hover { color: var(--ink); background: rgba(236, 233, 226, 0.03); }
.faqp-item[open] summary { color: var(--ink); }
.faqp-item .faq-chev { color: var(--brand); font-size: 0.65rem; }
.faqp-answer { padding: 0.1rem 1.15rem 0.9rem; }
.faqp-answer p { color: var(--muted); font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.7rem; }
.faqp-answer p:last-child { margin-bottom: 0; }
.faqp-answer a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 820px) { .faqp-grid { grid-template-columns: 1fr; } }
/* independent columns: each stacks its cards tightly (16-09) */
.faqp-col { display: flex; flex-direction: column; gap: 2mm; min-width: 0; }
@media (max-width: 820px) { .faqp-grid .faqp-col { display: contents; } }

/* footer: "Follow us on:" and the three icon links share one row (Roy 17-09) */
.footer-social { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.footer-social-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brand-light); }
.footer-social-icons { display: inline-flex; align-items: center; gap: 0.7rem; }
.footer-social-icons a { color: var(--muted); display: inline-flex; transition: color 0.2s ease; }
.footer-social-icons a:hover { color: var(--ink); }
.footer-faq { margin-top: 0.9rem; }
.footer-faq a { color: var(--muted); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }
.footer-faq a:hover { color: var(--ink); }

/* ---------- legal / policy pages (Privacy, Cookies, Terms, Returns) ---------- */
.policy-page { padding-top: clamp(5.5rem, 8vw, 7rem); }
.policy-inner { max-width: 760px; margin: 0 auto; }
.policy-title { font-size: clamp(1.9rem, 4vw, 2.5rem); margin: 0.3rem 0 0.4rem; letter-spacing: -0.02em; }
.policy-body { color: #c9c6be; }
.policy-updated { color: var(--soft, #857d71); font-size: 0.82rem; letter-spacing: 0.04em; margin: 0 0 2.2rem; }
.policy-body h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.01em; margin: 2.6rem 0 0.7rem; color: var(--ink); }
.policy-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; margin: 1.8rem 0 0.5rem; color: var(--ink); }
.policy-body h4 { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-light); margin: 1.4rem 0 0.4rem; }
.policy-body p { font-size: 0.95rem; line-height: 1.75; margin: 0 0 1rem; }
.policy-body ul { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.policy-body li { font-size: 0.95rem; line-height: 1.7; margin: 0.35rem 0; color: var(--muted); }
.policy-body a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.policy-body a:hover { color: var(--ink); }
.policy-body h2:first-of-type, .policy-body h3:first-of-type { margin-top: 0.6rem; }

/* footer legal links row (Privacy | Cookies | Terms | Returns) */
.footer-legal { max-width: 1280px; margin: 2.4rem auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; }
.footer-legal a { color: var(--muted); font-size: 0.82rem; position: relative; }
.footer-legal a:hover { color: var(--ink); }
.footer-legal a:not(:last-child)::after { content: "|"; position: absolute; right: -0.55rem; color: var(--line); }