/* ============================================================================
   ASTROVE — PRODUCT PAGE (/products/<slug>)
   ----------------------------------------------------------------------------
   A product page is a standalone specimen chapter, not a storefront template.
   It speaks the homepage's specimen language -- index label, locked name,
   spec ledger, assurance line, the fruit's own field colour -- without loading
   any of the homepage's machinery: no preloader, no WebGL, no GSAP, no scroll
   choreography. The photography carries the spectacle; the layout carries
   precision.

   Built on tokens.css only. The one colour decision per product is the pair
   below: the fruit's field (the hero ground) and its accent (instrumentation).
   Everything else is shared, so three pages cannot drift apart visually.

   Deliberately absent: rounded card grids, drop shadows, badges, icon rows,
   star ratings, sticky buy bars, accordions that hide facts from crawlers.
   ========================================================================== */

[data-sku="jamun"] { --pdp-field: var(--field-orchid); --pdp-accent: var(--sku-jamun-bright); }
[data-sku="mango"] { --pdp-field: var(--field-ember); --pdp-accent: var(--nectar); }
[data-sku="pineapple"] { --pdp-field: var(--field-forest); --pdp-accent: var(--chlorophyll); }
/* The shared shell (static-shell.css) reads these two. */
.pdp-body { --shell-field: var(--pdp-field); --shell-accent: var(--pdp-accent); }

/* ---- hero -------------------------------------------------------------- */
.pdp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "media" "buy";
  gap: clamp(1.6rem, 4vw, 2.6rem);
  padding: clamp(1.2rem, 4vw, 3rem) var(--gutter-right) clamp(3rem, 7vw, 6rem) var(--gutter-left);
  background: linear-gradient(to bottom, var(--pdp-field) 0%, var(--pdp-field) 58%, var(--void-deep) 100%);
}
.pdp-hero__head { grid-area: head; }
.pdp-hero__media { grid-area: media; margin: 0; }
.pdp-hero__buy { grid-area: buy; }

.pdp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 clamp(1.6rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--moon-dim);
}
.pdp-crumbs li + li::before { content: "/"; margin: 0 0.6em; color: var(--line-strong); }
.pdp-crumbs a { text-decoration: none; color: var(--moon-soft); }
.pdp-crumbs a:hover { color: var(--moon); }

.pdp-index {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moon-soft);
}
.pdp-index::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--pdp-accent);
}

.pdp-title {
  margin: 0.55em 0 0.45em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.4vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pdp-lead {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--moon-soft);
}

.pdp-descriptors {
  display: flex;
  flex-wrap: wrap;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moon);
}
.pdp-descriptors li + li::before { content: "/"; margin: 0 0.75em; color: var(--pdp-accent); }

.pdp-hero__media img { width: 100%; }

.pdp-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.pdp-spec li { display: grid; gap: 0.15rem; padding: 1rem 0; }
.pdp-spec li + li { padding-left: 1.2rem; border-left: 1px solid var(--line); }
.pdp-spec strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pdp-spec span,
.pdp-assurance li,
.pdp-record__label,
.pdp-figure span,
.pdp-gallery figcaption,
.pdp-ledger dt {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pdp-spec span { color: var(--moon-dim); }

.pdp-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--moon);
}
.pdp-assurance li { display: flex; align-items: center; gap: 0.55rem; }
.pdp-assurance li::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--pdp-accent);
}
.pdp-qualifier { margin: 0.55rem 0 0; font-size: 0.78rem; color: var(--moon-dim); }

.pdp-availability {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.pdp-availability__state {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.2;
}
.pdp-availability__detail { max-width: 42ch; margin: 0.4rem 0 1.3rem; color: var(--moon-soft); }

.pdp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3rem;
  padding: 0.95rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--nectar);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.pdp-cta:hover { background: var(--moon); }

/* ---- records ----------------------------------------------------------- */
.pdp-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
  margin: 0 var(--gutter-right) 0 var(--gutter-left);
  padding-block: clamp(2.6rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.pdp-record__label {
  margin: 0;
  font-weight: 500;
  color: var(--pdp-accent);
}
.pdp-record__body { max-width: 62rem; }
.pdp-record__body > p { max-width: 62ch; margin: 0 0 1rem; color: var(--moon-soft); }
.pdp-record__body > p:last-child { margin-bottom: 0; }

.pdp-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--moon) !important;
  text-wrap: balance;
}
.pdp-display--small { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
.pdp-soft { color: var(--moon-soft); }
.pdp-fine { font-size: 0.78rem; color: var(--moon-dim) !important; }

.pdp-ledger { display: grid; margin: 1.6rem 0 0; max-width: 40rem; }
.pdp-ledger div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.9fr) minmax(0, 2fr);
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}
.pdp-ledger div:last-child { border-bottom: 1px solid var(--line); }
.pdp-ledger dt { color: var(--moon-dim); }
.pdp-ledger dd { margin: 0; color: var(--moon); }
.pdp-ledger dd span { margin-left: 0.5rem; color: var(--moon-dim); }

.pdp-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; }
.pdp-links a {
  color: var(--moon);
  text-decoration: underline;
  text-decoration-color: var(--pdp-accent);
  text-underline-offset: 0.3em;
  padding-block: 0.25rem;
}
.pdp-links a:hover { text-decoration-thickness: 2px; }

/* ---- gallery: each photograph keeps its own proportions --------------- */
.pdp-gallery {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
}
.pdp-gallery__item { flex: 0 0 78%; margin: 0; scroll-snap-align: start; }
.pdp-gallery__item--landscape { flex-basis: 92%; }
.pdp-gallery figcaption { margin-top: 0.6rem; color: var(--moon-dim); }

/* ---- nutrition --------------------------------------------------------- */
.pdp-nutrition {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.pdp-nutrition caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.pdp-nutrition thead th {
  padding: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moon-dim);
  border-bottom: 1px solid var(--line-strong);
}
.pdp-nutrition th, .pdp-nutrition td { text-align: left; }
.pdp-nutrition thead th:last-child, .pdp-nutrition td { text-align: right; }
.pdp-nutrition tbody th, .pdp-nutrition tbody td {
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.pdp-nutrition tbody th { color: var(--moon-soft); }
.pdp-nutrition tbody td { color: var(--moon); }
.pdp-nutrition + .pdp-fine { margin-top: 1rem; }

/* ---- fresh fruit figure ------------------------------------------------ */
.pdp-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 1rem; }
.pdp-figure strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--moon);
  font-variant-numeric: tabular-nums;
}
.pdp-figure span { color: var(--pdp-accent); }

/* ---- origin ------------------------------------------------------------ */
.pdp-origin { display: grid; gap: 2rem; }
.pdp-origin__text > p { max-width: 58ch; margin: 0 0 0.9rem; color: var(--moon-soft); }
.pdp-origin__headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.1rem) !important;
  line-height: 1.04;
  color: var(--moon) !important;
  text-wrap: balance;
}
.pdp-origin__botanical { font-family: var(--font-display); font-size: 1.15rem; color: var(--moon) !important; }
.pdp-origin__source,
.pdp-origin__disclaimer { font-size: 0.74rem !important; color: var(--moon-dim) !important; }
.pdp-origin__source { margin-top: 1.4rem !important; letter-spacing: 0.12em; text-transform: uppercase; }
.pdp-origin__disclaimer { font-style: italic; }
.pdp-origin__image { margin: 0; max-width: 24rem; }

/* ---- collection -------------------------------------------------------- */
.pdp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.6rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}
.pdp-card a {
  display: grid;
  gap: 0.4rem;
  height: 100%;
  padding-top: 1rem;
  border-top: 1px solid var(--line-strong);
  text-decoration: none;
}
.pdp-card img { width: 7.5rem; margin-bottom: 0.6rem; }
.pdp-card__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; }
.pdp-card__meta { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moon-dim); }
.pdp-card a:hover .pdp-card__name { text-decoration: underline; text-decoration-color: var(--pdp-accent); text-underline-offset: 0.2em; }
.pdp-card--trio a { align-content: end; }

/* ---- wider layouts ------------------------------------------------------ */
@media (min-width: 960px) {
  .pdp-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "head media" "buy media";
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
  }
  .pdp-hero__media { align-self: center; }
  /* ABOVE THE FOLD AT 1440x900: identity, price and the ordering state with its
     call to action. Measured before this rule: the CTA sat at 949px, so the one
     honest sentence about availability was below the fold. */
  .pdp-hero { padding-top: clamp(1rem, 1.6vw, 1.5rem); }
  .pdp-crumbs ol { margin-bottom: clamp(1rem, 1.6vw, 1.5rem); }
  /* The longest locked name, "Freeze-Dried Alphonso Mango Chunks", set three
     lines at 4.4rem in a 5fr column and pushed the CTA to 895px of 900. A
     slightly wider text column and a 4.1rem ceiling hold it to two. */
  .pdp-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .pdp-title { margin: 0.45em 0 0.4em; font-size: clamp(2.6rem, 4.1vw, 4.1rem); }
  .pdp-lead { max-width: 44ch; }
  .pdp-descriptors { margin-top: 1rem; }
  .pdp-spec li { padding-block: 0.75rem; }
  .pdp-assurance { margin-top: 0.85rem; }
  .pdp-availability { margin-top: 1.25rem; padding-top: 1.1rem; }
  .pdp-availability__detail { margin: 0.3rem 0 0.9rem; }
  .pdp-record { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(2rem, 4vw, 4rem); }
  .pdp-record__label { padding-top: 0.35rem; }
  .pdp-gallery { overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(1rem, 2vw, 1.8rem); }
  .pdp-gallery__item, .pdp-gallery__item--landscape { flex: none; }
  .pdp-origin { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-cta { transition: none; }
}