/* Physical packaging and a City Pop digital player. */
#products .cd-showcase { max-width: 680px; }
.cd-showcase-heading { display:flex; justify-content:space-between; gap:16px; color:#a294b5; font-size:9px; letter-spacing:.18em; padding:8px 0 18px; }
.cd-showcase-heading span:last-child { color:var(--cyan); }
.cd-render { position:relative; width:100%; aspect-ratio:1.12; border:1px solid rgba(198,178,224,.15); background:radial-gradient(ellipse at 50% 50%,#36224c55,transparent 70%),linear-gradient(145deg,#170d26,#0c0617); overflow:hidden; touch-action:pan-y; cursor:grab; border-radius:2px; }
.cd-render:active { cursor:grabbing; }
.cd-render canvas { display:block; width:100%; height:100%; position:absolute; inset:0; opacity:0; }
.cd-showcase.is-ready .cd-render canvas { opacity:1; }
#products .cd-showcase .cd-render-fallback { position:absolute; width:100%; height:100%; left:0; top:0; aspect-ratio:auto; object-fit:contain; mask:none; -webkit-mask:none; pointer-events:none; }
.cd-showcase.is-ready .cd-render-fallback { opacity:0; pointer-events:none; }
.cd-render-loading { position:absolute; top:12px; right:12px; max-width:calc(100% - 24px); padding:6px 9px; font-size:10px; line-height:1.6; color:#d5c8e1; background:#10091cd9; border:1px solid #a88ac433; pointer-events:none; }
.cd-render-loading[hidden] { display:none; }
.cd-render-tools { position:absolute; bottom:14px; left:16px; right:16px; display:flex; justify-content:space-between; gap:10px; z-index:2; }
.cd-render-tools button { min-height:36px; padding:8px 10px; border:1px solid #a88ac433; color:#d5c8e1; background:#10091cd9; font-size:10px; letter-spacing:.04em; cursor:pointer; }
.cd-render-tools button:disabled,.cd-pose-controls button:disabled { cursor:wait; opacity:.45; }
.cd-render-tools button[aria-pressed=true] { border-color:var(--cyan); color:var(--cyan); }
.cd-gesture { color:#a194b3; font-size:10px; text-align:center; margin:14px 0 18px; letter-spacing:.08em; }
.cd-pose-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cd-pose-controls button { border:0; border-right:1px solid var(--line); background:none; color:#bcb0cc; min-height:66px; padding:12px 5px; display:flex; flex-direction:column; gap:7px; align-items:center; justify-content:center; font-size:12px; cursor:pointer; }
.cd-pose-controls button:last-child { border-right:0; }
.cd-pose-controls button small { font-size:8px; letter-spacing:.15em; opacity:.55; }
.cd-pose-controls button[aria-pressed=true] { color:var(--cyan); background:#48f5ff08; box-shadow:inset 0 -2px var(--cyan); }
.cd-booklet-note { font-size:11px; line-height:1.7; color:#c2b5d4; margin:16px 0 0; padding-left:12px; border-left:2px solid var(--pink); }
#products .cd-showcase .cd-gallery-stage { display:none; }
#products .cd-showcase .cd-gallery-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:22px 0 0; }
.cd-artwork-links>span { color:#9f90b3; font-size:10px; }
.cd-artwork-links button { border:0; border-bottom:1px solid #b6a1cd44; padding:8px 0; font-size:11px; color:#e3d6ef; background:none; cursor:zoom-in; min-height:36px; }
.cd-artwork-links button span { color:var(--cyan); }
#products .cd-showcase figcaption { font-size:10px; line-height:1.7; margin-top:16px; color:#9c8db1; text-align:left; }
.cd-showcase.is-unavailable .cd-render { cursor:default; }
.cd-showcase.is-unavailable .cd-render-loading { top:auto; bottom:0; left:0; right:0; max-width:none; padding:10px; border:0; text-align:center; }
.cd-showcase.is-unavailable .cd-render-tools,.cd-showcase.is-unavailable .cd-pose-controls,.cd-showcase.is-unavailable .cd-gesture { display:none; }
.cd-render:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
.cd-showcase.is-expanded { position:fixed!important; inset:16px; width:auto!important; max-width:none!important; height:calc(100dvh - 32px); margin:0!important; padding:20px clamp(16px,5vw,80px); background:#0d0617; z-index:120; display:flex!important; flex-direction:column; overflow:auto; border:1px solid #736088; box-shadow:0 0 0 100vmax #05020def; }
.cd-showcase.is-expanded .cd-render { flex:1 0 200px; aspect-ratio:auto; min-height:0; }
.cd-showcase.is-expanded .cd-gallery-controls { display:none!important; }
.cd-showcase.is-expanded figcaption { text-align:center; margin:12px 0 0; color:#9c8db1; font-size:10px; font-weight:400; line-height:1.7; }
html:has(.cd-showcase.is-expanded),html:has(.cd-lightbox[open]) { overflow:hidden; scrollbar-gutter:stable; }
.cd-lightbox-switch { gap:6px; }
.cd-lightbox-footer button { padding:10px 12px; }

/* An illustrated digital player, inspired by the E-series silhouette. */
#products .product-visual[data-product-edition=digital] { min-height:0; height:auto; }
#products .digital-device.citypop-player { position:relative; inset:auto; width:100%; height:auto; margin:0 auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; transform:none; color:#efe9ff; }
#products .citypop-player:before { display:none; }
.citypop-player-stage { position:relative; width:100%; max-width:550px; margin:auto; padding:32px 0 36px; }
.citypop-body { width:290px; position:relative; margin:auto; padding:21px 19px 18px; border-radius:24px 24px 36px 36px; background:linear-gradient(122deg,#3e176e 0%,#9f6ce8 13%,#55258b 30%,#c4a2fa 31%,#7143b0 33%,#422073 55%,#8a56c9 75%,#36145e 100%); border:3px solid #211039; box-shadow:inset 1px 2px 2px #f8dbffbb,inset -3px -3px 6px #210831aa,7px 8px 0 #321554,9px 10px 0 #b77dea,24px 28px 0 #04031b44; transform:rotate(-5deg); }
.citypop-player b { display:inline; letter-spacing:inherit; color:inherit; text-align:inherit; }
.citypop-body:after { content:""; position:absolute; bottom:0; left:16px; right:16px; height:11px; background:repeating-linear-gradient(130deg,#f46ba4 0 14px,#ead77f 14px 19px,#52cbd3 19px 35px); border-radius:0 0 22px 22px; border-top:2px solid #131744; }
.citypop-brand { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:17px; font-size:12px; font-weight:900; letter-spacing:.05em; }
.citypop-brand small { font-size:6px; letter-spacing:.13em; color:#bcdde7; }
.citypop-screen { position:relative; padding:11px 12px 10px; border:3px solid #181e49; border-radius:9px; background:#030305; box-shadow:3px 3px 0 #251335,-1px -1px 0 #b485df; }
.citypop-statusbar { display:flex; justify-content:space-between; font-size:7px; letter-spacing:.10em; color:#74dbd8; }
.citypop-statusbar b { font-weight:400; color:#f4d57f; }
.citypop-screen-art { display:flex; align-items:end; gap:10px; margin-top:12px; }
#products .citypop-screen-art img { width:73%; height:auto; aspect-ratio:1; object-fit:cover; border:2px solid #f4b4ca; box-shadow:4px 4px 0 #5b4784; border-radius:2px; }
.citypop-screen-art>span { font:900 11px/1.12 Arial,sans-serif; writing-mode:vertical-rl; letter-spacing:.13em; color:#f889b7; margin-bottom:1px; }
.citypop-album { font:900 17px/1 Arial,sans-serif; letter-spacing:-.035em; margin:16px 0 11px; color:#fff0bb; }
.citypop-album span { display:block; font-size:6px; letter-spacing:.24em; color:#f592bb; margin-top:5px; }
.citypop-track { display:flex; align-items:center; gap:9px; }
.portable-track-number { font:800 22px/1 "Courier New",monospace; color:#76e7de; }
.portable-track-title { font-size:8px; font-weight:700; letter-spacing:.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.citypop-wave { height:21px; margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:3px; }
.citypop-player .citypop-wave i { display:block; width:4px; height:30%; border-radius:1px; margin:0; padding:0; aspect-ratio:auto; box-shadow:none; background:#64d7cf; animation:citypop-wave .7s ease-in-out infinite alternate; animation-play-state:paused; }
.citypop-player .citypop-wave i:after { display:none; }
.citypop-wave i:nth-child(3n) { height:80%; animation-delay:-.15s; background:#fb92bc; }
.citypop-wave i:nth-child(2n) { height:50%; animation-delay:-.4s; }
.citypop-wave i:nth-child(4n) { height:100%; animation-delay:-.55s; background:#f1d77c; }
.portable-seek { display:block; width:100%; height:4px; margin:11px 0 6px; appearance:none; border-radius:4px; border:0; cursor:pointer; background:linear-gradient(90deg,#f796c6 var(--seek,0%),#39436b var(--seek,0%)); accent-color:#f796c6; }
.portable-seek::-webkit-slider-thumb { appearance:none; width:7px; height:9px; border:0; border-radius:1px; background:#d8f5e8; }
.portable-seek::-moz-range-thumb { width:7px; height:9px; border:0; border-radius:1px; background:#d8f5e8; }
.citypop-time { display:flex; justify-content:space-between; font:8px/1.2 "Courier New",monospace; color:#a4b9d1; }
.citypop-control-label { display:flex; justify-content:space-between; margin-top:17px; font-size:7px; font-weight:700; letter-spacing:.16em; color:#d8d2ec; }
.citypop-control-label b { font-weight:500; }
.citypop-wheel { position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; width:130px; height:130px; margin:9px auto 4px; border:2px solid #132244; border-radius:50%; background:#65ccd3; box-shadow:3px 4px 0 #262867; }
.citypop-wheel button { display:grid; place-items:center; min-width:0; padding:0; margin:0; border:0; background:none; color:#1b3263; font:15px/1 Arial,sans-serif; cursor:pointer; border-radius:50%; }
.citypop-wheel button:hover { background:#bff6ea66; }
.citypop-wheel .citypop-vol-up { grid-row:1; grid-column:2; font-size:19px; }
.citypop-wheel .portable-previous { grid-row:2; grid-column:1; font-size:12px; }
.citypop-wheel .portable-play { grid-row:2; grid-column:2; width:48px; height:48px; align-self:center; justify-self:center; border-radius:50%; background:#f093ba; color:#212557; border:2px solid #222257; box-shadow:2px 2px 0 #387c9e; font-size:19px; }
.citypop-wheel .portable-next { grid-row:2; grid-column:3; font-size:12px; }
.citypop-wheel .citypop-vol-down { grid-row:3; grid-column:2; font-size:23px; }
.citypop-wheel .portable-play:active { transform:translate(1px,1px); box-shadow:none; }
.citypop-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:0; font-size:7px; letter-spacing:.12em; }
.citypop-bottom .portable-stop { background:#333b86; color:#ead6ef; border:1px solid #7676b1; border-radius:6px; min-height:30px; padding:8px 9px; font-size:7px; cursor:pointer; }
.citypop-star { display:inline-block; font-size:24px; color:#f6d67d; margin-left:7px; vertical-align:middle; }
.citypop-side-button { position:absolute; right:-8px; top:23%; width:6px; height:34px; border:2px solid #161a46; border-radius:0 5px 5px 0; background:#f7a6c7; }
.citypop-cable { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:#6bd9d1; stroke-width:5; stroke-linecap:round; transform:translate(4px,15px); opacity:.8; }
.citypop-cable path:last-child { stroke:#f4a2c3; stroke-width:8; }
.portable-caption { margin-top:8px; padding:0 12px; text-align:center; font-size:12px; line-height:1.7; color:#d1c0e1; }
.portable-caption small { display:block; font-size:10px; color:#9c8bb2; margin-top:7px; }
.citypop-player.is-playing .citypop-wave i { animation-play-state:running; }
@keyframes citypop-wave { from { transform:scaleY(.35); } to { transform:scaleY(1); } }

/* 12-inch record concept. Center label diameter follows the supplied reference. */
#products .product-visual[data-product-edition=vinyl] { height:auto; aspect-ratio:1.18; max-width:640px; width:100%; justify-self:center; }
#products .vinyl-sleeve { left:2%; top:18%; width:64%; background-image:none; overflow:hidden; border:1px solid #d8c0eb66; transform:rotate(-5deg); }
#products .vinyl-sleeve:after { content:'SAMPLE'; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font:900 clamp(30px,3.8vw,58px)/1 Arial,sans-serif; letter-spacing:.025em; color:#ffffffe6; text-shadow:0 2px 5px #27104488; }
#products .vinyl-disc { left:34%; top:3%; width:64%; border:1px solid #f3b1fb88; box-shadow:14px 25px 40px #0008,inset 0 0 15px #ffc0ff66; background:repeating-radial-gradient(circle,transparent 0 2px,#350b5017 2.5px 3px),conic-gradient(from 20deg,#9d19c4,#c639ce 13%,#71159d 25%,#b82bca 39%,#f197dc 44%,#b526c5 49%,#710e9c 65%,#ac24bd 80%,#d363d9 88%,#9b18bb); }
#products .vinyl-disc>div { inset:32.2%; border:1px solid #f2c9ff99; background:#221038; overflow:hidden; box-shadow:0 2px 6px #350b5566; }
#products .vinyl-disc>div:after { width:6px; background:#0b0417; box-shadow:0 0 0 2px #dbc4ed88; }
.vinyl-cover-art { position:absolute; inset:0; display:block; background:url('./assets/image-optimized-20261011/vinyl-background.webp') center/cover; }
#products .vinyl-cover-art .vinyl-pixel-orbit { position:absolute; left:9%; top:7%; width:90%; height:auto; max-width:none; display:block; object-fit:contain; border:0; border-radius:0; filter:none; box-shadow:none; mask:none; -webkit-mask:none; }
#products .vinyl-disc>div:after { z-index:2; }
@media(min-width:901px) { #products .edition-stage { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); } }
@media(max-width:600px) {
  .cd-render { aspect-ratio:1.12; }
  .cd-render-tools { left:10px; right:10px; bottom:10px; }
  .cd-render-tools button { font-size:9px; padding:7px 8px; }
  .cd-pose-controls button { min-height:60px; font-size:11px; }
  .cd-showcase.is-expanded { inset:8px; height:calc(100dvh - 16px); padding:12px; }
  .cd-lightbox-header h2 { max-width:64vw; }
  .citypop-body { width:min(78%,290px); padding:18px 15px 16px; transform:rotate(-3deg); }
  .citypop-player-stage { padding:24px 0 32px; }
  .citypop-brand { font-size:10px; }
  .citypop-screen { padding:9px; }
  .citypop-album { font-size:15px; }
  .citypop-wave { gap:2px; }
  .citypop-wheel { width:120px; height:120px; }
  .citypop-screen-art>span { font-size:9px; }
  #products .vinyl-sleeve:after { font-size:clamp(24px,6.8vw,40px); }
}
@media(prefers-reduced-motion:reduce) { .citypop-wave i { animation:none!important; } }

/* The expanded viewer is portalled to body, outside reveal transforms. */
.cd-showcase.is-expanded .cd-gallery-stage { display:none!important; }
.cd-showcase.is-expanded .cd-render-fallback { position:absolute; width:100%; height:100%; left:0; top:0; aspect-ratio:auto; object-fit:contain; }
.cd-presale { display:grid; gap:10px; margin:24px 0 30px; padding:18px 20px; border-left:2px solid var(--pink); background:#ad61d609; }
.cd-presale>span { font-size:10px; font-weight:700; letter-spacing:.10em; color:var(--pink); }
.cd-presale time { font-size:16px; color:#eee1f4; font-variant-numeric:tabular-nums; }
.cd-presale p { margin:0; font-size:12px; line-height:1.7; color:#ad9fbd; }

/* Complete release date; regional digital availability remains in product details. */
.release-stamp > span:first-child { color:#f2ef65; font-weight:700; }
.release-stamp strong { color:#f2ef65; font-size:15px; letter-spacing:-.03em; white-space:nowrap; }
@media (max-width:1050px) { .release-stamp strong { font-size:13px; } }
@media (max-width:600px) { .release-stamp strong { font-size:12px; } }
.limited-contents { list-style:none; padding:0; margin:24px 0 30px; border-top:1px solid var(--line); }
.limited-contents li { position:relative; padding:11px 0 11px 19px; border-bottom:1px solid var(--line); color:#d0c2df; font-size:13px; line-height:1.7; }
.limited-contents li:before { content:'+'; position:absolute; left:0; color:var(--pink); }