:root {
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;
  --bg:#fff;
  --card-bg:#fff;
  --chip:#e0e0e0;
  --overlay: rgba(0,0,0,.6);
  --neon:#7c3aed;
  --gold:#facc15;
  --accent:#111;
  --accent-contrast:#fff;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin:0; color:var(--text); background:var(--bg); transition:background .35s ease, color .35s ease; }

.theme-switcher { position:fixed; top:50%; right:0; transform:translateY(-50%); display:flex; align-items:center; gap:1rem; z-index:-1; padding-right:.5rem; }
.theme-switcher.is-open { z-index:1600; }
.theme-switcher__toggle { position:fixed; top:50%; right:0; transform:translateY(-50%); appearance:none; border:1px solid var(--border); border-right:none; border-radius:14px 0 0 14px; background:var(--card-bg); color:var(--text); font-weight:600; text-transform:uppercase; letter-spacing:.1em; padding:.8rem .6rem; cursor:pointer; writing-mode:vertical-rl; text-orientation:mixed; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; box-shadow:0 14px 28px rgba(0,0,0,.12); display:none; }
.theme-switcher__toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-switcher.is-open .theme-switcher__toggle { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }
.theme-switcher__panel { position:relative; background:var(--card-bg); border:1px solid var(--border); border-radius:18px; padding:1.1rem 1.2rem; width:min(280px, 82vw); box-shadow:var(--shadow); display:grid; gap:1rem; transform:translateX(calc(100% + 1.5rem)); opacity:0; visibility:hidden; transition:transform .35s ease, opacity .3s ease, visibility .3s ease; }
.theme-switcher.is-open .theme-switcher__panel { transform:translateX(0); opacity:1; visibility:visible; }
.theme-switcher__header { display:grid; gap:.4rem; }
.theme-switcher__title { margin:0; font-size:1rem; }
.theme-switcher__subtitle { margin:0; font-size:.85rem; color:var(--muted); }
.theme-options { display:grid; gap:.6rem; }
.theme-option { border:1px solid var(--border); background:var(--card-bg); color:inherit; border-radius:14px; padding:.65rem .75rem; display:flex; align-items:center; gap:.75rem; cursor:pointer; width:100%; text-align:left; transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.theme-option:hover { transform:translateY(-2px); border-color:var(--accent); }
.theme-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-option.active { border-color:var(--accent); box-shadow:var(--shadow); }
.theme-option-swatch { flex:0 0 48px; height:48px; border-radius:12px; border:1px solid var(--border); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.theme-option-swatch--base { background:linear-gradient(135deg, #ffffff 0%, #f1f1f1 100%); }
.theme-option-swatch--hardwood { background:linear-gradient(135deg, #242633 0%, #2e3343 55%, #c8642a 100%); border:1px solid rgba(223,210,173,.45); }
.theme-option-swatch--lights { background:linear-gradient(130deg, #0f172a 0%, #1abc9c 50%, #ff6f61 100%); }
.theme-option-swatch--gamer { background:linear-gradient(140deg, #0f172a 0%, #2563eb 45%, #7c3aed 100%); border:1px solid rgba(59,130,246,.45); }
.theme-option-swatch--kobe { background:linear-gradient(135deg, #fdb927 0%, #fdb927 55%, #552583 100%); }
.theme-option-copy { display:grid; gap:.2rem; }
.theme-option-name { font-weight:600; }
.theme-option-desc { font-size:.85rem; color:var(--muted); }

.theme-switcher__header-trigger { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; border:1px solid var(--border); background:var(--card-bg); color:var(--text); cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; box-shadow:0 12px 24px rgba(0,0,0,.12); }
.theme-switcher__header-trigger svg { width:25px; height:25px; display:block; fill:currentColor; transition:fill .25s ease, transform .25s ease; transform-origin:50% 50%; }
.theme-switcher__header-trigger:hover { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); transform:translateY(-1px); }
.theme-switcher__header-trigger.is-active { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); box-shadow:0 18px 36px rgba(0,0,0,.18); }
.theme-switcher__header-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.about-actions { display:flex; justify-content:flex-end; align-items:center; gap:.65rem; }

@media (max-width: 900px) {
  .theme-switcher { display:none; }
  .theme-switcher__header-trigger { display:none; }
  .about-head { grid-template-columns: 1fr; }
  .about-actions { justify-content:flex-start; }
  .theme-switcher__toggle { display:inline-flex; }
}

@media (max-width: 720px) {
  .theme-switcher { top:auto; bottom:1.5rem; right:0; transform:none; flex-direction:column-reverse; align-items:flex-end; gap:.75rem; }
  .theme-switcher__toggle { display:inline-flex; position:fixed; right:0; bottom:1.5rem; top:auto; transform:none; writing-mode:horizontal-tb; text-orientation:initial; border-radius:999px; border-right:1px solid var(--border); padding:.55rem 1.1rem; box-shadow:0 14px 28px rgba(0,0,0,.15); }
  .theme-switcher__panel { transform:translateY(140%); }
  .theme-switcher.is-open .theme-switcher__panel { transform:translateY(0); }
}

body[data-theme] { background:var(--bg); }
body[data-theme] .card,
body[data-theme] .filters-card,
body[data-theme] .card-product,
body[data-theme] .modal,
body[data-theme] .carousel,
body[data-theme] header.page,
body[data-theme] .recent-item,
body[data-theme] .btn,
body[data-theme] .btn-icon,
body[data-theme] select,
body[data-theme] input[type="text"],
body[data-theme] .toggle-btn,
body[data-theme] #pager button { box-shadow:var(--shadow); }

body[data-theme="hardwood"] {
  --bg:#242633;
  --card-bg:rgba(40, 43, 55, .94);
  --border:rgba(223, 210, 173, .28);
  --text:#dfd2ad;
  --muted:rgba(223, 210, 173, .78);
  --chip:rgba(50, 53, 67, .82);
  --accent:#c8642a;
  --accent-contrast:#1e1205;
  --shadow:0 30px 72px rgba(10, 12, 20, .6);
}
body[data-theme="hardwood"] .theme-switcher__toggle { box-shadow:0 18px 46px rgba(6, 13, 24, .55); }
body[data-theme="hardwood"] .theme-option-desc { color:rgba(223, 210, 173, .7); }

body[data-theme="lights"] {
  --bg:linear-gradient(140deg, #0f172a 0%, #111827 55%, #1f2937 100%);
  --card-bg:rgba(17,24,39,.92);
  --border:rgba(148,163,184,.4);
  --text:#e8f1ff;
  --muted:#8aa2c4;
  --chip:rgba(31,41,55,.7);
  --accent:#1abc9c;
  --accent-contrast:#051c1a;
  --shadow:0 22px 48px rgba(3,7,18,.55); 
}
body[data-theme="lights"] .theme-switcher__toggle { box-shadow:0 18px 40px rgba(3,7,18,.5); }
body[data-theme="lights"] .theme-option-desc { color:rgba(138,162,196,.85); }

body[data-theme="gamer"] {
  --bg:radial-gradient(circle at 12% 20%, #111827 0%, #020617 68%, #0b1120 100%);
  --card-bg:rgba(13,17,23,.92);
  --border:rgba(59,130,246,.32);
  --text:#e0f2fe;
  --muted:rgba(148,163,184,.85);
  --chip:rgba(30,64,175,.65);
  --accent:#7c3aed;
  --accent-contrast:#fdf4ff;
  --shadow:0 26px 60px rgba(2,6,23,.7);
}
body[data-theme="gamer"] .theme-option-desc { color:rgba(148,163,184,.85); }
body[data-theme="gamer"] .theme-switcher__toggle { box-shadow:0 24px 60px rgba(2,6,23,.65); }
body[data-theme="gamer"] #grid,
body[data-theme="gamer"] #pager {
  display:none;
}

body[data-theme="kobe"] {
  --bg:#fdb927;
  --card-bg:rgba(45,14,84,.94);
  --border:rgba(255,255,255,.32);
  --text:#ffffff;
  --muted:rgba(255,255,255,.7);
  --chip:rgba(85,37,130,.75);
  --accent:#552583;
  --accent-contrast:#ffffff;
  --shadow:0 30px 62px rgba(43,14,82,.55);
}
body[data-theme="kobe"] .theme-option-desc { color:rgba(255,255,255,.78); }
body[data-theme="kobe"] .theme-switcher__toggle { box-shadow:0 26px 54px rgba(43,14,82,.58); }
body[data-theme="kobe"] .card,
body[data-theme="kobe"] .filters-card,
body[data-theme="kobe"] .card-product,
body[data-theme="kobe"] .modal,
body[data-theme="kobe"] .carousel,
body[data-theme="kobe"] header.page,
body[data-theme="kobe"] .recent-item {
  border:1px solid rgba(255,255,255,.22);
  border-radius:5px;
}


/* Desktop: sidebar + main */
.wrap { display:grid; grid-template-columns: 280px 1fr; gap:1.5rem; padding:1.5rem; }
@media (max-width: 920px) { .wrap { grid-template-columns: 1fr; } }

aside { display:grid; gap:1rem; position:sticky; top:1rem; height:fit-content; }
@media (max-width: 920px) { aside.in-main { position: static; } }
  
.card { border:1px solid var(--border); border-radius:14px; background:var(--card-bg); overflow:hidden; }

.arcade-grid {
  display:none;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.5rem;
  margin-bottom:2rem;
  align-items:start;
}
body[data-theme="gamer"] .arcade-grid {
  display:grid;
}
@media (max-width: 1080px) {
  .arcade-grid { grid-template-columns:1fr; }
}

/* Mini hoops featured card */
#miniHoopsCard {
  position:relative;
  display:grid;
  gap:1.75rem;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  background:radial-gradient(circle at 12% 20%, rgba(253,186,116,.38), transparent 55%),
             radial-gradient(circle at 88% 18%, rgba(234,179,8,.45), transparent 50%),
             linear-gradient(135deg, #111827, #1f2937 60%, #0f172a 100%);
  color:#f9fafb;
  overflow:hidden;
  z-index:100;
}
#miniHoopsCard::before {
  content:"";
  position:absolute;
  inset:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
#miniHoopsCard .minihoops-content { position:relative; z-index:1; display:grid; gap:1.5rem; }
#miniHoopsCard .minihoops-title { margin:0; font-size:clamp(1.6rem, 3vw, 2rem); letter-spacing:.04em; text-transform:uppercase; }
#miniHoopsCard .minihoops-subtitle { margin:.35rem 0 0; max-width:46ch; color:rgba(248,250,252,.78); font-size:1rem; }
#miniHoopsCard .minihoops-key {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(248,250,252,.78);
}
#miniHoopsCard .minihoops-key span {
  display:inline-flex;
  gap:.35rem;
  align-items:center;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(248,250,252,.18);
  background:rgba(15,23,42,.55);
}
#miniHoopsCard .minihoops-cabinet {
  width:min(480px, 100%);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(30,41,59,.95) 0%, rgba(15,23,42,.95) 60%, rgba(15,23,42,.88) 100%);
  border-radius:28px;
  padding:clamp(1.1rem, 3vw, 1.6rem);
  box-shadow:0 24px 60px rgba(8,15,35,.55);
  position:relative;
  display:grid;
  gap:clamp(.9rem, 2vw, 1.2rem);
}
#miniHoopsCard .minihoops-marquee {
  background:linear-gradient(135deg, #facc15, #f97316);
  color:#111827;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.18em;
  text-align:center;
  padding:.45rem .75rem;
  border-radius:18px;
  font-size:.85rem;
  box-shadow:0 8px 24px rgba(250,204,21,.45);
}
#miniHoopsCard .minihoops-screen {
  position:relative;
  border-radius:22px;
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.16), transparent 65%), #0f172a;
  padding:clamp(.8rem, 2vw, 1.1rem);
  box-shadow:inset 0 0 0 2px rgba(148,163,184,.18);
}
#miniHoopsCard .minihoops-stage {
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;
  min-height:260px;
  background:#feebcb;
  border-radius:18px;
  overflow:hidden;
  visibility:hidden;
  box-shadow:0 14px 38px rgba(15,23,42,.5);
  touch-action:none;
  margin:0 auto;
}
@supports not (aspect-ratio: 1) {
  #miniHoopsCard .minihoops-stage { padding-bottom:133%; height:0; }
  #miniHoopsCard .minihoops-stage > * { position:absolute; inset:0; }
}
#miniHoopsCard .minihoops-stage.is-ready { visibility:visible; }
#miniHoopsCard .minihoops-stage.is-disabled { cursor:not-allowed; }
#miniHoopsCard .minihoops-base {
  height:18px;
  border-radius:10px 10px 24px 24px;
  background:linear-gradient(180deg, rgba(100,116,139,.55), rgba(71,85,105,.8));
  box-shadow:inset 0 2px 6px rgba(255,255,255,.25), 0 12px 28px rgba(8,15,35,.55);
}
#miniHoopsCard .minihoops-stage svg {
  position:absolute;
  left:25%;
  top:12%;
  width:50%;
  height:30%;
  fill:#fff;
  stroke:#000;
  overflow:visible;
  z-index:0;
  -webkit-tap-highlight-color:transparent;
}
#miniHoopsCard #miniHoopsBackboard { stroke-width:5; }
#miniHoopsCard #miniHoopsBackboard .shadow { fill:rgba(0,0,0,.7); stroke:none; }
#miniHoopsCard #miniHoopsBasket #miniHoopsNet line {
  stroke:#ccc;
  stroke-miterlimit:10;
  fill:none;
}
#miniHoopsCard #miniHoopsRing { fill:#df4931; stroke:none; }
#miniHoopsCard #miniHoopsBall {
  position:absolute;
  left:0;
  top:0;
  width:clamp(56px, 13vw, 78px);
  height:auto;
  fill:#df4931;
  stroke:none;
  cursor:grab;
  touch-action:none;
  user-select:none;
  will-change:transform;
  transform:translate3d(0, 0, 0);
  transition:none;
}
#miniHoopsCard #miniHoopsBall.is-active { cursor:grabbing; }
#miniHoopsCard .minihoops-stage.is-disabled #miniHoopsBall,
#miniHoopsCard #miniHoopsBall[aria-disabled="true"] {
  cursor:not-allowed;
  opacity:.6;
  pointer-events:none;
}
#miniHoopsCard #miniHoopsBall .ballPath { clip-path:url(#minihoops-ball-clip); }
#miniHoopsCard #miniHoopsBall .ballStripe { fill:none; stroke:#fff; stroke-miterlimit:10; }
#miniHoopsCard .minihoops-stage.minihoops-scored #miniHoopsNet {
  transform-origin:50% 0;
  animation:minihoopsNet 0.6s ease;
}
@keyframes minihoopsNet {
  0% { transform:scaleY(1); }
  45% { transform:scaleY(1.12); }
  100% { transform:scaleY(1); }
}
#miniHoopsCard .minihoops-scoreboard { display:grid; gap:.75rem; }
#miniHoopsCard .minihoops-controls {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:rgba(248,250,252,.78);
}
#miniHoopsCard .minihoops-btn {
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(248,250,252,.25);
  background:rgba(15,23,42,.6);
  color:#f9fafb;
  padding:.45rem 1.1rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
#miniHoopsCard .minihoops-btn:is(:hover,:focus-visible) {
  background:rgba(250,204,21,.35);
  transform:translateY(-1px);
}
#miniHoopsCard .minihoops-btn:focus-visible {
  outline:2px solid #facc15;
  outline-offset:2px;
}
#miniHoopsCard .minihoops-metrics { list-style:none; margin:0; padding:0; display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
#miniHoopsCard .minihoops-metrics li {
  flex:1;
  min-width:120px;
  background:rgba(15,23,42,.65);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:.85rem 1rem;
  display:grid;
  gap:.35rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
#miniHoopsCard .minihoops-metric-label { font-size:.75rem; color:rgba(248,250,252,.72); }
#miniHoopsCard .minihoops-metric-value { font-size:1.4rem; font-weight:700; color:#fff; }
#miniHoopsCard .minihoops-instructions { margin:0; font-size:.9rem; color:rgba(248,250,252,.78); text-align:center; }
@media (max-width: 640px) {
  #miniHoopsCard { gap:1.4rem; }
  #miniHoopsCard .minihoops-metrics { flex-direction:column; }
  #miniHoopsCard .minihoops-stage { min-height:240px; }
}

#dribbleCard {
  position:relative;
  display:grid;
  gap:1.75rem;
  padding:clamp(1.5rem, 4vw, 2.5rem);
  background:radial-gradient(circle at 20% 18%, rgba(96,165,250,.35), transparent 55%),
             radial-gradient(circle at 82% 12%, rgba(249,168,212,.4), transparent 52%),
             linear-gradient(150deg, #111827, #0f172a 58%, #1e1b4b 100%);
  color:#f9fafb;
  overflow:hidden;
  z-index:100;
}
#dribbleCard::before {
  content:"";
  position:absolute;
  inset:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}
#dribbleCard .dribble-content { position:relative; z-index:1; display:grid; gap:1.5rem; }
#dribbleCard .dribble-title { margin:0; font-size:clamp(1.6rem, 3vw, 2rem); letter-spacing:.04em; text-transform:uppercase; }
#dribbleCard .dribble-subtitle { margin:.35rem 0 0; max-width:46ch; color:rgba(226,232,240,.82); font-size:1rem; }
#dribbleCard .dribble-key {
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,232,240,.75);
}
#dribbleCard .dribble-key span {
  display:inline-flex;
  gap:.35rem;
  align-items:center;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.2);
  background:rgba(15,23,42,.6);
}
#dribbleCard .dribble-cabinet {
  width:min(480px, 100%);
  margin:0 auto;
  background:linear-gradient(180deg, rgba(30,41,59,.95) 0%, rgba(15,23,42,.95) 60%, rgba(17,24,39,.9) 100%);
  border-radius:28px;
  padding:clamp(1.1rem, 3vw, 1.6rem);
  box-shadow:0 24px 60px rgba(8,15,35,.55);
  position:relative;
  display:grid;
  gap:clamp(.9rem, 2vw, 1.2rem);
}
#dribbleCard .dribble-marquee {
  background:linear-gradient(135deg, #f97316, #facc15);
  color:#111827;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.18em;
  text-align:center;
  padding:.45rem .75rem;
  border-radius:18px;
  font-size:.85rem;
  box-shadow:0 8px 24px rgba(250,204,21,.45);
}
#dribbleCard .dribble-screen {
  position:relative;
  border-radius:22px;
  background:radial-gradient(circle at 50% 18%, rgba(255,255,255,.16), transparent 68%), #030712;
  padding:clamp(.8rem, 2vw, 1.1rem);
  box-shadow:inset 0 0 0 2px rgba(148,163,184,.22);
}
#dribbleCard canvas {
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  background:#020617;
  outline:none;
  cursor:crosshair;
}
#dribbleCard .dribble-controls {
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
  justify-content:space-between;
  font-size:.85rem;
  color:rgba(226,232,240,.82);
}
#dribbleCard .dribble-btn {
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.45);
  background:rgba(30,41,59,.7);
  color:#f8fafc;
  padding:.45rem .9rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
#dribbleCard .dribble-btn:is(:hover,:focus-visible) {
  background:rgba(99,102,241,.6);
  transform:translateY(-1px);
}
#dribbleCard .dribble-btn:focus-visible {
  outline:2px solid #facc15;
  outline-offset:2px;
}
#dribbleCard .dribble-status { flex:1; min-width:180px; }
#dribbleCard .dribble-stats {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
#dribbleCard .dribble-stats li {
  flex:1;
  min-width:120px;
  background:rgba(17,24,39,.72);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:.85rem 1rem;
  display:grid;
  gap:.35rem;
  text-transform:uppercase;
  letter-spacing:.12em;
}
#dribbleCard .dribble-stats span { font-size:.75rem; color:rgba(226,232,240,.72); }
#dribbleCard .dribble-stats strong { font-size:1.4rem; font-weight:700; color:#fff; }
#dribbleCard .dribble-instructions { margin:0; font-size:.9rem; color:rgba(226,232,240,.78); text-align:center; }
@media (max-width: 640px) {
  #dribbleCard { gap:1.4rem; }
  #dribbleCard .dribble-stats { flex-direction:column; }
}

.about-card { padding:1rem; display:grid; gap:.9rem; }
.about-head { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:.75rem; align-items:center; }
.about-home-link {
  display:grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap:.75rem;
  align-items:center;
  text-decoration:none;
  color:inherit;
  border-radius:14px;
  padding:.25rem;
  margin:-.25rem;
}
.about-home-link:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.about-avatar { width:100px; height:100px; border-radius:12px; object-fit:cover; border:none; background:none; }
.about-title { margin:0; font-size:1rem; }
.about-desc { margin:.25rem 0 0; color:var(--muted); font-size:.9rem; }
.btn { display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--border); background:var(--card-bg); border-radius:10px; padding:.5rem .75rem; text-decoration:none; color:inherit; cursor:pointer; }
.btn-primary { border-color:var(--accent); background:var(--accent); color:var(--accent-contrast); cursor: pointer;}

.filters-card .aside-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem; border-bottom:1px solid var(--border); }
.filters-card .aside-title { font-size:1rem; margin:0; }
.toggle-btn { appearance:none; border:1px solid var(--border); background:var(--card-bg); border-radius:10px; padding:.35rem .6rem; cursor:pointer; min-width:2rem; text-align:center; }
.filters-card .aside-content { padding:1rem; display:grid; gap:1rem; }
.filters-card.collapsed .aside-content { display:none; }

#activeFilters {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-bottom:1.5rem;
}

#activeFilters .active-filters__label {
  font-weight:600;
  color:var(--text);
}

#activeFilters .active-filters__list {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
}

#activeFilters .active-filters__pill {
  background:var(--chip);
  color:var(--muted);
  border-radius:999px;
  padding:.25rem .75rem;
  font-size:.75rem;
  line-height:1.4;
}

#activeFilters .active-filters__reset {
  margin-left:auto;
  font-size:.75rem;
  padding:.25rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}

#activeFilters .active-filters__reset:hover {
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(148,163,184,.1);
}

#activeFilters .active-filters__reset:focus-visible {
  color:var(--accent);
  border-color:var(--accent);
  background:rgba(148,163,184,.1);
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.field { display:flex; flex-direction:column; gap:.35rem; }
.label { font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
select, input[type="text"] { padding:.6rem .75rem; border-radius:10px; border:1px solid var(--border); width:100%; background:var(--card-bg); color:var(--text); }
input[type="text"]::placeholder { color:var(--muted); }
.chips { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--chip); cursor:pointer; text-decoration:none; color:inherit; font-size:.9rem; }
.chip.active { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }

header.page { display:block; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; position: sticky; top: 1rem; background:var(--bg); z-index:5; }
header.page .spacer { margin-top: 12px;}

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap:1rem; margin-bottom: 2rem;}
.theme-showcase { display:none; margin-bottom:1.5rem; }
.theme-showcase.is-visible { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; align-items:stretch; }
.theme-showcase__card { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.theme-showcase__media { position:relative; overflow:hidden; border-radius:inherit; }
.theme-showcase__media img { width:100%; height:100%; display:block; object-fit:cover; }
.theme-showcase__card--video { grid-column:span 2; }
.theme-showcase__video { position:relative; width:100%; padding-top:56.25%; }
.theme-showcase__video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.card-product { border:1px solid var(--border); border-radius:12px; padding:1rem; display:block; color:inherit; text-decoration:none; background:var(--card-bg); cursor:pointer; box-shadow:var(--shadow); position:relative; }
.card-product:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.card-media { width:100%; aspect-ratio: 1 / 1; border-radius:8px; background:#f4f4f4; object-fit:cover; display:block; }
.meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.3rem; color:var(--muted); font-size:.85rem; }
.card-product > .card-pill { position:absolute; z-index:1; right:1.5rem; top:1.5rem; margin:0; }

.card-pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; padding:.3rem .65rem; border-radius:999px; background:var(--chip); color:var(--muted); width:fit-content; transition:background .2s ease, color .2s ease, box-shadow .2s ease; }
.card-pill--status { font-weight:600; }
.card-pill--status-available { background:#e2e8f0; color:var(--accent); }
.card-pill--status-unavailable { background:#e2e8f0; color:var(--muted); }
.price { font-weight:600; margin-top:.25rem; }

/* Mini gallery inside each card */
.card-gallery { position: relative; }
.card-slide { display:none; }
.card-slide.active { display:block; }
.card-nav { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.card-nav button { pointer-events:auto; appearance:none; border:1px solid var(--border); background:rgba(255,255,255,.9); border-radius:999px; padding:.3rem .5rem; margin:.4rem; cursor:pointer; }
.card-dots { position:absolute; left:0; right:0; bottom:.35rem; display:flex; gap:.35rem; justify-content:center; }
.card-dot { width:6px; height:6px; border-radius:999px; background:rgba(0,0,0,.25); border:0; padding:0; cursor:pointer; }
.card-dot[aria-current="true"] { background:var(--accent); }
video.card-media { background:#000; }

@media (hover:hover) {
  .card-nav button { opacity:0; transition:opacity .15s ease; }
  .card-gallery:hover .card-nav button { opacity:1; }
}

@media (max-width: 900px) { .grid { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); }}
@media (max-width: 720px) { .theme-showcase.is-visible { grid-template-columns:1fr; } .theme-showcase__card--video { grid-column:auto; } }

#pager {padding: 0.5rem;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content: center;bottom: 0;width: 100%;left: 0;}
#pager button { padding:.4rem .6rem; border-radius:8px; border:1px solid var(--border); background:var(--card-bg); cursor:pointer; }
#pager button[disabled] { opacity:.5; cursor:not-allowed; }
#pager button[aria-current="page"] { background:var(--accent); color:var(--accent-contrast); border-color:var(--accent); }

.alert { margin:0 0 10px 0;padding:.6rem .75rem;border:1px solid #f2c97d;background:#fff7e6;border-radius:10px;color:#663c00; }

.modal-overlay { position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; padding:2rem; z-index:1000; }
.modal-overlay.open { display:flex; }
.modal { background:var(--card-bg); width:min(100%); max-height:90vh; overflow:auto; border-radius:16px; position:relative; }
.modal-header { position:sticky; top:0; background:var(--card-bg); padding:.75rem; border-bottom:1px solid var(--border); display:flex; gap:.5rem; align-items:center; z-index:2; }
.btn-icon { appearance:none; border:1px solid var(--border); background:var(--card-bg); border-radius:10px; padding:.45rem .7rem; cursor:pointer; }
.modal-body { display:grid; grid-template-columns: 1.4fr 1fr; gap:1rem; padding:1rem; }
@media (max-width: 900px) { .modal-body { grid-template-columns: 1fr; } }

.carousel { position:relative; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card-bg); }
.carousel-slide { display:none; }
.carousel-slide.active { display:block; }
.carousel-media { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; object-position: center; background:#f4f4f4; display:block; border:0; max-height: 80vh; }
.carousel-caption { padding:.6rem .75rem; font-size:.9rem; border-top:1px solid var(--border); color:#666; display:none;}
.carousel-nav { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.carousel-btn { pointer-events:auto; appearance:none; border:1px solid var(--border); background:rgba(255,255,255,.9); border-radius:999px; padding:.35rem .55rem; margin:.5rem; cursor:pointer; }
.carousel-btn[hidden]{ display:none; }

.attrs { display:grid; gap:.5rem; }
.kv { display:grid; grid-template-columns: 140px 1fr; gap:.5rem; }
.kv .k { color:var(--muted); }
.actions { margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.btn-primary { border:1px solid var(--accent); background:var(--accent); color:var(--accent-contrast); border-radius:10px; padding:.6rem .9rem; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }

.hide-mobile{display:block;}
.hide-desktop{display:none; padding-bottom:1rem;}
@media (max-width: 900px) {
  .hide-mobile{display:none !important;}
  .hide-desktop{display:block;}
  .mobile-2-col{grid-column: 1 / -1;}
  .btn-primary { display:block; text-align:center; width:100%; }
}

/* Recent additions card */
.recent-list { display:grid; gap:.75rem; }
.recent-item { display:grid; grid-template-columns: 72px 1fr; gap:.65rem; border-bottom:1px solid var(--border); padding:.5rem; cursor:pointer; text-decoration:none; color:inherit; background:var(--card-bg); }
.recent-list .recent-item:last-child {border-bottom: none;}
.recent-thumb { width:72px; height:72px; border-radius:10px; object-fit:cover; background:#f4f4f4; border:1px solid var(--border); }
.recent-title { margin:0 0 .25rem; font-size:.95rem; line-height:1.2; }
.recent-meta { color:var(--muted); font-size:.8rem; }
.recent-price { margin-top:.25rem; font-weight:600; font-size:.9rem; }

.recent-price { display: none !important;}
.recent-meta { display: none !important;}

video.carousel-media { background:#000; }

/* MOBILE tap-to-play cover for card videos */
.card-video-cover {
  display:block;
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  border-radius:8px;
  border:0;
  padding:0;
  cursor:pointer;
  background:#000 center/cover no-repeat;
}
.card-video-cover .play-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.card-video-cover .play-overlay::before {
  content:"";
  display:block;
  width:68px; height:68px;
  border-radius:999px;
  background:rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.card-video-cover .play-overlay::after {
  content:"";
  position:absolute;
  width:0; height:0;
  border-left:18px solid #111;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:4px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Info bubble for currency tooltip */
.info-bubble {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:999px;
  background:#222; color:#fff; font-size:10px; font-weight:600;
  line-height:1; cursor:help; position:relative;
}
.info-bubble .tooltip {
  position:absolute; bottom:140%; left:50%; transform:translateX(-50%);
  background:#111; color:#fff; padding:.45rem .6rem; border-radius:8px;
  font-size:.75rem; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .12s ease; box-shadow:0 6px 18px rgba(0,0,0,.2); z-index:10;
}
.info-bubble .tooltip::after {
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border-width:6px; border-style:solid; border-color:#111 transparent transparent transparent;
}
.info-bubble:hover .tooltip,
.info-bubble:focus .tooltip,
.info-bubble:focus-within .tooltip { opacity:1; }

/* PACK OPENING MODE */
.pack-mode {
  position:fixed;
  inset:0;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(1.5rem, 5vw, 3rem);
  background:radial-gradient(circle at 15% 20%, rgba(236,72,153,.45), transparent 60%),
             radial-gradient(circle at 80% 25%, rgba(14,165,233,.38), transparent 60%),
             radial-gradient(circle at 50% 80%, rgba(2,6,23,.96), rgba(1,4,15,.98));
  backdrop-filter:blur(14px);
  z-index:2000;
  color:#fff;
  overflow:auto;
  opacity:0;
  transition:opacity .4s ease;
}
.pack-mode.open { display:flex; opacity:1; overflow-x: hidden !important;}
.pack-mode::before,
.pack-mode::after {
  content:"";
  position:absolute;
  inset:-20%;
  background:conic-gradient(from 90deg, rgba(250,204,21,.32), rgba(236,72,153,.18), rgba(14,165,233,.2), rgba(250,204,21,.32));
  filter:blur(160px);
  animation:packAura 24s linear infinite;
  opacity:.45;
  z-index:0;
}
.pack-mode::after { animation-direction:reverse; opacity:.28; }
@keyframes packAura {
  0% { transform:rotate(0deg) scale(1); }
  50% { transform:rotate(180deg) scale(1.08); }
  100% { transform:rotate(360deg) scale(1); }
}

.pack-inner {
  position:relative;
  z-index:2;
  width:min(1100px, 96vw);
  display:grid;
  gap:2.5rem;
}
.pack-mode.landing-active .pack-inner { width:min(900px, 96vw); }
.pack-mode.classic-active .pack-inner { width:min(640px, 92vw); }
.pack-mode.flawless-active .pack-inner { width:min(1100px, 96vw); }
.pack-landing {
  display:grid;
  gap:2rem;
  text-align:center;
  padding:3rem 1.5rem 2.5rem;
}
.pack-landing[hidden] { display:none; }
.pack-landing-options {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
}
.pack-landing-card {
  position:relative;
  width:min(320px, 46vw);
  aspect-ratio:2.5 / 3.5;
  border-radius:24px;
  border:1px solid rgba(226,232,240,.4);
  background:radial-gradient(circle at 30% 20%, rgba(236,72,153,.9), rgba(14,165,233,.4));
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:700;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:2.4rem 1.5rem;
  cursor:pointer;
  box-shadow:0 25px 55px rgba(8,47,73,.45);
  transition:border-color .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.pack-landing-card::before {
  content:"";
  position:absolute;
  inset:12px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.25);
  pointer-events:none;
}
.pack-landing-card span {
  position:relative;
  z-index:1;
}
.pack-landing-card-label {
  font-size:1.2rem;
  letter-spacing:.22em;
}
.pack-landing-card-desc {
  font-size:.78rem;
  letter-spacing:.12em;
  opacity:.85;
  line-height:1.6;
  text-transform:none;
}
.pack-landing-card:hover {
  transform:none;
  box-shadow:0 25px 55px rgba(8,47,73,.45);
  border-color:rgba(250,204,21,.6);
}
.pack-landing-card:focus-visible { outline:2px solid var(--gold); outline-offset:8px; }
.pack-landing-card--disabled {
  opacity:.45;
  cursor:not-allowed;
}
.pack-landing-card--disabled:is(:hover,:focus-visible) {
  transform:none;
  box-shadow:0 25px 55px rgba(8,47,73,.45);
  border-color:rgba(226,232,240,.4);
}
.pack-landing-footnote {
  margin:0;
  font-size:.85rem;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  letter-spacing:.2em;
}
.pack-experience {
  display:grid;
  gap:2.5rem;
}
.pack-experience[hidden] { display:none; }
.pack-classic {
  display:grid;
  gap:1.75rem;
  text-align:center;
}
.classic-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(240px, .9fr);
  gap:2.5rem;
  align-items:start;
}
.classic-main {
  display:grid;
  gap:1.75rem;
}
.classic-panel {
  display:grid;
  gap:1.6rem;
  text-align:left;
  align-content:start;
}
@media (max-width: 900px) {
  .classic-layout { grid-template-columns:1fr; }
}
.pack-classic[hidden] { display:none; }
.classic-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:min(58vh, 460px);
  perspective:1600px;
}
.classic-wrapper {
  position:relative;
  width:min(320px, 70vw);
  height:min(430px, 80vh);
}
.classic-foil {
  position:absolute;
  inset:0;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(248,250,252,.95) 0%, rgba(209,213,219,.95) 25%, rgba(148,163,184,.95) 50%, rgba(229,231,235,.96) 75%, rgba(255,255,255,.98) 100%);
  box-shadow:0 22px 60px rgba(0,0,0,.5), inset 0 0 40px rgba(255,255,255,.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transform-origin:center;
  transition:transform 1.1s ease, opacity 1s ease;
  cursor:default;
}
.classic-foil::before {
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation:foilSweep 2.4s ease-in-out infinite;
}
@keyframes foilSweep {
  0% { transform:translateX(-60%) rotate(12deg); opacity:0; }
  50% { opacity:1; }
  100% { transform:translateX(60%) rotate(12deg); opacity:0; }
}
.classic-foil:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px;
}
.classic-wrapper.is-awaiting .classic-foil {
  cursor:pointer;
}
.classic-rays {
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 0deg, rgba(250,204,21,.35), transparent 40%, rgba(236,72,153,.35), transparent 80%, rgba(56,189,248,.35));
  filter:blur(12px);
  mix-blend-mode:screen;
  opacity:0;
  transform:scale(.6);
  transition:opacity .8s ease, transform 1s ease;
  pointer-events:none;
}
.classic-card {
  position:absolute;
  inset:0;
  border-radius:20px;
  background:rgba(15,23,42,.85);
  box-shadow:0 18px 45px rgba(0,0,0,.5);
  overflow:hidden;
  transform-style:preserve-3d;
  transform:rotateY(-90deg) translateY(120px) scale(.4);
  opacity:0;
  transition:transform 1s cubic-bezier(.21,1.02,.23,1), opacity .6s ease;
}
.classic-card::after {
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform:translateX(-100%);
  opacity:0;
  pointer-events:none;
}
.classic-card-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-color:#111;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
@keyframes classicFloat {
  0%,100% { transform:rotateY(0deg) translateY(-6px) scale(1); }
  50% { transform:rotateY(0deg) translateY(-18px) scale(1.02); }
}
.classic-controls { display:grid; gap:1.4rem; justify-items:center; }
.classic-actions { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.classic-btn {
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  padding:.65rem 1.8rem;
  font-size:.95rem;
  background:rgba(15,23,42,.55);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 40px rgba(15,23,42,.55);
}
.classic-btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.classic-btn:not(:disabled):is(:hover,:focus-visible) {
  background:rgba(255,255,255,.14);
  transform:translateY(-2px);
  box-shadow:0 22px 60px rgba(15,23,42,.6);
}
.classic-btn--primary {
  border-color:rgba(250,204,21,.75);
  background:linear-gradient(120deg, rgba(250,204,21,.92), rgba(236,72,153,.9));
  color:#111;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.classic-btn--primary:not(:disabled):is(:hover,:focus-visible) {
  background:linear-gradient(120deg, rgba(250,204,21,1), rgba(236,72,153,.95));
}
.pack-mode.classic-revealing .classic-foil {
  transform:translateY(140px) scale(.6) rotateX(25deg);
  opacity:0;
}
.pack-mode.classic-revealing .classic-rays {
  opacity:1;
  transform:scale(1.05);
}
.pack-mode.classic-revealing .classic-card {
  transform:rotateY(0deg) translateY(-6px) scale(1);
  opacity:1;
  animation:classicFloat 6s ease-in-out infinite 1.2s;
}
.pack-mode.classic-revealing .classic-card::after {
  animation:classicShine 1.4s ease forwards .2s;
}
@keyframes classicShine {
  from { transform:translateX(-120%) rotate(10deg); opacity:0; }
  20% { opacity:1; }
  to { transform:translateX(120%) rotate(10deg); opacity:0; }
}
@media (max-width: 640px) {
  .pack-landing-card {
    width:min(280px, 85vw);
    padding:2.2rem 1.25rem;
  }
}
.pack-close {
  position:absolute;
  top:-1.2rem;
  right:-.2rem;
  appearance:none;
  border:0;
  background:rgba(17,17,17,.85);
  color:#fff;
  width:46px;
  height:46px;
  border-radius:999px;
  font-size:1.4rem;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:transform .2s ease, background .2s ease;
  z-index:10;
}
.pack-close:hover { transform:scale(1.08); background:#111; }

.pack-header { text-align:center; display:grid; gap:.6rem; }
.pack-tip { margin:0; font-size:.85rem; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.18em; }
.pack-title {
  margin:0;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  text-shadow:0 0 16px rgba(236,72,153,.65), 0 0 36px rgba(14,165,233,.55);
}
.pack-subtitle { margin:0; font-size:1.05rem; color:rgba(255,255,255,.82); text-shadow:0 2px 6px rgba(0,0,0,.4); }

.case-layout {
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(240px, .9fr);
  gap:2.5rem;
  align-items:start;
}
@media (max-width: 1100px) { .case-layout { grid-template-columns:1fr; } }

.case-stage {
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1600px;
  overflow:visible;
  padding-bottom:5rem;
}

.case-shell {
  position:relative;
  width:min(880px, 100%);
  height:520px;
  border-radius:30px;
  background:linear-gradient(145deg, rgba(248,250,252,.98), rgba(209,213,219,.92) 55%, rgba(148,163,184,.88));
  box-shadow:0 30px 90px rgba(8,11,26,.7);
  transform-style:preserve-3d;
}
.case-shell::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:4px solid rgba(255,255,255,.28);
  box-shadow:inset 0 0 40px rgba(255,255,255,.32);
  pointer-events:none;
}
.case-lid {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg, rgba(248,250,252,.98), rgba(203,213,225,.95) 55%, rgba(148,163,184,.92));
  box-shadow:0 35px 90px rgba(8,11,26,.7), inset 0 0 35px rgba(255,255,255,.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:#0f172a;
  font-weight:700;
  gap:.6rem;
  transform-origin:top center;
  transition:transform 1.6s cubic-bezier(.21,1,.29,1), opacity 1.6s cubic-bezier(.21,1,.29,1);
  z-index:4;
}
.case-lid::before {
  content:"";
  position:absolute;
  inset:20px;
  border-radius:calc(30px - 20px);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 0 30px rgba(255,255,255,.4);
  pointer-events:none;
}
.case-lid span { position:relative; z-index:1; }
.case-shell.is-open .case-lid { transform:rotateX(112deg) translateY(-18%); opacity:0; }

.case-base {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(160deg, rgba(18,24,40,.98), rgba(8,11,26,.95));
  padding:30px 34px 46px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 18px 60px rgba(2,6,23,.65);
}

.case-inner {
  position:relative;
  width:100%;
  height:100%;
  border-radius:22px;
  background:radial-gradient(circle at 50% 18%, rgba(148,163,184,.25), transparent 65%), rgba(9,12,24,.96);
  border:1px solid rgba(148,163,184,.45);
  box-shadow:inset 0 16px 45px rgba(0,0,0,.7);
  padding:2.4rem 2.6rem;
  display:grid;
  grid-template-rows:120px 1fr;
  gap:2.2rem;
}

.foam-slot {
  border-radius:20px;
  border:2px solid rgba(71,85,105,.5);
  background:rgba(11,15,26,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:inset 0 0 30px rgba(0,0,0,.55);
  color:rgba(148,163,184,.68);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
}
.foam-slot--horizontal { padding:1.2rem; }
.foam-plaque { display:grid; gap:.25rem; text-align:center; }
.foam-plaque strong { font-size:1rem; letter-spacing:.24em; }
.foam-plaque span { font-size:.75rem; letter-spacing:.35em; color:rgba(148,163,184,.6); }

.foam-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.6rem;
  align-items:stretch;
}
.case-pocket {
  border-radius:20px;
  border:2px solid rgba(71,85,105,.5);
  background:rgba(8,11,26,.92);
  box-shadow:inset 0 0 28px rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  position:relative;
  aspect-ratio:2.5/3.5;
}
.case-pocket::after {
  content:"";
  position:absolute;
  inset:18px;
  border-radius:inherit;
  border:1px solid rgba(15,23,42,.8);
  opacity:.35;
  pointer-events:none;
  display:none;
}

.case-card {
  position:relative;
  width:min(100%, 220px);
  height:auto;
  aspect-ratio:2.5/3.5;
  display:block;
  margin:0 auto;
  border:0;
  background:none;
  padding:0;
  cursor:pointer;
  perspective:1200px;
  transition:transform .55s cubic-bezier(.19,1,.22,1), opacity .45s ease;
  opacity:0;
  transform:translateY(38px);
  pointer-events:none;
}
.case-shell.is-open .case-card {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.case-card:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }

.case-card-inner {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:18px;
  transform-style:preserve-3d;
  transition:transform 1.35s cubic-bezier(.19,1,.22,1);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  border:2px solid rgba(148,163,184,.45);
  overflow:hidden;
  background:#111;
}
.case-card.revealed .case-card-inner {
  transform:rotateY(180deg);
  border-color:rgba(250,204,21,.7);
  box-shadow:0 24px 55px rgba(250,204,21,.35);
}

.card-face {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
  backface-visibility:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center;
  color:rgba(255,255,255,.82);
}
.card-face--back {
  background:linear-gradient(135deg, #f7f7f8 0%, #d4d6da 22%, #fbfbfc 46%, #bfc2c8 73%, #f5f5f7 100%);
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#1f2937;
  text-shadow:0 1px 2px rgba(255,255,255,.65);
}
.card-face--back::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 32px rgba(15,23,42,.28);
  pointer-events:none;
}
.card-face--front {
  transform:scaleX(-1);
  background:linear-gradient(135deg, #f7f7f8 0%, #d4d6da 22%, #fbfbfc 46%, #bfc2c8 73%, #f5f5f7 100%);
}
.card-face--front::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 38px rgba(0,0,0,.45);
}
.case-card.revealed .card-face--front {
  background-color:#04070f;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover !important;
}
.case-card.revealed .card-face--front::after {
  opacity:0;
}
.case-card.has-poster .card-face--back {
  opacity:0;
}
.case-card.has-poster .card-face--front {
  background-color:#04070f;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover !important;
}
.case-card.has-poster .card-face--front::after {
  opacity:0;
}
.case-latch {
  position:absolute;
  bottom:-42px;
  left:50%;
  transform:translateX(-50%);
  width:210px;
  height:72px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(226,232,240,.96), rgba(148,163,184,.92));
  border:0;
  box-shadow:0 28px 62px rgba(0,0,0,.55), inset 0 0 22px rgba(255,255,255,.36);
  cursor:pointer;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#111;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, opacity .3s ease;
  z-index:7;
}
.case-latch[disabled] { opacity:.45; cursor:not-allowed; }
.case-latch:not([disabled]):is(:hover,:focus-visible) { transform:translateX(-50%) translateY(-4px); box-shadow:0 28px 60px rgba(59,130,246,.35); }
.case-latch.is-cracked { background:linear-gradient(135deg, rgba(250,204,21,.96), rgba(236,72,153,.9)); color:#111; }
.case-latch.is-cracked::after {
  background:radial-gradient(circle at 50% 40%, rgba(252,211,77,.92), rgba(161,98,7,.9));
  box-shadow:0 0 0 3px rgba(250,204,21,.45), 0 0 22px rgba(250,204,21,.55);
}
.case-latch.is-cracked::before {
  background:linear-gradient(180deg, rgba(252,211,77,.92), rgba(161,98,7,.92));
  box-shadow:0 0 0 2px rgba(250,204,21,.35), 0 0 16px rgba(250,204,21,.45);
}
.case-latch::after {
  content:"";
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%, -50%);
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(15,23,42,.85), rgba(2,6,23,.95));
  box-shadow:0 0 0 3px rgba(148,163,184,.35);
  pointer-events:none;
}
.case-latch::before {
  content:"";
  position:absolute;
  top:calc(40% + 22px);
  left:50%;
  transform:translate(-50%, -50%);
  width:16px;
  height:28px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96));
  box-shadow:0 0 0 2px rgba(148,163,184,.35);
  pointer-events:none;
}
.case-shell.is-open .case-latch { opacity:0; pointer-events:none; transform:translateY(12px); }

.case-highlight {
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.5rem, 5vw, 3.5rem);
  background:rgba(8,11,26,.55);
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:4000;
}
.case-highlight::before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(94,234,212,.18), transparent 65%);
  pointer-events:none;
}
.case-highlight-content {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  z-index:1;
}
.case-highlight.visible { opacity:1; pointer-events:auto; }
.case-highlight.pop .reveal-card { animation:highlightPop .85s ease; }
@keyframes highlightPop {
  0% { transform:scale(.92); opacity:0; }
  45% { transform:scale(1.04); opacity:1; }
  70% { transform:scale(.98); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}

.reveal-card {
  position:relative;
  width:min(440px, 80vw);
  aspect-ratio:2.5/3.5;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(200deg, rgba(15,23,42,.96), rgba(2,6,23,.92));
  box-shadow:0 40px 110px rgba(0,0,0,.65);
  border:1px solid rgba(148,163,184,.38);
}
.reveal-card-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background-color:#111;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.reveal-card-art::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg, rgba(14,165,233,.25), transparent 55%);
  mix-blend-mode:screen;
  opacity:.4;
  pointer-events:none;
}
.pack-card-close {
  position:absolute;
  top:1rem;
  right:1rem;
  appearance:none;
  border:1px solid rgba(255,255,255,.45);
  background:rgba(8,11,26,.7);
  color:#fff;
  width:44px;
  height:44px;
  border-radius:999px;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease, background .2s ease;
  z-index:2;
}
.pack-card-close:is(:hover,:focus-visible) { transform:scale(1.06); background:rgba(255,255,255,.18); }

.reveal-card-actions {
  width:100%;
  display:flex;
  justify-content:center;
  gap:1rem;
}
.pack-card-next {
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  padding:.65rem 1.8rem;
  font-size:.95rem;
  background:rgba(15,23,42,.55);
  color:#fff;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  box-shadow:0 14px 40px rgba(15,23,42,.55);
}
.pack-card-next:is(:hover,:focus-visible) {
  background:rgba(255,255,255,.14);
  transform:translateY(-2px);
  box-shadow:0 22px 60px rgba(15,23,42,.6);
}

.case-panel {
  display:grid;
  gap:1.6rem;
  text-align:left;
  align-content:start;
}
.case-panel-controls {
  display:grid;
  gap:.75rem;
}
.case-panel-controls .pack-actions { justify-content:center; align-items:center; }
.case-panel-controls .pack-tip { color:rgba(255,255,255,.68); }
.pack-status { font-size:1rem; color:rgba(255,255,255,.85); line-height:1.5; min-height:1.5rem; }
.pack-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.pack-action-btn {
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  padding:.65rem 1.8rem;
  font-size:.95rem;
  background:rgba(15,23,42,.55);
  color:#fff;
  backdrop-filter:blur(6px);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.case-panel-controls .pack-action-btn { position:relative; z-index:10; }
.pack-action-btn:hover:not(:disabled) { transform:translateY(-2px); background:rgba(255,255,255,.18); }
.pack-action-btn:disabled { opacity:.45; cursor:not-allowed; }
.pack-reset-btn { border-color:rgba(250,204,21,.75); background:linear-gradient(120deg, rgba(250,204,21,.92), rgba(236,72,153,.9)); color:#111; font-weight:700; letter-spacing:.08em; }
.pack-reset-btn:hover:not(:disabled) { background:linear-gradient(120deg, rgba(250,204,21,1), rgba(236,72,153,.95)); }

.pack-collection {
  background:rgba(15,23,42,.6);
  border:1px solid rgba(148,163,184,.38);
  border-radius:20px;
  padding:1.2rem 1.5rem;
  display:grid;
  gap:1rem;
}
.pack-collection h3 {
  margin:0;
  font-size:1.05rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.pack-collection-list { display:grid; gap:.75rem; }
.pack-collection-empty { margin:0; color:rgba(255,255,255,.65); font-size:.9rem; }
.pack-collection-card {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:.75rem;
  align-items:center;
  padding:.6rem .85rem;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.38);
  background:rgba(8,11,26,.6);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.pack-collection-card:hover { transform:translateX(4px); border-color:rgba(250,204,21,.65); background:rgba(30,41,59,.72); }
.pack-collection-card.is-active { border-color:rgba(250,204,21,.75); background:rgba(250,204,21,.18); }
.pack-collection-thumb {
  width:64px;
  aspect-ratio:2.5/3.5;
  border-radius:12px;
  background:#111 center/cover no-repeat;
  border:1px solid rgba(148,163,184,.35);
}
.pack-collection-card span { font-size:.88rem; color:rgba(255,255,255,.85); }

.pack-toolbox {
  position:relative;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(148,163,184,.38);
  border-radius:20px;
  padding:1.2rem 1.5rem 2.4rem;
  display:grid;
  gap:1rem;
  overflow:visible;
}
.pack-toolbox-heading { display:flex; flex-direction:column; gap:.4rem; }
.pack-toolbox-heading h3 {
  margin:0;
  font-size:1.05rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.pack-toolbox-heading p {
  margin:0;
  font-size:.85rem;
  color:rgba(255,255,255,.6);
}
.pack-toolbox-items {
  display:flex;
  gap:2.25rem;
  flex-wrap:wrap;
  align-items:flex-end;
  padding-top:.75rem;
}
.toolbox-tool {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:0;
  border:0;
  background:none;
  color:#fff;
  cursor:grab;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:center;
  transition:transform .25s ease, filter .25s ease;
  user-select:none;
  touch-action:none;
  transform:var(--rest-transform, none);
}
.toolbox-tool::before {
  content:"";
  position:absolute;
  bottom:-18px;
  left:50%;
  width:86px;
  height:22px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(15,23,42,.55), transparent 68%);
  opacity:.7;
  filter:blur(4px);
  pointer-events:none;
  transition:opacity .25s ease;
}
.toolbox-tool:focus-visible { outline:2px solid rgba(236,72,153,.7); outline-offset:6px; }
.toolbox-tool .toolbox-tool-icon {
  font-size:3rem;
  filter:drop-shadow(0 16px 22px rgba(8,11,26,.65));
  pointer-events:none;
}
.toolbox-tool:active { cursor:grabbing; }
.toolbox-tool:hover:not(.is-locked):not(.dragging) { filter:brightness(1.05); transform:var(--rest-transform, none) scale(1.04); }
.toolbox-tool.toolbox-tool--keys { --rest-transform:translateY(-6px) rotate(8deg); }
.toolbox-tool.dragging {
  position:fixed;
  left:var(--drag-x, 0px);
  top:var(--drag-y, 0px);
  transform:translate(-50%, -50%) scale(1.12);
  z-index:4000;
  pointer-events:none;
  filter:none;
}
.toolbox-tool.dragging::before { opacity:0; }
.toolbox-tool.dragging .toolbox-tool-icon { filter:drop-shadow(0 20px 32px rgba(8,11,26,.75)); }
.toolbox-tool.is-locked {
  opacity:.45;
  cursor:not-allowed;
}
.toolbox-tool.is-locked:focus { outline:none; }
.toolbox-tool.tool-used:not(.dragging) { filter:brightness(1.15); }
@keyframes toolboxShake {
  0%, 100% { transform:translateX(0); }
  25% { transform:translateX(-6px); }
  75% { transform:translateX(6px); }
}
.toolbox-tool.toolbox-tool--shake { animation:toolboxShake .35s ease; }
.case-latch.tool-target:not(.is-cracked) {
  transform:translateX(-50%) translateY(-6px) scale(1.05);
  box-shadow:0 28px 60px rgba(59,130,246,.55);
}

@media (max-width: 1100px) {
  .case-stage { min-height:500px; padding-bottom:5.5rem; }
  .case-shell { height:500px; }
  .case-panel { text-align:center; }
  .pack-toolbox-heading { align-items:center; }
  .pack-toolbox-heading p { max-width:20ch; margin:0 auto; }
  .pack-actions { justify-content:center; }
  .case-panel-controls .pack-actions { justify-content:center; align-items:center; }
  .pack-collection { text-align:left; }
}

@media (max-width: 900px) {
  .pack-inner { gap:2rem; }
  .case-stage { min-height:460px; }
  .case-shell { height:460px; }
  .foam-grid { gap:1.2rem; }
  .pack-toolbox-items { flex-direction:column; }
  .pack-actions { flex-direction:column; }
  .pack-action-btn { width:100%; text-align:center; }
}

@media (max-width: 640px) {
  .case-stage { min-height:420px; padding-bottom:4.5rem; }
  .case-shell { height:420px; }
  .case-inner { padding:1.8rem 1.9rem; gap:1.6rem; grid-template-rows:100px 1fr; }
  .foam-grid { gap:1rem; }
  .case-pocket { padding:0; }
  .reveal-card { width:min(420px, 88vw); }
}
@media (prefers-reduced-motion: reduce) {
  .pack-mode, .pack-mode * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.detail-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  display: grid;
  gap: 2rem;
}
.detail-main {
  display: grid;
  gap: 1.5rem;
}
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}
.detail-back:hover,
.detail-back:focus-visible {
  text-decoration: underline;
}
.detail-card {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) {
  .detail-card {
    grid-template-columns: 1fr;
  }
}
.detail-related {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  display: grid;
  gap: 1.25rem;
}
.detail-related[hidden] {
  display: none;
}
.detail-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.detail-related__title {
  margin: 0;
  font-size: 1.35rem;
}
.detail-related__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.detail-related__controls[hidden] {
  display: none;
}
.detail-related__control {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.detail-related__control:hover,
.detail-related__control:focus-visible {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.detail-related__control:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.detail-related__control:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--chip);
  color: var(--muted);
  border-color: var(--border);
}
.detail-related__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 260px);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
}
.detail-related__footer {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}
.detail-related__footer[hidden] {
  display: none;
}
.detail-related__view-all {
  font-weight: 600;
  text-transform: none;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
.detail-related__view-all:hover,
.detail-related__view-all:focus-visible {
  text-decoration: none;
}
.detail-related__view-all:focus-visible {
  outline: none;
  box-shadow: 0 2px 0 var(--accent);
}
.detail-related__track::-webkit-scrollbar {
  height: 8px;
}
.detail-related__track::-webkit-scrollbar-track {
  background: transparent;
}
.detail-related__track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
}
.detail-related__card {
  position: relative;
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  scroll-snap-align: start;
  min-height: 100%;
  box-shadow: var(--shadow);
}

.detail-related__card > .card-pill {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  margin: 0;
}
.detail-related__card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.detail-related__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(15, 23, 42, 0.45);
  overflow: hidden;
}
.detail-related__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}
.detail-related__body {
  display: grid;
  gap: 0.4rem;
}
.detail-related__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.detail-related__meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.detail-related__status {
  margin-top: 0.25rem;
}
.detail-related__price {
  font-size: 0.95rem;
  font-weight: 600;
}
.detail-related__price .price {
  font-size: inherit;
  font-weight: inherit;
}
.detail-related__price .price strong {
  font-weight: 600;
}
@media (max-width: 720px) {
  .detail-related__track {
    grid-auto-columns: minmax(200px, 75vw);
  }
}
.detail-gallery {
  display: grid;
  gap: 1rem;
}
.detail-gallery .carousel-media.is-clickable {
  cursor: zoom-in;
}
.detail-info {
  display: grid;
  gap: 1.1rem;
}
.detail-price {
  font-size: 1.35rem;
  font-weight: 600;
}
.detail-price:empty {
  display: none;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.detail-status {
  font-size: 0.95rem;
  color: var(--muted);
}
.detail-status--error {
  color: #b91c1c;
  font-weight: 600;
}
.detail-currency .label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.detail-currency select {
  width: fit-content;
}
.detail-attrs {
  display: grid;
  gap: 0.75rem;
}
.detail-attrs .attrs {
  margin: 0;
}
.detail-attrs .kv {
  padding: 0.35rem 0;
}
@media (max-width: 720px) {
  .detail-shell {
    padding: clamp(1rem, 6vw, 2rem);
  }
}
body.lightbox-open {
  overflow: hidden;
}
.detail-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 14, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 2rem);
  z-index: 5000;
}
.detail-lightbox.is-open {
  display: flex;
}
.detail-lightbox__surface {
  position: relative;
  width: min(1100px, 100%);
  height: min(90vh, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  background: rgba(12, 15, 25, 0.85);
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 1.5rem);
  color: #fff;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
}
.detail-lightbox__surface:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.detail-lightbox__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  transform-origin: center center;
  transition: transform .12s ease;
  user-select: none;
  touch-action: none;
  cursor: zoom-in;
}
.detail-lightbox__img.is-zoomed {
  cursor: zoom-out;
}
.detail-lightbox__img.is-panning {
  cursor: grabbing;
}
.detail-lightbox__close,
.detail-lightbox__nav,
.detail-lightbox__zoom button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(15, 18, 30, 0.75);
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.detail-lightbox__close,
.detail-lightbox__nav {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  z-index: 100;
}
.detail-lightbox__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  border-radius: 50%;
}
.detail-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.detail-lightbox__nav--prev {
  left: .75rem;
}
.detail-lightbox__nav--next {
  right: .75rem;
}
.detail-lightbox__nav[hidden] {
  display: none;
}
.detail-lightbox__close:hover,
.detail-lightbox__nav:hover,
.detail-lightbox__zoom button:hover {
  background: rgba(30, 33, 50, 0.9);
  border-color: rgba(255, 255, 255, .35);
}
.detail-lightbox__close:focus-visible,
.detail-lightbox__nav:focus-visible,
.detail-lightbox__zoom button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.detail-lightbox__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.detail-lightbox__caption {
  font-size: .95rem;
  color: rgba(255, 255, 255, .78);
}
.detail-lightbox__caption[hidden] {
  display: none;
}
.detail-lightbox__zoom {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.detail-lightbox__zoom button {
  border-radius: 10px;
  padding: .35rem .75rem;
  font-size: 1rem;
  line-height: 1;
}
.detail-lightbox__zoom-label {
  min-width: 3ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .detail-lightbox__surface {
    gap: .75rem;
    padding: 1rem;
  }
  .detail-lightbox__close,
  .detail-lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .detail-lightbox__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .detail-lightbox__zoom {
    width: 100%;
    justify-content: center;
  }
}