/* Presentation only; store data and checkout remain in the shared API. */
:root{--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:90px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;background-image:radial-gradient(ellipse at 65% 0%,#24469010,transparent 48%);-webkit-font-smoothing:antialiased}::selection{background:#466fe9;color:#fff}
header{height:80px;border-bottom-color:#ffffff0d;gap:20px}.brand{display:flex;gap:9px;align-items:center;font-size:18px;letter-spacing:1.8px;white-space:nowrap}.brand:before{content:'↗';display:grid;place-items:center;width:35px;height:35px;border:1px solid #ffffff25;border-radius:11px;background:linear-gradient(140deg,#ffffff13,#ffffff03);font-size:24px;font-weight:400;letter-spacing:0}.brand span{font-size:10px;letter-spacing:2px;color:#8a8c94}.header-right{gap:22px}.header-right>a{font-size:12px;color:#afb2bd;transition:color .2s}.header-right>a:hover{color:white}.header-right>button{font-size:12px;background:linear-gradient(145deg,#ffffff0a,#ffffff03);border-color:#ffffff13;border-radius:30px}.live{font-size:11px}
main{padding-top:24px}.hero{height:440px;isolation:isolate;position:relative;padding:46px;border:1px solid #ffffff12;border-radius:28px;background-position:center;box-shadow:0 24px 80px #0002}.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#070a12b3,transparent 82%),radial-gradient(ellipse at 80% 15%,#4d83ea25,transparent 65%)}.hero:after{content:'LUNATIC / SELECTED';position:absolute;top:26px;right:27px;border:1px solid #ffffff35;border-radius:25px;padding:9px 13px;letter-spacing:2px;font-size:9px;color:#d2d9eb;background:#0a0e1540;backdrop-filter:blur(12px)}.hero>div{max-width:760px}.eyebrow{font-size:10px;letter-spacing:2.6px;color:#b2c8ff}.hero .eyebrow:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#8dacf9;box-shadow:0 0 12px #6696ff;margin-right:10px;vertical-align:2px}.hero h1{font-size:clamp(34px,4.7vw,66px);font-weight:800;line-height:1.08;letter-spacing:-2.8px;margin:19px 0 17px;text-shadow:0 2px 24px #0003}.hero p{max-width:570px;font-size:14px;line-height:1.8;color:#b6bdcc;margin-bottom:27px}
button{transition:background .25s,border-color .25s,box-shadow .25s,transform .25s var(--ease),color .25s;touch-action:manipulation}button:active{transform:scale(.97)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #8aabff;outline-offset:4px}button:disabled{cursor:wait;opacity:.55}.primary{border-radius:15px;box-shadow:0 7px 26px color-mix(in srgb,var(--accent) 23%,transparent);position:relative;overflow:hidden}.primary:after{content:'';position:absolute;inset:-50% -70%;background:linear-gradient(115deg,transparent 42%,#fff2 50%,transparent 58%);transform:translateX(-70%);transition:transform .65s var(--ease);pointer-events:none}.primary:hover:after{transform:translateX(70%)}.hero .primary{padding:17px 25px}.hero .primary span{display:inline-block;transition:transform .3s}.hero .primary:hover span{transform:translate(3px,-2px)}
.section-head{margin:35px 0 21px}.section-head h2{font-size:22px;font-weight:650;letter-spacing:-.7px}.section-head h2 .muted{font-weight:400;font-size:11px;letter-spacing:.5px;margin-left:10px}.section-head .link{font-size:12px;color:#b4bed7}.categories{gap:12px;padding:3px 0 9px;scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.category{font-size:11px;line-height:1.5;transition:color .25s,transform .3s}.category b{width:76px;height:76px;border-radius:22px;background:linear-gradient(140deg,#ffffff0a,#ffffff03);border:1px solid #ffffff10;transition:background .3s,border-color .3s,box-shadow .3s,transform .35s var(--ease)}.category:hover{color:#fff}.category:hover b{background:color-mix(in srgb,var(--accent) 15%,#17181b);border-color:color-mix(in srgb,var(--accent) 55%,#ffffff20);transform:translateY(-5px);box-shadow:0 12px 24px #0004}
.grid{gap:20px}.product{border:1px solid #ffffff0b;box-shadow:0 4px 24px #0001;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}.product-media{overflow:hidden;position:relative;background:#202125}.product-media img{transition:transform .75s var(--ease),filter .5s;aspect-ratio:.84;will-change:auto}.product-info{position:relative;background:var(--card);padding:19px}.product h3{font-size:13px;font-weight:500;line-height:1.65;min-height:43px;color:#e2e4ea;cursor:pointer}.product .price{font-size:20px;letter-spacing:-.5px}.old{font-size:11px;color:#81848e}.tag{font-size:8px;font-weight:700;letter-spacing:1.2px;border-radius:6px;top:14px;left:14px;background:#eef2ffed;box-shadow:0 2px 10px #0001}.heart{z-index:1;backdrop-filter:blur(8px);background:#15171a66;border:1px solid #ffffff20;font-size:23px;line-height:1}.heart:hover{background:#15171abf}.heart.selected{background:#563142b3;border-color:#ff9aaa60;animation:heart-pop .35s var(--ease)}.add{border:1px solid #ffffff0e;background:#ffffff06;border-radius:10px;color:#c6cad6;font-size:11px;letter-spacing:.1px;padding:12px;margin-top:15px}.add:hover{background:var(--accent);border-color:transparent;color:#fff}.benefits{padding:26px;margin:30px 0 0;background:linear-gradient(110deg,#ffffff04,transparent);border:1px solid #ffffff09;border-radius:18px;font-size:11px}.benefits strong{font-size:18px;color:#9db6ef}.benefits span{display:flex;align-items:center;gap:3px}
nav{width:min(calc(100% - 36px),720px);bottom:16px;height:73px;border:1px solid #ffffff15;border-radius:23px;background:#17181be8;box-shadow:0 10px 45px #0008;backdrop-filter:blur(24px);padding:0 10px}nav button{padding:11px 15px;min-width:90px;color:#93959f;font-size:10px}nav button svg{width:21px;height:21px;margin-bottom:7px;transition:transform .3s var(--ease),color .3s}nav button:hover svg{transform:translateY(-3px)}nav button.active{color:#f1f4ff}nav button.active svg{color:#a0bdff}nav button.active:before{top:0;width:23px;height:2px;left:50%;transform:translateX(-50%);border-radius:0 0 4px 4px;box-shadow:0 0 15px var(--accent)}.badge{right:18px;top:7px;min-width:15px;text-align:center;animation:heart-pop .3s var(--ease)}
.search{background:#ffffff05;border-color:#ffffff0f;font-size:14px;padding:20px 23px;transition:border-color .3s,box-shadow .3s}.search:focus{border-color:#668de185;box-shadow:0 0 0 4px #5275d00c}.search::placeholder{color:#777d8a}.pill{font-size:12px;border-color:#ffffff0c;padding:12px 20px}.pill.active{box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 20%,transparent)}input,select,textarea{border-color:#ffffff16;background:#ffffff06;transition:border-color .25s,box-shadow .25s}.panel{border-color:#ffffff0b;background:linear-gradient(140deg,#ffffff02,transparent),var(--card);box-shadow:0 12px 35px #0001}.stat{transition:border-color .3s,transform .3s}.stat:hover{border-color:#ffffff22}.stat b{letter-spacing:-1px}.notice{border-color:#7198ed26;background:#24345030;color:#b7c9ef;line-height:1.8}.notice button{font-size:11px;padding:7px 12px;margin:4px}.side button{border-radius:12px;font-size:12px}.side button.active{background:color-mix(in srgb,var(--accent) 18%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}.admin-title h1{font-weight:650}.status{background:#233c2d;color:#9bd6b1}.table-wrap{scrollbar-width:thin}td{line-height:1.5}td button{font-size:11px;padding:9px 13px}.cart-row{border-color:#ffffff0d}.cart-row img{border:1px solid #ffffff15}.total{letter-spacing:-.7px}.empty{padding:100px 20px}.empty .emoji{display:inline-grid;place-items:center;width:85px;height:85px;border-radius:27px;background:#ffffff06;border:1px solid #ffffff0e;animation:float-in .65s var(--ease)}
dialog{border-color:#ffffff1c;background:linear-gradient(145deg,#1e2026,#141518);box-shadow:0 30px 120px #0009;padding:30px;border-radius:26px}dialog[open]{animation:dialog-in .32s var(--ease)}dialog[open]::backdrop{animation:backdrop-in .28s ease;background:#030407b8;backdrop-filter:blur(9px)}.dialog-head{margin-bottom:25px}.dialog-head h2{font-size:19px;letter-spacing:-.5px}.dialog-head button{width:30px;height:30px;background:#ffffff08;border-radius:50%;line-height:1}.detail-img{border:1px solid #ffffff12}.size{font-size:12px;min-width:41px}.size.active{border-color:#7599ec;background:#34518c55}.avatar{box-shadow:0 0 0 5px #ffffff05;border:1px solid #ffffff26}.profile-head h2{letter-spacing:-.8px}#toast{bottom:105px;background:#edf2ff;color:#15213a;border:1px solid #fff8;box-shadow:0 12px 40px #0005;animation:toast-in .3s var(--ease);font-weight:500;font-size:12px;max-width:calc(100vw - 32px);text-align:center}
@media(hover:hover) and (pointer:fine){.product:hover{transform:translateY(-6px);border-color:#ffffff24;box-shadow:0 18px 45px #0005}.product:hover .product-media img{transform:scale(1.045)}.primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 30%,transparent)}}
@keyframes float-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:0;transform:translateY(20px) scale(.975)}to{opacity:1;transform:none}}@keyframes backdrop-in{from{opacity:0}to{opacity:1}}@keyframes heart-pop{0%{transform:scale(.8)}55%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes toast-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media(min-width:1500px){.hero{height:470px}}@media(max-width:1000px){.header-right{gap:16px}.hero{height:390px;padding:35px}.hero h1{font-size:48px}.categories{grid-template-columns:repeat(9,90px)}}
@media(max-width:650px){header{height:68px;gap:9px}.brand{font-size:13px;gap:7px;letter-spacing:1px}.brand:before{width:29px;height:29px;font-size:20px;border-radius:9px}.brand span{display:none}.header-right{gap:9px}.header-right>a{font-size:10px}.header-right>button{font-size:0;width:34px;height:34px;padding:0;position:relative}.header-right>button:after{content:'⚙';font-size:17px;color:#bec6d7;display:grid;place-items:center}main{padding-top:14px;padding-bottom:125px}.hero{height:365px;padding:25px;border-radius:22px;background-position:55%}.hero:after{top:17px;right:17px;font-size:7px;letter-spacing:1.5px;padding:8px 10px}.hero h1{font-size:37px;letter-spacing:-1.8px;overflow-wrap:anywhere}.hero p{font-size:12px;line-height:1.8;margin-bottom:23px}.hero .eyebrow{font-size:8px;letter-spacing:1.5px}.hero .primary{font-size:12px;padding:15px 20px}.section-head{margin-top:29px;gap:10px}.section-head h2{font-size:19px}.section-head h2 .muted{display:none}.section-head>.muted{font-size:10px}.category b{width:65px;height:65px;border-radius:19px;font-size:25px}.categories{grid-template-columns:repeat(9,76px);gap:7px}.category{font-size:10px}.grid{gap:12px}.product-info{padding:12px}.product h3{font-size:11px;line-height:1.7;min-height:38px;margin-bottom:10px}.product .price{font-size:17px}.old{font-size:9px;display:inline-block;margin-left:4px}.add{font-size:10px;padding:10px 5px;margin-top:12px}.heart{width:32px;height:32px;right:9px;top:9px;font-size:21px}.tag{top:12px;left:10px;font-size:7px;padding:5px 6px}.benefits{padding:21px;gap:16px}.benefits span{font-size:11px}nav{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 22px);height:67px;border-radius:20px;padding:0 3px}nav button{padding:10px 5px;min-width:0;flex:1;font-size:9px}nav button svg{width:20px;height:20px;margin-bottom:6px}.badge{right:15px;top:6px}.search{padding:17px 18px}.toolbar{gap:8px}.pill{font-size:11px;padding:11px 16px}.panel{padding:18px}dialog{padding:22px;width:calc(100vw - 24px);border-radius:22px}.detail-img{max-height:330px;object-fit:cover}.dialog-head h2{font-size:18px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.stat b{font-size:24px}.admin-title{gap:12px}.admin-title .eyebrow{font-size:8px;letter-spacing:1.5px}.admin-title h1{font-size:23px}.side{gap:5px}.side button{padding:10px 12px}.notice{font-size:11px}.notice button{font-size:10px}.total{font-size:21px}#toast{bottom:93px;width:max-content}.empty{padding:80px 8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.product:hover,.category:hover b,.primary:hover{transform:none!important}}