/* Soft-room Shop — Concept C (light): side rail + floating pill header, glass panels, spec cards */
:root{
  --bg:#ffffff; --bg2:#f7f4fc; --panel:#faf8fd; --fg:#1d1530; --mut:#685f7a; --line:#e7e0f1;
  --pur:#663399; --pur-d:#552a80; --pur-soft:#f2ecfb; --yel:#ffce2f; --yel-d:#f5bf00; --ok:#1f7a4d; --err:#b3261e; --warn:#8a5a00;
  --f-disp:"Advent Pro","Arial Narrow",system-ui,sans-serif;
  --f-body:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:18px; --r-sm:12px; --rail:84px; --gut:clamp(16px,3vw,40px);
  --shadow:0 18px 40px -26px rgba(60,25,110,.45);
  --surface:#ffffff; --acc:#663399; --acc-h:#552a80; --top-bg:rgba(255,255,255,.88); --glass:rgba(255,255,255,.96);
  --stage-bg:linear-gradient(180deg,#f4effb,#fff); --ok-bg:#e9f6ef; --ok-line:#bfe3cf; --err-bg:#fdecea; --err-line:#f5c2bd; --warn-bg:#fff6d9; --warn-line:#f2dc93;
  color-scheme:light;
}
/* Dark theme (concept C) — toggled by the header button, saved per visitor */
:root[data-theme="dark"]{
  --bg:#0f0a18; --bg2:#160f22; --panel:#150e21; --surface:#1a1228; --fg:#efeaf7; --mut:#a69cb8; --line:rgba(239,234,247,.12);
  --pur-soft:rgba(102,51,153,.38); --acc:#b48ae8; --acc-h:#d2b6f5; --ok:#5fd39a; --err:#ff8a80; --warn:#f2c14e;
  --top-bg:rgba(22,15,34,.82); --glass:rgba(26,18,40,.94);
  --stage-bg:radial-gradient(120% 90% at 50% 0%,#24173a,#120b1d);
  --ok-bg:rgba(31,122,77,.18); --ok-line:rgba(95,211,154,.35); --err-bg:rgba(179,38,30,.2); --err-line:rgba(255,138,128,.35); --warn-bg:rgba(242,193,78,.12); --warn-line:rgba(242,193,78,.35);
  --shadow:0 18px 40px -22px rgba(0,0,0,.7);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.6 var(--f-body);overflow-x:clip}
img{max-width:100%;display:block;height:auto}
a{color:var(--acc)}
a:hover{color:var(--acc-h)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--f-disp);line-height:1.05;letter-spacing:.005em;text-wrap:balance;margin:0}
:focus-visible{outline:3px solid var(--pur);outline-offset:2px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:999;background:var(--pur);color:#fff;padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
.ic{width:20px;height:20px;flex-shrink:0}
.muted{color:var(--mut)}
.mono{font-family:var(--f-mono);font-size:.92em}
.center{display:flex;justify-content:center;margin-top:24px}
.ph{background:#fff6d1;border:1px dashed #d9a800;color:#6b5200;font-size:12px;padding:1px 6px;border-radius:4px}
.hp{position:absolute;left:-9999px}
.js .nojs-only{display:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0;background:var(--bg);overflow-y:auto;scrollbar-width:none;z-index:30}
.rail-logo img{width:44px;height:44px;border-radius:10px;margin-bottom:14px}
.rail a:not(.rail-logo){display:grid;justify-items:center;gap:4px;width:72px;padding:9px 4px;border-radius:12px;color:var(--mut);text-decoration:none;font:600 10px/1.15 var(--f-body);text-align:center}
.rail a .ic{width:22px;height:22px}
.rail a:hover,.rail a.on{background:var(--pur-soft);color:var(--acc)}
.main-col{min-width:0;padding-inline:var(--gut);display:flex;flex-direction:column}
.top{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:40;margin-top:12px;display:flex;align-items:center;gap:8px;padding:7px 7px 7px 16px;border-radius:999px;background:var(--top-bg);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line);box-shadow:0 10px 30px -18px rgba(60,25,110,.35)}
.top-logo{display:flex;align-items:center;flex-shrink:0}
.top-icon{display:none;width:34px;height:34px;border-radius:8px}
.top-wm{height:15px;width:auto}
.cmd{flex:1;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--mut);min-width:0}
.cmd:focus-within{border-color:var(--acc)}
.cmd input{flex:1;border:0;background:none;outline:0;min-width:0;color:var(--fg)}
.cmd kbd{font:500 11px var(--f-mono);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.cmd.inline{max-width:460px;margin:20px auto}
.pill{height:42px;min-width:42px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;white-space:nowrap;text-decoration:none}
.pill:hover{border-color:var(--acc);color:var(--acc)}
.pill.y{background:var(--yel);border-color:var(--yel);color:#1a1126}
.pill.y:hover{background:var(--yel-d);color:#1a1126}
.pill .n{font:700 12px var(--f-mono)}
.pill .n:empty{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 16px;justify-content:flex-start}
  .rail-logo img{margin:0 6px 0 0;width:36px;height:36px}
  .rail a:not(.rail-logo){flex-shrink:0;width:auto;grid-auto-flow:column;padding:8px 12px;font-size:12px;border:1px solid var(--line);border-radius:999px}
  .rail a .ic{width:16px;height:16px}
  .cmd kbd,.pill .t{display:none}
  .hide-sm{display:none}
}

.flash{margin:14px 0 0;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-weight:500}
.flash.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.flash.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.flash.info{background:var(--pur-soft);border-color:var(--line);color:var(--acc)}
main{flex:1}

/* ---------- buttons, forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;font-weight:700;border:1.5px solid transparent;text-decoration:none;transition:background .15s,border-color .15s,transform .15s}
.btn.pri{background:var(--pur);color:#fff}
.btn.pri:hover{background:var(--pur-d);color:#fff}
.btn.sec{background:var(--surface);border-color:var(--line);color:var(--fg)}
.btn.sec:hover{border-color:var(--acc);color:var(--acc)}
.btn.big{min-height:52px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .ic{width:18px;height:18px}
.buy{height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--yel);color:#1a1126;font-weight:700;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.buy:hover{background:var(--yel-d)}
.buy .ic{width:18px;height:18px}
.buy.sm{height:36px;width:36px;padding:0;justify-content:center}
.ib{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--mut)}
.ib:hover{border-color:var(--acc);color:var(--acc)}
.ib[aria-pressed="true"]{color:var(--acc);background:var(--pur-soft);border-color:#dccbf1}
.ib[aria-pressed="true"] .ic{fill:currentColor}
.ib .ic{width:18px;height:18px}
.linklike{border:0;background:none;padding:0;color:var(--acc);text-decoration:underline;font-size:13px}
.input,.sel{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg)}
textarea.input{min-height:auto;resize:vertical}
.input:focus,.sel:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px var(--pur-soft)}
.input[aria-invalid="true"]{border-color:var(--err)}
.sel{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23685f7a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat;padding-right:34px;text-overflow:ellipsis}
.form{display:grid;gap:10px}
.form label,.field label{font-weight:600;font-size:14px}
.field{display:grid;gap:6px;align-content:start}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.chk{display:flex;gap:10px;align-items:flex-start;font-weight:400!important;font-size:14px;line-height:1.45;padding:4px 0}
.chk input{width:18px;height:18px;margin-top:2px;accent-color:var(--acc);flex-shrink:0}
.chk small{color:var(--mut)}
.ferr{color:var(--err);font-size:13px;font-weight:500}
.badge{display:inline-flex;align-items:center;gap:4px;font:600 12px/1 var(--f-body);padding:5px 9px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--mut)}
.badge.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.badge.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.badge.err{background:var(--err-bg);border-color:var(--err-line);color:var(--err)}
.badge.info{background:var(--pur-soft);border-color:#dccbf1;color:var(--acc)}

/* ---------- panels & sections ---------- */
.panel{border:1px solid var(--line);background:var(--panel);border-radius:22px;padding:clamp(18px,2.6vw,30px);position:relative;min-width:0}
section.sec{padding-block:clamp(32px,5vw,56px)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sec-h h2,.sec>h2{font-size:clamp(30px,3.6vw,46px);font-weight:600}
.sec-h p{color:var(--mut);margin:4px 0 0}
.more{display:inline-flex;gap:6px;align-items:center;font-weight:700;text-decoration:none}
.more .ic{width:18px;height:18px}
.tag{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin:0}
.page-h{padding:28px 0 18px}
.page-h h1{font-size:clamp(36px,4.6vw,60px);font-weight:600}
.page-h p{color:var(--mut);margin:8px 0 0;max-width:70ch}
.page-h .count{font:500 13px var(--f-mono)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:22px 0 0;font-size:13px;color:var(--mut)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--mut)}
.empty{text-align:center;padding:60px 20px;display:grid;gap:10px;justify-items:center}
.empty h1,.empty h2{font-size:36px;font-weight:600}
.empty.big h1{font-size:clamp(44px,6vw,80px)}

/* ---------- product art ---------- */
.art{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;isolation:isolate;border-radius:12px;max-width:100%}
.art::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 100% 0%,var(--g2) 0 30%,transparent 31%),linear-gradient(160deg,var(--g1),var(--g3))}
.art .art-b{font:700 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.art .art-n{font:700 15px/1.1 var(--f-disp);margin-top:5px;text-wrap:balance}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;padding:7%}
.art-security{--g1:#663399;--g2:#ffce2f;--g3:#3d1d63;color:#fff}
.art-office{--g1:#ffce2f;--g2:#663399;--g3:#ffb800;color:#1d1530}
.art-os{--g1:#2a1a45;--g2:#ffce2f;--g3:#663399;color:#fff}
.art-backup{--g1:#7e4fbf;--g2:#ffffff;--g3:#4b2478;color:#fff}
.art-tune{--g1:#fff2bf;--g2:#663399;--g3:#ffce2f;color:#1d1530}
.art-creative{--g1:#a77ce0;--g2:#ffce2f;--g3:#663399;color:#fff}
.art-pdf{--g1:#f3eefa;--g2:#663399;--g3:#d9c9ef;color:#1d1530}
.art-vpn{--g1:#1d1530;--g2:#663399;--g3:#3d1d63;color:#fff}
.art-tools{--g1:#e7e0f1;--g2:#ffce2f;--g3:#c9b4e6;color:#1d1530}

/* ---------- hero (finder + 3D box) ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:14px;padding:24px 0 8px}
.find{grid-row:span 2;display:grid;gap:18px;align-content:start}
.find h1{font-size:clamp(40px,5vw,70px);line-height:.95;font-weight:600}
.find h1 span{color:var(--acc)}
.step{display:grid;gap:10px}
.step>b{font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.intents{display:flex;flex-wrap:wrap;gap:8px}
.int{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:9px 13px;display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;transition:all .15s}
.int .ic{width:18px;height:18px;color:var(--acc)}
.int:hover{border-color:var(--acc)}
.int[aria-pressed="true"]{background:var(--pur);border-color:var(--acc);color:#fff}
.int[aria-pressed="true"] .ic{color:var(--yel)}
.stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.stepper button{min-width:52px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font:700 15px var(--f-mono)}
.stepper button[aria-pressed="true"]{background:var(--yel);border-color:var(--yel);color:#1a1126}
.stepper .muted{font-size:13px;margin-left:6px}
.recs{display:grid;gap:8px}
.rec{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px;border-radius:14px;border:1px solid var(--line);background:var(--surface);transition:border-color .2s}
.rec:hover{border-color:var(--acc)}
.rec .art{border-radius:9px;padding:4px}
.rec .art .art-n,.rec .art .art-b{display:none}
.rec a{color:var(--fg);text-decoration:none;font-weight:600;line-height:1.25}
.rec a:hover{color:var(--acc)}
.rec small{display:block;color:var(--mut);font:500 12px var(--f-mono)}
.rec .p{font:700 21px var(--f-disp);white-space:nowrap}
.best{font:700 10px var(--f-mono);letter-spacing:.08em;color:#1a1126;background:var(--yel);padding:2px 6px;border-radius:4px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.add-round{width:42px;height:42px;border-radius:12px;border:0;background:var(--pur);color:#fff;display:grid;place-items:center}
.add-round:hover{background:var(--pur-d)}
@media (max-width:520px){.rec{grid-template-columns:44px minmax(0,1fr) auto}.rec .p{grid-column:2;grid-row:2;font-size:18px}.rec .add-round{grid-row:span 2}}

.stage{display:grid;place-items:center;min-height:340px;perspective:1100px;overflow:hidden;background:radial-gradient(60% 60% at var(--mx,50%) var(--my,40%),rgba(102,51,153,.16),transparent 70%),var(--stage-bg)}
.box{--rx:-8deg;--ry:-28deg;position:relative;width:180px;height:230px;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out}
.box>div{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px}
.box .fr{transform:translateZ(28px);overflow:hidden;box-shadow:0 0 0 1px rgba(29,21,48,.08)}
.box .fr .art{height:100%;aspect-ratio:auto;border-radius:6px}
.box .fr .art img{padding:10%}
.box .sd{width:56px;left:calc(50% - 28px);transform:rotateY(90deg) translateZ(90px);background:linear-gradient(#663399,#3d1d63);display:grid;place-items:center}
.box .sd span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 12px var(--f-mono);letter-spacing:.2em;color:var(--yel);text-transform:uppercase;white-space:nowrap;overflow:hidden;max-height:210px}
.box .bk{transform:rotateY(180deg) translateZ(28px);background:#2a1a45}
.shadow{position:absolute;bottom:40px;width:200px;height:24px;border-radius:50%;background:radial-gradient(rgba(40,20,70,.28),transparent 70%)}
.stage-cap{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;gap:10px;font:500 12px var(--f-mono);color:var(--mut)}
.stage-cap b{color:var(--fg);text-align:right}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.facts li{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:16px;display:grid;gap:6px;align-content:start}
.facts .ic{width:22px;height:22px;color:var(--acc)}
.facts b{font:600 18px/1.15 var(--f-disp)}
.facts small{color:var(--mut);font-size:12.5px}
@media (max-width:1180px){.facts{grid-template-columns:1fr}.facts li{grid-template-columns:auto 1fr;align-items:center}.facts small{grid-column:2}}
@media (max-width:900px){.hero{grid-template-columns:1fr}.find{grid-row:auto}.stage{min-height:300px}.facts{grid-template-columns:repeat(3,1fr)}.facts li{grid-template-columns:1fr}.facts small{grid-column:auto}}
@media (max-width:560px){.facts{grid-template-columns:1fr}}

/* ---------- categories, brands ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.cat{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface);text-decoration:none;color:var(--fg);transition:border-color .2s,box-shadow .2s}
.cat:hover{border-color:#c9b4e6;box-shadow:var(--shadow);color:var(--fg)}
.cat .ic{width:30px;height:30px;color:var(--acc);padding:6px;box-sizing:content-box;background:var(--pur-soft);border-radius:10px}
.cat b{display:block;font:600 19px/1.1 var(--f-disp)}
.cat small{color:var(--mut);font:500 12px var(--f-mono)}
.brands{display:flex;flex-wrap:wrap;gap:8px}
.brands a{border:1px solid var(--line);border-radius:999px;padding:8px 14px;text-decoration:none;color:var(--fg);font-weight:600;background:var(--surface)}
.brands a:hover{border-color:var(--acc);color:var(--acc)}
.brands small{color:var(--mut);font:500 11px var(--f-mono)}

/* ---------- spec cards ---------- */
.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:1180px){.list{grid-template-columns:1fr}}
.spec{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--surface);transition:border-color .2s,box-shadow .2s;--gx:50%;--gy:50%}
.spec:hover{border-color:#c9b4e6;background:radial-gradient(240px circle at var(--gx) var(--gy),rgba(102,51,153,.06),transparent 70%),#fff;box-shadow:var(--shadow)}
.spec-img{align-self:start}
.spec-b{display:grid;gap:10px;align-content:start;min-width:0}
.spec-t{display:flex;justify-content:space-between;gap:10px;align-items:start}
.spec-t small{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.spec h3{font-size:22px;font-weight:600;line-height:1.1;margin-top:4px}
.spec h3 a{color:var(--fg);text-decoration:none}
.spec h3 a:hover{color:var(--acc)}
.spec-acts{display:flex;gap:8px;align-items:center;flex-shrink:0}
.cmp{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);white-space:nowrap;cursor:pointer}
.cmp input{accent-color:var(--acc);width:16px;height:16px}
.rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:13px;margin:0}
.rows dt{color:var(--mut);font:500 12px var(--f-mono);padding-top:2px}
.rows dd{margin:0;min-width:0}
.rows .sel{min-height:34px;padding:5px 30px 5px 9px;font-size:13px;border-width:1px;border-radius:8px}
.spec-f{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:10px}
.spec-f .p{font:700 28px/1 var(--f-disp);font-variant-numeric:tabular-nums}
.spec-f .p small{display:block;font:400 11px var(--f-body);color:var(--mut);margin-top:3px}
@media (max-width:560px){.spec{grid-template-columns:96px minmax(0,1fr);gap:12px}.spec h3{font-size:19px}.cmp{font-size:0;gap:0}.spec-f{flex-wrap:wrap}.spec-f .buy{flex:1;justify-content:center}}

/* ---------- catalogue page ---------- */
.catalog{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start}
.filters{position:sticky;top:90px;border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:14px 16px}
.filters summary{font:600 20px var(--f-disp);display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:4px 0}
.filters summary::-webkit-details-marker{display:none}
.fgroup{display:grid;gap:6px;margin:14px 0 0;border:0;padding:0;min-width:0}
.fgroup label:not(.chk),.fgroup legend{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);padding:0}
.fscroll{max-height:240px;overflow:auto;padding-right:4px}
.factions{display:flex;gap:8px;margin-top:14px}
.factions .btn{flex:1;min-height:42px;padding:0 10px}
.js .filters [type=submit]{display:none}
.js .factions .btn.sec{flex:1}
@media (max-width:900px){.catalog{grid-template-columns:1fr}.filters{position:static}.filters:not([data-open]) details:not([open]) summary{}}
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:28px 0}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;text-decoration:none;font-weight:600;background:var(--surface)}
.pager span{background:var(--pur);color:#fff;border-color:var(--acc)}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3vw,40px);padding:18px 0 10px}
.pdp-media{display:grid;gap:14px;align-content:start;position:sticky;top:90px}
.stage-pdp{min-height:420px}
.stage-pdp .box{width:230px;height:290px}
.stage-pdp .box .sd{transform:rotateY(90deg) translateZ(115px)}
.facts-pdp{grid-template-columns:repeat(3,1fr)}
.facts-pdp li{grid-template-columns:1fr!important}
.facts-pdp small{grid-column:auto!important}
.pdp-info{min-width:0}
.brand-link{font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.pdp-info h1{font-size:clamp(36px,4.2vw,58px);font-weight:600;margin:6px 0 10px}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 12px var(--f-mono);color:var(--mut)}
.meta .ok{color:var(--ok)} .meta .no{color:var(--err)}
.lead{margin-top:14px;color:var(--mut)}
.buyform{display:grid;gap:16px;margin-top:20px}
.axis{border:0;padding:0;margin:0;min-width:0}
.axis legend{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);font-weight:600;transition:all .12s}
.chip input:checked+span{border-color:var(--acc);background:var(--pur-soft);color:var(--acc)}
.chip input:focus-visible+span{outline:3px solid var(--pur);outline-offset:2px}
.chip.na span{opacity:.4;text-decoration:line-through}
.single-var{margin:0;font-weight:600}
.buybar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:16px 0;border-block:1px solid var(--line)}
.buybar .price{flex-basis:100%;font:700 44px/1 var(--f-disp);font-variant-numeric:tabular-nums}
.buybar .price small{display:block;font:400 12px var(--f-body);color:var(--mut);margin-top:6px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;height:52px;background:var(--surface)}
.qty button{width:40px;height:100%;border:0;background:none;font-size:18px}
.qty input{width:44px;border:0;text-align:center;font-weight:700;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buybar .btn.pri{flex:1;min-width:180px}
.buybar .wish{width:52px;height:52px;border-radius:12px}
.info{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px;font-size:14px}
.info li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.info .ic{color:var(--acc)}
@media (max-width:900px){.pdp{grid-template-columns:1fr}.pdp-media{position:static}.stage-pdp{min-height:320px}.stage-pdp .box{width:180px;height:230px}.stage-pdp .box .sd{transform:rotateY(90deg) translateZ(90px)}}
@media (max-width:560px){.facts-pdp{grid-template-columns:1fr}}
@media (max-width:900px){.buybar.stuck{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);flex-wrap:nowrap;box-shadow:0 -10px 30px -18px rgba(60,25,110,.4)}
  .buybar.stuck .price{flex-basis:auto;font-size:26px}.buybar.stuck .price small,.buybar.stuck .qty,.buybar.stuck .wish{display:none}.buybar.stuck .btn.pri{min-width:0}}

.pdp-tabs{margin-top:28px}
.tablist{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tablist button{border:0;background:none;padding:12px 14px;font-weight:700;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap}
.tablist button[aria-selected="true"]{color:var(--acc);border-color:var(--acc)}
.tabp{padding:20px 0;max-width:900px}
.js .tabp:not(.on){display:none}
.no-js .tablist{display:none}
.tabp h2{font-size:28px;font-weight:600;margin-bottom:12px}
.prose{line-height:1.7;overflow-wrap:anywhere}
.prose h2{font-size:26px;margin:24px 0 8px}
.prose h3,.prose h4{font-size:20px;margin:20px 0 6px}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;font-size:14px}
.prose td,.prose th{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.prose img{border-radius:10px;margin:10px 0}
.prose ul,.prose ol{padding-left:22px}
.tablewrap{overflow-x:auto}
.vtable{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.vtable th,.vtable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.vtable th{font:500 12px var(--f-mono);color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.vtable .r{text-align:right}
.review{border-bottom:1px solid var(--line);padding:14px 0}
.review b{color:var(--warn);letter-spacing:2px}
.review span{color:var(--mut);font-size:13px;margin-left:8px}
.review-form{max-width:560px;margin-top:20px}
.stars{display:flex;gap:10px;flex-wrap:wrap;border:0;padding:0}

/* ---------- how, faq ---------- */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0;padding:0}
.how li{border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--panel)}
.how small{font:500 12px var(--f-mono);color:var(--acc)}
.how h3{font-size:26px;font-weight:600;margin:8px 0 6px}
.how p{margin:0;color:var(--mut);font-size:14px}
@media (max-width:860px){.how{grid-template-columns:1fr}}
.faq{display:grid;gap:8px;max-width:900px}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 18px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::after{content:"+";font:600 20px/1 var(--f-mono);color:var(--acc)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 14px;color:var(--mut)}

/* ---------- cart / checkout / account ---------- */
.cartpage,.checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;padding-bottom:40px}
.co-main{display:grid;gap:16px;min-width:0}
.checkout h2,.cartpage h2,.summary h2{font-size:26px;font-weight:600;margin-bottom:12px}
.summary{position:sticky;top:90px;display:grid;gap:10px;background:var(--surface)}
.summary .r{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-variant-numeric:tabular-nums}
.summary .r.t{font:700 26px var(--f-disp);border-top:1px solid var(--line);padding-top:10px}
.sline{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.sline small{display:block;color:var(--mut);font-size:12px}
.cline{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cline a{grid-column:1;text-decoration:none;color:var(--fg)}
.cline small{grid-column:1;color:var(--mut);font-size:12.5px}
.cline .qty{grid-column:2;grid-row:1/3;height:42px}
.cline .qty input{width:56px}
.cline .pr{grid-column:3;grid-row:1/3;font-weight:700;font-variant-numeric:tabular-nums}
.cline .linklike{grid-column:1;justify-self:start}
.cline.na{opacity:.6}
.cartpage .panel>.btn{margin-top:14px}
.err{color:var(--err)}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:14px}
.seg label{position:relative;padding:8px 16px;border-radius:9px;font-weight:600;cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg label:has(input:checked){background:var(--pur);color:#fff}
.seg label:has(input:focus-visible){outline:3px solid var(--pur);outline-offset:2px}
.methods{display:grid;gap:8px;margin-bottom:14px}
.method{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer}
.method:has(input:checked){border-color:var(--acc);background:var(--pur-soft)}
.method input{accent-color:var(--acc);margin-top:4px;width:18px;height:18px}
.method small{display:block;color:var(--mut);font-size:13px}
@media (max-width:980px){.cartpage,.checkout{grid-template-columns:1fr}.summary{position:static}}
.note{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:14px;padding:16px;margin-bottom:18px}
.note h2{font-size:22px}
.lic{display:grid;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.lic small{display:block;color:var(--mut);font-size:13px}
.keys{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.keys code{font:600 15px var(--f-mono);background:var(--pur-soft);color:var(--acc);padding:8px 12px;border-radius:8px;letter-spacing:.05em;word-break:break-all}
.authbox{max-width:480px;margin:40px auto}
.authbox h1{font-size:40px;font-weight:600;margin-bottom:10px}
.acct-h{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.acct-h .acts{display:flex;gap:8px}
main>.panel{margin-bottom:16px}
.doc{max-width:860px;padding:20px 0 40px}
.doc h1{font-size:clamp(36px,4.6vw,58px);font-weight:600;margin:10px 0 18px}
.placeholder{background:#fff6d1;border:1px dashed #d9a800;color:#6b5200;padding:8px 12px;border-radius:8px;font-size:13px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:24px;padding-block:32px 28px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:24px;font-size:14px;color:var(--mut)}
.foot img{height:15px;width:auto;margin-bottom:12px}
.foot h2{margin:0 0 10px;font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--acc)}
.foot .addr{line-height:1.7}
.pay{display:flex;gap:6px;flex-wrap:wrap}
.pay span{border:1px solid var(--line);border-radius:6px;padding:3px 8px;font:600 11px var(--f-mono);background:var(--surface)}
.foot .legal{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px;font-size:12.5px}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}

/* ---------- drawer, palette, compare, cookie, toast ---------- */
.scrim{position:fixed;inset:0;z-index:200;background:rgba(29,21,48,.35)}
.drawer{position:fixed;top:12px;right:12px;bottom:12px;z-index:201;width:min(420px,calc(100% - 24px));border-radius:22px;background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:-20px 0 60px -30px rgba(60,25,110,.5);display:grid;grid-template-rows:auto 1fr auto;translate:calc(100% + 24px) 0;visibility:hidden;transition:translate .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;margin-top:env(safe-area-inset-top,0px)}
.drawer.on{translate:0 0;visibility:visible;transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.dh{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.dh h2{font-size:28px;font-weight:600}
.dl{overflow:auto;padding:4px 20px}
.di{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.di .art{grid-row:span 2;padding:3px;border-radius:8px}
.di .art .art-n,.di .art .art-b{display:none}
.di b{font-weight:600;line-height:1.3;display:block}
.di small{color:var(--mut);font:500 12px var(--f-mono)}
.di .pr{font:700 18px var(--f-disp);text-align:right;font-variant-numeric:tabular-nums}
.di .q{display:flex;gap:4px;align-items:center}
.di .q button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.di .q span{min-width:22px;text-align:center;font-weight:700}
.di .linklike{justify-self:end}
.di.na{opacity:.55}
.df{padding:16px 20px;border-top:1px solid var(--line);display:grid;gap:8px;font-variant-numeric:tabular-nums}
.df .r{display:flex;justify-content:space-between;font-size:14px;color:var(--mut)}
.df .r.t{color:var(--fg);font:700 26px var(--f-disp)}
.tl{display:flex;gap:6px;font:500 11px var(--f-mono);color:var(--mut);margin:2px 0 4px}
.tl span{flex:1;padding-top:8px;border-top:2px solid var(--line)}
.tl span.on{border-color:var(--acc);color:var(--fg)}
.empty-cart{padding:30px 0;color:var(--mut);text-align:center}
.pal{position:fixed;inset:0;z-index:220;display:grid;place-items:start center;padding:calc(env(safe-area-inset-top,0px) + 12vh) 16px 16px;background:rgba(29,21,48,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pal-in{width:min(640px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(60,25,110,.5)}
.pal-q{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pal-q input{flex:1;background:none;border:0;outline:0;font-size:18px;min-width:0}
.pal-l{max-height:52vh;overflow:auto;padding:8px}
.pal-l a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;text-decoration:none;color:var(--fg);padding:8px 10px;border-radius:10px}
.pal-l a .art{padding:2px;border-radius:7px}
.pal-l a .art .art-n,.pal-l a .art .art-b{display:none}
.pal-l a small{color:var(--mut);font:500 12px var(--f-mono);white-space:nowrap}
.pal-l a:hover,.pal-l a.act{background:var(--pur-soft)}
.pal-l .g{display:block;padding:8px 10px 4px;font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.pal-hint{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font:500 11px var(--f-mono);color:var(--mut)}
.tray{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:90;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 18px;border-radius:999px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 14px 40px -16px rgba(60,25,110,.45);max-width:calc(100% - 32px);font-weight:600}
.cmpdlg{width:min(980px,calc(100% - 32px));border:1px solid var(--line);border-radius:22px;padding:0;box-shadow:0 40px 80px -30px rgba(60,25,110,.5)}
.cmpdlg::backdrop{background:rgba(29,21,48,.35)}
.cmpdlg-h{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.cmpdlg-h h2{font-size:28px;font-weight:600}
.cmpbox{overflow-x:auto;padding:4px 8px 12px}
.cmpbox table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cmpbox th,.cmpbox td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmpbox th{font:500 12px var(--f-mono);color:var(--mut);width:140px}
.cmpbox thead td{font:600 19px/1.15 var(--f-disp)}
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:300;max-width:720px;margin-inline:auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:0 20px 50px -20px rgba(60,25,110,.45);font-size:14px}
.cookie p{margin:0;flex:1 1 320px}
.cookie div{display:flex;gap:8px}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);translate:-50% -16px;opacity:0;z-index:400;background:#1d1530;color:#fff;border:1px solid rgba(255,255,255,.15);padding:10px 16px;border-radius:12px;font-weight:600;transition:all .25s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;translate:-50% 0}
.toast b{color:var(--yel)}
.toast.err{background:var(--err)}
.cookie div{align-items:center}
.cookie .btn{min-height:42px}
.lead img{display:none}
.lead p{margin:2px 0}
body:has([data-cookie]:not([hidden])) .tray{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
@media (min-width:900px){body:has([data-cookie]:not([hidden])) .tray{bottom:calc(110px + env(safe-area-inset-bottom,0px))}}
.cookie .btn{height:42px;min-height:0;padding:0 16px}
@media (max-width:900px){.facts-pdp{display:none}}
@media (max-width:560px){.buybar{flex-wrap:wrap}.buybar .btn.pri{min-width:0;flex:1 1 0}.buybar .qty{flex:0 0 auto}.buybar .wish{flex:0 0 52px}.cookie{flex-direction:column;align-items:stretch}.cookie div{justify-content:flex-end}}

/* theme toggle + dark-specific touches */
.theme-btn .ic-moon{display:block}.theme-btn .ic-sun{display:none}
[data-theme="dark"] .theme-btn .ic-moon{display:none}[data-theme="dark"] .theme-btn .ic-sun{display:block}
.wm-l{display:none}
[data-theme="dark"] .wm-p{display:none}[data-theme="dark"] .wm-l{display:block}
[data-theme="dark"] .top .wm-l{display:inline}
[data-theme="dark"] .int[aria-pressed="true"],[data-theme="dark"] .pager span{background:#663399;border-color:#8a55cc;color:#fff}
[data-theme="dark"] .btn.pri{background:#663399;color:#fff}
[data-theme="dark"] .btn.pri:hover{background:#7a44b3}
[data-theme="dark"] .add-round{background:#663399}
[data-theme="dark"] .ph,[data-theme="dark"] .placeholder{background:rgba(242,193,78,.12);border-color:rgba(242,193,78,.5);color:#f2c14e}
[data-theme="dark"] .crumbs li+li::before{color:var(--mut)}
[data-theme="dark"] .box .fr{box-shadow:0 0 0 1px rgba(255,255,255,.12)}
[data-theme="dark"] .shadow{background:radial-gradient(rgba(0,0,0,.7),transparent 70%)}
[data-theme="dark"] .scrim,[data-theme="dark"] .pal,[data-theme="dark"] .cmpdlg::backdrop{background:rgba(8,5,14,.6)}
[data-theme="dark"] .spec:hover{background:radial-gradient(240px circle at var(--gx) var(--gy),rgba(166,120,230,.13),transparent 70%),var(--surface);border-color:rgba(166,120,230,.55)}
[data-theme="dark"] .cmpdlg{background:var(--surface);color:var(--fg)}
[data-theme="dark"] .keys code{background:rgba(102,51,153,.35);color:#d9c4f5}
[data-theme="dark"] img.top-wm{filter:none}
html{transition:background-color .2s}
.spec-img,.spec-img:hover{text-decoration:none;color:inherit}
.drawer{grid-template-rows:auto minmax(0,1fr) auto}
.df{align-content:end}
.df .btn{height:auto;min-height:46px}
.spec-f .p span{white-space:nowrap}
@media (min-width:1181px){.spec-f .p{font-size:26px}}
@media (max-width:350px){.top a[href="/wishlist/"]{display:none}}
@media (max-width:560px){.hero .stage .box{width:150px;height:190px}.hero .stage .box .sd{transform:rotateY(90deg) translateZ(75px)}.stage-cap{font-size:11px}}

/* mobile header: logo + actions, full-width search row that collapses after the first scroll */
.msearch,.msearch-btn{display:none}
@media (max-width:900px){
  .rail-logo{flex-shrink:0;display:block}
  .rail-logo img{flex-shrink:0;min-width:36px;aspect-ratio:1/1;object-fit:contain}
  .top{flex-wrap:wrap;border-radius:22px;padding:7px 7px 7px 14px;row-gap:0}
  .top>.cmd{display:none}
  .top-logo{margin-right:auto}
  .top-wm{height:14px}
  .msearch{display:flex;order:10;flex-basis:100%;align-items:center;gap:10px;height:46px;margin-top:8px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--mut);
    overflow:hidden;max-height:46px;transition:max-height .25s ease,margin .25s ease,opacity .2s ease,border-color .2s}
  .msearch:focus-within{border-color:var(--acc)}
  .msearch input{flex:1;border:0;background:none;outline:0;min-width:0;color:var(--fg);font-size:16px}
  .top.scrolled .msearch{max-height:0;margin-top:0;opacity:0;border-width:0;pointer-events:none}
  .top.scrolled .msearch-btn{display:inline-flex}
}
@media (max-width:380px){.top-wm{height:12px}.pill{min-width:38px;height:38px;padding:0 10px}}
.foot .credit{color:var(--acc);font-weight:600}.foot .credit:hover{text-decoration:underline}