/* SourcingPromo — the price calculator on /quote-calculator/. Tokens and the panel, field and
   button classes come from tokens.css, style.css and forms.css; only "calc-" classes live here. */

/* The script hides whole blocks and table rows with [hidden], while the rules below set a
   display of their own: this keeps the attribute winning. */
.calc-layout [hidden]{display:none !important}

/* ---------- head ---------- */
.calc-hero__title{max-width:24ch}
.calc-hero .lede{max-width:64ch}

/* ---------- layout ---------- */
.calc-section{padding-top:clamp(1.5rem,3vw,2.5rem)}
.calc-layout{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:960px){
  .calc-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .calc-result{position:sticky;top:5.5rem}
}
.calc-main{min-width:0}
.calc-card .note{max-width:62ch}

/* ---------- the quantity slider ---------- */
.calc-tier{display:flex;flex-direction:column;gap:.55rem}
.calc-tier__scale{
  display:flex;justify-content:space-between;gap:.5rem;
  font-size:.75rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.calc-tier__scale span{flex:1 1 0;text-align:center}
.calc-tier__scale span:first-child{text-align:left}
.calc-tier__scale span:last-child{text-align:right}
.calc-tier__value{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.calc-tier__value strong{font-size:1.25rem;font-weight:700;letter-spacing:-.02em}

input[type=range]{
  width:100%;margin:.2rem 0;padding:0;height:1.6rem;background:transparent;
  accent-color:var(--brand);cursor:pointer;
}

/* ---------- freight channels ---------- */
.calc-channels{display:flex;flex-wrap:wrap;gap:.45rem;border:0;margin:0;padding:0}
.calc-channels legend{
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  padding:0 0 .45rem;display:block;width:100%;
}
.calc-radio{
  display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.42rem .8rem;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  background:var(--paper);font-size:var(--step--1);font-weight:560;color:var(--ink-2);
  transition:background-color .15s,border-color .15s,color .15s;
}
.calc-radio:hover{border-color:var(--ink-3);color:var(--ink)}
.calc-radio input{accent-color:var(--brand);margin:0;cursor:pointer}
.calc-radio:has(input:checked){background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark);font-weight:640}
.calc-radio--off,.calc-radio:has(input:disabled){
  opacity:.5;cursor:not-allowed;background:var(--sand-2);border-style:dashed;
  text-decoration:line-through;text-decoration-color:var(--ink-3);
}
.calc-radio--off:hover{border-color:var(--line-strong);color:var(--ink-2)}
.calc-radio--off input{cursor:not-allowed}

/* ---------- result panel ---------- */
.calc-panel{gap:.9rem}
.calc-empty{margin:0;color:var(--ink-3);font-size:var(--step--1);line-height:1.5}
.calc-body{display:flex;flex-direction:column;gap:.85rem}
.calc-picked{margin:0;display:flex;flex-direction:column;gap:.15rem}
.calc-picked__name{font-size:1.0625rem;font-weight:650;line-height:1.25;letter-spacing:-.01em}

/* ---------- the four lines ---------- */
.calc-lines{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.calc-lines th,.calc-lines td{
  padding:.6rem 0;text-align:left;vertical-align:baseline;
  border-top:1px solid var(--line);
}
.calc-lines tbody tr:first-child th,
.calc-lines tbody tr:first-child td{border-top:0;padding-top:.15rem}
.calc-lines th{
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);line-height:1.35;
  padding-right:.9rem;width:60%;
}
.calc-lines th .small{display:block;font-weight:400;letter-spacing:0;line-height:1.4}
.calc-lines td{text-align:right;white-space:nowrap;vertical-align:top}
.calc-amount{display:block;font-size:1.0625rem;font-weight:680;letter-spacing:-.01em}
.calc-unit{display:block;line-height:1.3;margin-top:.05rem}

.calc-hint{
  margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2);
  border-left:2px solid var(--brand);padding-left:.7rem;
}
.calc-lead{margin:0;color:var(--ink-2);line-height:1.5}

/* ---------- the fixed quote notes ---------- */
.calc-notes{
  margin:0;padding:.75rem .85rem .75rem 2rem;list-style:decimal;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  font-size:.75rem;line-height:1.55;color:var(--ink-3);
  display:grid;gap:.3rem;
}
.calc-notes li::marker{font-weight:700;color:var(--ink-2)}

.calc-actions{display:flex;flex-direction:column;gap:.45rem;margin:0}
.calc-actions .small{line-height:1.45}

/* ---------- product page: the quote panel (single-product.php) ----------
   The panel's own classes only: tokens, .btn, .tag, .facts, .fee-line and .price-state come from
   tokens.css, style.css and forms.css. Every value here is a token or a multiple of one, so the
   block follows the site's palette rather than inventing a second one. */

/* The script swaps rows and never removes them from the flow, but anything the page or the script
   does hide stays hidden even where a rule below gives the element a display of its own. */
.qp [hidden]{display:none !important}

.qp{
  display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(1rem,2.2vw,1.35rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  min-width:0;
}
.qp-flag{margin:0}

/* ---------- the quantity control ---------- */
.qp__title{font-size:var(--step--1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0}
.qp-pick{display:none}
/* The quantity buttons are printed by PHP but only act once the script is there: the class the
   script adds reveals them, so a browser without JavaScript sees the first tier's table and no
   dead control. */
.qp--js .qp-pick{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.qp-tiers{border:0;margin:0;padding:0;min-width:0}
.qp-tiers__legend{
  font-size:var(--step--1);font-weight:600;color:var(--ink-2);
  padding:0 0 .45rem;display:block;width:100%;
}
.qp-pick__note{margin:0;line-height:1.45}
.qp-seg{display:flex;flex-wrap:wrap;gap:.4rem}
.qp-seg__btn{
  font:inherit;font-size:var(--step--1);font-weight:560;line-height:1.2;
  color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:.45rem .85rem;cursor:pointer;font-variant-numeric:tabular-nums;
  min-height:44px;min-width:4.5rem;
  transition:background-color .15s,border-color .15s,color .15s;
}
.qp-seg__btn:hover{border-color:var(--ink-3);color:var(--ink)}
.qp-seg__btn[aria-pressed="true"]{
  background:var(--brand-tint);border-color:var(--brand);color:var(--brand-dark);font-weight:640;
}
.qp-panel{min-width:0}

/* ---------- the per-piece headline ----------
   The big figure is the engine's own USD string for the cheapest channel at the chosen quantity;
   when no channel is priced it is words, so it drops to text size and the warning colour instead of
   shouting "Ask for a price" across the column. */
.qp-head{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.qp-head__price{
  font-size:clamp(1.75rem,1.25rem + 1.8vw,2.375rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;
}
.qp-head__unit{font-size:var(--step--1);color:var(--ink-3)}
.qp-head--ask .qp-head__price{font-size:var(--step-1);font-weight:650;letter-spacing:0;color:var(--warn)}
.qp-head__basis{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}
.qp-freight{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}

/* ---------- one row per freight channel, three states, never a total ----------
   Every figure is the engine's; the row's data-state only decides how it is coloured. A channel the
   item may not use is a dash and stays quiet; one it may use but has no rate for says so in words,
   which wrap inside the cell instead of pushing the row out of shape. */
.qp-table{width:100%;border-collapse:collapse;margin:0;font-variant-numeric:tabular-nums}
.qp-table thead th{
  font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  text-align:right;padding:0 0 .45rem .6rem;line-height:1.35;
}
.qp-table thead th:first-child{text-align:left;padding-left:0}
.qp-table tbody th,.qp-table tbody td{
  padding:.6rem 0 .6rem .6rem;border-top:1px solid var(--line);vertical-align:top;text-align:right;
}
.qp-table tbody th{text-align:left;padding-left:0;font-weight:600;color:var(--ink-2)}
.qp-table tbody td{white-space:nowrap;font-weight:650;letter-spacing:-.01em}
.qp-table tr[data-state="blocked"] td{color:var(--ink-3);font-weight:500}
.qp-table tr[data-state="missing"] .qp-table__price{
  color:var(--warn);font-weight:600;white-space:normal;letter-spacing:0;
}
.qp-table__note{
  display:block;font-size:.75rem;font-weight:400;line-height:1.35;letter-spacing:0;
  color:var(--ink-3);white-space:normal;margin-top:.15rem;
}
.qp-table__note:empty{display:none}
.qp-basis{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-3)}

/* The panel with no priced tier yet: the answer is a person, not a number. */
.qp-panel--single{display:grid;gap:.45rem;padding:.15rem 0}

/* ---------- the two fees, never added up ---------- */
.qp-fees{margin:0;padding-top:.4rem;border-top:1px solid var(--line)}
.qp-fees__note{
  display:block;font-size:var(--step--1);font-weight:400;line-height:1.4;color:var(--ink-3);
  margin-top:.1rem;
}
.qp-fees .fee-line dd{white-space:nowrap}

/* ---------- what the figures do and do not cover ---------- */
.qp-notes{display:grid;gap:.4rem;padding-top:.7rem;border-top:1px solid var(--line)}
.qp-notes .quote-note{margin:0}

/* ---------- the two actions, and the spec sheet when a record carries one ---------- */
.qp-actions{display:flex;flex-direction:column;gap:.5rem;margin:0}
.qp-cta{margin:0}
.qp-cta--sheet{margin-top:.15rem}
.qp-hint{margin:0;line-height:1.45}

/* ---------- the gallery's stand-in (single-product.php) ----------
   A product with no photograph keeps the gallery's square and prints its own name on the site's
   sand: no stock picture, no address borrowed from another site. */
.qp-media-empty{
  aspect-ratio:1/1;display:grid;place-items:center;padding:1.5rem;
  background:var(--sand);text-align:center;
}
.qp-media-empty span{
  font-size:var(--step-1);font-weight:600;line-height:1.3;color:var(--ink-2);
  max-width:24ch;text-wrap:balance;
}

/* ---------- a narrow screen: the table becomes stacked rows ----------
   Between the two-column split and a phone the panel is barely 400px wide, so below the split's own
   breakpoint the table turns into one block per channel: its name, then its figures with the column
   name beside them, which is what data-label carries. Nothing scrolls sideways, so the whole page
   never does either. */
@media (max-width:899px){
  .qp-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .qp-table,.qp-table tbody,.qp-table tr,.qp-table th,.qp-table td{display:block;width:auto}
  .qp-table tr{padding:.6rem 0;border-top:1px solid var(--line)}
  .qp-table tbody th{border:0;padding:0 0 .2rem;white-space:normal}
  .qp-table tbody td{
    display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
    border:0;padding:.12rem 0;text-align:right;white-space:normal;
  }
  .qp-table tbody td::before{
    content:attr(data-label);font-size:var(--step--1);font-weight:500;letter-spacing:0;
    color:var(--ink-3);text-align:left;flex:0 1 auto;
  }
}

/* ---------- the panel at 390px ----------
   The padding tightens and the quantity buttons share the width instead of scrolling. */
@media (max-width:520px){
  .qp{padding:.9rem .85rem;gap:.75rem}
  .qp-seg__btn{flex:1 1 calc(50% - .4rem);min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .qp-seg__btn{transition:none}
}

/* ---------- product page: the documents and the cards beside it (single-product.php) ----------
   The cards reuse .card, .grid and .small from style.css and catalog.css. What is left is the
   facts line under a case study's title and the document rows, which are a list rather than cards
   because each one is a single file with a single action. */
.sp-ref-facts{margin:0;line-height:1.5}
.sp-ref-card .card__body{justify-content:flex-start}

.sp-docs{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.sp-doc{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem 1.25rem;padding:.9rem 1.05rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
}
.sp-doc__main{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1 1 18rem}
.sp-doc__title{margin:0;font-size:1.0625rem;font-weight:650;line-height:1.3;letter-spacing:-.01em}
.sp-doc .btn{white-space:nowrap}
@media (max-width:520px){
  .sp-doc .btn{width:100%}
}