@font-face{font-family:"Guton";src:url("../fonts/Guton-400.woff2") format("woff2");font-weight:400;font-style:normal;}
@font-face{font-family:"Guton";src:url("../fonts/Guton-500.woff2") format("woff2");font-weight:500;font-style:normal;}
@font-face{font-family:"Guton";src:url("../fonts/Guton-600.woff2") format("woff2");font-weight:600;font-style:normal;}
:root{
  --max-width-store:960px;
  --border-radius:8px;
  --font-body:"Guton",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --text-action:#A13DFF;
  --text-primary:#FFFFFF;
  --text-secondary:#818181;
  --text-tertiary:#4B4B4B;
  --text-error:#FF5353;
  --border-primary:#2E2E2E;
  --border-secondary:#2E2E2E;
  --border-action:#A13DFF;
  --border-actionHover:#A13DFF;
  --surface-primary:#121212;
  --surface-secondary:#161616;
  --surface-secondary-hover:#1c1c1c;
  --surface-action1:#A13DFF;
  --surface-action1Hover:#8B2BD9;
  --surface-modal:#171717;
  --surface-information:#A13DFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--surface-primary);color:var(--text-primary);}
body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;}
button{font-family:inherit;background:none;border:none;cursor:pointer;color:inherit;}
ul{list-style:none;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:url("../assets/bg-texture.png") repeat;background-size:378px 635px;opacity:.16;animation:driftBg 90s linear infinite;}
@keyframes driftBg{from{background-position:0 0;}to{background-position:-378px -635px;}}
@media (prefers-reduced-motion: reduce){body::before{animation:none;}}
.site-header,.nav-panel,.hero,.filters,.products-wrap,.site-footer,.announcement{position:relative;z-index:1;}
.announcement{background:var(--surface-information);color:#fff;text-align:center;padding:10px 16px;font-size:13px;font-weight:600;letter-spacing:.2px;animation:flashAnim 2s infinite;}
@keyframes flashAnim{0%,100%{opacity:1;}50%{opacity:.5;}}
@media (prefers-reduced-motion: reduce){.announcement{animation:none;}}
.site-header{width:100%;padding:16px 20px 0;}
.site-header-inner{max-width:var(--max-width-store);margin:0 auto;background:var(--surface-secondary);border:1px solid var(--border-secondary);border-radius:var(--border-radius);padding:12px 24px;display:flex;align-items:center;justify-content:space-between;}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:20px;color:var(--text-action);cursor:pointer;}
.logo img{width:16px;height:auto;}
.header-actions{display:flex;align-items:center;gap:12px;}
.cart{display:flex;align-items:center;gap:8px;color:var(--text-action);font-size:14px;font-weight:400;background:var(--surface-primary);padding:8px 12px;border-radius:var(--border-radius);transition:opacity .15s;}
.cart:hover{opacity:.8;}
.cart svg{flex:none;}
.burger{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius);color:var(--text-action);background:var(--surface-primary);border:1px solid var(--text-action);transition:transform .2s;}
.burger:hover{transform:scale(1.05);}
@keyframes slideInFade{from{transform:translateY(-8px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.nav-panel{display:none;max-width:var(--max-width-store);margin:8px auto 0;padding:0 20px;}
.nav-panel.open{display:block;}
.nav-panel-inner{background:var(--surface-secondary);border:1px solid var(--border-secondary);border-radius:var(--border-radius);padding:12px;display:flex;flex-direction:column;gap:4px;animation:slideInFade .2s ease;}
.nav-panel a{padding:10px 12px;border-radius:var(--border-radius);font-size:14px;text-transform:uppercase;}
.nav-panel a:hover{background:var(--surface-primary);color:var(--text-action);}
.hero{max-width:var(--max-width-store);margin:0 auto;padding:56px 20px 32px;text-align:center;}
.hero h1{font-size:40px;font-weight:600;letter-spacing:-0.5px;color:var(--text-action);}
.hero p{margin-top:10px;color:var(--text-secondary);font-size:14px;font-weight:500;}
.filters{max-width:var(--max-width-store);margin:0 auto;padding:0 20px 32px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.filters .cat-label{font-size:13px;color:var(--text-secondary);text-transform:lowercase;}
.cat-list{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.cat-item{padding:6px 14px;border:1px solid var(--border-secondary);border-radius:var(--border-radius);font-size:14px;text-transform:uppercase;transition:all .25s linear;cursor:pointer;}
.cat-item.active{border-color:var(--surface-action1);color:var(--text-action);}
.products-wrap{max-width:var(--max-width-store);margin:0 auto;padding:0 20px 40px;}
.products-head{display:flex;justify-content:center;margin-bottom:20px;}
.products-head span{font-size:20px;font-weight:600;}
.products-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
.product-card{width:220px;display:flex;flex-direction:column;gap:12px;padding:12px;background:var(--surface-secondary);border:1px solid var(--border-secondary);border-radius:var(--border-radius);overflow:hidden;justify-content:space-between;}
.product-thumb{aspect-ratio:1/1;border-radius:var(--border-radius);background:#191919;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product-thumb svg{width:32px;height:32px;}
.product-name{font-size:16px;font-weight:600;text-align:center;}
.product-stock{text-align:center;font-size:12px;font-weight:600;}
.buy-btn{width:100%;background:var(--surface-action1);color:var(--surface-primary);font-weight:400;font-size:16px;padding:8px 12px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;gap:4px;transition:opacity .15s;}
.buy-btn:hover{opacity:.8;}
.buy-btn:disabled{opacity:.5;pointer-events:none;background:var(--text-tertiary);}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:32px;}
.page-btn{background:var(--surface-secondary);border:1px solid var(--border-secondary);border-radius:var(--border-radius);padding:8px 14px;font-size:13px;color:var(--text-primary);transition:all .2s;}
.page-btn:hover:not(:disabled):not(.active){border-color:var(--border-actionHover);color:var(--text-action);}
.page-btn.active{background:var(--surface-action1);border-color:transparent;color:#fff;}
.page-btn:disabled{opacity:.5;cursor:default;}
.site-footer{max-width:var(--max-width-store);margin:40px auto 24px;padding:0 20px;}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:20px;background:var(--surface-secondary);border-radius:var(--border-radius);padding:24px;}
.footer-links{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;}
.footer-links a{font-size:14px;text-transform:uppercase;color:var(--text-primary);}
.footer-links a:hover{color:var(--text-action);}
.footer-copy{font-size:12px;color:var(--text-secondary);}
.footer-powered{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-action);}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface-modal);border:1px solid var(--border-secondary);border-radius:12px;width:100%;max-width:380px;padding:24px;animation:modalIn .18s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.modal-head h2{font-size:18px;font-weight:700;}
.modal-close{font-size:20px;line-height:1;color:var(--text-secondary);padding:4px;border-radius:6px;}
.modal-close:hover{color:var(--text-primary);background:var(--surface-secondary-hover);}
.modal-desc{color:var(--text-secondary);font-size:14px;margin-bottom:20px;}
.field{margin-bottom:18px;}
.field-label{font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;display:block;}
.variant-select{width:100%;padding:10px 12px;background:var(--surface-primary);border:1px solid var(--border-secondary);border-radius:var(--border-radius);color:var(--text-primary);font-size:14px;}
.qty-row{display:flex;align-items:center;gap:14px;}
.qty-btn{width:34px;height:34px;border:1px solid var(--border-secondary);border-radius:var(--border-radius);font-size:16px;display:flex;align-items:center;justify-content:center;}
.qty-btn:hover{border-color:var(--border-actionHover);color:var(--text-action);}
.qty-value{font-size:16px;font-weight:600;min-width:24px;text-align:center;}
.modal-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--border-secondary);margin-bottom:18px;font-weight:700;font-size:16px;}
.modal-actions{display:flex;flex-direction:column;gap:10px;}
.btn-primary{background:var(--surface-action1);color:#fff;font-weight:700;font-size:14px;padding:12px 0;border-radius:var(--border-radius);}
.btn-primary:hover{opacity:.85;}
.btn-secondary{background:transparent;color:var(--text-action);border:1px solid var(--border-secondary);font-weight:700;font-size:14px;padding:12px 0;border-radius:var(--border-radius);}
.btn-secondary:hover{border-color:var(--border-actionHover);}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--surface-secondary);border:1px solid var(--border-secondary);color:var(--text-primary);padding:12px 20px;border-radius:var(--border-radius);font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;z-index:1100;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (max-width:480px){.hero h1{font-size:30px;}.product-card{width:100%;max-width:300px;}}