:root{--bg:#eef1f6;--surface:#fff;--ink:#1b2430;--mute:#5d6878;--line:#d5dbe5;--accent:#2f5bea;--on-accent:#fff;--gold:#f5c518;--ok:#17803d;--warn:#c2410c;--shadow:0 1px 2px rgba(20,30,50,.06),0 10px 28px rgba(20,30,50,.09);
 box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12161d;--surface:#1b212b;--ink:#eef1f6;--mute:#9aa5b5;--line:#2b3441;--accent:#6c8cff;--on-accent:#0d1220;--ok:#4cc27a;--warn:#ff9a5a;--shadow:0 10px 30px rgba(0,0,0,.45)}}
:root[data-theme="dark"]{--bg:#12161d;--surface:#1b212b;--ink:#eef1f6;--mute:#9aa5b5;--line:#2b3441;--accent:#6c8cff;--on-accent:#0d1220;--ok:#4cc27a;--warn:#ff9a5a;--shadow:0 10px 30px rgba(0,0,0,.45)}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 "DM Sans",system-ui,sans-serif}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;margin:0;line-height:1.08}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{max-width:1080px;margin:auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;font:800 24px "Bricolage Grotesque",sans-serif;flex:1;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,var(--accent) 50%,var(--gold) 50%);box-shadow:inset 0 0 0 3px var(--ink);position:relative}
.mark::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px var(--ink)}
.cartbtn{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:10px 18px;font-weight:700;transition:transform .15s}
.cartbtn:hover{transform:translateY(-1px)}
.hero{max-width:1080px;margin:auto;padding:20px 16px 4px}
.hero-in{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;padding:clamp(24px,5vw,48px);display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:center;background:radial-gradient(520px 260px at 95% 0%,color-mix(in srgb,var(--accent) 24%,transparent),transparent),radial-gradient(420px 240px at 0% 100%,color-mix(in srgb,var(--gold) 30%,transparent),transparent),var(--surface)}
.hero h1{font-size:clamp(32px,6vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.14}
.hl{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.12em;text-underline-offset:.12em;text-decoration-skip-ink:none}
.hero p{color:var(--mute);max-width:34em;margin:14px 0 18px;font-size:17px}
.perks{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.perks li{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:500}
.fan{position:relative;height:230px}
.fan i{position:absolute;top:10px;left:calc(50% - 64px + var(--x));width:128px;height:180px;border-radius:16px;display:grid;place-items:center;font-size:54px;font-style:normal;background:linear-gradient(135deg,var(--c1),var(--c2));border:4px solid #fff;box-shadow:var(--shadow);transform:rotate(var(--a));animation:float 5s ease-in-out infinite}
.fan i:nth-child(2){z-index:2;top:0;animation-delay:-1.5s}
@keyframes float{50%{translate:0 -8px}}
.grid{max-width:1080px;margin:auto;padding:0 16px 48px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:12px;display:flex;flex-direction:column;gap:6px;transition:transform .2s,box-shadow .2s,border-color .2s;animation:rise .4s both}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
.art{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2))}
.art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0;transition:background-position .7s}
.card:hover .art::after{background-position:-50% 0}
.emo{font-size:58px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.badge{position:absolute;top:8px;left:8px;z-index:1;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.card h3{font-size:19px;margin-top:6px}
.meta{color:var(--mute);font-size:14px}
.stock{font-size:13px;font-weight:700;color:var(--ok)}
.stock.low{color:var(--warn)}
.stock.out{color:var(--mute)}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;gap:8px}
.price{font:800 24px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.add{background:var(--accent);color:var(--on-accent);border:0;border-radius:12px;padding:9px 14px;font-weight:700;transition:filter .15s,transform .15s}
.add:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.add:disabled{opacity:.4;cursor:not-allowed}
.empty{grid-column:1/-1;color:var(--mute);padding:28px;text-align:center;border:1.5px dashed var(--line);border-radius:20px}
.scrim{position:fixed;inset:0;background:rgba(10,14,22,.55);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.scrim.on{opacity:1;pointer-events:auto}
aside{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--surface);z-index:21;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));border-radius:26px 0 0 26px;box-shadow:var(--shadow)}
aside.on{transform:none}
aside{overflow-y:auto}
aside .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.close{background:var(--bg);border:0;color:var(--ink);font-size:22px;width:36px;height:36px;border-radius:50%}
.items{flex:1 0 auto;max-height:40vh;overflow:auto}
.item{display:flex;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.item .n{flex:1;font-size:15px}
.qty{display:flex;align-items:center;gap:8px;font-weight:700}
.qty button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
form{display:grid;gap:8px;margin-top:12px}
form input,form select{padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}
.total{display:flex;justify-content:space-between;font:800 22px "Bricolage Grotesque",sans-serif;margin:8px 0 2px}
.wa{background:#1fa855;color:#fff;border:0;border-radius:14px;padding:14px;font-weight:700;font-size:16px;transition:filter .15s}
.wa:hover:not(:disabled){filter:brightness(1.08)}
.wa:disabled{opacity:.45;cursor:not-allowed}
.note{font-size:13px;color:var(--mute)}
.err{color:#d6336c;font-size:14px;min-height:1.2em}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 20px;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:999px;font-weight:700;font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s,translate .25s;z-index:30;max-width:90vw;text-align:center}
.toast.on{opacity:1;translate:-50% 0}
footer{border-top:1px solid var(--line);text-align:center;color:var(--mute);padding:28px 16px calc(28px + env(safe-area-inset-bottom,0px));font-size:15px}
footer a{color:var(--accent);font-weight:700}
@media (max-width:720px){.hero-in{grid-template-columns:1fr}.fan{display:none}aside{border-radius:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.shop{max-width:1180px;margin:auto;padding:24px 16px 48px;display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start}
.shop .grid{max-width:none;margin:0;padding:0;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.filters{position:sticky;top:calc(76px + env(safe-area-inset-top,0px));background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);display:grid;gap:18px;max-height:calc(100vh - 100px);overflow:auto}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fhead h2{font-size:20px;flex:1}
.link{background:none;border:0;color:var(--accent);font-weight:700;padding:0}
.fclose{display:none}
.fgroup h3{font:700 13px "DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:8px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{position:relative;display:block}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);font-size:15px;transition:border-color .2s,background .2s}
.opt em{margin-left:auto;font-style:normal;color:var(--mute);font-size:13px}
.opt input:checked+span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));font-weight:700}
.opt input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.opt span.zero{opacity:.45}
.opt img{border-radius:2px;box-shadow:0 0 0 1px var(--line);display:block}
.topbar{display:flex;gap:10px;flex-wrap:wrap}
.topbar input{flex:1 1 220px;padding:11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit}
.topbar select{padding:11px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit}
.fbtn{display:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:14px;padding:11px 16px;font-weight:700}
.active{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.active:empty{display:none}
.pill{border:0;background:var(--ink);color:var(--bg);border-radius:999px;padding:5px 12px;font-size:14px;font-weight:700}
.count{color:var(--mute);margin:12px 0 14px;font-size:15px}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--mute)}
.tag img{border-radius:2px;display:block}
@media (max-width:900px){
.shop{grid-template-columns:1fr;padding-top:16px}
.fbtn{display:block}
.fclose{display:block}
.filters{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:82vh;border-radius:24px 24px 0 0;z-index:22;transform:translateY(105%);transition:transform .3s;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.filters.open{transform:none}
}
.art.has-photo{background:#fff;aspect-ratio:1/1}
.photo{width:100%;height:100%;object-fit:contain;padding:6px}
.price.ask{font-size:16px;color:var(--mute)}
a.add{text-decoration:none;display:inline-block}
.art picture{display:block;width:100%;height:100%}