@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-latin-ext.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Golos Text"; src: url("/assets/fonts/golos-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root {
  --snow: #ffffff;
  --ice: #eef3fa;
  --ice-2: #e2eaf5;
  --navy: #061a3a;
  --navy-2: #0b2a5c;
  --navy-3: #13386f;
  --ink: #0c1524;
  --ink-2: #3f4b5e;
  --ink-3: #66728a;
  --line: #d9e1ec;
  --line-2: #c3cedd;
  --brand: #0052b4;
  --brand-hover: #00418f;
  --brand-ink: #004aa3;
  --brand-2: #4d93ff;
  --brand-soft: #e3eeff;
  --heat-bg: #fff1dc;
  --heat-ink: #8a4a00;
  --wa: #0e7a43;
  --wa-hover: #0b6637;
  --err: #b03224;
  --focus: #2f7cf6;
  --on-dark: #ffffff;
  --on-dark-2: #b7c6dd;
  --on-dark-line: rgb(255 255 255 / .14);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --gutter: 16px;
  --maxw: 1240px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;

  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .8125rem; --t-sm: .9375rem; --t-md: 1.0625rem; --t-lg: 1.1875rem; --t-xl: 1.5rem;
  --t-h2: clamp(1.625rem, 3.2vw, 2.25rem);
  --t-h1: clamp(1.875rem, 4.6vw, 3rem);

  --shadow-1: 0 1px 2px rgb(6 26 58 / .06), 0 2px 8px -2px rgb(6 26 58 / .08);
  --shadow-2: 0 1px 2px rgb(6 26 58 / .05), 0 24px 48px -24px rgb(6 26 58 / .28);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-exit: cubic-bezier(0.5, 0, 0.75, 0);
  --d-press: 100ms; --d-fast: 160ms; --d-med: 280ms; --d-slow: 480ms;
  --stagger: 40ms;
  --header-h: 64px;
}
@media (min-width: 720px) { :root { --gutter: 32px; --header-h: 72px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: var(--t-md); line-height: 1.55; color: var(--ink); background: var(--snow); padding-bottom: 76px; overflow-x: clip; }
@media (min-width: 960px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; font-weight: 700; }
p, li { text-wrap: pretty; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.i { flex: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 720px; display: grid; gap: var(--s4); justify-items: start; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.025em; font-weight: 750; }
.anchor { position: relative; top: calc(-1 * var(--header-h)); display: block; }
.cut { image-rendering: auto; }

/* ---------- buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--r-sm); border: 1px solid transparent; font-weight: 650; font-size: var(--t-sm); text-decoration: none; cursor: pointer; white-space: nowrap; transition-property: background-color, border-color, color, transform; transition-duration: var(--d-fast); transition-timing-function: var(--ease); }
.btn:active { transform: scale(.97); transition-duration: var(--d-press); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: var(--t-md); }
.btn--sm { min-height: 40px; padding: 0 16px; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--brand-soft); }
.btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .38); }
.btn--ghost:hover { border-color: #fff; background: rgb(255 255 255 / .06); }
.btn--wa { background: var(--wa); color: #fff; }
.foot__fb { background: #1877f2; color: #fff; }
.btn--wa:hover { background: var(--wa-hover); }
.btn--line { background: var(--snow); border-color: var(--line-2); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--block { width: 100%; }
.iconbtn { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--snow); display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; }
.iconbtn:hover { border-color: var(--ink-3); }
.linkbtn { border: 0; background: none; padding: 10px 0; color: var(--brand-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .94); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: 0 1px 0 var(--line); }
.top__in { height: var(--header-h); display: flex; align-items: center; gap: var(--s3); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.logo__mark { color: var(--brand); flex: none; }
.logo__txt { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo__txt span { font-weight: 500; color: var(--ink-3); }
@media (max-width: 399px) { .top .logo__txt span { display: none; } }
.logo--light, .logo--light .logo__mark { color: var(--snow); }
.logo--light .logo__txt span { color: var(--on-dark-2); }
.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; background: none; text-decoration: none; font-size: var(--t-sm); font-weight: 550; color: var(--ink-2); cursor: pointer; border-radius: var(--r-sm); transition-property: color, background-color; transition-duration: var(--d-fast); }
.nav__link:hover { color: var(--ink); background: var(--ice); }
.nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--brand); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--d-med) var(--ease); }
.nav__link[aria-current="true"] { color: var(--ink); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__btn .i { transition: transform var(--d-fast) var(--ease); }
.nav__btn[aria-expanded="true"] { color: var(--ink); background: var(--ice); }
.nav__btn[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav__drop { position: relative; }
.top__phone { display: none; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; min-height: 44px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top__phone .i { color: var(--brand); }
.top__cta { margin-left: auto; min-height: 44px; padding: 0 16px; flex: none; }
.top .logo { min-width: 0; flex: 0 1 auto; }
.top .logo__txt { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379px) { .top__cta { padding: 0 12px; } .top .logo__txt { font-size: 1rem; } }
@media (max-width: 479px) { .top__cta { display: none; } .lang { margin-left: auto; } }
.burger { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--snow); cursor: pointer; flex: none; }
@media (min-width: 1100px) {
  .nav { display: block; margin-left: auto; }
  .top__cta { margin-left: var(--s3); }
}
@media (min-width: 1280px) { .top__phone { display: inline-flex; margin-left: var(--s3); } }
@media (min-width: 1280px) and (max-width: 1519px) { :lang(ru) .top__phone { display: none; } }

/* mega menu */
.mega { position: absolute; top: calc(100% + 10px); left: 50%; width: min(720px, 90vw); transform: translateX(-50%); background: var(--snow); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); padding: var(--s4); z-index: 50; }
.mega:not([hidden]) { animation: drop var(--d-fast) var(--ease); }
.mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.mega__item { display: grid; grid-template-columns: 112px 1fr; grid-template-rows: auto auto; column-gap: var(--s4); align-items: center; padding: var(--s3); border-radius: var(--r-md); text-decoration: none; transition: background-color var(--d-fast); }
.mega__item:hover { background: var(--ice); }
.mega__img { grid-row: span 2; display: grid; place-items: center; height: 64px; }
.mega__img img { max-height: 64px; width: auto; }
.mega__name { font-weight: 700; align-self: end; line-height: 1.25; }
.mega__price { font-size: var(--t-xs); color: var(--ink-3); align-self: start; }
.mega__foot { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s3); padding: var(--s3) var(--s3) 0; border-top: 1px solid var(--line); }
.mega__foot a { font-weight: 650; color: var(--brand-ink); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.mega__foot a:hover { text-decoration: underline; }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* mobile drawer */
.drawer { border: 0; padding: 0; margin: 0 0 0 auto; height: 100%; max-height: 100dvh; width: min(420px, 100%); max-width: 100%; background: var(--snow); color: var(--ink); }
.drawer::backdrop { background: rgb(6 26 58 / .5); }
.drawer[open] { animation: slide-in var(--d-med) var(--ease); }
.drawer[open]::backdrop { animation: fade var(--d-med) var(--ease); }
.drawer.is-closing { animation: slide-out var(--d-fast) var(--ease-exit) forwards; }
.drawer.is-closing::backdrop { animation: fade var(--d-fast) var(--ease-exit) reverse forwards; }
.drawer__box { min-height: 100%; display: flex; flex-direction: column; gap: var(--s4); padding: var(--s3) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom)); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.drawer__cta { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r-md); background: var(--navy); color: #fff; text-decoration: none; }
.drawer__cta .i { color: var(--brand-2); }
.drawer__cta span { display: grid; font-size: var(--t-sm); color: var(--on-dark-2); }
.drawer__cta b { color: #fff; font-size: var(--t-lg); }
.drawer__h { font-size: var(--t-sm); font-weight: 650; color: var(--ink-3); margin: var(--s2) 0 var(--s1); }
.drawer__models { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer__models a { display: grid; grid-template-columns: 84px 1fr; gap: var(--s3); align-items: center; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer__models span:last-child { display: grid; font-size: var(--t-xs); color: var(--ink-3); }
.drawer__models b { font-size: var(--t-md); color: var(--ink); }
.drawer__img { display: grid; place-items: center; height: 40px; }
.drawer__img img { max-height: 40px; width: auto; }
.drawer__brands { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.drawer__brands a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); text-decoration: none; font-weight: 600; font-size: var(--t-sm); }
.drawer__list { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--line); }
.drawer__list a { display: flex; align-items: center; min-height: 52px; font-size: var(--t-lg); font-weight: 650; text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer__contact { margin-top: auto; display: grid; gap: var(--s2); padding-top: var(--s4); }
@keyframes slide-in { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-out { from { transform: none; opacity: 1; } to { transform: translateX(24px); opacity: 0; } }

/* ---------- hero: interior photo + pick panel ---------- */
.hero { position: relative; isolation: isolate; background: var(--ice); }
.hero__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 800 / 460; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.js .hero__media img { animation: hero-photo 1.4s var(--ease) both; }
.hero__credit { position: absolute; right: var(--s3); top: var(--s3); padding: 3px 8px; border-radius: var(--r-xs); background: rgb(255 255 255 / .72); color: var(--ink-2); font-size: 11px; }
.hero__in { position: relative; margin-top: -48px; }
.hero__panel { display: grid; gap: var(--s3); padding: var(--s4) var(--s4) var(--s4); background: var(--snow); border-radius: var(--r-xl); box-shadow: 0 0 0 1px rgb(6 26 58 / .06), var(--shadow-2); }
.js .hero__panel { animation: rise 600ms var(--ease) 120ms both; }
.hero h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.035em; font-weight: 800; color: var(--navy); max-width: 17ch; }
.hero__lead { font-size: var(--t-md); color: var(--ink-2); max-width: 44ch; }
.pick { display: grid; gap: var(--s2); }
.pick__h { font-weight: 700; font-size: var(--t-sm); color: var(--ink); }
.pick__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.pick__opt { display: grid; gap: 1px; justify-items: start; text-align: left; min-height: 64px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--snow); cursor: pointer; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.3; transition-property: border-color, background-color, color, transform; transition-duration: var(--d-fast); transition-timing-function: var(--ease); }
.pick__opt b { font-size: var(--t-sm); color: var(--ink); font-weight: 700; white-space: nowrap; }
.pick__opt em { font-style: normal; font-weight: 650; color: var(--brand-ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.pick__opt:hover { border-color: var(--ink-3); }
.pick__opt:active { transform: scale(.98); transition-duration: var(--d-press); }
.pick__opt[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark-2); }
.pick__opt[aria-pressed="true"] b { color: #fff; }
.pick__opt[aria-pressed="true"] em { color: #9cc2ff; }
.hero__btns { display: grid; gap: var(--s3); justify-items: start; }
.hero__btns .btn { width: 100%; white-space: normal; text-align: center; }
.hero__alt { font-weight: 650; color: var(--brand-ink); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; justify-self: center; }
.hero__strip { padding: var(--s4) 0; }
.hero__facts { list-style: none; margin: 0 auto; display: grid; gap: var(--s4); }
.hero__facts li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.hero__facts li > .i { color: var(--brand); margin-top: 2px; }
.hero__facts span { display: grid; }
.hero__facts b { color: var(--ink); font-size: var(--t-md); }
@keyframes hero-photo { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

@media (min-width: 560px) {
  .pick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__btns { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--s5); }
  .hero__btns .btn { width: auto; white-space: nowrap; }
  .hero__alt { justify-self: start; }
}
@media (min-width: 720px) {
  .hero__media { aspect-ratio: 16 / 6; }
  .hero__in { margin-top: -96px; }
  .hero__panel { padding: var(--s5); max-width: 600px; }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-areas: "stack"; background: var(--snow); }
  .hero__media { grid-area: stack; aspect-ratio: auto; height: clamp(480px, calc(78svh - var(--header-h)), 600px); }
  .hero__media img { object-position: 62% 50%; }
  .hero__credit { top: auto; bottom: var(--s4); right: var(--s4); }
  .hero__in { grid-area: stack; margin-top: 0; align-self: center; padding-top: var(--s5); padding-bottom: var(--s5); }
  .hero__panel { max-width: 600px; padding: var(--s6); background: rgb(255 255 255 / .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .hero__strip { border-bottom: 1px solid var(--line); }
}
@media (min-width: 1400px) { .hero__media img { object-position: 70% 50%; } }


/* range input */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; --p: 15%; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--brand) var(--p), var(--ice-2) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--ice-2); }
.range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 6px rgb(6 26 58 / .25); transition: transform var(--d-fast) var(--ease); }
.range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); box-shadow: 0 2px 6px rgb(6 26 58 / .25); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.range:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.range--dark::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--brand-2) var(--p), rgb(255 255 255 / .18) var(--p)); }
.range--dark::-moz-range-track { background: rgb(255 255 255 / .18); }
.range--dark::-moz-range-progress { background: var(--brand-2); }
.range--dark::-webkit-slider-thumb { border-color: #fff; }

/* ---------- sections ---------- */
.section { padding: var(--s7) 0; }
.section--ice { background: var(--ice); }
.section--ink { background: var(--navy); color: var(--on-dark); }
@media (min-width: 960px) { .section { padding: 80px 0; } }
.head { display: grid; gap: var(--s2); margin-bottom: var(--s5); max-width: 760px; }
.head--center { text-align: center; margin-left: auto; margin-right: auto; justify-items: center; }
.sub { color: var(--ink-2); font-size: var(--t-md); max-width: 60ch; }
.sub a, .note a { color: var(--brand-ink); font-weight: 650; }
.note { margin-top: var(--s6); color: var(--ink-2); max-width: 75ch; }

/* ---------- segmented filters ---------- */
.bar { display: grid; gap: var(--s3); margin-bottom: var(--s5); padding: var(--s4); background: var(--ice); border-radius: var(--r-lg); }
@media (min-width: 900px) { .bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4) var(--s5); } }
.bar .seg { background: var(--snow); }
.fgroup { display: grid; gap: 6px; min-width: 0; }
.fgroup__l { font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
@media (max-width: 899px) { .bar .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; overflow: hidden; } .bar .seg__opt span { white-space: normal; padding: 6px 6px; } }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; overflow: hidden; } .bar .seg__opt span { white-space: normal; padding: 6px 8px; } }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--snow); max-width: 100%; overflow-x: auto; margin: 0; padding: 0; }
.seg__opt { position: relative; flex: none; display: block; min-width: 0; }
.seg__opt + .seg__opt { border-left: 1px solid var(--line); }
.seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 6px 16px; font-weight: 600; font-size: var(--t-sm); text-align: center; line-height: 1.2; white-space: nowrap; color: var(--ink-2); transition-property: background-color, color; transition-duration: var(--d-fast); }
.seg__opt small { font-weight: 500; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.seg__opt:hover input:not(:checked) + span { background: var(--ice); color: var(--ink); }
.seg__opt input:checked + span { background: var(--navy); color: #fff; }
.seg__opt input:checked + span small { color: var(--on-dark-2); }
.seg__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.order .seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; }
.order .seg__opt span { white-space: normal; padding: 8px 10px; overflow-wrap: anywhere; }
.seg--4, .order .seg--4 { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.seg--4 .seg__opt + .seg__opt { border-left: 0; }
.seg--4 .seg__opt:nth-child(even) { border-left: 1px solid var(--line); }
.seg--4 .seg__opt:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 560px) {
  .seg--4, .order .seg--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .seg--4 .seg__opt + .seg__opt { border-left: 1px solid var(--line); }
  .seg--4 .seg__opt:nth-child(n+3) { border-top: 0; }
}

/* ---------- product tiles ---------- */
.tiles { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tile { container-type: inline-size; display: flex; flex-direction: column; background: var(--snow); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow var(--d-med) var(--ease), transform var(--d-med) var(--ease); }
.tile:hover { box-shadow: 0 0 0 1px var(--line-2), var(--shadow-2); transform: translateY(-2px); }
.tile[hidden] { display: none; }
.tile__media { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 1; padding: var(--s6) var(--s5) var(--s3); overflow: hidden; background: radial-gradient(120% 100% at 50% 100%, var(--snow) 35%, var(--ice) 100%); }
.tile__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 16px rgb(6 26 58 / .12)); transition: transform var(--d-slow) var(--ease); }
.tile__media .raw { mix-blend-mode: multiply; filter: none; }
.tile__media:hover img { transform: translateY(-3px) scale(1.02); }
.tile__badge { position: absolute; left: var(--s3); top: var(--s3); background: var(--navy); color: #fff; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 999px; }
.tile__body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); flex: 1; }
.tile__brand { font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-ink); }
.tile__title { font-size: var(--t-lg); letter-spacing: -0.015em; line-height: 1.2; margin-top: -6px; }
.tile__title a { text-decoration: none; }
.tile__title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.heat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--heat-bg); color: var(--heat-ink); font-weight: 600; font-size: var(--t-xs); padding: 4px 10px 4px 8px; border-radius: 999px; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.ticks li { display: flex; gap: 8px; align-items: flex-start; }
.ticks .i { color: var(--brand); margin-top: 3px; flex: none; }
.ticks--lg { font-size: var(--t-md); gap: 10px; color: var(--ink); }
.tile .ticks li:nth-child(n+3) { display: none; }
/* power picker: 2x2 in narrow cards, one row when there is room */
.vars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: auto; }
@container (min-width: 330px) { .vars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.var { display: grid; gap: 1px; justify-items: center; align-content: center; min-height: 48px; padding: 4px 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--snow); color: var(--ink); cursor: pointer; transition-property: background-color, color, border-color; transition-duration: var(--d-fast); }
.var b { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.var small { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.var:hover { border-color: var(--brand); }
.var:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.var[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.var[aria-pressed="true"] small { color: var(--on-dark-2); }
.tile__price { display: grid; gap: 2px; padding-top: var(--s1); }
.price { font-size: 1.625rem; font-weight: 780; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.price.is-ask { font-size: var(--t-xl); color: var(--ink-2); }
.tile__meta { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tile__actions { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.tile__actions .btn { min-height: 48px; }
.flash { animation: flash var(--d-med) var(--ease); }
@keyframes flash { from { opacity: .3; } to { opacity: 1; } }

/* ---------- compare ---------- */
.cmp__pickers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s5); }
.cmp__pickers[hidden] { display: none; }
.cmp__pick select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--snow); font-weight: 650; font-size: 15px; }
.cmp__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(220px, 1fr)); gap: var(--s4); overflow-x: auto; }
.cmp.is-two .cmp__grid { grid-template-columns: 1fr 1fr; gap: var(--s3); overflow: visible; }
.cmp__col { display: grid; gap: var(--s3); align-content: start; text-align: center; background: var(--snow); border-radius: var(--r-lg); padding: var(--s5) var(--s4); box-shadow: 0 0 0 1px var(--line); }
.cmp__col[hidden] { display: none; }
.cmp__img { display: grid; place-items: center; height: 96px; }
.cmp__img img { max-height: 84px; width: auto; filter: drop-shadow(0 12px 12px rgb(6 26 58 / .1)); }
.cmp__img .raw { mix-blend-mode: multiply; filter: none; }
.cmp__col h3 { font-size: var(--t-lg); line-height: 1.2; min-height: 2.4em; display: grid; align-items: center; }
.cmp__col h3 a { text-decoration: none; }
.cmp__col h3 a:hover { text-decoration: underline; }
.cmp__price { color: var(--ink-2); font-size: var(--t-sm); }
.cmp__price b { color: var(--ink); font-size: var(--t-md); }
.cmp__col .btn { justify-self: center; }
.cmp dl { margin: var(--s3) 0 0; display: grid; border-top: 1px solid var(--line); text-align: left; }
.cmp dl div { padding: var(--s3) 0; border-bottom: 1px solid var(--line); min-height: 72px; }
.cmp dl div:last-child { border-bottom: 0; }
.cmp dt { font-size: var(--t-xs); color: var(--ink-3); }
.cmp dd { margin: 2px 0 0; font-weight: 650; font-size: var(--t-sm); }
.na { color: var(--ink-3); font-weight: 400; }
@media (max-width: 479px) { .cmp__col { padding: var(--s4) var(--s3); } }

/* ---------- faq ---------- */
.faq { display: grid; gap: var(--s6); }
@media (min-width: 960px) { .faq { grid-template-columns: .8fr 1.2fr; gap: var(--s8); align-items: start; } }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 20px 48px 20px 0; font-weight: 650; font-size: var(--t-lg); position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 2px; background: currentColor; transition-property: transform; transition-duration: var(--d-med); transition-timing-function: var(--ease); }
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0); }
.faq__item p { padding: 0 0 var(--s5); color: var(--ink-2); max-width: 65ch; }
.faq__item[open] p { animation: open var(--d-med) var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.foot { background: var(--navy); color: var(--on-dark-2); padding: var(--s7) 0 var(--s5); font-size: var(--t-sm); }
.foot__call { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s7); border-bottom: 1px solid var(--on-dark-line); }
.foot__call h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.03em; color: var(--snow); max-width: 18ch; }
.foot__sub { font-size: var(--t-lg); }
.foot__btns > * { max-width: 100%; }
.foot__btns .btn { white-space: normal; text-align: center; }
.foot__btns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s2); }
.foot__phone { display: inline-flex; align-items: center; gap: 12px; font-weight: 750; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--snow); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.foot__phone .i { color: var(--brand-2); }
.foot__phone:hover { text-decoration: underline; text-underline-offset: 6px; }
.foot__meta { color: var(--on-dark-2); }
.foot__grid { display: grid; gap: var(--s6); padding-top: var(--s7); }
.foot__lead { margin-top: var(--s3); max-width: 34ch; }
.foot__col { display: grid; gap: 2px; align-content: start; }
.foot__col h2 { font-size: var(--t-sm); color: var(--snow); margin-bottom: var(--s2); }
.foot__col a { text-decoration: none; padding: 7px 0; }
.foot__col a:hover { color: var(--snow); text-decoration: underline; }
.foot__legal { display: grid; gap: var(--s2); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--on-dark-line); font-size: var(--t-xs); color: #8fa3c2; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } .foot__legal { grid-auto-flow: column; justify-content: space-between; } }

/* ---------- mobile contact dock ---------- */
.dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s2); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--line); }
.dock__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; border: 1px solid var(--line-2); }
.dock__btn--wa { background: var(--wa); color: #fff; border-color: var(--wa); }
@media (min-width: 960px) { .dock { display: none; } }

/* ---------- product page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--t-sm); color: var(--ink-3); padding-top: var(--s4); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.pdp { padding: var(--s5) 0 var(--s8); }
.pdp__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.pdp__media { position: relative; background: radial-gradient(120% 90% at 50% 100%, var(--snow) 30%, var(--ice) 100%); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.pdp__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: var(--s6); }
.pdp__media .raw { mix-blend-mode: multiply; }
.tag--media { position: absolute; left: var(--s5); top: var(--s5); background: var(--navy); color: #fff; font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: var(--r-xs); }
.row__brand { font-size: var(--t-sm); font-weight: 700; color: var(--brand-ink); }
.pdp__info { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-content: start; }
.pdp__prices { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pdp__info h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; letter-spacing: -0.03em; }
.pdp__tag { color: var(--ink-2); font-size: var(--t-lg); }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ptable caption { text-align: left; font-weight: 700; padding-bottom: var(--s2); }
.ptable th, .ptable td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); text-align: left; }
.ptable thead th { font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; }
.ptable td b { font-size: var(--t-md); }
.pdp__incl { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.pdp__help { font-size: var(--t-sm); color: var(--ink-2); }
.pdp__help a { color: var(--brand-ink); font-weight: 650; }
@media (min-width: 900px) { .pdp__in { grid-template-columns: 1.05fr .95fr; gap: var(--s8); } .pdp__media { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; } }
.pdp__order { display: grid; gap: var(--s6); }
.pdp__in > *, .pdp__order > * { min-width: 0; }
.pdp__order h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: var(--s3); }
.pdp__order > div > p { color: var(--ink-2); }
@media (min-width: 900px) { .pdp__order { grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; } }
.specs { margin: var(--s5) 0; display: grid; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-2); }
.specs dd { margin: 0; font-weight: 650; }
.pdp__desc { color: var(--ink-2); max-width: 60ch; }
.panel { background: var(--snow); border-radius: var(--r-lg); padding: var(--s5) var(--s4); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
@media (min-width: 720px) { .panel { padding: var(--s6); } }

/* ---------- order form ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; }
.order fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s3); min-width: 0; }
.order__name { font-weight: 750; font-size: var(--t-xl); letter-spacing: -0.02em; padding: 0; }
.order__calc { font-size: var(--t-sm); color: var(--brand-ink); background: var(--brand-soft); padding: 8px 12px; border-radius: var(--r-sm); }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
@media (min-width: 560px) { .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: var(--t-sm); font-weight: 650; }
.field input, .field select { width: 100%; min-width: 0; max-width: 100%; min-height: 50px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--snow); font-size: 16px; transition-property: border-color, box-shadow; transition-duration: var(--d-fast); }
.field input:hover, .field select:hover { border-color: #8f9cb0; }
.field input:focus, .field select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgb(0 82 180 / .2); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px rgb(176 50 36 / .15); }
.opt { font-weight: 400; color: var(--ink-3); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--brand); }
.check input[aria-invalid="true"] { outline: 2px solid var(--err); outline-offset: 2px; }
.order__error { color: var(--err); font-weight: 650; font-size: var(--t-sm); }
.order__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--s3); border-top: 1px solid var(--line); }
.order__total span { color: var(--ink-2); }
.order__total strong { font-size: var(--t-xl); font-weight: 780; font-variant-numeric: tabular-nums; }
.order__note { font-size: var(--t-xs); color: var(--ink-3); text-align: center; }

/* ---------- modal: bottom sheet on phones ---------- */
.modal { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: min(640px, 100%); overflow-x: hidden; max-height: 94svh; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--snow); color: var(--ink); }
.modal::backdrop { background: rgb(6 26 58 / .55); }
.modal[open] { animation: sheet var(--d-med) var(--ease); }
.modal[open]::backdrop { animation: fade var(--d-med) var(--ease); }
.modal__box { padding: var(--s4) var(--s4) var(--s5); }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s2); }
.modal__head h2 { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); }
@media (min-width: 720px) { .modal { margin: auto; border-radius: var(--r-lg); } .modal__box { padding: var(--s5) var(--s6) var(--s6); } .modal[open] { animation-name: pop; } }
@keyframes sheet { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- shared layout pieces ---------- */
:lang(ru) body, :lang(ru) button, :lang(ru) input, :lang(ru) select { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.h2--mb { margin-bottom: var(--s6); }
.h3 { font-size: var(--t-lg); letter-spacing: -0.02em; margin: var(--s6) 0 var(--s3); }
.section--tight { padding-top: var(--s6); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm); font-weight: 700; color: var(--brand-ink); margin-bottom: var(--s3); }
.section--ink .kicker { color: var(--brand-2); }
.head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4) var(--s6); }
.head--row > div { display: grid; gap: var(--s3); max-width: 720px; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--brand-ink); text-decoration: none; border-bottom: 2px solid currentColor; padding-top: 2px; align-self: start; justify-self: start; }
.more .i { transition: transform var(--d-fast) var(--ease); }
.more:hover .i { transform: translateX(4px); }
.split { display: grid; gap: var(--s6); }
.split__text { display: grid; gap: var(--s4); align-content: start; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s8); align-items: start; }
  .split__text { position: sticky; top: calc(var(--header-h) + var(--s6)); }
}

.lang { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; margin-left: auto; flex: none; transition: border-color var(--d-fast), color var(--d-fast); }
.lang:hover { border-color: var(--ink-3); color: var(--ink); }
.lang + .top__cta { margin-left: 0; }
@media (min-width: 1100px) { .lang { margin-left: var(--s2); } }
@media (min-width: 1280px) { .top__phone + .lang { margin-left: var(--s3); } }

/* page header for topic pages */
.ptop { padding: var(--s5) 0 var(--s6); }
.ptop__h { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; color: var(--navy); max-width: 18ch; }
.ptop__lead { margin-top: var(--s4); font-size: var(--t-lg); color: var(--ink-2); max-width: 62ch; }
@media (min-width: 960px) { .ptop { padding: var(--s6) 0 var(--s7); } }

/* call-to-action band */
.section--band { padding: var(--s6) 0 var(--s7); }
.band { display: grid; gap: var(--s5); padding: var(--s6) var(--s5); border-radius: var(--r-xl); background: var(--navy-2) radial-gradient(120% 140% at 100% 0%, var(--navy-3), transparent 60%); color: #fff; }
@media (min-width: 960px) { .band { padding: var(--s7); } }
.band .h2 { max-width: 20ch; }
.band__text { color: var(--on-dark-2); font-size: var(--t-lg); margin-top: var(--s3); max-width: 52ch; }
.band__btns { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.band__btns .btn { white-space: normal; }
@media (min-width: 960px) { .band { grid-template-columns: 1fr auto; align-items: center; gap: var(--s7); } }

/* ---------- calculator: everything on one screen, result updates live ---------- */
.calc { background: var(--ice); padding: var(--s7) 0; }
@media (min-width: 960px) { .calc { padding: 80px 0; } }
.calc__head { display: grid; gap: var(--s3); margin-bottom: var(--s6); max-width: 760px; }
.calc2 { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--snow); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); overflow: clip; }
.calc2__in { display: grid; gap: var(--s6); padding: var(--s5) var(--s4); min-width: 0; }
.calc2__out { display: grid; gap: var(--s4); align-content: start; padding: var(--s5) var(--s4); background: var(--ice); border-top: 1px solid var(--line); min-width: 0; }
@media (min-width: 720px) { .calc2__in, .calc2__out { padding: var(--s6); } }
@media (min-width: 1040px) {
  .calc2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .calc2__in { padding: var(--s7) var(--s6); }
  .calc2__out { border-top: 0; border-left: 1px solid var(--line); padding: var(--s7) var(--s6); }
}
.calc2__block { display: grid; gap: var(--s3); }
.calc2__label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-lg); }
.calc2__label small { font-weight: 500; font-size: var(--t-sm); color: var(--ink-3); }
.calc2__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.calc2__note { font-size: var(--t-xs); color: var(--ink-3); }

/* mobile: result summary stays in view while the form is filled */
.peek { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding: 8px 8px 8px 16px; border-radius: var(--r-md); background: var(--navy); color: var(--on-dark-2); text-decoration: none; font-size: var(--t-sm); box-shadow: 0 10px 24px -8px rgb(6 26 58 / .5); font-variant-numeric: tabular-nums; }
.peek b { color: #fff; font-size: var(--t-lg); }
.peek [data-peek-price] { white-space: nowrap; }
.peek__go { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px 0 14px; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 700; white-space: nowrap; }
@media (min-width: 960px) { .peek { bottom: var(--s4); } }
@media (min-width: 1040px) { .peek { display: none; } }

/* rooms */
.rooms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); padding-top: var(--s5); border-top: 1px solid var(--line); }
.rooms__hint { font-size: var(--t-xs); color: var(--ink-3); max-width: 40ch; }
.rooms__tabs { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.rooms__tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--snow); font-weight: 650; font-size: var(--t-sm); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--d-fast), border-color var(--d-fast), color var(--d-fast); }
.rooms__tab:only-child { padding-right: 14px; }
.rooms__tab small { font-weight: 500; color: var(--ink-3); }
.rooms__tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.rooms__tab[aria-selected="true"] small { color: var(--on-dark-2); }
.rooms__x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: inherit; opacity: .7; }
.rooms__x:hover { opacity: 1; background: rgb(127 127 127 / .2); }
.rooms__add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px dashed var(--ink-3); border-radius: 999px; background: none; color: var(--brand-ink); font-weight: 650; font-size: var(--t-sm); cursor: pointer; }
.rooms__add:hover { border-style: solid; background: var(--brand-soft); }
.rooms__tab.is-in { animation: pop var(--d-med) var(--ease); }

/* area */
.area { display: grid; gap: var(--s3); }
.area__num { display: flex; align-items: baseline; gap: 8px; }
.area__input { width: 2.3ch; font-size: clamp(3rem, 9vw, 4.25rem); font-weight: 780; letter-spacing: -0.04em; line-height: 1; border: 0; border-bottom: 2px solid var(--line-2); padding: 0 0 4px; background: transparent; font-variant-numeric: tabular-nums; -moz-appearance: textfield; color: var(--navy); }
.area__input::-webkit-outer-spin-button, .area__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.area__input:focus { outline: none; border-bottom-color: var(--brand); }
.area__unit { font-size: var(--t-xl); font-weight: 650; color: var(--ink-2); }
.hint { font-size: var(--t-sm); color: var(--ink-3); max-width: 56ch; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 40px; min-width: 64px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--snow); font-weight: 600; font-size: var(--t-sm); cursor: pointer; font-variant-numeric: tabular-nums; transition-property: background-color, border-color, color, transform; transition-duration: var(--d-fast); transition-timing-function: var(--ease); }
.chip:hover { border-color: var(--ink-3); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }

/* condition toggles */
.toggles { display: grid; gap: var(--s2); }
.toggles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.toggle { position: relative; display: block; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.toggle span { height: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-content: center; padding: 12px 40px 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--snow); line-height: 1.25; position: relative; transition-property: border-color, background-color, transform; transition-duration: var(--d-fast); transition-timing-function: var(--ease); }
.toggle .i { grid-row: span 2; color: var(--brand); align-self: center; }
.toggle b { font-size: var(--t-sm); font-weight: 700; }
.toggle small { font-size: var(--t-xs); color: var(--ink-3); grid-column: 2; }
.toggle span::after { content: ""; position: absolute; right: 12px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 5px; border: 1.5px solid var(--line-2); background: var(--snow) center / 14px no-repeat; transition-property: background-color, border-color; transition-duration: var(--d-fast); }
.toggle:hover span { border-color: var(--ink-3); }
.toggle:active span { transform: scale(.98); }
.toggle input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.toggle input:checked + span::after { background-color: var(--brand); border-color: var(--brand); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.toggle input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg--use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: hidden; }
.seg--use .seg__opt span { flex-direction: row; gap: 6px; white-space: normal; padding: 8px 6px; min-height: 52px; font-size: var(--t-xs); }
@media (min-width: 480px) { .seg--use .seg__opt span { font-size: var(--t-sm); } }
@media (max-width: 479px) { .seg--use .seg__opt .i { display: none; } }

/* result: power */
.power { display: grid; gap: 6px; }
.power__h { font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); }
.power__btu { font-size: clamp(2.75rem, 8vw, 4rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.power__btu small { font-size: .38em; font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.power__btu span { display: inline-block; }
.power__btu span.is-changed { animation: tick var(--d-med) var(--ease); }
@keyframes tick { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.power__why { color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; }
.power__why b { color: var(--ink); }
.power.is-big .power__btu { font-size: clamp(2rem, 6vw, 2.75rem); }
.bands { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bands li { position: relative; display: grid; gap: 1px; padding: 8px 8px 7px; border-radius: var(--r-xs); background: var(--snow); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; transition: background-color var(--d-med) var(--ease), color var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease); }
.bands b { color: var(--ink-2); font-size: var(--t-sm); }
.bands small { font-size: 11px; }
.bands li.is-on { background: var(--navy); color: var(--on-dark-2); box-shadow: none; }
.bands li.is-on b { color: #fff; }
.bands li.is-used:not(.is-on) { box-shadow: inset 0 0 0 2px var(--brand-2); }

/* result: offers */
.offers { display: grid; gap: var(--s2); }
.offers__h { font-size: var(--t-sm); font-weight: 650; color: var(--ink-2); margin-top: var(--s2); }
.offer { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px var(--s3); align-items: center; padding: var(--s3); background: var(--snow); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.offer.is-in { animation: rise var(--d-med) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.offer__img { grid-row: span 2; display: grid; place-items: center; height: 56px; }
.offer__img img { max-height: 44px; width: auto; }
.offer__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s3); min-width: 0; }
.offer__name { font-weight: 700; line-height: 1.25; text-decoration: none; }
.offer__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.offer__price { font-weight: 780; font-size: var(--t-lg); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.offer__meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: var(--t-xs); color: var(--ink-3); }
.offer__tag { display: inline-block; padding: 2px 8px; border-radius: var(--r-xs); background: var(--navy); color: #fff; font-weight: 650; }
.offer__tag--win { background: var(--heat-bg); color: var(--heat-ink); }
.offer__heat { display: inline-flex; align-items: center; gap: 4px; }
.offer__heat.is-ok { color: #116b3c; }
.offer__heat.is-warn { color: var(--heat-ink); }
.offer__act { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: var(--s2); margin-top: var(--s2); }
.offer__act .btn { min-height: 42px; }
@media (min-width: 560px) {
  .offer { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .offer__act { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; grid-template-columns: auto; }
}
.offers__total { display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: var(--navy); color: var(--on-dark-2); }
.offers__total p { font-size: var(--t-sm); }
.offers__total .btn { justify-self: start; white-space: normal; }
.offers__warn { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--heat-bg); color: var(--heat-ink); font-size: var(--t-sm); font-weight: 600; }
.offers__warn .btn { margin-top: var(--s3); }

/* ---------- heating limits on one temperature scale ---------- */
.cold { display: grid; gap: var(--s4); min-width: 0; }
.cold__axis { position: relative; height: 46px; margin: 0 calc(var(--s4) + 1px) -8px; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cold__zone { position: absolute; top: 0; width: 33.33%; text-align: center; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cold__zone--1 { left: 0; }
.cold__zone--2 { left: 33.33%; }
.cold__zone--3 { left: 66.66%; }
.cold__tick { position: absolute; bottom: 0; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.cold__tick:first-of-type { transform: none; }
.cold__tick:last-of-type { transform: translateX(-100%); }
.cold__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.cold__row { display: grid; gap: 8px; padding: var(--s4); border-radius: var(--r-md); background: var(--snow); box-shadow: 0 0 0 1px var(--line); }
.cold__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--s3); }
.cold__name { font-weight: 700; text-decoration: none; }
.cold__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cold__val { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cold__val b { color: var(--navy); font-size: var(--t-md); }
.cold__track { position: relative; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #eef4fb 0 33.33%, #dfeaf8 33.33% 66.66%, #cfdff4 66.66%); }
.cold__lines { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.33% - 1px), var(--snow) calc(33.33% - 1px) calc(33.33% + 1px), transparent calc(33.33% + 1px) calc(66.66% - 1px), var(--snow) calc(66.66% - 1px) calc(66.66% + 1px), transparent calc(66.66% + 1px)); }
.cold__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 7px; background: linear-gradient(90deg, #7fb3ff, var(--brand)); transform-origin: left; transform: scaleX(var(--w)); }
.cold__row--extra .cold__bar { background: linear-gradient(90deg, #a9c9f5, #6e9fe0); }
.cold__pin { position: absolute; top: 50%; left: clamp(11px, var(--x), calc(100% - 11px)); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--snow); border: 4px solid var(--brand); box-shadow: 0 2px 6px rgb(6 26 58 / .25); }
.cold__row--extra .cold__pin { border-color: #6e9fe0; }
.cold__q { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--ink-3); }
.cold__text { font-size: var(--t-sm); color: var(--ink-2); }
.cold__row--unknown .cold__text { color: var(--ink-3); }
.cold__note { font-size: var(--t-xs); color: var(--ink-3); max-width: 70ch; }
.js .cold__bar { transform: scaleX(0); transition: transform .9s var(--ease); }
.js .cold__pin { opacity: 0; transition: opacity .3s var(--ease) .6s; }
.js .cold.is-in .cold__bar { transform: scaleX(var(--w)); }
.js .cold.is-in .cold__pin { opacity: 1; }
.js .cold.is-in .cold__row:nth-child(2) .cold__bar { transition-delay: .06s; }
.js .cold.is-in .cold__row:nth-child(3) .cold__bar { transition-delay: .12s; }
.js .cold.is-in .cold__row:nth-child(4) .cold__bar { transition-delay: .18s; }
@media (max-width: 479px) { .cold__zone { font-size: 11px; white-space: normal; line-height: 1.1; } }

/* ---------- installation scheme ---------- */
.scheme { margin: 0; display: grid; gap: var(--s4); background: var(--snow); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); padding: var(--s3); min-width: 0; }
@media (min-width: 720px) { .scheme { padding: var(--s5); } }
.scheme__svg { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.scheme__room { fill: #f6f1ea; }
.scheme__out { fill: #e3eef9; }
.scheme__wall { fill: #c9ccd3; }
.scheme__hatch { stroke: #a7adb8; stroke-width: 2; }
.scheme__zone { font: 700 12px var(--font); letter-spacing: .12em; fill: #8a93a3; }
.scheme__unit { fill: #fff; stroke: #b7c2d1; stroke-width: 2; }
.scheme__unit--out { fill: #f8fafc; }
.scheme__slot { fill: #d5dce6; }
.scheme__led { fill: var(--brand-2); }
.scheme__fan { fill: #eef2f7; stroke: #b7c2d1; stroke-width: 2; }
.scheme__hub { fill: #b7c2d1; }
.scheme__blades { fill: none; stroke: #c6cfdb; stroke-width: 3; stroke-linecap: round; }
.scheme__grill { fill: #dde3eb; }
.scheme__route { fill: none; stroke: var(--brand); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.scheme__route-in { fill: none; stroke: #9cc2ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 8 10; }
.scheme__hole { fill: #9aa3b1; stroke: var(--brand); stroke-width: 3; }
.scheme__bracket { fill: none; stroke: #5b6578; stroke-width: 6; stroke-linecap: round; }
.scheme__badge circle { fill: var(--navy); }
.scheme__badge text { font: 700 15px var(--font); fill: #fff; }
.scheme__len { font: 700 13px var(--font); fill: var(--brand-ink); }
.js .scheme__route-in { animation: flow 1.6s linear infinite; animation-play-state: paused; }
.js .scheme.is-in .scheme__route-in { animation-play-state: running; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.scheme__legend ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .scheme__legend ol { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.scheme__legend li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
.scheme__legend b { color: var(--ink); display: block; }
.scheme__n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; margin-top: 1px; }

.extra { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-md); background: var(--heat-bg); color: var(--heat-ink); }
.extra .i { margin-top: 2px; }
.extra p { color: #6b3a00; }
.extra b { color: var(--heat-ink); }

/* order steps */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }
.steps3__item { display: grid; gap: 6px; align-content: start; padding: var(--s5); border-radius: var(--r-lg); background: var(--snow); box-shadow: 0 0 0 1px var(--line); }
.steps3__n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; font-size: var(--t-lg); margin-bottom: var(--s2); }
.steps3__item h3 { font-size: var(--t-lg); }
.steps3__item p { color: var(--ink-2); font-size: var(--t-sm); }

/* use cases on the heating page */
.cases { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 860px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { display: grid; gap: var(--s3); align-content: start; padding: var(--s5); border-radius: var(--r-lg); background: var(--snow); box-shadow: 0 0 0 1px var(--line); }
.case h3 { font-size: var(--t-lg); }
.case p { color: var(--ink-2); }

/* ---------- works: photos and videos ---------- */
.works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; grid-auto-rows: 150px; gap: var(--s2); }
.works__item { margin: 0; min-width: 0; grid-row: span 2; }
.works__item--w { grid-column: span 2; }
@media (min-width: 720px) {
  .works { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: var(--s3); }
}
@media (min-width: 1100px) { .works { grid-auto-rows: 230px; } }
.works__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--ice-2); cursor: zoom-in; color: #fff; text-align: left; }
.works__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease); }
.works__btn:hover img { transform: scale(1.03); }
.works__btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); pointer-events: none; }
.works__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 12px 10px; font-size: var(--t-xs); font-weight: 600; line-height: 1.3; background: linear-gradient(transparent, rgb(6 26 58 / .78)); }
.works__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: var(--navy); box-shadow: 0 6px 20px rgb(6 26 58 / .3); transition: transform var(--d-fast) var(--ease); }
.works__play .i { margin-left: 3px; }
.works__btn:hover .works__play { transform: scale(1.08); }
.works__btn:has(.works__play) { cursor: pointer; }
@media (max-width: 719px) { .works__cap { padding: 24px 8px 8px; font-size: 11.5px; } }

/* media viewer */
.viewer { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: transparent; color: #fff; }
.viewer::backdrop { background: rgb(4 12 26 / .92); }
.viewer[open] { animation: fade var(--d-med) var(--ease); }
.viewer__box { position: relative; height: 100%; display: grid; place-items: center; padding: 64px var(--gutter) 24px; }
.viewer__fig { margin: 0; display: grid; gap: var(--s3); justify-items: center; max-width: 100%; max-height: 100%; }
.viewer__stage { display: grid; place-items: center; }
.viewer__stage img, .viewer__stage video { max-width: min(100vw - 32px, 1200px); max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: var(--r-md); background: #000; }
.viewer__stage .is-in { animation: pop var(--d-med) var(--ease); }
.viewer__cap { font-size: var(--t-sm); color: #d7e1f0; text-align: center; max-width: 60ch; }
.viewer__close, .viewer__nav { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background-color var(--d-fast); }
.viewer__close:hover, .viewer__nav:hover { background: rgb(255 255 255 / .24); }
.viewer__close { top: 12px; right: 12px; }
.viewer__nav { top: 50%; margin-top: -24px; }
.viewer__nav--prev { left: 12px; }
.viewer__nav--next { right: 12px; }
.viewer__nav--next .i { transform: rotate(180deg); }
@media (max-width: 719px) { .viewer__nav { top: auto; bottom: 16px; margin: 0; } .viewer__box { padding-bottom: 80px; } .viewer__stage img, .viewer__stage video { max-height: calc(100dvh - 200px); } }

.pdp__heat { margin-top: var(--s2); display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.pdp__heat .i { color: var(--heat-ink); margin-top: 3px; }
.pdp__incl a, .pdp__heat a { color: var(--brand-ink); font-weight: 650; }


/* ---------- reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 120ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
  .offer.is-in, .power__btu span.is-changed, .drawer[open], .drawer.is-closing, .modal[open], .viewer[open], .mega:not([hidden]) { animation-name: fade !important; }
  .js .hero__media img, .js .hero__panel { animation-name: fade; }
  .btn:active, .chip:active, .toggle:active span { transform: none; }
  .tile__media:hover img, .works__btn:hover img { transform: none; }
  .js .cold__bar { transform: scaleX(var(--w)); transition: none; }
  .js .cold__pin { opacity: 1; transition: none; }
}

/* ---------- buying path under the catalog heading ---------- */
.section--first { padding-top: var(--s6); }
@media (min-width: 960px) { .section--first { padding-top: var(--s7); } }
.path { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.path li { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.path b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 750; }
@media (min-width: 720px) {
  .path { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .path li + li::before { content: ""; width: 24px; height: 1px; background: var(--line-2); }
}
@media (min-width: 1100px) {
  .tile__actions .btn { padding: 0 14px; }
}

/* ---------- order: success box, honeypot ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done:focus { outline: none; }
.thanks { display: grid; gap: var(--s3); justify-items: start; padding: var(--s2) 0; animation: rise var(--d-med) var(--ease); }
.thanks__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #e0f2e8; color: var(--wa); }
.thanks__h { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.2; }
.thanks__p { color: var(--ink-2); }
.thanks__model { font-weight: 700; padding: 8px 12px; background: var(--ice); border-radius: var(--r-sm); }
.thanks__model:empty { display: none; }
.thanks__btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.thanks__note { font-size: var(--t-xs); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .thanks { animation: none; } }

/* missing product photo: neutral unit drawing, never a broken card */
.tile__media { overflow: hidden; }
.cut.is-ph { filter: none !important; opacity: .9; }

/* ---------- section navigation (under header, phones and tablets) ---------- */
:root { --subnav-h: 44px; }
html { scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 12px); }
.subnav { border-top: 1px solid var(--line); }
.subnav__list { list-style: none; margin: 0 auto; display: flex; gap: 4px; height: var(--subnav-h); align-items: center; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list li { flex: none; }
.subnav__link { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition-property: background-color, color; transition-duration: var(--d-fast); transition-timing-function: var(--ease); }
.subnav__link:hover { background: var(--ice); color: var(--ink); }
.subnav__link--main { background: var(--brand-soft); color: var(--brand-ink); }
.subnav__link[aria-current="true"] { background: var(--navy); color: #fff; }
@media (min-width: 1100px) { :root { --subnav-h: 0px; } .subnav { display: none; } }

/* ---------- denser, sharper layout ---------- */
:root { --ink-2: #2f3a4c; --ink-3: #4f5b70; }
html { -webkit-font-smoothing: auto; }
.section { padding: var(--s6) 0; }
@media (min-width: 960px) { .section { padding: 56px 0; } }
.head { margin-bottom: var(--s4); }
.path { display: none; }

/* calculator: compact */
.calc { padding: var(--s6) 0; }
@media (min-width: 960px) { .calc { padding: 56px 0; } }
.calc__head { margin-bottom: var(--s4); gap: var(--s2); }
.calc2__in { gap: var(--s4); }
@media (min-width: 720px) { .calc2__in, .calc2__out { padding: var(--s5); } }
@media (min-width: 960px) { .calc2__in, .calc2__out { padding: var(--s5) var(--s5); } }
.calc2__label { font-size: var(--t-md); }
.calc2__n { width: 24px; height: 24px; font-size: var(--t-xs); }
.area__input { font-size: clamp(2rem, 6vw, 2.5rem); }
.area__unit { font-size: var(--t-lg); }
.toggle span { padding: 8px 36px 8px 12px; }
.seg--use .seg__opt span { min-height: 44px; }
.power__btu { font-size: clamp(2rem, 5vw, 2.5rem); }
.power.is-big .power__btu { font-size: clamp(1.75rem, 4.5vw, 2.25rem); }
.offer { padding: var(--s2) var(--s3); }
.offer__price { font-size: var(--t-md); }
.offer__act .btn { min-height: 40px; }
/* one section bar on every screen; header keeps logo, phone, language, CTA */
@media (min-width: 1100px) {
  :root { --subnav-h: 48px; }
  .subnav { display: block; }
  .nav { display: none; }
  .top__cta { margin-left: var(--s3); }
  .top__phone { display: inline-flex; margin-left: auto; }
  .subnav__link { font-size: var(--t-md); }
}
@media (min-width: 1280px) and (max-width: 1519px) { :lang(ru) .top__phone { display: inline-flex; } }
@media (max-width: 619px) { .tile__media { aspect-ratio: 16 / 5; } .ticks li:nth-child(n+3) { display: none; } }

/* 404 */
.nf { padding: var(--s7, 56px) 0 var(--s6, 40px); background: linear-gradient(180deg, var(--brand-soft), var(--snow)); text-align: center; }
.nf__in { max-width: 860px; }
.nf__code { margin: 0; font-size: clamp(5rem, 22vw, 9rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--brand); }
.nf__code span { display: inline-block; color: var(--brand-2); font-size: .8em; animation: nf-spin 12s linear infinite; }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nf__code span { animation: none; } }
.nf__h { margin: var(--s4, 16px) 0 var(--s2, 8px); font-size: clamp(1.5rem, 5vw, 2.25rem); color: var(--ink); }
.nf__lead { margin: 0 auto var(--s5, 24px); max-width: 52ch; color: var(--ink-2); }
.nf__links { display: grid; gap: var(--s3, 12px); grid-template-columns: 1fr; text-align: left; }
@media (min-width: 640px) { .nf__links { grid-template-columns: repeat(3, 1fr); } }
.nf__card { display: grid; gap: 4px; padding: 18px; border-radius: var(--r-md, 14px); background: #fff; border: 1px solid rgb(12 21 36 / .08); text-decoration: none; color: var(--ink); transition: transform .2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow .2s; }
.nf__card svg { color: var(--brand); }
.nf__card span { color: var(--ink-3); font-size: var(--t-sm); }
.nf__card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 82 180 / .12); }
.nf__card:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.nf__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s3, 12px); margin-top: var(--s5, 24px); }
.nf__tel { font-weight: 700; color: var(--ink); text-decoration: none; padding: 12px; }
.nf__prods { display: grid; gap: var(--s3, 12px); margin-top: var(--s3, 12px); }

/* header: compact section bar that fits a phone, menu button on every screen */
.subnav__list { justify-content: flex-start; }
@media (max-width: 479px) { .subnav__list { gap: 0; justify-content: space-between; } .subnav__link { padding: 0 7px; font-size: var(--t-xs); } }
@media (min-width: 1100px) { .burger { display: grid; margin-left: var(--s2); } .subnav__list { gap: var(--s2); } }

/* first screen: shorter photo on phones so the room picker and button fit above the fold */
.hero__promo { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--heat-bg); color: var(--heat-ink); font-size: var(--t-xs); font-weight: 650; line-height: 1.3; }
.hero__promo .i { flex: none; }
@media (max-width: 719px) {
  .hero__media { aspect-ratio: 800 / 330; }
  .hero__in { margin-top: -28px; }
  .hero h1 { font-size: clamp(1.625rem, 7.4vw, 2rem); }
  .hero__lead { font-size: var(--t-sm); }
  .pick__opt { min-height: 58px; padding: 6px 10px; }
}

/* product page buy box */
.buy { container-type: inline-size; display: grid; gap: var(--s3); margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-lg); background: var(--ice); }
.buy__l { font-size: var(--t-sm); font-weight: 700; }
.buy .var { background: var(--snow); }
.buy .var[aria-pressed="true"] { background: var(--navy); }
.price--lg { font-size: clamp(1.875rem, 6vw, 2.25rem); }
.buy__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.buy__btns .btn { width: 100%; }
.pdp__all { margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); }
.pdp__all summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 0 var(--s4); font-weight: 650; color: var(--brand-ink); }
.pdp__all summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pdp__all[open] summary { border-bottom: 1px solid var(--line); }
.pdp__all .ptable { margin: 0; }
.ptable th, .ptable td { padding: 10px var(--s3); }
.pdp__incl { display: block; margin-top: var(--s4); }
.pdp__incl .i { vertical-align: -3px; margin-right: 6px; }
.pdp__heat { margin-top: var(--s3); }
.pdp__help { margin-top: var(--s3); }

/* ==========================================================================
   Header v3: one row on desktop (menu in the bar itself), section chips on
   phones/tablets only, structured drawer. Overrides earlier header rules.
   ========================================================================== */
@media (min-width: 1100px) {
  :root { --subnav-h: 0px; }
  .subnav { display: none; }
  .burger { display: none; }
  .nav { display: block; margin-left: auto; }
  .nav__link { padding: 0 10px; white-space: nowrap; }
  .top__in { gap: var(--s2); }
  .top .logo { flex: none; }
  .top .logo__txt { overflow: visible; }
  .top__phone { display: none; }
  .top .lang { margin-left: var(--s2); }
  .top__cta { margin-left: var(--s2); }
}
@media (min-width: 1100px) and (max-width: 1279px) { .nav__li--intrebari { display: none; } }
@media (min-width: 1440px) { .top__phone { display: inline-flex; margin-left: var(--s3); } .nav__link { padding: 0 12px; } }
@media (min-width: 1440px) and (max-width: 1599px) { :lang(ru) .top__phone { display: none; } }

/* drawer */
.drawer__box { gap: 0; padding: 0; }
.drawer__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--gutter); min-height: var(--header-h); background: var(--snow); border-bottom: 1px solid var(--line); }
.drawer__head .logo { margin-right: auto; min-width: 0; }
.drawer__lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--t-sm); font-weight: 650; text-decoration: none; }
.drawer__body { flex: 1; padding: var(--s2) var(--gutter) var(--s5); }
.drawer__main { list-style: none; margin: 0; padding: 0; }
.drawer__main a { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 54px; font-size: 1.125rem; font-weight: 650; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
.drawer__main a .i { color: var(--ink-3); flex: none; transition: transform var(--d-fast) var(--ease); }
.drawer__main a:hover .i, .drawer__main a:focus-visible .i { transform: translateX(3px); color: var(--brand); }
.drawer__main li:first-child a { color: var(--brand-ink); }
.drawer__h { margin: var(--s5) 0 var(--s2); font-size: var(--t-sm); font-weight: 650; color: var(--ink-3); }
.drawer__models { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.drawer__models a { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--s3); min-height: 56px; padding: 6px var(--s3) 6px 6px; border-radius: var(--r-md); background: var(--ice); text-decoration: none; color: var(--ink); }
.drawer__models b { font-size: var(--t-sm); line-height: 1.3; }
.drawer__price { font-size: var(--t-sm); font-weight: 700; color: var(--brand-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.drawer__img { display: grid; place-items: center; height: 44px; border-radius: var(--r-sm); background: var(--snow); }
.drawer__img img { max-height: 32px; width: auto; }
.drawer__contact { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin: 0; padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--snow); border-top: 1px solid var(--line); }
.drawer__contact .btn { min-height: 48px; }
.drawer__meta { grid-column: 1 / -1; margin: 0; text-align: center; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* product gallery */
.pdp__gal { display: grid; gap: var(--s3); align-content: start; }
@media (min-width: 900px) { .pdp__gal { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; } .pdp__gal .pdp__media { position: relative; top: auto; } }
.pdp__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pdp__zoom:focus-visible, .pdp__thumb:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pdp__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--s2); }
.pdp__thumb { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--ice); cursor: zoom-in; box-shadow: 0 0 0 1px var(--line); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-med) var(--ease); }
.pdp__thumb:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .pdp__thumb img, .drawer__main a .i { transition: none; } }

/* extras price list + terms */
.extra > div { display: grid; gap: var(--s3); }
.extra p { margin: 0; }
.xtable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--snow); border-radius: var(--r-sm); overflow: hidden; }
.xtable th, .xtable td { padding: 9px var(--s3); border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.xtable td { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.xtable tr:last-child > * { border-bottom: 0; }
.terms { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 720px) { .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .terms { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.terms__item { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; padding: var(--s4); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line); }
.terms__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand-ink); }
.terms__item h3 { font-size: var(--t-md); margin-bottom: 4px; }
.terms__item p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
@media (max-width: 419px) { .drawer__head .logo__txt span { display: none; } }

/* legal text */
.legal { max-width: 72ch; }
.legal h2 { margin: var(--s6) 0 var(--s2); }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 var(--s3); color: var(--ink-2); }
.foot__legal a, .check a { color: inherit; text-decoration: underline; }

/* phone field with fixed +373 */
.tel { display: flex; align-items: stretch; }
.tel__cc { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-2); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--ice); font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tel input { flex: 1; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tel__hint { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- form fields v2: one height, aligned rows, calmer look ---------- */
.order .grid2 { align-items: start; }
.field { align-content: start; gap: 8px; }
.field label { line-height: 1.3; }
.field input, .field select, .field textarea {
  height: 52px; min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--ice); font-size: 16px; color: var(--ink);
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field textarea { height: auto; padding: 12px 16px; }
.field input::placeholder { color: #8a94a6; }
.field input:hover, .field select:hover { border-color: var(--line-2); background: var(--snow); }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--snow); border-color: var(--brand); outline: none; box-shadow: 0 0 0 4px rgb(0 82 180 / .14); }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234f5b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select:invalid { color: #8a94a6; }
.field select option { color: var(--ink); }
/* phone: prefix and input read as one field */
.tel { position: relative; display: block; }
.tel__cc { position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; display: grid; place-items: center; padding: 0 12px 0 16px; border: 0; border-right: 1.5px solid var(--line); border-radius: calc(var(--r-md) - 1.5px) 0 0 calc(var(--r-md) - 1.5px); background: transparent; font-weight: 650; color: var(--ink-2); pointer-events: none; }
.tel input { padding-left: 82px; border-radius: var(--r-md); }
.check { align-items: center; }
.check input { width: 22px; height: 22px; margin: 0; }