/* UKPeps, member of SPEPS Group. Apple-like system: SF (system font) for all UI, Caslon only in the logotype.
   White and #f5f5f7 surfaces, racing green as the single accent, brass as a detail only. */
@font-face{font-family:"Libre Caslon";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/caslon-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jbmono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/jbmono-600.woff2) format("woff2")}

:root{
  --bg:#FFFFFF;--bg-2:#F5F5F7;--bg-3:#E8E8ED;
  --ink:#1D1D1F;--slate:#6E6E73;--stone:#86868B;
  --green:#0F3D2E;--green-2:#0A2C21;--green-3:#16503D;--green-veil:#EAF1ED;--green-link:#0E6B4B;
  --brass:#B8862B;--brass-ink:#7A5916;
  --ok:#1E7A4F;--err:#C4281C;--warn:#8A4B0F;--warn-bg:#FBF2E2;
  --line:#D2D2D7;--line-2:#E8E8ED;
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --logo:"Libre Caslon",Georgia,serif;
  --m:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r:12px;--r-lg:18px;--r-xl:28px;--pill:980px;--wrap:1120px;
  --ease:cubic-bezier(.25,.1,.25,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--green-link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--green-link);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.07;margin:0 0 .45em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.5rem,6vw,4.5rem);letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(1.85rem,3.6vw,3rem);letter-spacing:-.03em}
h3{font-size:1.3rem;letter-spacing:-.02em}
em{font-style:normal}
p{margin:0 0 1em;max-width:66ch}
b,strong{font-weight:600}
.mono{font-family:var(--m);font-size:.88em;letter-spacing:0}
.muted{color:var(--slate)}
.small{font-size:.88rem}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.2rem)}
.sec{padding-block:clamp(4rem,9vw,7rem)}
.sec-tight{padding-block:clamp(1rem,3vw,2rem) clamp(3rem,6vw,4.5rem)}
.sec-top0{padding-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px}
.h-sm{font-size:1.35rem}
.dot{width:.55rem;height:.55rem;border-radius:50%;flex:none;display:inline-block}
.bead{width:.45rem;height:.45rem;border-radius:50%;background:var(--brass);display:inline-block;flex:none}

/* global nav: translucent bar, small type, as on apple.com */
.hd{background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);position:sticky;top:0;z-index:40}
.hd .wrap{display:flex;align-items:center;gap:1.8rem;min-height:3.25rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--green);margin-right:auto;min-width:0}
.brand:hover{text-decoration:none}
.brand svg{width:28px;height:28px;flex:none}
.brand .w{font-family:var(--logo);font-weight:700;font-size:1.3rem;letter-spacing:-.01em;line-height:1;display:block}
.brand .g{display:none}
.nav{display:flex;gap:1.9rem;font-size:.82rem;letter-spacing:-.01em}
.nav a{color:var(--ink);opacity:.8;text-decoration:none;padding:.3rem 0}
.nav a:hover,.nav a[aria-current=page]{opacity:1;color:var(--ink)}
.nav a[aria-current=page]{font-weight:600}
.cartbtn{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--ink);font-size:.82rem;padding:.35rem .2rem;white-space:nowrap}
.cartbtn:hover{text-decoration:none;color:var(--green)}
.cart-count{min-width:1.2rem;height:1.2rem;border-radius:99px;background:var(--bg-3);color:var(--slate);font-size:.7rem;display:inline-grid;place-items:center;font-weight:600;padding:0 .3rem;letter-spacing:0}
.cart-count.on{background:var(--green);color:#fff}
.strip{background:var(--bg-2);color:var(--slate);font-size:.76rem;text-align:center;padding:.6rem 1rem;line-height:1.4;letter-spacing:-.01em}
.menu{display:none}
@media (max-width:860px){
  .nav{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;padding:.35rem .2rem;font-size:.86rem}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] .panel-nav{display:flex}
  .panel-nav{display:none;position:absolute;right:0;top:calc(100% + .6rem);background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--r-lg);padding:.6rem;flex-direction:column;min-width:15rem;box-shadow:0 18px 50px rgba(0,0,0,.14)}
  .panel-nav a{padding:.75rem .9rem;color:var(--ink);text-decoration:none;border-radius:10px;font-size:1.05rem;font-weight:600}
  .panel-nav a:hover{background:var(--bg-2)}
  .hd .wrap{gap:1rem}
}

/* buttons: pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-weight:400;font-size:1.0625rem;line-height:1.2;padding:.78rem 1.4rem;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{text-decoration:none}
.btn-lg{padding:.95rem 1.75rem;font-size:1.0625rem}
.btn-sm{padding:.5rem 1rem;font-size:.88rem}
.btn-p{background:var(--green);color:#fff}
.btn-p:hover{background:var(--green-3);color:#fff}
.btn-s{background:transparent;color:var(--green-link);border-color:var(--green-link)}
.btn-s:hover{background:var(--green-link);color:#fff}
.btn-light{background:#fff;color:var(--green)}
.btn-light:hover{background:var(--bg-2);color:var(--green)}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:progress}
.more{font-size:1.0625rem;text-decoration:none}
.more::after{content:" ›"}
.more:hover{text-decoration:underline}

/* hero */
.hero{padding-block:clamp(3.5rem,9vw,6.5rem) clamp(2.5rem,6vw,4rem);text-align:center}
.hero h1{max-width:16ch;margin-inline:auto}
.hero h1 em{color:var(--green)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:1.05rem;color:var(--brass-ink);font-weight:600;margin:0 0 .9rem;letter-spacing:-.01em}
.eyebrow-d{color:#E2C98F}
.lead{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.38;color:var(--slate);max-width:38rem;margin:0 auto 2.2rem;letter-spacing:-.02em}
.cta{display:flex;flex-wrap:wrap;gap:1rem}
.hero .cta{justify-content:center}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.8rem;margin:2.4rem 0 0;padding:0;list-style:none;font-size:.88rem;color:var(--slate)}
.trust li{display:flex;align-items:center;gap:.5rem}
.hero-photo{margin:clamp(2.5rem,6vw,4rem) auto 0;max-width:1000px;border-radius:var(--r-xl);overflow:hidden;background:var(--bg-2)}
.hero-photo img{width:100%;height:auto}

/* pillar tiles + figures */
.pillar{background:var(--bg-2);border-radius:var(--r-lg);padding:1.7rem 1.5rem 1.5rem}
.pillar h3{font-size:1.2rem;margin-bottom:.5rem}
.pillar p{color:var(--slate);font-size:.97rem;margin:0}
.metrics{background:var(--bg-2)}
.metrics dl{margin:0;gap:0;padding-block:clamp(2.5rem,6vw,4rem)}
.metric{padding:.8rem 1rem;text-align:center;display:flex;flex-direction:column-reverse}
.metric dd{margin:0;font-size:clamp(2.6rem,5vw,3.8rem);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
.metric dt{font-size:.95rem;color:var(--slate);margin-top:.6rem}

/* section heads + chips */
.shead{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.shead h2{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border-radius:var(--pill);background:var(--bg-2);color:var(--ink);text-decoration:none;font-size:.95rem;transition:background .2s var(--ease)}
.chip:hover{background:var(--bg-3);text-decoration:none}

/* product grid + card: borderless tiles, soft lift on hover */
.grid{display:grid;gap:1.25rem}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1020px){.g4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics dl{grid-template-columns:1fr 1fr;row-gap:1.6rem}}
@media (max-width:520px){.grid.g4,.grid.g3{gap:.75rem}.card-b{padding:.9rem .9rem 1rem}.card h3{font-size:1rem}.card-f{flex-direction:column;align-items:stretch;gap:.55rem}.addbtn{width:100%}.grid.g4.pillars{grid-template-columns:1fr}}
.card{background:var(--bg-2);border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.09)}
.tile{aspect-ratio:1/1;display:grid;background:var(--bg-2)}
.tile img{width:100%;height:100%;object-fit:cover}
.card-b{padding:1.1rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.2rem;flex:1}
.card-cas{font-family:var(--m);font-size:.72rem;color:var(--slate);display:flex;align-items:center;gap:.45rem;letter-spacing:0}
.card h3{font-size:1.12rem;margin:.25rem 0 .05rem;line-height:1.2}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card-cat{font-size:.84rem;color:var(--slate)}
.card-coa{font-size:.82rem;color:var(--green-link);margin-top:.1rem}
.card-f{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:auto;padding-top:1rem}
.price{font-weight:600;font-size:1.12rem;font-variant-numeric:tabular-nums}
.addbtn{position:relative;z-index:2;font:inherit;font-size:.86rem;padding:.45rem 1rem;border-radius:var(--pill);border:0;background:var(--green);color:#fff;cursor:pointer;transition:background .2s var(--ease)}
.addbtn:hover{background:var(--green-3)}

/* CSS-only product tile until photos exist: identity green on a light ground, name and amount in type, no illustration */
.ph{width:100%;height:100%;background:var(--green-veil);color:var(--green);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12%;gap:.3em;font-size:clamp(.8rem,1.6vw,1rem);container-type:inline-size}
.ph-w{font-family:var(--logo);font-weight:700;font-size:.95em;color:var(--green);opacity:.75;letter-spacing:-.005em}
.ph-n{font-size:clamp(1.2rem,11cqw,2.6rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;margin-top:.2em}
.ph-d{font-family:var(--m);font-size:.92em;color:var(--green-3);letter-spacing:0}
.ph-r{font-size:.72em;color:var(--slate);margin-top:.5em}
.ph-r::before{content:"";display:block;width:.42em;height:.42em;border-radius:50%;background:var(--brass);margin:0 auto .55em}
.ph-lg .ph-n{font-size:clamp(1.9rem,10cqw,3.8rem)}
.ph-xs{padding:8%;gap:0;font-size:.55rem}
.ph-xs .ph-n{font-size:.88rem}

/* dark tile (trust) and green tile (lot lookup): rounded panels inside the grid, Apple-style */
.trustband{padding-block:0 clamp(1rem,3vw,2rem)}
.trustband .wrap>div:first-child,.trustband .wrap{position:relative}
.trustband .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;background:var(--green-2);color:#E8EFEB;border-radius:var(--r-xl);padding:clamp(2.2rem,5vw,4rem)}
.trustband h2{color:#fff}
.tb-lead{color:#B9CBC2;max-width:30rem;font-size:1.1rem}
.co-card{display:flex;align-items:center;gap:.8rem;margin-top:1.6rem;background:rgba(255,255,255,.07);border-radius:var(--r);padding:.95rem 1.15rem;max-width:26rem}
.co-card svg{width:34px;height:34px;flex:none}
.co-card b{display:block;color:#fff}
.co-card span{color:#B9CBC2;font-size:.85rem}
.trustlist{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.trustlist li{padding-left:1.4rem;position:relative;color:#E8EFEB}
.trustlist li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--brass)}
@media (max-width:860px){.trustband .wrap{grid-template-columns:1fr;border-radius:var(--r-lg);margin-inline:clamp(1.1rem,4vw,2.2rem)}}

/* how an order works (a real sequence, so numbered) */
.steps{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;counter-reset:s}
.steps li{counter-increment:s;background:var(--bg-2);border-radius:var(--r-lg);padding:1.5rem 1.4rem}
.steps li::before{content:counter(s);font-size:2rem;font-weight:600;letter-spacing:-.04em;color:var(--green);display:block;margin-bottom:.6rem;line-height:1}
.steps b{display:block;font-weight:600;font-size:1.1rem;margin-bottom:.3rem}
.steps p{font-size:.95rem;color:var(--slate);margin:0}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.coaband{background:var(--green);color:#E8EFEB;border-radius:var(--r-xl);padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
.coaband h2{color:#fff}
.coaband p{color:#C2D3CA;margin:0}
.lotform{display:flex;gap:.6rem}
.lotform input{flex:1;min-width:0}
.coaband .lotform input{background:rgba(255,255,255,.1);border-color:transparent;color:#fff;border-radius:var(--pill);padding-inline:1.2rem}
.coaband .lotform input::placeholder{color:#A9BFB4}
@media (max-width:860px){.coaband{grid-template-columns:1fr}}

/* forms */
input,select,textarea{font:inherit;letter-spacing:-.01em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem;width:100%;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-link);box-shadow:0 0 0 4px rgba(14,107,75,.15)}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-size:.88rem;font-weight:600}
.field small{color:var(--slate);font-size:.8rem}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--slate);margin:1rem 0;line-height:1.5}
.check input{width:1.15rem;height:1.15rem;flex:none;margin-top:.15rem;accent-color:var(--green)}
.msg{font-size:.92rem;min-height:1.2em;margin:.6rem 0 0}
.msg.err{color:var(--err)}.msg.okm{color:var(--ok)}

/* page heads + prose */
.crumb{font-size:.8rem;color:var(--slate);margin-bottom:1.4rem}
.crumb a{color:var(--slate)}
.pagehead{padding-block:clamp(2.6rem,6vw,4.2rem) 1.6rem}
.pagehead p{color:var(--slate);font-size:1.2rem;line-height:1.4}
.pagehead-pd{padding-bottom:1rem}
.prose{max-width:44rem}
.prose h2{font-size:1.75rem;margin-top:2.6rem}
.prose h3{font-size:1.2rem;margin-top:1.6rem}
.prose ul,.prose ol{padding-left:1.2rem;max-width:66ch}
.prose li{margin-bottom:.45rem}
.prose .box{background:var(--bg-2);border-radius:var(--r-lg);padding:1.3rem 1.5rem;margin:1.4rem 0}
.prose a{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.lead-p{font-size:1.25rem;line-height:1.4;color:var(--slate)}
.inshort{font-size:1.3rem;line-height:1.38;letter-spacing:-.02em}
.inshort b{color:var(--green);margin-right:.3rem}
.upd{font-size:.86rem;color:var(--slate)}

/* notices */
.ruo{background:var(--bg-2);color:var(--slate);border-radius:var(--r);padding:.85rem 1.05rem;font-size:.86rem}
.warn{background:var(--warn-bg);color:var(--warn);border-radius:var(--r);padding:.9rem 1.1rem;font-size:.9rem;max-width:46rem}
.vatnote{display:block;font-size:.8rem;color:var(--slate);margin:.25rem 0 0}

/* tables */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);background:var(--bg-2)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child td,tr:last-child th{border-bottom:0}
thead th{font-weight:600;color:var(--slate);font-size:.82rem;background:var(--bg-2)}
tbody td{background:#fff}
.spec th{width:34%;font-weight:500;color:var(--slate);background:var(--bg-2)}
.spec td{background:#fff}
th.num,td.num{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.tag{display:inline-block;font-size:.7rem;padding:.12rem .5rem;border-radius:99px;background:var(--bg-3);color:#424245;margin-left:.4rem;vertical-align:middle}
tr.hit td{background:#FBF3DC}

/* product page */
.pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
.pdp-img{border-radius:var(--r-xl);aspect-ratio:1/1;overflow:hidden;position:sticky;top:5rem;display:grid;background:var(--bg-2)}
.pdp-img img{width:100%;height:100%;object-fit:cover}
.pd-cas{font-size:.85rem}
.pdp h1{font-size:clamp(2.2rem,4.5vw,3.4rem);margin:.35rem 0 .5rem}
.pd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.93rem;color:var(--slate);margin:0}
.pd-short{margin-top:1.1rem;color:var(--slate);font-size:1.1rem;line-height:1.42}
.pd-price{font-size:1.9rem;letter-spacing:-.03em;display:block;margin-top:.8rem}
.stock{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--ok);margin:.4rem 0 1.3rem}
.stock::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--ok)}
.qty{display:inline-flex;border-radius:var(--pill);background:var(--bg-2);align-items:center}
.qty button{font:inherit;width:2.6rem;height:2.6rem;border:0;background:none;cursor:pointer;font-size:1.15rem;color:var(--ink);border-radius:50%}
.qty button:hover{background:var(--bg-3)}
.qty input{width:2.6rem;text-align:center;border:0;padding:.55rem 0;font-family:var(--m);background:transparent;box-shadow:none}
.buy{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.buy .btn-p{flex:1}
.pair{background:var(--bg-2);border-radius:var(--r-lg);padding:1.15rem 1.25rem;margin-top:1.4rem}
.pair-h{font-weight:600;margin:0 0 .2rem}
.pair .muted{font-size:.88rem;margin-bottom:.5rem}
.pair-n{font-size:.78rem!important;margin:.55rem 0 0!important}
.badges{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.2rem;margin:1.6rem 0;padding:0;list-style:none;font-size:.86rem;color:var(--slate)}
.badges li{display:flex;align-items:center;gap:.55rem}
.badges li::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--brass);flex:none}
.pd-sec{margin-top:clamp(3rem,6vw,4.5rem)}
.narrow{max-width:50rem}
.coa-list{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.6rem}
.coa-i{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--bg-2);border-radius:var(--r);padding:1rem 1.2rem}
.vtag{display:inline-block;font-size:.7rem;font-family:var(--m);background:#F4E7C8;color:var(--brass-ink);border-radius:99px;padding:.1rem .5rem;margin-left:.5rem;vertical-align:middle;letter-spacing:0}
.coa-m{font-size:.85rem;margin-top:.2rem}
@media (max-width:860px){.pdp{grid-template-columns:1fr}.pdp-img{position:static}}
@media (max-width:520px){.coa-i{flex-direction:column;align-items:flex-start}}

/* shop with sidebar */
.shop{display:grid;grid-template-columns:14.5rem 1fr;gap:2.4rem;align-items:start}
.side{position:sticky;top:5rem;display:flex;flex-direction:column;gap:1rem}
.side input{border-radius:var(--pill);background:var(--bg-2);border-color:transparent;padding-inline:1.1rem}
.fgroup{display:flex;flex-direction:column;gap:.15rem}
.fbtn{display:flex;align-items:center;gap:.55rem;text-align:left;font:inherit;font-size:.93rem;padding:.55rem .85rem;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer}
.fbtn:hover{background:var(--bg-2)}
.fbtn[aria-pressed=true]{background:var(--ink);color:#fff}
.count{font-size:.9rem;color:var(--slate);margin-bottom:1.1rem}
.shop-tools{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1.3rem}
.shop-tools input{max-width:24rem;border-radius:var(--pill);background:var(--bg-2);border-color:transparent;padding-inline:1.1rem}
.shop-tools select{max-width:16rem;border-radius:var(--pill)}
@media (max-width:860px){.shop{grid-template-columns:1fr}.side{position:static}.fgroup{flex-direction:row;flex-wrap:wrap;gap:.45rem}.fbtn{background:var(--bg-2);border-radius:var(--pill);padding:.5rem .9rem}}

/* certificate library */
.figures{max-width:42rem;margin-bottom:2.2rem}
.figures h2{font-size:1.35rem}

/* basket / checkout */
.co{display:grid;grid-template-columns:1.25fr .85fr;gap:2rem;align-items:start}
@media (max-width:900px){.co{grid-template-columns:1fr}}
.panel{background:var(--bg-2);border-radius:var(--r-xl);padding:clamp(1.3rem,3.5vw,2rem)}
.panel .tbl-wrap,.panel table{background:#fff}
.line{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.97rem}
.line.tot{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.9rem;font-weight:600;font-size:1.2rem}
.line-sep{border-top:1px solid var(--line);margin-top:.4rem;padding-top:.65rem}
.line .muted{flex:1}
.okc{color:var(--ok)}
.citem{display:grid;grid-template-columns:4.2rem 1fr auto;gap:1rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.citem:last-child{border-bottom:0}
.citem .th{border-radius:10px;aspect-ratio:1/1;overflow:hidden;display:grid;background:#fff}
.citem .th img{width:100%;height:100%;object-fit:cover}
.citem a{color:var(--ink);text-decoration:none;font-weight:600}
.citem-c{display:flex;gap:.8rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.citem .qty{background:#fff}
.rm{font:inherit;background:none;border:0;color:var(--green-link);cursor:pointer;font-size:.86rem;padding:0}
.rm:hover{text-decoration:underline}
.upsell{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem;flex-wrap:wrap}
.upsell>div{flex:1;min-width:14rem}
.upsell p{margin:.2rem 0 0}
.stepsbar{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;padding:0;margin:0 0 2rem;font-size:.9rem;color:var(--slate);counter-reset:st}
.stepsbar li{display:flex;align-items:center;gap:.5rem}
.stepsbar li::before{content:counter(st);counter-increment:st;width:1.55rem;height:1.55rem;border-radius:50%;display:inline-grid;place-items:center;background:var(--bg-2);font-size:.76rem;font-weight:600}
.stepsbar li.done::before{background:var(--ok);color:#fff;content:"✓"}
.stepsbar li.on{color:var(--ink);font-weight:600}
.stepsbar li.on::before{background:var(--green);color:#fff}
.payset{border:0;padding:0;margin:1.4rem 0 0}
.payset legend{font-weight:600;font-size:.93rem;margin-bottom:.55rem}
.pay{display:flex;flex-direction:column;gap:.6rem;margin:.4rem 0 .9rem}
.pay label{display:flex;gap:.7rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1rem;cursor:pointer;font-size:.97rem;transition:border-color .2s var(--ease)}
.pay input{width:auto;accent-color:var(--green)}
.pay label:has(input:checked){border-color:var(--green-link);box-shadow:0 0 0 1px var(--green-link)}
.coupon{display:flex;gap:.6rem;margin-top:1.1rem}
.coupon input{border-radius:var(--pill);padding-inline:1.1rem}
.confirm-lead{font-size:1.25rem;line-height:1.4;letter-spacing:-.02em}
.bank{margin:0}
.bankrow{display:grid;grid-template-columns:9rem 1fr;gap:.2rem 1rem;font-size:.97rem;padding:.75rem 0;border-bottom:1px solid var(--line);align-items:center}
.bankrow:last-child{border-bottom:0}
.bankrow dt{color:var(--slate)}
.bankrow dd{margin:0;font-family:var(--m);word-break:break-word;display:flex;align-items:center;justify-content:space-between;gap:.6rem;letter-spacing:0}
.copy{font:inherit;font-family:var(--f);font-size:.8rem;border:0;color:#fff;background:var(--green);border-radius:var(--pill);cursor:pointer;padding:.3rem .8rem;flex:none}
.copy:hover{background:var(--green-3)}
@media (max-width:480px){.bankrow{grid-template-columns:1fr}}
.empty{text-align:center;padding:3.5rem 1rem}
.empty .muted{margin-inline:auto}

/* faq + glossary */
.qa{max-width:48rem}
.qa details{border-bottom:1px solid var(--line);padding:1.15rem 0}
.qa details:first-child{border-top:1px solid var(--line)}
.qa summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;letter-spacing:-.02em}
.qa summary::after{content:"+";color:var(--green-link);font-weight:400;font-size:1.3rem;line-height:1}
.qa details[open] summary::after{content:"−"}
.qa summary::-webkit-details-marker{display:none}
.qa p{margin:.75rem 0 0;color:var(--slate)}
.gl{display:grid;grid-template-columns:16rem 1fr;max-width:58rem;margin:0}
.gl dt,.gl dd{padding:1.1rem 0;border-bottom:1px solid var(--line);margin:0}
.gl dt{font-size:1.1rem;font-weight:600;padding-right:1.5rem}
.gl dt a{color:var(--ink)}
.gl dd{color:var(--slate)}
@media (max-width:700px){.gl{grid-template-columns:1fr}.gl dt{border-bottom:0;padding-bottom:.2rem}.gl dd{padding-top:0}}

/* footer: light and small, as on apple.com */
.ft{background:var(--bg-2);color:var(--slate);margin-top:clamp(4rem,8vw,6rem);font-size:.78rem;letter-spacing:-.01em}
.ft a{color:#424245;text-decoration:none}
.ft a:hover{text-decoration:underline}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:2.6rem 2rem}
.ft h2{font-size:.78rem;color:var(--ink);letter-spacing:-.01em;font-weight:600;margin:0 0 .7rem}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.ft p{line-height:1.6}
.ft-brand{display:flex;align-items:center;gap:.5rem;color:var(--green);font-family:var(--logo);font-weight:700;font-size:1.3rem;margin-bottom:.9rem;letter-spacing:-.01em}
.ft-brand svg{width:28px;height:28px}
.group{display:inline-flex;align-items:center;gap:.55rem;background:#fff;border-radius:99px;padding:.4rem .85rem;color:var(--ink);font-size:.76rem;margin-top:.3rem}
.beads{display:inline-flex;align-items:center}
.beads i{width:.42rem;height:.42rem;border-radius:50%;background:var(--green);display:block}
.beads i+i{margin-left:.32rem;position:relative}
.beads i+i::before{content:"";position:absolute;right:100%;top:45%;width:.32rem;height:1px;background:var(--green)}
.beads i:last-child{background:var(--brass)}
.pay-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.1rem}
.pay-tags span{font-size:.72rem;background:#fff;border-radius:99px;padding:.2rem .6rem;color:var(--slate)}
.ft-bot{border-top:1px solid var(--line);padding-block:1.1rem 1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--slate)}
@media (max-width:860px){.ft-top{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ft-top{grid-template-columns:1fr}}

/* overlay (age gate) + toast */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:100;padding:1rem}
.modal{background:#fff;border-radius:var(--r-xl);max-width:31rem;padding:2rem;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.modal h2{font-size:1.75rem}
.modal .cta{justify-content:flex-end;margin-top:1.4rem}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1rem);opacity:0;background:rgba(29,29,31,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;padding:.85rem 1.25rem;border-radius:var(--pill);font-size:.92rem;z-index:120;transition:opacity .25s var(--ease),transform .25s var(--ease);display:flex;gap:1rem;align-items:center;max-width:calc(100vw - 2rem)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast a{color:#9FE0C2;font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.card:hover{transform:none}}
@media (max-width:520px){h1{font-size:2.4rem}}
sub,sup{font-size:.72em;line-height:0}
/* journal + sources */
.jgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.jcard{background:var(--bg-2);border-radius:var(--r-lg);padding:1.6rem 1.6rem 1.4rem}
.jcard h2{font-size:1.45rem;margin:.2rem 0 .5rem}
.jcard h2 a{color:var(--ink)}
@media (max-width:760px){.jgrid{grid-template-columns:1fr}}
.refs{padding-left:1.3rem;font-size:.92rem;color:var(--ink)}
.refs li{margin-bottom:.7rem}
.refs .muted{font-size:.86rem}
/* links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1) */
:where(p,li,td,dd,.inshort) a:not(.btn):not(.more){text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.ft li a:not(.btn):not(.more){text-decoration:none}
.ft li a:not(.btn):not(.more):hover{text-decoration:underline}
#admin-root td.mono{white-space:nowrap}