/* pages/pdp.css — @layer pages. Quiet Neutral product detail page (redesign
   spec §2.4 "PDP"). Layout only: components (.btn, .card, .pmedia, .price,
   .trust, .panel) live in components.css and are consumed here by class
   only. Flat throughout — no shadows, no gradients, no hover-lift, no star
   rating, no engraved specimen plate. Realm scope is set on <main data-realm>
   by the template's {% block main_realm %}; this file only ever reads the
   resulting --realm-accent/--realm-deep/--realm-tint scope vars, never a
   raw --sage/--violet. */

@layer pages {

  /* ── Breadcrumb — plain, quiet; no mono/uppercase ledger treatment ──── */
  .pdp__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-bottom: var(--s5);
    font: 500 var(--t-label)/1.4 var(--font-text);
    color: var(--on-surface-muted);
  }
  .pdp__breadcrumb a { color: var(--on-surface-muted); }
  .pdp__breadcrumb a:hover { color: var(--on-surface); }

  /* ── Record grid: gallery (left) | info column (right) ─────────────── */
  .pdp__record { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
  @media (min-width: 900px) {
    .pdp__record { grid-template-columns: 5fr 6fr; gap: var(--s7); align-items: start; }
    .pdp__gallery { position: sticky; top: var(--s5); align-self: start; }
  }

  /* ── Gallery — main image + thumbnail rail, built directly from the
       view's `images`/`hero_image` context (real photo URLs), NOT routed
       through _specimen_plate.html (that include's product.primaryImage /
       product.primary_image contract doesn't match the PDP's GraphQL
       product dict, which only ever carries `images`). Reuses the .pmedia
       / .pmedia__initial component skin so it still looks and behaves like
       every other media tile on the site — flat, hairline-bordered, no
       shadow, no engraved plate frame. ────────────────────────────────── */
  .pdp-gallery__main {
    position: relative;
    border: 1px solid var(--hairline);
  }
  .pdp-gallery__slide.is-hidden { display: none; }
  .pdp-gallery__slide picture,
  .pdp-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* PLP→PDP cover-morph landing target (§7 view-transition wiring, base.html's
     click handler names the source cover the same way: cover-<slug>). Only
     the first slide ever carries a real name — it is also the only slide
     never given .is-hidden, so the named element is always actually
     rendered when the transition snapshot is taken. */
  .pdp-gallery__slide:first-child {
    --vt-name: none; /* fallback; the template sets the real value inline */
    view-transition-name: var(--vt-name);
  }

  .pdp-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin-top: var(--s3);
  }
  .pdp-gallery__thumb {
    border: 1px solid var(--hairline);
    padding: 0;
    cursor: pointer;
  }
  .pdp-gallery__thumb:hover { border-color: var(--ink-muted); }
  .pdp-gallery__thumb.is-active { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px; }

  /* ── Info column ─────────────────────────────────────────────────────── */
  .pdp__eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); }
  .pdp__eyebrow {
    display: inline-flex;
    align-items: center;
    font: 600 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--realm-deep);
    background: var(--realm-tint);
    border-radius: var(--r-pill);
    padding: 4px 10px;
  }
  .pdp__category { font: 500 var(--t-label)/1 var(--font-text); color: var(--on-surface-muted); }

  .pdp__title { font-size: var(--t-h1); margin: 0 0 var(--s4); }
  .pdp__lede {
    font: 400 var(--t-lede)/1.5 var(--font-text);
    color: var(--on-surface-muted);
    margin: 0 0 var(--s5);
    max-width: 60ch;
  }

  /* ── Price — reuses the .price/.price__was components verbatim ─────── */
  .pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
  .pdp__price .price { font-size: var(--t-h2); }
  .pdp__price-from { font: 500 var(--t-label)/1 var(--font-text); color: var(--on-surface-muted); }
  .pdp__compare:empty { display: none; }
  .pdp__lastreviewed { margin: 0 0 var(--s4); font: 400 var(--t-micro)/1.4 var(--font-text); color: var(--on-surface-muted); }

  /* ── Field notes — the metafield spec table. Mandated markup/classes:
       mono dt keys, plain dd values, hairline row separators, no leader
       dots, no rule-head seal. Also styles the Product codes section
       (.pdp-codes), which reuses the same .fn-row row treatment. ──────── */
  .field-notes,
  .pdp-codes { margin: var(--s6) 0; padding-top: var(--s5); border-top: 1px solid var(--hairline); }
  .field-notes h2,
  .pdp-codes h2 { font-size: var(--t-h3); margin: 0 0 var(--s4); }
  .field-notes dl,
  .pdp-codes dl { margin: 0; }
  .fn-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s4);
    padding: var(--s3) 0;
    border-top: 1px solid var(--hairline);
  }
  .fn-row:first-child { border-top: 0; }
  .fn-row dt {
    margin: 0;
    font: 500 var(--t-micro)/1.4 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-muted);
    flex: 0 0 auto;
  }
  .fn-row dd {
    margin: 0;
    font: 400 var(--t-body)/1.4 var(--font-text);
    color: var(--on-surface);
    text-align: right;
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .fn-row dd a { color: var(--realm-deep); text-underline-offset: 2px; text-decoration: underline; }

  /* ── Variant picker — plain ruled tabs, no shadow ──────────────────── */
  .pdp-variants-wrap { margin: var(--s5) 0; }
  .pdp-variants__label {
    margin: 0 0 var(--s3);
    font: 500 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-muted);
  }
  .pdp-variants { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
  @media (min-width: 480px) { .pdp-variants { grid-template-columns: repeat(2, 1fr); } }
  .pdp-variant {
    position: relative;
    display: grid;
    gap: var(--s1);
    text-align: left;
    padding: var(--s3) var(--s4);
    background: var(--surface-raised);
    color: var(--on-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    cursor: pointer;
    font: inherit;
  }
  .pdp-variant:has(.pdp-variant__thumb) {
    grid-template-columns: 48px 1fr;
    column-gap: var(--s3);
    align-items: center;
  }
  .pdp-variant__thumb {
    grid-row: 1 / span 3;
    width: 48px; height: 64px;
    border-radius: var(--r-sm); overflow: hidden;
    border: 1px solid var(--hairline);
  }
  .pdp-variant__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .pdp-variant:hover { border-color: var(--ink-muted); }
  /* Selected state uses outline (not box-shadow) — an inset ring with zero
     footprint on layout, honouring the "no shadows anywhere" rule while
     still reading as a 2px chosen-tab border. */
  .pdp-variant.is-selected { border-color: var(--on-surface); outline: 2px solid var(--on-surface); outline-offset: -2px; }
  .pdp-variant__badge {
    position: absolute; top: var(--s2); right: var(--s3);
    font: 500 var(--t-micro)/1 var(--font-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--on-surface-muted);
  }
  .pdp-variant__name {
    font: 500 var(--t-lede)/1.25 var(--font-text);
    color: var(--on-surface);
    padding-right: 5.5rem;
  }
  .pdp-variant__size { color: var(--on-surface-muted); }
  .pdp-variant__price-line { display: inline-flex; align-items: baseline; gap: var(--s2); }
  .pdp-variant__price { font: 600 var(--t-body)/1 var(--font-mono); color: var(--on-surface); font-variant-numeric: tabular-nums; }
  .pdp-variant__compare { font: 500 var(--t-micro)/1 var(--font-mono); color: var(--on-surface-muted); text-decoration: line-through; }
  .pdp-variant__sale-pill {
    position: absolute; top: var(--s6); right: var(--s3);
    font: 600 var(--t-micro)/1.2 var(--font-mono); letter-spacing: 0.04em;
    color: var(--on-surface);
  }
  .pdp-variant__desc { font: 400 var(--t-micro)/1.45 var(--font-text); color: var(--on-surface-muted); }

  /* ── Add-to-cart: qty stepper + the one ink CTA on the page ────────── */
  .pdp__atc {
    display: flex;
    gap: var(--s3);
    align-items: stretch;
    margin: var(--s5) 0 var(--s3);
  }
  .pdp__qty {
    width: 84px;
    min-height: 48px;
    padding: 0 var(--s4);
    text-align: center;
    background: var(--surface-raised);
    color: var(--on-surface);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    font: 500 var(--t-body)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .pdp__cta { flex: 1; }

  .pdp__stock {
    margin: 0 0 var(--s5);
    font: 400 var(--t-micro)/1.4 var(--font-text);
    color: var(--on-surface-muted);
  }

  /* ── Back-in-stock — plain quiet panel, no colour accent bar ───────── */
  .pdp-bis {
    margin: var(--s4) 0 var(--s5);
    padding: var(--s4);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    background: var(--surface-well);
  }
  .pdp-bis__head { margin: 0 0 var(--s1); font: 600 var(--t-lede)/1.3 var(--font-text); color: var(--on-surface); }
  .pdp-bis__pitch { margin: 0 0 var(--s3); font: 400 var(--t-body)/1.5 var(--font-text); color: var(--on-surface-muted); }
  .pdp-bis__row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
  .pdp-bis__input { flex: 1; min-width: 180px; }

  /* ── Collections / tags / vendor ────────────────────────────────────── */
  .pdp__collections, .pdp__tags { margin: var(--s5) 0; }
  .pdp__tags-label {
    margin: 0 0 var(--s2);
    font: 500 var(--t-micro)/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-muted);
  }
  .pdp__chiprow { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .pdp-tag {
    display: inline-flex;
    align-items: center;
    font: 500 var(--t-micro)/1 var(--font-text);
    color: var(--realm-deep);
    background: var(--realm-tint);
    border-radius: var(--r-pill);
    padding: 4px 10px;
  }
  .pdp-tag:hover { text-decoration: underline; }

  .pdp__vendor {
    display: flex; align-items: center; gap: var(--s3);
    flex-wrap: wrap;
    margin: var(--s5) 0;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
  }
  .pdp__vendor-logo {
    width: 44px; height: 44px; flex: 0 0 auto;
    object-fit: contain; padding: var(--s1);
    background: var(--surface-raised); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  }
  .pdp__vendor-body { flex: 1 1 60%; min-width: 0; }
  .pdp__vendor-name { font: 500 var(--t-lede)/1.2 var(--font-text); color: var(--on-surface); border-bottom: 1px dotted var(--hairline); overflow-wrap: anywhere; }
  .pdp__vendor-more { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

  /* ── Trust band — full-width, reuses the site-wide .trust component ── */
  .pdp__record + .trust { margin-top: var(--s7); }

  /* ── Lore panel — Arcana only; a flat tinted aside via .panel--wash ── */
  .pdp__lore { margin: var(--s8) 0 0; max-width: 68ch; }
  .pdp__lore-title { margin: 0 0 var(--s3); font-size: var(--t-h3); }
  .pdp__lore-body { font: 400 var(--t-body)/1.7 var(--font-text); font-style: italic; }
  .pdp__lore-body p { margin: 0 0 var(--s3); }
  .pdp__lore-caveat { margin: var(--s3) 0 0; font: 400 var(--t-micro)/1.5 var(--font-text); color: var(--on-surface-muted); }

  /* ── Description (long description) ────────────────────────────────── */
  .pdp__description { margin-top: var(--s8); max-width: 68ch; }
  .pdp__description-body { font: 400 var(--t-body)/1.7 var(--font-text); color: var(--on-surface); }
  .pdp__description-body p { margin: 0 0 var(--s4); }
  .pdp__description-body h2 { font-size: var(--t-h3); margin: var(--s6) 0 var(--s3); }
  .pdp__description-body h3 { font-size: var(--t-lede); font-family: var(--font-text); margin: var(--s5) 0 var(--s2); }

  /* ── FAQs ──────────────────────────────────────────────────────────── */
  .pdp-faqs { margin-top: var(--s8); max-width: 68ch; }
  .faq-list { display: grid; gap: 0; }
  .faq-row { border-top: 1px solid var(--hairline); padding: var(--s4) 0; }
  .faq-row:last-child { border-bottom: 1px solid var(--hairline); }
  .faq-row summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: var(--s4);
    font: 500 var(--t-lede)/1.3 var(--font-text); color: var(--on-surface);
  }
  .faq-row summary::-webkit-details-marker { display: none; }
  .faq-row summary::after { content: '+'; font-family: var(--font-mono); color: var(--on-surface-muted); }
  .faq-row[open] summary::after { content: '\2212'; }
  .faq-answer { margin-top: var(--s3); font: 400 var(--t-body)/1.65 var(--font-text); color: var(--on-surface-muted); }

  /* ── Reviews — no star glyphs anywhere (decorative rating retired) ─── */
  .pdp-reviews { margin-top: var(--s8); }
  .pdp-reviews__grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
  @media (min-width: 768px) { .pdp-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
  .pdp-review { padding: var(--s5); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface-raised); }
  .pdp-review__body { margin: 0 0 var(--s3); font: 400 var(--t-lede)/1.5 var(--font-text); font-style: italic; color: var(--on-surface); }
  .pdp-review__by { margin: 0; font: 500 var(--t-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-surface-muted); }

  /* ── Rails: related + recently viewed — plain gapped card grid ─────── */
  .pdp-rail { margin-top: var(--s8); }
  .pdp-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s5); }
  .pdp-rail__head h2 { margin: 0; }
  .pdp-rail__viewall { font: 600 var(--t-label)/1 var(--font-text); color: var(--on-surface); }
  .pdp-rail__viewall:hover { color: var(--realm-deep); }
  .pdp-recent h2 { margin: 0 0 var(--s5); }
  .pdp-rail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s5);
  }
  /* Recently viewed usually holds only 2–4 items. With the shared
     auto-fill + 1fr track above, those few cards stretch to fill the row
     (~280px+) and leave a dead gap on the right. Cap the track width and
     left-align so the rail's cards stay card-sized and tidy regardless of
     count — the related-products grid (usually full) keeps the 1fr fill.
     Desktop-only (min-width 721px) so the ≤720px horizontal-scroll rule
     below still governs mobile. */
  @media (min-width: 721px) {
    .pdp-recent .pdp-rail__grid {
      grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
      justify-content: start;
    }
  }

  /* ── Sticky add-to-cart bar — flat ink shelf, top hairline only ────── */
  .sticky-atc {
    display: flex;
    align-items: center;
    gap: var(--s3);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-sticky);
    min-height: 56px;
    padding: var(--s2) var(--s4);
    background: var(--surface-raised);
    border-top: 1px solid var(--hairline);
  }
  .sticky-atc-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .sticky-atc-name {
    font: 500 var(--t-body)/1.2 var(--font-text);
    color: var(--on-surface);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sticky-atc-price { font-size: var(--t-micro); }
  .sticky-atc-btn { flex: 0 0 auto; }

  /* Out-of-stock records show the back-in-stock panel instead of an ATC;
     this suppresses the mobile sticky Add bar too so no active Add
     affordance ever co-exists with the notify panel. Keyed off the
     presence of .pdp-bis (the definitive OOS marker) — the #sticky-atc
     markup + its observer stay byte-identical. */
  .pdp:has(.pdp-bis) ~ .sticky-atc { display: none; }

  /* ── 720px: rails scroll horizontally in their own strips ──────────── */
  @media (max-width: 720px) {
    .pdp-rail__grid {
      grid-auto-flow: column;
      grid-auto-columns: minmax(60%, 1fr);
      grid-template-columns: none;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
    }
    .pdp-rail__grid .card { scroll-snap-align: start; }
  }
}