/* ── ON THE WRIST (product page) ────────────────────────────
   wrist_lib.php writes the section, assets/wrist-view.js draws it. Copy and
   the fit chip's colours follow the prototype (tools/wrist-view/reference/);
   shapes and accent are the theme's: square corners, as every other control
   on the page.
   The view runs edge to edge on every screen: it steps out of the page's
   side padding (the theme's --t-gutter), and its overlays step back in to
   line up with the page's content. Its height is set here, before any script
   runs, so nothing below it moves: phones (under 600px) clamp(200px, 0.56 x
   width, 300px); wider, clamp(260px, 0.4 x width, 440px), but never wider
   than 3.6:1, so the hand still fits from top to bottom on a wide screen. */
.wv-section { margin-bottom: 44px; }
.wv-lead { margin: 0 0 16px; color: var(--ink2); font-size: 14px; line-height: 1.7; }
.wv {
    --wv-accent: var(--t-accent, #1D4ED8);
    --wv-gut: var(--t-gutter, 24px);
    display: flex; flex-direction: column; gap: 12px;
    color: #12161F;
}
.wv-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.wv-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wv-lbl { font-size: 14px; color: #4A5260; }

/* Segmented controls: Arm, and Zoom on the view */
.wv-seg { display: flex; border: 1px solid #CDD2DA; background: #FFFFFF; }
.wv-seg button {
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 0;
    background: #FFFFFF; color: #12161F; font: inherit; font-size: 15px; font-weight: 500; line-height: 1;
    cursor: pointer;
}
.wv-seg button[aria-pressed="true"] { background: var(--wv-accent); color: #FFFFFF; }
.wv-seg button:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }

/* Skin swatches */
.wv-skins { display: flex; gap: 8px; }
.wv-skin {
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(18, 22, 31, .18); cursor: pointer;
}
.wv-skin[aria-pressed="true"] { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--wv-accent); }
.wv-skin:focus-visible { outline: 2px solid #12161F; outline-offset: 6px; }

/* The view, edge to edge */
.wv-stage {
    position: relative;
    margin: 0 calc(-1 * var(--wv-gut));
    height: max(clamp(260px, 40vw, 440px), calc(100vw / 3.6));
    overflow: hidden; background: #E6E9EE;
}
.wv-stage canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.wv-stage canvas:focus-visible { outline: 2px solid var(--wv-accent); outline-offset: -4px; }
@media (max-width: 599.98px) {
    .wv-stage { height: clamp(200px, 56vw, 300px); }
}

/* Fit chip, top left, and zoom, bottom right, on the page's content edges */
.wv-chip {
    position: absolute; top: 12px; left: var(--wv-gut);
    display: flex; align-items: center; gap: 8px; padding: 8px 13px;
    font-size: 14px; font-weight: 600; line-height: 1.2; pointer-events: none;
    background: #DDEFE2; color: #175C2E;
}
.wv-chip[data-verdict="small"] { background: #E8EBF0; color: #2F3A4A; }
.wv-chip[data-verdict="bold"]  { background: #E2E9FC; color: #1C3D9E; }
.wv-chip[data-verdict="over"]  { background: #FCE7D6; color: #8A3A0A; }
.wv-mm { font-family: var(--t-font-m, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
.wv-zoom { position: absolute; right: var(--wv-gut); bottom: 12px; }
.wv-zoom button { padding: 0 16px; }

.wv-caption { margin: 0; font-size: 14px; line-height: 1.5; color: #5E6675; }

/* Phones and small tablets: centred, like the rest of the product page */
@media (max-width: 768px) {
    .wv-lead, .wv-caption { text-align: center; }
    .wv-controls { justify-content: center; }
}

/* The controls work once the script has taken the element over; until then
   they hold their space but are not shown */
ws-wrist-view:not(:defined) .wv-controls,
ws-wrist-view:not(:defined) .wv-zoom { visibility: hidden; }

/* ── On a watch card (assets/wrist-cards.js): over the photo, filling it,
   on the photo's plate; fades in once the arm is drawn ── */
.wv.wv-card { position: absolute; inset: 0; z-index: 1; display: block; opacity: 0; transition: opacity .3s ease; }
.wv.wv-card.is-drawn { opacity: 1; }
.wv-card .wv-stage { margin: 0; height: 100%; background: var(--t-plate, #F3F3F3); }
@media (prefers-reduced-motion: reduce) {
    .wv.wv-card { transition: none; }
}