/* =========================================================================
   DTA Storefront — the product page
   =========================================================================

   Implements variant A2 across the five archetypes. Loaded only on single
   product pages, after archive.css, which already defines the tokens, the
   breadcrumb and the card grid this file leans on.

   MOCKUP CLASS  ->  THEME CLASS
   .record          .dta-product__record
   .covers          .dta-product__covers
   .cover-pair      .dta-product__cover-stack
   .info            .dta-product__info  (also .summary, which WooCommerce and
                                         OceanWP both target — see the template)
   .series-line     .dta-product__series
   h1.product-title .dta-product__title
   .buy             .dta-product__buy
   .grade / .cgc    .dta-product__grade / .dta-product__grade--cgc
   .about           .dta-product__about
   .specs           .dta-product__specs
   .siblings        .dta-product__siblings
   .issue-row       .dta-product__row
   .issue           .dta-product__card
   .axes            .dta-product__axes
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. THE ROW
   ------------------------------------------------------------------------
   The theme sidebar is removed in inc/layout.php rather than by forcing
   full-width, so #primary is still narrowed for a sidebar that is not there.
   This widens it back out — the same two moves archive.css already makes, and
   copied from it deliberately rather than written again.

   THE FIRST VERSION PUT max-width:100% ON #content-wrap.container AND THAT WAS
   THE BUG. `.container` is what caps the row at --page-max and centres it with
   `margin: 0 auto`; overriding its max-width removed the cap, so the row filled
   the viewport, the grid's two columns sat at the left of a 1900px row, and the
   page read as left-aligned with a third of the screen empty. The container is
   not what needs widening. #primary is — it is the element OceanWP narrows to
   leave room for the sidebar. Touch that and the container keeps doing its job.
   ---------------------------------------------------------------------- */

body.single-product #content-wrap {
  display: block;
}

body.single-product #primary.content-area {
  width: 100%;
  max-width: none;
  float: none;
  margin-left: 0;
  margin-right: 0;
}

body.single-product #content.site-content {
  padding-bottom: var(--s-6);
}

/* Same reasoning as archive.css: the mockups get border-box from a global reset
   that is not ported, and the cover images are width:100% plus a 1px border. */
.dta-product,
.dta-product *,
.dta-product *::before,
.dta-product *::after { box-sizing: border-box; }

body.single-product .dta-product {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--c-text);
}

.dta-product__record {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

/* -------------------------------------------------------------------------
   2. COVERS
   ---------------------------------------------------------------------- */

.dta-product__covers { max-width: 400px; }

.dta-product__cover-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

.dta-product__cover-stack figure { margin: 0; }

.dta-product__cover-stack img {
  border: 1px solid var(--c-border);
  background: var(--c-surface-sunk);
  width: 100%;
  height: auto;
}

.dta-product__cover-stack figcaption {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  padding-top: var(--s-2);
  color: var(--c-text);
}

/* Each cover is a link to its own full-size file. Block, so the whole image is
   the target rather than a line box around it. */
.dta-product__zoom {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}

.dta-product__zoom img { transition: opacity .12s ease-out; }
.dta-product__zoom:hover img { opacity: .92; }

/* The focus ring goes on the link, so a keyboard user can see which cover they
   are about to open. Offset outward so it does not sit on the image border. */
.dta-product__zoom:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* The action, on its own line under the caption. It is a real link to the same
   file as the image above it — it read as plain text before, because a
   figcaption cannot sit inside the anchor wrapping the image, so the words said
   "view full size" and did nothing. Its own line because it is a different kind
   of thing from "Front — this copy", and running the two together reads as one
   sentence that changes subject halfway. */
.dta-product__cover-stack figcaption .dta-product__zoom-text {
  display: block;
  color: var(--c-border-focus);
  text-decoration: none;
  cursor: zoom-in;
}

.dta-product__cover-stack figure:hover figcaption .dta-product__zoom-text,
.dta-product__cover-stack figcaption .dta-product__zoom-text:hover,
.dta-product__zoom:focus-visible + figcaption .dta-product__zoom-text { color: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .dta-product__zoom img { transition: none; }
}

/* -------------------------------------------------------------------------
   3. IDENTITY — series line and heading
   ---------------------------------------------------------------------- */

.dta-product__series {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--s-3);
  margin-bottom: var(--s-4);
}

.dta-product__series a,
.dta-product__series .name {
  font-weight: var(--w-semibold);
  font-size: var(--t-md);
  color: var(--c-text-strong);
  text-decoration: none;
  display: block;
  line-height: var(--lh-tight);
}

.dta-product__series a:hover { color: var(--c-accent); }

.dta-product__series .count {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  display: block;
  margin-top: 2px;
}

.dta-product__title {
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
  font-feature-settings: var(--num-tabular);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-border);
}

/* Previous and next in the run, labelled with where they go.
   Replaces OceanWP's two bare chevrons, which navigated by post ID. The labels
   are the point: on a title with 1,109 copies an unlabelled arrow says nothing
   about its destination even when the order is right. */
.dta-product__runnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: calc(var(--s-5) * -1 + var(--s-2)) 0 var(--s-5);
  font-feature-settings: var(--num-tabular);
}

/* The whole-run link is pushed to the end of the row so the two directional
   links stay adjacent and read as a pair rather than as three equal choices. */
.dta-product__runnav .all { margin-left: auto; }

@media (max-width: 520px) {
  .dta-product__runnav .all { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   4. BUY
   ------------------------------------------------------------------------
   The wrapper is opened at priority 8 and closed at 31, with WooCommerce's own
   add-to-cart form at 30 inside it — so the selectors below have to survive
   whatever that form contains rather than assuming our own markup.
   ---------------------------------------------------------------------- */

.dta-product__buy { margin-bottom: var(--s-6); }

/* WooCommerce nests its own <span class="amount"> inside ours, and OceanWP
   colours that green — which is its sale-price colour, not a token in this
   palette. The mockup's price is --c-text-strong, so the colour is set on the
   inner element too rather than only on the wrapper it was being inherited
   through. */
.dta-product__buy .price,
.dta-product__buy .price .amount,
.dta-product__buy .price .woocommerce-Price-amount,
.dta-product__buy .price .woocommerce-Price-currencySymbol {
  color: var(--c-text-strong);
}

.dta-product__buy .price {
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--c-text-strong);
  line-height: 1;
  font-feature-settings: var(--num-tabular);
  display: block;
  margin-bottom: var(--s-4);
}

/* WooCommerce prints a <del>/<ins> pair when a sale price is set. */
.dta-product__buy .price del { opacity: .55; font-weight: 400; }
.dta-product__buy .price ins { text-decoration: none; }

.dta-product__buy form.cart { margin: 0; }

.dta-product__buy .quantity { display: inline-block; margin-right: var(--s-3); }

.dta-product__buy button[type="submit"],
.dta-product__buy .single_add_to_cart_button {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  font-family: var(--f-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-base);
  border: 0;
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-6);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}

.dta-product__buy button[type="submit"]:hover,
.dta-product__buy .single_add_to_cart_button:hover {
  background: var(--c-accent-hover);
  color: #fff;
}

/* Stock notice, from WooCommerce's own add-to-cart template. Not a sold badge:
   sold stock does not reach this page at all — the buy block is not rendered. */
.dta-product__buy .stock {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: var(--s-3) 0 0;
}

.dta-product__buy .ship {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: var(--s-3) 0 0;
  color: var(--c-text);
}

/* -------------------------------------------------------------------------
   5. GRADE
   ------------------------------------------------------------------------
   A fixed reference, identical on every page: seven majors, and a pointer at
   the position of the actual grade.

   THE POINTER REPLACED LIT CELLS. Lighting the cell for the grade meant a split
   grade lit two of them — VF/NM lit VF and NM, which reads as a copy that is
   somehow both. The slash forms are 26,895 copies in stock, more than Very
   Fine, so that is the common case rather than an edge one. Seven fixed cells
   also stay scannable across all 47 distinct condition values in the catalogue,
   which a cell-per-grade bar could not.

   The mark's left offset is inline, computed by dta_grade_offset() — a position
   that varies per product cannot live in a stylesheet.
   ---------------------------------------------------------------------- */

.dta-product__grade {
  border: 1px solid var(--c-border);
  padding: var(--s-4);
  margin-bottom: var(--s-6);
  background: var(--c-surface-sunk);
}

.dta-product__grade .grade-top {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.dta-product__grade .grade-code {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--c-text-strong);
}

.dta-product__grade .grade-name {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

/* The bar is the positioning context for the mark. Padding at the top is the
   mark's own height, so the scale does not shift when a grade cannot be placed
   and the bar is not drawn at all. */
.dta-product__grade .grade-bar {
  position: relative;
  padding-top: 10px;
}

.dta-product__grade .grade-bar__scale {
  display: flex;
  gap: 1px;
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
}

.dta-product__grade .grade-bar__scale span {
  flex: 1;
  text-align: center;
  padding: var(--s-1) 0;
  background: var(--c-muted);
  color: var(--c-text);
  min-width: 0;
}

/* A triangle pointing down at the scale. translateX(-50%) puts its apex on the
   computed offset rather than its left edge, so the arithmetic in
   dta_grade_offset() is about the point of the mark and not about its width. */
.dta-product__grade .grade-bar__mark {
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--c-accent);
}

.dta-product__grade .grade-link {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: var(--s-3) 0 0;
}

/* The slab keeps its own numeric scale with a lit cell, and deliberately: a CGC
   grade is a single decimal on a published ten-point scale, so it lands on
   exactly one cell and the objection that produced the pointer does not arise.
   Collectors read 9.6 on that scale, not as a position between VF and NM. */
.dta-product__grade .scale {
  display: flex;
  gap: 1px;
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
}

.dta-product__grade .scale span {
  flex: 1;
  text-align: center;
  padding: var(--s-1) 0;
  background: var(--c-muted);
  color: var(--c-text);
  min-width: 0;
}

.dta-product__grade .scale span.here {
  background: var(--c-dark);
  color: #fff;
  font-weight: var(--w-semibold);
}

/* The slab's certification line. */
.dta-product__grade .cert {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: var(--s-3) 0 0;
}

.dta-product__grade .cert b {
  color: var(--c-text-strong);
  font-feature-settings: var(--num-tabular);
}

/* -------------------------------------------------------------------------
   6. DESCRIPTION AND DETAILS
   ------------------------------------------------------------------------
   The description is the one field here not written for this layout, so it is
   the one block whose inner markup cannot be predicted. Everything below binds
   to elements rather than to classes for that reason.
   ---------------------------------------------------------------------- */

.dta-product__about {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-border);
}

.dta-product__about h2,
.dta-product__specs h2,
.dta-product__siblings h2 {
  font-size: var(--t-md);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-3);
  line-height: var(--lh-tight);
}

.dta-product__about .about-body { max-width: 60ch; }
.dta-product__about .about-body p { margin: 0 0 var(--s-3); }
.dta-product__about .about-body p:last-child { margin-bottom: 0; }
.dta-product__about .about-body ul { margin: 0 0 var(--s-3); padding-left: var(--s-4); }
.dta-product__about .about-body li { margin-bottom: var(--s-1); }
.dta-product__about .about-body strong { color: var(--c-text-strong); font-weight: var(--w-semibold); }

/* An importer artefact that survives the cleaner: a heading deeper in the
   description. Demoted visually so it cannot outrank the block's own h2. */
.dta-product__about .about-body h1,
.dta-product__about .about-body h2,
.dta-product__about .about-body h3,
.dta-product__about .about-body h4 {
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  margin: var(--s-4) 0 var(--s-2);
}

.dta-product__about .about-body img { border: 1px solid var(--c-border); }

.dta-product__specs table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

.dta-product__specs th,
.dta-product__specs td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--c-border);
}

.dta-product__specs th { font-weight: 400; color: var(--c-text); width: 11rem; }

.dta-product__specs td {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  font-feature-settings: var(--num-tabular);
}

.dta-product__specs td a {
  color: var(--c-text-strong);
  text-decoration: underline;
  text-decoration-color: var(--c-border-focus);
}

.dta-product__specs td a:hover { color: var(--c-accent); text-decoration-color: var(--c-accent); }

.dta-product__specs tr:last-child th,
.dta-product__specs tr:last-child td { border-bottom: 0; }

.dta-product__specs .specs-note {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  color: var(--c-dark-mid);
  max-width: 60ch;
  margin: var(--s-3) 0 0;
}

/* -------------------------------------------------------------------------
   7. RELATIONSHIPS
   ------------------------------------------------------------------------
   Full width beneath the record. These do the work prose was doing, so a row
   that would render empty renders nothing at all instead — the heading is
   printed by the same function that prints the cards, never separately.
   ---------------------------------------------------------------------- */

.dta-product__siblings {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

.dta-product__siblings h2 { margin-top: var(--s-6); }
.dta-product__siblings h2:first-child { margin-top: 0; }

.dta-product__siblings .lead {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-5);
  max-width: 66ch;
}

.dta-product__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.dta-product__card { text-decoration: none; display: block; }

.dta-product__card img {
  border: 1px solid var(--c-border);
  background: var(--c-surface-sunk);
  margin-bottom: var(--s-2);
  width: 100%;
  height: auto;
}

.dta-product__card .n {
  font-weight: var(--w-semibold);
  font-size: var(--t-sm);
  color: var(--c-text-strong);
  display: block;
  line-height: var(--lh-snug);
  font-feature-settings: var(--num-tabular);
}

.dta-product__card .m {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  color: var(--c-text);
  display: block;
  font-feature-settings: var(--num-tabular);
}

.dta-product__card:hover .n { color: var(--c-accent); }

/* Pure taxonomy links. The cheapest block on the page. */
.dta-product__axes {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  border-top: 1px solid var(--c-border);
  padding-top: var(--s-5);
}

.dta-product__axes div { margin-bottom: var(--s-3); }

.dta-product__axes b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  display: inline-block;
  min-width: 9rem;
}

.dta-product__axes a { margin-right: var(--s-3); }

/* -------------------------------------------------------------------------
   8. NARROW
   ---------------------------------------------------------------------- */

@media (max-width: 860px) {
  .dta-product__record { grid-template-columns: 1fr; gap: var(--s-6); }
  .dta-product__covers { max-width: 340px; margin: 0 auto; }
  .dta-product__title { font-size: var(--t-lg); }
  .dta-product__axes b { display: block; min-width: 0; }
  .dta-product__specs th { width: 8rem; }
}