/* Neon-Look */
:root {
  --bg: #07060f; --surface: #0f0d1f; --text: #e9e6ff; --muted: #8a84b8; --line: #2a2550;
  --accent: #00f0ff; --accent-text: #05040c; --hot: #ff2bd6; --deal: #ff2bd6; --deal-text: #fff;
  --radius: 0px; --gap: 22px; --cols: 3; --card-ratio: 4 / 5; --max: 1320px;
  --font: 'Rajdhani', system-ui, sans-serif; --font-head: 'Orbitron', sans-serif; --mono: 'Share Tech Mono', monospace;
  --story-ring: linear-gradient(135deg, var(--accent), var(--hot));
  --cut: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  --cut-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  --cg-bg-theme: #08061a; --cg-fg-theme: #00f0ff; --cg-dim-theme: #3b2f7a;
  color-scheme: dark;
}
body { font-size: 17px; font-weight: 500;
  background:
    linear-gradient(180deg, rgba(255, 43, 214, .14), transparent 420px),
    linear-gradient(rgba(0, 240, 255, .06) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(0, 240, 255, .06) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--bg); background-attachment: fixed; }
::selection { background: var(--hot); color: #fff; }

.site-header { padding: 22px 24px; }
.shop-name { position: relative; font-family: var(--font-head); font-weight: 900; font-size: 2rem; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 12px rgba(0, 240, 255, .7); }
/* Glitch-Effekt */
.shop-name::before, .shop-name::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; }
.shop-name::before { color: var(--hot); transform: translate(2px, 0); clip-path: inset(0 0 60% 0); animation: glitch 3.2s infinite steps(1); mix-blend-mode: screen; }
.shop-name::after { color: var(--accent); transform: translate(-2px, 0); clip-path: inset(55% 0 0 0); animation: glitch 2.7s infinite reverse steps(1); mix-blend-mode: screen; }
.tagline { font-family: var(--mono); color: var(--hot); }
.main-nav a { font-family: var(--font-head); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.main-nav a:hover { color: var(--accent); }
.cart-btn { font-family: var(--font-head); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; clip-path: var(--cut-sm); background: linear-gradient(90deg, var(--accent), var(--hot)); color: #05040c; font-weight: 700; }
.badge { background: #05040c; color: var(--accent); }

.ring { padding: 3px; }
.story-cap { font-family: var(--mono); }

.section-head h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; letter-spacing: .06em;
  background: linear-gradient(90deg, #fff, var(--accent) 60%, var(--hot)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chip { font-family: var(--mono); border-radius: 0; clip-path: var(--cut-sm); border-color: var(--line); background: var(--surface); }
.chip.on { background: var(--hot); border-color: var(--hot); color: #fff; }

.card { clip-path: var(--cut); background: linear-gradient(160deg, var(--surface), #0a0818); position: relative; transition: transform .2s; }
.card::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; z-index: 1; clip-path: var(--cut); }
.card:hover { transform: translateY(-3px); }
.card:hover::before { border-color: var(--accent); box-shadow: inset 0 0 24px rgba(0, 240, 255, .25); }
.card-media img { transition: transform .5s; } .card:hover .card-media img { transform: scale(1.05); }
.card-cat { font-family: var(--mono); color: var(--hot); }
.card-title { font-family: var(--font-head); font-size: 1rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.price { font-family: var(--mono); font-size: 1.2rem; color: var(--accent); text-shadow: 0 0 10px rgba(0, 240, 255, .6); font-weight: 400; }
.deal { border-radius: 0; clip-path: var(--cut-sm); font-family: var(--mono); padding: 3px 10px; }
.has-video { border-radius: 0; background: var(--hot); clip-path: var(--cut-sm); }

.btn { border-radius: 0; clip-path: var(--cut-sm); font-family: var(--font-head); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; border-color: var(--accent); color: var(--accent); }
.btn.primary, .btn.add:hover { background: linear-gradient(90deg, var(--accent), var(--hot)); color: #05040c; border-color: transparent; font-weight: 700; }
input, textarea, select { background: rgba(8, 6, 26, .8); border-color: var(--line); border-radius: 0; font-family: var(--mono); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(0, 240, 255, .3); }

.modal, .drawer { background: #0a0818; color: var(--text); }
.drawer { border-left: 2px solid var(--hot); box-shadow: -10px 0 40px rgba(255, 43, 214, .25); }
.drawer-head h2, .pd-info h2 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; }
.modal { border: 1px solid var(--accent); box-shadow: 0 0 40px rgba(0, 240, 255, .25); }
.offer { border-style: solid; border-color: var(--hot); background: rgba(255, 43, 214, .07); }
.price.big { font-size: 2rem; }
.news-item { clip-path: var(--cut); background: var(--surface); }
.news-item time { font-family: var(--mono); color: var(--hot); }
.news-item h3 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.site-footer { border-top: 1px solid var(--line); font-family: var(--mono); }
.foot-name { font-family: var(--font-head); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

@keyframes glitch {
  0%, 86%, 100% { transform: translate(0); opacity: 0; }
  87% { transform: translate(3px, -1px); opacity: 1; }
  90% { transform: translate(-3px, 1px); opacity: 1; }
  93% { transform: translate(2px, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .shop-name::before, .shop-name::after { animation: none; display: none; } }
@media (max-width: 560px) { .site-header { padding: 14px 16px; } .shop-name { font-size: 1.5rem; } }