/* SourcingPromo — the product page's own layout: the gallery and its summary column, the standard
   configuration list, the decoration cards, the customization split, the four delivery steps and the
   closing band. Tokens, .btn, .lede, .facts, .grid and .prose come from tokens.css and style.css;
   only "pd-" classes live here. */

/* ---------- the top: gallery left, everything a buyer checks on the right ---------- */
.pd-hero__grid{display:grid;gap:clamp(1.5rem,4vw,2.75rem);margin-top:1.25rem}
@media (min-width:900px){
  /* the gallery and the standard values share the left column, so the two sides end at a similar
     height instead of the price column running away from an empty half-page */
  .pd-hero__grid{
    grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
    grid-template-areas:"media info" "std info";
    align-items:start;
  }
}
.pd-hero__media{grid-area:media;min-width:0}
.pd-hero__std{grid-area:std;min-width:0}
.pd-hero__info{grid-area:info;display:flex;flex-direction:column;gap:.85rem;min-width:0}
.pd-hero__eyebrow{
  margin:0;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.pd-hero__eyebrow a{text-decoration:none;color:inherit}
.pd-hero__eyebrow a:hover{color:var(--brand-dark)}
.pd-hero__title{font-size:clamp(1.75rem,1.2rem + 2vw,2.625rem);line-height:1.08;letter-spacing:-.03em}
.pd-hero__sku{margin:-.35rem 0 0;font-size:var(--step--1);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* the three facts a buyer reads first, side by side like a small table */
.pd-key{
  display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
  margin:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden;
}
.pd-key>div{padding:.55rem .75rem;border-left:1px solid var(--line);min-width:0}
.pd-key>div:first-child{border-left:0}
.pd-key dt{font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pd-key dd{margin:.15rem 0 0;font-size:var(--step--1);font-weight:600;color:var(--ink);line-height:1.35}

/* the rest of the standard values, as a quiet list under the price card */
.pd-std{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.pd-std>div{display:grid;grid-template-columns:minmax(6.5rem,34%) minmax(0,1fr);gap:.75rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.pd-std dt{font-size:var(--step--1);color:var(--ink-3);line-height:1.4}
.pd-std dd{margin:0;font-size:var(--step--1);color:var(--ink-2);line-height:1.45}
.pd-std dd .small{display:block}

/* the standard values sit under the gallery, so the two columns stay balanced */
.pd-std__title{margin:1.5rem 0 0}
.pd-std--aside{margin:.35rem 0 0}
.pd-std--aside>div{grid-template-columns:minmax(7rem,32%) minmax(0,1fr)}
.pd-spec--logistics>div{grid-template-columns:minmax(8rem,40%) minmax(0,1fr)}

/* ---------- the anchor bar ---------- */
.pd-bar{padding-block:0}
.pd-bar .wrap{border-block:1px solid var(--line);padding-block:.5rem}
@media (min-width:900px){.pd-bar .pd-nav{justify-content:center}}
.pd-nav a{border-color:transparent;background:transparent}
.pd-nav a:hover{background:var(--sand);border-color:var(--line)}

/* ---------- details: the configuration table beside a detail image ---------- */
.pd-details{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:860px){.pd-details{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.pd-spec{margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.pd-spec>div{display:grid;grid-template-columns:minmax(7rem,32%) minmax(0,1fr);gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.pd-spec dt{font-size:var(--step--1);color:var(--ink-3);line-height:1.4}
.pd-spec dd{margin:0;font-size:var(--step--1);color:var(--ink);line-height:1.5}
.pd-spec dd .small{display:block;color:var(--ink-3)}
.pd-details__media img{border-radius:var(--radius);width:100%;height:auto}
.pd-details__media .qp-media-empty{aspect-ratio:4/3;border-radius:var(--radius)}
.pd-prose{max-width:70ch}

/* ---------- decoration cards ---------- */
.pd-method{
  display:flex;flex-direction:column;gap:.35rem;min-width:0;
  padding:1rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
}
.pd-method__name{font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.pd-method__name a{text-decoration:none}
.pd-method p{margin:0;line-height:1.45}
.pd-method .link-arrow{margin-top:auto;align-self:flex-start}

/* ---------- customization: the list plus the ask ---------- */
.pd-custom{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:860px){.pd-custom{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}}
.pd-spec--custom>div{grid-template-columns:minmax(6rem,26%) minmax(0,1fr)}
.pd-callout{
  display:flex;flex-direction:column;gap:.6rem;min-width:0;
  padding:1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
}
.pd-callout h3{margin:0;font-size:1.0625rem}
.pd-callout p{margin:0;line-height:1.5;color:var(--ink-2);font-size:var(--step--1)}
.pd-callout .btn{width:100%}
.pd-alt{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;justify-content:space-between;
  padding:1rem 1.1rem;background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
}
.pd-alt>div{flex:1 1 20rem;min-width:0}
.pd-alt h3{margin:0 0 .3rem;font-size:1rem}
.pd-alt .note{margin:0;max-width:64ch}
.pd-alt .cluster{margin:0}

/* ---------- the four delivery steps ---------- */
.pd-steps{
  display:grid;gap:1rem;margin:0;padding:0;list-style:none;
  counter-reset:none;
}
@media (min-width:780px){.pd-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}}
.pd-step{display:flex;flex-direction:column;gap:.3rem;min-width:0;position:relative;padding-top:.2rem}
.pd-step__n{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;margin:0 0 .3rem;border-radius:var(--radius-pill);
  background:var(--brand);color:#fff;font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums;
}
.pd-step h3{margin:0;font-size:1rem;line-height:1.3}
.pd-step p{margin:0;line-height:1.45}
.pd-step .link-arrow{margin-top:auto;align-self:flex-start}
@media (min-width:780px){
  .pd-step+.pd-step::before{
    content:"";position:absolute;left:-.85rem;top:.9rem;width:.6rem;height:1px;background:var(--line-strong);
  }
}
.pd-facts3 h3{font-size:1rem;margin:0 0 .25rem}
.pd-facts3 p{margin:0;line-height:1.5;color:var(--ink-2);font-size:var(--step--1)}
.pd-facts3 p+p{margin-top:.2rem}

/* ---------- the closing band ---------- */
.pd-cta{background:var(--ink);color:#fff;padding-block:clamp(2rem,4vw,3rem)}
.pd-cta__inner{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;justify-content:space-between}
.pd-cta__text{flex:1 1 26rem;min-width:0}
.pd-cta h2{color:#fff;font-size:var(--step-2);letter-spacing:-.02em;margin:0 0 .35rem}
.pd-cta p{margin:0;color:rgba(255,255,255,.78);max-width:60ch;line-height:1.5}
.pd-cta__action{margin:0;flex:0 0 auto}
.pd-cta .btn--primary{background:var(--brand);color:#fff}
.pd-cta .btn--primary:hover{background:#E2652B}

/* the details table now carries only the carton data, so give it room to breathe */
.pd-spec--logistics{margin-top:.25rem}

/* ---------- the category trail, in the summary column ----------
   Level 1, then the level-2 subcategory it holds, both plain links to the terms' own pages, so the
   buyer reads where the item sits without leaving the page's hierarchy. The last step is quieter:
   it is the leaf, not the family. */
.pd-trail{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem}
.pd-trail__step{text-decoration:none}
.pd-trail__sep{color:var(--line-strong);font-weight:400}
.pd-trail__leaf{color:var(--ink-2)}

/* ---------- where the item is used: scenarios, then their scene groups ----------
   Chips, because a product can serve four or five occasions and they have to stay one compact line
   under the three key facts. A scenario is the specific use; a scene group is the family it sits
   in, so it is drawn quieter. Either prints as a plain name when the term has no page of its own. */
.pd-scenes{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;min-width:0}
.pd-scenes__label{
  margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);
}
.pd-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none;min-width:0}
.pd-chip{
  display:inline-block;padding:.2rem .55rem;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--paper);font-size:var(--step--1);font-weight:560;line-height:1.3;
  color:var(--ink-2);text-decoration:none;
}
.pd-chip:hover{border-color:var(--ink-3);color:var(--ink)}
.pd-chip--group{background:var(--sand);border-color:var(--line-strong);font-weight:500;color:var(--ink-3)}
.pd-chip--group:hover{border-color:var(--ink-3);color:var(--ink-2)}

/* ---------- the print facts, above the carton table ----------
   The same rows as every other specification list, on their own and at a readable measure: the label
   column is wide enough for "Plate fee (one-off, per colour position)" to keep its amount beside it
   on a desktop, and both wrap cleanly on a phone. */
.pd-spec--print{max-width:46rem}
.pd-spec--print>div{grid-template-columns:minmax(9rem,34%) minmax(0,1fr)}
.pd-spec--print dd{font-variant-numeric:tabular-nums}
@media (max-width:520px){
  .pd-spec--print>div{grid-template-columns:minmax(0,1fr);gap:.15rem}
}