/* i-LEAD Shop — storefront styling
 *
 * Carried over from current/ilead-site/shared.css rather than approximated.
 * Same custom properties, same typefaces, same nav and footer treatment, so
 * that moving from i-lead.org.za to the shop has no seam in it.
 *
 * ONE FIXED LOOK, NO LIGHT/DARK SWITCHING. This is the thing that made the two
 * feel like different organisations: the main site contains no
 * prefers-color-scheme rule at all, while this stylesheet used to flip with the
 * visitor's operating system. On a light-mode laptop the shop was white while
 * the main site was charcoal and pink. Matching the palette would not have
 * fixed that on its own — the switching itself had to go.
 *
 * No framework, no JavaScript. The CSP is script-src 'self' with no inline
 * allowance and the whole shop is forms and tables.
 */

@font-face {
  font-family: 'AchersGrotesque';
  src: url('fonts/acherusgrotesque-regular.otf') format('opentype');
  font-display: swap;   /* text stays readable while 58kb arrives */
}

:root {
  /* Exactly the main site's values. Changing one here without changing it
     there is how the two drift apart again. */
  --pink:       #e0357d;
  --pink-dark:  #cc0e74;
  --pink-light: #ef96bb;
  --purple:     #790c5a;
  --charcoal:   #353a47;
  --cream:      #f3f1f3;
  --ink:        #353a47;
  --ink-2:      #666;
  --ink-3:      #8e8e96;
  --rule:       #e6e2e6;
  --rule-2:     #d2ccd2;
  --ok:         #12674b;
  --ok-bg:      #e3f1eb;
  --warn:       #8c5206;
  --warn-bg:    #fcf0dc;
  --bad:        #a71e15;
  --bad-bg:     #fbe7e5;
  --gradient-h: linear-gradient(90deg, #790c5a 0%, #e0357d 100%);
  --display:    'AchersGrotesque', 'Montserrat', sans-serif;
  --body:       'Open Sans', sans-serif;
  --radius:     10px;
  --nav-h:      72px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: #fff;
  color: var(--charcoal);
  overflow-x: hidden;
  font-size: 15px;
  line-height: 1.7;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

a { color: var(--pink-dark); text-underline-offset: 3px; }
a:hover { color: var(--pink); }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
p { margin: 0 0 14px; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(30px, 4.2vw, 48px); letter-spacing: -0.3px; margin: 0 0 14px; }
h2 { font-size: clamp(20px, 2.6vw, 28px); margin: 36px 0 14px; }
h3 { font-size: 17px; }

/* The main site's section eyebrow — small, letterspaced, pink. */
.section-label {
  display: inline-block; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--pink-dark);
  font-weight: 600; margin-bottom: 14px;
}

/* Gradient text, as on the main site's hero headline. */
.grad {
  background: var(--gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── nav ───────────────────────────────────────────────────────────────────
   The main site's fixed, blurred charcoal bar, at the same height, with the
   same logo treatment. This is the element a visitor carries in their eye
   from one site to the other, so it is the one that has to match exactly. */

nav.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(53, 58, 71, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 40px; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img {
  height: 48px; width: 48px; object-fit: contain;
  border-radius: 4px; background: #fff; padding: 2px;
}
.nav-logo-text .name {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  color: #fff; letter-spacing: 2px; line-height: 1; display: block;
}
.nav-logo-text .tagline {
  font-size: 10px; color: var(--pink-light); letter-spacing: 1.5px;
  text-transform: uppercase; margin-top: 2px; display: block;
}
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,0.8); text-decoration: none; font-size: 13px;
  font-weight: 500; padding: 8px 14px; border-radius: 6px; transition: all .2s;
}
.nav-links a:hover, .nav-links a.on { color: #fff; background: rgba(255,255,255,0.08); }

/* The basket is this site's equivalent of the main site's AI Advisor CTA. */
.nav-links .basket {
  background: var(--gradient-h); color: #fff !important;
  border-radius: 8px; font-weight: 600; display: inline-flex;
  align-items: center; gap: 7px; white-space: nowrap;
}
.nav-links .basket:hover {
  opacity: .92; transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(224,53,125,0.4); background: var(--gradient-h);
}
.basket .count {
  background: rgba(255,255,255,0.22); border-radius: 99px;
  min-width: 19px; text-align: center; padding: 1px 6px; font-size: 11px;
}

/* ── page ──────────────────────────────────────────────────────────────── */

main { padding-top: var(--nav-h); min-height: 70vh; }
.page-head { background: var(--charcoal); padding: 56px 0 52px; position: relative; overflow: hidden; }
.page-head::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(224,53,125,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(121,12,90,0.15) 0%, transparent 60%);
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { color: #fff; margin: 0 0 10px; }
.page-head p { color: rgba(255,255,255,0.6); max-width: 640px; margin: 0; }
.page-head .section-label { color: var(--pink-light); }

.section { padding: 56px 0 72px; }
.section-cream { background: var(--cream); }

/* ── notes ─────────────────────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--rule-2); background: var(--cream);
  padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 0 0 20px;
}
.note.ok   { border-left-color: var(--ok);   background: var(--ok-bg);   color: var(--ok); }
.note.warn { border-left-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.note.bad  { border-left-color: var(--bad);  background: var(--bad-bg);  color: var(--bad); }

/* ── buttons, lifted from the main site ────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--gradient-h); color: #fff; text-decoration: none;
  padding: 15px 30px; border-radius: var(--radius); font-weight: 700;
  font-size: 14px; border: none; cursor: pointer; font-family: var(--body);
  transition: all .25s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(224,53,125,0.42); color: #fff; }
.btn-primary[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 8px; background: transparent;
  color: var(--pink-dark); text-decoration: none; padding: 13px 28px;
  border-radius: var(--radius); font-weight: 600; font-size: 14px;
  border: 2px solid rgba(224,53,125,0.35); cursor: pointer;
  font-family: var(--body); transition: all .25s;
}
.btn-outline:hover { background: rgba(224,53,125,0.06); border-color: var(--pink); }
button.link {
  border: 0; background: none; padding: 4px 0; color: var(--ink-3);
  font-weight: 500; font-size: 13px; text-decoration: underline;
  cursor: pointer; font-family: var(--body);
}
button.link:hover { color: var(--bad); }

label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-family: var(--body);
  border: 1px solid var(--rule-2); border-radius: 9px;
  background: #fff; color: var(--charcoal);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ── catalogue ─────────────────────────────────────────────────────────── */
.cards {
  display: grid; gap: 20px; margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card {
  position: relative; background: #fff; border: 1px solid var(--rule);
  border-radius: 14px; padding: 16px 16px 20px; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card .shot {
  aspect-ratio: 1/1; background: #fff; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.card .shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.noshot { color: var(--ink-3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.card h3 { font-size: 16px; margin: 0 0 4px; letter-spacing: -0.2px; }
.card h3 a { color: var(--charcoal); text-decoration: none; }
.card .blurb { color: var(--ink-2); font-size: 13px; margin: 0 0 14px; flex: 1 1 auto; }

/* Rish's price pill, now in the brand's actual pink. */
.card .price, .buybox .price {
  display: inline-block; background: var(--gradient-h); color: #fff;
  font-weight: 700; padding: 7px 22px; border-radius: 99px; margin: 0 auto 10px;
}
.card .price { font-size: 16px; }

/* ONE stretched link per card — tapping the picture is what people do. */
.card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.card:hover { border-color: var(--pink); box-shadow: 0 8px 28px rgba(224,53,125,0.12); }
.card:hover h3 a { color: var(--pink-dark); }
.card:focus-within { outline: 2px solid var(--pink); outline-offset: 3px; }
.card h3 a:focus-visible { outline: none; }
@media (hover: hover) { .card:hover { transform: translateY(-3px); } }

.avail { font-size: 12px; font-weight: 600; display: block; }
.avail.ok   { color: var(--ok); }
.avail.lead { color: var(--ink-3); }
.avail.off  { color: var(--bad); }

/* ── product page ──────────────────────────────────────────────────────── */
.product { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .product { grid-template-columns: 1.1fr .9fr; } }
.detail { min-width: 0; }
.lead { font-size: 17px; color: var(--ink-2); }

figure.hero {
  margin: 0 0 24px; background: #fff; border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden; aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
figure.hero img { width: 100%; height: 100%; object-fit: contain; display: block; }

.buybox {
  border: 1px solid var(--rule); border-radius: 14px; background: #fff;
  padding: 24px; align-self: start; position: sticky; top: calc(var(--nav-h) + 20px);
  box-shadow: 0 4px 24px rgba(53,58,71,0.06); text-align: center;
}
.buybox .price { font-size: 24px; padding: 9px 28px; }
.buybox form { margin: 18px 0 0; text-align: left; }
.buybox .btn-primary { width: 100%; }
/* The quantity field sits alone on its row rather than beside the button, so
   that on a phone the number input keeps a full-width tap target instead of
   being squeezed next to something else. */
.qtyrow { display: flex; gap: 12px; align-items: flex-end; }
.qtyrow > div { flex: 1 1 auto; }

.advisory {
  border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  background: var(--warn-bg); border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 24px 0 0;
}
.advisory h4 {
  margin: 0 0 8px; font-family: var(--display); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--warn);
}
.advisory p { margin: 0 0 8px; font-size: 14px; }
.advisory p:last-child { margin-bottom: 0; }

/* ── what you are getting ──────────────────────────────
   Deliberately NOT styled like .advisory. That block is a warning and wears a
   warning's colour; this one is a reason to buy, and reads as fact. */
.spec {
  border: 1px solid var(--rule); border-left: 3px solid var(--pink);
  background: var(--cream); border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 24px 0 0;
}
.spec h4 {
  margin: 0 0 8px; font-family: var(--display); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--purple);
}
.spec p { margin: 0 0 8px; font-size: 14px; }
.spec ul.plain { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.spec ul.plain li { margin: 0 0 4px; padding-left: 16px; position: relative; }
.spec ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pink);
}
.spec > :last-child { margin-bottom: 0; }

table.tiers { border-collapse: collapse; width: 100%; font-size: 14px; margin-top: 14px; }
table.tiers th, table.tiers td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
table.tiers th {
  font-family: var(--display); color: var(--ink-3); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.2px;
}
table.tiers td.r, table.tiers th.r { text-align: right; font-variant-numeric: tabular-nums; }

/* ── basket ────────────────────────────────────────────────────────────── */
table.basket-lines { width: 100%; border-collapse: collapse; }
table.basket-lines th, table.basket-lines td {
  padding: 16px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top;
}
table.basket-lines th {
  font-family: var(--display); font-size: 11px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-3);
}
table.basket-lines td.r, table.basket-lines th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.basket-lines .name { font-weight: 700; font-size: 15px; }
table.basket-lines .was { color: var(--ink-3); text-decoration: line-through; font-size: 13px; }
/* ── quantity stepper ─────────────────────────────────────────────
   Three separate forms, drawn as one control. Each button is its own form
   because a single form would submit its FIRST button when Enter is pressed
   in the number box, and that button is the minus.

   44px is not a round number picked for looks: it is the smallest target most
   accessibility guidance will accept for a finger, and this control exists
   precisely so that somebody on a phone does not have to use the keyboard. */
.stepper { display: flex; align-items: stretch; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.stepper form { display: flex; align-items: stretch; }

.stepper .step {
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2); border-radius: 10px; background: #fff;
  font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1;
  color: var(--purple); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.stepper .step:hover:not(:disabled) {
  border-color: var(--pink); color: var(--pink-dark); background: var(--cream);
}
.stepper .step:active:not(:disabled) { background: var(--cream); }
.stepper .step:focus-visible { outline: 3px solid rgba(224, 53, 125, .35); outline-offset: 1px; }
/* Visibly out of moves, rather than a button that quietly does nothing. */
.stepper .step:disabled { opacity: .38; cursor: default; }

.stepper .step-set { gap: 8px; }
table.basket-lines input[type=number] {
  width: 4.2rem; height: 44px; text-align: center;
  /* 16px so iOS does not zoom the page the moment this is focused. */
  font: 600 16px/1 var(--body); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: 10px; background: #fff;
  -webkit-appearance: none; appearance: none; padding: 0 6px;
}
table.basket-lines input[type=number]:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(224, 53, 125, .18);
}
.stepper .step-set button {
  padding: 0 16px; border-radius: 10px; border: 1px solid var(--rule-2);
  background: #fff; font: 600 14px var(--display); letter-spacing: .4px;
  color: var(--ink-2); cursor: pointer;
}
.stepper .step-set button:hover { border-color: var(--pink); color: var(--pink-dark); }

@media (prefers-reduced-motion: reduce) {
  .stepper .step { transition: none; }
}

.totals { margin: 28px 0 0 auto; max-width: 26rem; }
.totals dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; margin: 0; }
.totals dt { color: var(--ink-2); }
.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totals .grand dt, .totals .grand dd {
  font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--charcoal);
  border-top: 2px solid var(--rule); padding-top: 14px; margin-top: 4px;
}
.totals .save dt, .totals .save dd { color: var(--ok); }

.empty { text-align: center; padding: 64px 20px; }
.empty p { color: var(--ink-2); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── footer, matching the main site's ──────────────────────────────────── */
footer.foot { background: #080405; padding: 56px 0 26px; margin-top: 60px; }
footer.foot .wrap { max-width: 1200px; }
.foot-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.foot-brand img { height: 52px; background: #fff; padding: 4px; border-radius: 6px; margin-bottom: 14px; display: block; }
.foot-brand p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 260px; }
.foot-col h4 {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: 1.5px; margin-bottom: 16px; text-transform: uppercase;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { font-size: 13px; color: rgba(255,255,255,0.55); text-decoration: none; }
.foot-col a:hover { color: var(--pink); }
.foot-bottom { padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.foot-bottom p, .foot-bottom a { font-size: 12px; color: rgba(255,255,255,0.5); text-decoration: none; }
.foot-bottom a:hover { color: var(--pink); }

/* ── phones ────────────────────────────────────────────────────────────────
   Most of this shop's traffic will be one hand on a phone. Two columns of real
   photographs beat one column of enormous ones: more product per scroll, and
   the tap target is the whole tile either way. */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }
  nav.top { padding: 0 20px; }
  .nav-links a { padding: 8px 10px; font-size: 12px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .nav-logo-text .tagline { display: none; }
  .nav-links .products-link { display: none; }   /* the logo already goes home */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { padding: 12px 12px 16px; }
  .card h3 { font-size: 14px; }
  .card .blurb { display: none; }
  .card .price { font-size: 14px; padding: 6px 16px; }
  .page-head { padding: 36px 0 34px; }
  .buybox { position: static; }
  .foot-top { grid-template-columns: 1fr; }
  table.basket-lines th.hide-s, table.basket-lines td.hide-s { display: none; }
  .totals { max-width: none; }
}
@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr; }
  .card .blurb { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card:hover, .btn-primary:hover { transform: none; }
}

/* ── prose pages ───────────────────────────────────────────────────────────
   Delivery, terms, privacy. A measured column rather than the full grid width:
   a line of body text past about 75 characters is measurably harder to read,
   and these are the pages someone reads rather than scans. */
.narrow-page { max-width: 62ch; }
.narrow-page h2 { margin-top: 38px; }
.narrow-page h2:first-child { margin-top: 0; }
.narrow-page ul.plain { list-style: none; margin: 0 0 18px; padding: 0; }
.narrow-page ul.plain li {
  position: relative; padding-left: 24px; margin-bottom: 10px;
}
.narrow-page ul.plain li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gradient-h);
}
.totals dt a { color: var(--ink-2); text-decoration: none; }
.totals dt a:hover { color: var(--pink-dark); text-decoration: underline; }

/* ── checkout ─────────────────────────────────────────────────────────────
   Mobile first, because on this shop it is the likely case rather than the
   awkward one: one column, full-width controls, and the order summary ABOVE
   the form so the figure being agreed to is the first thing on the screen.
   The two-column arrangement only appears where there is genuinely room. */
.checkout-grid { display: grid; gap: 28px; }

.checkout-form fieldset {
  border: 1px solid var(--rule); border-radius: 12px;
  padding: 20px; margin: 0 0 20px;
}
.checkout-form legend {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--purple);
  padding: 0 8px;
}
.checkout-form label {
  display: block; margin: 0 0 16px;
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .3px; color: var(--ink-2);
}
.checkout-form label:last-child { margin-bottom: 0; }
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input:not([type]),
.checkout-form select {
  display: block; width: 100%; margin-top: 6px;
  /* 16px is not a style choice. Anything smaller makes iOS Safari zoom the
     page when the field is focused, and it does not zoom back out. */
  font: 400 16px/1.4 var(--body); color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--rule-2);
  border-radius: 9px; background: #fff;
  -webkit-appearance: none; appearance: none;
}
.checkout-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 38px;
}
.checkout-form input:focus, .checkout-form select:focus {
  outline: none; border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(224, 53, 125, .18);
}
.checkout-form label.bad input, .checkout-form label.bad select { border-color: var(--bad); }
.checkout-form .hint, .checkout-form .opt {
  display: block; margin-top: 6px;
  font-family: var(--body); font-size: 13px; font-weight: 400; color: var(--ink-3);
}
.checkout-form .opt {
  display: inline; margin-left: 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
}
.field-error {
  display: block; margin-top: 6px;
  font-family: var(--body); font-size: 13px; font-weight: 400; color: var(--bad);
}
.checkout-form label.cb {
  display: grid; grid-template-columns: 22px 1fr; gap: 0 10px;
  align-items: start; font-weight: 400; font-family: var(--body);
  font-size: 15px; color: var(--ink); line-height: 1.45;
}
.checkout-form label.cb input[type="checkbox"] {
  /* 22px, not the 13px default: this is a target a thumb has to hit. */
  width: 22px; height: 22px; margin: 0; accent-color: var(--pink);
}
.checkout-form label.cb .hint, .checkout-form label.cb .field-error { grid-column: 2; }
.checkout-form .grid-2 { display: grid; gap: 0 16px; }

.checkout-summary {
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--cream); padding: 20px;
}
.checkout-summary h2 {
  margin: 0 0 14px; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--purple);
}
ul.mini-lines { list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; }
ul.mini-lines li {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--rule);
}
ul.mini-lines .q { color: var(--ink-3); font-variant-numeric: tabular-nums; }
ul.mini-lines .v { font-variant-numeric: tabular-nums; }
dl.mini-totals {
  display: grid; grid-template-columns: 1fr auto; gap: 7px 12px;
  margin: 0; font-size: 14px;
}
dl.mini-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.mini-totals dt.g, dl.mini-totals dd.g {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  padding-top: 9px; border-top: 1px solid var(--rule-2); color: var(--purple);
}

.order-ref {
  font-family: var(--display); font-size: 15px; letter-spacing: .4px;
  color: var(--ink-2); margin: 0 0 18px;
}
.order-ref strong { font-size: 19px; letter-spacing: 1.4px; color: var(--purple); }

@media (min-width: 720px) {
  .checkout-form .grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  /* The summary is written first in the markup so that it comes first on a
     phone. On a wide screen it belongs on the right, which is what the column
     assignments below do without reordering the source. */
  .checkout-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 36px; }
  .checkout-form    { grid-column: 1; grid-row: 1; }
  .checkout-summary { grid-column: 2; grid-row: 1; position: sticky; top: 24px; align-self: start; }
}

/* ── the last page before Payfast ─────────────────────────────────────────
   Deliberately plain and short. Everything on it is a number the customer is
   about to agree to, and nothing else competes for attention. */
dl.pay-summary {
  display: grid; grid-template-columns: 1fr auto; gap: 9px 20px;
  margin: 0 0 26px; max-width: 22rem;
}
dl.pay-summary dt { color: var(--ink-2); }
dl.pay-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.pay-summary dt.g, dl.pay-summary dd.g {
  font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--purple);
  padding-top: 10px; border-top: 1px solid var(--rule-2);
}

/* ── The PUDO locker picker ────────────────────────────────────────────────
   A radio list, not a map. PUDO's own flow shows a map, but a map answers
   "where is this place" and the question at a checkout is "which of these
   can I get to" — and a map cannot be rendered without JavaScript, which
   this shop does not load. The list is searchable, which is the part that
   actually matters. */
.locker-pick { margin-top: 18px; }

.locker-results {
  margin: 14px 0 6px;
  border: 1px solid var(--line, #dcd7cf);
  border-radius: 10px;
  overflow: hidden;
}
.locker-results li { margin: 0; border-bottom: 1px solid var(--line, #dcd7cf); }
.locker-results li:last-child { border-bottom: 0; }

.locker-results label {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 2px 8px;
  align-items: start;
  padding: 12px 14px;
  margin: 0;
  cursor: pointer;
}
.locker-results label:hover { background: #faf7f3; }
.locker-results input[type="radio"] { grid-row: 1 / span 2; margin-top: 3px; }
.locker-results strong { grid-column: 2; }
.locker-results .small { grid-column: 2; display: block; }

/* Touch targets before anything else: most of this shop's customers are on a
   phone, and a radio button you have to aim at is a checkout you lose. */
@media (max-width: 560px) {
  .locker-results label { padding: 14px 12px; }
}

/* ── Combo specials ────────────────────────────────────────────────────────
   A bundle card has to say three things a product card does not: this is a
   combination, it is cheaper than the parts, and it does not last. The
   struck-through "was" is the parts total computed today, never a stored
   number — a saving that drifts away from the truth is a Consumer Protection
   Act problem, not a styling one. */
.bundle-card .shot { background: linear-gradient(135deg, #2b2b2b, #4a4a4a); }
.bundle-card .shot .noshot { color: #fff; letter-spacing: .04em; }

.price .was {
  margin-left: 8px;
  font-size: .78em;
  font-weight: 400;
  text-decoration: line-through;
  opacity: .55;
}

.avail.warn { background: #fdf0e3; color: #8a4b12; }
.avail.ok   { background: #e9f5ec; color: #205c33; }

/* ── Order tracking steps ──────────────────────────────────────────────────
   Four steps, top to bottom, because on a phone a horizontal progress bar
   with four labels is four labels nobody can read. */
.track-steps { list-style: none; margin: 18px 0 22px; padding: 0; }
.track-steps li {
  position: relative;
  padding: 0 0 18px 30px;
  display: flex; flex-direction: column; gap: 2px;
}
.track-steps li::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #c9c2b8; background: #fff;
}
.track-steps li::after {
  content: ''; position: absolute; left: 8px; top: 22px; bottom: 0;
  width: 2px; background: #e4ded5;
}
.track-steps li:last-child::after { display: none; }
.track-steps li.done::before { background: #205c33; border-color: #205c33; }
.track-steps li.now::before  { background: #fff; border-color: #d6336c; border-width: 5px; }
.track-steps li.later strong { color: #8b857c; font-weight: 500; }