/* The buy page: the showcase you turn by hand, the tiles, and the steps to a purchase. */
html:has(body.buy) { background: #fff }

/* The console turning under the visitor's hand. The canvas draws one frame of the turntable film at a time. */
.spin-section { background: #fdfdfd }
.spin { position: relative; height: max(360px, min(calc(100svh - 330px), 760px)); max-width: 100%; aspect-ratio: 1288 / 1608; cursor: default; touch-action: pan-y; outline: none; user-select: none; -webkit-user-select: none }
.spin.dragging { cursor: grabbing }
.spin canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s }
.spin.ready canvas { opacity: 1 }
.spin-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s }
.spin.ready .spin-still { opacity: 0 }
.spin-hint { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-radius: 999px; background: rgba(20,6,12,.06); color: rgba(20,6,12,.7); transition: opacity .4s }
.spin.touched .spin-hint { opacity: 0 }
.spin-arrows { font-size: 15px; letter-spacing: 0 }
.spin-progress { position: absolute; left: 50%; bottom: 0; width: 120px; height: 2px; transform: translateX(-50%); background: rgba(20,6,12,.08); transition: opacity .4s }
.spin-progress i { display: block; height: 100%; width: 0; background: #14060c }
.spin.loaded .spin-progress { opacity: 0 }
.spin:focus-visible { box-shadow: 0 0 0 3px rgba(4,73,198,.4); border-radius: 24px }

/* The tiles: one wide dark one, the rest white on the mist */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr) }
.tile { display: flex; flex-direction: column; gap: .75rem; min-height: 340px; padding: 2rem; border-radius: 28px; overflow: hidden }
.tile-wide { grid-row: span 2 }
.tile-photo { padding: 0; background: #000 }
.tile-photo img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 767px) {
  .tiles { grid-template-columns: 1fr 1fr }
  .tile-wide { grid-column: span 2; grid-row: auto; min-height: 380px }
  .tile { min-height: 240px; padding: 1.4rem }
  .tile-photo { grid-column: span 2; min-height: 260px }
}

/* On the TV: a tall section with a stage that stays put while the console and the TV meet.
   The script sets --in (sliding in), --cable (the cable drawing), --on (the screen) and --copy, each 0 to 1. */
.tv-scene { position: relative; height: 340vh; --in: 0; --cable: 0; --on: 0; --copy: 0 }
.tv-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh }
.tv-copy { opacity: var(--copy); transform: translateY(calc((1 - var(--copy)) * 24px)) }
.tv-set { position: relative; width: min(1200px, 94vw); aspect-ratio: 1000 / 520; max-height: 58svh }
.tv-tv { position: absolute; right: 0; top: 0; width: 74%; transform: translateX(calc((1 - var(--in)) * 80vw)) }
.tv-tv > img { display: block; width: 100% }
/* The panel inside the bezel, measured off the picture */
.tv-screen { position: absolute; left: 10.8%; top: 6.8%; width: 78.4%; height: 75.3%; overflow: hidden; background: #000; opacity: var(--on) }
.tv-screen img { width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--on) * .08)); filter: brightness(calc(2.2 - var(--on) * 1.2)) saturate(calc(.4 + var(--on) * .6)) }
.tv-console { position: absolute; left: 13%; bottom: 0; height: 74%; aspect-ratio: 484 / 720; filter: drop-shadow(0 18px 24px rgba(20,6,12,.18)); transform: translateX(calc((1 - var(--in)) * -80vw)) rotate(calc(-4deg - (1 - var(--in)) * 10deg)) }
.tv-console > img { display: block; width: 100%; height: 100% }
/* The console's own screen, measured off the cutout, playing the same game */
.tv-mini { position: absolute; left: 16.9%; top: 13.6%; width: 65.3%; height: 30.3%; overflow: hidden; opacity: var(--on) }
.tv-mini img { width: 100%; height: 100%; object-fit: cover }
.tv-cable { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.tv-cable path { fill: none; stroke: #1b1b1d; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--cable)) }
@media (max-width: 767px) {
  .tv-scene { height: 280vh }
  .tv-set { aspect-ratio: 1000 / 620 }
  .tv-set { width: 100vw }
  .tv-tv { width: 84%; right: -4% }
  .tv-console { left: 6%; height: 62% }
}

/* The buy steps */
.buy-stage { position: relative }
.buy-picture { position: sticky; top: 96px; display: grid; place-items: center; aspect-ratio: 1; border-radius: 28px; background: #f5f5f7; overflow: hidden }
.buy-picture img { grid-area: 1 / 1; max-height: 74%; max-width: 70%; object-fit: contain; transition: opacity .35s, transform .5s cubic-bezier(.2,.8,.2,1) }
.buy-picture img.swap { opacity: 0; transform: translateY(12px) scale(.98) }
.buy-controller { align-self: end; justify-self: start; width: 44% !important; max-width: 44% !important; margin: 0 0 7% 6%; opacity: 0; transform: translate(-30px, 20px) rotate(-8deg) }
.buy-picture.with-controller .buy-controller { opacity: 1; transform: rotate(-8deg) }
.buy-picture.with-controller [data-buy-image] { transform: translateX(14%) }
.buy-second { opacity: 0; transform: translate(-4%, -2%) rotate(-6deg) scale(.86) }
.buy-picture.with-pair [data-buy-image] { transform: translate(12%, 5%) rotate(5deg) }
.buy-picture.with-pair .buy-second { opacity: 1; transform: translate(-16%, -7%) rotate(-9deg) scale(.86) }
.buy-picture.with-pair.with-controller [data-buy-image] { transform: translate(18%, 3%) rotate(5deg) }
.buy-count { position: absolute; top: 6%; right: 6%; padding: .45rem 1rem; border-radius: 999px; background: #14060c; color: #fff; font-weight: 600; opacity: 0; transition: opacity .3s }
.buy-picture.with-many .buy-count { opacity: 1 }
@media (max-width: 767px) { .buy-picture { position: relative; top: auto } }

.step-block { min-width: 0; padding: 0 0 2.5rem; margin: 0 0 2.5rem; border: 0; border-bottom: 1px solid rgba(20,6,12,.1); transition: opacity .4s }
.step-block.is-waiting { opacity: .35; pointer-events: none }
.step-title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: rgba(20,6,12,.55) }
.step-title span { color: #14060c }

.swatch { width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20,6,12,.18); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .2s, transform .2s }
.swatch:hover { transform: scale(1.06) }
.swatch[aria-checked="true"] { outline-color: #0449c6 }

.choice { display: block; cursor: pointer }
.choice input { position: absolute; opacity: 0; pointer-events: none }
.choice-body { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 16px; border: 1px solid rgba(20,6,12,.2); transition: border-color .2s, box-shadow .2s }
.choice:hover .choice-body { border-color: rgba(20,6,12,.45) }
.choice input:checked + .choice-body { border-color: #0449c6; box-shadow: 0 0 0 1px #0449c6 }
.choice input:focus-visible + .choice-body { box-shadow: 0 0 0 3px rgba(4,73,198,.35) }
.choice-thumb { width: 72px; height: 54px; object-fit: contain }
.choice-price { white-space: nowrap; font-weight: 600 }

.stepper { display: flex; align-items: center; gap: 1rem; margin-top: .75rem; padding: .9rem 1.25rem; border-radius: 16px; background: #f5f5f7 }
.stepper[hidden] { display: none }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(20,6,12,.2); background: #fff; font-size: 1.25rem; line-height: 1 }
.stepper button:disabled { opacity: .3 }
.stepper output { min-width: 2ch; text-align: center; font-size: 1.25rem; font-weight: 600 }
.stepper-price { margin-left: auto; font-weight: 600 }

.summary { display: grid; gap: .6rem; font-size: 1.125rem }
.summary div { display: flex; justify-content: space-between; gap: 1rem }
.summary div[hidden] { display: none }
.summary dd { font-weight: 600 }
.summary-total { margin-top: .4rem; padding-top: .9rem; border-top: 1px solid rgba(20,6,12,.1); font-size: 1.4rem }
.purchase { margin-top: 1.6rem; width: 100%; padding: 1.15rem; border-radius: 14px; background: #0449c6; color: #fff; font-size: 1.125rem; font-weight: 600; transition: background .2s, transform .2s }
.purchase:hover:not(:disabled) { background: #033a9f }
.purchase:disabled { background: rgba(20,6,12,.15); color: rgba(20,6,12,.45); cursor: not-allowed }