:root {
  --color-bg: #050505;
  --color-surface: #0b0b0b;
  --color-surface-2: #151515;
  --color-text: #f5f5f1;
  --color-text-muted: #b7b5a8;
  --color-text-dim: #77766a;
  --color-accent: #fff000;
  --color-accent-dim: #514b16;
  --border-subtle: rgba(81, 75, 22, 0.82);
  --focus-ring: rgba(255, 240, 0, 0.2);
  --radius-control: 2px;
  --radius-panel: 4px;
  --cut-corner-size: 10px;
  --bg: var(--color-bg);
  --panel: var(--color-surface);
  --panel-strong: var(--color-surface-2);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --dim: var(--color-text-dim);
  --line: var(--border-subtle);
  --yellow: var(--color-accent);
  --yellow-hot: var(--color-accent);
  --white-hot: var(--color-text);
  --cyan: var(--yellow);
  --cyan-hot: var(--yellow-hot);
  --pink: var(--yellow);
  --green: var(--yellow-hot);
  --radius: var(--radius-panel);
  --font-display: "Exo 2", sans-serif;
  --font-body: "IBM Plex Sans", sans-serif;
  --font-technical: "IBM Plex Mono", monospace;
  --body: var(--font-body);
  --mono: var(--font-technical);
  --display: var(--font-display);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { position: relative; min-width: 320px; max-width: 100%; margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--body); font-size: 16px; line-height: 1.5; isolation: isolate; overflow-x: hidden; }
body::before { position: fixed; inset: 0; z-index: -2; content: ""; pointer-events: none; opacity: 0.18; background-image: linear-gradient(rgba(226, 235, 37, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 235, 37, 0.055) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 68%); }
body::after { position: fixed; inset: 0; z-index: -3; content: ""; pointer-events: none; background: radial-gradient(circle at 8% 0, rgba(255, 235, 41, 0.13), transparent 33%), radial-gradient(circle at 94% 35%, rgba(226, 235, 37, 0.065), transparent 30%); }
.cyber-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: paint; background: #050505; }
.cyber-background__wash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 25%, transparent 20%, rgba(0,0,0,0.32) 76%, rgba(0,0,0,0.7)), linear-gradient(180deg, rgba(226,235,37,0.025), transparent 38%, rgba(0,0,0,0.42)); }
.cyber-background__panel { position: absolute; top: -18vh; width: clamp(150px, 17vw, 300px); height: 140vh; opacity: 0.82; overflow: hidden; background: linear-gradient(107deg, #020202 2%, #11110b 45%, #070707 64%, #020202 100%); border: 1px solid rgba(226,235,37,0.2); box-shadow: 16px 20px 34px rgba(0,0,0,0.8), inset 3px 2px 0 rgba(255,255,255,0.035), inset -12px -8px 20px rgba(0,0,0,0.88); clip-path: polygon(11% 0, 100% 0, 88% 13%, 100% 18%, 87% 43%, 100% 49%, 86% 76%, 100% 82%, 85% 100%, 0 100%, 12% 82%, 0 76%, 14% 48%, 0 42%, 13% 18%, 0 12%); }
.cyber-background__panel::before { position: absolute; inset: 0; content: ""; opacity: 0.5; background: linear-gradient(103deg, transparent 0 38%, rgba(226,235,37,0.08) 38.3% 38.7%, transparent 39.2% 70%, rgba(255,255,255,0.025) 70.4% 70.8%, transparent 71.2%); }
.cyber-background__panel::after { position: absolute; inset: 10% 12%; content: ""; opacity: 0.28; border-left: 1px solid rgba(226,235,37,0.18); border-right: 1px solid rgba(255,255,255,0.035); transform: skewY(-9deg); }
.cyber-background__panel i { position: absolute; top: 8%; left: 38%; width: 3px; height: 22%; display: block; background: linear-gradient(180deg, transparent, #687300 14%, var(--yellow-hot) 38%, #fff 50%, var(--yellow-hot) 67%, transparent); box-shadow: 0 0 8px var(--yellow), 0 0 26px rgba(226,235,37,0.6); transform: rotate(4deg); animation: cyber-channel-pulse 6.8s ease-in-out infinite; }
.cyber-background__panel--a { left: -8%; transform: rotate(8deg) scale(1.08); }
.cyber-background__panel--a i { top: 22%; height: 15%; animation-delay: -1.4s; }
.cyber-background__panel--b { left: 10%; transform: rotate(-7deg) scale(0.96); opacity: 0.67; }
.cyber-background__panel--b i { top: 4%; left: 54%; height: 28%; animation-delay: -4.2s; }
.cyber-background__panel--c { left: 29%; transform: rotate(6deg) scale(1.04); opacity: 0.77; }
.cyber-background__panel--c i { top: 42%; left: 32%; height: 20%; animation-delay: -2.6s; }
.cyber-background__panel--d { left: 47%; transform: rotate(-8deg) scale(0.98); opacity: 0.63; }
.cyber-background__panel--d i { top: 10%; left: 61%; height: 18%; animation-delay: -5.6s; }
.cyber-background__panel--e { left: 65%; transform: rotate(7deg) scale(1.05); opacity: 0.8; }
.cyber-background__panel--e i { top: 58%; left: 36%; height: 16%; animation-delay: -0.8s; }
.cyber-background__panel--f { left: 82%; transform: rotate(-6deg) scale(0.95); opacity: 0.7; }
.cyber-background__panel--f i { top: 30%; left: 56%; height: 24%; animation-delay: -3.4s; }
.cyber-background__panel--g { left: 101%; transform: rotate(8deg) scale(1.05); opacity: 0.76; }
.cyber-background__panel--g i { top: 68%; left: 35%; height: 14%; animation-delay: -6.2s; }
.cyber-background__arrow { position: absolute; z-index: 2; color: var(--yellow-hot); font: 700 clamp(22px, 2.6vw, 40px)/0.8 var(--mono); letter-spacing: -0.22em; text-shadow: 0 0 3px var(--yellow-hot), 0 0 10px rgba(226,235,37,0.36); transform-origin: center; animation: cyber-arrow-glow var(--arrow-duration, 5.8s) ease-in-out var(--arrow-delay, 0s) infinite; }
.cyber-background__arrow--a { top: 12%; left: 10%; --arrow-angle: 8deg; --arrow-duration: 5.9s; --arrow-delay: -1.1s; transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--b { top: 36%; left: 20%; --arrow-angle: 188deg; --arrow-duration: 7.3s; --arrow-delay: -4.9s; transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--c { top: 72%; left: 34%; --arrow-angle: 6deg; --arrow-duration: 6.7s; --arrow-delay: -2.5s; transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--d { top: 18%; left: 58%; --arrow-angle: 186deg; --arrow-duration: 8.2s; --arrow-delay: -6.2s; transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--e { top: 62%; left: 69%; --arrow-angle: 8deg; --arrow-duration: 6.4s; --arrow-delay: -3.2s; transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--f { top: 44%; left: 91%; --arrow-angle: 188deg; --arrow-duration: 7.7s; --arrow-delay: -1.9s; transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--g { top: 8%; left: 39%; --arrow-angle: 188deg; --arrow-duration: 7.1s; --arrow-delay: -4.1s; font-size: clamp(18px, 2vw, 31px); transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--h { top: 53%; left: 47%; --arrow-angle: 8deg; --arrow-duration: 6.9s; --arrow-delay: -0.6s; font-size: clamp(19px, 2.1vw, 33px); transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--i { top: 83%; left: 13%; --arrow-angle: 186deg; --arrow-duration: 8.4s; --arrow-delay: -5.1s; font-size: clamp(17px, 1.9vw, 29px); transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--j { top: 87%; left: 82%; --arrow-angle: 8deg; --arrow-duration: 7.8s; --arrow-delay: -2.7s; font-size: clamp(18px, 2vw, 31px); transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--k { top: 28%; left: 75%; --arrow-angle: 188deg; --arrow-duration: 6.6s; --arrow-delay: -1.5s; font-size: clamp(18px, 2vw, 31px); transform: rotate(var(--arrow-angle)); }
.cyber-background__arrow--l { top: 76%; left: 94%; --arrow-angle: 186deg; --arrow-duration: 8.8s; --arrow-delay: -6.8s; font-size: clamp(16px, 1.8vw, 28px); transform: rotate(var(--arrow-angle)); }
.cyber-background__indicator { position: absolute; width: 5px; height: 5px; background: var(--yellow); box-shadow: 0 0 10px var(--yellow), 0 0 24px rgba(226,235,37,0.55); animation: cyber-indicator-blink 4.7s ease-in-out infinite; }
.cyber-background__indicator--a { top: 28%; left: 5%; animation-delay: -2s; }
.cyber-background__indicator--b { top: 76%; left: 56%; animation-delay: -3.6s; }
.cyber-background__indicator--c { top: 18%; left: 83%; animation-delay: -0.7s; }
.cyber-background.is-page-hidden *, .cyber-background.is-page-hidden { animation-play-state: paused !important; }
@keyframes cyber-channel-pulse { 0%, 100% { opacity: 0.12; filter: brightness(0.7); } 18% { opacity: 0.42; filter: brightness(1); } 34% { opacity: 1; filter: brightness(1.5); } 52% { opacity: 0.56; filter: brightness(1.12); } 73% { opacity: 0.18; filter: brightness(0.8); } }
@keyframes cyber-arrow-glow { 0%, 100% { opacity: 0.2; text-shadow: 0 0 3px var(--yellow-hot), 0 0 9px rgba(226,235,37,0.3); } 28% { opacity: 0.34; } 44% { opacity: 0.72; text-shadow: 0 0 5px var(--yellow-hot), 0 0 16px rgba(226,235,37,0.54); } 58% { opacity: 0.48; } 76% { opacity: 0.25; text-shadow: 0 0 3px var(--yellow-hot), 0 0 10px rgba(226,235,37,0.34); } }
@keyframes cyber-indicator-blink { 0%, 100% { opacity: 0.12; transform: scale(0.6); } 27% { opacity: 0.9; transform: scale(1); } 41% { opacity: 0.35; } 54% { opacity: 0.82; } 72% { opacity: 0.14; transform: scale(0.75); } }
.site-header, main, .site-footer { position: relative; z-index: 1; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; }
::selection { color: var(--bg); background: var(--cyan); }
.top-line { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: 2px; background: linear-gradient(90deg, transparent, var(--yellow) 20%, var(--white-hot) 80%, transparent); box-shadow: 0 0 14px rgba(226, 235, 37, 0.55); }
.page-width { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 34px; min-height: 76px; padding: 0 max(24px, calc((100vw - 1180px) / 2)); background: rgba(3, 3, 3, 0.86); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.48), inset 0 -1px rgba(255, 255, 255, 0.04); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font: 700 18px/1 var(--display); letter-spacing: 0.07em; }
.brand-mark { position: relative; display: inline-block; width: 25px; height: 25px; overflow: hidden; background: var(--yellow-hot); box-shadow: 0 0 10px rgba(226,235,37,0.7), 3px 4px 0 rgba(0,0,0,0.7); clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.brand-mark::before { position: absolute; inset: 3px; content: ""; background: #050505; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.brand-mark::after { position: absolute; top: 8px; left: 8px; width: 10px; height: 3px; content: ""; background: var(--yellow-hot); box-shadow: 0 5px 0 var(--yellow-hot); transform: skewX(-24deg); }
.brand-mark i { position: absolute; right: 4px; bottom: 4px; z-index: 1; width: 4px; height: 4px; background: #050505; border-radius: 50%; box-shadow: 0 0 0 2px var(--yellow-hot); }
.brand-word { color: var(--text); }
.brand-cursor { color: var(--yellow-hot); text-shadow: 0 0 14px rgba(226,235,37,0.72); }
.brand--small { font-size: 14px; }
.brand--small .brand-mark { width: 19px; height: 19px; }
.main-nav { display: flex; flex: 1; min-width: 0; align-items: center; gap: 26px; }
.nav-link, .back-link { position: relative; display: inline-flex; min-height: 26px; align-items: center; color: var(--muted); font: 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; transition: color 180ms ease; }
.nav-link::after { position: absolute; right: 0; bottom: -10px; left: 0; height: 1px; content: ""; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
.nav-link:hover, .nav-link.is-active, .back-link:hover { color: var(--text); }
.nav-link.is-active::after, .nav-link:hover::after { transform: scaleX(1); }
.catalog-menu-toggle { padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
.catalog-menu-toggle[aria-expanded="true"]::after { transform: scaleX(1); }
.catalog-menu-caret { display: inline-block; margin-left: 3px; color: var(--yellow); font: 14px/1 var(--sans); transition: transform 180ms ease; }
.catalog-menu-toggle[aria-expanded="true"] .catalog-menu-caret { transform: rotate(180deg); }
.nav-catalog { position: relative; display: flex; flex: 0 0 auto; align-items: center; }
.catalog-dropdown { position: absolute; top: calc(100% + 22px); left: -18px; z-index: 30; display: grid; grid-template-columns: 0.85fr 1.3fr 0.9fr; gap: 18px; width: min(760px, calc(100vw - 48px)); padding: 19px; background: rgba(5,5,5,0.98); border: 1px solid var(--border-subtle); box-shadow: 0 18px 38px rgba(0,0,0,0.8), inset 0 1px rgba(255,255,255,0.05), 0 0 24px rgba(255,240,0,0.08); backdrop-filter: blur(18px); }
.catalog-dropdown[hidden] { display: none !important; }
.catalog-dropdown.catalog-dropdown--portal { position: fixed; top: var(--catalog-menu-top); left: var(--catalog-menu-left); right: auto; }
.catalog-dropdown-group { min-width: 0; padding: 4px 10px 8px; border-left: 1px solid rgba(255,240,0,0.16); }
.catalog-dropdown-group h2 { margin: 0 0 12px; color: var(--yellow); font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.catalog-dropdown-group h3 { margin: 14px 0 5px; color: var(--dim); font: 600 10px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.catalog-dropdown-group a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px; color: var(--text); border: 1px solid transparent; font-size: 13px; line-height: 1.3; transition: color 160ms ease, background 160ms ease, border-color 160ms ease; }
.catalog-dropdown-group a.catalog-dropdown-model { margin-left: 10px; padding-left: 16px; border-left-color: rgba(255,240,0,0.16); }
  .catalog-dropdown-group a span { color: var(--dim); font-size: 10px; text-align: right; }
  .catalog-dropdown-group a .soon-label { color: var(--yellow); font: 500 9px var(--mono); white-space: nowrap; }
.catalog-dropdown-group a:hover, .catalog-dropdown-group a:focus-visible { color: var(--yellow); background: rgba(255,240,0,0.055); border-color: rgba(255,240,0,0.25); outline: none; }
.catalog-dropdown-group a:focus-visible { box-shadow: 0 0 0 2px rgba(255,240,0,0.2); }
.header-mark { display: inline-flex; min-height: 26px; align-items: center; color: var(--dim); font: 10px/1 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.header-mark span { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }

.intro { position: relative; display: block; margin-top: 0; padding: 18px 24px 24px; background: linear-gradient(150deg, rgba(11,11,11,0.97), rgba(5,5,5,0.97)); border: 1px solid var(--border-subtle); border-top: 0; border-radius: 0 0 var(--radius-panel) var(--radius-panel); box-shadow: 12px 16px 28px rgba(0,0,0,0.62), inset 0 -1px 0 rgba(255,255,255,0.025), inset 0 -14px 28px rgba(0,0,0,0.45); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-corner-size)), calc(100% - var(--cut-corner-size)) 100%, 0 100%); }
.intro::after { display: block; width: 96px; height: 3px; margin-top: 20px; content: ""; background: var(--yellow-hot); box-shadow: 0 0 9px rgba(226,235,37,0.5), 0 0 22px rgba(226,235,37,0.18); }
.overline { margin: 0 0 20px; color: var(--yellow-hot); font: 700 11px var(--mono); letter-spacing: 0.12em; }
.intro h1 { max-width: 700px; margin: 0; color: var(--text); font-family: var(--display); font-size: clamp(44px, 5.4vw, 72px); font-weight: 700; line-height: 1.02; letter-spacing: -0.055em; }
.intro h1 em { color: var(--yellow-hot); font-style: normal; text-shadow: 0 0 24px rgba(226, 235, 37, 0.18); }
.intro-text { max-width: 900px; margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.7vw, 21px); line-height: 1.4; }
.intro-photo { height: 300px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); transform: rotate(2deg); box-shadow: 14px 16px 30px rgba(0,0,0,0.65), inset 2px 2px 0 rgba(255,255,255,0.05), inset -4px -5px 16px rgba(0,0,0,0.8), 0 0 22px rgba(226,235,37,0.08); transition: transform 320ms var(--ease), box-shadow 320ms ease; }
.intro-photo:hover { transform: rotate(0) translateY(-4px); box-shadow: 18px 22px 42px rgba(0,0,0,0.72), inset 2px 2px 0 rgba(255,255,255,0.07), inset -4px -5px 16px rgba(0,0,0,0.8), 0 0 30px rgba(226,235,37,0.2); }
.intro-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; filter: saturate(0.88) contrast(1.05); }

.catalog { padding-top: 112px; scroll-margin-top: 92px; }
.catalog[aria-busy="true"] [data-catalog-items] { opacity: 0.58; pointer-events: none; transition: opacity 140ms ease; }
.catalog [data-catalog-items] { transition: opacity 140ms ease; }
.catalog-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.catalog h2 { margin: 0; font-family: var(--display); font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -0.05em; }
.search-form { width: min(300px, 100%); }
.search-box { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 13px; background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); box-shadow: inset 4px 4px 9px rgba(0,0,0,0.75), inset -3px -3px 8px rgba(255,255,255,0.035), 0 5px 16px rgba(0,0,0,0.25); transition: border-color 180ms ease, box-shadow 180ms ease; }
.search-box:focus-within { border-color: var(--color-accent); box-shadow: inset 4px 4px 9px rgba(0,0,0,0.75), inset -3px -3px 8px rgba(255,255,255,0.04), 0 0 0 3px var(--focus-ring); }
.search-box span { color: var(--cyan); font-size: 20px; line-height: 1; }
.search-box input { width: 100%; min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 14px; }
.search-box input::placeholder { color: var(--dim); }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 24px 0; }
.filters { display: flex; gap: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); box-shadow: inset 3px 3px 8px rgba(0,0,0,0.68), inset -2px -2px 7px rgba(255,255,255,0.03); }
.filter { padding: 9px 14px; color: var(--dim); border-right: 1px solid var(--border-subtle); border-radius: 0; font: 600 11px var(--mono); transition: 160ms ease; }
.filter:last-child { border-right: 0; }
.filter:hover { color: var(--text); }
.filter.is-active { color: var(--bg); background: var(--yellow); box-shadow: 0 0 16px rgba(226,235,37,0.2), inset 0 1px rgba(255,255,255,0.45); }
.result-count { color: var(--dim); font: 10px var(--mono); }
.catalog-filter-form { margin: -5px 0 24px; padding: 14px; background: rgba(10,10,10,0.82); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); box-shadow: inset 0 1px rgba(255,255,255,0.025); }
.catalog-filter-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; }
.catalog-filter-field { display: grid; min-width: 0; gap: 7px; color: var(--dim); font: 600 10px var(--mono); letter-spacing: 0.04em; }
.catalog-filter-field[hidden] { display: none !important; }
.catalog-filter-field select, .catalog-filter-field input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 0 10px; color: var(--text); background: var(--color-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); font: 12px var(--sans); }
.catalog-filter-field select:focus, .catalog-filter-field input:focus { border-color: var(--yellow); outline: 2px solid rgba(226,235,37,0.15); }
.catalog-filter-field select option { color: var(--text); background: var(--color-surface); }
.catalog-filter-field select.native-filter-select { display: none; }
.filter-select { position: relative; display: block; }
.filter-select.is-open { z-index: 12; }
.filter-select__trigger { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px; color: var(--text); background: linear-gradient(145deg, #10100d, #070707); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); box-shadow: inset 2px 2px 7px rgba(255,255,255,0.025), inset -4px -4px 10px rgba(0,0,0,0.7); cursor: pointer; font: 600 12px var(--sans); text-align: left; }
.filter-select__trigger.is-placeholder { color: var(--dim); }
.filter-select__caret { color: var(--yellow); font: 18px/1 var(--sans); transition: transform 160ms ease; }
.filter-select.is-open .filter-select__trigger { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(226,235,37,0.14), inset 2px 2px 7px rgba(255,255,255,0.025), inset -4px -4px 10px rgba(0,0,0,0.7); }
.filter-select.is-open .filter-select__caret { transform: rotate(180deg); }
.filter-select__options { position: absolute; z-index: 1; top: calc(100% + 6px); right: 0; left: 0; display: none; max-height: 260px; overflow-y: auto; background: #0a0a08; border: 1px solid var(--yellow); box-shadow: 0 14px 30px rgba(0,0,0,0.78), 0 0 18px rgba(226,235,37,0.1); }
.filter-select.is-open .filter-select__options { display: grid; }
.filter-select__option { display: flex; min-height: 40px; align-items: center; padding: 8px 10px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid rgba(226,235,37,0.14); cursor: pointer; font: 600 12px/1.25 var(--sans); text-align: left; }
.filter-select__option:last-child { border-bottom: 0; }
.filter-select__option:hover, .filter-select__option.is-selected, .filter-select__option:active { color: var(--bg); background: var(--yellow); }
.price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.catalog-filter-actions { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.filter-apply { min-height: 40px; padding: 0 12px; color: var(--bg); background: var(--yellow); border: 1px solid var(--yellow); border-radius: var(--radius-control); cursor: pointer; font: 700 10px var(--mono); white-space: nowrap; transition: box-shadow 160ms ease, transform 160ms ease; }
.filter-apply:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(226,235,37,0.25); }
.filter-reset { color: var(--dim); font: 10px var(--mono); white-space: nowrap; transition: color 160ms ease; }
.filter-reset:hover { color: var(--text); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.catalog-page-link { display: block; width: fit-content; margin: 26px auto 0; padding: 12px 20px; color: var(--text); border: 1px solid var(--color-accent-dim); background: rgba(0,0,0,.45); font: 600 12px var(--mono); text-decoration: none; }
.catalog-page-link:hover, .catalog-page-link:focus-visible { color: var(--color-accent); border-color: var(--color-accent); }
.catalog-page-link--previous { margin-right: auto; margin-left: 0; }
.product-card { display: flex; flex-direction: column; min-height: 362px; overflow: hidden; background: linear-gradient(155deg, var(--color-surface-2), var(--color-bg) 70%); border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); box-shadow: 9px 11px 22px rgba(0,0,0,0.65), inset 1px 1px 0 rgba(255,255,255,0.055), inset -6px -8px 18px rgba(0,0,0,0.7); transition: transform 300ms var(--ease), border-color 220ms ease, box-shadow 300ms ease; }
.product-card:hover { transform: translateY(-6px); border-color: rgba(226,235,37,0.72); box-shadow: 12px 18px 32px rgba(0, 0, 0, 0.75), inset 1px 1px 0 rgba(255,255,255,0.08), inset -6px -8px 18px rgba(0,0,0,0.7), 0 0 28px rgba(226,235,37,0.16); }
.product-image { position: relative; overflow: hidden; background: transparent; }
.product-image img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; filter: saturate(0.88) contrast(1.04); transition: filter 300ms ease; }
.product-card:hover .product-image img { filter: saturate(1) contrast(1.06); }
.product-image .cover-placeholder { min-height: 175px; }
.cover-placeholder { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 72% 22%, rgba(226,235,37,0.36), transparent 30%), linear-gradient(145deg, #282812, #090909 70%); }
.cover-placeholder::before { position: absolute; inset: 0; content: ""; opacity: 0.46; background: linear-gradient(112deg, transparent 43%, rgba(226,235,37,0.2) 44%, transparent 46%); }
.cover-placeholder span { position: relative; color: rgba(245,245,241,0.82); font: 700 42px var(--display); letter-spacing: -0.08em; text-shadow: 0 0 28px rgba(255,240,0,0.18); }
.cover-placeholder--large span { font-size: 84px; }
.product-content { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.product-label { color: var(--dim); font: 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.product-card h3 { margin: 9px 0 0; color: var(--text); font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.16; letter-spacing: -0.025em; }
.product-note, .product-languages { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.product-note--gift { width: fit-content; max-width: 100%; padding: 6px 10px; color: #171500; background: linear-gradient(120deg, #fff45a, #e6ce00); border: 1px solid rgba(255,244,90,0.9); border-radius: 2px; box-shadow: 0 0 15px rgba(255,232,0,0.2); font-weight: 800; }
.product-languages { color: var(--dim); }
.product-footer { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.product-footer strong { color: var(--yellow); font: 700 19px var(--mono); letter-spacing: -0.06em; text-shadow: 0 0 16px rgba(226,235,37,0.16); }
.open-card { color: var(--cyan); font: 10px var(--mono); transition: color 160ms ease; }
.product-card:hover .open-card { color: var(--text); }
.empty { position: relative; padding: 42px 20px; color: var(--muted); background: var(--color-surface); border: 1px solid var(--border-subtle); border-left: 3px solid var(--color-accent-dim); border-radius: var(--radius-panel); text-align: center; box-shadow: inset 0 -14px 24px rgba(0,0,0,0.38); }

.product-page { padding-top: 22px; padding-bottom: 76px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 32px; color: var(--yellow); font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumbs a { transition: color 180ms ease, text-shadow 180ms ease; }
.breadcrumbs a:hover { color: var(--text); text-shadow: 0 0 12px rgba(255,240,0,0.5); }
.breadcrumbs span { color: var(--yellow); opacity: 0.62; }
.breadcrumbs strong { max-width: min(440px, 70vw); overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.product-hero { display: grid; grid-template-columns: minmax(270px, 0.85fr) minmax(350px, 1.3fr) minmax(238px, 0.72fr); align-items: stretch; gap: 26px; margin-top: 22px; }
.product-gallery { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-self: start; align-items: start; gap: 12px; min-width: 0; }
.product-cover-frame { position: relative; min-width: 0; overflow: hidden; background: #050505; border: 2px solid var(--yellow); border-radius: 3px; box-shadow: 0 0 0 2px rgba(5,5,5,0.92), 0 0 0 3px rgba(226,235,37,0.4), 0 0 22px rgba(226,235,37,0.18), 8px 12px 28px rgba(0,0,0,0.66); }
.product-cover-trigger { display: block; width: 100%; padding: 0; overflow: hidden; background: #050505; border: 0; cursor: zoom-in; line-height: 0; }
.product-cover-trigger img { display: block; width: 100%; height: auto; filter: saturate(0.92) contrast(1.04); transition: filter 250ms ease; }
.product-cover-trigger:hover img { filter: saturate(1) contrast(1.08); }
.product-cover-frame > .cover-placeholder--large { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.gallery-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gallery-thumb { display: grid; width: 58px; height: 76px; padding: 0; overflow: hidden; place-items: center; background: #0a0a08; border: 1px solid rgba(255,240,0,0.22); box-shadow: inset 2px 2px 8px rgba(255,255,255,0.03), 4px 5px 12px rgba(0,0,0,0.55); cursor: pointer; clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.gallery-thumb:hover { transform: translateY(-2px); }
.gallery-thumb.is-active { border-color: var(--yellow); box-shadow: 0 0 14px rgba(255,240,0,0.23), inset 2px 2px 8px rgba(255,255,255,0.04); }
.gallery-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-signal { display: grid; gap: 5px; width: 58px; padding: 11px 12px; border: 1px solid rgba(255,240,0,0.16); background: rgba(5,5,5,0.72); }
.gallery-signal span { display: block; height: 3px; background: var(--yellow); box-shadow: 0 0 8px rgba(255,240,0,0.48); opacity: 0.6; }
.gallery-signal span:nth-child(2) { width: 72%; opacity: 0.32; }
.gallery-signal span:nth-child(3) { width: 48%; opacity: 0.82; }
.photo-lightbox:not([open]) { display: none; }
.photo-lightbox[open] { display: grid; place-items: center; }
.photo-lightbox { position: fixed; inset: 0; z-index: 1000; box-sizing: border-box; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; color: var(--text); background: transparent; border: 0; }
.photo-lightbox::backdrop { background: rgba(0,0,0,0.94); backdrop-filter: blur(5px); }
.photo-lightbox-stage { position: relative; display: grid; box-sizing: border-box; width: 100%; height: 100%; place-items: center; }
.photo-lightbox-figure { display: flex; width: fit-content; flex-direction: column; align-items: center; gap: 10px; max-width: calc(100vw - 112px); max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); margin: 0; }
.photo-lightbox-image { display: block; width: auto; height: auto; max-width: min(calc(100vw - 112px), 1600px); max-height: calc(100vh - 132px); max-height: calc(100dvh - 132px); min-width: 0; min-height: 0; object-fit: contain; border: 2px solid var(--yellow); box-shadow: 0 0 16px rgba(226,235,37,0.18); }
.photo-lightbox-caption { min-height: 1.2em; color: var(--text); font: 500 13px/1.2 var(--mono); text-align: center; text-shadow: 0 0 12px rgba(226,235,37,0.2); }
.photo-lightbox-arrow, .photo-lightbox-close { position: absolute; z-index: 2; display: grid; padding: 0; place-items: center; color: var(--yellow); background: transparent; border: 0; cursor: pointer; transition: color 160ms ease, filter 160ms ease, transform 160ms ease; }
.photo-lightbox-arrow[hidden] { display: none; }
.photo-lightbox-arrow { top: 50%; width: 58px; height: 74px; transform: translateY(-50%); }
.photo-lightbox-arrow--previous { left: 3%; }
.photo-lightbox-arrow--next { right: 3%; }
.photo-lightbox-arrow svg { display: block; width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 4; filter: drop-shadow(0 0 8px rgba(226,235,37,0.34)); }
.photo-lightbox-arrow:hover { color: #fff; filter: drop-shadow(0 0 10px rgba(226,235,37,0.5)); }
.photo-lightbox-arrow--previous:hover { transform: translate(-3px, -50%); }
.photo-lightbox-arrow--next:hover { transform: translate(3px, -50%); }
.photo-lightbox-close { top: 20px; right: 24px; width: 42px; height: 42px; color: var(--yellow); font: 300 40px/1 var(--sans); }
.photo-lightbox-close:hover { color: #fff; transform: rotate(90deg); }
.photo-lightbox button:focus { outline: none; }
.photo-lightbox button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.product-summary { min-width: 0; padding: 5px 0 0; }
.detail-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.platform-tag, .code-tag { display: inline-flex; align-items: center; min-height: 29px; padding: 4px 12px; font: 600 12px var(--mono); letter-spacing: 0.04em; }
.platform-tag { color: var(--bg); background: var(--yellow); box-shadow: 0 0 15px rgba(255,240,0,0.18); }
.code-tag { color: var(--muted); border: 1px solid var(--border-subtle); background: rgba(11,11,11,0.7); }
.product-summary h1 { max-width: 650px; margin: 16px 0 0; color: var(--text); font-family: var(--display); font-size: clamp(36px, 4.3vw, 62px); line-height: 0.98; letter-spacing: -0.06em; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.detail-tags span { padding: 5px 11px; color: var(--text); border: 1px solid var(--border-subtle); background: rgba(8,8,8,0.78); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); font: 600 11px var(--mono); }
.detail-tags span:first-child { color: var(--bg); background: var(--yellow); border-color: var(--yellow); }
.detail-tags .detail-stock-tag { display: inline-flex; align-items: center; min-height: 31px; padding: 6px 13px; color: var(--bg); border-color: var(--yellow); background: var(--yellow); box-shadow: 0 0 16px rgba(255,240,0,0.2); font-weight: 800; }
.detail-tags .detail-stock-tag--sold { color: #ff9d42; border-color: rgba(255,157,66,0.55); background: rgba(164,69,23,0.2); box-shadow: 0 0 14px rgba(255,120,36,0.1); }
.detail-tags .detail-stock-tag--reserved { color: #b6caff; border-color: rgba(155,188,255,0.48); background: rgba(80,130,255,0.14); box-shadow: 0 0 14px rgba(80,130,255,0.1); }
.detail-lead { max-width: 630px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.42; }
.detail-facts { margin: 28px 0 0; border-top: 1px solid rgba(183,181,168,0.2); }
.detail-facts > div { display: grid; grid-template-columns: minmax(120px, 0.72fr) 1.28fr; gap: 18px; padding: 12px 8px; border-bottom: 1px solid rgba(183,181,168,0.2); }
.detail-facts dt, .detail-facts dd { margin: 0; }
.detail-facts dt { color: var(--muted); font-size: 15px; }
.detail-facts dd { color: var(--text); font-size: 15px; font-weight: 500; }
.purchase-panel { position: relative; align-self: start; min-height: 358px; padding: 26px 24px 24px; overflow: hidden; background: linear-gradient(145deg, rgba(19,19,8,0.96), rgba(5,5,5,0.97)); border: 1px solid rgba(255,240,0,0.38); box-shadow: 11px 15px 28px rgba(0,0,0,0.72), inset 1px 1px 0 rgba(255,255,255,0.05), inset -8px -10px 22px rgba(0,0,0,0.7), 0 0 25px rgba(255,240,0,0.06); clip-path: polygon(0 14px, 14px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px)); }
.purchase-panel::after { position: absolute; right: 22px; bottom: 13px; left: 22px; height: 2px; content: ""; background: linear-gradient(90deg, transparent, var(--yellow), transparent); box-shadow: 0 0 12px rgba(255,240,0,0.55); opacity: 0.7; }
.purchase-label { margin: 0; color: var(--muted); font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.purchase-price { margin: 8px 0 23px; color: var(--yellow); font: 700 clamp(28px, 3.5vw, 46px) var(--mono); letter-spacing: -0.09em; line-height: 1; text-shadow: 0 0 22px rgba(255,240,0,0.22); }
.purchase-primary, .purchase-secondary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 15px; font: 700 12px var(--mono); letter-spacing: 0.02em; transition: transform 180ms var(--ease), box-shadow 180ms ease, background 180ms ease; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.purchase-primary { color: var(--bg); background: var(--yellow); box-shadow: 0 0 17px rgba(255,240,0,0.18), inset 0 1px rgba(255,255,255,0.55); }
.purchase-secondary { margin-top: 11px; color: var(--text); border: 1px solid var(--yellow); background: rgba(6,6,6,0.72); }
.purchase-primary:hover, .purchase-secondary:hover { transform: translateY(-3px); box-shadow: 0 0 24px rgba(255,240,0,0.28); }
.purchase-secondary:hover { color: var(--bg); background: var(--yellow); }
.purchase-note { max-width: 260px; margin: 19px 0 0; color: var(--muted); font-size: 12px; line-height: 1.48; }
.inventory-notice { margin: 0; padding: 12px 14px; color: var(--yellow); font: 700 15px var(--mono); text-transform: uppercase; border: 1px solid rgba(255,240,0,0.5); background: rgba(255,240,0,0.07); }
.inventory-notice--sold { color: #ff9d42; border-color: rgba(255,157,66,0.48); background: rgba(255,120,36,0.08); }
.inventory-notice--reserved { color: #9bbcff; border-color: rgba(155,188,255,0.42); background: rgba(80,130,255,0.08); }
.purchase-signal { display: flex; gap: 8px; margin-top: 21px; }
.purchase-signal span { width: 17px; height: 17px; border: 1px solid var(--yellow); background: rgba(255,240,0,0.08); box-shadow: 0 0 12px rgba(255,240,0,0.14); transform: skewX(-12deg); }
.purchase-signal span:nth-child(2) { background: var(--yellow); }
.purchase-signal span:nth-child(3) { opacity: 0.45; }
.detail-lower { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
.info-panel { position: relative; min-height: 184px; padding: 20px 26px 23px; background: linear-gradient(145deg, rgba(16,16,16,0.95), rgba(5,5,5,0.96)); border: 1px solid var(--border-subtle); box-shadow: 9px 12px 24px rgba(0,0,0,0.56), inset 0 1px rgba(255,255,255,0.035), inset -7px -8px 20px rgba(0,0,0,0.62); clip-path: polygon(0 12px, 12px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.info-panel h2, .section-heading h2 { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--text); font: 700 16px var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.info-panel h2 span, .section-heading h2 span { color: var(--yellow); font: 700 16px var(--mono); letter-spacing: -0.12em; }
.info-panel p { max-width: 700px; margin: 19px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.item-story { min-height: 0; padding: 0 18px; border-color: rgba(226,235,37,0.35); border-radius: 15px; clip-path: none; }
.item-story-section { padding: 23px 0 25px; }
.item-story-section + .item-story-section { border-top: 1px solid rgba(226,235,37,0.28); }
.item-story h2 { display: flex; align-items: center; gap: 12px; color: var(--text); font: 700 21px var(--sans); letter-spacing: 0; text-transform: none; }
.item-story h2 .item-story-icon { display: inline-grid; width: 22px; height: 22px; place-items: center; color: var(--yellow); }
.item-story-icon svg { display: block; width: 22px; height: 22px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.item-story p { max-width: none; margin: 19px 0 0; color: var(--text); font-size: 16px; line-height: 1.62; }
.condition-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.condition-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; color: #ff9652; background: rgba(164,69,23,0.24); border-radius: 999px; font-weight: 700; }
.characteristics-panel { min-height: 0; }
.spec-list { margin: 11px 0 0; }
.spec-list > div { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; padding: 5px 0; border-bottom: 1px solid rgba(183,181,168,0.15); }
.spec-list dt, .spec-list dd { margin: 0; font-size: 14px; }
.spec-list dt { color: var(--muted); }
.spec-list dd { color: var(--text); }
.similar-section { margin-top: 28px; padding: 21px 0 0; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.section-heading > a { color: var(--yellow); font: 600 11px var(--mono); transition: color 180ms ease, text-shadow 180ms ease; }
.section-heading > a:hover { color: var(--text); text-shadow: 0 0 11px rgba(255,240,0,0.48); }
.similar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.similar-card { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) 14px; gap: 12px; min-height: 132px; padding: 12px; overflow: hidden; background: rgba(7,7,7,0.9); border: 1px solid rgba(183,181,168,0.17); clip-path: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); transition: transform 220ms var(--ease), border-color 180ms ease, box-shadow 220ms ease; }
.similar-card:hover { transform: translateY(-4px); border-color: var(--yellow); box-shadow: 0 0 21px rgba(255,240,0,0.15); }
.similar-cover { position: relative; overflow: hidden; background: #10100a; border: 1px solid rgba(255,240,0,0.2); }
.similar-cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #050505; transition: filter 300ms ease; }
.similar-card:hover .similar-cover img { filter: saturate(1.05) contrast(1.05); }
.similar-copy { min-width: 0; }
.similar-copy h3 { display: -webkit-box; overflow: hidden; margin: 0; color: var(--text); font-size: 15px; line-height: 1.1; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.similar-copy p { margin: 8px 0 0; color: var(--muted); font: 10px var(--mono); }
.similar-copy strong { display: block; margin-top: 9px; color: var(--yellow); font: 700 14px var(--mono); }
.similar-arrow { align-self: center; color: var(--yellow); font-size: 26px; line-height: 1; transition: transform 180ms ease; }
.similar-card:hover .similar-arrow { transform: translateX(4px); }

.how { display: grid; gap: 24px; margin-top: 92px; padding: 32px 0 58px; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.how-heading { max-width: 720px; }
.how-heading .overline { margin: 0 0 10px; }
.how h1, .how h2 { margin: 0; font-family: var(--display); font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.04em; }
.how-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.how-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.purchase-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.purchase-highlight-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 170px; padding: 24px 26px; overflow: hidden; background: linear-gradient(125deg, rgba(226,235,37,0.14), rgba(15,15,7,0.97) 66%); border: 1px solid rgba(226,235,37,0.72); box-shadow: inset 0 1px rgba(255,255,255,0.07), 0 0 26px rgba(226,235,37,0.1), 8px 12px 24px rgba(0,0,0,0.44); }
.purchase-highlight-card::before { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--yellow); box-shadow: 0 0 14px rgba(226,235,37,0.55); content: ""; }
.purchase-highlight-copy { min-width: 0; }
.purchase-highlight-copy h2 { margin: 10px 0 0; color: var(--text); font: 700 22px var(--display); }
.purchase-highlight-copy p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.purchase-highlight-value { display: grid; justify-items: end; gap: 8px; }
.purchase-highlight-price { padding: 9px 13px; color: var(--bg); background: var(--yellow); box-shadow: 0 0 22px rgba(226,235,37,0.22); font: 800 22px var(--mono); white-space: nowrap; }
.purchase-highlight-caption { max-width: 120px; color: var(--yellow); font: 600 10px/1.4 var(--mono); text-align: right; }
.how-card { position: relative; min-width: 0; padding: 22px; background: linear-gradient(145deg, rgba(17,17,7,0.94), rgba(5,5,5,0.96)); border: 1px solid rgba(226,235,37,0.24); box-shadow: inset 0 1px rgba(255,255,255,0.035), 8px 12px 24px rgba(0,0,0,0.44); }
.how-card--avito { border-color: rgba(226,235,37,0.46); box-shadow: inset 0 1px rgba(255,255,255,0.045), 0 0 24px rgba(226,235,37,0.07), 8px 12px 24px rgba(0,0,0,0.44); }
.how-card-index { display: block; color: var(--yellow); font: 600 10px var(--mono); letter-spacing: 0.1em; }
.how-card h2, .how-card h3, .how-faq-heading h2, .how-faq-heading h3 { margin: 12px 0 0; color: var(--text); font: 700 20px var(--display); }
.how-card > p { min-height: 66px; margin: 12px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.how-action, .how-contact-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; color: var(--text); background: rgba(8,8,5,0.88); border: 1px solid rgba(226,235,37,0.32); font: 600 11px var(--mono); transition: color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.how-action { min-width: 155px; color: var(--bg); background: var(--yellow); border-color: var(--yellow); }
.how-action:hover, .how-contact-actions a:hover { color: var(--bg); background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 16px rgba(226,235,37,0.2); }
.how-contact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.how-faq { display: grid; grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1.45fr); gap: 20px; padding: 22px; background: rgba(7,7,7,0.8); border: 1px solid var(--border-subtle); }
.faq-list { display: grid; }
.faq-list details { border-bottom: 1px solid rgba(226,235,37,0.17); }
.faq-list details:first-child { border-top: 1px solid rgba(226,235,37,0.17); }
.faq-list summary { position: relative; padding: 14px 32px 14px 0; color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 50%; right: 3px; color: var(--yellow); content: "+"; font: 18px var(--mono); transform: translateY(-50%); transition: transform 160ms ease; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin: -2px 28px 14px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.faq-list details p a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.standalone-info { min-height: calc(100vh - 315px); padding-top: 82px; padding-bottom: 64px; }
.standalone-info-heading { max-width: 760px; margin-bottom: 30px; }
.standalone-info-heading .overline { margin: 0 0 10px; }
.standalone-info-heading h1 { margin: 0; color: var(--text); font: 800 clamp(36px, 6vw, 64px)/1 var(--display); letter-spacing: -0.055em; }
.standalone-info-heading > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sell-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sell-guide .how-card { display: flex; flex-direction: column; align-items: flex-start; }
.sell-guide .how-card > p { min-height: 0; }
.sell-contact-card .how-contact-actions { margin-top: auto; }
.contacts-page-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.contacts-page-card { display: flex; min-width: 0; min-height: 160px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 13px; padding: 20px; color: var(--text); background: linear-gradient(145deg, rgba(17,17,7,0.94), rgba(5,5,5,0.96)); border: 1px solid rgba(226,235,37,0.32); box-shadow: inset 0 1px rgba(255,255,255,0.04), 8px 12px 24px rgba(0,0,0,0.4); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.contacts-page-card:hover { transform: translateY(-3px); border-color: var(--yellow); box-shadow: 0 0 18px rgba(226,235,37,0.12), 8px 12px 24px rgba(0,0,0,0.4); }
.contacts-page-card strong { max-width: 100%; overflow-wrap: anywhere; font: 600 15px var(--sans); }
.contacts-page-card > span:last-child { color: var(--muted); font-size: 11px; }
.contacts-page-card b { margin-left: 5px; color: var(--yellow); font: 16px var(--mono); }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 30px; color: var(--dim); border-top: 1px solid var(--line); font: 10px var(--mono); }
.footer-contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; width: min(630px, 100%); min-width: min(420px, 100%); box-sizing: border-box; padding: 12px; background: linear-gradient(145deg, rgba(20,20,7,0.9), rgba(5,5,5,0.94)); border: 1px solid rgba(226,235,37,0.3); box-shadow: inset 0 1px rgba(255,255,255,0.045), 0 0 20px rgba(226,235,37,0.055); }
.footer-contact-links h2 { grid-column: 1 / -1; margin: 0 0 2px; color: var(--yellow); font: 700 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.footer-contact-link { position: relative; display: grid; gap: 5px; min-width: 0; padding: 10px 27px 10px 11px; color: var(--text); background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.08); transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.footer-contact-link:hover { background: rgba(226,235,37,0.07); border-color: rgba(226,235,37,0.48); box-shadow: 0 0 14px rgba(226,235,37,0.1); }
.footer-contact-label { color: var(--dim); font: 9px var(--mono); }
.footer-contact-link strong { overflow-wrap: anywhere; color: var(--text); font: 600 11px var(--sans); }
.footer-contact-arrow { position: absolute; top: 50%; right: 9px; color: var(--yellow); font-size: 14px; transform: translateY(-50%); }

.detail { display: grid; grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr); align-items: center; gap: 74px; padding-top: 86px; min-height: calc(100vh - 150px); }
.detail-image { height: 480px; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-panel); background: var(--color-bg); box-shadow: 14px 18px 34px rgba(0,0,0,0.72), inset 2px 2px 0 rgba(255,255,255,0.05), inset -6px -8px 18px rgba(0,0,0,0.8), 0 0 24px rgba(226,235,37,0.08); }
.detail-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-content h1 { max-width: 650px; margin: 12px 0 0; font-family: var(--display); font-size: clamp(38px, 5vw, 64px); line-height: 1; letter-spacing: -0.06em; }
.detail-note, .detail-languages { color: var(--muted); font-size: 14px; }
.detail-note { margin: 24px 0 0; }
.detail-languages { margin: 10px 0 0; }
.detail-price { margin: 30px 0 24px; color: var(--yellow); font: 700 28px var(--mono); letter-spacing: -0.07em; text-shadow: 0 0 18px rgba(226,235,37,0.18); }
.detail-contact { max-width: 420px; color: var(--dim); font-size: 12px; }
.back-button { display: inline-flex; margin-top: 22px; padding: 12px 17px; color: var(--bg); background: var(--yellow); border-radius: var(--radius-control); font: 700 11px var(--mono); box-shadow: 4px 5px 0 rgba(0,0,0,0.62), inset 0 1px rgba(255,255,255,0.48); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); transition: transform 160ms ease, box-shadow 160ms ease; }
.back-button:hover { transform: translateY(-2px); box-shadow: 5px 8px 0 rgba(0,0,0,0.62), 0 0 24px rgba(226,235,37,0.25), inset 0 1px rgba(255,255,255,0.48); }
.back-button:focus-visible, .filter:focus-visible, .nav-link:focus-visible, .back-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.back-link { margin-left: auto; text-transform: none; letter-spacing: 0; }

@media (max-width: 820px) {
  .site-header { gap: 20px; padding-inline: 20px; }
  .header-mark { display: none; }
  .intro { padding-top: 18px; }
  .detail { grid-template-columns: 1fr; gap: 34px; padding-top: 58px; }
  .detail-image { width: min(420px, 100%); height: 390px; }
  .sell-guide, .contacts-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  /* Fixed masks, blur and animated shadows cause occasional black compositor flashes on mobile browsers. */
  body::before, body::after { display: none; }
  .cyber-background { contain: none; background: #070705; }
  .cyber-background__wash { background: radial-gradient(ellipse at 50% 18%, rgba(226,235,37,0.045), transparent 48%), linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.36)); }
  .cyber-background__panel { box-shadow: none; }
  .cyber-background__panel i { animation: none; filter: none; opacity: 0.55; box-shadow: 0 0 10px rgba(226,235,37,0.42); }
  .cyber-background__arrow, .cyber-background__indicator { animation: none; }
  .cyber-background__arrow { opacity: 0.46; text-shadow: 0 0 6px rgba(226,235,37,0.42); }
  .cyber-background__indicator { opacity: 0.5; box-shadow: 0 0 9px rgba(226,235,37,0.5); }
  .site-header { background: rgba(3,3,3,0.98); backdrop-filter: none; }
  .page-width { width: calc(100% - 28px); }
  .site-header { display: flex; flex-wrap: nowrap; gap: 12px; min-height: 64px; padding: 10px 14px; }
  .brand { flex: 0 0 auto; gap: 0; font-size: 16px; }
  .brand-word, .brand-cursor { display: none; }
  .main-nav { width: auto; flex: 1 1 auto; align-items: center; justify-content: flex-start; gap: 17px; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-link { flex: 0 0 auto; padding-block: 10px; font-size: 11px; letter-spacing: 0.02em; white-space: nowrap; }
  .catalog-dropdown { position: fixed; top: var(--catalog-menu-top, 104px); right: 12px; left: 12px; grid-template-columns: 1fr; gap: 12px; width: auto; max-height: calc(100dvh - var(--catalog-menu-top, 104px) - 12px); overflow-y: auto; padding: 15px; }
  .catalog-dropdown.catalog-dropdown--portal { top: var(--catalog-menu-top, 104px); right: 12px; left: 12px; }
  body.catalog-menu-open { overflow: hidden; }
  .catalog-dropdown-group { padding: 2px 8px 8px; }
  .intro h1 { font-size: clamp(39px, 12vw, 57px); }
  .intro-text { font-size: 14px; }
  .catalog { padding-top: 76px; }
  .catalog-head { align-items: stretch; flex-direction: column; gap: 17px; }
  .search-form { width: 100%; }
  .catalog-tools { align-items: start; flex-direction: column; min-width: 0; }
  .filters { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .filter { flex: 0 0 auto; white-space: nowrap; }
  .catalog-filter-field select.native-filter-select { display: none; }
  .filter-select { position: relative; display: block; }
  .filter-select__trigger { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; color: var(--text); background: linear-gradient(145deg, #10100d, #070707); border: 1px solid rgba(226,235,37,0.46); border-radius: var(--radius-control); box-shadow: inset 2px 2px 7px rgba(255,255,255,0.025), inset -4px -4px 10px rgba(0,0,0,0.7); cursor: pointer; font: 600 13px var(--mono); text-align: left; }
  .filter-select__trigger.is-placeholder { color: var(--dim); }
  .filter-select__caret { color: var(--yellow); font-size: 18px; line-height: 1; transition: transform 160ms ease; }
  .filter-select.is-open .filter-select__trigger { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(226,235,37,0.14), inset 2px 2px 7px rgba(255,255,255,0.025), inset -4px -4px 10px rgba(0,0,0,0.7); }
  .filter-select.is-open .filter-select__caret { transform: rotate(180deg); }
  .filter-select__options { position: absolute; z-index: 8; top: calc(100% + 6px); right: 0; left: 0; display: none; max-height: min(48dvh, 320px); overflow-y: auto; background: #0a0a08; border: 1px solid var(--yellow); box-shadow: 0 14px 30px rgba(0,0,0,0.78), 0 0 18px rgba(226,235,37,0.1); }
  .filter-select.is-open .filter-select__options { display: grid; }
  .filter-select__option { display: flex; min-height: 46px; align-items: center; padding: 10px 12px; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid rgba(226,235,37,0.14); cursor: pointer; font: 600 13px/1.25 var(--mono); text-align: left; }
  .filter-select__option:last-child { border-bottom: 0; }
  .filter-select__option.is-selected, .filter-select__option:active { color: var(--bg); background: var(--yellow); }
  .how-options, .purchase-highlights, .how-faq { grid-template-columns: 1fr; }
  .purchase-highlight-card { min-height: 0; padding: 20px; }
  .how-card > p { min-height: 0; }
  .how { margin-top: 70px; padding-top: 26px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card { min-height: 330px; border-radius: var(--radius-panel); }
  .product-image .cover-placeholder { min-height: 132px; }
  .product-content { padding: 12px; }
  .product-card h3 { font-size: 14px; }
  .product-footer { align-items: start; flex-direction: column; gap: 5px; }
  .how { margin-top: 75px; padding-bottom: 65px; }
  .standalone-info { min-height: 0; padding-top: 56px; }
  .sell-guide, .contacts-page-grid { grid-template-columns: 1fr; }
  .site-footer { align-items: stretch; flex-direction: column; }
  .footer-contact-links { width: 100%; min-width: 0; grid-template-columns: 1fr; }
  .back-link { font-size: 9px; }
  .detail-content h1 { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .cyber-background *, .cyber-background { animation: none !important; }
  .cyber-background__arrow { opacity: 0.48; transform: rotate(var(--arrow-angle)); }
}

@media (max-width: 1050px) {
  .catalog-filter-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-hero { grid-template-columns: minmax(245px, 0.8fr) minmax(330px, 1.2fr); }
  .purchase-panel { grid-column: 1 / -1; min-height: 0; }
  .purchase-note { max-width: 520px; }
  .purchase-signal { position: absolute; right: 26px; bottom: 25px; margin: 0; }
}
@media (max-width: 820px) {
  .product-hero { grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr); gap: 18px; }
  .detail-lower { grid-template-columns: 1fr; }
  .similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-lightbox-figure { max-width: calc(100vw - 104px); max-height: calc(100dvh - 76px); }
  .photo-lightbox-image { max-width: calc(100vw - 104px); max-height: calc(100dvh - 116px); }
}
@media (max-width: 600px) {
  .catalog-filter-form { padding: 11px; }
  .catalog-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .catalog-filter-actions { grid-column: 1 / -1; justify-content: space-between; }
  .product-page { padding-top: 14px; padding-bottom: 52px; }
  .breadcrumbs { gap: 7px; font-size: 9px; }
  .product-hero { display: block; margin-top: 14px; }
  .product-gallery { grid-template-columns: minmax(0, 1fr) 48px; }
  .gallery-thumb, .gallery-signal { width: 48px; }
  .product-summary { padding-top: 28px; }
  .product-summary h1 { font-size: clamp(36px, 12vw, 54px); }
  .detail-lead { font-size: 15px; }
  .detail-facts > div { grid-template-columns: 0.75fr 1.25fr; }
  .purchase-panel { margin-top: 26px; padding: 22px 18px; }
  .purchase-signal { position: static; margin-top: 18px; }
  .info-panel { padding: 18px; }
  .similar-grid { grid-template-columns: 1fr; }
  .similar-card { min-height: 120px; }
  .section-heading { align-items: start; flex-direction: column; gap: 9px; }
  .photo-lightbox-figure { max-width: calc(100vw - 82px); max-height: calc(100dvh - 66px); gap: 8px; }
  .photo-lightbox-image { max-width: calc(100vw - 82px); max-height: calc(100dvh - 106px); }
  .photo-lightbox-arrow { width: 42px; height: 58px; }
  .photo-lightbox-arrow svg { width: 28px; height: 28px; }
  .photo-lightbox-arrow--previous { left: 1%; }
  .photo-lightbox-arrow--next { right: 1%; }
  .photo-lightbox-close { top: 10px; right: 12px; }
}

/* Phone layout: keep wide controls inside their own scroll area, never the page. */
@media (max-width: 600px) {
  .intro { padding: 20px 16px 22px; }
  .intro h1 { font-size: clamp(34px, 11vw, 48px); overflow-wrap: anywhere; }
  .intro-text { margin-top: 16px; }
  .catalog { padding-top: 54px; }
  .catalog-filter-form, .catalog-filter-controls, .product-hero, .product-gallery,
  .detail-lower, .similar-section, .purchase-panel { min-width: 0; }
  .detail-tags { gap: 7px; }
  .detail-tags span { max-width: 100%; overflow-wrap: anywhere; }
  .purchase-primary, .purchase-secondary { padding-inline: 13px; font-size: 11px; }
  .catalog-dropdown { gap: 0; padding: 10px 14px 14px; background: rgba(5,5,4,0.985); border-color: rgba(226,235,37,0.52); }
  .catalog-dropdown-group { padding: 13px 0; border-top: 1px solid rgba(226,235,37,0.2); border-left: 0; }
  .catalog-dropdown-group:first-child { border-top: 0; }
  .catalog-dropdown-group h2 { margin-bottom: 8px; font-size: 10px; }
  .catalog-dropdown-group h3 { margin: 13px 0 4px; }
  .catalog-dropdown-group a { min-height: 40px; padding: 9px 10px; border-bottom: 1px solid rgba(255,240,0,0.1); font-size: 14px; }
  .catalog-dropdown-group a.catalog-dropdown-model { margin-left: 0; padding-left: 22px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 0; }
  .product-card h3 { font-size: 19px; }
  .product-footer { align-items: end; flex-direction: row; }
  .catalog-filter-controls { grid-template-columns: 1fr; }
  .catalog-filter-actions { grid-column: auto; }
  .detail-facts > div, .spec-list > div { grid-template-columns: 1fr; gap: 3px; }
  .product-gallery { grid-template-columns: minmax(0, 1fr) 44px; gap: 9px; }
  .gallery-thumb, .gallery-signal { width: 44px; }
  .gallery-thumb { height: 62px; }
  .purchase-panel { padding: 20px 16px; }
}