/* SerialCars — базовые компоненты. Только роли из tokens.css. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3,12px);padding:var(--sp-4,16px) var(--sp-8,32px);border-radius:var(--radius-full,999px);border:1px solid transparent;font-weight:700;font-size:var(--fs-16,16px);text-decoration:none;transition:transform var(--dur-base,200ms),box-shadow var(--dur-base,200ms),background var(--dur-base,200ms),color var(--dur-base,200ms),border-color var(--dur-base,200ms);white-space:nowrap;position:relative;min-height:44px;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--accent{background:var(--accent,#E02D1F);color:var(--accent-contrast,#FFFFFF);box-shadow:var(--shadow-accent,0 12px 32px rgba(224,45,31,.38));overflow:hidden}
.btn--accent:hover{background:var(--accent-hover,#FF5240);box-shadow:var(--shadow-accent,0 12px 32px rgba(224,45,31,.38))}
.btn--ghost{border-color:var(--border-strong,rgba(255,255,255,.14));background:color-mix(in srgb,var(--text,#F2F3F5) 4%,transparent);color:var(--text,#F2F3F5)}
.btn--ghost:hover{border-color:var(--text,#F2F3F5);background:var(--border,rgba(255,255,255,.08))}
.btn--dark{background:var(--surface-inverse,#F2F3F5);color:var(--text-inverse,#0B0D12)}
.btn--dark:hover{background:color-mix(in srgb,var(--surface-inverse,#F2F3F5) 92%,var(--text-inverse,#0B0D12))}
.btn--sm{padding:var(--sp-3,12px) var(--sp-4,16px);font-size:var(--fs-14,14px);min-height:40px}
.btn--lg{padding:var(--sp-4,16px) var(--sp-8,32px);font-size:var(--fs-16,16px)}
.btn--wide{width:100%}
.btn--ic{width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.14));background:transparent;color:var(--text-muted,#A7B0BE)}
.btn--ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.btn--ic:hover{color:var(--text,#F2F3F5);border-color:var(--text,#F2F3F5)}
.btn--ic.is-on{color:var(--accent-text,#FF5240);border-color:var(--accent-text,#FF5240)}
.btn--ic.is-on svg{fill:currentColor}
.hdr__ic{position:relative;width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.14));background:transparent;color:var(--text,#F2F3F5);display:grid;place-items:center;transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.hdr__ic:hover{border-color:var(--text,#F2F3F5)}
.hdr__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.hdr__ic.has svg{fill:var(--accent,#E02D1F);stroke:var(--accent,#E02D1F)}
.hdr__ic i{position:absolute;top:-5px;right:-5px;background:var(--accent,#E02D1F);color:var(--accent-contrast,#FFFFFF);font-weight:700;font-size:var(--fs-12,12px);line-height:var(--lh-12,16px);font-family:var(--font-mono,"JetBrains Mono",monospace);min-width:18px;border-radius:var(--radius-sm,8px);text-align:center;font-style:normal;padding:0 var(--sp-1,4px)}
.burger{display:none;width:42px;height:42px;background:none;border:0;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:9px;width:24px;height:2px;background:var(--surface-inverse,#F2F3F5);transition:var(--tr-surface,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.burger span{top:20px}
.burger span::before{top:-7px;left:0}
.burger span::after{top:7px;left:0}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span::after{transform:translateY(-7px) rotate(-45deg)}
.seg{display:inline-flex;background:var(--surface-raised,#12161E);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-full,999px);padding:var(--sp-1,4px)}
.seg button{border:0;background:none;padding:var(--sp-3,12px) var(--sp-6,24px);border-radius:var(--radius-full,999px);font-weight:700;font-size:var(--fs-14,14px);color:var(--text-muted,#A7B0BE);transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.seg button.is-on{background:var(--surface-inverse,#F2F3F5);color:var(--text-inverse,#0B0D12)}
.brands{display:flex;gap:var(--sp-2,8px);flex-wrap:wrap;margin:0 0 var(--sp-4,16px)}
.brands button{background:transparent;border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-full,999px);padding:var(--sp-3,12px) var(--sp-4,16px);font-weight:700;font-size:var(--fs-14,14px);color:var(--text-muted,#A7B0BE);display:inline-flex;gap:var(--sp-2,8px);align-items:center;transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.brands button span{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:var(--fs-12,12px);color:var(--text-subtle,#8A93A3)}
.brands button:hover{border-color:var(--text,#F2F3F5);color:var(--text,#F2F3F5)}
.brands button.is-on{background:var(--surface-inverse,#F2F3F5);color:var(--text-inverse,#0B0D12);border-color:var(--text,#F2F3F5)}
.brands button.is-on span{color:var(--text-inverse-muted,#4B5262)}
.brands button.fav{color:var(--accent-text,#FF5240);border-color:color-mix(in srgb,var(--accent,#E02D1F) 50%,transparent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-4,16px)}
.card{background:var(--surface-raised,#12161E);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:var(--radius-lg,18px);overflow:hidden;display:flex;flex-direction:column;transition:var(--tr-surface,border-color .12s,box-shadow .2s,transform .2s,opacity .2s);cursor:pointer;position:relative;transform-style:preserve-3d;will-change:transform}
.card:hover{border-color:var(--border-strong,rgba(255,255,255,.14));transform:translateY(-5px);box-shadow:var(--shadow-lg,0 32px 72px rgba(0,0,0,.52))}
.card__img{position:relative;aspect-ratio:2.18;background:#0A0C11;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow,420ms)}
.card:hover .card__img img{transform:scale(1.04)}
.card__dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:var(--sp-1,4px);opacity:0;transition:var(--tr-surface,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.card:hover .card__dots{opacity:1}
.card__dots i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--text,#F2F3F5) 50%,transparent)}
.card__dots i.is-on{background:var(--surface-inverse,#F2F3F5);width:14px;border-radius:3px}
.card__badge{position:absolute;top:10px;left:10px;display:flex;gap:var(--sp-2,8px);flex-wrap:wrap;right:52px}
.card__badge span{background:color-mix(in srgb,var(--surface,#07090D) 75%,transparent);backdrop-filter:blur(6px);color:var(--text,#F2F3F5);font-weight:600;font-size:var(--fs-12,12px);line-height:var(--lh-16,24px);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-2,8px) var(--sp-2,8px);border-radius:var(--radius-full,999px);border:1px solid var(--border-strong,rgba(255,255,255,.14))}
.card__badge .ok{background:var(--success-ghost,rgba(55,214,122,.18));border-color:color-mix(in srgb,var(--success,#37D67A) 50%,transparent);color:var(--success-text,#37D67A)}
.card__badge .hot{background:var(--accent,#E02D1F);border-color:var(--accent-text,#FF5240)}
.card__fav{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.14));background:color-mix(in srgb,var(--surface,#07090D) 70%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--text,#F2F3F5);transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.card__fav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.card__fav.is-on{color:var(--accent-text,#FF5240);border-color:var(--accent-text,#FF5240)}
.card__fav.is-on svg{fill:currentColor}
.card__fav:hover{transform:scale(1.1)}
.card__b{padding:var(--sp-4,16px) var(--sp-4,16px) var(--sp-4,16px);display:flex;flex-direction:column;gap:var(--sp-2,8px);flex:1min-width:0;}
.card__t{font-weight:600;font-size:var(--fs-16,16px);line-height:var(--lh-16,24px);font-family:var(--font-display,"Unbounded",sans-serif);margin:0;letter-spacing:-.01em}
.card__s{font-size:var(--fs-14,14px);color:var(--text-muted,#A7B0BE);margin:0;min-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2,8px);margin:var(--sp-2,8px) 0 var(--sp-3,12px)}
.card__chips span{font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-12,16px);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.02em;background:var(--surface-raised-2,#171C26);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:var(--radius-sm,8px);padding:var(--sp-1,4px) var(--sp-2,8px);color:var(--text-muted,#A7B0BE);display:inline-flex;align-items:center;gap:var(--sp-2,8px)}
.card__chips i{width:10px;height:10px;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.14));display:inline-block}
.card__p{font-weight:700;font-size:var(--fs-20,20px);line-height:var(--lh-20,28px);font-family:var(--font-display,"Unbounded",sans-serif);margin:auto 0 0;letter-spacing:-.02em}
.card__p small{display:block;font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-12,16px);font-family:var(--font-mono,"JetBrains Mono",monospace);color:var(--text-subtle,#8A93A3);letter-spacing:.04em;text-transform:uppercase;margin-top:var(--sp-1,4px)}
.card__act{display:flex;gap:var(--sp-2,8px);margin-top:var(--sp-4,16px);align-items:center}
.card__act .btn{flex:1;padding:var(--sp-3,12px) var(--sp-3,12px);font-size:var(--fs-14,14px)}
.card__cmp{width:40px;height:40px;flex:none;border-radius:var(--radius-md,12px);border:1px solid var(--border-strong,rgba(255,255,255,.14));background:transparent;color:var(--text-muted,#A7B0BE);display:grid;place-items:center;transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.card__cmp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.card__cmp:hover{border-color:var(--text,#F2F3F5);color:var(--text,#F2F3F5)}
.card__cmp.is-on{background:var(--surface-inverse,#F2F3F5);color:var(--text-inverse,#0B0D12);border-color:var(--text,#F2F3F5)}
.cat__more{text-align:center;margin:var(--sp-8,32px) 0 var(--sp-6,24px)}
.empty{grid-column:1/-1;text-align:center;padding:var(--sp-12,48px);color:var(--text-muted,#A7B0BE);border:1px dashed var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-lg,18px)}
.calc__form label{display:flex;flex-direction:column;gap:var(--sp-2,8px);font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:var(--fs-12,12px);letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle,#8A93A3)}
.calc__form input,.calc__form select{font:inherit;font-size:var(--fs-16,16px);padding:var(--sp-3,12px) var(--sp-4,16px);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-md,12px);background:var(--surface-raised,#12161E);color:var(--text,#F2F3F5);font-family:var(--font-sans,"Manrope",system-ui,sans-serif)}
.calc__form select option{color:var(--text-inverse,#0B0D12)}
.calc__form input:focus,.calc__form select:focus{outline:2px solid var(--accent,#E02D1F);border-color:transparent}
.faq details{border-bottom:1px solid var(--border-strong,rgba(255,255,255,.14))}
.faq summary{cursor:pointer;list-style:none;padding:var(--sp-6,24px) var(--sp-12,48px) var(--sp-6,24px) 0;font-weight:600;font-size:var(--fs-16,16px);line-height:var(--lh-16,24px);font-family:var(--font-display,"Unbounded",sans-serif);position:relative;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:var(--fs-32,32px);font-weight:300;color:var(--accent-text,#FF5240);transition:transform var(--dur-base,200ms);font-family:var(--font-sans,"Manrope",system-ui,sans-serif)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 var(--sp-6,24px);color:var(--text-muted,#A7B0BE);max-width:60ch}
.form{background:var(--surface-inverse,#F2F3F5);color:var(--text-inverse,#0B0D12);border-radius:var(--radius-xl,26px);padding:var(--sp-8,32px);display:flex;flex-direction:column;gap:var(--sp-4,16px);box-shadow:var(--shadow-lg,0 32px 72px rgba(0,0,0,.52))}
.form label{display:flex;flex-direction:column;gap:var(--sp-2,8px);font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:var(--fs-12,12px);letter-spacing:.06em;text-transform:uppercase;color:var(--text-inverse-muted,#4B5262)}
.form input,.form textarea{font:inherit;font-family:var(--font-sans,"Manrope",system-ui,sans-serif);padding:var(--sp-3,12px) var(--sp-4,16px);border:1px solid color-mix(in srgb,var(--text-inverse,#0B0D12) 16%,transparent);border-radius:var(--radius-md,12px);color:var(--text-inverse,#0B0D12);background:var(--surface-inverse,#F2F3F5);text-transform:none;letter-spacing:0}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent,#E02D1F);border-color:transparent}
.form input.is-bad{border-color:var(--danger,#FF5A4E)}
.form__agree{margin:0;font-size:var(--fs-12,12px);color:var(--text-inverse-muted,#4B5262);font-family:var(--font-sans,"Manrope",system-ui,sans-serif);text-transform:none;letter-spacing:0}
.form__msg{margin:0;font-size:var(--fs-14,14px);font-weight:700;min-height:1.2em}
.form__msg.ok{color:#178A4C}
.form__msg.bad{color:var(--danger,#FF5A4E)}
.form__car{background:color-mix(in srgb,var(--text-inverse,#0B0D12) 6%,transparent);border-radius:var(--radius-md,12px);padding:var(--sp-3,12px) var(--sp-4,16px);font-size:var(--fs-14,14px);display:flex;justify-content:space-between;gap:var(--sp-3,12px);align-items:center}
body.has-cmp{padding-bottom:var(--sp-16,64px)}
body.has-cmp .fab{bottom:88px}
.fab{display:none;position:fixed;right:16px;bottom:16px;z-index:var(--z-sticky,1100);background:var(--accent,#E02D1F);color:var(--accent-contrast,#FFFFFF);font-weight:700;padding:var(--sp-4,16px) var(--sp-6,24px);border-radius:var(--radius-full,999px);text-decoration:none;box-shadow:var(--shadow-accent,0 12px 32px rgba(224,45,31,.38))}
@media(max-width:1100px){.burger{display:block}}
@media(max-width:1024px){}
@media(max-width:720px){.cards{grid-template-columns:1fr 1fr;gap:var(--sp-3,12px)}.card__b{padding:var(--sp-3,12px)}.card__t{font-size:var(--fs-14,14px)}.card__p{font-size:var(--fs-16,16px)}.card__act{flex-wrap:wrap}.card__act .btn{flex-basis:100%}.grid3,.steps,.china,.price,.contact,.ftr__in,.china__pts,.filters,.quiz__res,.calc__form{grid-template-columns:1fr}.hdr__cta .btn,.hdr__ic#cmp-btn{display:none}.fab{display:block}.form{padding:var(--sp-6,24px)}}
@media(max-width:400px){.cards{grid-template-columns:1fr}}

.card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.08) 45%,transparent 60%);background-size:250% 100%;background-position:150% 0;pointer-events:none;transition:background-position var(--dur-slow,420ms);border-radius:inherit}
.card:hover::after{background-position:-50% 0}
.faq details p{overflow:hidden}
.faq details[open] p{animation:fu .4s cubic-bezier(.2,.7,.2,1)}
.tk{display:inline-flex;align-items:center;gap:var(--sp-3,12px);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:var(--radius-full,999px);padding:var(--sp-2,8px) var(--sp-3,12px) var(--sp-2,8px) var(--sp-2,8px);font-size:var(--fs-14,14px);white-space:nowrap;cursor:pointer;transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s);background:var(--surface-raised,#12161E)}
.tk:hover{border-color:var(--accent-text,#FF5240)}
.tk img{width:44px;height:28px;object-fit:cover;border-radius:var(--radius-full,999px)}
.tk b{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:var(--fs-12,12px);color:var(--text,#F2F3F5)}
.tk span{color:var(--text-muted,#A7B0BE)}
.tk em{font-style:normal;font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-16,24px);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--success-text,#37D67A)}

.btn--accent::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);background-size:250% 100%;background-position:150% 0;transition:background-position var(--dur-slow,420ms)}
.btn--accent:hover::after{background-position:-50% 0}
.card__badge .low{background:var(--success-ghost,rgba(55,214,122,.18));border-color:color-mix(in srgb,var(--success,#37D67A) 50%,transparent);color:var(--success-text,#37D67A)}
.cat__presets button{background:transparent;border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-full,999px);padding:var(--sp-2,8px) var(--sp-4,16px);font-weight:600;font-size:var(--fs-14,14px);color:var(--text-muted,#A7B0BE);transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.cat__presets button:hover{border-color:var(--text,#F2F3F5);color:var(--text,#F2F3F5)}
.cat__presets button.is-on{background:var(--accent,#E02D1F);border-color:var(--accent-text,#FF5240);color:var(--accent-contrast,#FFFFFF)}
.flt fieldset{border:0;padding:var(--sp-4,16px) 0 0;margin:0;border-top:1px solid var(--border,rgba(255,255,255,.08))}
.flt fieldset:first-of-type{border-top:0}
.flt legend{font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-16,24px);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle,#8A93A3);padding:0;margin-bottom:var(--sp-3,12px)}
.flt__search{display:flex;flex-direction:column;gap:var(--sp-2,8px);font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-16,24px);font-family:var(--font-mono,"JetBrains Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle,#8A93A3);padding:var(--sp-4,16px) 0}
.flt input[type=search],.flt input[type=number],.flt select{font:inherit;font-family:var(--font-sans,"Manrope",system-ui,sans-serif);font-size:var(--fs-14,14px);text-transform:none;letter-spacing:0;padding:var(--sp-3,12px) var(--sp-3,12px);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-md,12px);background:var(--surface-raised-2,#171C26);color:var(--text,#F2F3F5);width:100%}
.flt select option{color:var(--text-inverse,#0B0D12)}
.flt input:focus,.flt select:focus{outline:2px solid var(--accent,#E02D1F);border-color:transparent}
.flt__chips{display:flex;flex-wrap:wrap;gap:var(--sp-2,8px)}
.flt__chips button{background:var(--surface-raised-2,#171C26);border:1px solid var(--border,rgba(255,255,255,.08));border-radius:var(--radius-sm,8px);padding:var(--sp-2,8px) var(--sp-3,12px);font-size:var(--fs-14,14px);font-weight:600;color:var(--text-muted,#A7B0BE);display:inline-flex;gap:var(--sp-2,8px);align-items:center;transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.flt__chips button i{font-style:normal;font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-16,24px);font-family:var(--font-mono,"JetBrains Mono",monospace);color:var(--text-subtle,#8A93A3)}
.flt__chips button:hover{border-color:var(--border-strong,rgba(255,255,255,.14));color:var(--text,#F2F3F5)}
.flt__chips button.is-on{background:var(--surface-inverse,#F2F3F5);border-color:var(--text,#F2F3F5);color:var(--text-inverse,#0B0D12)}
.flt__chips button.is-on i{color:var(--text-inverse-muted,#4B5262)}
.flt input[type=range]{width:100%;accent-color:var(--accent-text,#FF5240);margin-top:var(--sp-1,4px)}
.flt__colors{display:flex;flex-wrap:wrap;gap:var(--sp-2,8px)}
.flt__colors button{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.14));background:none;display:grid;place-items:center;padding:0;transition:var(--tr-control,color .12s,background-color .12s,border-color .12s,box-shadow .2s,transform .2s,opacity .2s)}
.flt__colors button i{width:18px;height:18px;border-radius:50%;display:block;border:1px solid var(--border-strong,rgba(255,255,255,.14))}
.flt__colors button.is-on{border-color:var(--accent-text,#FF5240);box-shadow:0 0 0 2px var(--accent-ghost,rgba(224,45,31,.16))}
.flt__checks{display:grid;gap:var(--sp-3,12px)}
.flt__checks label{display:flex;align-items:center;gap:var(--sp-3,12px);font-size:var(--fs-14,14px);color:var(--text-muted,#A7B0BE);cursor:pointer}
.flt__checks input{width:18px;height:18px;accent-color:var(--accent-text,#FF5240)}
.flt__checks label:hover{color:var(--text,#F2F3F5)}
.cat__tools select{font:inherit;font-size:var(--fs-14,14px);padding:var(--sp-3,12px) var(--sp-3,12px);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-full,999px);background:var(--surface-raised,#12161E);color:var(--text,#F2F3F5)}
.cat__tools select option{color:var(--text-inverse,#0B0D12)}
.seg--view button{padding:var(--sp-2,8px) var(--sp-3,12px);font-size:var(--fs-16,16px)}
.tag{background:var(--surface-raised-2,#171C26);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-full,999px);padding:var(--sp-2,8px) var(--sp-3,12px) var(--sp-2,8px) var(--sp-3,12px);font-size:var(--fs-14,14px);color:var(--text-muted,#A7B0BE);display:inline-flex;align-items:center;gap:var(--sp-2,8px)}
.tag i{font-style:normal;color:var(--text-subtle,#8A93A3)}
.tag:hover{border-color:var(--accent-text,#FF5240);color:var(--text,#F2F3F5)}
.tag:hover i{color:var(--accent-text,#FF5240)}
.tag--all{background:transparent;color:var(--accent-text,#FF5240);border-color:color-mix(in srgb,var(--accent,#E02D1F) 40%,transparent)}
.cards--list{grid-template-columns:1fr;gap:var(--sp-3,12px)}
.cards--list .card{flex-direction:rowmin-width:0;}
.cards--list .card__img{width:268px;flex:none;aspect-ratio:2.18}
.cards--list .card__b{display:grid;grid-template-columns:minmax(0,1fr) auto 176px;align-items:center;gap:var(--sp-4,16px);padding:var(--sp-4,16px) var(--sp-6,24px)}
.cards--list .card__t{font-size:var(--fs-16,16px);margin-bottom:var(--sp-1,4px)}
.cards--list .card__info{min-width:0}
.cards--list .card__s{white-space:normal}
.cards--list .card__chips{margin:var(--sp-3,12px) 0 0}
.cards--list .card__p{margin:0;text-align:right;white-space:nowrap;font-size:var(--fs-24,24px)}
.cards--list .card__p small{margin-top:var(--sp-2,8px)}
.cards--list .card__act{margin:0;width:176px;flex-direction:column;gap:var(--sp-2,8px)}
.cards--list .card__act .btn{width:100%;flex:none}
.cards--list .card__cmp{position:absolute;right:18px;top:18px}
.cards--list .card{position:relative}
@media(max-width:1100px){.cards--list .card__img{width:220px}.cards--list .card__b{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-4,16px)}.cards--list .card__act{width:180px}}
@media(max-width:720px){.cat__tools select{flex:1}.cards--list .card{flex-direction:column}.cards--list .card__img{width:100%}.cards--list .card__b{grid-template-columns:1fr;gap:var(--sp-3,12px);padding:var(--sp-4,16px)}.cards--list .card__p{text-align:left}.cards--list .card__act{width:100%;flex-direction:row}.cards--list .card__cmp{position:static}}

/* ===================================================================
   Состояния и недостающие компоненты (волна 2)
   =================================================================== */
/* --- фокус: видим у всех интерактивных, обводку не снимаем --- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent,#E02D1F);outline-offset:3px;border-radius:var(--radius-sm,8px)}
.btn:focus-visible,.brands button:focus-visible,.cat__presets button:focus-visible,.tag:focus-visible,.hdr__ic:focus-visible,.card__fav:focus-visible{outline-offset:2px;border-radius:var(--radius-full,999px)}
.card:focus-visible{outline-offset:0;border-radius:var(--radius-lg,18px)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent,#E02D1F);outline-offset:0;border-color:transparent}

/* --- кнопки: активное, выключенное, загрузка --- */



.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.btn.is-loading,.btn.is-loading:disabled{color:transparent;opacity:1;pointer-events:none;position:relative;cursor:progress}
.btn.is-loading::before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;color:var(--accent-contrast,#fff);animation:spin .8s linear infinite}
.btn--ghost.is-loading::before,.btn--dark.is-loading::before{color:var(--text,#F2F3F5)}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--ic:disabled,.hdr__ic:disabled{opacity:.4;pointer-events:none}

/* --- поля: наведение, выключено, ошибка, подсказка --- */
.field{display:flex;flex-direction:column;gap:var(--sp-2,8px);font-weight:500;font-size:var(--fs-12,12px);line-height:var(--lh-12,16px);font-family:var(--font-mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--text-subtle,#8A93A3)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-family:var(--font-sans,"Manrope",sans-serif);font-size:var(--fs-14,14px);line-height:var(--lh-14,20px);text-transform:none;letter-spacing:0;min-height:44px}
input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,select:hover,textarea:hover{border-color:var(--border-strong,rgba(255,255,255,.14))}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
input::placeholder,textarea::placeholder{color:var(--text-subtle,#8A93A3);opacity:1}
input.is-bad,input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger,#FF5A4E)}
.field__error{font-family:var(--font-sans,sans-serif);text-transform:none;letter-spacing:0;font-size:var(--fs-12,12px);color:var(--danger,#FF5A4E)}
select{appearance:none;-webkit-appearance:none;padding-right:var(--sp-8,32px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A93A3' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-3,12px) center}

/* --- чекбокс и радио: единый вид, тач-таргет через подпись --- */
input[type=checkbox],input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:0;border:1.5px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-sm,8px);background:var(--surface-raised-2,#171C26);display:inline-grid;place-items:center;flex:none;cursor:pointer;transition:var(--tr-control,border-color .12s,background-color .12s)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--text-muted,#A7B0BE)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--accent,#E02D1F);border-color:var(--accent-text,#FF5240)}
input[type=checkbox]:checked::before{content:"";width:10px;height:6px;border:2px solid var(--accent-contrast,#fff);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
input[type=radio]:checked::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-contrast,#fff)}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.4;cursor:not-allowed}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){min-height:44px;display:flex;align-items:center;gap:var(--sp-3,12px);cursor:pointer}
input[type=range]{width:100%;height:44px;accent-color:var(--accent-text,#FF5240);cursor:pointer;background:transparent}

/* --- чипы: активный, выключенный --- */
.brands button:active,.cat__presets button:active,.flt__chips button:active,.tag:active{transform:scale(.97)}
.brands button:disabled,.cat__presets button:disabled,.flt__chips button:disabled{opacity:.4;pointer-events:none}

/* --- бейджи как самостоятельный компонент --- */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1,4px);font-weight:600;font-size:var(--fs-12,12px);line-height:var(--lh-12,16px);font-family:var(--font-mono,monospace);letter-spacing:.06em;text-transform:uppercase;padding:var(--sp-1,4px) var(--sp-2,8px);border-radius:var(--radius-full,999px);border:1px solid var(--border-strong,rgba(255,255,255,.14));color:var(--text,#F2F3F5);background:color-mix(in srgb,var(--surface,#07090D) 75%,transparent)}
.badge--ok{background:var(--success-ghost,rgba(55,214,122,.18));border-color:color-mix(in srgb,var(--success,#37D67A) 50%,transparent);color:var(--success-text,#37D67A)}
.badge--hot{background:var(--accent,#E02D1F);border-color:var(--accent-text,#FF5240);color:var(--accent-contrast,#fff)}
.badge--warn{background:color-mix(in srgb,var(--warning,#F5B301) 18%,transparent);border-color:color-mix(in srgb,var(--warning,#F5B301) 50%,transparent);color:var(--warning,#F5B301)}

/* --- карточка: клавиатурный доступ и состояние загрузки --- */
.card:active{transform:translateY(-2px)}
.card.is-loading{pointer-events:none}

/* --- скелетоны --- */
.skeleton{position:relative;overflow:hidden;background:var(--surface-raised-2,#171C26);border-radius:var(--radius-md,12px);color:transparent}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text,#F2F3F5) 6%,transparent),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.card--skeleton{pointer-events:none}
.card--skeleton .card__img{background:var(--surface-raised-2,#171C26)}
.card--skeleton .sk-line{height:14px;margin:var(--sp-2,8px) 0}
.card--skeleton .sk-line--w{width:70%}.card--skeleton .sk-line--s{width:45%}.card--skeleton .sk-price{height:24px;width:55%;margin-top:var(--sp-3,12px)}

/* --- пустое состояние и ошибка --- */
.state{grid-column:1/-1;display:grid;gap:var(--sp-4,16px);justify-items:center;text-align:center;padding:var(--sp-12,48px) var(--sp-6,24px);border:1px dashed var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-lg,18px);color:var(--text-muted,#A7B0BE)}
.state__icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--surface-raised-2,#171C26);font-size:var(--fs-20,20px)}
.state--error{border-color:color-mix(in srgb,var(--danger,#FF5A4E) 50%,transparent)}
.state--error .state__icon{background:color-mix(in srgb,var(--danger,#FF5A4E) 18%,transparent);color:var(--danger,#FF5A4E)}
.state p{margin:0;max-width:44ch}
.state b{color:var(--text,#F2F3F5);font-weight:700;font-size:var(--fs-16,16px)}

/* --- утилиты вместо инлайн-стилей из шаблонов --- */
.is-good{color:var(--success-text,#37D67A);font-weight:600}
.m-0{margin:0}.mb-4{margin-bottom:var(--sp-4,16px)}
.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;border:1px solid color-mix(in srgb,var(--text,#F2F3F5) 25%,transparent);vertical-align:-1px;margin-right:var(--sp-1,4px);background:var(--swatch,#999)}

/* --- тач-устройства: минимальная цель 44px --- */
@media(pointer:coarse){
  .hdr__ic,.btn--ic,.card__fav,.card__cmp,.brands button,.cat__presets button,.flt__chips button,.tag,.modal__x,.gal__nav,.seg button{min-height:44px;min-width:44px}
  .flt__colors button{width:44px;height:44px}
}
/* --- уважение к настройке «меньше движения» --- */
@media(prefers-reduced-motion:reduce){.btn,.card,.brands button,.tag,.skeleton::after,.btn.is-loading::before{transition:none;animation:none}.skeleton::after{display:none}}

/* ===================================================================
   Оверлеи (волна 3)
   =================================================================== */
html{scrollbar-gutter:stable}                 /* полоса прокрутки резервируется всегда: открытие модалки не сдвигает страницу */
.modal{z-index:var(--z-modal,1300)}
.modal__box:focus{outline:none}                /* контейнер получает фокус программно; видимая обводка — у кнопки закрытия */
.modal__box:focus-visible{outline:2px solid var(--accent,#E02D1F);outline-offset:-2px}
.toast{z-index:var(--z-toast,1400)}
.cmpbar{z-index:var(--z-sticky,1100);padding-bottom:env(safe-area-inset-bottom,0)}
.fab{bottom:calc(var(--sp-4,16px) + env(safe-area-inset-bottom,0))}
.nav.is-open{z-index:var(--z-dropdown,1000)}
/* --- триггер списка: на десктопе нативный select, на узких экранах кнопка + шторка --- */
.sel{display:none}
@media(max-width:1024px){
  .sel{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2,8px);width:100%;min-height:44px;padding:var(--sp-3,12px) var(--sp-8,32px) var(--sp-3,12px) var(--sp-3,12px);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-md,12px);background:var(--surface-raised-2,#171C26);color:var(--text,#F2F3F5);font-family:var(--font-sans,"Manrope",sans-serif);font-size:var(--fs-14,14px);line-height:var(--lh-14,20px);text-align:left;text-transform:none;letter-spacing:0;position:relative;cursor:pointer}
  .sel::after{content:"";position:absolute;right:var(--sp-3,12px);top:50%;width:8px;height:8px;border-right:2px solid var(--text-subtle,#8A93A3);border-bottom:2px solid var(--text-subtle,#8A93A3);transform:translateY(-70%) rotate(45deg)}
  .sel__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;clip:rect(0 0 0 0)}
  .cat__tools .sel{width:auto;border-radius:var(--radius-full,999px);background:var(--surface-raised,#12161E)}
  .cat__tools{position:relative}
}
.sheet{position:fixed;inset:0;z-index:var(--z-modal,1300);display:flex;align-items:flex-end;justify-content:center}
.sheet__bg{position:absolute;inset:0;background:var(--overlay,rgba(4,5,7,.78));opacity:0;transition:opacity var(--dur-base,200ms) var(--ease,ease)}
.sheet__box{position:relative;width:100%;max-width:560px;max-height:min(80vh,80dvh);display:flex;flex-direction:column;background:var(--surface-raised,#12161E);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-bottom:0;border-radius:var(--radius-xl,26px) var(--radius-xl,26px) 0 0;padding-bottom:env(safe-area-inset-bottom,0);transform:translateY(100%);transition:transform var(--dur-slow,420ms) var(--ease,ease);box-shadow:var(--shadow-lg,0 32px 72px rgba(0,0,0,.52))}
.sheet.is-on .sheet__bg{opacity:1}.sheet.is-on .sheet__box{transform:none}
.sheet__grip{width:40px;height:4px;border-radius:2px;background:var(--border-strong,rgba(255,255,255,.14));margin:var(--sp-2,8px) auto 0}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3,12px);padding:var(--sp-3,12px) var(--sp-4,16px) var(--sp-2,8px) var(--sp-6,24px)}
.sheet__head b{font-family:var(--font-display,"Unbounded",sans-serif);font-weight:600;font-size:var(--fs-16,16px);line-height:var(--lh-16,24px)}
.sheet__x{width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong,rgba(255,255,255,.14));background:transparent;color:var(--text,#F2F3F5);font-size:var(--fs-24,24px);line-height:1}
.sheet__search{margin:0 var(--sp-4,16px) var(--sp-2,8px);padding:var(--sp-3,12px);border:1px solid var(--border-strong,rgba(255,255,255,.14));border-radius:var(--radius-md,12px);background:var(--surface-raised-2,#171C26);color:var(--text,#F2F3F5);font-family:var(--font-sans,sans-serif);font-size:var(--fs-16,16px)}
.sheet__list{list-style:none;margin:0;padding:0 var(--sp-2,8px) var(--sp-2,8px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet__list li{min-height:48px;display:flex;align-items:center;padding:var(--sp-3,12px) var(--sp-4,16px);border-radius:var(--radius-md,12px);font-size:var(--fs-16,16px);line-height:var(--lh-16,24px);cursor:pointer;color:var(--text,#F2F3F5)}
.sheet__list li[aria-selected="true"]{background:var(--accent-ghost,rgba(224,45,31,.16));color:var(--accent-text,#FF5240);font-weight:700}
.sheet__list li:hover,.sheet__list li:focus-visible{background:var(--surface-raised-2,#171C26);outline:none}
.sheet__list li:focus-visible{box-shadow:inset 0 0 0 2px var(--accent,#E02D1F)}
.sheet__list li[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.sheet__bg,.sheet__box{transition:none}}

/* --- переключатель темы --- */
#theme-btn svg{width:20px;height:20px}
.theme__moon{display:none}
:root[data-theme="light"] .theme__sun{display:none}
:root[data-theme="light"] .theme__moon{display:block}

/* --- светлая вставка внутри тёмной страницы (и наоборот в светлой теме):
       роли переопределяются на месте, поэтому вложенные компоненты не требуют правок --- */
.form,.calc__out,.price__list,.toast{
  --text:var(--text-inverse,#0B0D12);
  --text-muted:var(--text-inverse-muted,#4B5262);
  --text-subtle:var(--text-inverse-muted,#4B5262);
  --border:var(--border-inverse,rgba(0,0,0,.12));
  --border-strong:color-mix(in srgb,var(--text-inverse,#0B0D12) 22%,transparent);
  --surface-raised:var(--surface-inverse,#F2F3F5);
  --surface-raised-2:color-mix(in srgb,var(--text-inverse,#0B0D12) 5%,var(--surface-inverse,#F2F3F5));
  --accent-text:var(--accent-text-inverse,#D42417);
  --success-text:var(--success-text-inverse,#137A41);
}

/* ===================================================================
   Помещаемость (правка после разбора вёрстки)
   =================================================================== */
/* Подпись управляющего элемента — не абзац: перенос внутри неё запрещён.
   Раньше флекс сжимал кнопку или ссылку, и текст ломался на две строки. */
.btn,.nav a,.hdr__phone,.hdr__ic,.brands button,.cat__presets button,.flt__chips button,
.tag,.seg button,.badge,.deck__tag,.card__cmp,.card__fav,.sheet__x,.sel,.cmpbar__it,
.quiz__prog li,.ticker__live,.eyebrow{white-space:nowrap}
/* Ряды таких подписей переносятся целиком, элементом на новую строку. */
.brands,.cat__presets,.flt__chips,.hero__btns,.card__act,.cat__tools{flex-wrap:wrap}

/* Шапка: логотип и правая группа не сжимаются, зазоры тянутся по ширине окна. */
.hdr__in{gap:clamp(var(--sp-4,16px),1.6vw,var(--sp-8,32px))}
.logo,.hdr__cta{flex:none}
.nav{gap:clamp(var(--sp-4,16px),1.3vw,var(--sp-6,24px))}
.hdr__phone{margin:0}

/* Действия в карточке: если две кнопки не встают в ряд, вторая занимает свою строку целиком. */
.card__act .btn{flex:1 1 auto;min-width:112px}