/* =============================================================================
   64-specs.css — THE PROVENANCE PLATE
   -----------------------------------------------------------------------------
   Every product in this catalogue arrives from the source as one unbroken run
   of "【Name】… 【Place of Origin】… 【Capacity】…". functions.php splits that into
   a <dl class="product-specs"> of label/value rows. It worked, but it read as a
   browser-default definition list parked under the price.

   This turns it into the object a maker's workshop would actually hand you:

     ─── PROVENANCE ─────────────────────────────────── FIELDS · 07
       NAME                 Flowers Bloom Master Tea Cup Gift Set   <- Fraunces
       PLACE OF ORIGIN      Yixing City, Jiangsu, China
       SURFACE CRAFTSMANSHIP  Hand-painted
     ─── DETAIL ───────────────────────────────────────────────────
       CAPACITY             200-250cc ±5cc                          <- Inter
       STYLE/CAPACITY/SIZE  01  Peony Cup-Duan/Purple clay …
                            02  Plum Blossom Cup-Duan/Cyan clay …
     ─── THE MAKER'S NOTE ─────────────────────────────────────────
       This tea cup set is fully handmade with fine workmanship…    <- Fraunces

   Three ideas carry it, and nothing else is allowed in:

   1  SUMMARY, THEN DETAIL.  The first three fields are what a buyer is actually
      asking — what is it, where is it from, how was its surface made. They are
      set in Fraunces at reading size in full ink. Everything after them is
      reference data in Inter at 0.875rem. One rule, carrying the legend DETAIL,
      marks the step down. The split is positional, so it holds for all 581
      products whatever order their fields were scraped in.

   2  A LEGEND SET INTO THE RULE.  DETAIL and THE MAKER'S NOTE are not headings
      above a rule; they sit ON the hairline and paint the page ground behind
      themselves, so the rule appears to run through them. That is why the plate
      reads engraved rather than boxed, and it costs one border and one
      pseudo-element instead of a component.

   3  COUNTERS DO THE ARITHMETIC.  "FIELDS · 07" and the 01/02/03 enumeration of
      a repeated Style/Capacity/Size row are CSS counters — no PHP, no JS, and
      correct for a product with three fields or thirty.

   ── SHARED EDGE WITH 62-buybox.css ───────────────────────────────────────────
   The buy column places this block in its grid (grid-row 10 / column 1 / -1)
   and nothing here touches that placement. It briefly carried a kicker of its
   own and has since handed the whole block over, so the plate now supplies its
   own header. Every rule below is written at
   `.single-product-page .product-info …` — the same specificity 62-buybox uses,
   winning only on load order — so neither file has to escalate. A leftover
   ≤480px rule of theirs still targets this block's ::before; §5 neutralises it
   rather than leaving a 42px indent inside the legend's knockout.

   Loads after main.css, so it carries its own media queries.
   ========================================================================== */

.single-product-page,
.single-product-page .sp-tab-body {
  /* Warm paper hairlines, mixed from --ink so the plate belongs to the same
     object as the hero's chrome rather than to the cold grey --color-border. */
  --spec-hair:    color-mix(in srgb, var(--ink) 11%, transparent);
  --spec-hair-2:  color-mix(in srgb, var(--ink) 20%, transparent);
  --spec-legend:  var(--color-text-muted);
  --spec-label-w: 10.5rem;
  --spec-gap:     clamp(16px, 1.9vw, 26px);
}


/* =============================================================================
   1. THE PLATE
   ========================================================================== */

.single-product-page .product-info .product-short-desc {
  position: relative;
  margin: clamp(30px, 3.2vw, 46px) 0 0;
  padding-top: clamp(26px, 2.6vw, 34px);
  border-top: 1px solid var(--spec-hair-2);
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* The plate's own legend. It sits ON the top rule and paints the page ground
   behind itself, so the hairline appears to run through it — the same gesture
   DETAIL and THE MAKER'S NOTE make further down, which is what makes the three
   read as one engraved object. */
.single-product-page .product-info .product-short-desc::before {
  content: "PROVENANCE";
  position: absolute;
  top: 0;
  /* The hero's signature is a 34x1px rule and THEN the label. Here the rule is
     the plate's own hairline, so the legend is inset past its first 34px and
     the knockout hides the 13px of gutter on either side of the word. */
  left: 34px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 13px;
  background: var(--color-bg);
  background-image: none;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spec-legend);
}

/* The right-hand counterweight, on the same rule. Every header band on this
   site balances its left-hand lockup with something on the right; an empty
   right half has been a repeated rejection. A counter resolves the value, so
   it is correct for all 581 products. */
.single-product-page .product-info .product-short-desc .product-specs::after {
  content: "FIELDS · " counter(spec, decimal-leading-zero);
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  padding-left: 13px;
  background: var(--color-bg);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.15em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text-muted) 72%, transparent);
}

/* Loose prose that arrived before the first 【label】. */
.single-product-page .product-info .product-short-desc > p:first-of-type:not(.product-spec-prose) {
  margin: 0 0 var(--space-5);
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text-light);
}


/* =============================================================================
   2. THE ROWS — tabular alignment, hairline rules, nothing else
   ========================================================================== */

.single-product-page .product-info .product-specs,
.single-product-page .sp-tab-body .product-specs,
.product-specs {
  counter-reset: spec;
  margin: 0;
  padding: 0;
  border-top: 0;                 /* the plate's own top rule carries the legend */
}

.single-product-page .product-info .product-spec,
.single-product-page .sp-tab-body .product-spec,
.product-spec {
  counter-increment: spec;
  display: grid;
  grid-template-columns: minmax(0, var(--spec-label-w)) minmax(0, 1fr);
  column-gap: var(--spec-gap);
  row-gap: 0;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--spec-hair);
}

.single-product-page .product-info .product-spec:last-of-type,
.single-product-page .sp-tab-body .product-spec:last-of-type,
.product-spec:last-of-type { border-bottom: 0; }

.single-product-page .product-info .product-spec dt,
.single-product-page .sp-tab-body .product-spec dt,
.product-spec dt {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--spec-legend);
  /* break-word, not anywhere: a label like STYLE/CAPACITY/SIZE stays whole
     while it fits its track, and only splits if the track cannot hold it. */
  overflow-wrap: break-word;
}

.single-product-page .product-info .product-spec dd,
.single-product-page .sp-tab-body .product-spec dd,
.product-spec dd {
  counter-reset: variant;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.004em;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.product-spec dd > span { display: block; }


/* --- The provenance summary: the first three fields ------------------------
   What it is, where it came from, how its surface was made. Set at reading
   size in the display serif in full ink — the only three lines in the plate a
   buyer reads rather than checks. */

.single-product-page .product-info .product-spec:nth-child(-n+3),
.single-product-page .sp-tab-body .product-spec:nth-child(-n+3),
.product-spec:nth-child(-n+3) { padding: 15px 0; }

.single-product-page .product-info .product-spec:nth-child(-n+3) dd,
.single-product-page .sp-tab-body .product-spec:nth-child(-n+3) dd,
.product-spec:nth-child(-n+3) dd {
  font-family: var(--font-heading);
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--color-dark);
}


/* --- The step down to reference data ---------------------------------------
   One rule, carrying its own legend, between the summary and the detail. */

.single-product-page .product-info .product-spec:nth-child(4),
.single-product-page .sp-tab-body .product-spec:nth-child(4),
.product-spec:nth-child(4) {
  position: relative;
  margin-top: clamp(24px, 2.5vw, 32px);
  padding-top: clamp(24px, 2.5vw, 32px);
  border-top: 1px solid var(--spec-hair-2);
}

.single-product-page .product-info .product-spec:nth-child(4)::before,
.single-product-page .sp-tab-body .product-spec:nth-child(4)::before,
.product-spec:nth-child(4)::before {
  content: "DETAIL";
  position: absolute;
  top: 0;
  left: 34px;
  transform: translateY(-50%);
  padding: 0 13px;
  background: var(--color-bg);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spec-legend);
}


/* --- Repeated fields --------------------------------------------------------
   Four sizes of the same cup arrive as four "Style/Capacity/Size" rows and are
   grouped by the formatter into one <dd>. They become a numbered sub-list; the
   :has() guard keeps the numerals off single-value rows, and a browser without
   :has() simply gets the plain stack it has today. */

.single-product-page .product-info .product-spec dd .product-spec-alt,
.single-product-page .sp-tab-body .product-spec dd .product-spec-alt,
.product-spec dd .product-spec-alt {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--spec-hair);
  color: var(--color-text);
}

.product-spec dd:has(.product-spec-alt) > span {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  align-items: baseline;
  counter-increment: variant;
}

.product-spec dd:has(.product-spec-alt) > span::before {
  content: counter(variant, decimal-leading-zero);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
}


/* =============================================================================
   3. THE MAKER'S NOTE — the 【Introduction】 block
   ========================================================================== */

.single-product-page .product-info .product-spec-prose,
.single-product-page .sp-tab-body .product-spec-prose,
.product-spec-prose {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: -0.004em;
  color: var(--color-text-light);
}

.single-product-page .product-info .product-specs + .product-spec-prose,
.single-product-page .sp-tab-body .product-specs + .product-spec-prose,
.product-specs + .product-spec-prose {
  position: relative;
  margin-top: clamp(26px, 2.8vw, 38px);
  padding-top: clamp(24px, 2.5vw, 32px);
  border-top: 1px solid var(--spec-hair-2);
}

.product-specs + .product-spec-prose::before {
  content: "THE MAKER'S NOTE";
  position: absolute;
  top: 0;
  left: 34px;
  transform: translateY(-50%);
  padding: 0 13px;
  background: var(--color-bg);
  font-family: var(--font-primary);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spec-legend);
}

.product-spec-prose + .product-spec-prose { margin-top: var(--space-4); }


/* =============================================================================
   4. THE SAME PLATE INSIDE A TAB PANEL
   -----------------------------------------------------------------------------
   A product with no long description falls back to the formatter inside the
   Description panel, where the column is far wider and 66-tabs.css has already
   supplied a rail label. It gets the rows and the summary/detail step, but no
   field counter — there is no kicker line there for it to ride on.
   ========================================================================== */

.single-product-page .sp-tab-body .product-specs {
  max-width: 62rem;
  border-top: 1px solid var(--spec-hair-2);
}

.single-product-page .sp-tab-body .product-specs::after { content: none; }

.single-product-page .sp-tab-body .product-spec { --spec-label-w: 13rem; }

/* Only the wide context needs a measure imposed on the note; in the buy column
   the plate is already a ~46ch column, and a max-width there would cut its
   legend's hairline short of the rules above it. */
.single-product-page .sp-tab-body .product-spec-prose { max-width: 46ch; }


/* =============================================================================
   5. NARROW WIDTHS
   Part files load after every media query in main.css, so each step is
   restated here or the desktop value would hold all the way down to 320px.
   ========================================================================== */

@media (max-width: 1200px) {
  .single-product-page,
  .single-product-page .sp-tab-body { --spec-label-w: 9.25rem; }
  .single-product-page .sp-tab-body .product-spec { --spec-label-w: 11.5rem; }
}

@media (max-width: 1024px) {
  .single-product-page,
  .single-product-page .sp-tab-body { --spec-label-w: 9rem; }
  .single-product-page .sp-tab-body .product-spec { --spec-label-w: 10.5rem; }
}

/* The label track cannot hold a phrase like "Style/Capacity/Size" beside its
   value at this width, so the row stacks: label over value, still on the same
   hairline grid. */
@media (max-width: 768px) {
  .single-product-page .product-info .product-spec,
  .single-product-page .sp-tab-body .product-spec,
  .product-spec {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 5px;
    padding: 14px 0;
  }

  .single-product-page .product-info .product-spec dt,
  .single-product-page .sp-tab-body .product-spec dt,
  .product-spec dt { line-height: 1.5; }

  .single-product-page .product-info .product-spec:nth-child(-n+3),
  .single-product-page .sp-tab-body .product-spec:nth-child(-n+3),
  .product-spec:nth-child(-n+3) { padding: 15px 0; }

  .single-product-page .product-info .product-spec:nth-child(-n+3) dd,
  .single-product-page .sp-tab-body .product-spec:nth-child(-n+3) dd,
  .product-spec:nth-child(-n+3) dd { font-size: 1.02rem; }

  .single-product-page .product-info .product-spec:nth-child(4),
  .single-product-page .sp-tab-body .product-spec:nth-child(4),
  .product-spec:nth-child(4) {
    margin-top: 26px;
    padding-top: 26px;
  }

  .single-product-page .product-info .product-short-desc .product-specs::after {
    font-size: 0.7rem;
    letter-spacing: 0.11em;
  }
}

@media (max-width: 480px) {
  .single-product-page .product-info .product-spec,
  .single-product-page .sp-tab-body .product-spec,
  .product-spec { padding: 12px 0; }

  .single-product-page .product-info .product-spec dd,
  .single-product-page .sp-tab-body .product-spec dd,
  .product-spec dd { font-size: 0.86rem; }

  .single-product-page .product-info .product-spec:nth-child(-n+3) dd,
  .single-product-page .sp-tab-body .product-spec:nth-child(-n+3) dd,
  .product-spec:nth-child(-n+3) dd { font-size: 0.98rem; line-height: 1.35; }

  .single-product-page .product-info .product-spec-prose,
  .single-product-page .sp-tab-body .product-spec-prose,
  .product-spec-prose { font-size: 0.98rem; }

  /* 62-buybox still carries a ≤480px rule for this ::before from the kicker it
     used to draw here; without this it would indent the legend 42px inside its
     own knockout box. */
  .single-product-page .product-info .product-short-desc::before {
    left: 28px;
    padding: 0 11px;
    background-image: none;
    letter-spacing: 0.15em;
  }

  /* Below ~420px the field counter and the legend would collide on the same
     rule. The legend is the one that carries meaning. */
  .single-product-page .product-info .product-short-desc .product-specs::after { display: none; }

  .product-spec dd:has(.product-spec-alt) > span {
    grid-template-columns: 1.6rem minmax(0, 1fr);
  }
}

/* Uppercase micro-labels have a floor: below ~11px the wide tracking stops
   helping and starts hurting. Nothing in this file goes under 0.7rem. */
@media (max-width: 360px) {
  .single-product-page .product-info .product-spec dt,
  .single-product-page .sp-tab-body .product-spec dt,
  .product-spec dt,
  .product-specs + .product-spec-prose::before,
  .product-spec:nth-child(4)::before {
    font-size: 0.7rem;
    letter-spacing: 0.11em;
  }
}