:root{--pink:#ff4fb0;--hot:#ff1493;--lav:#d9c8ff;--mint:#b8ffe0;--yel:#fff45c;--ink:#1a0a2e;--f:"Comic Sans MS","Comic Sans",Verdana,Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:14px/1.45 Verdana,Arial,sans-serif;color:var(--ink);background:#ffd6f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ctext x='2' y='10' font-size='9' fill='%23ff8ed0'%3E%E2%99%A5%3C/text%3E%3Ctext x='13' y='22' font-size='9' fill='%23fff'%3E%E2%98%85%3C/text%3E%3C/svg%3E");padding-bottom:64px}
h1,h2,h3,button,.logo,legend{font-family:var(--f)}
button{cursor:pointer;color:inherit}
:focus-visible{outline:3px dashed var(--hot);outline-offset:2px}
.ticker{background:var(--ink);color:var(--yel);font:bold 13px var(--f);padding:3px 0;overflow:hidden;white-space:nowrap}
.ticker-static{display:none}
@media (prefers-reduced-motion:reduce){.ticker marquee{display:none}.ticker-static{display:inline}}
.top{text-align:center;padding:14px 8px 6px}
.logo{display:inline-block;font:900 clamp(34px,11vw,72px)/1 var(--f);color:var(--hot);text-decoration:none;text-shadow:3px 3px 0 #fff,5px 5px 0 var(--ink);letter-spacing:-1px}
.sub{font:bold 13px var(--f);margin:8px 0 2px}
.best{font:11px "Times New Roman",serif;margin:0;font-style:italic}
.bag-open{position:fixed;right:8px;bottom:8px;z-index:30;background:var(--yel);border:3px outset var(--hot);font:bold 13px var(--f);padding:8px 10px;color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.bag-open span{animation:blink 1.1s steps(2) infinite}
.bag-open em{font-style:normal}
@keyframes blink{50%{color:var(--hot)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}
main{max-width:1100px;margin:0 auto;padding:0 10px}
.sep{border:0;height:14px;margin:14px 0;background:repeating-linear-gradient(90deg,var(--hot) 0 8px,#fff 8px 12px,var(--lav) 12px 20px)}
.intro{display:grid;gap:12px;background:#fff;border:4px ridge var(--pink);padding:10px}
.intro-copy{position:relative}
h1{font-size:clamp(34px,10vw,64px);line-height:.95;margin:6px 0;color:var(--hot);text-shadow:2px 2px 0 var(--yel)}
.burst{display:inline-block;background:var(--yel);border:2px dashed var(--hot);font:bold 15px var(--f);padding:2px 8px;transform:rotate(-6deg);animation:blink 1s steps(2) infinite}
.welcome{font:14px var(--f)}
.upd{font:12px "Times New Roman",serif}
.online{color:#0a8f3c;font-weight:bold}
.click{color:#00f;font:bold 12px var(--f);text-decoration:underline}
.hero{width:100%;max-height:70vh;object-fit:cover;border:3px solid var(--ink);display:block}
.sec{font:bold 22px var(--f);text-align:center;color:var(--hot);margin:8px 0;text-shadow:1px 1px 0 #fff}
.categories{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;background:var(--lav);border:3px groove var(--pink);padding:8px;margin-bottom:12px;font:12px var(--f)}
.categories button{background:#fff;border:2px outset var(--pink);font:bold 12px var(--f);padding:6px 10px;min-height:36px}
.categories button.active{background:var(--hot);color:#fff}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
.item{position:relative;text-align:left;background:#fff;border:4px double var(--hot);padding:8px;display:block;width:100%;box-shadow:4px 4px 0 var(--ink)}
.item:nth-child(even){background:var(--mint);border-style:dashed}
.item img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border:2px solid var(--ink);margin:6px 0;image-rendering:auto}
.item h3{font-size:18px;margin:2px 0}
.item small{display:flex;justify-content:space-between;align-items:center;gap:6px;font:12px var(--f)}
.item small b{background:var(--yel);border:2px solid var(--ink);padding:2px 8px;font-size:17px}
.item .click{display:block;margin-top:6px}
.tag{position:absolute;top:-8px;right:-6px;z-index:2;background:var(--hot);color:#fff;font:bold 13px var(--f);padding:2px 8px;transform:rotate(8deg);border:2px solid var(--ink);animation:blink 1s steps(2) infinite}
.entry-no{font:italic 11px "Times New Roman",serif}
.trail{background:#fff;border:3px ridge var(--lav);padding:8px}
.trail strong{font-family:var(--f)}
.trail-items{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.trail-items button{padding:0;border:2px solid var(--hot);background:none;width:52px;height:52px}
.trail-items img{width:100%;height:100%;object-fit:cover;display:block}
.guest{background:#fffbd0;border:3px inset var(--pink);margin-top:14px;padding:8px;font:13px var(--f);text-align:center}
.site-foot{text-align:center;font:12px var(--f);padding:14px 10px;display:grid;gap:8px}
.badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.badges i{width:88px;height:31px;display:grid;place-items:center;font:bold 9px/1.05 Verdana;font-style:normal;background:var(--hot);color:#fff;border:2px outset #fff;text-align:center;image-rendering:pixelated}
.badges .b2{background:var(--yel);color:var(--ink)}.badges .b3{background:#3a2bd6}.badges .b4{background:#0a8f3c}
.counter{background:#000;color:#3f3;font:bold 14px monospace;padding:1px 6px;letter-spacing:2px}
.site-foot a{color:#00f}
dialog.product{width:min(96vw,980px);max-height:94vh;padding:10px;border:5px ridge var(--hot);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%23ffd6f0'/%3E%3C/svg%3E");color:var(--ink);overflow:auto}
dialog::backdrop{background:rgba(40,0,60,.6)}
.product-x{position:sticky;top:0;float:right;z-index:3;background:var(--yel);border:3px outset var(--hot);font:bold 13px var(--f);padding:8px 12px;min-height:40px}
.product-view{display:grid;gap:12px}
.pv-media{position:relative}
.pv-media img{width:100%;max-height:78vh;object-fit:contain;background:#fff;border:3px solid var(--ink);display:block}
.pv-no{font:italic 12px "Times New Roman",serif}
.pv-next{margin-top:6px;background:var(--lav);border:2px outset var(--pink);font:bold 12px var(--f);padding:8px;min-height:40px}
.pv-cat{font:bold 12px var(--f);color:var(--hot)}
.pv-copy h2{font-size:28px;margin:4px 0;color:var(--hot)}
.pv-price{font:bold 26px var(--f);background:var(--yel);border:3px dashed var(--ink);display:inline-block;padding:2px 12px;margin:4px 0}
.pv-story{font:14px Verdana,Arial,sans-serif}
.pv-sizes{border:3px groove var(--pink);margin:10px 0;display:flex;gap:6px;flex-wrap:wrap}
.pv-sizes label{position:relative}
.pv-sizes input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pv-sizes span{display:block;min-width:44px;min-height:44px;line-height:38px;text-align:center;border:2px outset var(--pink);background:#fff;font:bold 14px var(--f)}
.pv-sizes input:checked+span{background:var(--hot);color:#fff}
.pv-sizes input:focus-visible+span{outline:3px dashed var(--ink);outline-offset:2px}
.line{font:13px "Times New Roman",serif;margin:2px 0}.line em{font:bold 11px var(--f);font-style:normal;color:var(--hot)}
.add{width:100%;margin-top:10px;background:var(--hot);color:#fff;border:4px outset var(--pink);font:bold 18px var(--f);padding:14px;min-height:52px}
.veil{position:fixed;inset:0;background:rgba(40,0,60,.55);opacity:0;pointer-events:none;z-index:40;transition:opacity .2s}
.veil.open{opacity:1;pointer-events:auto}
.bag{position:fixed;top:0;right:0;bottom:0;width:min(100vw,400px);z-index:50;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext y='12' font-size='10' fill='%23ffd6f0'%3E%E2%99%A5%3C/text%3E%3C/svg%3E");border-left:5px ridge var(--hot);display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .25s,visibility .25s}
.bag.open{transform:none;visibility:visible}
.bag-title{display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--hot);color:#fff;font:bold 13px var(--f);padding:8px}
.bag-title small{display:block;color:var(--yel)}
.bag-x{background:var(--yel);border:2px outset #fff;font:bold 12px var(--f);padding:8px;min-height:40px}
.bag-list{flex:1;overflow:auto;padding:8px}
.bag-row{display:grid;grid-template-columns:64px 1fr auto;gap:8px;background:#fff;border:2px dashed var(--pink);padding:6px;margin-bottom:8px}
.bag-row img{width:64px;height:80px;object-fit:cover;border:2px solid var(--ink)}
.bag-info b{font:bold 13px var(--f)}
.bag-size{margin:2px 0;font-size:12px}.bag-size mark{background:var(--yel)}
.bag-qty{display:flex;align-items:center;gap:6px}
.bag-qty button{width:36px;height:36px;border:2px outset var(--pink);background:var(--lav);font:bold 16px var(--f)}
.bag-side{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font:bold 13px var(--f)}
.bag-rm{background:none;border:0;text-decoration:underline;color:#00f;font:12px var(--f);min-height:36px}
.empty{text-align:center;font:14px var(--f);padding:20px 8px}.empty-mark{font-size:28px;display:block}
.empty-go,.checkout{background:var(--hot);color:#fff;border:3px outset var(--pink);font:bold 14px var(--f);padding:10px;min-height:44px}
.bag-end{padding:10px;border-top:4px double var(--hot);background:var(--lav)}
.bag-total{display:flex;justify-content:space-between;font:bold 16px var(--f);margin:0 0 6px}
.bag-status{font:12px "Times New Roman",serif;margin:0 0 8px}
.checkout{width:100%}.checkout:disabled{opacity:.5;cursor:not-allowed}
.added{position:fixed;left:50%;top:40%;z-index:99;transform:translate(-50%,-50%) rotate(-3deg);background:var(--yel);color:var(--hot);border:4px double var(--ink);box-shadow:5px 5px 0 var(--hot);font:900 clamp(17px,5.5vw,26px)/1.2 var(--f);padding:12px 16px;text-align:center;width:max-content;max-width:92vw;animation:pop .25s ease-out}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.4) rotate(-3deg)}}
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(min-width:720px){.intro{grid-template-columns:1fr 1.1fr;align-items:center}.grid{grid-template-columns:repeat(3,1fr)}.product-view{grid-template-columns:1.3fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
