/* Training store — cart / checkout / success.
   Shares the "Clear Water" training aesthetic from public/training.html
   (dark warm stone, Bricolage Grotesque + Figtree, teal + amber, layered
   atmosphere). Keep tokens in sync with training.html :root. */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --teal-400:#2dd4bf;--teal-600:#0d9488;--teal-700:#0f766e;
  --stone-50:#fafaf9;--stone-100:#f5f5f4;--stone-200:#e7e5e4;--stone-300:#d6d3d1;
  --stone-400:#a8a29e;--stone-500:#78716c;--stone-600:#57534e;--stone-700:#44403c;
  --stone-800:#292524;--stone-900:#1c1917;--stone-950:#0f0e0d;
  --amber-200:#fde68a;--amber-300:#fcd34d;--amber-400:#fbbf24;--amber-500:#f59e0b;--amber-600:#d97706;
  --green-500:#22c55e;--red-400:#f87171;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Figtree',sans-serif;
}
html{overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--stone-100);background:var(--stone-950);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -5%,rgba(245,158,11,.16),transparent 60%),
    radial-gradient(50vw 50vh at 8% 12%,rgba(13,148,136,.08),transparent 55%),
    radial-gradient(70vw 60vh at 50% 110%,rgba(245,158,11,.07),transparent 60%)}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}

/* ── Nav (matches training.html) ── */
nav#nav{position:fixed;top:0;left:0;right:0;z-index:101;padding:1.1rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(15,14,13,.92);backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.05)}
.nav-logo{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--amber-400);
  letter-spacing:-.02em;display:flex;align-items:center;gap:.6rem;text-decoration:none}
.nav-logo svg{width:28px;height:28px}
.product-switcher{display:flex;align-items:center;gap:.15rem;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:100px;padding:.25rem;margin:0 1.5rem}
.ps-opt{font-family:var(--font-display);font-size:.82rem;font-weight:600;color:var(--stone-400);
  text-decoration:none;letter-spacing:-.01em;padding:.4rem 1.05rem;border-radius:100px;
  transition:color .3s,background .3s}
.ps-opt:hover{color:var(--stone-100)}
.ps-wubs:hover{color:var(--teal-400)}
.ps-opt.is-active{color:var(--amber-400);background:rgba(245,158,11,.14);box-shadow:inset 0 0 0 1px rgba(245,158,11,.3)}
.nav-links{display:flex;gap:2rem;align-items:center;margin-left:auto}
.nav-links a{color:var(--stone-400);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .3s}
.nav-links a:hover{color:var(--amber-400)}
.cart-pill{display:inline-flex;align-items:center;gap:.45rem;color:var(--stone-200)!important;
  border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:.45rem 1rem;font-weight:600}
.cart-pill:hover{border-color:var(--amber-400);color:var(--amber-400)!important}
.cart-pill .count{background:var(--amber-400);color:var(--stone-950);font-size:.72rem;font-weight:800;
  min-width:1.25rem;height:1.25rem;border-radius:100px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 .35rem}
.cart-pill .count:empty,.cart-pill .count[data-n="0"]{display:none}

/* ── Buttons ── */
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  text-decoration:none;font-size:.95rem;border-radius:100px;cursor:pointer;font-family:var(--font-body);
  transition:transform .3s,box-shadow .3s,border-color .3s,color .3s;border:1px solid rgba(255,255,255,.14)}
.btn-primary{background:linear-gradient(135deg,var(--amber-400),var(--amber-600));color:var(--stone-950);
  padding:.95rem 2.1rem;font-weight:700;box-shadow:0 0 28px rgba(245,158,11,.24)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 42px rgba(245,158,11,.42)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-ghost{color:var(--stone-200);padding:.95rem 1.85rem;font-weight:600;background:none;
  border:1px solid rgba(255,255,255,.16)}
.btn-ghost:hover{border-color:var(--amber-400);color:var(--amber-400)}

/* ── Page shell ── */
main{position:relative;z-index:2;padding:9rem 0 5rem;min-height:100vh}
.page-head{margin-bottom:2.5rem}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:700;
  letter-spacing:.12em;color:var(--amber-400);text-transform:uppercase;margin-bottom:.9rem}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--amber-400);box-shadow:0 0 12px var(--amber-400)}
h1.title{font-family:var(--font-display);font-size:clamp(2.1rem,4.5vw,3.1rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.05}
.sub{color:var(--stone-400);font-size:1.05rem;margin-top:.7rem;max-width:54ch}

/* ── Cart ── */
.store-grid{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start}
.panel{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:20px;padding:1.75rem}
.line{display:grid;grid-template-columns:1fr auto auto;gap:1.25rem;align-items:center;
  padding:1.3rem 0;border-bottom:1px solid rgba(255,255,255,.06)}
.line:last-child{border-bottom:0}
.line-name{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.line-code{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--amber-400);
  border:1px solid rgba(245,158,11,.3);border-radius:100px;padding:.12rem .55rem;margin-left:.6rem}
.line-meta{color:var(--stone-500);font-size:.86rem;margin-top:.25rem}
.line-unit{color:var(--stone-400);font-size:.86rem;margin-top:.35rem}
.stepper{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:100px;overflow:hidden}
.stepper button{background:none;border:0;color:var(--stone-200);width:38px;height:38px;font-size:1.1rem;
  cursor:pointer;transition:background .2s}
.stepper button:hover{background:rgba(245,158,11,.16);color:var(--amber-400)}
.stepper input{width:44px;height:38px;background:none;border:0;color:var(--stone-50);text-align:center;
  font-family:var(--font-body);font-size:1rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.line-total{font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  font-variant-numeric:tabular-nums;min-width:5.5rem;text-align:right}
.line-remove{background:none;border:0;color:var(--stone-600);cursor:pointer;font-size:.82rem;
  margin-top:.4rem;transition:color .2s}
.line-remove:hover{color:var(--red-400)}

/* ── Summary ── */
.summary{position:sticky;top:7rem}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;padding:.55rem 0;font-size:.95rem}
.sum-row.muted{color:var(--stone-400)}
.sum-row.discount{color:var(--green-500);font-weight:600}
.sum-row .amt{font-variant-numeric:tabular-nums}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1px solid rgba(255,255,255,.1);margin-top:.6rem;padding-top:1rem}
.sum-total .lbl{font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.sum-total .amt{font-family:var(--font-display);font-weight:800;font-size:1.6rem;
  font-variant-numeric:tabular-nums;color:var(--amber-400)}
.vol-note{display:flex;gap:.55rem;align-items:flex-start;font-size:.84rem;color:var(--stone-400);
  background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:12px;
  padding:.7rem .85rem;margin:1rem 0}
.vol-note.dim{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07);color:var(--stone-500)}
.summary .btn-primary{width:100%;margin-top:1.1rem}
.fineprint{font-size:.78rem;color:var(--stone-600);margin-top:.9rem;text-align:center;line-height:1.5}

/* ── Empty state ── */
.empty{text-align:center;padding:5rem 1rem}
.empty .drop{font-size:3rem;margin-bottom:1rem;opacity:.5}
.empty h2{font-family:var(--font-display);font-size:1.6rem;margin-bottom:.6rem}
.empty p{color:var(--stone-400);margin-bottom:1.8rem}

/* ── Checkout ── */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--stone-300);
  letter-spacing:.02em;margin-bottom:.45rem}
.field input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:.85rem 1rem;color:var(--stone-50);font-family:var(--font-body);
  font-size:.98rem;transition:border-color .25s,box-shadow .25s}
.field input:focus{outline:0;border-color:var(--amber-400);box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.field input::placeholder{color:var(--stone-600)}
#payment-element{margin:.4rem 0 1rem}
.pay-status{font-size:.88rem;margin-top:.8rem;min-height:1.2rem}
.pay-status.err{color:var(--red-400)}
.pay-status.info{color:var(--stone-400)}
.sec-label{font-family:var(--font-display);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--stone-500);margin:0 0 1.1rem}
.mini-line{display:flex;justify-content:space-between;font-size:.92rem;padding:.4rem 0;color:var(--stone-300)}
.mini-line .amt{font-variant-numeric:tabular-nums}
.lock{display:inline-flex;align-items:center;gap:.4rem;color:var(--stone-500);font-size:.8rem;margin-top:1rem;justify-content:center;width:100%}

/* ── Success ── */
.success-wrap{max-width:620px;margin:0 auto;text-align:center}
.checkmark{width:84px;height:84px;margin:0 auto 1.6rem;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(34,197,94,.25),rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.4);display:flex;align-items:center;justify-content:center}
.checkmark svg{width:38px;height:38px;stroke:var(--green-500);stroke-width:2.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;
  animation:draw .7s .25s cubic-bezier(.65,0,.35,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.order-no{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--amber-400);
  letter-spacing:.02em;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);
  border-radius:100px;padding:.5rem 1.4rem;display:inline-block;margin:1rem 0 1.6rem}
.next-steps{text-align:left;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:18px;padding:1.6rem 1.8rem;margin:2rem 0}
.next-steps li{list-style:none;padding:.5rem 0 .5rem 2rem;position:relative;color:var(--stone-300);font-size:.95rem}
.next-steps li::before{content:'';position:absolute;left:0;top:.95rem;width:8px;height:8px;
  border-radius:50%;background:var(--amber-400);box-shadow:0 0 10px rgba(245,158,11,.5)}

/* ── Toast ── */
#toast{position:fixed;right:1.5rem;bottom:1.5rem;z-index:200;background:rgba(28,25,23,.96);
  border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--amber-400);
  border-radius:12px;padding:.9rem 1.2rem;color:var(--stone-100);font-size:.92rem;
  box-shadow:0 12px 40px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#toast.show{transform:none}

/* ── Footer ── */
footer{position:relative;z-index:2;text-align:center;padding:3rem 2rem;color:var(--stone-600);
  font-size:.85rem;border-top:1px solid rgba(255,255,255,.05);margin-top:4rem}
footer a{color:var(--stone-500);text-decoration:none}
footer a:hover{color:var(--amber-400)}

/* ── Motion ── */
.rise{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.checkmark svg{animation:none;stroke-dashoffset:0}}

@media (max-width:860px){
  nav#nav{padding:1rem 1.25rem}.nav-links{gap:1rem}.nav-links a:not(.cart-pill){display:none}
  .wrap{padding:0 1.25rem}.store-grid{grid-template-columns:1fr;gap:1.5rem}
  .summary{position:static}.product-switcher{margin:0 .5rem}
}