/* 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}