:root{
  --background:oklch(0.19 0.022 258);--foreground:oklch(0.95 0.008 250);
  --card:oklch(0.235 0.023 258);--secondary:oklch(0.29 0.025 258);
  --muted-foreground:oklch(0.68 0.02 254);--primary:oklch(0.7 0.13 232);
  --primary-foreground:oklch(0.18 0.03 258);--border:oklch(0.34 0.024 256);
  --destructive:oklch(0.62 0.2 22);--glow:oklch(0.7 0.13 232 / 45%);
  --grid-line:oklch(1 0 0 / 4%);--radius:0.5rem;
  --font-sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;border-color:var(--border)}
html{-webkit-text-size-adjust:100%}
body{background:var(--background);color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;padding-top:64px;line-height:1.5;display:flex;flex-direction:column;min-height:100vh}
body>main{flex:1 0 auto}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}
.muted{color:var(--muted-foreground)}
.primary{color:var(--primary)}
.wrap{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.tech-grid{background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px}

/* header */
header.site{position:fixed;inset:0 0 auto 0;z-index:50;border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--background) 80%,transparent);backdrop-filter:blur(16px)}
.hbar{display:flex;align-items:center;gap:1rem;height:64px;max-width:72rem;margin:0 auto;padding:0 1.25rem}
.brand{display:flex;align-items:center;gap:.625rem;font-size:15px;font-weight:600;letter-spacing:-.01em}
.brand svg{height:28px;width:28px;color:var(--primary)}
nav.desktop{margin-left:auto;display:none;align-items:center;gap:.25rem}
nav.desktop a{padding:.5rem .75rem;border-radius:calc(var(--radius) - 2px);font-size:.875rem;color:var(--muted-foreground)}
nav.desktop a:hover{background:var(--secondary);color:var(--foreground)}
nav.desktop a.active{background:var(--secondary);color:var(--foreground)}
.icon-btn{position:relative;display:inline-flex;height:40px;width:40px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:none;color:inherit;cursor:pointer}
.icon-btn:hover{border-color:var(--primary);color:var(--primary)}
#cart-link{margin-left:auto}
.badge{position:absolute;top:-6px;right:-6px;min-width:20px;border-radius:999px;background:var(--primary);color:var(--primary-foreground);font-size:11px;font-weight:600;line-height:20px;text-align:center;padding:0 4px}
.mobile-nav{overflow:hidden;max-height:0;border-top:0 solid var(--border);transition:max-height .2s ease}
.mobile-nav.open{max-height:16rem;border-top:1px solid var(--border)}
.mobile-nav nav{display:flex;flex-direction:column;padding:.75rem}
.mobile-nav a{padding:.625rem .75rem;border-radius:calc(var(--radius) - 2px);font-size:.875rem;color:var(--muted-foreground)}
.mobile-nav a.active{background:var(--secondary);color:var(--foreground)}
@media(min-width:768px){nav.desktop{display:flex}#cart-link{margin-left:.5rem}#menu-btn{display:none}.mobile-nav{display:none}}

/* type */
h1{font-size:2.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.05}
h2{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
h3{font-size:1rem;font-weight:500;letter-spacing:-.01em}
.eyebrow{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.22em;color:var(--primary)}
@media(min-width:640px){h1{font-size:3rem}}

/* blocks */
.page-heading{border-bottom:1px solid var(--border)}
.page-heading .inner{max-width:72rem;margin:0 auto;padding:4rem 1.25rem}
.page-heading h1{margin-top:1rem;max-width:42rem}
.page-heading p.sub{margin-top:1rem;max-width:42rem;font-size:.875rem;color:var(--muted-foreground)}
.card{border:1px solid var(--border);background:var(--card);border-radius:var(--radius);padding:1.5rem}
.grid{display:grid;gap:1rem}
@media(min-width:640px){.sm-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.md-2{grid-template-columns:repeat(2,1fr)}.md-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.lg-3{grid-template-columns:repeat(3,1fr)}.lg-4{grid-template-columns:repeat(4,1fr)}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:calc(var(--radius) - 2px);background:var(--primary);color:var(--primary-foreground);font-weight:600;font-size:.875rem;padding:.75rem 1.25rem;border:0;cursor:pointer;box-shadow:0 0 0 1px var(--border),0 18px 60px -24px var(--glow)}
.btn:hover{opacity:.9}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);padding:.75rem 1.25rem;font-size:.875rem;font-weight:500}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.pill{margin-top:.75rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:calc(var(--radius) - 2px);border:1px solid var(--border);background:var(--card);padding:.375rem .75rem;font-family:var(--font-mono);font-size:.75rem;color:var(--muted-foreground)}
.pill.accent{border-color:color-mix(in oklab,var(--primary) 40%,transparent);background:color-mix(in oklab,var(--primary) 10%,transparent);color:var(--primary)}
.icon{height:20px;width:20px;color:var(--primary)}

/* hero */
.hero{border-bottom:1px solid var(--border);background:var(--background)}
.hero .inner{max-width:72rem;margin:0 auto;padding:6rem 1.25rem}
.hero h1{margin-top:1.25rem;font-size:2.25rem}
@media(min-width:640px){.hero h1{font-size:3.75rem}.hero .inner{padding:8rem 1.25rem}}
.hero p.lede{margin-top:1.25rem;max-width:36rem;font-size:1rem;color:var(--muted-foreground)}

/* catalog */
.special-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border:1px solid color-mix(in oklab,var(--primary) 50%,transparent);background:color-mix(in oklab,var(--primary) 10%,transparent);border-radius:var(--radius);padding:1.5rem;transition:border-color .15s ease}
.special-banner:hover{border-color:var(--primary)}
.special-banner-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.22em;color:var(--primary)}
.special-banner-eyebrow svg{height:14px;width:14px}
.special-banner-title{margin-top:.75rem;font-size:1.25rem;line-height:1.75rem;font-weight:600;letter-spacing:-.025em}
.special-banner-spec{margin-top:.25rem;font-family:var(--font-mono);font-size:.75rem;line-height:1rem;color:var(--muted-foreground)}
.special-banner-price{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:1.125rem;line-height:1.75rem}
.special-banner-price svg{color:var(--primary)}
.catalog-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--border);padding-bottom:1.5rem}
.item{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);border-radius:var(--radius);padding:1.25rem}
.item:hover{border-color:color-mix(in oklab,var(--primary) 60%,transparent)}
.item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.tag{border:1px solid var(--border);background:var(--secondary);border-radius:4px;padding:2px 8px;font-family:var(--font-mono);font-size:11px;color:var(--muted-foreground);white-space:nowrap}
.item .spec{margin-top:.5rem;font-family:var(--font-mono);font-size:.75rem;color:var(--muted-foreground)}
.item-foot{margin-top:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-top:1px solid var(--border);padding-top:1rem}
.price{font-family:var(--font-mono);font-size:1.125rem}
.add{display:inline-flex;align-items:center;gap:.375rem;border:0;border-radius:calc(var(--radius) - 2px);background:var(--primary);color:var(--primary-foreground);font-size:.75rem;font-weight:600;padding:.5rem .75rem;cursor:pointer}
.add:hover{opacity:.9}

/* tables */
.table-wrap{margin-top:1.5rem;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;text-align:left;font-size:.875rem}
thead{background:color-mix(in oklab,var(--secondary) 60%,transparent)}
thead th{font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground);font-weight:500;padding:.75rem 1rem}
tbody td{padding:.75rem 1rem;border-top:1px solid var(--border)}
tfoot td{padding:.75rem 1rem;border-top:1px solid var(--border);background:color-mix(in oklab,var(--secondary) 40%,transparent)}
.right{text-align:right}
.qty{display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px)}
.qty button{background:none;border:0;color:var(--muted-foreground);padding:.375rem;cursor:pointer;display:inline-flex}
.qty button:hover{color:var(--foreground)}
.qty span{width:1.5rem;text-align:center;font-family:var(--font-mono);font-size:.75rem}
.rm{background:none;border:0;color:var(--muted-foreground);margin-left:.75rem;cursor:pointer}
.rm:hover{color:var(--destructive)}

/* forms */
label.lbl{font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}
input[type=text],input[type=email],textarea{margin-top:.5rem;width:100%;border:1px solid var(--border);background:var(--background);color:var(--foreground);border-radius:calc(var(--radius) - 2px);padding:.625rem .75rem;font-size:.875rem;font-family:inherit;outline:none}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
textarea{resize:none}
.note{display:flex;gap:.75rem;border:1px solid var(--border);background:color-mix(in oklab,var(--secondary) 50%,transparent);border-radius:calc(var(--radius) - 2px);padding:1rem;align-items:flex-start;cursor:pointer}
.note p{font-size:.75rem;color:var(--muted-foreground)}
.note p.strong{font-size:.875rem;font-weight:500;color:var(--foreground)}
form.card>div+div,form.card>label+*,form.card>*+*{margin-top:1rem}
input[type=checkbox]{height:16px;width:16px;accent-color:var(--primary);margin-top:2px;flex-shrink:0}

/* sections/footer */
.section{padding:5rem 1.25rem;max-width:72rem;margin:0 auto}
.section-alt{border-top:1px solid var(--border);background:color-mix(in oklab,var(--card) 40%,transparent)}
footer.site{border-top:1px solid var(--border);padding:2rem 1.25rem}
footer.site p{text-align:center;font-size:.75rem;color:var(--muted-foreground);max-width:56rem;margin-left:auto;margin-right:auto}
footer.site p+p{margin-top:.75rem;font-size:11px;opacity:.7}
.stack>*+*{margin-top:.75rem}
.two-col{display:grid;gap:2.5rem}
@media(min-width:1024px){.two-col{grid-template-columns:1.4fr 1fr}.two-col.checkout{grid-template-columns:1.3fr 1fr}}
.prose h2{font-size:1.25rem}
.prose p{margin-top:.75rem;font-size:.875rem;color:var(--muted-foreground)}
.prose section+section{margin-top:2.5rem}
.stat p.v{font-family:var(--font-mono);font-size:1.875rem;color:var(--primary)}
.stat p.l{margin-top:.25rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground)}
.center-state{max-width:36rem;margin:0 auto;padding:7rem 1.25rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.hide{display:none}

/* out of stock */
.item.oos{background:color-mix(in oklab,var(--card) 50%,transparent);opacity:.7;filter:grayscale(1)}
.item.oos:hover{border-color:var(--border)}
.item.oos h3,.item.oos .price{color:var(--muted-foreground)}
.item.oos .add{background:var(--secondary);color:var(--muted-foreground);cursor:not-allowed}
.section-flat{border-top:1px solid var(--border);background:var(--background)}
.card.flat{background:var(--background)}

/* checkout form extras */
.field-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-error {
  border: 1px solid color-mix(in srgb, var(--destructive) 40%, transparent);
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
  border-radius: .5rem; padding: .75rem; font-size: .75rem; line-height: 1.6;
}
#submit-btn:disabled { opacity: .4; cursor: not-allowed; }

/* bundles */
.item.bundle{gap:0}
.bundle-blurb{margin-top:.75rem;font-size:.8125rem;line-height:1.6;color:var(--muted-foreground)}
.bundle-parts{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.25rem}
.bundle-parts li{font-family:var(--font-mono);font-size:11px;color:var(--muted-foreground)}
.bundle-parts li::before{content:"\2022";color:var(--primary);margin-right:.5rem}
.bundle-parts li.gone{text-decoration:line-through;opacity:.7}
.bundle-parts li.gone::before{color:var(--muted-foreground)}
.bundle-parts li.extra{font-style:italic}
.item.bundle .item-foot{margin-top:1.5rem}
.item.bundle .price{display:inline-flex;align-items:baseline;gap:.5rem}
.save{font-size:11px;color:var(--primary)}