*{box-sizing:border-box}
:root{--bg:#0e0f13;--card:#12141b;--ink:#e9ecf1;--muted:#b6bdc7;--accent:#ff3e7f;--accent-2:#35e0ff;--ok:#13d38e;--warn:#ffb020}
html,body{margin:0;padding:0;background:linear-gradient(145deg,#0b0c10,#111319);color:var(--ink);font:16px/1.4 'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.site-header{position:sticky;top:0;background:#0b0c10cc;backdrop-filter:blur(8px);border-bottom:1px solid #1a1d25;z-index:100}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:14px}
.logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;font:800 22px/1 'Bangers', cursive;color:#0a0b0e;letter-spacing:1px;box-shadow:0 6px 20px #ff3e7f40}
.brand-text h1{margin:0;font:800 22px/1 'Bangers', cursive;letter-spacing:1px}
.brand-text p{margin:4px 0 0;color:var(--muted);font-size:14px}
.actions{display:flex;align-items:center;gap:10px}
.actions .pill{padding:10px 12px;border:1px solid #222631;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600}
#langToggle{border:none;background:var(--accent);color:#0a0b0e;font:800 14px 'Comic Neue', cursive;padding:10px 12px;border-radius:10px;cursor:pointer}
.hero{padding:36px 0}
.hero h2{margin:0 0 6px;font:800 34px/1 'Bangers', cursive;letter-spacing:1px}
.hero p{margin:0 0 18px;color:var(--muted)}
.filters{display:flex;gap:12px;flex-wrap:wrap}
#search{flex:1;min-width:220px;padding:12px 14px;border-radius:12px;border:1px solid #242836;background:#0c0e13;color:var(--ink)}
.toggle{display:flex;align-items:center;gap:8px;font-weight:600}
.catalog{padding-bottom:32px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:linear-gradient(180deg,#131622,#0f1119);border:1px solid #1a1d28;border-radius:16px;overflow:hidden;transition:transform .12s ease, box-shadow .12s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 30px #0008}
.thumb-wrap{position:relative;background:#0c0e13;height:200px;display:grid;place-items:center}
.thumb{max-width:100%;max-height:100%;object-fit:cover}
.badge{position:absolute;top:10px;left:10px;padding:6px 10px;border-radius:999px;font:700 12px 'Comic Neue', cursive;color:#0a0b0e}
.badge.ok{background:linear-gradient(135deg,#35ffb1,#00d38e)}
.badge.warn{background:linear-gradient(135deg,#ffd06e,#ff9f1c)}
.info{padding:12px 14px 16px}
.title{margin:0 0 6px;font:800 18px/1.1 'Bangers', cursive;letter-spacing:.5px}
.price{margin:0 2px 6px 0;font-weight:800;display:inline-block}
.qty{margin:0 0 8px;color:#b0f2cf}
.sku{margin:0 0 8px;color:var(--muted);font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tags .tag{padding:6px 8px;border:1px dashed #2a2f3c;border-radius:8px;font:700 12px 'Comic Neue', cursive;color:#c7d2e1}
.desc{margin:0;color:var(--muted);font-size:14px;min-height:3em}
.modal{position:fixed;inset:0;display:none}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:#0008;backdrop-filter:blur(2px)}
.modal-content{position:relative;margin:40px auto;max-width:900px;background:#0d1017;border:1px solid #1a1d28;border-radius:16px;padding:16px}
.modal-close{position:absolute;top:6px;right:10px;font-size:28px;line-height:28px;background:none;border:none;color:#e9ecf1;cursor:pointer}
#modalImg{display:block;max-width:100%;max-height:70vh;margin:0 auto;border-radius:8px}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumbs img{width:84px;height:64px;object-fit:cover;border:2px solid #1a1d28;border-radius:6px;cursor:pointer}
.thumbs img.active{border-color:#35e0ff}
.contact{background:#0b0c10;border-top:1px solid #1a1d25;padding:28px 0}
.contact .socials{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 18px}
.social{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #222631;border-radius:12px;text-decoration:none;color:#var(--ink)}
.social svg{width:18px;height:18px;fill:currentColor;opacity:.9}
.contact-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:10px}
.contact-box h3{margin:0 0 6px;font:800 16px 'Bangers', cursive}
.contact-box p{margin:0;color:var(--muted)}
.site-footer{border-top:1px solid #1a1d25;color:#98a2b3}
.site-footer .wrap{display:flex;align-items:center;gap:8px;justify-content:center;padding:18px}
.site-footer .dot{opacity:.6}