:root{--bg:#09090b;--card:#141418;--card2:#1b1b21;--line:#26262c;--ink:#f4f4f5;--mute:#9a9aa3;--red:#ff1f35}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.u{font-family:Unbounded,sans-serif}

/* top bar */
.top{border-bottom:1px solid var(--line);font-size:13px;color:var(--mute)}
.top .wrap{display:flex;gap:24px;align-items:center;height:38px}
.top a:hover{color:#fff}.top .r{margin-left:auto;display:flex;gap:18px}
.top .sp{margin-left:0}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(9,9,11,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.h1{display:flex;align-items:center;gap:20px;height:76px}
.logo{display:flex;align-items:center;gap:12px;font-family:Unbounded;font-weight:800;flex:none}
.logo i{font-style:normal;width:46px;height:46px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:15px;color:#fff;box-shadow:0 0 22px rgba(255,31,53,.55)}
.logo span{font-size:13px;line-height:1.05;letter-spacing:-.02em}
.tagline{font-size:12px;color:var(--mute);max-width:150px;line-height:1.3}
.search{flex:1;position:relative;min-width:0}
.search input{width:100%;height:46px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:#fff;padding:0 56px 0 20px;font:500 14px Manrope,sans-serif;outline:0;transition:.2s}
.search input:focus{border-color:var(--red);box-shadow:0 0 0 4px rgba(255,31,53,.15)}
.search button{position:absolute;right:5px;top:5px;width:36px;height:36px;border-radius:50%;border:0;background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center}
.icons{display:flex;gap:8px;flex:none}
.ic{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;position:relative;transition:.2s;background:var(--card)}
.ic:hover{border-color:var(--red)}
.ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--red);font-size:11px;display:grid;place-items:center;padding:0 4px}

/* nav row */
.h2{display:flex;align-items:center;gap:8px;height:56px;border-top:1px solid var(--line)}
.catbtn{position:relative}
.catbtn>button{height:40px;padding:0 20px;border-radius:999px;background:var(--red);color:#fff;border:0;font:800 13px Manrope;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:10px;transition:.2s}
.catbtn>button:hover{box-shadow:0 0 26px rgba(255,31,53,.6)}
.menu{position:absolute;left:0;top:50px;width:290px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px;display:none;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.catbtn.open .menu{display:block}
.menu>li{list-style:none;position:relative}
.menu>li>a{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:14px;font-weight:600;font-size:14px}
.menu>li>a:after{content:"›";color:var(--mute)}
.menu>li:hover>a,.menu>li.on>a{background:var(--card2);color:#fff}
.menu>li:hover>a:after,.menu>li.on>a:after{color:var(--red)}
.gens{display:none;position:absolute;left:100%;top:-10px;margin-left:6px;width:270px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.menu>li:hover .gens,.menu>li.on .gens{display:block}
.gens small{display:block;color:var(--mute);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 6px 8px}
.gens a{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:12px;font-size:14px;font-weight:600}
.gens a span{color:var(--mute);font-weight:500;font-size:12px}
.gens a:hover{background:var(--red);color:#fff}.gens a:hover span{color:#fff}
.nav{display:flex;gap:2px;margin-left:8px}
.nav a{padding:9px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--mute);transition:.2s}
.nav a:hover,.nav a.act{color:#fff;background:var(--card2)}
.phone{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-weight:800;font-size:14px}
.burger{display:none}

/* hero */
.hero{position:relative;padding:56px 0 24px;overflow:hidden}
.hero:before{content:"";position:absolute;right:-10%;top:-20%;width:900px;height:900px;background:radial-gradient(closest-side,rgba(255,31,53,.42),transparent);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center;min-height:560px}
.chip{display:inline-flex;align-items:center;padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--mute);margin-bottom:24px;background:rgba(20,20,24,.6)}
.chip i{width:8px;height:8px;background:var(--red);border-radius:50%;margin-right:8px;box-shadow:0 0 10px var(--red)}
h1{font-family:Unbounded;font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1.04;letter-spacing:-.04em}
h1 .o{color:transparent;-webkit-text-stroke:2px var(--red)}
.lead{max-width:470px;color:var(--mute);margin:20px 0 28px;font-size:17px}
.picker{background:rgba(20,20,24,.85);border:1px solid var(--line);border-radius:28px;padding:20px;backdrop-filter:blur(10px);max-width:520px}
.picker h3{font-family:Unbounded;font-size:15px;margin-bottom:14px}
.picker .row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
select{height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card2);color:#fff;font:600 14px Manrope;padding:0 14px;outline:0;width:100%;cursor:pointer}
select:focus{border-color:var(--red)}
select:disabled{opacity:.45;cursor:not-allowed}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;font:800 14px Manrope;background:var(--red);color:#fff;border:0;cursor:pointer;transition:.2s}
.btn:hover{box-shadow:0 0 30px rgba(255,31,53,.6);transform:translateY(-2px)}
.btn.g{background:transparent;border:1px solid #444}.btn.g:hover{background:#fff;color:#000;box-shadow:none}
.pickres{margin-top:12px;font-size:13px;color:var(--mute);min-height:20px}
.pickres b{color:#fff}.pickres a{color:var(--red);font-weight:800}
.stage{position:relative;height:500px;overflow:hidden}
/* object-fit:contain вместо жёсткой ширины — каждое фото вписывается в
   одинаковую рамку независимо от своих исходных пропорций, не вылезая
   за края и не "плавая" по размеру относительно других машин */
.stage .car{position:absolute;left:3%;bottom:78px;width:94%;height:calc(100% - 88px);object-fit:contain;object-position:bottom center;opacity:0;transition:opacity .8s;filter:drop-shadow(0 30px 30px rgba(0,0,0,.55));pointer-events:none}
.stage .car.on{opacity:1}
.floor{position:absolute;left:8%;right:8%;bottom:42px;height:60px;background:radial-gradient(closest-side,rgba(255,31,53,.55),transparent);filter:blur(10px)}
.cap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px}
.cap b{font-family:Unbounded;font-size:20px}.cap span{color:var(--mute);font-size:13px;margin-left:8px}
.dots{display:flex;gap:8px}.dots button{width:34px;height:6px;border-radius:3px;background:#3a3a42;border:0;cursor:pointer;padding:0;transition:.3s}.dots button.on{background:var(--red)}

/* ticker */
.tick{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:16px 0;font-family:Unbounded;font-size:24px;color:transparent;-webkit-text-stroke:1px #55555d;margin-top:30px}
.tick span{display:inline-block;animation:t 32s linear infinite}
@keyframes t{to{transform:translateX(-50%)}}

section{padding:80px 0 0}
h2{font-family:Unbounded;font-weight:800;font-size:clamp(24px,3.2vw,42px);letter-spacing:-.04em;line-height:1.08}
.hd{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px;gap:20px}
.hd p{color:var(--mute);margin-top:8px;max-width:520px}

/* parts categories */
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.part{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px;transition:.25s;display:flex;flex-direction:column;gap:32px;min-height:170px}
.part svg{width:34px;height:34px;stroke:var(--red);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.part b{font-family:Unbounded;font-size:15px;display:block}.part span{color:var(--mute);font-size:13px}

/* models */
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.model{position:relative;background:radial-gradient(120% 90% at 70% 0%,#2a1015 0%,var(--card) 55%);border:1px solid var(--line);border-radius:28px;padding:22px;overflow:hidden;min-height:300px;transition:.25s;display:flex;flex-direction:column;cursor:pointer;transform:translateZ(0)}
.model h3{font-family:Unbounded;font-size:18px;position:relative;z-index:2}
.model small{color:var(--mute);font-size:12px;position:relative;z-index:2}
/* object-fit:contain — машина вписывается в одинаковую рамку независимо
   от пропорций своего фото: седан, внедорожник и пикап смотрятся одного
   "веса" в карточке, ничего не обрезается и не торчит за края */
.model img{position:absolute;left:5%;bottom:56px;width:90%;height:calc(100% - 114px);object-fit:contain;object-position:bottom center;filter:drop-shadow(0 18px 16px rgba(0,0,0,.6));transition:.4s;z-index:1}
.model:after{content:"";position:absolute;left:14%;right:14%;bottom:50px;height:26px;background:radial-gradient(closest-side,rgba(255,31,53,.5),transparent);filter:blur(8px)}
.model .chips{position:absolute;left:18px;right:18px;bottom:16px;display:flex;gap:6px;flex-wrap:wrap;z-index:3}
.model .chips a,.model .chips span{font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px;border:1px solid #33333b;background:rgba(9,9,11,.7);color:#d4d4d8;transition:.2s}
.model .chips a:hover,.model .chips span:hover{background:var(--red);border-color:var(--red);color:#fff}
.model.more{background:linear-gradient(135deg,var(--red),#7a0010);border:0;justify-content:space-between}
.model.more{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;gap:24px;flex-wrap:wrap}.model.more h3{font-size:22px}.model.more p{position:relative;z-index:2;color:#ffe;font-size:14px}
.model.more:after{display:none}

/* products */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tab{border:1px solid var(--line);padding:10px 20px;border-radius:999px;font:700 14px Manrope;cursor:pointer;color:var(--mute);background:transparent;transition:.2s}
.tab:hover{color:#fff}.tab.on{background:#fff;color:#000;border-color:#fff}
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.p{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:6px;transition:.25s}
.p .im{height:220px;border-radius:22px;background:radial-gradient(90% 100% at 50% 100%,#2a1015,#101014);display:grid;place-items:center;margin-bottom:14px;overflow:hidden}
.p .im img{width:86%;height:84%;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 10px rgba(0,0,0,.6))}
.toicon{display:flex;flex-direction:column;align-items:center;gap:14px}
.toicon .ring{width:128px;height:128px;border-radius:50%;display:grid;place-items:center}
.toicon svg{width:70px;height:70px}
.toicon .ton{font-family:Unbounded;font-weight:800;font-size:17px;letter-spacing:.02em}
.p small{color:var(--mute)}.p h4{font-size:18px}
.p h4 .itv{display:block;color:var(--mute);font-weight:500;font-size:13.5px;margin-top:3px}
.p .pr{font-family:Unbounded;font-size:26px;margin:8px 0 12px}
.p .act{display:flex;gap:8px}.p .act .btn{flex:1;height:52px;font-size:15px}
.p .act .ic{width:52px;height:52px;cursor:pointer}
.p .toicon .ring{width:180px;height:180px}.p .toicon svg{width:110px;height:110px}.p .toicon .ton{font-size:22px}

/* why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.w{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:26px}
.w b{font-family:Unbounded;font-size:38px;color:var(--red);display:block;letter-spacing:-.04em}
.w p{color:var(--mute);font-size:14px;margin-top:4px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.s{background:var(--card2);border-radius:28px;padding:26px}
.s b{font-family:Unbounded;font-size:32px;color:transparent;-webkit-text-stroke:1.5px var(--red)}
.s p{color:#c9c9d0;margin-top:6px;font-size:14px}

/* reviews */
.rev{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rv{aspect-ratio:3/4;border:1px dashed #3a3a42;border-radius:24px;display:grid;place-items:center;text-align:center;color:#6b6b74;font-size:13px;padding:16px;background:var(--card)}
@media(max-width:1080px){.rev{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.rev{grid-template-columns:1fr}}

/* blog */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.post{background:var(--card);border:1px solid var(--line);border-radius:28px;overflow:hidden;transition:.25s}
.post .im{height:180px;background:radial-gradient(90% 100% at 60% 100%,#2a1015,#0f0f12);display:grid;place-items:center;overflow:hidden}
.post .im img{width:70%;height:80%;object-fit:contain;object-position:center;filter:drop-shadow(0 12px 10px rgba(0,0,0,.6))}
.post .t{padding:22px}.post small{color:var(--mute)}.post h4{font-size:16px;margin-top:6px;line-height:1.4}

/* footer */
footer{margin-top:90px;border-top:1px solid var(--line);padding:56px 0 30px;color:var(--mute);font-size:14px}
.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer h5{color:#fff;font-family:Unbounded;font-size:13px;margin-bottom:14px}
footer li{list-style:none;margin:8px 0}footer a:hover{color:#fff}
.fb{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px}
.cred{font-size:11px;opacity:.6;margin-top:10px;line-height:1.5}

/* visit card */
.vcard{position:fixed;left:16px;top:170px;z-index:40;width:230px}
.vcard .in{border-radius:12px;box-shadow:0 0 30px rgba(255,31,53,.35);overflow:hidden;display:grid;grid-template-columns:1fr 1fr;transition:.3s;transform-origin:top left}
.vcard:hover .in{transform:scale(1.6)}
.vcard .l{background:var(--red);padding:8px;display:grid;place-items:center;color:#fff;font:800 8px Unbounded;line-height:1.1}
.vcard .r{background:#000;color:#fff;padding:8px;font-size:5.4px;line-height:1.35;border:1px solid #222}.vcard .r b{display:block;font-size:6px}
@media(max-width:1560px){.vcard{display:none}.vcard-inline{display:block!important}}
.vcard-inline{display:none;max-width:250px;margin:14px 24px 0}
.vcard-inline .in{border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 0 24px rgba(255,31,53,.3)}
.vcard-inline .l{background:var(--red);padding:10px;display:grid;place-items:center;color:#fff;font:800 10px Unbounded;line-height:1.1}
.vcard-inline .r{background:#000;color:#fff;padding:10px;font-size:7px;line-height:1.4}.vcard-inline .r b{display:block;font-size:7.5px}

@media(max-width:1080px){
 .tagline{display:none}.nav{display:none}.hero .wrap{grid-template-columns:1fr}.stage{height:380px}
 .parts,.models,.why,.steps{grid-template-columns:repeat(2,1fr)}.prods,.blog{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
 .top .wrap{font-size:12px}.top .hide{display:none}.icons .ic:nth-child(1),.icons .ic:nth-child(2){display:none}
 .h1{gap:10px}.logo span{display:none}
 .picker .row{grid-template-columns:1fr}.parts,.models,.why,.steps,.rev,.prods,.blog,.fg{grid-template-columns:1fr}
 .phone{display:none}.menu{width:min(290px,86vw)}.gens{position:static;width:auto;margin:4px 0 8px;box-shadow:none}
 section{padding-top:56px}.model{min-height:260px}
}

/* ===== мобильная версия ===== */
.burger{cursor:pointer;display:none}
.navphone{display:none}
@media(max-width:1080px){
 .burger{display:grid}
 .h2{position:relative}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px;box-shadow:0 30px 60px rgba(0,0,0,.6);z-index:60}
 .nav.open{display:flex}
 .menu,.gens{z-index:70}
 .nav a{padding:13px 16px;font-size:15px;border-radius:14px}
 .navphone{display:block;color:#fff!important;font-weight:800;margin-top:6px;border-top:1px solid var(--line);border-radius:0!important;padding-top:16px!important}
 .phone{display:none}
}
@media(max-width:640px){
 html{font-size:15px}
 .wrap{padding:0 16px}
 .top .wrap{gap:12px;height:34px}.top .r{gap:12px}
 header{position:relative;z-index:50}
 .h1{height:64px;gap:8px}
 .logo i{width:40px;height:40px;font-size:13px}
 .search input{height:42px;font-size:13px;padding-left:16px}
 .search button{width:32px;height:32px;top:5px}
 .ic{width:42px;height:42px}
 .icons{gap:6px}
 .h2{height:52px}
 .catbtn>button{height:38px;padding:0 16px;font-size:12px}
 .menu{width:calc(100vw - 32px)}
 .vcard-inline{margin:12px 16px 0;max-width:230px}
 .hero{padding:24px 0 0}
 .hero .wrap{gap:0;min-height:0}
 .chip{font-size:12px;margin-bottom:16px}
 h1{font-size:clamp(26px,8.2vw,34px)}
 h1 .o{-webkit-text-stroke:1.5px var(--red)}
 .lead{font-size:15px;margin:14px 0 20px}
 .picker{padding:16px;border-radius:24px}
 .stage{height:250px;margin-top:6px}
 .stage .car{bottom:62px}
 .floor{bottom:36px;height:44px}
 .cap{flex-wrap:wrap;row-gap:8px}
 .cap b{font-size:16px}.cap span{display:block;margin:0}
 .tick{font-size:18px;padding:12px 0;margin-top:16px}
 section{padding-top:48px}
 h2{font-size:clamp(22px,7vw,28px)}
 .hd{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}
 .parts,.models{grid-template-columns:1fr 1fr;gap:10px}
 .part{padding:16px;gap:16px;min-height:0;border-radius:20px}
 .part svg{width:28px;height:28px}
 .part b{font-size:13px}.part span{font-size:11.5px;display:block;margin-top:4px}
 .model{min-height:210px;padding:14px;border-radius:22px}
 .model h3{font-size:14px}.model small{font-size:11px}
 .model img{left:3%;width:94%;bottom:44px;height:calc(100% - 90px)}
 .model:after{bottom:40px}
 .model .chips{left:12px;right:12px;bottom:12px;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .model .chips::-webkit-scrollbar{display:none}
 .model .chips a,.model .chips span{flex:none}
 .model .chips a,.model .chips span{font-size:10px;padding:4px 8px}
 .model.more{grid-column:1/-1;min-height:0}
 .tabs{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 20px;padding:0 16px;scrollbar-width:none}
 .tabs::-webkit-scrollbar{display:none}
 .tab{white-space:nowrap;flex:none}
 .why{grid-template-columns:1fr 1fr;gap:10px}.w{padding:18px;border-radius:22px}.w b{font-size:26px}
 .steps{grid-template-columns:1fr 1fr;gap:10px}.s{padding:18px;border-radius:22px}.s b{font-size:24px}
 .p{border-radius:22px}.p .im{height:200px}
 .toicon .ring{width:104px;height:104px}.toicon svg{width:56px;height:56px}.toicon .ton{font-size:15px}
 .post .im{height:150px}
 footer{margin-top:60px;padding-top:40px}
 .fg{gap:22px}
}

/* эффекты при наведении — только там, где есть настоящая мышь,
   иначе на телефоне подсветка "залипает" после нажатия */
@media(hover:hover){
 .part:hover{border-color:var(--red);transform:translateY(-5px);box-shadow:0 0 40px rgba(255,31,53,.18)}
 .model:hover{border-color:var(--red);transform:translateY(-6px);box-shadow:0 0 44px rgba(255,31,53,.22)}
 .model:hover img{transform:scale(1.06) translateX(6px)}
 .post:hover{border-color:var(--red);transform:translateY(-5px)}
 .p:hover{border-color:#3a3a42}
}

/* ===== доп. стили для рабочего магазина ===== */
input[type=text],input[type=tel],input[type=email],textarea{
 width:100%;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card2);
 color:#fff;font:500 14px Manrope,sans-serif;padding:0 16px;outline:0
}
textarea{height:auto;padding:12px 16px;min-height:90px;resize:vertical}
input:focus,textarea:focus{border-color:var(--red)}
label{display:block;font-size:13px;color:var(--mute);margin-bottom:6px;font-weight:600}
.field{margin-bottom:14px}
.err{color:var(--red);font-size:13px;margin-top:6px}
.note{color:var(--mute);font-size:13px}

/* корзина */
.cartbtn{position:relative}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;display:flex;justify-content:flex-end}
.drawer{width:min(440px,100vw);height:100%;background:var(--bg);border-left:1px solid var(--line);padding:24px;overflow-y:auto;display:flex;flex-direction:column}
.drawer h3{font-family:Unbounded;font-size:20px;margin-bottom:20px}
.drawer .close{margin-left:auto;display:block;width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:#fff;font-size:18px;cursor:pointer}
.citem{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.citem .ci-t{flex:1}
.citem .ci-t b{display:block;font-size:14px}
.citem .ci-t small{color:var(--mute)}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--card2);color:#fff;cursor:pointer}
.citem .rm{color:var(--mute);cursor:pointer;font-size:13px;margin-left:8px}
.ctotal{margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
.ctotal .sum{display:flex;justify-content:space-between;font-family:Unbounded;font-size:20px;margin-bottom:16px}
.empty-cart{color:var(--mute);text-align:center;padding:60px 0}
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:95;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:28px;max-width:440px;width:100%}
.modal h3{font-family:Unbounded;margin-bottom:18px;font-size:20px}
.empty-state{background:var(--card);border:1px dashed var(--line);border-radius:24px;padding:40px;text-align:center;color:var(--mute)}

/* админка */
.adm-wrap{max-width:1100px;margin:0 auto;padding:40px 24px}
.adm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.adm-tabs{display:flex;gap:8px;margin-bottom:24px}
.adm-tabs button{border:1px solid var(--line);background:transparent;color:var(--mute);padding:10px 18px;border-radius:999px;cursor:pointer;font:700 13px Manrope}
.adm-tabs button.on{background:#fff;color:#000;border-color:#fff}
.adm-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;margin-bottom:14px}
.adm-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.adm-form .full{grid-column:1/-1}
.adm-table{width:100%;border-collapse:collapse}
.adm-table th{text-align:left;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--line)}
.adm-table td{padding:12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.adm-table img{width:44px;height:44px;object-fit:contain;background:#0f0f12;border-radius:10px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.badge.new{background:rgba(255,31,53,.15);color:var(--red)}
.badge.done{background:rgba(34,230,201,.15);color:#22e6c9}
.badge.cancelled{background:rgba(154,154,163,.15);color:var(--mute)}
.iconbtn{background:transparent;border:1px solid var(--line);color:var(--mute);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:13px}
.iconbtn:hover{color:#fff;border-color:#fff}
.loginbox{max-width:380px;margin:120px auto;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px}
.loginbox h1{font-family:Unbounded;font-size:22px;margin-bottom:20px}
@media(max-width:640px){.adm-form{grid-template-columns:1fr}}

/* ТО: иконки клиента на красном фоне (тёмный фон фото просвечивает через screen) */
.p .im.to{background:radial-gradient(90% 100% at 50% 100%,#9c1024,#2a0a10 70%,#101014)}
.p .im.to{display:flex;align-items:center;justify-content:center}
.p .im img.toimg{flex:none;height:82%;width:auto;aspect-ratio:1/1;max-width:86%;object-fit:contain;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}

/* избранное: кнопка-сердечко, подсвечивается у товаров в избранном */
.p .act .ic.fav{background:transparent;border:1px solid var(--line);color:#fff;padding:0;cursor:pointer}
.p .act .ic.fav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.p .act .ic.fav.on{color:var(--red);border-color:var(--red)}
.p .act .ic.fav.on svg{fill:var(--red)}

/* отзывы: лента со скриншотами, листается сама */
.revcar{position:relative}
.revstage{position:relative;height:460px;border-radius:22px;background:#fff;overflow:hidden}
.revslide{position:absolute;inset:0;display:grid;place-items:center;padding:28px;opacity:0;transition:opacity .6s;pointer-events:none}
.revslide.on{opacity:1;pointer-events:auto}
.revslide img{max-width:100%;max-height:100%;object-fit:contain}
.revnav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:2}
.revnav.prev{left:12px}.revnav.next{right:12px}
.revdots{display:flex;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.revdots button{width:10px;height:10px;border-radius:50%;border:0;background:#3a3a44;cursor:pointer;padding:0}
.revdots button.on{background:var(--red)}

/* каталог: боковая панель с фильтрами и список товаров */
.cat-top{display:grid;grid-template-columns:270px 1fr;gap:24px;align-items:start;margin-bottom:56px}
.csb{position:sticky;top:16px;display:grid;gap:14px}
.sbox{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px}
.sbox h4{font-family:Unbounded;font-size:14px;margin-bottom:14px;text-transform:uppercase}
.dual{position:relative;height:30px;margin:6px 0 12px}
.dual::before{content:"";position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:var(--line)}
.dual input{position:absolute;left:0;top:6px;width:100%;margin:0;height:18px;background:none;border:0;padding:0;pointer-events:none;-webkit-appearance:none;appearance:none;outline:0}
.dual input::-webkit-slider-runnable-track{height:4px;background:transparent}
.dual input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--red);border:0;margin-top:-7px;cursor:pointer}
.dual input::-moz-range-track{height:4px;background:transparent}
.dual input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--red);border:0;cursor:pointer}
.pricelbl{color:var(--mute);font-size:14px;margin-bottom:14px}
.cats{list-style:none;display:grid;gap:4px}
.cats button{width:100%;text-align:left;background:none;border:0;color:var(--mute);padding:8px 10px;border-radius:12px;cursor:pointer;font:600 14px Manrope,sans-serif}
.cats button:hover,.cats button.on{background:var(--card2);color:#fff}

/* вход и регистрация */
.auth{max-width:520px;margin:0 auto;padding-bottom:56px}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;gap:14px}
.auth-card h3{font-family:Unbounded;font-size:18px}
.auth-card .field{display:grid;gap:6px}
.auth-card label{font-size:13px;color:var(--mute)}
.auth-card input{height:48px;border-radius:14px;border:1px solid var(--line);background:var(--card2);color:#fff;font:600 14px Manrope,sans-serif;padding:0 14px;outline:0;width:100%}
.auth-card .err{color:var(--red);font-size:14px}

@media(max-width:820px){.cat-top{grid-template-columns:1fr}.csb{position:static}}

/* PHP-версия: overlay корзины всегда в DOM, показываем классом .open
   (в Next.js компонент просто не рендерился, пока закрыт) */
.overlay{display:none !important}
.overlay.open{display:flex !important}