:root{
  --surface:#F7F9F8;--raised:#FFFFFF;--ink:#0E2530;--muted:#4F6670;--line:#D3DEE2;
  --spring:#1A6E8C;--spring-light:#5CB8D6;--soft:#DCEBF0;--deep:#0B2E3C;--on-deep:#F7F9F8;
  --terracotta:#BC532C;--terracotta-dark:#8A3A1C;--leaf:#2F7D4F;--alert:#B3261E;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:6px;--r-md:12px;--r-pill:999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:24px}
img,svg{max-width:100%}
a{color:var(--spring)}a:hover{color:var(--deep)}
:focus-visible{outline:3px solid var(--spring-light);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.narrow{max-width:960px}
.thin{max-width:760px}
.stack{display:flex;flex-direction:column;gap:16px}
.stack-l{display:flex;flex-direction:column;gap:32px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.split>*{flex:1 1 420px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.grid-fill{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.spacer{flex-grow:1}
.section{padding:72px 0}
.section-s{padding:40px 0}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--spring)}
.on-dark .eyebrow{color:var(--spring-light)}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.02em}
.h-hero{font-size:64px;line-height:64px;font-weight:700}
.h1{font-size:48px;line-height:52px;font-weight:700}
.h2{font-size:36px;line-height:42px;font-weight:700}
.h3{font-size:24px;line-height:30px;font-weight:700;letter-spacing:0}
.lead{font-size:18px;line-height:28px;margin:0}
p{margin:0}
@media (max-width:640px){.h-hero{font-size:44px;line-height:46px}.h1{font-size:36px;line-height:40px}.h2{font-size:28px;line-height:34px}.section{padding:48px 0}}

/* header */
.site-header{background:var(--raised);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand span{font-family:var(--display);font-size:26px;font-weight:700}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px;flex-grow:1;font-weight:600}
.nav a{color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:3px solid transparent}
.nav a[aria-current=page]{color:var(--spring);border-bottom-color:var(--spring)}
.header-actions{display:flex;align-items:center;gap:12px}
.icon-btn{width:48px;height:48px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--raised);display:flex;align-items:center;justify-content:center;position:relative;color:var(--ink)}
.icon-btn[aria-current=page]{border:2px solid var(--spring);background:var(--soft)}
.badge-count{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--terracotta);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center}
@media (max-width:760px){.nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;gap:20px}.nav a{white-space:nowrap}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--r-md);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:2px solid transparent;text-align:center}
.btn-primary{background:var(--spring);color:#fff}.btn-primary:hover{background:#155a73;color:#fff}
.btn-outline{background:transparent;border-color:var(--spring);color:var(--spring)}
.btn-light{background:var(--spring-light);color:#0D1A20;font-weight:700}.btn-light:hover{color:#0D1A20;background:#7cc8e0}
.btn-ghost-light{border-color:var(--spring-light);color:var(--on-deep)}.btn-ghost-light:hover{color:#fff}
.btn-white{background:#fff;color:var(--terracotta-dark);font-weight:700}
.btn-lg{min-height:54px;font-size:18px;padding:0 28px}
.btn-block{width:100%}
.btn.added{background:var(--leaf)}
.link-btn{background:none;border:none;padding:0;min-height:44px;font:inherit;font-weight:600;color:var(--spring);cursor:pointer}

/* surfaces */
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md)}
.pad{padding:28px}
.pad-l{padding:40px}
@media (max-width:640px){.pad-l{padding:24px}}
.band-soft{background:var(--soft);border-radius:var(--r-md)}
.band-deep{background:var(--deep);color:var(--on-deep);border-radius:var(--r-md)}
.on-dark{background:var(--deep);color:var(--on-deep)}
.on-dark .muted,.band-deep .muted{color:var(--soft)}
.on-terra{background:var(--terracotta);color:#fff}
.on-terra a:not(.btn){color:#fff}
.hero{padding:88px 0}
.hero-s{padding:56px 0}
.crumbs{font-size:14px;color:var(--muted)}.crumbs a{color:inherit}
.on-dark .crumbs,.on-terra .crumbs{color:var(--soft)}
.on-terra .crumbs{color:#fff}
.ph{background:var(--soft);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14px;text-align:center;padding:16px;border-radius:var(--r-md)}
.pill{display:inline-block;padding:6px 12px;border-radius:999px;background:var(--soft);font-size:14px;font-weight:600;line-height:20px}
.tag{align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:16px;background:var(--soft)}
.tag-deep{background:var(--deep);color:var(--on-deep)}
.tag-terra{background:var(--terracotta);color:#fff}
.tag-spring{background:var(--spring);color:#fff}
.num{flex:0 0 44px;width:44px;height:44px;border-radius:999px;background:#fff;color:var(--spring);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:20px;font-weight:700}
.dot-icon{width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center}
.ok{color:var(--leaf);font-weight:600;display:flex;align-items:center;gap:8px}

/* chips */
.chip{min-height:44px;padding:0 20px;border-radius:999px;font:inherit;font-weight:600;cursor:pointer;background:#fff;color:var(--ink);border:2px solid var(--line)}
.chip[aria-pressed=true]{background:var(--spring);border-color:var(--spring);color:#fff}
.chips-deep .chip[aria-pressed=true]{background:var(--deep);border-color:var(--deep)}
.chips-terra .chip[aria-pressed=true]{background:var(--terracotta);border-color:var(--terracotta)}

/* product cards */
.p-card{display:flex;flex-direction:column;border-radius:var(--r-md);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden}
.p-card:hover{border-color:var(--spring);color:var(--ink)}
.p-card .ph{height:200px;border-radius:0}
.p-card .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.p-card .name{font-family:var(--display);font-size:22px;line-height:28px;font-weight:700}
.p-card .foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto}
.price{font-size:20px;line-height:24px;font-weight:700}
.p-card[hidden],.hidden{display:none!important}

/* option buttons */
.opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;border-radius:var(--r-md);font:inherit;color:var(--ink);cursor:pointer;background:#fff;border:2px solid var(--line);text-align:left;width:100%}
.opt[aria-pressed=true]{background:var(--soft);border-color:var(--spring)}
.opt .t{font-weight:700;display:block}.opt .s{font-size:14px;color:var(--muted);display:block}

/* forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600}
.input{height:48px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--line);font:inherit;background:#fff;width:100%}
textarea.input{height:auto;padding:12px;resize:vertical}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.qty button{width:44px;height:48px;border:none;background:none;font:inherit;font-size:20px;cursor:pointer}
.qty span{min-width:28px;text-align:center;font-weight:700}
.notice{padding:14px 16px;border-radius:var(--r-sm);background:var(--soft);font-weight:600}

/* specs */
.specs{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}
.specs dt{color:var(--muted)}.specs dd{margin:0;font-weight:600}
.band-deep .specs dt{color:var(--soft)}
ol.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* table */
.table-wrap{overflow-x:auto}
table{width:100%;min-width:560px;border-collapse:collapse}
th,td{padding:14px 20px;text-align:left}
thead tr{background:var(--soft)}
tbody tr{border-top:1px solid var(--line)}

/* quiz progress */
.bar{height:8px;border-radius:999px;background:#fff;overflow:hidden}.bar>div{height:8px;background:var(--spring);border-radius:999px;transition:width .3s}

/* checkout steps */
.steps-nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.steps-nav li{padding:8px 16px;border-radius:999px;font-weight:600;background:#fff;color:var(--muted);border:1px solid var(--line)}
.steps-nav li.current{background:var(--spring);color:#fff;border-color:var(--spring)}
.steps-nav li.done{background:var(--soft);color:var(--ink)}

/* footer */
.site-footer{background:var(--deep);color:var(--on-deep)}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;padding-top:56px;padding-bottom:56px}
.site-footer .col{display:flex;flex-direction:column;gap:8px}
.site-footer .col a{color:var(--soft);text-decoration:none}
.site-footer .col a:hover{color:#fff;text-decoration:underline}
.site-footer .brand{color:var(--on-deep)}
.site-footer .legal{border-top:1px solid #23363E;padding:20px 24px!important;display:block!important;font-size:14px;color:var(--soft)}

[hidden]{display:none!important}