/* ==========================================================================
   Product detail — 70/30 layout and the blocks the 15 August bundle adds.

   The client's seven sections keep their own markup; this file only changes
   where they sit. Inside the 70 % column a section's .wrap is a no-op — the
   column already sets the measure — and the alternating mist bands are dropped,
   because a full-bleed band cut down to 70 % width reads as a stripe rather
   than as rhythm. Hairlines separate the blocks instead.
   ========================================================================== */

.zpdp{padding:var(--sec-y-tight) 0}

.zpdp-grid{display:grid;gap:var(--s-7);align-items:start}

@media (min-width:1000px){
  /* 70/30, as specified. minmax(0,…) so a wide table scrolls inside the
     column instead of stretching the grid and pushing the sidebar off. */
  .zpdp-grid{grid-template-columns:minmax(0,7fr) minmax(0,3fr)}
}

.zpdp-main>.sec{padding:0}
.zpdp-main>.sec--mist{background:transparent}
.zpdp-main>.sec+.sec{margin-top:var(--s-7);padding-top:var(--s-7);border-top:1px solid var(--line)}
.zpdp-main .wrap{max-width:none;margin:0;padding:0}
.zpdp-main .hd{margin-bottom:var(--s-6)}
.zpdp-main .pdp-supply{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

.zpdp-h3{
  font-family:var(--data);font-size:var(--fs-h3);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);margin:var(--s-6) 0 var(--s-4);
}

/* Label/value rows. One column in the sidebar, two where there is room. */
/* Every grid below states minmax(0,1fr) rather than relying on the implicit
   `auto` column. An implicit `auto` track is floored at min-content and capped
   at max-content, and grid does not shrink it to fit a narrower parent — so at
   1024 the sidebar's own auto column resolved to 381px inside the 268.8px
   track the 70/30 grid gave it, and .zpdp-box overhung the viewport by 72px
   (documentElement.scrollWidth 1096 against clientWidth 1024, both languages).
   minmax(0,1fr) removes the min-content floor and the box tracks its column. */
.zpdp-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line-2)}
.zpdp-row{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-2);
}
.zpdp-row-l{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--muted);
}
.zpdp-row-v{font-size:var(--fs-small);color:var(--ink);overflow-wrap:anywhere}

@media (min-width:620px){
  .zpdp-rows--wide .zpdp-row{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:var(--s-4);align-items:baseline}
}

/* Checklist-shaped blocks — regulatory lines, traceability items. The bundle
   draws these with ticks. A tick is an assertion, so they get the label and the
   pending marker and no tick at all until there is evidence behind them. */
.zpdp-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.zpdp-item{
  display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;justify-content:space-between;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-2);
}
.zpdp-item-n{font-size:var(--fs-small);color:var(--ink)}

.zpdp-acts-row{margin-top:var(--s-5)}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.zpdp-side{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);align-content:start}

@media (min-width:1000px){
  /* Sticky is the bundle's optional nice-to-have. The header is sticky at
     ~70px, so the offset clears it. */
  .zpdp-side{position:sticky;top:88px}
}

@media (max-width:999px){
  /* The hero already provides the essential record and both primary actions.
     Putting this 15-row procurement card first delayed the specification by
     roughly two phone screens. In the stacked layout the technical content now
     stays in document order and the supplementary buying card follows it. */
  .zpdp-side{order:0}
}

.zpdp-box{
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--gap);box-shadow:var(--e-1);
}
.zpdp-box-h{font-size:var(--fs-h3);margin:0 0 var(--s-4);line-height:var(--lh-h)}
.zpdp-box-sh{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);margin:var(--s-5) 0 var(--s-3);
}
.zpdp-box .zpdp-row{padding:var(--s-3) 0}

.zpdp-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);margin-top:var(--s-5)}
.zpdp-btn{width:100%;justify-content:center;text-align:center}

.zpdp-note{
  margin:var(--s-4) 0 0;font-size:var(--fs-micro);line-height:var(--lh-small);color:var(--muted);
}
.zpdp-box--ask .zpdp-ask-p{margin:0 0 var(--s-4);font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-small)}

/* --------------------------------------------------------------------------
   Related products
   -------------------------------------------------------------------------- */
.zpdp-rel{
  display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.zpdp-card{
  display:flex;flex-direction:column;gap:var(--s-1);
  background:var(--card);padding:var(--gap);text-decoration:none;color:inherit;
  transition:background var(--dur) var(--ease);
}
.zpdp-card:hover,.zpdp-card:focus-visible{background:var(--white)}
.zpdp-card-w{
  font-family:var(--data);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);text-transform:uppercase;
  color:var(--sage);margin-bottom:var(--s-2);
}
.zpdp-card-n{font-size:var(--fs-small);font-weight:var(--fw-micro);line-height:var(--lh-h3)}
.zpdp-card-b{font-size:var(--fs-small);color:var(--muted)}
.zpdp-card-m{font-family:var(--data);font-size:var(--fs-micro);color:var(--sage);margin-top:var(--s-2)}

/* Related products are deliberately outside the 70/30 grid: buyers finish the
   specification and procurement details first, then get a full-width next-step
   choice rather than a narrow card stack buried inside the data column. */
.zpdp-grid+.zpdp-sec{margin-top:var(--s-8);padding:var(--s-7) 0 0;border-top:1px solid var(--line)}

/* ==========================================================================
   Selected redesign — Botanical Evidence Story

   The product now reads as one evidence journey rather than a 70/30 article
   with a second, competing copy of the same data in a sticky sidebar. The
   deep ingredient record is the page's signature; everything below it stays
   quiet, square and ledger-like so the botanical material remains the visual
   centre of gravity.
   ========================================================================== */

.single-produkt .pdp-hero{padding:40px 0 44px}
.single-produkt .pdp-hero .back{margin-bottom:var(--s-4)}
.single-produkt .pdp-hero-split{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:56px;align-items:center;margin-top:var(--s-4)
}
.single-produkt .pdp-hero-media,.single-produkt .pdp-hero-copy{min-width:0}
.single-produkt .pdp-editorial{margin:0}
.single-produkt .pdp-hero-media .ph{border:1px solid var(--line-2);background:var(--card)}
.single-produkt .pdp-hero-media .ph-caption{
  margin:0;padding:var(--s-2) var(--s-3);background:var(--mist);text-align:center
}
.single-produkt .pdp-hero-copy .eyebrow{margin-bottom:var(--s-3)}
.single-produkt .pdp-hero-copy .h1-sm{font-size:clamp(2.15rem,3.2vw,var(--fs-display));margin-bottom:var(--s-2)}
.single-produkt .pdp-hero-copy .flag{max-width:58ch}
.single-produkt .pdp-hero-copy .acts{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);justify-items:start;
  width:min(100%,390px);margin-top:var(--s-5)!important
}
.single-produkt .pdp-hero-copy .btn{min-width:0;width:100%;justify-content:center;text-align:center}

/* Full-width verified ingredient record. */
.pdp-record-band{padding:var(--s-5) 0 var(--s-6);background:var(--deep);color:var(--on-deep)}
.pdp-record-band-label{
  margin:0 0 var(--s-4);font-family:var(--data);font-size:var(--fs-micro);
  font-weight:var(--fw-micro);line-height:var(--lh-micro);letter-spacing:var(--ls-micro);
  text-transform:uppercase;color:var(--focus-on-dark)
}
.pdp-record-band-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.pdp-record-band-item{
  min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:var(--s-3);row-gap:var(--s-1);padding:0 var(--s-5);border-left:1px solid var(--line-on-deep)
}
.pdp-record-band-item:first-child{padding-left:0;border-left:0}
.pdp-record-band-item:last-child{padding-right:0}
.pdp-record-band-icon{grid-row:1/3;width:26px;height:26px;margin-top:2px;color:var(--focus-on-dark)}
.pdp-record-band dt{
  min-width:0;font-family:var(--data);font-size:var(--fs-micro);line-height:var(--lh-micro);
  color:var(--on-deep-2)
}
.pdp-record-band dd{
  min-width:0;margin:0;font-size:var(--fs-small);font-weight:var(--fw-heading);
  line-height:var(--lh-small);color:#fff;overflow-wrap:anywhere
}
.pdp-record-band .prov-value--confirmed{border-left:0;padding-left:0;color:#fff}

/* The selected mock uses five meaningful waypoints, centred and calm. */
.single-produkt .page-jump{top:62px;box-shadow:none;background:rgba(255,255,255,.98)}
.single-produkt .page-jump-inner{justify-content:center;min-height:60px}
.single-produkt .page-jump-label{display:none}
.single-produkt .page-jump-links{gap:clamp(var(--s-5),4vw,var(--s-8));overflow-x:auto}
.single-produkt .page-jump-links a{min-height:58px;color:var(--ink)}

/* Applications: real copy and test scope on the left, the WordPress media
   asset on the right. The full test list remains available as a disclosure. */
.pdp-story-applications{padding:40px 0 16px;background:var(--paper)}
.pdp-story-app-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:stretch;min-height:350px;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--radius);overflow:hidden
}
.pdp-story-app-copy{min-width:0;padding:var(--s-7)}
.pdp-story-app-copy .hd{margin:0 0 var(--s-4)}
.pdp-story-app-copy .lede{font-size:var(--fs-body);line-height:var(--lh-body)}
.pdp-story-quality-link{margin:var(--s-4) 0 0}
.pdp-story-app-media{min-width:0;min-height:100%;margin:0;background:var(--deep)}
.pdp-story-app-image{display:block;width:100%;height:100%;min-height:350px;object-fit:cover}

/* Native disclosures keep secondary evidence available without repeating the
   same pending sentence through the page. */
.pdp-disclosure{margin-top:var(--s-5);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.pdp-disclosure summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;
  padding:0;cursor:pointer;list-style:none;font-family:var(--data);font-size:var(--fs-small);
  font-weight:var(--fw-micro);color:var(--sage)
}
.pdp-disclosure summary::-webkit-details-marker{display:none}
.pdp-disclosure summary .en-icon{transition:transform var(--dur) var(--ease)}
.pdp-disclosure[open] summary .en-icon--chevron-down{transform:rotate(180deg)}
.pdp-disclosure-body{padding:0 0 var(--s-5)}
.pdp-disclosure-body .testlist{margin-top:0}

/* Full-width editorial bands. */
.pdp-story{padding:0 0 var(--s-8)}
.pdp-story>.wrap{display:grid;gap:var(--s-4)}
.pdp-story-band{padding:var(--s-7);background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius)}
.pdp-story-band:nth-of-type(even){background:#fbfcfa}
.pdp-story-band-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--s-8);align-items:start}
.pdp-story-band-intro,.pdp-story-band-content{min-width:0}
.pdp-story-band .hd{margin:0}
.pdp-story-band .hd>div{max-width:48ch}
.pdp-story-band .hd .page-intro,.pdp-story-band .hd p{max-width:48ch}
.pdp-story-band-intro>.prov-legend{margin-top:var(--s-5)}
.pdp-story .pdp-tablewrap{border:0;border-radius:0;background:transparent}
.pdp-story .pdp-table th,.pdp-story .pdp-table td{padding:var(--s-3) var(--s-2);border-color:var(--line-2)}
.pdp-story .pdp-table th{width:42%;padding-left:0;white-space:normal}
.pdp-story .pdp-table td{padding-right:0}
.pdp-story-more{margin-top:var(--s-4)}
.pdp-story-actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.pdp-story-actions .btn{flex:1 1 220px;justify-content:center;text-align:center}

/* Evidence status rows read as one ledger, not seven cards. */
.pdp-docs--story{margin:0;border-top:1px solid var(--line-2)}
.pdp-docs--story .pdp-doc{padding:var(--s-3) 0;border-color:var(--line-2);background:transparent}
.pdp-docs--story .pdp-doc-n{display:flex;align-items:center;gap:var(--s-2)}
.pdp-docs--story .pdp-doc-n .en-icon{color:var(--sage)}
.pdp-story-link-list{display:grid;gap:var(--s-1);margin-top:var(--s-4)}
.pdp-story-link-list .more{width:max-content;max-width:100%}

/* Formulation remains factual; compliance and all other unreleased values are
   gathered in one restrained amber panel. */
.pdp-story-band--formulation .pdp-story-band-grid{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)}
.pdp-story-band--formulation .zpdp-h3{margin-top:var(--s-5);font-size:var(--fs-small)}
/* Was .pdp-pending-panel — an amber warning box headed "Awaiting release".
   The warning treatment went with the review apparatus; what is left is a
   quiet aside holding a note and two links. */
.pdp-story-aside{min-width:0;padding:var(--s-5);background:var(--mist);border:1px solid var(--line);border-radius:var(--radius)}
.pdp-disclosure--pending{border-color:var(--amber-bd)}
.pdp-disclosure--pending summary{color:var(--amber)}
.pdp-disclosure--pending summary span[aria-hidden="true"]{
  display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  margin-left:auto;border:1px solid var(--amber-bd);border-radius:var(--radius-full);font-variant-numeric:tabular-nums
}
.pdp-pending-list{margin:0;padding-left:var(--s-5);columns:2;column-gap:var(--s-6);font-size:var(--fs-small);color:var(--muted)}
.pdp-pending-list li{break-inside:avoid;margin:0 0 var(--s-2)}
.pdp-pending-note{margin-top:var(--s-4)!important}

/* Sourcing and supply are compact decision bands near the end of the story. */
.pdp-story-band--sourcing{background:var(--mist)}
.pdp-story-band--sourcing .zpdp-rows{border-top-color:rgba(44,95,45,.18)}
.pdp-story-band--sourcing .zpdp-row{border-bottom-color:rgba(44,95,45,.18)}
.pdp-supply-strip{
  display:grid;grid-template-columns:minmax(190px,.9fr) minmax(0,2fr) auto;align-items:center;
  gap:var(--s-6);padding:var(--s-5) var(--s-7);background:#fbfcfa;border:1px solid var(--line-2);border-radius:var(--radius)
}
.pdp-supply-strip-head .eyebrow{margin:0 0 var(--s-1)}
.pdp-supply-strip-head h2{margin:0;font-size:var(--fs-h3)}
.pdp-supply-strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);margin:0}
.pdp-supply-strip-grid>div{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 var(--s-2);min-width:0}
.pdp-supply-strip-grid .en-icon{grid-row:1/3;color:var(--sage);margin-top:2px}
.pdp-supply-strip-grid dt{font-family:var(--data);font-size:var(--fs-micro);color:var(--sage)}
.pdp-supply-strip-grid dd{min-width:0;margin:var(--s-1) 0 0;font-size:var(--fs-small);overflow-wrap:anywhere}
.pdp-supply-strip-action{white-space:nowrap}

/* Related products now finish the evidence story as a compact comparison row. */
.pdp-story>.wrap>.zpdp-sec{margin:0;padding:var(--s-6) 0 0;border:0}
.pdp-story>.wrap>.zpdp-sec .hd{margin-bottom:var(--s-4)}
.pdp-story .zpdp-rel{grid-template-columns:repeat(4,minmax(0,1fr));border-radius:var(--radius)}
.pdp-story .zpdp-card{padding:var(--s-4)}
.pdp-story .zpdp-card-w{margin-bottom:var(--s-1)}

@media (max-width:1000px){
  .single-produkt .pdp-hero-split{grid-template-columns:1fr;gap:var(--s-6)}
  .single-produkt .pdp-hero-copy{order:-1}
  .single-produkt .pdp-hero-media{max-width:760px}
  .pdp-record-band-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) 0}
  .pdp-record-band-item:nth-child(4){border-left:0;padding-left:0}
  .pdp-record-band-item:nth-child(3){padding-right:0}
  .pdp-story-app-grid,.pdp-story-band-grid,.pdp-story-band--formulation .pdp-story-band-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .pdp-story-app-media{min-height:300px}
  .pdp-story-app-image{min-height:300px;max-height:480px}
  .pdp-supply-strip{grid-template-columns:1fr;gap:var(--s-5)}
  .pdp-supply-strip-action{justify-self:start}
  .pdp-story .zpdp-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .single-produkt .pdp-hero{padding:var(--s-6) 0}
  .single-produkt .pdp-hero-copy .acts{width:100%}
  .pdp-record-band{padding:var(--s-5) 0}
  .pdp-record-band-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) 0}
  .pdp-record-band-item,.pdp-record-band-item:nth-child(3),.pdp-record-band-item:nth-child(4){padding:0 var(--s-4);border-left:1px solid var(--line-on-deep)}
  .pdp-record-band-item:nth-child(odd){padding-left:0;border-left:0}
  .pdp-record-band-item:nth-child(even){padding-right:0}
  .single-produkt .page-jump-inner{justify-content:flex-start}
  .single-produkt .page-jump-links{gap:var(--s-5)}
  .pdp-story-applications{padding-top:var(--s-6)}
  .pdp-story-app-copy,.pdp-story-band{padding:var(--s-5)}
  .pdp-story-band-grid{gap:var(--s-5)}
  .pdp-story-link-list .more{width:100%;min-width:0;white-space:normal;justify-content:space-between}
  .pdp-story-link-list .more .en-icon{flex:0 0 auto}
  .pdp-pending-list{columns:1}
  .pdp-supply-strip{padding:var(--s-5)}
  .pdp-supply-strip-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .pdp-supply-strip-action{width:100%;justify-content:center}
  .pdp-story .zpdp-rel{grid-template-columns:1fr}
}