/* ============================================================
   teas.co.uk, Delivery page layout
   Page-specific styles. Shared components live in design-system.css.
   Activates the AMBER accent for warmth (vs cyan default).
   ============================================================ */

body.page-template-page-delivery,
body.page-delivery{
  --acc: #FFB347;
}

/* ===== PAGE HEAD ===== */
.page-head-delivery{
  display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap);align-items:end;
  margin-bottom:28px;
}
.page-head-delivery h1{
  font-family:var(--fb);font-size:80px;font-weight:800;letter-spacing:-.030em;
  line-height:.95;margin:0;text-wrap:balance;
}
.page-head-delivery h1 em{font-family:var(--fd);font-style:italic;font-weight:400;letter-spacing:-.012em}
.page-head-delivery h1 .stamp{
  display:inline-block;background:var(--acc);color:#0A0B0F;
  padding:0 14px;border-radius:14px;transform:rotate(-1deg);
}
.page-head-delivery .right{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.page-head-delivery .right .lbl{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--slate);font-weight:600;
}
.page-head-delivery .right p{
  font-size:14.5px;line-height:1.55;color:var(--slate);margin:0;max-width:42ch;
}

/* ===== 3 PROMISE CARDS ===== */
.promise-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-bottom:28px;
}
.promise{
  background:#fff;border-radius:var(--r-3xl);padding:28px;box-shadow:var(--sh-card);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;min-height:280px;
}
.promise.dark{background:#042220;color:#eff7f6}
.promise .badge{
  width:48px;height:48px;border-radius:50%;background:var(--paper-2);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink);
}
.promise.dark .badge{background:rgba(239,247,246,.10);color:#eff7f6}
.promise .badge svg{width:22px;height:22px}
.promise .kicker{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--slate);font-weight:600;
}
.promise.dark .kicker{color:var(--acc)}
.promise h3{
  font-family:var(--fb);font-size:22px;font-weight:800;letter-spacing:-.012em;
  margin:0;line-height:1.15;
}
.promise.dark h3{color:#eff7f6}
.promise h3 em{font-family:var(--fd);font-style:italic;font-weight:400}
.promise p{
  font-size:13.5px;color:var(--slate);line-height:1.5;margin:0;max-width:32ch;
}
.promise.dark p{color:rgba(239,247,246,.7)}
.promise .price{
  display:flex;flex-direction:column;gap:2px;
  margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);
}
.promise.dark .price{border-top-color:rgba(239,247,246,.10)}
.promise .price .num{
  font-family:var(--fb);font-weight:800;font-size:32px;letter-spacing:-.022em;line-height:1;
}
.promise .price .num em{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:22px;color:var(--slate);
}
.promise.dark .price .num em{color:rgba(239,247,246,.5)}
.promise .price .unit{
  font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
}
.promise.dark .price .unit{color:rgba(239,247,246,.55)}

/* ===== MAIN GRID (rates + side) ===== */
.delivery-main{
  display:grid;grid-template-columns:1.6fr 1fr;gap:var(--gap);margin-bottom:36px;
}

/* Rates card */
.rates-card{
  background:#fff;border-radius:var(--r-3xl);padding:32px;box-shadow:var(--sh-card);
}
.rates-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:14px;
  margin-bottom:18px;flex-wrap:wrap;
}
.rates-head h2{
  font-family:var(--fb);font-size:30px;font-weight:800;letter-spacing:-.020em;margin:0;
}
.rates-head h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.rates-head .meta{
  font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}

.rates-table{
  width:100%;border-collapse:collapse;font-size:13.5px;
}
.rates-table thead th{
  font-family:var(--fm);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--slate);
  padding:12px 8px;text-align:left;border-bottom:1px solid var(--hair);
}
.rates-table tbody tr{border-bottom:1px solid var(--hair-2)}
.rates-table tbody tr:last-child{border-bottom:none}
.rates-table tbody td{padding:14px 8px;vertical-align:middle}
.rates-table .svc .nm{font-weight:700;font-size:14px;letter-spacing:-.005em}
.rates-table .svc .recommended{
  margin-left:8px;font-family:var(--fm);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:99px;background:var(--acc);color:#0A0B0F;
}
.rates-table .svc .by{
  display:block;font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:500;
  margin-top:3px;
}
.rates-table .when .day{font-weight:600;font-size:13.5px}
.rates-table .when .sub{
  display:block;font-family:var(--fm);font-size:10.5px;color:var(--slate);font-weight:500;
  margin-top:2px;text-transform:uppercase;letter-spacing:.06em;
}
.rates-table .price-cell{
  font-family:var(--fb);font-weight:700;font-size:15px;text-align:right;
  white-space:nowrap;
}
.rates-table .price-cell .strike{
  display:block;font-family:var(--fm);font-size:11px;font-weight:500;color:var(--slate);
  margin-top:2px;text-transform:uppercase;letter-spacing:.06em;
}
.rates-table .price-cell .free{color:#1F8847;font-weight:800}

/* Side stack */
.delivery-side{display:flex;flex-direction:column;gap:var(--gap)}

/* Threshold callout (static, interactive ring deferred) */
.threshold{
  background:#042220;color:#eff7f6;border-radius:var(--r-3xl);padding:28px;
  box-shadow:var(--sh-card);position:relative;overflow:hidden;
}
.threshold .corner{
  position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  background:var(--acc);color:#0A0B0F;
  display:inline-flex;align-items:center;justify-content:center;
}
.threshold .corner svg{width:14px;height:14px}
.threshold .kicker{
  font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--acc);font-weight:600;display:inline-block;margin-bottom:6px;
}
.threshold h3{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:30px;
  letter-spacing:-.012em;margin:0;color:#eff7f6;
}
.threshold p{
  font-size:13px;color:rgba(239,247,246,.7);line-height:1.55;margin:14px 0 0;
}
.threshold .big-num{
  font-family:var(--fb);font-weight:800;font-size:64px;letter-spacing:-.025em;
  line-height:1;margin-top:18px;color:#eff7f6;
}
.threshold .big-num em{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:38px;
  color:rgba(239,247,246,.5);
}
.threshold .lbl{
  font-family:var(--fm);font-size:10.5px;color:rgba(239,247,246,.55);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;margin-top:8px;display:block;
}

/* Cutoff card */
.cutoff{
  background:#fff;border-radius:var(--r-3xl);padding:24px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:14px;
}
.cutoff .kicker{
  font-family:var(--fm);font-size:10.5px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--slate);font-weight:600;
}
.cutoff h3{
  font-family:var(--fb);font-size:22px;font-weight:800;letter-spacing:-.018em;
  margin:0;line-height:1.15;
}
.cutoff h3 em{font-family:var(--fd);font-style:italic;font-weight:400}
.cutoff p{font-size:13px;color:var(--slate);line-height:1.5;margin:0}
.cutoff .deadlines{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.cutoff .dl{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-top:1px solid var(--hair);
}
.cutoff .dl .pip{
  width:8px;height:8px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 0 4px rgba(255,179,71,.18);
}
.cutoff .dl.late .pip{background:var(--mist);box-shadow:none}
.cutoff .dl .nm{font-size:13px;font-weight:600}
.cutoff .dl .t{
  font-family:var(--fm);font-size:11px;color:var(--slate);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}

/* Zones card */
.zones{
  background:var(--paper-2);border-radius:var(--r-3xl);padding:24px;
  box-shadow:var(--sh-card);
}
.zones h3{
  font-family:var(--fb);font-size:18px;font-weight:700;letter-spacing:-.012em;
  margin:0 0 4px;
}
.zones .sub{font-size:12.5px;color:var(--slate);margin-bottom:14px}
.zone-row{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-top:1px solid var(--hair-2);
}
.zone-row:first-of-type{border-top:none}
.zone-row .sw{
  width:30px;height:30px;border-radius:50%;color:#0A0B0F;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fb);font-weight:800;font-size:12.5px;
}
.zone-row .body{display:flex;flex-direction:column;gap:1px;min-width:0}
.zone-row .nm{font-size:13px;font-weight:600}
.zone-row .pc{
  font-family:var(--fm);font-size:10.5px;color:var(--slate);font-weight:500;
}
.zone-row .lead{
  font-family:var(--fb);font-weight:700;font-size:13px;text-align:right;white-space:nowrap;
}
.zone-row .lead em{
  font-family:var(--fd);font-style:italic;font-weight:400;color:var(--slate);
}

/* ===== TIMELINE ===== */
.timeline-card{
  background:#fff;border-radius:var(--r-3xl);padding:36px;box-shadow:var(--sh-card);
  margin-bottom:36px;
}
.timeline-card h2{
  font-family:var(--fb);font-size:32px;font-weight:800;letter-spacing:-.020em;
  margin:0 0 6px;text-wrap:balance;
}
.timeline-card h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.timeline-card .sub{
  font-size:14px;color:var(--slate);margin:0 0 28px;max-width:54ch;
}
.tl{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;
}
.tl::before{
  content:'';position:absolute;left:5%;right:5%;top:24px;height:2px;
  background:repeating-linear-gradient(to right,var(--ash) 0 8px,transparent 8px 14px);
}
.tl-step{padding:0 14px;text-align:left;position:relative;z-index:2}
.tl-step .dot{
  width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--ash);
  display:inline-flex;align-items:center;justify-content:center;color:var(--slate);
  margin-bottom:14px;
}
.tl-step .dot svg{width:18px;height:18px}
.tl-step.done .dot{background:var(--ink);border-color:var(--ink);color:var(--acc)}
.tl-step.you .dot{background:var(--acc);border-color:#0A0B0F;color:#0A0B0F}
.tl-step .step-n{
  font-family:var(--fm);font-size:10px;color:var(--slate);font-weight:700;
  text-transform:uppercase;letter-spacing:.10em;
}
.tl-step .nm{
  font-family:var(--fb);font-size:15px;font-weight:700;letter-spacing:-.008em;
  margin:4px 0 0;line-height:1.3;
}
.tl-step .nm em{font-family:var(--fd);font-style:italic;font-weight:400}
.tl-step .desc{font-size:12.5px;color:var(--slate);margin:6px 0 0;line-height:1.5}
.tl-step .when{
  font-family:var(--fm);font-size:10.5px;color:var(--ink);font-weight:700;
  margin-top:8px;display:inline-block;text-transform:uppercase;letter-spacing:.06em;
  padding:3px 8px;border-radius:99px;background:var(--paper-2);
}

/* ===== HELP ROW ===== */
.help-row{
  display:grid;grid-template-columns:1.6fr 1fr;gap:var(--gap);margin-bottom:36px;
}
.help-card{
  background:#fff;border-radius:var(--r-3xl);padding:32px;box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:18px;
}
.help-card .kicker{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--slate);font-weight:600;
}
.help-card h2{
  font-family:var(--fb);font-size:32px;font-weight:800;letter-spacing:-.020em;
  margin:0;line-height:1.1;
}
.help-card h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.help-q{display:flex;flex-direction:column;gap:6px}
.help-q .q{
  font-family:var(--fb);font-size:14.5px;font-weight:700;letter-spacing:-.005em;line-height:1.3;
}
.help-q .a{font-size:13px;color:var(--slate);line-height:1.55;margin:0}
.help-card .cta{
  align-self:flex-start;background:#042220;color:var(--acc);
  padding:11px 18px;border-radius:99px;font-weight:700;font-size:12.5px;
  display:inline-flex;align-items:center;gap:8px;
}
.help-card .cta svg{width:13px;height:13px}

.eco-card{
  background:#042220;color:#eff7f6;border-radius:var(--r-3xl);padding:32px;
  box-shadow:var(--sh-card);
  display:flex;flex-direction:column;gap:14px;
}
.eco-card .kicker{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--acc);font-weight:600;
}
.eco-card h3{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:30px;
  letter-spacing:-.012em;margin:0;line-height:1.05;color:#eff7f6;
}
.eco-card .stat{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.eco-card .stat .num{
  font-family:var(--fb);font-weight:800;font-size:48px;letter-spacing:-.025em;
  line-height:1;color:#eff7f6;
}
.eco-card .stat .num em{
  font-family:var(--fd);font-style:italic;font-weight:400;font-size:30px;
  color:rgba(239,247,246,.5);
}
.eco-card .stat .lbl{
  font-family:var(--fm);font-size:11px;color:rgba(239,247,246,.55);font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;
}
.eco-card p{
  font-size:13.5px;color:rgba(239,247,246,.7);line-height:1.55;margin:0;
}

/* ===== INTERNATIONAL placeholder ===== */
.intl-stub{
  background:var(--paper-2);border-radius:var(--r-3xl);padding:32px;
  display:flex;flex-direction:column;gap:8px;margin-bottom:36px;
  border:1.5px dashed rgba(14,15,18,.12);
}
.intl-stub .kicker{
  font-family:var(--fm);font-size:11px;text-transform:uppercase;letter-spacing:.10em;
  color:var(--slate);font-weight:600;
}
.intl-stub h2{
  font-family:var(--fb);font-size:28px;font-weight:800;letter-spacing:-.018em;
  margin:0;line-height:1.15;
}
.intl-stub h2 em{font-family:var(--fd);font-style:italic;font-weight:400}
.intl-stub p{font-size:14px;color:var(--slate);line-height:1.5;margin:0;max-width:60ch}
.intl-stub a{
  align-self:flex-start;color:var(--ink);font-weight:700;font-size:13px;
  border-bottom:2px solid var(--acc);padding-bottom:2px;margin-top:6px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1180px){
  .page-head-delivery,.delivery-main,.help-row{grid-template-columns:1fr}
  .promise-row{grid-template-columns:1fr}
  .tl{grid-template-columns:repeat(2,1fr);gap:24px}
  .tl::before{display:none}
  .help-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .page-head-delivery h1{font-size:48px}
  .rates-table thead{display:none}
  .rates-table,.rates-table tbody,.rates-table tr,.rates-table td{display:block;width:100%}
  .rates-table tbody tr{padding:12px 0;border-bottom:1px solid var(--hair)}
  .rates-table tbody td{padding:4px 0}
  .rates-table .price-cell{text-align:left}
}