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

/* ---------- the four lines, after the plate fee was spelled out ----------
   The plate fee's row names what it is for and how often it is charged, so its two pieces of text
   wrap inside the panel instead of widening it: the amount stays one number on one line, and the
   unit label beside it is allowed to break. Same for the fixed note list, which gained one line. */
.calc-lines th{overflow-wrap:break-word}
.calc-lines td .calc-unit{white-space:normal;text-align:right}
.calc-notes li+li{margin-top:.15rem}

/* ---------- the U.S. DDP pages (ddp-calculator.php) ----------
   The index and one product's delivered price list. Only the classes the two pages own are here;
   .ddp-hero, .ddp-summary, .ddp-outro, .ddp-steps and .ddp-step come from pricing.css, and .btn,
   .facts, .section and .wrap from style.css. Every colour, radius and step below is a token. */

/* ---------- the head of either page ---------- */
.ddp-hero__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.9rem 1.5rem}
.ddp-hero__intro{display:grid;gap:.35rem;min-width:0}
.ddp-hero__product{
  margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;
  font-size:var(--step-1);line-height:1.35;color:var(--ink-2);
}
.ddp-hero__name{font-weight:640;color:var(--ink)}
.ddp-hero__dot{color:var(--ink-3)}
.ddp-hero__sku{font-size:var(--step-0);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ddp-hero__actions{margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ddp-hero__btn{min-height:44px}
@media (max-width:640px){
  .ddp-hero__actions{width:100%}
  .ddp-hero__btn{flex:1 1 auto}
}

/* ---------- the destination notice, before any figure ---------- */
.ddp-notice{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem;
  margin-top:.3rem;padding:clamp(.9rem,2vw,1.1rem);
  background:var(--brand-tint);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.ddp-notice__icon{
  display:grid;place-items:center;flex:0 0 auto;width:2.5rem;height:2.5rem;
  border-radius:50%;background:var(--paper);color:var(--brand-dark);
}
.ddp-notice__body{flex:1 1 18rem;min-width:0;display:grid;gap:.15rem}
.ddp-notice__title{margin:0;font-weight:700;line-height:1.35;color:var(--ink)}
.ddp-notice__text{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}
.ddp-notice__action{flex:0 0 auto;min-height:44px}
.ddp-notice__fine{margin:.6rem 0 0;font-size:var(--step--1);line-height:1.45;color:var(--ink-3)}
@media (max-width:640px){.ddp-notice__action{width:100%}}

/* ---------- the index: one GET form, two controls ---------- */
.ddp-index__title{margin:0;font-size:var(--step-2);letter-spacing:-.015em}
.ddp-filterbar{
  display:grid;gap:.75rem 1rem;align-items:end;
  padding:clamp(.9rem,2vw,1.1rem);background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
@media (min-width:760px){
  .ddp-filterbar{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}
}
.ddp-filterbar__field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ddp-filterbar__label{font-size:var(--step--1);font-weight:600;color:var(--ink-2)}
.ddp-filterbar__input,
.ddp-filterbar__select{
  width:100%;min-height:44px;padding:.6rem .75rem;font:inherit;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
}
.ddp-filterbar__input:hover,
.ddp-filterbar__select:hover{border-color:var(--ink-3)}
.ddp-filterbar__submit{margin:0;display:flex}
.ddp-filterbar__submit .btn{min-height:44px;width:100%}

/* ---------- the index: one card per product, image at 4:3 ---------- */
.ddp-cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.ddp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.ddp-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.ddp-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s;
}
.ddp-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.ddp-card__media{display:block;aspect-ratio:4/3;background:var(--sand-2);overflow:hidden}
.ddp-card__img{display:block;width:100%;height:100%;object-fit:cover}
.ddp-card__ph{display:grid;place-items:center;height:100%;padding:1rem;background:var(--sand);text-align:center}
.ddp-card__ph span{font-size:var(--step-0);font-weight:600;line-height:1.3;color:var(--ink-2);max-width:20ch}
.ddp-card__body{display:flex;flex-direction:column;gap:.3rem;flex:1;padding:.9rem 1rem 1.05rem}
.ddp-card__name{margin:0;font-size:1.0625rem;font-weight:650;line-height:1.3;letter-spacing:-.01em;padding:0}
.ddp-card__name a{color:inherit;text-decoration:none}
.ddp-card__name a:hover{text-decoration:underline}
.ddp-card__sku{margin:0;font-size:var(--step--1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.ddp-card__action{margin:auto 0 0;padding-top:.7rem}
/* A card whose product has no photograph: the name starts the card, with no empty frame above it. */
.ddp-card--text .ddp-card__body{padding-top:1.15rem}
.ddp-card__btn{min-height:44px}
/* Nine cards carry the same button: an outline keeps the row from reading as nine primary actions,
   and the card's own hover is what lifts it. */
.ddp-card:hover .ddp-card__btn,
.ddp-card:focus-within .ddp-card__btn{border-color:var(--ink);color:var(--ink)}

/* ---------- the index: nothing matched ---------- */
.ddp-empty{
  display:grid;gap:.5rem;justify-items:center;text-align:center;
  padding:clamp(1.25rem,3vw,2rem);background:var(--sand);
  border:1px solid var(--line);border-radius:var(--radius-lg);
}
.ddp-empty__title{margin:0;font-size:var(--step-1);font-weight:680}
.ddp-empty__text{margin:0;max-width:56ch;line-height:1.5;color:var(--ink-2)}
.ddp-empty__actions{margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.ddp-empty__actions .btn{min-height:44px}

/* ---------- the index: previous / numbers / next ---------- */
.ddp-pager{margin-top:.4rem}
.ddp-pager__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.ddp-pager__link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2.75rem;min-height:44px;padding:.5rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.9375rem;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;
}
.ddp-pager__link:hover{border-color:var(--ink);color:var(--ink)}
.ddp-pager__link[aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:650}
.ddp-pager__link--step{padding-inline:.9rem}

/* ---------- the index: three steps ---------- */
.ddp-how__title{margin:0;font-size:var(--step-2);letter-spacing:-.015em}
.ddp-step__note{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}

/* ---------- one product: the product card beside its price panel (30 / 70) ---------- */
.ddp-quote{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:960px){
  .ddp-quote{grid-template-columns:minmax(0,3fr) minmax(0,7fr);align-items:start}
  .ddp-quote__side{position:sticky;top:5.5rem}
}
.ddp-quote__main{display:grid;gap:1rem;min-width:0}
.ddp-summary__fine{margin:0;line-height:1.4}

/* ---------- the panel around the price list ---------- */
.ddp-panel{
  display:grid;gap:1rem;min-width:0;
  padding:clamp(.9rem,2vw,1.15rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.ddp-panel__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem .8rem}
.ddp-panel__title{margin:0;font-size:var(--step-1);font-weight:680;letter-spacing:-.015em}
.ddp-panel__note{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}
.ddp-panel__fine{margin:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-3)}

/* ---------- the price list: quantity × channel, one button per row ---------- */
.ddp-price{
  overflow:hidden;min-width:0;
  border:1px solid var(--line);border-radius:var(--radius);
}
.ddp-price table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ddp-price thead th{
  padding:.6rem .75rem;text-align:left;
  background:var(--sand);border-bottom:1px solid var(--line);
  font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;color:var(--ink-3);
}
.ddp-price thead th.ddp-price__q{background:var(--sand-2);color:var(--brand-dark)}
.ddp-price tbody th,
.ddp-price tbody td{padding:.7rem .75rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.ddp-price tbody tr:last-child th,
.ddp-price tbody tr:last-child td{border-bottom:0}
.ddp-price__q{white-space:nowrap}
.ddp-price__qty{font-size:.9375rem;font-weight:680;color:var(--ink)}
.ddp-price__amount{display:block;font-size:1.0625rem;font-weight:720;letter-spacing:-.015em;color:var(--ink)}
.ddp-price__days{display:block;margin-top:.1rem;font-size:.75rem;line-height:1.35;color:var(--ink-3)}
.ddp-price__state{font-size:1rem;font-weight:600;color:var(--ink-3)}
.ddp-price__ask{font-size:.8125rem;font-weight:650;color:var(--warn);text-underline-offset:.15em}
.ddp-price__cta{text-align:right;white-space:nowrap}
.ddp-price__btn{min-height:44px;padding:.5rem .95rem;font-size:.875rem}

/* ---------- the same list on a phone: one card per quantity, three channels stacked ----------
   The table never shrinks to fit: below the split each row becomes its own card, the quantity is its
   heading, and every channel keeps its column name beside it through data-label, so a figure is read
   with the channel it belongs to and the amount stays a readable size. */
@media (max-width:719px){
  .ddp-price{border:0;border-radius:0;overflow:visible}
  .ddp-price table,
  .ddp-price tbody,
  .ddp-price tr,
  .ddp-price th,
  .ddp-price td{display:block;width:auto}
  .ddp-price thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ddp-price tbody tr{
    margin-bottom:.75rem;padding:.85rem .95rem;background:var(--paper);
    border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  }
  .ddp-price tbody tr:last-child{margin-bottom:0}
  .ddp-price tbody th.ddp-price__q{
    padding:0 0 .55rem;margin-bottom:.35rem;white-space:normal;
    border-bottom:1px solid var(--line);
  }
  .ddp-price__qty{font-size:1.0625rem}
  .ddp-price tbody td{
    display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
    gap:.15rem .6rem;padding:.3rem 0;border:0;
  }
  .ddp-price tbody td::before{
    content:attr(data-label);flex:1 1 auto;
    font-size:var(--step--1);font-weight:600;color:var(--ink-3);
  }
  .ddp-price__amount{display:inline;font-size:1.0625rem}
  .ddp-price__state,
  .ddp-price__ask{display:inline;font-size:1rem}
  .ddp-price__days{flex:1 1 100%;margin-top:0;font-size:var(--step--1)}
  .ddp-price tbody td.ddp-price__cta{padding-top:.55rem;justify-content:flex-start}
  .ddp-price tbody td.ddp-price__cta::before{content:none}
  .ddp-price__btn{width:100%}
}

/* ---------- one card per channel, under the list ---------- */
.ddp-chan{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
@media (min-width:640px){.ddp-chan{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ddp-chan__item{
  display:grid;gap:.15rem;min-width:0;padding:.6rem .7rem;
  background:var(--sand);border:1px solid var(--line);border-radius:var(--radius);
}
.ddp-chan__name{font-size:.8125rem;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.ddp-chan__transit{margin:0;font-size:var(--step--1);line-height:1.4;color:var(--ink-2)}
.ddp-chan__item[data-state="blocked"] .ddp-chan__transit,
.ddp-chan__item[data-state="missing"] .ddp-chan__transit{color:var(--warn)}

/* ---------- the two fees, never added into a total ---------- */
.ddp-fees-table{
  margin:.6rem 0;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
}
.ddp-fees-table table{width:100%;border-collapse:collapse}
.ddp-fees-table th,
.ddp-fees-table td{padding:.75rem .85rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.ddp-fees-table tr:last-child th,
.ddp-fees-table tr:last-child td{border-bottom:0}
.ddp-fees-table th{font-size:.9375rem;font-weight:660;color:var(--ink);white-space:nowrap;width:1%}
.ddp-fees-table__amount{font-size:1.0625rem;font-weight:720;letter-spacing:-.015em;white-space:nowrap;width:1%}
.ddp-fees-table__note{font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}
@media (max-width:599px){
  .ddp-fees-table th,
  .ddp-fees-table td{display:block;width:auto;white-space:normal;border:0;padding:0}
  .ddp-fees-table tr{display:block;padding:.8rem .85rem;border-bottom:1px solid var(--line)}
  .ddp-fees-table tr:last-child{border-bottom:0}
  .ddp-fees-table__amount{padding:.15rem 0 .3rem}
}

/* ---------- the orange-bordered band: a different quantity or specification ---------- */
.ddp-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.5rem;
  padding:clamp(1rem,2.4vw,1.35rem);
  background:var(--paper);border:1px solid var(--brand);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.ddp-band__body{display:grid;gap:.25rem;flex:1 1 20rem;min-width:0}
.ddp-band__title{margin:0;font-size:var(--step-1);font-weight:680;line-height:1.25;letter-spacing:-.015em;color:var(--brand-dark)}
.ddp-band__note{margin:0;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.ddp-band__action{flex:0 0 auto;min-height:44px}
@media (max-width:640px){.ddp-band__action{width:100%}}

/* ---------- the questions, as native disclosures ---------- */
.ddp-faq-section__title{margin:0 0 .5rem;font-size:var(--step-2);letter-spacing:-.015em}
.ddp-faq{display:grid;gap:.6rem}
.ddp-faq__item{
  padding:.15rem .95rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
}
.ddp-faq__item[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.ddp-faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;padding:.85rem 0;list-style:none;cursor:pointer;
  font-size:.9375rem;font-weight:640;line-height:1.35;color:var(--ink);
}
.ddp-faq__q::-webkit-details-marker{display:none}
.ddp-faq__q::after{content:"+";flex:0 0 auto;font-size:1.15rem;font-weight:600;line-height:1;color:var(--brand)}
.ddp-faq__item[open] .ddp-faq__q::after{content:"\2013"}
.ddp-faq__q:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ddp-faq__a{margin:0 0 .9rem;max-width:78ch;font-size:var(--step--1);line-height:1.55;color:var(--ink-2)}

/* ---------- the sand band: another destination, quoted individually ---------- */
.ddp-special__wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.75rem}
.ddp-special__body{display:grid;gap:.3rem;flex:1 1 22rem;min-width:0}
.ddp-special__title{margin:0;font-size:var(--step-1);font-weight:680;line-height:1.25;letter-spacing:-.015em}
.ddp-special__note{margin:0;max-width:60ch;font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.ddp-special .btn{min-height:44px}
@media (max-width:640px){.ddp-special .btn{width:100%}}

@media (prefers-reduced-motion:reduce){
  .ddp-card,
  .ddp-faq__item[open]{transition:none;box-shadow:none}
}

/* ---------- the mark beside a block ---------- */
/* Every block that asks the reader to do something carries one mark, drawn from the same set as the
   service pages, so a channel and a request read apart at a glance. */
.ddp-filterbar__control {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ddp-filterbar__control .ddp-filterbar__input {
  width: 100%;
  padding-left: 2.35rem;
}

.ddp-filterbar__icon {
  position: absolute;
  left: .8rem;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  pointer-events: none;
}

.ddp-filterbar__icon svg {
  width: 1rem;
  height: 1rem;
}

.ddp-chan__item {
  gap: .55rem;
  align-items: flex-start;
}

.ddp-chan__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.ddp-chan__icon svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 1.9;
}

.ddp-chan__body {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.ddp-band__icon,
.ddp-special__icon,
.ddp-outro__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.ddp-band__icon svg,
.ddp-special__icon svg,
.ddp-outro__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.9;
}

/* The mark is the same plate at the same size everywhere; the closing card only gives it a column. */
.ddp-outro.ddp-outro--with-icon {
  grid-template-columns: auto minmax(0, 1fr);
}

@media (min-width: 860px) {
  .ddp-outro.ddp-outro--with-icon {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}