/* ─────────────────────────────────────────────────────────────────
   cards.css
   Extracted from kurtezy-v2.html on 2026-04-19 (Item 7 of audit
   2026-04-19 — see docs/PLAYING-CARD-UNIFICATION-2026-04-19.md).
   Loaded from kurtezy-v2.html via <link rel="stylesheet">.
   ───────────────────────────────────────────────────────────────── */

/* ═══ SHELL ═══ */
#shell {
  position:fixed; top:0; left:0; right:0;
  z-index:500;
}
.topbar {
  height:var(--topbar-h);
  background:var(--v-dk);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 36px;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.topbar-r { display:flex; gap:18px; align-items:center; }
.topbar-r a { color:rgba(255,255,255,.72); text-decoration:none; transition:color .15s; }
.topbar-r a:hover { color:#fff; }
.topbar-r .tb-login,
.tb-login {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.08em; background:var(--v); color:#fff;
  padding:3px 11px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.topbar-r .tb-login:hover { color:#fff; opacity:.9; }
.lang-switch { display:inline-flex; gap:6px; align-items:center; font-family:var(--ff-h,inherit); font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin-left:12px; }
.lang-switch .lang-opt { color: rgba(255,255,255,.5); cursor:pointer; text-decoration:none; padding:2px 4px; border-radius:3px; transition:color .15s, background .15s; }
.lang-switch .lang-opt:hover { color:#fff; }
.lang-switch .lang-opt.on { color:#fff; background:rgba(255,255,255,.1); }
.lang-switch .lang-sep { color: rgba(255,255,255,.2); }

header {
  height:var(--header-h);
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 36px;
}
.logo {
  display:inline-flex; align-items:center; cursor:pointer;
  text-decoration:none; color:inherit;
}
.logo:hover, .logo:focus, .logo:visited { text-decoration:none; color:inherit; }
.logo-wm {
  /* Ben SSOT 2026-04-18 "RETENU" reference screenshot:
     "Kurtezy" · Clash Display · Medium 500 · 64px · sentence case.
     Plus accessible, moins formel, référence labels électroniques modernes.
     NO uppercase. NO semibold. NO extra tracking. */
  font-family:var(--ff-h);
  font-size:64px; font-weight:500;
  letter-spacing:-0.02em; text-transform:none;
  color:var(--text); line-height:1;
  display:inline-block; white-space:nowrap;
}
.logo-row { display:flex; align-items:baseline; gap:0; }
.logo-dot {
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--v); margin-left:5px; vertical-align:middle; flex-shrink:0;
}
.logo-sub { font-size:8px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); line-height:1; }
.hdr-nav { display:flex; gap:26px; }
.hdr-nav a {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); cursor:pointer; transition:color .15s;
}
.hdr-nav a:hover, .hdr-nav a.on { color:var(--text); }
.hdr-r { display:flex; gap:7px; align-items:center; }
.hdr-search {
  width:190px; height:32px;
  border:1px solid var(--border); background:var(--bg-wh);
  padding:0 11px; font-size:11px; outline:none;
  transition:border-color .15s;
}
.hdr-search:focus { border-color:var(--v); }
.hdr-search::placeholder { color:var(--muted); }
/* ═══ SEARCH AUTOCOMPLETE (Phase 5) ═══ */
.search-wrap { position:relative; display:flex; align-items:center; }
.search-dropdown {
  position:absolute; top:calc(100% + 4px); left:0;
  width:100%; min-width:260px; max-height:460px;
  overflow-y:auto; z-index:220;
  background:#FFFAF0; border:1px solid var(--border);
  box-shadow:0 18px 38px rgba(73,52,22,.14);
  font-family:var(--ff-b);
}
.search-dropdown[hidden] { display:none; }
.search-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; cursor:pointer;
  border-bottom:1px solid rgba(73,52,22,.06);
  transition:background .12s;
}
.search-item:last-child { border-bottom:none; }
.search-item:hover, .search-item.active { background:var(--v-pale); }
.search-thumb {
  width:36px; height:36px; flex-shrink:0;
  background:#EEE5D2; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.search-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.search-meta {
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:1px;
}
.search-title {
  font-size:11px; font-weight:600; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-sub {
  font-size:9px; color:var(--muted);
  letter-spacing:.03em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-empty, .search-loading {
  padding:14px 12px; font-size:10px; color:var(--muted);
  text-align:center; letter-spacing:.05em;
  text-transform:uppercase; font-family:var(--ff-h);
}
.btn-cart {
  height:32px; padding:0 14px;
  background:var(--v); color:#fff;
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:6px;
  cursor:pointer; transition:background .15s;
}
.btn-cart:hover { background:var(--v-mid); }
.cart-count {
  background:rgba(255,255,255,.22); border-radius:8px;
  padding:1px 6px; font-size:9px;
}

#weeknav {
  height:var(--weeknav-h);
  background:var(--bg-lt);
  border-bottom:1px solid var(--border);
  display:flex; align-items:stretch;
  padding:0 36px; gap:0; overflow-x:auto;
}
.week-tab {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:0 16px; color:var(--muted); cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent;
  display:flex; align-items:center; gap:5px;
  transition:color .18s, border-color .18s;
}
.week-tab:hover { color:var(--text); }
.week-tab.on { color:var(--text); border-bottom-color:var(--v); }
.week-cnt {
  font-weight:400; font-size:9px; color:var(--muted);
  background:var(--border); border-radius:7px; padding:1px 5px;
}
.week-tab.on .week-cnt { background:var(--v-pale); color:var(--v); }

/* ═══ APP ═══ */
#app {
  position:fixed;
  top:var(--shell-h);
  bottom:var(--player-h);
  left:0; right:0;
  overflow:hidden;
}
.view {
  position:absolute; inset:0;
  overflow-y:auto; overflow-x:hidden;
  background:var(--bg);
  transition:transform .4s var(--ease), opacity .4s var(--ease);
  will-change:transform;
}
.view.v-right  { transform:translateX(100%); opacity:0; pointer-events:none; }
.view.v-left   { transform:translateX(-4%);  opacity:.7; pointer-events:none; }
.view.v-active { transform:translateX(0);    opacity:1;  pointer-events:auto; }

/* ═══ FILTER BAR ═══ */
.filter-bar {
  display:flex; gap:6px; align-items:center;
  padding:14px 36px;
  border-bottom:1px solid var(--border);
  background:var(--bg-lt);
  overflow-x:auto; flex-wrap:nowrap;
}
.filter-chip {
  font-family:var(--ff-h); font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px;
  border:1px solid var(--border);
  color:#344054; cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s, border-color .15s;
  background:var(--bg-wh);
}
.filter-chip:hover { border-color:var(--v); color:var(--v); }
.filter-chip.on { background:var(--v); border-color:var(--v); color:#fff; }
.filter-sep {
  width:1px; height:18px; background:var(--border); flex-shrink:0;
  margin:0 4px;
}

/* ═══ HERO ═══ */
.hero {
  display:grid; grid-template-columns:50% 1fr;
  border-bottom:1px solid var(--border);
  /* Ben 2026-04-18: slider must have more vertical presence, proportion
     balanced with the grid below. Bumped from 300px to 520px desktop. */
  min-height:520px;
}
.hero-l {
  grid-column:2; grid-row:1;
  padding:28px 32px;
  display:flex; flex-direction:column; justify-content:center; gap:14px;
}
.hero-eyebrow {
  font-family:var(--ff-h); font-size:8px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--v);
  display:flex; align-items:center; gap:8px;
}
.hero-eyebrow::before { content:''; width:18px; height:1px; background:var(--v); }
.hero-artist-name {
  font-family:var(--ff-h); font-size:38px; font-weight:600;
  letter-spacing:-.03em; line-height:.95;
  cursor:pointer; transition:color .15s;
}
.hero-artist-name:hover { color:var(--v); }
.hero-title {
  font-family:var(--ff-h); font-size:20px; font-weight:400;
  letter-spacing:-.02em; line-height:1.15;
  color:var(--text); margin-top:2px;
}
.hero-release-title { display:none; }
.hero-tax {
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.hero-artist {
  font-size:14px; color:var(--text);
  border-bottom:1px solid var(--border); padding-bottom:1px;
  cursor:pointer; transition:border-color .15s;
}
.hero-artist:hover { border-color:var(--v); color:var(--v); }
.hero-label {
  font-size:13px; color:var(--muted);
  padding:4px 12px; border:1px solid var(--border); background:var(--bg-lt);
}
.hero-genre-tag {
  font-family:var(--ff-h); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:4px 12px; background:var(--v-pale); color:var(--v);
  cursor:pointer;
}
.hero-genre-tag:hover { background:var(--v); color:#fff; }
.hero-attrs {
  font-size:10px; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase;
  display:flex; gap:12px; align-items:center;
}
.hero-attrs::before { content:''; width:16px; height:1px; background:var(--border); }
.hero-btns { display:flex; gap:7px; flex-wrap:wrap; }
.hero-nav-row { display:flex; align-items:center; justify-content:space-between; margin-top:18px; gap:16px; }
.hero-dots { display:flex; gap:7px; flex:1; }
.hero-dot {
  width:20px; height:3px; background:var(--border); cursor:pointer;
  transition:background .25s, width .25s;
}
.hero-dot.active { background:var(--v); width:34px; }
.hero-dot:hover { background:var(--v-mid); }
.hero-arrows { display:flex; gap:4px; }
.hero-arrow {
  width:32px; height:32px; padding:0;
  background:transparent; border:1px solid var(--border);
  color:var(--text); cursor:pointer;
  font-family:var(--ff-h); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.hero-arrow:hover { background:var(--v); border-color:var(--v); color:#fff; }
.hero-arrow:focus-visible { outline:2px solid var(--v); outline-offset:2px; }
@media (max-width: 480px) {
  .hero-arrow { width:36px; height:36px; font-size:22px; }
}
.btn-blk {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  background:var(--text); color:var(--bg);
  padding:11px 22px; cursor:pointer; transition:background .15s;
}
.btn-blk:hover { background:#2a2a2a; }
.btn-v {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  background:var(--v); color:#fff;
  padding:11px 22px; cursor:pointer; transition:background .15s;
}
.btn-v:hover { background:var(--v-mid); }
.btn-play-hero {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  background:transparent; color:var(--text);
  border:1px solid var(--border);
  padding:11px 22px; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  transition:border-color .15s, color .15s;
}
.btn-play-hero:hover { border-color:var(--v); color:var(--v); }
.play-icon {
  width:14px; height:14px; border-radius:50%;
  background:var(--v); display:flex; align-items:center; justify-content:center;
  font-size:6px; color:#fff; flex-shrink:0;
}

/* Hero left — viewer slot.
   CEO rule 2026-04-18: ZERO visible boundary around the 3D composition —
   no border, no frame, no vignette. Background kept solid for contrast
   but allowed to bleed full-width. */
.hero-r {
  grid-column:1; grid-row:1;
  background:var(--v-dk);
  display:flex; flex-direction:column;
  align-items:stretch; justify-content:flex-start;
  gap:0; padding:0; overflow:hidden;
}
.viewer-slot {
  position:relative; overflow:visible; flex-shrink:0;
}
.viewer-slot[data-size="hero"] { flex:1; width:100%; min-height:0; }
.viewer-slot[data-size="detail"] { width:100%; height:100%; }
.vsp {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; transition:opacity .3s;
}
.viewer-slot[data-ready3d="true"] .vsp { opacity:0; pointer-events:none; }
.vsp-disc {
  width:200px; height:200px; border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    #0f0f0f 0px,#1a1a1a 1.5px,#080808 3px,#151515 4.5px);
  position:relative;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  animation:disc-spin 3s linear infinite;
}
.vsp-disc::before {
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle, var(--v-mid) 0%, var(--v) 55%, #3d0099 100%);
}
.vsp-disc::after {
  content:'K'; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--ff-h); font-size:20px; font-weight:600;
  color:rgba(255,255,255,.9); z-index:2; letter-spacing:-.02em;
}
@keyframes disc-spin { to { transform:rotate(360deg); } }
.v-ctrl { display:flex; gap:4px; z-index:2; }
.c-btn {
  font-family:var(--ff-h); font-size:8px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.4); cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.c-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
.c-btn.on { background:var(--v); border-color:var(--v); color:#fff; }

/* ═══ FACE STRIP ═══ — hidden in hero, shown in detail view */
.face-strip {
  display:none; flex-shrink:0;
  background:rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.08);
}
.face-btn {
  flex:1; padding:10px 4px 9px;
  background:transparent; border:none; border-right:1px solid rgba(255,255,255,.05);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px;
  transition:background .15s;
}
.face-btn:last-child { border-right:none; }
.face-btn:hover { background:rgba(255,255,255,.06); }
.face-btn.active { background:rgba(var(--v-rgb),.18); }
.face-btn .fb-thumb {
  width:38px; height:38px; object-fit:contain; display:block;
  border:1px solid rgba(255,255,255,.1); background:#111;
}
.face-btn .fb-disc {
  width:38px; height:38px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid rgba(255,255,255,.1); background:#0a0a0a;
}
.face-btn .fb-placeholder {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.1); background:#111; font-size:16px; overflow:hidden;
  color:rgba(255,255,255,.2);
}
.face-btn .fb-placeholder::after { content: attr(data-empty); }
.face-btn .fb-label {
  font-family:var(--ff-h); font-size:7px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.38); white-space:nowrap;
}
.face-btn.active .fb-label { color:var(--v); }
.face-btn.active .fb-thumb,
.face-btn.active .fb-disc,
.face-btn.active .fb-placeholder { border-color:rgba(var(--v-mid-rgb),.7); }

/* Label lightbox */
.label-lbx {
  position:fixed; inset:0; background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
  z-index:9000; opacity:0; pointer-events:none; transition:opacity .2s;
}
.label-lbx.open { opacity:1; pointer-events:all; }
.label-lbx img {
  max-width:min(88vmin,520px); max-height:min(88vmin,520px);
  border-radius:50%; box-shadow:0 0 80px rgba(var(--v-rgb),.5);
}
.label-lbx-x {
  position:absolute; top:24px; right:28px;
  font-size:32px; color:rgba(255,255,255,.5); cursor:pointer;
  background:none; border:none; line-height:1; transition:color .15s;
}
.label-lbx-x:hover { color:#fff; }

/* ═══ STATS ═══ */
.stats {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--border);
  background:var(--bg-lt);
}
.stat { padding:18px 36px; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat-n {
  font-family:var(--ff-h); font-size:32px; font-weight:600;
  letter-spacing:-.03em; line-height:1; margin-bottom:2px;
}
.stat-n .acc { color:var(--v); }
.stat-l { font-size:9px; letter-spacing:.10em; text-transform:uppercase; color:var(--muted); }

/* ═══ SECTION HEADER ═══ */
.sec-hd {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:28px 36px 16px;
}
.sec-hd h2 {
  font-family:var(--ff-h); font-size:20px; font-weight:600;
  letter-spacing:-.01em; text-transform:uppercase;
}
.sec-hd h2 .acc { color:var(--v); }
.sec-link {
  font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--border);
  padding-bottom:1px; cursor:pointer; transition:color .15s, border-color .15s;
}
.sec-link:hover { color:var(--text); border-color:var(--text); }

/* ═══ WEEK PANES ═══ */
.week-content { position:relative; overflow:hidden; }
.week-pane {
  width:100%;
  transition:transform .36s var(--ease), opacity .36s var(--ease);
  will-change:transform;
}
.week-pane.hidden-r { position:absolute;top:0; transform:translateX(100%); opacity:0; pointer-events:none; }
.week-pane.hidden-l { position:absolute;top:0; transform:translateX(-6%);  opacity:0; pointer-events:none; }
.week-pane.active   { transform:translateX(0); opacity:1; }

/* ═══ PRODUCT GRID ═══ */
.pgrid {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:var(--border);
  margin:0 36px; border:1px solid var(--border);
}

/* ─── PRODUCT CARD — Hierarchy: art → title → artist → label → genre → attrs ─── */
.pcard {
  background:var(--bg-wh); cursor:pointer; position:relative;
  transition:background .15s;
}
.pcard:hover { background:#fff; }
.pthumb {
  aspect-ratio:1; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #f3f0e8 0%, #e8dfc8 100%);
}
.pimg {
  width:100%; height:100%;
  transition:transform .38s var(--ease);
  object-fit:contain; /* no crop — artwork shown full */
  background:#1a1a1a;
  display:block;
}
.pcard:hover .pimg { transform:scale(1.03); }

/* (.pthumb.is-macaron pre-PAO macaron-fallback rules removed 2026-04-19:
   no JS path ever added the .is-macaron class. The PAO classifier +
   data-cover-type = 'label_only' / 'no_sleeve' / 'colored_disc' rules
   below cover the same use case correctly. See VISUAL-CONTRACT.md.) */

/* ─── PLAYING STATE ─── UNIFIED (Ben 2026-04-19):
   "macaron prend toute la largeur du carré, fond noir partout, pas de
    sillons visibles". Single visual contract regardless of cover_type:
      • black square background (noir autour)
      • macaron inscribed in the square at 100% × 100% (cercle inscrit)
      • spinning around its center
      • NO procedural SVG grooves (macaron design is the source of truth)
   The .pvinyl overlay holds the macaron; .pimg (sleeve) is hidden during play. */
.pvinyl {
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:#000;
}
.pvinyl-svg     { display:none; }   /* no procedural grooves — macaron carries the visual */
.pvinyl-macaron {
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  background:#000;
}
.pcard.playing .pvinyl {
  display:flex;
  animation:disc-spin 1.5s linear infinite;
  transform-origin:50% 50%;
}
.pcard.playing .pimg   { display:none; }
.pcard.playing .pthumb { background:#000; }

/* Spindle hole — SYSTEMIC (Ben 2026-04-19 vocal): "il manque le trou noir au
   milieu de chacun... régler pour toutes les prochaines fois". One rule for
   every cover_type. Not drawn into label-a.jpg PAO (some releases include it
   in their art, most don't — Robert Hood green label = no hole). Layered on
   top so it's invariant across assets.
   - IDLE label_only/colored_disc/no_sleeve: `.pthumb::after` (the macaron is
     the static `.pimg`, nothing else on top).
   - PLAYING all cover_types: `.pvinyl::after` so the hole rotates with the
     spinning disc and stays perfectly centered on the spin origin.

   Locked by test 08-playing-state-visual (spindle-hole invariant added). */
.pcard[data-cover-type="label_only"] .pthumb::after,
.pcard[data-cover-type="no_sleeve"] .pthumb::after,
.pcard[data-cover-type="colored_disc"] .pthumb::after,
.pcard.playing .pvinyl::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  background: #000;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 3px rgba(255, 255, 255, 0.30);
}
/* Legacy .pvinyl-spindle div inside .pvinyl (still in cardHTML) — hide it;
   only the ::after above draws. Removing the div from cardHTML can happen
   in a later cleanup PR. */
.pvinyl-spindle { display: none; }

/* Label-only / no-sleeve / colored-disc — Ben 2026-04-18: "j'ai pas besoin
   de voir tout le vinyle, j'ai juste besoin de voir le macaron en format
   grand". IDLE shows ONLY the macaron big (circle, fills the card). No vinyl
   disc, no grooves decoration. Keep the same background as surrounding cards
   (beige) so the card shape stays consistent — only the inside content changes. */
.pcard[data-cover-type="label_only"] .pimg,
.pcard[data-cover-type="no_sleeve"] .pimg,
.pcard[data-cover-type="colored_disc"] .pimg {
  /* Ben 2026-04-18: "cercle inscrit dans le carré" — macaron fills the FULL
     card edge-to-edge. 100% × 100%, zero margin. */
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.28);
}
/* Keep hover recto-verso swap disabled for label_only (no back to swap to). */
/* PRINTED (default): pochette shows. On hover → peek the macaron. On play →
   full vinyl+macaron overlay replaces the sleeve and spins. */
.pcard[data-cover-type="printed"]:hover .pimg[data-cover-back] { opacity:.95; }

/* Play overlay */
.pplay-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
  z-index:2;
}
.pcard:hover .pplay-overlay { opacity:1; }
.pplay-btn {
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), background .15s;
  cursor:pointer;
}
.pplay-btn:hover { transform:scale(1.1); background:#fff; }
.pplay-btn svg { margin-left:3px; }

/* Genre tag top-right */
.pgenre {
  position:absolute; top:7px; right:7px;
  font-family:var(--ff-h); font-size:7px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  padding:3px 7px; background:rgba(0,0,0,.65); color:rgba(255,255,255,.85);
  z-index:3;
}
/* Badge top-left */
.pbadge {
  position:absolute; top:7px; left:7px;
  font-family:var(--ff-h); font-size:7px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  padding:3px 7px; z-index:3;
}
.b-new { background:var(--v); color:#fff; }
.b-low { background:#C0392B; color:#fff; }
.b-pre { background:var(--v-dk); color:var(--v-mid); border:1px solid var(--v-mid); }

/* Card info — tightened to yoyaku.io density (less padding, smaller meta) */
/* Grid card info — bumped per Ben vocal 2026-04-18 ("infos trop petites,
   remplir beaucoup plus"). Artist > title hierarchy (mirrors slider).
   Catalog# inline with label, same treatment ("à côté du label dans la
   même manière"). */
.pinfo { padding:14px 14px 14px; }
.part {
  font-family:var(--ff-h); font-size:16px; font-weight:600; color:var(--text); margin-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  letter-spacing:-.02em; line-height:1.1;
}
.part:hover { color:var(--v); }
.ptit {
  font-family:var(--ff-h); font-size:13px; font-weight:400;
  letter-spacing:-.01em; line-height:1.25; margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted);
}
.plabel-row {
  display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:7px;
}
.plabel, .psku-inline {
  font-size:11px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:.02em;
}
.plabel { color:var(--muted); }
.plabel:hover { color:var(--text); }
.psku-inline {
  font-family:var(--ff-h); font-weight:600; color:var(--text);
  letter-spacing:.04em;
}
.pgenre-chips {
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px;
  max-height:22px; overflow:hidden;
}
.pchip {
  font-family:var(--ff-h); font-size:9px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  padding:3px 7px; background:var(--v-pale); color:var(--v);
  cursor:pointer; transition:background .12s, color .12s;
}
.pchip:hover { background:var(--v); color:#fff; }
/* Feature badges — 180g, gatefold, limited, etc. Visually distinct from
   genre chips: outlined, monochrome, non-clickable informational pills. */
.pfeats {
  display:flex; gap:4px; flex-wrap:wrap; margin:0 0 8px;
  max-height:22px; overflow:hidden;
}
.pfeat {
  font-family:var(--ff-h); font-size:9px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 6px; background:transparent; color:var(--muted);
  border:1px solid var(--border);
  white-space:nowrap;
}
.pcard.pre-card .pfeat {
  color:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.15);
}
.pattrs {
  font-size:9px; color:var(--muted); letter-spacing:.05em;
  margin-bottom:8px;
}
.pfoot {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:9px; border-top:1px solid var(--border);
}
.ppri {
  font-family:var(--ff-h); font-size:15px; font-weight:600;
}
.pstk { font-size:8px; letter-spacing:.07em; text-transform:uppercase; }
.pstk.ok { color:#2E7D32; }
.pstk.lo { color:#D84315; }
.pstk.pre { color:var(--v-mid); }
.pstk.out { color:var(--muted); }

/* AUDIO-REACTIVE: PLAYING CARD */
.pcard { will-change: transform; }
.pcard.playing { outline:2px solid var(--v); outline-offset:-2px; z-index:2; position:relative; }
.pcard.playing .pthumb::after {
  content:''; position:absolute; inset:0;
  background:rgba(var(--v-rgb),.04); pointer-events:none; z-index:1;
}
.pcard.playing .pgenre { background:var(--v); color:#fff; }
/* (dead rules removed 2026-04-19: .pcard.playing .pimg used to spin a
   sleeve cropped into a circle; the unified playing visual now hides
   .pimg entirely and spins .pvinyl instead. card-disc-spin keyframe
   dropped — disc-spin (line 477) is the single source of truth.) */
/* SKU */
.psku { font-size:9px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }


/* Gradient art placeholders */
.g1 { background:linear-gradient(145deg,#0d0020,#2a0060,#08001a); }
.g2 { background:linear-gradient(135deg,#001a0d,#003318,#001409); }
.g3 { background:linear-gradient(160deg,#1a0a00,#401800,#100500); }
.g4 { background:linear-gradient(145deg,#001133,#002266,#000a22); }
.g5 { background:linear-gradient(135deg,#1a001a,#330033,#0d000d); }
.g6 { background:linear-gradient(145deg,#0a0a1a,#1a1a3a,#050510); }
.g7 { background:linear-gradient(135deg,#001a00,#003a00,#000d00); }
.g8 { background:linear-gradient(160deg,#1a1000,#3a2500,#0d0800); }
.g9 { background:linear-gradient(145deg,#1a0010,#3a0025,#0d0010); }
.g10{ background:linear-gradient(135deg,#00101a,#002033,#000810); }
.g11{ background:linear-gradient(145deg,#111,#222,#0a0a0a); }
.g12{ background:linear-gradient(145deg,#200000,#400000,#100000); }

/* Pre-orders band */
.preorder-band {
  margin:1px 36px 0;
  background:var(--v-dk);
  border:1px solid rgba(255,255,255,.05);
}
.preorder-hd {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px 14px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.preorder-hd h3 {
  font-family:var(--ff-h); font-size:13px; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; color:#fff;
}
.preorder-hd span {
  font-size:9px; letter-spacing:.10em; text-transform:uppercase;
  color:var(--v-mid);
  background:rgba(var(--v-rgb),.1); padding:3px 9px;
  border:1px solid rgba(var(--v-mid-rgb),.2);
}
.pgrid-pre {
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:rgba(255,255,255,.04);
}
.pcard.pre-card {
  background:rgba(255,255,255,.03);
}
.pcard.pre-card:hover { background:rgba(255,255,255,.06); }
.pcard.pre-card .ptit { color:#fff; }
.pcard.pre-card .part { color:rgba(255,255,255,.6); }
.pcard.pre-card .plabel { color:rgba(255,255,255,.35); }
.pcard.pre-card .pattrs { color:rgba(255,255,255,.25); }
.pcard.pre-card .pfoot { border-top-color:rgba(255,255,255,.07); }
.pcard.pre-card .ppri { color:var(--v-mid); }
.pcard.pre-card .pchip { background:rgba(var(--v-rgb),.2); color:var(--v-mid); }
.pcard.pre-card .pchip:hover { background:var(--v-mid); color:#fff; }

footer {
  background:var(--v-dk); color:rgba(255,255,255,.25);
  padding:24px 36px;
  display:flex; justify-content:space-between; align-items:center;
  margin-top:1px;
}
.ft-logo { font-family:var(--ff-h); font-size:18px; font-weight:600; color:rgba(255,255,255,.75); }
.ft-logo span { color:var(--v-mid); }

/* Default: 6 columns — covers 14"/16" MBP (1512/1728), 1920, 2400.
   Ben 2026-04-20: "j'ai perdu le grid 6 colonnes, y avait 6 avant". The
   1600px breakpoint was too aggressive — 1512 MBP displays were dropping
   to 5. Relaxed thresholds so 6 columns stay for all common desktop widths. */
@media (min-width: 2200px) {
  .pgrid,
  .pgrid-pre { grid-template-columns:repeat(7,1fr); }
}

@media (max-width: 1199px) {
  .pgrid,
  .pgrid-pre { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 900px) {
  .pgrid,
  .pgrid-pre { grid-template-columns:repeat(2,1fr); }
}

/* Mobile breakpoints moved to END of <style> for proper cascade — they need to
   override base declarations of #player-bar, .player-right, #cart-drawer, etc.
   that come later in source order. See bottom of style block. */