/* Detail versions (deck/versions.js). Version 3 is every gallery deck's page on sale; every rule
   is scoped to body.dv or a .dv-* class. Phone first; the desktop grid puts the story,
   the box and the price on the left and the hero on the right. */

body.dv .d-head { min-height: 0; }
body.dv .meter { display: none !important; }
body.dv-2 .d-sheet-btn, body.dv-2 .d-all { display: none !important; }   /* version 2 shows the cards in 3D only */

/* --- (b) the box leads ------------------------------------------------------------------- */
.dv-product { margin: var(--s3) calc(-1 * var(--s5)) var(--s2); }
.dv-shots {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dv-shots::-webkit-scrollbar { display: none; }
.dv-shot { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 1; background: #dcd3c6; overflow: hidden; }
.dv-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }   /* a 4:3 crop keeps the box top */
/* version 2: the hero is the deck in motion, so the box photo is a shorter band */
.dv-product-2 .dv-shot { aspect-ratio: 4 / 3; }
.dv-dots { display: flex; justify-content: center; gap: 6px; margin: var(--s2) 0 0; }
.dv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dv-dots i.on { background: var(--ink-2); }
.dv-product .d-shots-cap { padding: 0 var(--s5); }

/* --- (d) the price panel: the full picker (qty.css); another Buy lands here and lights it ---- */
.dv-buy-btn { min-height: 52px; font-size: var(--text-m); }
.dv-qty { border-radius: 12px; }
.dv-qty.is-flash { animation: dv-flash 1.8s var(--ease-out); }
@keyframes dv-flash {
  0%, 40% { background: rgba(212, 69, 27, 0.07); box-shadow: 0 0 0 6px rgba(212, 69, 27, 0.07); outline: 2px solid var(--accent); outline-offset: 6px; }
  100% { background: transparent; box-shadow: 0 0 0 6px transparent; outline: 2px solid transparent; outline-offset: 6px; }
}
.dv-qty .stepper:focus { outline: none; }
.dv-qty .stepper:focus-visible, .dv-qty.is-flash .stepper:focus { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* --- version 5: the Instant preview's CTA (qty.css .buy-row); the box photos after the price ---- */
.dv-flow { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s3); }
.dv-flow .buy-cta { min-height: 52px; font-size: var(--text-m); }
.dv-flow .volume-note { margin: 0; }
.dv-price { margin: 0; display: flex; align-items: baseline; justify-content: center; gap: var(--s3); flex-wrap: wrap; }
.dv-price .display { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); }
.dv-price-note { color: var(--ink-2); }
body.dv-5 .d-product { margin: var(--s4) 0 var(--s2); }

/* --- (a) the sticky Buy bar (phones) --------------------------------------------------------- */
.dv-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 10px var(--s5) calc(10px + var(--safe-bottom));
  background: rgba(251, 248, 242, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(40, 30, 10, 0.08);
  transition: translate var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.dv-sticky.is-away { translate: 0 110%; opacity: 0; pointer-events: none; }
.dv-sticky-t { display: flex; flex-direction: column; min-width: 0; }
.dv-sticky-t strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-sticky-t .tiny { color: var(--ink-3); }
.dv-sticky-btn { min-height: 48px; padding: 0 22px; white-space: nowrap; flex: 0 0 auto; }
body.has-dv-sticky .deck-screen { padding-bottom: calc(96px + var(--safe-bottom)); }

/* --- version 2: the live deck --------------------------------------------------------------- */
body.dv-2 .d-stage { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.dv-live {
  position: relative; margin: 0 calc(-1 * var(--s5)); aspect-ratio: 3 / 4; max-height: 78svh; width: calc(100% + 2 * var(--s5));
  overflow: hidden; background: var(--paper);
}
.dv-live canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.4s; }
.dv-live.live canvas { opacity: 1; }
.dv-live-poster, .dv-live-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.4s; }
.dv-live-video { opacity: 0; }
.dv-live.video .dv-live-video { opacity: 1; }
.dv-live.video .dv-live-poster, .dv-live.live .dv-live-poster { opacity: 0; }

@media (min-width: 1024px) {
  /* desktop: the same bar, centred, whenever the panel's Buy button is out of view */
  .dv-sticky { left: auto; right: max(24px, calc((100vw - 1180px) / 2)); bottom: 20px; width: min(480px, 44vw); border-radius: 18px;
    padding: 10px 12px 10px 22px; box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(40, 30, 10, 0.16); }
  .dv-sticky.is-away { translate: 0 160%; }
  body.dv .deck-screen {
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr; column-gap: 56px;
  }
  body.dv .d-head { grid-column: 1; grid-row: 2; padding-top: var(--s6); }
  .dv-product { grid-column: 1; grid-row: 3; margin: var(--s4) 0 var(--s2); }
  .dv-shot { border-radius: 14px; }
  .dv-product .d-shots-cap { padding: 0; }
  body.dv .d-actions { grid-column: 1; grid-row: 4; align-self: start; padding-top: var(--s3); }
  body.dv .d-stage { grid-column: 2; grid-row: 2 / span 4; align-self: start; padding-top: var(--s8); }
  .dv-live { margin: 0; width: 100%; aspect-ratio: 4 / 3; max-height: 80vh; border-radius: 16px; }
  .dv-shot, .dv-product-2 .dv-shot { aspect-ratio: 4 / 3; }   /* price and Buy above the fold */
  /* version 5, as on the Instant preview: title, Buy, then the box photos; the cards on the right */
  body.dv-5 .d-actions { grid-row: 3; }
  body.dv-5 .d-product { grid-column: 1; grid-row: 4; margin: var(--s2) 0 0; }
}
@media (prefers-reduced-motion: reduce) { .dv-qty.is-flash { animation: none; outline: 2px solid var(--accent); outline-offset: 6px; } .dv-sticky, .dv-live canvas, .dv-live-poster, .dv-live-video { transition: none; } }