/* =========================================================================
   Single product, staged in strata: header band, buy band, facts, detail.
   The facts and detail bands are siblings of the product block, never grid
   children of it, so they always run the full container width.
   ========================================================================= */

/* ---------- Header band ---------- */
.product-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--space-lg) var(--space-md);
}
.product-hero > .container { position: relative; z-index: 2; }
.product-hero .crumb { margin-bottom: var(--space-sm); }

.product-hero__inner { display: grid; gap: var(--space-sm); max-width: 900px; }
.product-hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
.product-hero__pitch {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  margin: 0;
}

.woocommerce .woo { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

/* ---------- Buy column ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: clamp(2.2rem, 3.6vw, 3rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}

/* ---------- Facts strip ---------- */
.product-facts { padding-block: 0 var(--space-lg); }
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-md) var(--space-sm);
  min-width: 0;
}
.fact + .fact { border-left: 1px solid var(--hairline); }
.fact:first-child { padding-left: 0; }
.fact:last-child { padding-right: 0; }

.fact__icon { flex: none; width: 26px; height: 26px; color: var(--accent); }
.fact__icon svg { width: 100%; height: 100%; overflow: visible; }
.fact__icon [data-stroke] {
  stroke-dasharray: var(--len, 60);
  stroke-dashoffset: var(--len, 60);
  transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.3,1);
}
.fact.is-in .fact__icon [data-stroke] { stroke-dashoffset: 0; }

.fact__body { display: grid; gap: 3px; min-width: 0; }
.fact__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  opacity: .85;
  line-height: 1.3;
}
.fact__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

@media (prefers-reduced-motion: reduce) {
  .fact__icon [data-stroke] { stroke-dashoffset: 0; transition: none; }
}

/* ---------- Detail band ---------- */
.product-detail-band { padding-block: var(--space-xl); }
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: var(--space-xl);
  align-items: start;
}
.detail-grid__body { min-width: 0; }

.spec {
  position: sticky;
  top: 100px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  min-width: 0;
}
.spec__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: var(--space-sm);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}
.spec__list { margin: 0; display: grid; }

/* Label above value: no right-aligned wrapping, no overflow at any width. */
.spec__row {
  display: grid;
  gap: 3px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.spec__row:last-child { border-bottom: 0; }
.spec__row:first-child { padding-top: 0; }
.spec__row dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  opacity: .85;
}
.spec__row dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  overflow-wrap: anywhere;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: var(--space-md) var(--space-sm); }
  .fact:nth-child(odd) { padding-left: 0; border-left: 0; }
  .fact:nth-child(even) { padding-right: 0; border-left: 1px solid var(--hairline); }
  .fact:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .detail-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .spec { position: static; }
}

@media (max-width: 640px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact,
  .fact:nth-child(odd),
  .fact:nth-child(even) {
    padding: 14px 0;
    border-left: 0;
    border-right: 0;
  }
  .fact + .fact { border-top: 1px solid var(--hairline); }
  .fact:nth-child(n+3) { border-top: 1px solid var(--hairline); }
  .product-hero { padding-block: var(--space-md) var(--space-sm); }
}

/* =========================================================================
   Products that are published but not priced yet.
   The price slot would otherwise render empty, which reads as a broken page
   rather than a deliberate "not yet".
   ========================================================================= */

.price--tbd {
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
}

.unpriced-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: var(--space-sm) 0 0;
}
.unpriced-cta__note {
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Read-only swatch list on a product that is not priced yet. */
.swatches--preview { margin-bottom: var(--space-sm); }
.swatches--preview .swatch { cursor: default; }
.swatches--preview .swatch:hover .swatch__dot { transform: none; }

/* A caveat on what the colour choice does not cover, beside the swatches. */
.field__hint--caveat {
  color: var(--ink);
  font-weight: 600;
}

/* Personalisation note on a product that is not priced yet. */
.unpriced-personalised {
  max-width: 46ch;
  margin: var(--space-sm) 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}
.unpriced-personalised strong { color: var(--ink); }