/* ============================================================================
   Stock — tree view, single-item detail pane
   ----------------------------------------------------------------------------
   The tree now selects ONE block at a time (`data-slab-group` is a block id, not
   a product), so the right pane holds a single item rather than a grid of them.
   A 190px card had to stack a 130px image over every attribute, which forced the
   whole spec set into an 11–12px wrapped run and left most of the pane empty.

   Here the item is a two-column figure: media on the left, attributes on the
   right at readable sizes, using the shared `.spec-list` pairing (label right,
   value left, tight) so this pane matches every other detail surface.
   ========================================================================== */

/* The media column is capped BOTH in px and as a share of the pane. A bare
   `minmax(280px, 440px)` starves the facts column, because this pane is not the
   viewport — the tree nav takes 300px first, so at a 1024px viewport the pane is
   ~487px and the facts column was left with 21px. The `min()` makes the media give
   ground as the pane narrows; below 1200px the two columns stack outright. */
.itm-view {
  display: grid;
  grid-template-columns: minmax(240px, min(440px, 42%)) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* ---- media: one stage plus a reel of up to 4 photos and 2 videos ---------- */
.itm-stage {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  overflow: hidden;
  background: var(--color-surface-alt);
}
/* `cover`, not `contain`: these are photographs of physical stock, and letterboxing
   a block against blank card leaves the frame reading as an error state. */
.itm-stage__img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}
/* Stock carries one photo per product type and one per material, so the later
   slots re-show those two. The modifiers make them read as further angles rather
   than as the same file pasted twice; they come off when real per-item
   photography lands and each slot has its own source. */
.itm-stage__img.is-flip,
.itm-shot img.is-flip { transform: scaleX(-1); }
.itm-stage__img.is-zoom,
.itm-shot img.is-zoom { transform: scale(1.6); }
.itm-stage__img.is-zoom { transform-origin: 62% 38%; }
/* The caption rides a scrim rather than a solid bar: over a real photograph a
   bar would crop the image, while the scrim only darkens what sits under text. */
.itm-stage__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 10px 7px;
  font-size: 11px; color: #fff;
  background: linear-gradient(to top, rgba(15, 23, 42, .74), rgba(15, 23, 42, 0));
}
.itm-stage__play {
  display: none;
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(15, 23, 42, .55);
  color: #fff;
  align-items: center; justify-content: center;
}
.itm-stage.is-video .itm-stage__play { display: inline-flex; }
/* Filled, not stroked: at these sizes an outlined triangle reads as a cursor. */
.itm-stage__play svg { width: 24px; height: 24px; fill: currentColor; }

/* The reel holds up to six items (4 photos + 2 videos) and must stay on ONE row at
   any count — they share the width instead of taking a fixed one, so a two-photo
   block doesn't leave a ragged gap and a six-item block doesn't wrap. */
.itm-reel { display: flex; gap: 6px; margin-top: 8px; }
.itm-shot {
  position: relative;
  flex: 1 1 0; min-width: 0; max-width: 76px;
  padding: 0; line-height: 0;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
}
.itm-shot img { display: block; width: 100%; height: 44px; object-fit: cover; }
.itm-shot:hover { border-color: var(--color-primary); }
.itm-shot.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-50); }
/* Video thumbs read as video before the icon is parsed: the wash is what tells
   them apart at a glance, the glyph and duration confirm it. */
.itm-shot--video::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .30); }
.itm-shot > svg { position: absolute; inset: 0; margin: auto; z-index: 1; width: 16px; height: 16px; color: #fff; fill: currentColor; }
.itm-shot__len {
  position: absolute; right: 3px; bottom: 3px; z-index: 1;
  padding: 0 3px;
  font-size: 10px; line-height: 1.5; color: #fff;
  background: rgba(15, 23, 42, .78);
  border-radius: 3px;
}

/* ---- attributes ---------------------------------------------------------- */
.itm-facts__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.itm-facts__head .btn { margin-left: auto; }
/* One step up from the shared .spec-list (12/13) — this is the pane's primary
   content, not a summary strip, and 14px is the top of the type ladder. */
.itm-spec { gap: 15px 12px; }
.itm-spec dd { font-size: 14px; }
.itm-spec dd.itm-spec__val { font-size: 15px; font-weight: 700; color: var(--color-primary-700); }

@media (max-width: 1200px) {
  .itm-view { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .itm-stage__img { height: 220px; }
}