/* ==========================================================================
   CKTech storefront — design system v4
   One purple ramp with a job per step, a real type scale, hover/focus states,
   a mobile drawer, and designed cart + checkout.
   Supersedes storefront.css (kept on disk for reference).
   ========================================================================== */

:root{
  --purple-900:#26104a;
  --purple-800:#38176b;
  --purple-700:#4b1e7c;
  --purple-600:#572099;
  --brand:#722cf0;
  --brand-hover:#5e1fd0;
  --brand-soft:#f0e8ff;

  --ink:#171523;
  --ink-2:#2b2735;
  --muted:#625c6c;
  --muted-2:#6a6274;
  --line:#e6e1ee;
  --line-strong:#d6cee3;
  --surface:#ffffff;
  --page:#f6f4fa;
  --well:#f4f1f9;

  --ok:#0f7a4d;
  --ok-bg:#e8f7ef;
  --warn:#8a5a00;
  --warn-bg:#fff5e0;
  --danger:#a3231f;
  --danger-bg:#fdeceb;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-pill:999px;
  --shadow-1:0 1px 2px rgba(23,21,35,.06);
  --shadow-2:0 8px 24px -12px rgba(38,16,74,.28);
  --shadow-3:0 18px 48px -20px rgba(38,16,74,.35);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  --gutter:32px;
  --max:1440px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.015em;font-weight:700;color:var(--ink)}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--purple-600);text-decoration:none}
a:hover{color:var(--brand)}
button{font:inherit;color:inherit}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:4px;
}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:12px 18px;border-radius:var(--r-sm);box-shadow:var(--shadow-2);font-weight:600;transition:top .15s var(--ease)}
.skip:focus{top:12px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- announcement -------------------------------------------------- */
.announce{background:var(--purple-900);color:#e7dcff;font-size:12.5px}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:20px;min-height:34px;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.announce b{color:#fff;font-weight:600}
.announce i{font-style:normal;color:#8f7bb5}

/* ---------- header -------------------------------------------------------- */
.site-header{background-image:linear-gradient(105deg,#2b1250,#40196f 62%,#4b1e7c);color:#fff;position:relative;z-index:60}
.site-header .bar{display:flex;align-items:center;gap:var(--s4);min-height:72px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:42px;width:auto}

.nav{display:flex;align-items:center;gap:2px;margin-left:4px}
.nav a,.nav button{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:0 12px;border-radius:var(--r-sm);border:0;background:transparent;
  color:#e9def9;font-size:14.5px;font-weight:500;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease);
}
.nav a:hover,.nav button:hover{background:rgba(255,255,255,.12);color:#fff}
.nav a[aria-current="page"]{background:rgba(255,255,255,.16);color:#fff}
.nav .chev{width:14px;height:14px;opacity:.75}

.search{display:flex;flex:1 1 auto;min-width:0;max-width:520px;margin-left:auto;height:44px;background:#fff;border-radius:var(--r-sm);overflow:hidden}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;padding:0 16px;height:100%}
.search input::placeholder{color:var(--muted-2)}
.search button{width:52px;border:0;background:var(--brand);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s var(--ease)}
.search button:hover{background:var(--brand-hover)}
.search button svg{width:19px;height:19px}

.utilities{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.utility{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-width:58px;min-height:52px;padding:4px 8px;border:0;background:transparent;border-radius:var(--r-sm);
  color:#efe7fb;font-size:11.5px;line-height:1.1;transition:background .15s var(--ease);
}
.utility:hover{background:rgba(255,255,255,.12);color:#fff}
.utility svg{width:21px;height:21px}
.utility.cart{position:relative}
.cart-badge{
  position:absolute;top:3px;right:8px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-pill);
  background:#ffd451;color:#3a2800;font-size:11px;font-weight:800;line-height:1;
}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.35);background:transparent;border-radius:var(--r-sm);color:#fff;place-items:center;cursor:pointer}
.mobile-search{display:none;padding:0 var(--s3) var(--s3)}

/* ---------- drawer -------------------------------------------------------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,14,32,.5);opacity:0;pointer-events:none;transition:opacity .22s var(--ease);z-index:90}
/* `hidden` has to mean hidden. The rules below give the drawer display:flex, and author CSS beats the
   browser's own [hidden]{display:none} - so a closed drawer was still rendered (offscreen), still in
   the accessibility tree as an open modal, and its links could be reached by Tab. The attributes are
   only set once the closing animation has finished, so these rules do not cut that animation short. */
.drawer[hidden],.drawer-scrim[hidden]{display:none}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);z-index:100;
  background:var(--surface);display:flex;flex-direction:column;
  transform:translateX(-102%);transition:transform .26s var(--ease);box-shadow:var(--shadow-3);
}
body.drawer-open .drawer{transform:none}
body.drawer-open .drawer-scrim{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer header strong{font-size:15px}
.drawer .close{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer}
.drawer-body{overflow:auto;padding:8px 0 24px;flex:1}
.drawer a.dlink{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;color:var(--ink-2);font-size:15px;border-bottom:1px solid #f1edf7}
.drawer a.dlink:hover{background:var(--brand-soft);color:var(--purple-700)}
.drawer a.dlink .count{color:var(--muted-2);font-size:12.5px;font-variant-numeric:tabular-nums}
.drawer .drawer-foot{padding:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.drawer .drawer-foot a{display:block;padding:6px 0;color:var(--purple-600)}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--brand);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:background .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease);
}
.btn:hover{background:var(--brand-hover);color:#fff;box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--purple-700);border-color:var(--line-strong)}
.btn.ghost:hover{background:#faf8ff;color:var(--purple-700);box-shadow:var(--shadow-1)}
.btn.wide{width:100%}
.btn.small{min-height:38px;padding:0 14px;font-size:13.5px}
.btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--purple-600)}
.link-arrow:hover{color:var(--brand)}

main{display:block;padding-bottom:var(--s8)}

/* ---------- sections ------------------------------------------------------ */
.section{margin-top:var(--s7)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:var(--s4);flex-wrap:wrap}
.section-head h2{font-size:22px;letter-spacing:-.02em}
.section-head h2 a{color:inherit}
.section-head h2 a:hover{color:var(--brand)}
.eyebrow{color:var(--brand);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:6px}

/* ---------- hero ---------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s5);margin-top:var(--s5)}
.hero-copy{
  background:linear-gradient(150deg,#fff 40%,#f4ecff);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s7);display:flex;flex-direction:column;justify-content:center;gap:var(--s4);
  min-width:0;
}
.hero-copy .eyebrow{color:var(--purple-600);font-size:12px;font-weight:800;letter-spacing:.14em}
.hero-copy h1{font-size:clamp(28px,3.1vw,42px);letter-spacing:-.03em;max-width:20ch}
.hero-copy p{color:var(--muted);font-size:17px;max-width:46ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-facts{display:flex;gap:var(--s5);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);flex-wrap:wrap}
.hero-facts div{font-size:13.5px;color:var(--ink-2)}
.hero-facts b{display:block;color:var(--ink);font-size:15px;font-weight:700}
.hero-art{position:relative;border-radius:var(--r-lg);overflow:hidden;background:radial-gradient(120% 100% at 78% 12%,#5b2ba8,#26104a 72%);border:1px solid #3a1a68;min-height:340px}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}

/* ---------- category tiles ------------------------------------------------ */
.tiles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s3)}
.tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:18px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  color:var(--ink-2);font-size:12.5px;font-weight:600;text-align:center;line-height:1.25;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease),color .15s var(--ease);
}
.tile:hover{border-color:var(--brand);color:var(--purple-700);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.tile svg{width:26px;height:26px;color:var(--purple-600)}
.tile:hover svg{color:var(--brand)}

/* ---------- grids + product cards ----------------------------------------- */
.product-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(4,minmax(0,1fr))}
.product-grid.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}

.product{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px;display:flex;flex-direction:column;min-width:0;position:relative;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease);
}
.product:hover{border-color:var(--brand);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.product-image{
  position:relative;background:var(--well);border-radius:var(--r-sm);aspect-ratio:1/1;
  display:grid;place-items:center;padding:14px;overflow:hidden;
}
.product-image img{width:100%;height:100%;object-fit:contain;transition:transform .25s var(--ease)}
.product:hover .product-image img{transform:scale(1.04)}
.product-image .stretch{position:absolute;inset:0;z-index:1}
.placeholder{color:var(--muted-2);font-size:12px}
.quick{
  position:absolute;left:8px;right:8px;bottom:8px;z-index:2;
  background:var(--purple-800);color:#fff;border:0;border-radius:var(--r-sm);
  height:36px;font-size:13px;font-weight:600;cursor:pointer;
  opacity:0;transform:translateY(6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),background .15s var(--ease);
}
.product:hover .quick,.product:focus-within .quick{opacity:1;transform:none}
.quick:hover{background:var(--brand)}
.flags{position:absolute;top:8px;left:8px;display:flex;gap:4px;z-index:2}
.flag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:5px;background:#fff;color:var(--purple-700);box-shadow:var(--shadow-1)}
.flag.low{background:var(--warn-bg);color:var(--warn)}
.product h3{font-size:13.5px;line-height:1.38;font-weight:600;letter-spacing:0;margin:10px 0 4px;height:56px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product h3 a{color:var(--ink-2)}
.product h3 a:hover{color:var(--brand)}
.product .meta{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted-2);margin-bottom:8px}
.product .meta .instock{color:var(--ok);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.product .meta .instock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.product .meta .out{color:var(--muted-2);font-weight:600}
.product .price{font-size:16px;font-weight:800;color:var(--purple-800);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:auto}
@media (hover:none){
  .quick{position:static;opacity:1;transform:none;width:100%;margin-top:10px;height:38px;background:var(--brand-soft);color:var(--purple-700);border:1px solid #d8c4fb}
  .quick:hover{background:var(--brand);color:#fff}
  .product h3{height:auto;min-height:0}
}

/* ---------- trust strip --------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.trust div{display:flex;gap:12px;align-items:flex-start}
.trust svg{width:22px;height:22px;color:var(--brand);flex:0 0 auto;margin-top:2px}
.trust b{display:block;font-size:14px;margin-bottom:2px}
.trust p{font-size:13px;color:var(--muted)}

/* ---------- breadcrumbs + page head --------------------------------------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);padding:var(--s4) 0 0;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{color:#b6adc6}
.crumbs [aria-current]{color:var(--ink-2);font-weight:500}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin:var(--s3) 0 var(--s4);flex-wrap:wrap}
.page-head h1{font-size:32px;letter-spacing:-.03em}
.page-head .count,.page-head p{color:var(--muted);font-size:14px;margin-top:6px}

.select-wrap{position:relative;display:inline-flex;align-items:center}
.select-wrap select{appearance:none;height:44px;padding:0 40px 0 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.select-wrap select:hover{border-color:var(--brand)}
.select-wrap svg{position:absolute;right:12px;width:16px;height:16px;pointer-events:none;color:var(--muted)}
.sort{display:flex;align-items:center;gap:10px;margin:0}
.sort label{font-size:13px;color:var(--muted)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:var(--s3) 0 var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.toolbar .hint{font-size:13px;color:var(--muted)}

/* ---------- pagination ---------------------------------------------------- */
.pagination{margin-top:var(--s6)}
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink-2);font-size:14px;font-variant-numeric:tabular-nums}
.pager a:hover{border-color:var(--brand);color:var(--purple-700)}
.pager [aria-current="page"]{background:var(--purple-800);border-color:var(--purple-800);color:#fff;font-weight:700}
.pager .gap{border:0;background:transparent;color:var(--muted)}
.pager .disabled{color:#a79eb5;background:#fbfafd}

/* ---------- alerts -------------------------------------------------------- */
.alert{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);font-size:14px;margin:var(--s4) 0;border:1px solid}
.alert svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.alert.ok{background:var(--ok-bg);color:var(--ok);border-color:#bfe8d1}
.alert.bad{background:var(--danger-bg);color:var(--danger);border-color:#f6cfcc}
.alert.warn{background:var(--warn-bg);color:var(--warn);border-color:#f0dfb8}
.alert b{display:block;margin-bottom:2px}
.alert a{color:inherit;text-decoration:underline;font-weight:600}
.alert .detail{font-size:12.5px;opacity:.85;margin-top:4px}

/* ---------- product detail ------------------------------------------------ */
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s6);align-items:start;margin-top:var(--s4)}
.gallery{display:grid;grid-template-columns:76px minmax(0,1fr);gap:var(--s3)}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumb{width:76px;height:76px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;transition:border-color .15s var(--ease)}
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb:hover{border-color:var(--brand)}
.thumb[aria-selected="true"]{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.stage{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);aspect-ratio:4/3;display:grid;place-items:center;padding:var(--s6);overflow:hidden}
.stage img{width:100%;height:100%;object-fit:contain}
.stage .placeholder{font-size:14px}

.buybox{position:sticky;top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.buybox .kicker{font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.buybox h1{font-size:26px;letter-spacing:-.025em;margin:8px 0 10px;line-height:1.2}
.buybox .price{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--purple-800);font-variant-numeric:tabular-nums}
.buybox .vat{font-size:12.5px;color:var(--muted);margin-top:2px}
.stock{display:inline-flex;align-items:center;gap:8px;margin:var(--s4) 0;padding:8px 12px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok);font-size:13.5px;font-weight:600}
.stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.stock.out{background:#f1eff5;color:var(--muted)}
.stock.out::before{background:var(--muted-2)}

.buy{display:flex;gap:10px;align-items:stretch;margin:var(--s4) 0;flex-wrap:wrap}
.buy label{font-size:13px;color:var(--muted);align-self:center}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.stepper button{width:42px;height:46px;border:0;background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--ink-2)}
.stepper button:hover{background:var(--brand-soft);color:var(--purple-700)}
.stepper input,.stepper select{width:52px;height:46px;border:0;text-align:center;font:inherit;font-weight:600;font-variant-numeric:tabular-nums;background:#fff;-moz-appearance:textfield}
.stepper select{width:62px;text-align:left;padding-left:12px;appearance:none}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.buy .btn{flex:1;min-width:160px}

.deliver{display:flex;gap:12px;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);margin-top:var(--s4);background:#fbfaff}
.deliver svg{width:20px;height:20px;color:var(--purple-600);flex:0 0 auto;margin-top:2px}
.deliver b{font-size:13.5px;display:block}
.deliver p{font-size:12.5px;color:var(--muted)}
.paymarks{display:flex;align-items:center;gap:8px;margin-top:var(--s4);font-size:12px;color:var(--muted);flex-wrap:wrap}
.paymarks span{display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--line-strong);border-radius:5px;background:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-2)}

.specs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s6)}
.specs h2{font-size:18px;margin-bottom:var(--s4)}
.specs table{width:100%;border-collapse:collapse;font-size:14px}
.specs th,.specs td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{width:34%;color:var(--muted);font-weight:500}
.specs td{color:var(--ink-2);font-weight:500;overflow-wrap:anywhere}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.desc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-top:var(--s4)}
.desc h2{font-size:18px;margin-bottom:var(--s3)}
.desc p{color:var(--ink-2);font-size:15px;line-height:1.7;overflow-wrap:anywhere}

/* ---------- cart ---------------------------------------------------------- */
.cart-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr);gap:var(--s5);align-items:start;margin-top:var(--s4)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.panel h2{font-size:18px}
.cart-head{display:grid;grid-template-columns:84px minmax(0,1fr) 108px 150px 104px 40px;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-2)}
.cart-line{display:grid;grid-template-columns:84px minmax(0,1fr) 108px 150px 104px 40px;gap:var(--s4);align-items:center;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.cart-head span:nth-child(3),.cart-head span:nth-child(5){text-align:right}
.cart-line:last-of-type{border-bottom:0}
.cart-thumb{width:84px;height:84px;background:var(--well);border-radius:var(--r-sm);display:grid;place-items:center;padding:8px}
.cart-thumb img{width:100%;height:100%;object-fit:contain}
.cart-line .name{font-size:14px;font-weight:600;color:var(--ink-2);line-height:1.35}
.cart-line .name a{color:inherit}
.cart-line .name a:hover{color:var(--brand)}
.cart-line .sku{font-size:12px;color:var(--muted-2);margin-top:4px}
.cart-line .unit{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cart-line .total{font-size:15px;font-weight:700;color:var(--purple-800);font-variant-numeric:tabular-nums;text-align:right}
.cart-line .stepper button{width:32px;height:38px}
.cart-line .stepper input{width:44px;height:38px;font-size:14px}
.cart-line .remove{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.cart-line .remove:hover{background:var(--danger-bg);color:var(--danger);border-color:#f6cfcc}
.cart-line .qty-form{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cart-line .qty-form .apply{height:38px;padding:0 10px;font-size:12.5px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:#fff;cursor:pointer;color:var(--purple-700);font-weight:600}
.cart-line .qty-form .apply:hover{border-color:var(--brand);background:#faf8ff}
.remove-form{display:contents}
.cart-line .line-error{color:var(--danger);font-weight:600}
.cart-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:var(--s4);border-top:1px solid var(--line);margin-top:var(--s2);flex-wrap:wrap}
.cart-actions .note{font-size:13px;color:var(--muted)}

.summary{position:sticky;top:16px}
.summary .row{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:9px 0;color:var(--ink-2)}
.summary .row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.summary .row.muted{color:var(--muted);font-size:13.5px}
.summary .row.muted span:last-child{font-weight:500}
.summary .total{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s3);font-size:18px;font-weight:800;display:flex;justify-content:space-between}
.summary .total span:last-child{color:var(--purple-800);font-size:22px}
.promo{display:flex;gap:8px;margin:var(--s4) 0}
.promo input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);font:inherit;font-size:14px;background:#fff}
.promo input::placeholder{color:var(--muted-2)}
.secure{display:flex;align-items:center;gap:7px;justify-content:center;margin-top:12px;font-size:12px;color:var(--muted)}
.secure svg{width:14px;height:14px;color:var(--ok)}

.empty{text-align:center;padding:var(--s8) var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);margin-top:var(--s4)}
.empty .icon{width:72px;height:72px;margin:0 auto var(--s4);border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.empty .icon svg{width:32px;height:32px}
.empty h2{font-size:22px;margin-bottom:8px}
.empty p{color:var(--muted);max-width:46ch;margin:0 auto var(--s5)}
.empty .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- checkout ------------------------------------------------------ */
.steps{display:flex;align-items:center;gap:10px;margin:var(--s4) 0 var(--s5);flex-wrap:wrap;font-size:13.5px;color:var(--muted);list-style:none;padding:0}
.steps .step{display:flex;align-items:center;gap:8px}
.steps .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eeeaf6;color:var(--muted);font-size:12px;font-weight:700}
.steps .step.done .n{background:var(--ok-bg);color:var(--ok)}
.steps .step.now{color:var(--ink);font-weight:600}
.steps .step.now .n{background:var(--purple-800);color:#fff}
.steps .bar{width:32px;height:1px;background:var(--line-strong)}

.checkout-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.8fr);gap:var(--s5);align-items:start}
.form-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.form-panel h2{font-size:18px;margin-bottom:2px}
.form-panel .hint{font-size:13px;color:var(--muted);margin-bottom:var(--s4)}
.form-panel + .form-panel{margin-top:var(--s4)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field label .opt{font-weight:400;color:var(--muted-2)}
.field input,.field select,.field textarea{
  height:46px;padding:0 13px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font:inherit;font-size:16px;background:#fff;color:var(--ink);width:100%;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.field input::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(114,44,240,.16)}

fieldset.pay{border:0;padding:0;margin:0}
fieldset.pay legend{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:10px;padding:0}
.pay-option{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line-strong);border-radius:var(--r);margin-bottom:10px;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
.pay-option:hover{border-color:var(--brand);background:#fcfaff}
.pay-option:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.pay-option input{margin-top:3px;accent-color:var(--brand);width:18px;height:18px}
.pay-option b{display:block;font-size:14px}
.pay-option span{font-size:12.5px;color:var(--muted)}
.mini-line{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.mini-line:last-of-type{border-bottom:0}
.mini-line .t{width:52px;height:52px;background:var(--well);border-radius:var(--r-sm);display:grid;place-items:center;padding:5px;flex:0 0 auto}
.mini-line .t img{width:100%;height:100%;object-fit:contain}
.mini-line .n{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink-2)}
.mini-line .q{font-size:12px;color:var(--muted-2)}
.mini-line .p{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--purple-800);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- footer -------------------------------------------------------- */
footer.site{background:#1b1229;color:#c9c0d8;margin-top:var(--s8);border-top:1px solid #2b1e3f}
footer.site .top{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--s6);padding:var(--s7) 0 var(--s6)}
footer.site img{height:38px;margin-bottom:14px}
footer.site h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
footer.site a{display:block;color:#c9c0d8;font-size:14px;padding:5px 0;transition:color .15s var(--ease)}
footer.site a:hover{color:#fff}
footer.site .about p{font-size:14px;color:#a99dbb;max-width:36ch;line-height:1.6}
footer.site .pay{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
footer.site .pay span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid #3b2b53;border-radius:5px;font-size:11px;font-weight:700;color:#ded4ee;background:#241834}
footer.site .bottom{border-top:1px solid #2b1e3f;padding:16px 0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8f819f}
footer.site .bottom .links{display:flex;gap:18px}
footer.site .bottom a{display:inline;padding:0;font-size:12.5px}

/* ---------- toast --------------------------------------------------------- */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:150;display:flex;align-items:center;gap:12px;
  background:#1b1229;color:#fff;padding:14px 16px;border-radius:var(--r);box-shadow:var(--shadow-3);
  font-size:14px;transform:translateY(140%);transition:transform .28s var(--ease);
}
.toast.show{transform:none}
.toast svg{width:18px;height:18px;color:#7ee2b0}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1240px){
  .product-grid.cols-5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .nav a:nth-child(n+4){display:none}
}
@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero-art{min-height:260px;order:-1}
  .nav,.header-search{display:none}
  .burger{display:grid}
  .mobile-search{display:block}
  .site-header .bar{min-height:64px;gap:10px}
  .utilities{margin-left:auto}
  .pdp{grid-template-columns:1fr}
  .buybox{position:static}
  .cart-layout,.checkout-layout{grid-template-columns:1fr}
  .summary{position:static}
  .product-grid,.product-grid.cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.site .top{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .cart-head{display:none}
  .cart-line{grid-template-columns:72px minmax(0,1fr) 44px;gap:var(--s3);align-items:start}
  .cart-line .unit,.cart-line .total{grid-column:2;text-align:left}
  .cart-line .qty-form{grid-column:2}
  .cart-thumb{width:72px;height:72px}
  .cart-line .remove{grid-column:3;grid-row:1}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .announce .wrap{min-height:30px;gap:10px;justify-content:flex-start;font-size:11.5px}
  .announce .hide-sm{display:none}
  .site-header .brand img{height:34px}
  .product-grid,.product-grid.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product{padding:9px}
  .product h3{font-size:12.5px;height:auto;min-height:0}
  .product .price{font-size:15px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tile{padding:14px 6px;font-size:11px;gap:8px}
  .tile svg{width:22px;height:22px}
  .hero-copy{padding:var(--s5) var(--s4)}
  .hero-copy p{font-size:15.5px}
  .hero-facts{gap:var(--s4)}
  .page-head h1{font-size:26px}
  .section-head h2{font-size:19px}
  .trust{grid-template-columns:1fr;padding:var(--s4)}
  .gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2}
  .stage{aspect-ratio:1/1;padding:var(--s5)}
  .field-row{grid-template-columns:1fr}
  footer.site .top{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6) 0 var(--s4)}
  .cart-line{grid-template-columns:64px minmax(0,1fr) 40px}
  .cart-thumb{width:64px;height:64px}
  .buybox{padding:var(--s4)}
  .buybox h1{font-size:22px}
  .toast{left:12px;right:12px;bottom:12px}
}
@media (max-width:440px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .buy{flex-wrap:wrap}
  .buy .stepper{flex:0 0 auto}
  .buy .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- order received ----------------------------------------------- */
.order-received{max-width:1080px;margin:32px auto 0}
.order-welcome{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(190px,260px);align-items:center;gap:18px;padding:26px 30px;background:linear-gradient(115deg,#fff 45%,#f2ebff);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.order-welcome__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--ok-bg);color:var(--ok);font-size:25px;font-weight:800}
.order-welcome__copy h1{font-size:28px;letter-spacing:-.035em}
.order-welcome__copy p{margin-top:7px;color:var(--muted);font-size:14px}
.order-eyebrow{display:block;margin-bottom:5px;color:var(--purple-600);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.order-reference{padding:12px 16px;border:1px solid #ded1f4;border-radius:var(--r);background:rgba(255,255,255,.78)}
.order-reference span{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.order-reference strong{display:block;margin-top:3px;color:var(--purple-800);font-size:19px;letter-spacing:.045em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;align-items:start;gap:20px;margin-top:20px}
.order-main{display:grid;gap:18px;min-width:0}
.order-panel{min-width:0;padding:22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.order-panel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.order-panel__head h2,.order-address h2{font-size:19px;letter-spacing:-.02em}
.order-item-count,.order-payment__method{flex:0 0 auto;padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--well);color:var(--ink-2);font-size:12px;font-weight:650}
.order-table-wrap{overflow-x:auto;margin:0 -4px}
.order-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.order-table th,.order-table td{padding:11px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.order-table th{color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.055em;text-transform:uppercase}
.order-table th:nth-child(1){width:auto}
.order-table th:nth-child(2){width:58px;text-align:center}
.order-table th:nth-child(3),.order-table th:nth-child(4){width:112px;text-align:right}
.order-table td:nth-child(2){text-align:center;font-variant-numeric:tabular-nums}
.order-table td:nth-child(3),.order-table td:nth-child(4){text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.order-table td:first-child{font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.order-totals{width:min(100%,360px);margin:14px 0 0 auto;font-size:13px}
.order-totals>div{display:flex;justify-content:space-between;gap:18px;padding:5px 0;color:var(--muted)}
.order-totals dt,.order-totals dd{margin:0}
.order-totals dd{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.order-totals__grand{margin-top:5px;padding-top:12px!important;border-top:1px solid var(--line);color:var(--ink)!important;font-size:15px;font-weight:800}
.order-totals__grand dd{color:var(--purple-800);font-size:20px;font-weight:800}
.order-payment .order-panel__head{align-items:center}
.order-note{margin:0;padding:14px 16px;border:1px solid;border-radius:var(--r);font-size:14px;line-height:1.55}
.order-note--pending{border-color:#f0dfb8;background:var(--warn-bg);color:#604000}
.order-note--success{border-color:#bfe8d1;background:var(--ok-bg);color:#075c39}
.eft-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin:14px 0 0;padding-top:13px;border-top:1px solid rgba(96,64,0,.18)}
.eft-details>div{min-width:0}
.eft-details dt{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.76}
.eft-details dd{margin:2px 0 0;font-weight:700;overflow-wrap:anywhere}
.order-email-status{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;border:1px solid;border-radius:var(--r);font-size:13px;line-height:1.5}
.order-email-status__icon{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;font-size:14px;font-weight:800}
.order-email-status strong{display:block;margin-bottom:2px}
.order-email-status p{color:inherit;overflow-wrap:anywhere}
.order-email-status.is-sent{border-color:#bfe8d1;background:var(--ok-bg);color:#075c39}
.order-email-status.is-sent .order-email-status__icon{background:#c9edd8}
.order-email-status.is-not-sent{border-color:#f0dfb8;background:var(--warn-bg);color:#604000}
.order-email-status.is-not-sent .order-email-status__icon{background:#f6e7c3}
.order-side{display:grid;gap:12px;position:sticky;top:16px}
.order-address h2{margin-bottom:13px}
.order-address address{color:var(--ink-2);font-size:14px;font-style:normal;line-height:1.7;overflow-wrap:anywhere}
.order-address address strong{display:block;color:var(--ink);font-size:15px}
.order-continue{width:100%;justify-content:space-between}
.order-payment>p:not(.order-note){margin:0 0 10px;color:var(--muted);font-size:13px}
.order-payment dl:not(.order-totals){margin:12px 0 0}

@media(max-width:760px){
  .order-received{margin-top:18px}
  .order-welcome{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:18px}
  .order-welcome__icon{width:40px;height:40px;font-size:21px}
  .order-welcome__copy h1{font-size:23px}
  .order-reference{grid-column:1/-1;margin-left:52px}
  .order-layout{grid-template-columns:1fr;gap:14px;margin-top:14px}
  .order-main{gap:14px}
  .order-side{position:static}
  .order-panel{padding:18px 16px}
  .order-panel__head h2,.order-address h2{font-size:18px}
  .order-table{min-width:0;table-layout:auto}
  .order-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .order-table tbody,.order-table tbody tr{display:block}
  .order-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 8px;border-bottom:1px solid var(--line)}
  .order-table tbody td{display:block;padding:0!important;border:0!important;text-align:left!important;white-space:normal!important}
  .order-table tbody td:first-child{grid-column:1/-1;font-size:13px}
  .order-table tbody td:not(:first-child)::before{content:attr(data-label) ": ";color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
  .order-table tbody td:nth-child(2){grid-column:1;grid-row:2}
  .order-table tbody td:nth-child(3){grid-column:1;grid-row:3}
  .order-table tbody td:nth-child(4){grid-column:2;grid-row:2/4;align-self:center;text-align:right!important;font-weight:750}
  .order-totals{width:100%}
  .order-item-count,.order-payment__method{font-size:11px;padding:4px 8px}
}
@media(max-width:420px){
  .order-welcome{grid-template-columns:36px minmax(0,1fr);padding:15px}
  .order-welcome__icon{width:34px;height:34px;font-size:18px}
  .order-welcome__copy h1{font-size:21px}
  .order-welcome__copy p{font-size:13px}
  .order-reference{margin-left:46px}
  .eft-details{grid-template-columns:1fr}
}

/* ---------- policy pages -------------------------------------------------- */
.legal{max-width:78ch}
.legal .lead{font-size:16px;color:var(--muted);margin-bottom:var(--s5);line-height:1.7}
.legal h2{font-size:20px;letter-spacing:-.01em;margin:var(--s6) 0 var(--s2);color:var(--ink)}
.legal h2:first-of-type{margin-top:var(--s3)}
.legal p{margin:0 0 12px;line-height:1.75;color:var(--ink-2);font-size:15px}
.legal ul{margin:0 0 12px 20px;line-height:1.75;color:var(--ink-2);font-size:15px}
.legal li{margin-bottom:7px}
.legal a{color:var(--brand);text-decoration:underline}
.legal a:hover{color:var(--brand-hover)}
.legal .identity{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
.legal .identity dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px var(--s4);margin:0}
.legal .identity dt{color:var(--muted);font-size:13px;font-weight:750;letter-spacing:.02em}
.legal .identity dd{margin:0;font-size:14px;color:var(--ink-2)}
.legal .updated{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
@media(max-width:560px){
  .legal .identity dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .legal .identity dt{margin-top:10px}
  .legal .identity dd{margin-bottom:4px}
}

/* ---------- PayFast return / cancel status -------------------------------- */
/* One page, three payment states. Colour carries the state: green confirmed,
   amber awaiting PayFast's server notification, neutral not paid. */
.payfast-welcome.is-pending{background:linear-gradient(115deg,#fff 45%,#fff6e4)}
.payfast-welcome.is-pending .order-welcome__icon{background:var(--warn-bg);color:#7a5000}
.payfast-welcome.is-cancelled{background:linear-gradient(115deg,#fff 45%,#f4f1f9)}
.payfast-welcome.is-cancelled .order-welcome__icon{background:#ece7f5;color:var(--muted)}
.payfast-amount{display:block;margin-top:9px;padding-top:9px;border-top:1px dashed #ded1f4;color:var(--purple-800);font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.payfast-amount__label{display:block;margin-bottom:1px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
/* The status chip carries the same colour language as the hero. */
.payfast-status .order-payment__method.is-pending{border-color:#f0dfb8;background:var(--warn-bg);color:#604000}
.payfast-status .order-payment__method.is-paid{border-color:#bfe8d1;background:var(--ok-bg);color:#075c39}
.payfast-status .order-payment__method.is-cancelled{border-color:var(--line-strong);background:var(--well);color:var(--ink-2)}

.payfast-wait{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:14px;padding:15px 18px;border:1px solid #f0dfb8;border-radius:var(--r-lg);background:var(--warn-bg)}
.payfast-wait__spinner{width:24px;height:24px;border-radius:50%;border:3px solid #d8b878;border-top-color:#6f4a00;animation:pf-spin 1s linear infinite}
.payfast-wait__copy strong{display:block;color:#604000;font-size:14px}
.payfast-wait__copy p{margin:3px 0 0;color:#6b4c08;font-size:13px;line-height:1.55}
.payfast-wait .btn{white-space:nowrap}
@keyframes pf-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.payfast-wait__spinner{animation-duration:4s}}

.payfast-actions{display:grid;gap:10px;margin-top:14px}

.payfast-steps h2{margin-bottom:12px}
.payfast-steps ol{counter-reset:pf-step;display:grid;gap:10px;margin:0;padding:0;list-style:none}
.payfast-steps li{position:relative;padding-left:30px;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.payfast-steps li::before{counter-increment:pf-step;content:counter(pf-step);position:absolute;left:0;top:0;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--purple-700);font-size:11px;font-weight:800}

.payfast-help p{margin:8px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.6;overflow-wrap:anywhere}
.payfast-help a{color:var(--brand);font-weight:650;text-decoration:underline}
.payfast-help a:hover{color:var(--brand-hover)}

@media(max-width:760px){
  .payfast-wait{grid-template-columns:20px minmax(0,1fr);gap:10px 12px;padding:14px}
  .payfast-wait__spinner{width:20px;height:20px}
  .payfast-wait .btn{grid-column:1/-1;justify-self:start}
}

/* ==========================================================================
   Customer accounts (sign in, register, account home) — appearance only.

   A sign-in page is a transaction, not a shop window: one narrow column, the
   storefront's own header and footer around it, and nothing else. Every rule below
   is additive — delete this block and the three pages still work, unstyled. It
   reuses .form-panel, .field, .alert and .btn as they are; the only new classes are
   the column, the checkbox row and the account details list.
   ========================================================================== */

.auth { max-width: 520px; margin: var(--s6) auto var(--s7) }
.auth h1 { font-size: clamp(24px, 4vw, 32px) }
.auth .lead { margin: 10px 0 var(--s5); color: var(--muted); font-size: 15px }
.auth .alert { margin: 0 0 var(--s4) }
.auth .hint { margin-bottom: var(--s4) }
.auth .aside {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: var(--s4); font-size: 14px; color: var(--muted);
}

/* Checkbox rows: .field styles text inputs at 46px, which is wrong for a box. */
.check {
  display: flex; align-items: center; gap: 10px;
  margin: 2px 0 var(--s4); font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.check input { width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto }

.account-meta { margin: 0 0 var(--s4); display: grid; gap: 0 }
.account-meta div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.account-meta dt { color: var(--muted); font-size: 13px }
.account-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; text-align: right }
.account-note { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6 }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s4) 0 0 }
.account-actions .btn { width: auto }

/* The account page is wider than the sign-in panels: it carries a list of orders. */
.account-page { max-width: 1000px; margin: var(--s6) auto var(--s7) }
.account-page > h1 { font-size: clamp(24px, 4vw, 32px) }
.account-page > .lead { margin: 10px 0 var(--s5); color: var(--muted); font-size: 15px }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); align-items: start }
.account-grid__side { display: grid; gap: var(--s4) }
.account-grid .form-panel + .form-panel { margin-top: 0 }

/* One order per row: reference and facts on the left, status and the way in on the right. */
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3) }
.order-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.order-row__main { min-width: 0 }
.order-row__ref { font-weight: 700; color: var(--purple-800); font-variant-numeric: tabular-nums; overflow-wrap: anywhere }
.order-row__meta { margin: 4px 0 0; color: var(--muted); font-size: 12.5px }
.order-row__end { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto }

/* Status pill, the same vocabulary the admin uses for an order. */
.order-status {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--well); color: var(--muted); font-size: 11.5px; font-weight: 750; white-space: nowrap;
}
.order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.order-status--ok { background: var(--ok-bg); border-color: #bfe8d1; color: var(--ok) }
.order-status--warn { background: var(--warn-bg); border-color: #f0dfb8; color: var(--warn) }
.order-status--bad { background: var(--danger-bg); border-color: #f3c9c7; color: var(--danger) }
.order-status--info { background: var(--brand-soft); border-color: #ded1f4; color: var(--purple-700) }
.order-status--neutral { background: var(--well); border-color: var(--line-strong); color: var(--muted) }

/* The order's history, oldest first, with a rail between the steps. */
.order-timeline { list-style: none; margin: 0; padding: 0 }
.timeline-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding-bottom: var(--s5) }
.timeline-step:last-child { padding-bottom: 0 }
.timeline-step::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 0; width: 2px; background: var(--line);
}
.timeline-step:last-child::before { display: none }
.timeline-step__dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); border: 2px solid var(--brand); font-size: 10px; font-weight: 800; color: var(--purple-700);
}
.timeline-step__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand) }
.timeline-step.is-current .timeline-step__dot { background: var(--brand) }
.timeline-step.is-current .timeline-step__dot::after { background: #fff }
.timeline-step strong { display: block; font-size: 14px }
.timeline-step p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55 }
.timeline-step time { display: block; margin-top: 5px; color: var(--muted-2); font-size: 11.5px; font-variant-numeric: tabular-nums }

@media(max-width:900px){
  .account-grid { grid-template-columns: minmax(0, 1fr) }
}
@media(max-width:520px){
  .account-grid { gap: var(--s4) }
  .order-row { flex-direction: column; align-items: flex-start; gap: 10px }
  .order-row__end { width: 100%; justify-content: space-between }
}

@media(max-width:520px){
  .auth { margin: var(--s5) auto var(--s6) }
  .account-meta div { flex-direction: column; gap: 2px }
  .account-meta dd { text-align: left }
}

/* ==========================================================================
   Your data and your privacy (a copy of it, and closing the account) — appearance only.

   Additive in the same way as the block above: delete it and both pages still work,
   unstyled. .account-note carries the three "what happens" statements and the list of
   things not in the download, because .account-meta right-aligns its values and long
   prose set flush right is unreadable.

   The one rule that is not merely cosmetic is .btn.danger. Closing an account cannot
   be undone, so the button that does it must not look like "Continue shopping" — the
   storefront had no destructive button before this page.
   ========================================================================== */

.btn.danger { background: var(--danger); border-color: var(--danger) }
.btn.danger:hover { background: #7f1a17; border-color: #7f1a17; box-shadow: var(--shadow-2) }
.account-note li + li { margin-top: 6px }
.account-note b { color: var(--ink-2) }