/* ==========================================================================
   shop-360: the 360-degree viewer in the wine page's gallery well (inc/woo-360.php, turn.js).
   .dvh-turn covers the well; inside it the square clip (auto-turn) and the frame strip's image (drag) share
   one fit: same bottle height and baseline as the still (--turn-k: clip side and --turn-y: clip bottom, shares
   of the well height; --turn-x: the bottle's centre in the clip), edges faded into the well's house tint so no
   square edge shows. The clip carries its own soft shadow, so the well's contact shadow is off. Kit tokens only.
   ========================================================================== */
.dvh-gallery--turn .dvh-gallery__well::before { content: none; }
.dvh-turn { position: absolute; inset: 0; z-index: 1; }
/* drag viewer (turn.js adds .is-ready with role="slider"): horizontal drags turn the bottle, vertical ones scroll */
.dvh-turn.is-ready { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* nothing zooms inside the well (owner 2026-10-20: "zoom in still in the frame of the placeholder, shall zoom out of
   the placeholder in the center of the page"): the mouse on the bottle lifts it into the large view in the middle of
   the window (cards.js window.dvhLoupe); a tap or the magnifier opens it as a dialog. The well shows a grab hand. */
.dvh-turn.is-ready { cursor: grab; }
.dvh-turn.is-grabbing { cursor: grabbing; }
.dvh-turn:focus-visible { outline-offset: -4px; }   /* the well clips anything outside it */
.dvh-turn__video, .dvh-turn__frame {
  position: absolute; left: 50%; bottom: calc(var(--turn-y, .026) * 100%);
  display: block; height: calc(var(--turn-k, .904) * 100%); width: auto; max-width: none; aspect-ratio: 1;
  translate: calc(var(--turn-x, .5) * -100%) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
.dvh-turn__frame { pointer-events: none; -webkit-user-drag: none; }
.dvh-turn__frame[hidden] { display: none; }
/* "↔ Trageți pentru a roti": a chip between the play/pause and zoom buttons while the bottle stands still, in the
   gap under the bottle: its top stays at least 6 px below the bottle's foot (--turn-foot: the foot's height in
   the well, the still's fit), so it never covers the bottle on any screen */
.dvh-turn__hint {
  position: absolute; left: 50%; bottom: max(4px, calc(var(--turn-foot, .086) * 100% - 30px)); z-index: 2; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; margin: 0; padding: 2px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
  font-size: var(--fs-eyebrow); line-height: 16px; font-weight: var(--fw-ui); color: var(--ink); white-space: nowrap; pointer-events: none;
}
.dvh-turn__hint[hidden] { display: none; }
/* play/pause of the auto-turn, mirroring the zoom button in the well's other bottom corner (WCAG 2.2.2, 44 px target) */
.dvh-turn__toggle {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3); z-index: 2;
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-control); cursor: pointer;
}
.dvh-turn__toggle[hidden] { display: none; }
.dvh-turn__toggle:hover { border-color: var(--ink); }
.dvh-turn__toggle svg { width: 16px; height: 16px; fill: currentColor; }
.dvh-turn__toggle [data-icon="play"], .dvh-turn__toggle[aria-pressed="false"] [data-icon="pause"] { display: none; }
.dvh-turn__toggle[aria-pressed="false"] [data-icon="play"] { display: block; }