/* ============================================================
   NOX — custom single product page (single-product.php)
   Loaded only on product pages (enqueued conditionally).
   ============================================================ */

.nox-pdp{ background:var(--bg); }
body.single-product{ overflow-x:clip; }   /* lets the full-width bands break out without a sidescroll (sticky-safe) */
.pdp-wrap{
  max-width:1280px;margin:0 auto;padding:80px 40px 48px;
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:96px;align-items:start; /* [M7] prototype info/image ratio + gap */
}

/* Desktop only (≥1200px) — a true editorial hero (per the reference layout).
   The photograph is the focal point: an image-favouring split (~39% / ~61%),
   a wide container and a photo that FILLS ~96% of its column so it commands the
   page like a luxury skincare/fragrance site. It is TOP-aligned with the
   purchase content (both columns start together) and is allowed to extend below
   the buy panel — it is the hero, not height-matched to the controls. Square,
   centred, never cropped or distorted. Everything else — gallery, thumbnails,
   zoom, sticky bar, JS — is untouched.
   Tablet and mobile (handled below) are left completely untouched. */
@media(min-width:1200px){
  /* Match the reference: an image-dominant split (~36% buy panel / ~64% photo),
     a tight gap, and a photograph that FILLS its column edge-to-edge (no cream
     whitespace around it). Top-aligned with the purchase content; the square
     photo naturally extends below the buy panel. Never cropped or distorted. */
  .pdp-wrap{ max-width:1500px;grid-template-columns:0.72fr 1.28fr;gap:40px; }
  .pdp-stage{ width:100%;height:auto;margin:0; }
  .pdp-breadcrumb{ max-width:1500px; } /* breadcrumb left edge aligns to the hero */
}

/* ── INFO COLUMN ── */
.pdp-info{ min-width:0; }
.pdp-eyebrow{
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);display:block;margin-bottom:26px;
}
.pdp-instock{ color:var(--success); }
/* Museum-accession marker — quiet bronze identifier above the category eyebrow.
   An identifier, never a claim (Master §1). */
.pdp-accession{
  display:block;font-family:var(--font-sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;color:var(--nox-bronze,#9a7b4f);
  margin:0 0 12px;
}
.pdp-title{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(40px,4.6vw,66px);line-height:.98;letter-spacing:var(--ls-heading);
  overflow-wrap:normal;word-break:normal;hyphens:none;
  color:var(--ink);margin:0 0 28px;
}
.pdp-tagline{
  font-size:18px;line-height:1.65;color:var(--ink-mid);max-width:460px;margin-bottom:34px;
}
.pdp-tagline p{ margin:0; }

/* (The purity "trust pill" was removed in Phase 4 — the page carries no
   analytical claims until real documentation exists. See .pdp-doc-link.) */

.pdp-section-label{
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);
  margin-bottom:14px;display:flex;justify-content:space-between;align-items:baseline;
}
.pdp-section-label small{ color:var(--ink-light);letter-spacing:.14em;font-size:10px; }

/* size tiles */
.pdp-sizes{ display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line-strong);margin-bottom:22px; }
.pdp-sizes .pdp-size:not(:last-child){ border-right:1px solid var(--line-strong); }
.pdp-size{
  position:relative;overflow:hidden;
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:22px 24px;display:flex;flex-direction:column;gap:14px;
  transition:background .32s var(--ease-lux),color .32s var(--ease-lux);
  color:var(--ink);   /* inactive tile = ink (was inheriting the theme link-blue) */
}
.pdp-size:hover:not(.is-active){ background:var(--bg-warm); }
/* [C-2] Out-of-stock size tile — visibly non-selectable (set in single-product.php). */
.pdp-size.is-disabled{ cursor:not-allowed;color:var(--ink-faint); }
.pdp-size.is-disabled:hover{ background:transparent; }
.pdp-size.is-disabled .pdp-size-strength{ text-decoration:line-through;text-decoration-thickness:1px; }
.pdp-size.is-disabled .pdp-size-price{
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light);
}
/* the ink fill slides in from the left rather than snapping on */
.pdp-size::before{
  content:'';position:absolute;inset:0;z-index:0;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease-lux);
}
.pdp-size.is-active::before{ transform:scaleX(1); }
.pdp-size > *{ position:relative;z-index:1; }
.pdp-size.is-active{ color:var(--bg); }
/* thin bronze marker on the active tile */
.pdp-size::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;z-index:2;background:var(--gold);
  transform:scaleY(0);transform-origin:center;transition:transform .38s var(--ease-lux);
}
.pdp-size.is-active::after{ transform:scaleY(1); }
.pdp-size-strength{ font-family:var(--font-serif);font-size:26px;line-height:1;color:inherit; }
.pdp-size-price{ font-family:var(--font-serif);font-size:18px;color:inherit; }
.pdp-size .woocommerce-Price-amount{ color:inherit; }
.pdp-size.is-active .woocommerce-Price-amount{ color:var(--bg); }
/* [H-3] Keyboard focus indicator — visible on both the cream (inactive) and the
   ink-filled (active) tile; gold reads on either. Inset so it sits cleanly
   inside the shared tile borders. Pointer focus is unaffected (:focus-visible). */
.pdp-size:focus-visible{ outline:2px solid var(--gold);outline-offset:-2px; }

/* single-size (simple products) */
/* Single-size (simple) products reuse the size-tile component (.pdp-sizes/.pdp-size)
   with one pre-selected, presentational option, so the buy box is identical to the
   variable products. One full-width column (no empty second cell) and inert. */
.pdp-sizes--single{ grid-template-columns:1fr; }
.pdp-sizes--single .pdp-size{ cursor:default;pointer-events:none; }

/* quantity */
.pdp-qty-row{ display:flex;align-items:center;gap:18px;margin-bottom:28px;flex-wrap:wrap; }
.pdp-qty{ display:inline-flex;align-items:stretch;border:1px solid var(--line); }
.pdp-qty button{
  width:46px;background:var(--paper);border:0;cursor:pointer;font-size:18px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast);
}
.pdp-qty button:hover{ background:var(--bg-warm); }
.pdp-qty-input{
  width:58px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  text-align:center;font-family:var(--font-sans);font-size:15px;background:var(--bg-card);
  -moz-appearance:textfield;
}
.pdp-qty-input::-webkit-outer-spin-button,.pdp-qty-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0; }
/* CTA — one conversion path: a single Add-to-bag with the live price fused in */
.pdp-cta{ display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px; }
.pdp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:21px 32px;border-radius:0;cursor:pointer;text-decoration:none;
  font-family:var(--font-sans);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-wide);
  transition:background var(--dur) var(--ease-lux),color var(--dur) var(--ease-lux);border:1px solid var(--ink);
}
.pdp-btn-primary{ background:var(--ink);color:var(--bg);flex:1;min-width:200px; }
.pdp-btn-primary:hover{ background:transparent;color:var(--ink); }
/* Sold-out CTA — muted, non-interactive; never looks buyable. */
.pdp-btn-soldout,
.pdp-btn-soldout:hover{
  background:var(--bg-card,#efeae2);color:var(--ink-light);border-color:var(--line);
  cursor:not-allowed;flex:1;min-width:200px;
}
.pdp-cta-price{ font-weight:400;opacity:.85;letter-spacing:.04em; } /* live unit × qty, updated by single-product.js */
/* quiet secondary action — a text link, never a competing button */
.pdp-wa-link{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:36px;
  font-family:var(--font-sans);font-size:12px;color:var(--ink-mid);text-decoration:none;
  transition:color var(--dur-fast) ease;
}
.pdp-wa-link:hover{ color:var(--ink); }
.pdp-wa-link span{ transition:transform var(--dur-fast) var(--ease-lux); }
.pdp-wa-link:hover span{ transform:translateX(3px); }
/* future documentation row — only rendered once a real COA is attached (_nox_coa_url) */
.pdp-doc-link{
  display:inline-flex;align-items:center;gap:8px;margin:-6px 0 24px;
  font-family:var(--font-sans);font-size:12px;font-weight:500;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--divider);padding-bottom:2px;
  transition:border-color var(--dur-fast) ease;
}
.pdp-doc-link:hover{ border-bottom-color:var(--ink); }
/* .pdp-arrow is still used by the sticky bar button */
.pdp-arrow{ width:16px;height:1px;background:currentColor;position:relative;transition:width var(--dur); }
.pdp-arrow::after{ content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg); }
.pdp-btn-primary:hover .pdp-arrow{ width:26px; }

/* supply facts — quiet text lines above a hairline (replaced the icon grid).
   Only statements NOX can support today: dispatch, timing, scope, packaging. */
.pdp-facts{
  list-style:none;margin:6px 0 0;padding:22px 0 0;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:10px;
}
.pdp-facts li{
  font-family:var(--font-sans);font-size:13px;line-height:1.5;color:var(--ink-mid);
  position:relative;padding-left:18px;
}
.pdp-facts li::before{ content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--gold); }

/* ── IMAGE STAGE ── */
.pdp-stage{
  position:sticky;top:120px;background:linear-gradient(180deg,var(--bg-warm),var(--paper));
  border:1px solid var(--line-soft);border-radius:0;aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden;
}
/* (Corner badges removed — the lot and HPLC badges carried batch/testing claims the page no longer makes.) */
.pdp-stage-img{ width:100%;height:100%; }
.pdp-stage-img img{ width:100%;height:100%;object-fit:cover;display:block; }

/* editorial gallery — stacked hero images cross-fade; a thumbnail row overlays
   the bottom of the stage. Only present when a product has more than one image.
   Single-image products render exactly as before. */
.pdp-hero{ position:relative; }
.pdp-hero .pdp-hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .4s ease-in-out,transform .5s var(--ease-lux);
}
.pdp-hero .pdp-hero-img.is-active{ opacity:1; }
.pdp-stage:hover .pdp-hero-img.is-active{ transform:scale(1.06); } /* premium hover zoom */
.pdp-thumbs{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;justify-content:center;gap:10px;padding:16px;pointer-events:none;
}
.pdp-thumb{
  pointer-events:auto;flex:0 0 auto;width:56px;height:56px;overflow:hidden;padding:0;cursor:pointer;
  background:var(--bg);border:1px solid var(--line-strong);
  opacity:.9;transition:opacity var(--dur-fast) ease,border-color var(--dur-fast) ease;
}
.pdp-thumb img{ width:100%;height:100%;object-fit:cover;display:block; }
.pdp-thumb:hover{ opacity:1; }
.pdp-thumb.is-active{ opacity:1;border-color:var(--ink); }
/* [H-3] Keyboard focus indicator for gallery thumbnails — gold ring reads over
   any hero imagery behind the strip. */
.pdp-thumb:focus-visible{ opacity:1;outline:2px solid var(--gold);outline-offset:2px; }
@media(hover:none){ .pdp-stage:hover .pdp-hero-img.is-active{ transform:none; } }
@media(max-width:520px){ .pdp-thumb{ width:48px;height:48px; } .pdp-thumbs{ gap:8px;padding:12px; } }

/* ── DETAIL / SPEC (below) ── */
.pdp-detail{ max-width:1280px;margin:0 auto;padding:24px 40px 96px; }
.pdp-detail .nox-spec{ width:100%;border-collapse:collapse;margin:8px 0 24px;border-top:1px solid var(--line);max-width:760px; }
.pdp-detail .nox-spec th,.pdp-detail .nox-spec td{ text-align:left;padding:12px 0;border-bottom:1px solid var(--line-soft);font-family:var(--font-sans);font-size:13.5px;vertical-align:top; }
.pdp-detail .nox-spec th{ color:var(--ink-light);font-weight:400;width:40%;letter-spacing:.04em; }
.pdp-detail .nox-spec td{ color:var(--ink); }
.pdp-detail h3{ font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-weight:300;font-size:30px;color:var(--ink);margin:0 0 16px; }
.pdp-detail .nox-ruo{ font-size:12px;color:var(--ink-mid);font-style:italic;margin-top:8px; }

/* ── responsive ── */
@media(max-width:920px){
  .pdp-wrap{ grid-template-columns:1fr;gap:44px; }
  /* hero: dominant, flush (not rounded), first thing you see. */
  .pdp-stage{ position:relative;top:auto;order:-1;aspect-ratio:4/5;border:0;border-radius:0; }
}
@media(max-width:520px){
  .pdp-wrap{ padding:28px 20px 40px; }
  .pdp-cta{ flex-direction:column;gap:14px; }
  .pdp-btn-primary{ width:100%; }
  .pdp-facts li{ font-size:12px; }
}

/* ---------- breadcrumb (back to catalogue) ---------- */
.pdp-breadcrumb{
  max-width:1280px;margin:0 auto;padding:24px 40px 0;
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-light);
}
.pdp-breadcrumb a{ color:var(--ink-mid);text-decoration:none;transition:color var(--dur-fast);position:relative; }
.pdp-breadcrumb a::after{ content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease-lux); }
.pdp-breadcrumb a:hover{ color:var(--ink); }
.pdp-breadcrumb a:hover::after{ transform:scaleX(1); }
.pdp-crumb-sep{ margin:0 10px;color:var(--ink-faint); }
.pdp-crumb-current{ color:var(--ink-mid); } /* the "you are here" signal must be legible */
@media(max-width:520px){ .pdp-breadcrumb{ padding:16px 20px 0;font-size:10px;letter-spacing:.1em; } }

/* ============================================================
   [H1] Primary CTA — force NOX ink styling over Blocksy's gold
   theme button. Blocksy's grouped rule (…,[type="submit"],…) ties
   .pdp-btn-primary on specificity and wins on load order, and also
   overrides the button font, so !important is required here.
   ============================================================ */
.pdp-cta button.pdp-btn-primary,
.pdp-cta a.pdp-btn-primary,
.pdp-sticky button.pdp-btn-primary{
  background:var(--ink) !important;
  color:var(--bg) !important;
  border:1px solid var(--ink) !important;
  font-family:var(--font-sans) !important;
  font-size:12px !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:var(--ls-wide) !important;
}
.pdp-cta button.pdp-btn-primary:hover,
.pdp-cta a.pdp-btn-primary:hover,
.pdp-sticky button.pdp-btn-primary:hover{
  background:transparent !important;
  color:var(--ink) !important;
}

/* ============================================================
   [C-1] WooCommerce notices on the PDP
   The custom template restores wc notice output beside the buy box
   (see woocommerce_output_all_notices() in single-product.php). Style
   the notice region to match the editorial design — cream card, hairline
   border, a quiet tone bar keyed to the notice type. Scoped to .nox-pdp
   so cart/checkout notices keep their existing (Blocksy/Woo) appearance.
   ============================================================ */
.nox-pdp .woocommerce-notices-wrapper{ margin:0 0 26px; }
.nox-pdp .woocommerce-notices-wrapper:empty{ margin:0; }
.nox-pdp .woocommerce-error,
.nox-pdp .woocommerce-message,
.nox-pdp .woocommerce-info{
  list-style:none;margin:0 0 12px;padding:16px 20px;
  background:var(--bg-card);border:1px solid var(--line);border-left-width:2px;
  font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;
}
.nox-pdp .woocommerce-error:last-child,
.nox-pdp .woocommerce-message:last-child,
.nox-pdp .woocommerce-info:last-child{ margin-bottom:0; }
.nox-pdp .woocommerce-error{ border-left-color:var(--error,#a4443b); }
.nox-pdp .woocommerce-message{ border-left-color:var(--success); }
.nox-pdp .woocommerce-info{ border-left-color:var(--gold); }
.nox-pdp .woocommerce-notices-wrapper li{ margin:0;padding:0;list-style:none; }
/* the inline "View cart" / restore links WooCommerce appends to a notice */
.nox-pdp .woocommerce-notices-wrapper .button,
.nox-pdp .woocommerce-notices-wrapper a.wc-forward{
  align-self:flex-start;
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-wide);
  color:var(--ink);text-decoration:underline;
}

/* ============================================================
   [B1] Related compounds — reuses the shop card grid
   ============================================================ */
.pdp-related{ max-width:1280px;margin:0 auto;padding:8px 40px 96px; }
.pdp-related-head{
  font-family:var(--font-serif);font-weight:300;font-size:30px;color:var(--ink);
  margin:0 0 28px;letter-spacing:var(--ls-heading);
}
.pdp-related ul.products{ grid-template-columns:repeat(4,1fr) !important; }
@media(max-width:980px){ .pdp-related ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
@media(max-width:520px){ .pdp-related{ padding:8px 20px 64px; } }

/* ============================================================
   [B2] Sticky add-to-bag bar — slides up once the main CTA
   scrolls out of view (toggled by .is-visible in single-product.js)
   ============================================================ */
.pdp-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(244,241,236,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform var(--dur) var(--ease-soft);
  box-shadow:0 -8px 24px rgba(26,24,20,.07);
}
.pdp-sticky.is-visible{ transform:translateY(0); }
.pdp-sticky-inner{
  max-width:1400px;margin:0 auto;padding:16px 32px;
  display:grid;grid-template-columns:48px 1fr auto auto;gap:24px;align-items:center;
}
.pdp-sticky-thumb{
  width:48px;height:48px;background:var(--bg-warm);border:1px solid var(--line);
  overflow:hidden;position:relative;
}
.pdp-sticky-thumb img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.pdp-sticky-meta{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.pdp-sticky-name{
  font-family:var(--font-serif);letter-spacing:var(--ls-heading);font-weight:400;font-size:16px;color:var(--ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pdp-sticky-size{ font-size:11px;color:var(--ink-mid);text-transform:uppercase;letter-spacing:.18em; }
.pdp-sticky-size:empty{ display:none; }
.pdp-sticky-price{ font-family:var(--font-serif);font-size:20px;color:var(--ink);font-weight:400; }
@media(max-width:600px){
  .pdp-sticky-inner{ grid-template-columns:1fr auto;gap:14px;padding:12px 20px; }
  .pdp-sticky-thumb,.pdp-sticky-price{ display:none; }
}

/* ============================================================
   Specification accordion — collapses the research spec table
   behind a toggle (built in single-product.js). Collapsed by
   default so consumer-facing copy stays short.
   ============================================================ */
.pdp-spec-accordion{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:8px 0 28px;max-width:760px;
}
.pdp-spec-summary{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;padding:20px 0;
  font-family:var(--font-sans);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink);
}
.pdp-spec-summary::-webkit-details-marker{ display:none; }
.pdp-spec-summary::marker{ content:""; }
.pdp-spec-chev{
  font-family:var(--font-serif);font-size:22px;font-weight:300;line-height:1;
  color:var(--ink-mid);transition:transform var(--dur-fast) ease;
}
.pdp-spec-accordion[open] .pdp-spec-summary{ color:var(--ink); }
.pdp-spec-accordion[open] .pdp-spec-chev{ transform:rotate(45deg); }
.pdp-spec-accordion > *:not(summary){ margin-top:0; }
.pdp-spec-accordion table{ margin-bottom:20px; }

/* ============================================================
   Product FAQ — accordion (SEO + buyer questions). Aligned to the
   description column; outputs alongside FAQPage JSON-LD schema.
   ============================================================ */
.pdp-faq{ max-width:1280px;margin:0 auto;padding:0 40px 64px; }
.pdp-faq-head{
  font-family:var(--font-serif);font-weight:300;font-size:26px;color:var(--ink);
  margin:0 0 10px;letter-spacing:var(--ls-heading);max-width:760px;
}
.pdp-faq-item{ max-width:760px;border-bottom:1px solid var(--line); }
.pdp-faq-item:first-of-type{ border-top:1px solid var(--line); }
.pdp-faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;list-style:none;padding:18px 0;
  font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--ink);
}
.pdp-faq-q::-webkit-details-marker{ display:none; }
.pdp-faq-q::marker{ content:""; }
.pdp-faq-chev{
  font-family:var(--font-serif);font-size:21px;font-weight:300;line-height:1;
  color:var(--ink-mid);transition:transform var(--dur-fast) ease;flex:0 0 auto;
}
.pdp-faq-item[open] .pdp-faq-chev{ transform:rotate(45deg); }
.pdp-faq-a{ padding:0 0 20px; }
.pdp-faq-a p{ margin:0;font-family:var(--font-sans);font-size:14px;line-height:1.65;color:var(--ink-mid);max-width:680px; }
@media(max-width:520px){ .pdp-faq{ padding:0 20px 48px; } }

/* ============================================================
   [B-cards] INSIDE THE VIAL — per-product visual cards
   Rendered in single-product.php between the hero and the spec
   table. Ported from the prototype (PRODUCT_CONTENT cards),
   referencing the NOX tokens. Card types: sequence | origin |
   studied | form | type | composition | ingredient.
   ============================================================ */
.pd-cards-stage{ padding:clamp(48px,10vw,168px) 0 clamp(40px,5vw,64px);background:var(--bg-warm); }
.pd-cards-head{ text-align:center;margin-bottom:72px;padding:0 32px; }
.pd-cards-head h2{ font-family:var(--font-serif);font-weight:300;font-size:clamp(36px,3.6vw,48px);line-height:1.05;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 16px; }
.pd-cards-head h2 em{ font-style:italic;color:var(--ink-mid); }
.pd-cards-head p{ color:var(--ink-mid);font-size:15px;max-width:540px;margin:0 auto;line-height:1.6; }
.pd-cards-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:0;max-width:1200px;margin:0 auto;border-top:1px solid var(--line);border-left:1px solid var(--line); }
.pd-cards-grid.three-up{ grid-template-columns:repeat(3,1fr); }
.pd-card{ padding:56px 48px 52px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;background:var(--paper);min-height:320px;height:100%;position:relative; }
.pd-card-icon{ width:32px;height:32px;color:var(--ink);margin-bottom:36px;opacity:.7; }
.pd-card-icon svg{ width:100%;height:100%; }
.pd-card-thumb{ width:104px;height:104px;margin-bottom:32px;background:var(--bg-warm);border:1px solid var(--line);overflow:hidden;position:relative; }
.pd-card-thumb img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
/* scope to the inner chips container only — the card wrapper also carries
   the class `pd-card-sequence`, so an unscoped rule would shrink the whole card. */
.pd-card .pd-card-sequence{ display:flex;flex-wrap:wrap;gap:6px;margin-bottom:32px;max-width:280px; }
.pd-card-seq-chip{ font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.06em;color:var(--ink);background:var(--bg-warm);border:1px solid var(--line);padding:6px 9px;min-width:26px;text-align:center;line-height:1; }
.pd-card-tags{ display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px; }
.pd-card-tag{ font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:7px 12px 6px;line-height:1; }
.pd-card-mini-specs{ margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line); }
.pd-card-mini-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);align-items:baseline; }
.pd-card-mini-row dt{ font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);margin:0; }
.pd-card-mini-row dd{ font-family:var(--font-serif);font-weight:400;font-size:14px;color:var(--ink);margin:0;text-align:right; }
.pd-card-receptors{ display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:32px; }
.pd-card-receptor{ font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:24px;color:var(--ink);letter-spacing:-.01em;line-height:1; }
.pd-card-receptor-sep{ color:var(--gold);font-size:18px;line-height:1; }
.pd-card-attribution{ margin-top:12px;font-family:var(--font-sans);font-style:italic;font-size:11px;letter-spacing:.06em;color:var(--ink-light); }
.pd-card-label{ font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);margin-bottom:10px; }
.pd-card h3{ font-family:var(--font-serif);font-weight:400;font-size:26px;color:var(--ink);line-height:1.1;margin:0 0 18px;letter-spacing:var(--ls-heading); }
.pd-card p{ color:var(--ink-mid);font-size:14px;line-height:1.6;margin-top:auto; }
@media(max-width:900px){
  .pd-cards-stage{ padding:80px 0 48px; }
  .pd-cards-head{ margin-bottom:48px; }
}
@media(max-width:640px){
  /* 2×2 information grid on mobile/tablet — two equal-width cards per row,
     equal heights via the grid's default stretch. The specification rows
     inside each card STACK (label over value) so labels stay horizontal even
     in the narrow cards (the old side-by-side rows crushed labels to one
     character per line). */
  .pd-cards-grid,.pd-cards-grid.three-up{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px !important;border:0 !important;padding:0 20px !important;max-width:100% !important;
  }
  .pd-card{
    padding:20px 16px !important;min-height:0 !important;height:auto !important;
    background:var(--bg-card) !important;border:1px solid #e6dfd5 !important;border-radius:0 !important;
  }
  .pd-card p{ font-size:12px !important;line-height:1.5 !important;margin-top:0 !important; }
  .pd-card-icon{ width:24px !important;height:24px !important;margin-bottom:16px !important; }
  .pd-card-label{ font-size:10px !important;letter-spacing:.16em !important;margin-bottom:8px !important; }
  .pd-card h3{ font-size:18px !important;line-height:1.15 !important;margin-bottom:10px !important; }
  /* Type card — receptor list */
  .pd-card-receptors{ gap:5px !important;margin-bottom:16px !important; }
  .pd-card-receptor{ font-size:15px !important; }
  .pd-card-receptor-sep{ font-size:11px !important; }
  /* Studied-for card — pathway tags */
  .pd-card-tags{ gap:6px !important;margin-bottom:16px !important; }
  .pd-card-tag{ font-size:10px !important;letter-spacing:.1em !important;padding:5px 8px 4px !important; }
  /* Sequence chips */
  .pd-card .pd-card-sequence{ gap:4px !important;margin-bottom:16px !important;max-width:100% !important; }
  .pd-card-seq-chip{ font-size:10px !important;padding:4px 5px !important;min-width:18px !important; }
  /* Specifications card — keep the dividing-line rows */
  .pd-card-mini-specs{ margin-bottom:0 !important; }
  /* Stack each spec row: the label sits on its own line (full card width, always
     horizontal — never one character per line) and the value wraps naturally
     beneath it. Robust inside the narrow 2-column cards; no clipping, no
     horizontal scroll. */
  .pd-card-mini-row{ grid-template-columns:1fr !important;gap:3px !important;padding:9px 0 !important;align-items:start !important; }
  .pd-card-mini-row dt{ font-size:10px !important;letter-spacing:.13em !important;overflow-wrap:normal !important;word-break:normal !important; }
  .pd-card-mini-row dd{ font-size:12px !important;text-align:left !important;overflow-wrap:anywhere !important; }
  .pd-card-attribution{ font-size:10px !important;margin-top:10px !important; }
  .pd-card-thumb{ width:72px !important;height:72px !important;margin-bottom:14px !important; }
}

/* ============================================================
   [B-related] OFTEN STUDIED WITH — curated related compounds
   Featured card (with curatorial note) + two adjacent cards.
   Ported from the prototype; rendered in single-product.php.
   ============================================================ */
.pd-related-stage{ padding:clamp(52px,11vw,168px) 0;background:var(--bg);border-top:0; }
.pd-related-head{ text-align:center;margin-bottom:64px;padding:0 32px; }
.pd-related-head .label{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-mid);margin-bottom:18px; }
.pd-related-head h2{ font-family:var(--font-serif);font-weight:300;font-size:clamp(36px,3.6vw,48px);color:var(--ink);letter-spacing:var(--ls-heading);line-height:1.05;margin:0; }
.pd-related-head h2 em{ font-style:italic;color:var(--ink-mid); }

/* ── Explore Similar Compounds — editorial product grid (reuses .nox-card) ── */
.pd-similar{ padding:clamp(24px,3vw,32px) 0 clamp(56px,8vw,104px);background:var(--bg); }
.pd-similar-head{ text-align:center;margin-bottom:clamp(40px,5vw,64px);padding:0 32px; }
.pd-similar-eyebrow{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light);margin-bottom:18px; }
.pd-similar-title{ font-family:var(--font-serif);font-weight:300;font-size:clamp(32px,3.6vw,46px);color:var(--ink);letter-spacing:var(--ls-heading);line-height:1.05;margin:0 0 14px; }
.pd-similar-copy{ font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--ink-mid);margin:0; }
/* Two-column editorial layout: one featured compound (left ~65%) + two compact
   cards stacked (right ~35%). Hairline borders, cream, NO shadow, NO gradient —
   curated, not another product grid. The section head above is unchanged. */
body.single-product{ overflow-x:clip; }
.pd-similar-layout{
  max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px);
  display:grid;grid-template-columns:64% 1fr;gap:clamp(20px,2.4vw,32px);align-items:stretch;
}

/* ── Featured card (left) — image | information ── */
.pd-feat{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;
  text-decoration:none;color:inherit;background:var(--bg);
  border:1px solid var(--line-soft,#e8e2d8);
  transition:background var(--dur) var(--ease-lux);
}
.pd-feat:hover{ background:var(--bg-warm); }
.pd-feat-media{
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg-warm);padding:clamp(20px,2.6vw,44px);min-height:320px;
}
.pd-feat-media img{ display:block;width:100%;height:100%;max-height:360px;object-fit:contain;transition:transform .6s var(--ease-lux); }
.pd-feat:hover .pd-feat-media img{ transform:scale(1.02); }
.pd-feat-body{ display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px); }
.pd-feat-label{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-light);margin-bottom:16px; }
.pd-feat-title{ display:block;font-family:var(--font-serif);font-weight:300;font-size:clamp(28px,2.6vw,38px);line-height:1.04;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 16px; }
.pd-feat-note{ display:block;font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:clamp(15px,1.15vw,17px);line-height:1.5;color:var(--ink-mid);margin:0 0 14px;max-width:36ch; }
.pd-feat-sum{ display:block;font-family:var(--font-sans);font-size:13px;line-height:1.55;color:var(--ink-mid);margin:0 0 28px; }
.pd-feat-foot{ display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line-soft,#e8e2d8); }
.pd-feat-price{ font-family:var(--font-serif);font-weight:300;font-size:18px;color:var(--ink); }
.pd-feat-view{ display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--ink); }
.pd-feat-view span{ display:inline-block;transition:transform var(--dur) var(--ease-lux); }
.pd-feat:hover .pd-feat-view span{ transform:translateX(5px); }

/* ── Compact cards (right) — two stacked, generous gap ── */
.pd-mini-col{ display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px); }
.pd-mini{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;flex:1 1 auto;
  text-decoration:none;color:inherit;background:var(--bg);
  border:1px solid var(--line-soft,#e8e2d8);padding:20px;
  transition:background var(--dur) var(--ease-lux);
}
.pd-mini:hover{ background:var(--bg-warm); }
.pd-mini-media{ display:flex;align-items:center;justify-content:center;width:96px;height:96px;flex:0 0 auto;overflow:hidden;background:var(--bg-warm);padding:8px; }
.pd-mini-media img{ display:block;max-width:100%;max-height:100%;object-fit:contain;transition:transform .6s var(--ease-lux); }
.pd-mini:hover .pd-mini-media img{ transform:scale(1.03); }
.pd-mini-body{ display:flex;flex-direction:column;min-width:0; }
.pd-mini-label{ display:block;font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-light);margin-bottom:8px; }
.pd-mini-title{ display:block;font-family:var(--font-serif);font-weight:300;font-size:clamp(19px,1.5vw,23px);line-height:1.05;letter-spacing:var(--ls-heading);color:var(--ink);margin:0 0 8px; }
.pd-mini-price{ font-family:var(--font-sans);font-size:12.5px;color:var(--ink-mid); }

/* Desktop — a larger, more generous treatment of the same layout. Scoped to
   >900px so the mobile/tablet stack below is left completely unchanged. */
@media(min-width:901px){
  .pd-similar-layout{ max-width:1360px;gap:clamp(24px,2.6vw,40px); }
  .pd-feat-media{ min-height:460px;padding:clamp(32px,3.6vw,60px); }
  .pd-feat-media img{ max-height:500px; }
  .pd-feat-body{ padding:clamp(40px,3.8vw,64px) clamp(32px,3vw,54px); }
  .pd-feat-label{ font-size:12px;margin-bottom:20px; }
  .pd-feat-title{ font-size:clamp(38px,3vw,52px);margin-bottom:20px; }
  .pd-feat-note{ font-size:clamp(17px,1.35vw,20px);margin-bottom:18px;max-width:38ch; }
  .pd-feat-sum{ font-size:14px;margin-bottom:34px; }
  .pd-feat-foot{ padding-top:24px; }
  .pd-feat-price{ font-size:21px; }
  .pd-mini-col{ gap:clamp(24px,2.6vw,40px); }
  .pd-mini{ padding:26px;gap:26px; }
  .pd-mini-media{ width:128px;height:128px;padding:10px; }
  .pd-mini-label{ font-size:11px;margin-bottom:10px; }
  .pd-mini-title{ font-size:clamp(23px,1.7vw,28px);margin-bottom:10px; }
  .pd-mini-price{ font-size:13.5px; }
}

/* Tablet / mobile — the section stacks (featured above the two compact cards),
   but the featured card KEEPS the desktop arrangement: image on the left, text
   on the right. Sized down so it reads comfortably on a phone. */
@media(max-width:900px){
  .pd-similar-layout{ grid-template-columns:1fr;gap:clamp(18px,4vw,28px); }
  .pd-feat{ grid-template-columns:minmax(0,40%) 1fr; }
  .pd-feat-media{ min-height:0;padding:clamp(14px,3.5vw,26px); }
  .pd-feat-media img{ max-height:none; }
  .pd-feat-body{ padding:clamp(20px,4.5vw,32px); }
}
@media(max-width:560px){
  .pd-similar{ padding:28px 0 56px; }
  .pd-feat{ grid-template-columns:minmax(0,38%) 1fr; }
  .pd-feat-media{ padding:clamp(10px,3vw,18px); }
  .pd-feat-body{ padding:18px 18px 18px 20px; }
  .pd-feat-label{ margin-bottom:12px; }
  .pd-feat-title{ font-size:22px;margin-bottom:12px; }
  .pd-feat-note{ font-size:13.5px;margin-bottom:12px; }
  .pd-feat-sum{ font-size:12.5px;margin-bottom:20px; }
  .pd-feat-foot{ padding-top:16px; }
  .pd-mini{ padding:16px;gap:16px; }
  .pd-mini-media{ width:84px;height:84px; }
}
.pd-related-layout{ max-width:1200px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:stretch; }
.pd-related-featured{ display:grid;grid-template-columns:1fr minmax(0,1fr);background:var(--bg-card);border:1px solid var(--line);border-radius:0;cursor:pointer;text-decoration:none;transition:background var(--dur) ease,transform var(--dur) ease,box-shadow var(--dur) ease;overflow:hidden; }
.pd-related-featured:hover{ background:var(--bg-warm);transform:translateY(-4px);box-shadow:var(--shadow-md); }
.pd-related-featured-img{ background:var(--bg-warm);position:relative;overflow:hidden;min-height:340px; }
.pd-related-featured-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.pd-related-featured-body{ padding:40px 36px;display:flex;flex-direction:column;justify-content:center; }
.pd-related-featured-label{ font-family:var(--font-sans);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid);margin-bottom:14px; }
.pd-related-featured-body h3{ font-family:var(--font-serif);font-weight:300;font-size:36px;color:var(--ink);line-height:1;letter-spacing:var(--ls-heading);margin:0 0 18px; }
.pd-related-featured-note{ font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:15px;line-height:1.5;color:var(--ink-mid);margin:0 0 20px;padding-left:14px;border-left:2px solid var(--gold); }
.pd-related-featured-tagline{ color:var(--ink-mid);font-size:13.5px;line-height:1.6;margin:0 0 24px; }
.pd-related-featured-foot{ display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--line); }
.pd-related-featured-price{ font-family:var(--font-serif);font-size:18px;color:var(--ink); }
.pd-related-featured-price .woocommerce-Price-amount{ color:inherit; }
.pd-related-featured-cta{ display:inline-flex;align-items:center;gap:10px;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink); }
.pd-related-arrow{ width:18px;height:1px;background:var(--ink);position:relative;transition:width .3s ease; }
.pd-related-arrow::after{ content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid var(--ink);border-top:1px solid var(--ink);transform:rotate(45deg); }
.pd-related-featured:hover .pd-related-arrow{ width:28px; }
.pd-related-adjacent{ display:flex;flex-direction:column;gap:24px; }
.pd-related-mini{ display:grid;grid-template-columns:120px minmax(0,1fr);gap:0;background:var(--bg-card);border:1px solid var(--line);border-radius:0;cursor:pointer;text-decoration:none;overflow:hidden;transition:background var(--dur) ease,transform var(--dur) ease,box-shadow var(--dur) ease;flex:1;align-items:stretch; }
.pd-related-mini:hover{ background:var(--bg-warm);transform:translateY(-4px);box-shadow:var(--shadow-md); }
.pd-related-mini-img{ background:var(--bg-warm);position:relative;overflow:hidden; }
.pd-related-mini-img img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.pd-related-mini-body{ padding:20px 24px;display:flex;flex-direction:column;justify-content:center;gap:6px; }
.pd-related-mini-label{ font-family:var(--font-sans);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-mid); }
.pd-related-mini-body h4{ font-family:var(--font-serif);font-weight:400;font-size:22px;color:var(--ink);line-height:1;letter-spacing:var(--ls-heading);margin:0; }
.pd-related-mini-price{ margin-top:6px;font-family:var(--font-serif);font-size:14px;color:var(--ink-mid); }
.pd-related-mini-price .woocommerce-Price-amount{ color:inherit; }
@media(max-width:980px){
  .pd-related-stage{ padding:80px 0; }
  .pd-related-layout{ grid-template-columns:1fr;gap:24px; }
  .pd-related-featured-img{ min-height:280px; }
  .pd-related-adjacent{ flex-direction:row; }
  .pd-related-mini{ flex:1; }
}
/* ── Mobile: editorial 2 + 1 composition — FLUSH (no boxes, hairlines only,
      edge to edge), matching the catalogue cards. Same components, layout
      only. Feature ~63%, mini column ~37%, heights aligned. ── */
@media(max-width:640px){
  /* Hero sits flush to the edges by zeroing the wrap's side padding (the image
     fills its column naturally — no breakout, no grid glitch). The text column
     keeps its own 20px inset. Top padding is tight so the image sits just under
     the breadcrumb rather than floating in dead space. */
  .pdp-wrap{ padding:12px 0 28px;gap:28px; }
  .pdp-info{ padding-left:20px;padding-right:20px; }

  /* Tighten the chapter rhythm — the desktop clamps leave far too much dead
     space between sections on a phone. */
  .pd-cards-stage{ padding:52px 0 40px; }
  .pd-cards-head{ margin-bottom:32px; }
  .pd-specs-stage{ padding:40px 0 28px; }
  .pd-related-stage{ padding:52px 0; }
  .pd-related-head{ margin-bottom:36px;padding:0 20px; }
  /* PDP editorial photo bands: shorter on a phone so they punctuate the flow
     rather than read as dead space between chapters. */
  body.single-product .nox-editorial-band{ height:clamp(150px,40vw,210px) !important; }
  /* flush edge-to-edge composition; hairline top/bottom, not a boxed layout */
  .pd-related-layout{ grid-template-columns:63% 1fr;gap:0;align-items:stretch;padding:0;max-width:100%;
    border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft); }
  /* strip the card boxes — flush like the rest of the cards */
  .pd-related-featured,
  .pd-related-mini{ background:var(--bg) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important; }
  /* hairline between feature and the mini column, and between the two minis */
  .pd-related-adjacent{ display:grid;grid-template-rows:1fr 1fr;gap:0;height:100%;border-left:1px solid var(--line-soft); }
  .pd-related-mini:first-child{ border-bottom:1px solid var(--line-soft) !important; }

  /* feature card — image on top (flush), compact body */
  .pd-related-featured{ grid-template-columns:1fr; }
  .pd-related-featured-img{ min-height:0;aspect-ratio:4/5; }
  .pd-related-featured-body{ padding:18px 18px 20px;justify-content:flex-start; }
  .pd-related-featured-note,
  .pd-related-featured-tagline{ display:none; }
  .pd-related-featured-label{ margin-bottom:10px; }
  .pd-related-featured-body h3{ font-size:24px;margin:0 0 14px; }
  .pd-related-featured-foot{ padding-top:14px; }

  /* mini card — image on top (flush), name + price below */
  .pd-related-mini{ grid-template-columns:1fr;grid-template-rows:1fr auto;height:100%;flex:initial; }
  .pd-related-mini-img{ min-height:0; }
  .pd-related-mini-body{ padding:12px 16px 14px;justify-content:flex-start;gap:4px; }
  .pd-related-mini-body h4{ font-size:17px; }
  .pd-related-mini-price{ margin-top:2px;font-size:13px; }
}

/* ============================================================
   [B-specs] REFERENCE DATA & ANALYTICAL DETAIL — collapsible
   Native <details>; rows pulled from the product's spec table.
   ============================================================ */
/* Tight, composed rhythm: the accordion no longer floats in a cream void.
   Top ~64px (was up to 150) sits it close under the cards band; bottom 32px +
   the .pd-similar top 32px give a controlled ~64px to the next section when
   collapsed, and ~48–64px below the expanded content. */
.pd-specs-stage{ padding:clamp(36px,4.5vw,64px) 0 clamp(24px,3vw,32px);background:var(--bg); }
.pd-specs-toggle{ max-width:1100px;margin:0 auto;padding:0 32px; }
.pd-specs-summary{ width:100%;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;cursor:pointer;font-family:var(--font-serif);font-weight:300;font-size:28px;color:var(--ink);letter-spacing:var(--ls-heading);transition:background var(--dur-fast);text-align:left; }
.pd-specs-summary::-webkit-details-marker{ display:none; }
.pd-specs-summary::marker{ content:""; }
.pd-specs-summary:hover{ background:rgba(154,133,89,.04); }
.pd-specs-summary em{ font-style:italic;color:var(--ink-mid); }
.pd-specs-toggle-icon{ width:20px;height:20px;color:var(--ink);flex:0 0 auto;transition:transform var(--dur) ease; }
.pd-specs-toggle[open] .pd-specs-toggle-icon{ transform:rotate(45deg); }
.pd-specs-content-inner{ padding:44px 0 0; }
/* accordion glides open — content fades + settles rather than snapping in */
.pd-specs-toggle[open] .pd-specs-content-inner{ animation:noxSpecOpen .5s var(--ease-lux) both; }
@keyframes noxSpecOpen{ from{ opacity:0;transform:translateY(-10px); } to{ opacity:1;transform:none; } }
.specs-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;border-top:1px solid var(--line); }
.spec-row{ display:grid;grid-template-columns:160px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line-soft);align-items:baseline; }
.spec-row .lbl{ font-family:var(--font-sans);font-size:11px;font-weight:500;color:var(--ink-mid);text-transform:uppercase;letter-spacing:var(--ls-eyebrow); }
.spec-row .val{ font-family:var(--font-sans);color:var(--ink);font-size:14px;font-weight:400; }
.pd-specs-content-inner > .compliance-banner:first-child{ margin-top:0; } /* note alone in the panel (no spec rows) — drop the top gap */
.compliance-banner{ margin-top:48px;padding:28px 32px;background:var(--bg-card);border:1px solid var(--line);border-radius:0;display:flex;gap:20px;align-items:flex-start; }
.compliance-banner svg{ color:var(--ink-mid);flex-shrink:0;margin-top:2px; }
.compliance-banner strong{ color:var(--ink);display:block;margin-bottom:8px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.14em; }
.compliance-banner p{ color:var(--ink-mid);font-size:13.5px;line-height:1.7;margin:0; }
.compliance-banner a{ color:var(--ink);text-decoration:underline; }
@media(max-width:760px){
  .specs-grid{ grid-template-columns:1fr; }
  .pd-specs-summary{ font-size:22px; }
}

/* ============================================================
   [B-faq] Frequently Asked Questions — per-compound accordion.
   Full-width cream section, serif heading, thin charcoal dividers,
   minimal accordion (one open at a time via nox JS), plus→minus icon,
   smooth 250ms height via grid-template-rows.
   ============================================================ */
.pd-faq{ padding:clamp(56px,9vw,120px) 0 clamp(64px,10vw,140px);background:var(--bg); }
.pd-faq-head{ text-align:center;margin-bottom:clamp(40px,5vw,60px);padding:0 32px; }
.pd-faq-eyebrow{ display:block;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:var(--ls-eyebrow-wide);color:var(--ink-light);margin-bottom:18px; }
.pd-faq-title{ font-family:var(--font-serif);font-weight:300;font-size:clamp(32px,3.6vw,46px);color:var(--ink);letter-spacing:var(--ls-heading);line-height:1.05;margin:0 0 14px; }
.pd-faq-copy{ font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--ink-mid);margin:0; }

.pd-faq-list{ max-width:820px;margin:0 auto;padding:0 32px;border-top:1px solid rgba(26,26,26,.12); }
.pd-faq-item{ border-bottom:1px solid rgba(26,26,26,.12); }
.pd-faq-q{
  width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:none;border:0;cursor:pointer;text-align:left;padding:28px 4px;
  font-family:var(--font-serif);font-weight:300;font-size:clamp(19px,2vw,23px);line-height:1.3;letter-spacing:var(--ls-heading);color:var(--ink);
  transition:color var(--dur-fast) var(--ease-lux);
}
.pd-faq-q:hover{ color:var(--ink-mid); }
.pd-faq-q-text{ flex:1 1 auto;min-width:0; }
/* plus icon → the vertical stroke rotates flat into the horizontal on open = minus */
.pd-faq-icon{ position:relative;flex:0 0 auto;width:18px;height:18px;display:block; }
.pd-faq-icon::before,
.pd-faq-icon::after{ content:'';position:absolute;left:50%;top:50%;background:var(--ink);transition:transform .25s var(--ease-lux); }
.pd-faq-icon::before{ width:16px;height:1.5px;transform:translate(-50%,-50%); }
.pd-faq-icon::after{ width:1.5px;height:16px;transform:translate(-50%,-50%); }
.pd-faq-item.is-open .pd-faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
/* answer — smooth height via grid-rows (0fr → 1fr), 250ms */
.pd-faq-a{ display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s var(--ease-lux); }
.pd-faq-item.is-open .pd-faq-a{ grid-template-rows:1fr; }
.pd-faq-a-inner{ overflow:hidden;min-height:0; }
.pd-faq-a-inner p{
  font-family:var(--font-sans);font-size:14.5px;line-height:1.75;color:var(--ink-mid);
  margin:0;padding:0 40px 30px 4px;max-width:700px;
}
@media(prefers-reduced-motion:reduce){
  .pd-faq-a{ transition:none; }
  .pd-faq-icon::before,.pd-faq-icon::after{ transition:none; }
}
@media(max-width:600px){
  .pd-faq-list{ padding:0 20px; }
  .pd-faq-q{ padding:22px 2px;font-size:17px;gap:16px; }
  .pd-faq-a-inner p{ padding:0 6px 24px 2px; }
}

/* NOX-SINGLE-SIZE — when a product has only one size option, let that tile span the full block instead of leaving an empty second grid cell. */
.pdp-sizes .pdp-size:only-child{grid-column:1 / -1}

/* NOX-OOS-PRICE - keep the price visible on out-of-stock size tiles */
.pdp-size.is-disabled .pdp-size-price{ font-family:var(--font-serif);font-size:16px;font-weight:400;text-transform:none;letter-spacing:normal;color:inherit;display:flex;flex-direction:column;gap:4px;align-items:flex-start; }
.pdp-size-soldout{ font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-light); }