/* Cosmic Epoxy store shell: cart drawer, mobile menu, toast (all pages) + store-page layout (body.store) */
#cartbtn,#mtoggle{appearance:none;border:1px solid rgba(246,243,255,.25);background:rgba(11,8,18,.35);color:#f6f3ff;width:44px;height:44px;border-radius:999px;display:inline-grid;place-items:center;cursor:pointer;position:relative;padding:0;transition:border-color .3s,transform .3s;font-family:inherit}
#cartbtn:hover,#mtoggle:hover{border-color:#24d3f2;transform:translateY(-1px)}
#cartbtn svg,#mtoggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#cartcount{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff7a1a;color:#0b0812;font:700 12px/20px 'Space Grotesk',system-ui,sans-serif;text-align:center;display:none}
#cartcount.on{display:block}
#mtoggle{display:none}
@media (max-width:900px){#mtoggle{display:inline-grid}}

#mmenu{position:fixed;inset:0;z-index:70;background:rgba(11,8,18,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:90px 24px 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .35s,transform .35s,visibility 0s .35s}
#mmenu.open{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s,visibility 0s}
#mmenu .close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(246,243,255,.25);background:none;color:#f6f3ff;font-size:22px;cursor:pointer}
#mmenu h4{font:700 11px/1 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:#24d3f2;margin:26px 0 10px}
#mmenu a{display:block;padding:12px 0;border-bottom:1px solid rgba(246,243,255,.1);font:900 clamp(20px,5vw,26px)/1.1 'Unbounded',sans-serif;text-transform:uppercase;color:#f6f3ff;text-decoration:none}
#mmenu a.small{font:500 16px/1.3 'Space Grotesk',sans-serif;text-transform:none;padding:10px 0}
#mmenu .grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}

#cartdrawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(440px,100vw);background:#150f23;border-left:1px solid rgba(246,243,255,.12);transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.16,1,.3,1),visibility 0s .45s;display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(0,0,0,.5);color:#f6f3ff;font-family:'Space Grotesk',system-ui,sans-serif}
#cartdrawer.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.16,1,.3,1),visibility 0s}
#cartdrawer .hd{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid rgba(246,243,255,.12)}
#cartdrawer .hd b{font:900 20px/1 'Unbounded',sans-serif;text-transform:uppercase}
#cartdrawer .close{width:40px;height:40px;border-radius:999px;border:1px solid rgba(246,243,255,.25);background:none;color:#f6f3ff;font-size:20px;cursor:pointer}
#cartdrawer .lines{flex:1;overflow:auto;padding:10px 22px}
#cartdrawer .empty{padding:40px 0;color:#a99fc4;text-align:center}
.cline{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid rgba(246,243,255,.1);align-items:center}
.cline img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.cline .n{font-weight:700;font-size:15px;line-height:1.25}
.cline .v{color:#a99fc4;font-size:13px;margin-top:3px}
.cline .q{display:inline-flex;align-items:center;border:1px solid rgba(246,243,255,.2);border-radius:999px;margin-top:8px}
.cline .q button{width:36px;height:36px;border:0;background:none;color:#f6f3ff;font-size:18px;cursor:pointer}
.cline .q span{min-width:24px;text-align:center;font-size:14px}
.cline .p{font:700 15px/1 'Unbounded',sans-serif;text-align:right}
.cline .rm{display:block;margin-top:8px;color:#a99fc4;font-size:13px;background:none;border:0;cursor:pointer;text-decoration:underline;padding:6px 0}
#cartdrawer .ft{padding:16px 22px 22px;border-top:1px solid rgba(246,243,255,.12);background:#0b0812}
.tot{display:flex;justify-content:space-between;font-size:14px;color:#a99fc4;padding:4px 0}
.tot.big{font:700 18px/1.2 'Unbounded',sans-serif;color:#f6f3ff;padding:10px 0 4px}
.tot .note{font-size:12px}
#cartdrawer .min{font-size:12px;color:#ffa03c;margin:6px 0 0}
.sbtn{display:flex;justify-content:center;align-items:center;width:100%;padding:16px 20px;border-radius:999px;border:0;font:700 16px/1 'Space Grotesk',sans-serif;cursor:pointer;text-decoration:none;margin-top:12px;transition:transform .3s,box-shadow .3s}
.sbtn.hot{background:linear-gradient(100deg,#ff7a1a,#ff5e1a);color:#0b0812;box-shadow:0 12px 34px -10px rgba(255,122,26,.7)}
.sbtn.hot:hover{transform:translateY(-2px)}
.sbtn.ghost{background:none;border:1.5px solid rgba(246,243,255,.4);color:#f6f3ff}
.sbtn[disabled]{opacity:.5;pointer-events:none}
#cartveil{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#cartveil.open{opacity:1;visibility:visible}
#toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,20px);opacity:0;background:#f6f3ff;color:#0b0812;padding:12px 18px;border-radius:999px;font:700 14px/1 'Space Grotesk',sans-serif;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- store pages ---------- */
body.store{margin:0;background:#0b0812;color:#f6f3ff;font-family:'Space Grotesk',system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.store *{box-sizing:border-box}
body.store img{max-width:100%;display:block}
body.store a{color:inherit;text-decoration:none}
body.store h1,body.store h2,body.store h3{font-family:'Unbounded',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1;margin:0;text-transform:uppercase}
body.store em{font-style:normal;background:linear-gradient(95deg,#ff7a1a,#ffa03c 45%,#24d3f2 110%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sh{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,3vw,40px);background:rgba(11,8,18,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(246,243,255,.12)}
.sh .brand img{height:48px;width:auto}
.sh nav{display:flex;align-items:center;gap:clamp(12px,2vw,26px);font-weight:700;font-size:15px}
.sh nav a{position:relative}
.sh nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#24d3f2;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.sh nav a:hover::after{transform:scaleX(1)}
@media (max-width:900px){.sh nav a{display:none}.sh .brand img{height:40px}}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,5vw,72px)}
.smain{padding:clamp(28px,4vw,56px) 0 96px}
.crumbs{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#a99fc4;margin-bottom:22px}
.crumbs a:hover{color:#24d3f2}
.kick{font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:#24d3f2;margin:0 0 18px;display:flex;align-items:center;gap:12px}
.kick::before{content:"";width:28px;height:2px;background:currentColor}
.ttl{font-size:clamp(32px,4.6vw,64px);max-width:18ch}
.lede{font-size:clamp(17px,1.3vw,20px);color:#a99fc4;max-width:60ch;margin:18px 0 0}
body.store .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;border-radius:999px;font-weight:700;font-size:15px;line-height:1;border:0;cursor:pointer;font-family:inherit;transition:transform .3s,box-shadow .3s;white-space:nowrap}
body.store .btn-hot{background:linear-gradient(100deg,#ff7a1a,#ff5e1a);color:#0b0812;box-shadow:0 12px 34px -10px rgba(255,122,26,.7)}
body.store .btn-hot:hover{transform:translateY(-2px)}
body.store .btn-ghost{border:1.5px solid rgba(246,243,255,.5);background:rgba(11,8,18,.25);color:#f6f3ff}
body.store .btn-ghost:hover{border-color:#24d3f2;color:#24d3f2}
body.store .btn[disabled]{opacity:.5;pointer-events:none}

/* shop grid */
.dept{padding:clamp(36px,5vw,64px) 0;border-top:1px solid rgba(246,243,255,.12)}
.dept:first-of-type{border-top:0}
.dept h2{font-size:clamp(24px,3vw,40px)}
.dept .blurb{color:#a99fc4;margin:10px 0 0;max-width:60ch}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:28px}
.pc{background:#17112a;border:1px solid rgba(246,243,255,.12);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .4s,border-color .3s}
.pc:hover{transform:translateY(-4px);border-color:rgba(36,211,242,.5)}
.pc .im{aspect-ratio:4/3;overflow:hidden;background:#0b0812}
.pc .im img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.pc:hover .im img{transform:scale(1.06)}
.pc .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc .sz{font:500 11px/1.3 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#a99fc4}
.pc h3{font-size:19px;line-height:1.1}
.pc .cv{color:#a99fc4;font-size:14px}
.pc .pr{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pc .pr b{font:700 20px/1 'Unbounded',sans-serif}
.pc .pr small{display:block;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#a99fc4;margin-bottom:6px}
.pc .stk{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#24d3f2}
.pc .stk.out{color:#ff8a8a}
.pc .add{padding:10px 16px;font-size:14px}
.deptnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.deptnav a{font:700 13px/1 'Space Grotesk',sans-serif;padding:10px 14px;border-radius:999px;border:1px solid rgba(246,243,255,.2)}
.deptnav a:hover{border-color:#24d3f2;color:#24d3f2}

/* product page */
.pp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:start}
.pp .gal{position:sticky;top:90px}
@media (max-width:900px){.pp{grid-template-columns:1fr}.pp .gal{position:static}}
.pp .gal .big{border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#17112a;border:1px solid rgba(246,243,255,.12)}
.pp .gal .big img{width:100%;height:100%;object-fit:cover}
.pp .gal .thumbs{display:flex;gap:10px;margin-top:10px}
.pp .gal .thumbs button{padding:0;border:0;background:none;cursor:pointer;border-radius:10px}
.pp .gal .thumbs img{width:72px;height:54px;object-fit:cover;border-radius:10px;border:1px solid rgba(246,243,255,.15)}
.pp .gal .thumbs button.on img{border-color:#24d3f2}
.pp .gal .vis{margin-top:10px;font:500 11px/1.4 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#a99fc4}
.pp h1{font-size:clamp(30px,3.6vw,50px)}
.pp .sku{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#a99fc4;margin:12px 0 0}
.pp .short{font-size:18px;color:#d8d0ee;margin:16px 0 0;max-width:52ch}
.buy{margin-top:22px;border:1px solid rgba(246,243,255,.14);border-radius:22px;padding:22px;background:#150f23}
.buy label{display:block;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#a99fc4;margin:0 0 8px}
.buy select,.buy input{width:100%;background:rgba(246,243,255,.06);border:1px solid rgba(246,243,255,.14);border-radius:12px;color:#f6f3ff;font-family:inherit;font-size:16px;padding:13px 14px;margin-bottom:14px;outline:none}
.buy select:focus,.buy input:focus{border-color:#24d3f2}
.buy .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.buy .price{display:flex;align-items:center;justify-content:flex-end;align-self:end;min-height:50px;margin:0 0 14px}
.buy .price b{font:900 32px/1 'Unbounded',sans-serif}
.buy .stock{font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#24d3f2;margin-bottom:12px}
.buy .stock.out{color:#ff8a8a}
.buy .ship{font-size:13px;color:#a99fc4;margin:12px 0 0;line-height:1.5}
.buy .ship a{color:#24d3f2}
.calc{margin-top:16px;border:1px dashed rgba(164,92,240,.6);border-radius:16px;padding:16px 16px 4px;background:rgba(122,43,201,.08)}
.calc h4{font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#a45cf0;margin:0 0 12px}
.calc .out{padding:12px 14px;border-radius:12px;background:rgba(11,8,18,.7);border:1px solid rgba(36,211,242,.35);font-size:14px;color:#a99fc4;margin-bottom:12px}
.calc .out b{display:block;font:700 15px/1.3 'Unbounded',sans-serif;color:#f6f3ff;margin-bottom:4px}
.spec{margin-top:clamp(28px,4vw,48px)}
.spec details{border-top:1px solid rgba(246,243,255,.12)}
.spec details:last-child{border-bottom:1px solid rgba(246,243,255,.12)}
.spec summary{list-style:none;cursor:pointer;padding:18px 0;font:900 16px/1.2 'Unbounded',sans-serif;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.spec summary::-webkit-details-marker{display:none}
.spec summary::after{content:"+";color:#24d3f2;font-size:22px}
.spec details[open] summary::after{content:"–"}
.spec .in{padding:0 0 20px;color:#d8d0ee;font-size:15px}
.spec .in ul,.spec .in ol{margin:0;padding-left:20px}
.spec .in li{margin:6px 0}
.spec .in p{margin:0 0 10px}
.spec table{border-collapse:collapse;width:100%}
.spec td{padding:8px 0;border-top:1px solid rgba(246,243,255,.1);vertical-align:top}
.spec td:first-child{color:#a99fc4;width:42%}
.docs a{color:#24d3f2}
.rel{margin-top:clamp(40px,6vw,80px)}
.rel h2{font-size:clamp(22px,2.6vw,34px)}

/* checkout */
.co{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:28px}
@media (max-width:900px){.co{grid-template-columns:1fr}}
.cobox{border:1px solid rgba(246,243,255,.14);border-radius:22px;padding:clamp(18px,3vw,30px);background:#150f23}
.cobox h3{font-size:18px;margin:0 0 16px}
.cobox label{display:block;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:#a99fc4;margin:0 0 8px}
.cobox input,.cobox select,.cobox textarea{width:100%;background:rgba(246,243,255,.06);border:1px solid rgba(246,243,255,.14);border-radius:12px;color:#f6f3ff;font-family:inherit;font-size:16px;padding:13px 14px;margin-bottom:14px;outline:none}
.cobox input:focus,.cobox select:focus,.cobox textarea:focus{border-color:#24d3f2}
.cobox .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cobox .row3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
@media (max-width:600px){.cobox .row,.cobox .row3{grid-template-columns:1fr}}
.cobox .fine{font-size:13px;color:#a99fc4;margin:10px 0 0;line-height:1.5}
.cobox .err{color:#ff8a8a}
.cobox .mode{border:1px dashed rgba(36,211,242,.5);border-radius:14px;padding:12px 14px;font-size:14px;color:#d8d0ee;margin:0 0 18px}
.cosum{position:sticky;top:90px}
.thanks{max-width:720px;margin:0 auto;text-align:center;padding:clamp(40px,8vw,100px) 0}
.thanks h1{font-size:clamp(36px,6vw,72px)}
.thanks .num{display:inline-block;margin:20px 0;padding:12px 20px;border-radius:999px;border:1px solid rgba(36,211,242,.5);font:700 16px/1 'JetBrains Mono',monospace;letter-spacing:.14em}
.thanks p{color:#a99fc4;max-width:50ch;margin:14px auto 0}
.sf{border-top:1px solid rgba(246,243,255,.12);padding:40px 0 60px;color:#a99fc4}
.sf .row{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.sf img{height:52px}
.sf nav{display:flex;gap:18px;flex-wrap:wrap;font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.sf nav a:hover{color:#24d3f2}
.sf .bottom{margin-top:26px;font:500 11px/1.6 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){#cartdrawer,#mmenu,#toast,.pc,.pc .im img{transition:none}}