/* Product detail page (Sprint 10) ──────────────────────────────
   hardgraft's split (references/hardgraft.md): a gapless two-column square
   gallery that scrolls with the page, beside a panel that stays put. Below
   1024 the panel follows the gallery's first row, not the whole gallery
   (contract line 11), so the buy control is never under every photograph.
   Every value from a token; the panel's type is the grid's. */

.product {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--sc-p-space-64);
  align-items: start;
  padding-block: calc(var(--sc-p-space-96) + var(--sc-p-space-32)) var(--sc-p-space-120);
}

/* gallery ─────────────────────────────────────────────────────── */

.product__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.product__cell {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
}

/* A gallery of one cell (the model, until photographs land) spans both
   columns at the tile's 4:3 instead of leaving an empty square beside it. */
.product__cell--solo {
  grid-column: 1 / -1;
  aspect-ratio: var(--sc-work-visual-aspect);
}

.product__still,
.product__viewer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product__viewer { cursor: grab; touch-action: pan-y; }
.product__viewer[data-grabbing] { cursor: grabbing; }

.product__cell[data-viewer-ready] .product__still { visibility: hidden; }

.product__viewer:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: calc(-1 * var(--sc-border-width-focus));
}

/* panel ───────────────────────────────────────────────────────── */

.product__panel {
  position: sticky;
  top: calc(var(--sc-p-space-96) + var(--sc-p-space-8));
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-16);
  color: var(--sc-color-text-primary);
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-16);
  line-height: var(--sc-p-font-line-height-base);
}

.product__title {
  margin: 0;
  font-family: var(--sc-p-font-family-sans);
  font-size: var(--sc-p-font-size-24);
  font-weight: var(--sc-p-font-weight-medium);
  line-height: var(--sc-p-font-line-height-snug);
}

.product__variant-name { font-weight: var(--sc-p-font-weight-regular); }

.product__price {
  margin: 0;
  color: var(--sc-color-text-primary);
}

/* variant selector: native radios, five states ─────────────────── */

.product__variants {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-p-space-8) var(--sc-p-space-24);
}

.product__legend {
  padding: 0;
  margin-block-end: var(--sc-p-space-8);
  font-size: var(--sc-p-font-size-14);
  color: var(--sc-color-text-secondary);
}

.variant {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: var(--sc-p-space-48);  /* 44 x 44 hit area at every width (Evaluator finding 3) */
  min-height: var(--sc-p-space-48);
  cursor: pointer;
}

.variant__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* default: secondary ink; checked: primary ink, underlined (the text tab's
   language from the reference) */
.variant__label {
  color: var(--sc-color-text-secondary);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--sc-p-space-micro-2);
  transition:
    color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
    background-size var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}

.variant:hover .variant__label { color: var(--sc-color-text-primary); }

.variant__input:checked + .variant__label {
  color: var(--sc-color-text-primary);
  background-size: 100% var(--sc-p-space-micro-2);
}

.variant__input:focus-visible + .variant__label {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
  border-radius: var(--sc-radius-control);
}

.variant:active .variant__label { color: var(--sc-color-text-primary); }

.variant__input:disabled + .variant__label { color: var(--sc-color-text-disabled); cursor: default; }

/* buy control: full-width, five states ──────────────────────────
   default  inverse ground, inverse ink
   hover    the label underlines (ink and ground keep their contrast)
   focus    ring
   active   press
   disabled aria-disabled: sunk surface, secondary ink, no hover or
            press response (below) */

.product__buy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sc-p-space-48);
  padding-inline: var(--sc-p-space-24);
  background: var(--sc-color-surface-inverse);
  color: var(--sc-color-text-on-inverse);
  font-weight: var(--sc-p-font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
    transform var(--sc-motion-press-release-duration) var(--sc-motion-press-release-easing);
}

.product__buy:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--sc-p-space-micro-2);
  text-underline-offset: var(--sc-p-space-4);
}

.product__buy:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
}

.product__buy:active {
  transform: scale(var(--sc-motion-press-scale));
  transition: transform var(--sc-motion-press-duration) var(--sc-motion-press-easing);
}

/* Disabled (Evaluator findings 2 and 4): a filled, sunk block in quiet
   ink, the same shape as the live control, and no answer to hover or press.
   Not a stroke-only box: that is "ghost/outline button" on the blocklist.
   Owner rules on the preview. */
.product__buy[aria-disabled="true"],
.product__buy[aria-disabled="true"]:hover,
.product__buy[aria-disabled="true"]:active {
  background: var(--sc-color-surface-sunk);
  color: var(--sc-color-text-secondary);
  text-decoration: none;
  cursor: not-allowed;
  transform: none;
}

.product__buy-note {
  margin: 0;
  font-size: var(--sc-p-font-size-14);
  color: var(--sc-color-text-secondary);
}

.product__mail {
  color: var(--sc-color-text-primary);
  text-underline-offset: var(--sc-p-space-micro-2);
}

.product__mail:hover { text-decoration-thickness: var(--sc-p-space-micro-2); }

.product__mail:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
}

/* tabs: text tabs, underlined when selected ─────────────────── */

.tabs { margin-block-start: var(--sc-p-space-16); }

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-p-space-24);
}

.tabs__tab {
  min-height: var(--sc-p-space-48);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--sc-p-font-size-14);
  color: var(--sc-color-text-secondary);
  cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 85%;
  background-size: 0% var(--sc-p-space-micro-2);
  transition:
    color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing),
    background-size var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}

.tabs__tab:hover { color: var(--sc-color-text-primary); }

.tabs__tab[aria-selected="true"] {
  color: var(--sc-color-text-primary);
  background-size: 100% var(--sc-p-space-micro-2);
}

.tabs__tab:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
  border-radius: var(--sc-radius-control);
}

.tabs__tab:active { color: var(--sc-color-text-primary); }

.tabs__panel {
  padding-block-start: var(--sc-p-space-16);
  max-width: 34rem;
}

.tabs__panel:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
}

.tabs__panel p,
.product__facts { margin: 0 0 var(--sc-p-space-16); }

.product__lede { font-weight: var(--sc-p-font-weight-medium); }

.product__facts {
  padding-inline-start: var(--sc-p-space-16);
  color: var(--sc-color-text-primary);
}

.product__facts li + li { margin-block-start: var(--sc-p-space-4); }

.product__dims { color: var(--sc-color-text-secondary); }

.product__subhead {
  margin: 0 0 var(--sc-p-space-4);
  font-size: var(--sc-p-font-size-14);
  font-weight: var(--sc-p-font-weight-medium);
  color: var(--sc-color-text-primary);
}

/* below 1024: one column, panel after the gallery's first row ─── */

@media (max-width: 1023px) {
  .product {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sc-p-space-32);
    padding-block-start: calc(var(--sc-p-space-80) + var(--sc-p-space-16));
  }
  /* The gallery's cells join the page grid so the panel can sit between
     the first row and the rest. */
  .product__gallery { display: contents; }
  .product__cell { grid-column: auto; }
  .product__cell:nth-child(-n + 2) { order: 0; }
  .product__panel { order: 1; position: static; }
  .product__cell:nth-child(n + 3) { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .variant__label,
  .tabs__tab,
  .product__buy,
  .product__buy:active { transition: none; transform: none; }
}

/* digital detail: the hybrid top (Sprint 10, contract line 8) ─────
   Same split as the woodworking page; the panel lists role, timeline,
   platform, status, and links into the long-form story below. */

.product__still--cover { object-fit: cover; }

.product__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--sc-color-surface-page);
}

.product__cell--clip { aspect-ratio: var(--sc-work-visual-aspect); grid-column: 1 / -1; }

.product__facts-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-p-space-12);
}

.product__fact { display: flex; flex-direction: column; gap: var(--sc-p-space-4); }

.product__fact dt {
  font-size: var(--sc-p-font-size-14);
  color: var(--sc-color-text-secondary);
}

.product__fact dd { margin: 0; color: var(--sc-color-text-primary); }

.product__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--sc-p-space-48);
  color: var(--sc-color-text-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--sc-p-space-micro-2);
  text-underline-offset: var(--sc-p-space-4);
  transition: color var(--sc-motion-hover-duration) var(--sc-motion-hover-easing);
}

.product__more:hover { color: var(--sc-color-text-secondary); }

.product__more:focus-visible {
  outline: var(--sc-border-width-focus) solid var(--sc-color-border-focus);
  outline-offset: var(--sc-border-focus-offset);
  border-radius: var(--sc-radius-control);
}

.product__more:active { color: var(--sc-color-text-secondary); transform: scale(var(--sc-motion-press-scale)); }

@media (prefers-reduced-motion: reduce) {
  .product__more, .product__more:active { transition: none; transform: none; }
}