/* ==========================================================
   Джистор — главная страница (ПК 1920). Перенос из Figma 1:1.
   Размеры/отступы взяты из макета в px, не округлять.
   ========================================================== */

/* ---------- Шрифты (assets/fonts) ----------
   Manrope из Google Fonts — только запасной вариант. */
@font-face { font-family: "Gilroy"; font-weight: 400; font-display: swap;
  src: local("Gilroy-Regular"), url("../assets/fonts/Gilroy-Regular.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 500; font-display: swap;
  src: local("Gilroy-Medium"), url("../assets/fonts/Gilroy-Medium.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 600; font-display: swap;
  src: local("Gilroy-Semibold"), url("../assets/fonts/Gilroy-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Gilroy"; font-weight: 700; font-display: swap;
  src: local("Gilroy-Bold"), url("../assets/fonts/Gilroy-Bold.woff2") format("woff2"); }
@font-face { font-family: "Soyuz Grotesk"; font-weight: 700; font-display: swap;
  /* Всегда используем файл темы: локальные версии Soyuz Grotesk различаются
     между Windows и macOS и меняют форму/метрики латиницы. */
  src: url("../assets/fonts/SoyuzGrotesk-Bold.woff2") format("woff2"); }

:root {
  --bg: #f6f6f6;
  --orange: #ff7b31;
  --orange-grad: linear-gradient(var(--grad-angle, 66.2deg), #ff5f05 35.292%, #ff7b31 80.243%);
  --text: #303030;
  --muted: #767676;
  --dark: #333;
  --font: "Gilroy", "Manrope", Arial, sans-serif;
  --font-display: "Soyuz Grotesk", "Manrope", Arial, sans-serif;
  /* Публичная версия Soyuz Grotesk (2017) на ~4% шире, чем версия в макете.
     Когда будет файл шрифта от дизайнера — поставить 0. */
  --display-tracking: 0;
  --shadow-card: 0 29px 70px rgba(0, 0, 0, .03);
  --shadow-soft: 0 16px 48.2px 2px rgba(0, 0, 0, .05);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; }
b { font-weight: 700; }
em { font-style: normal; }
button, input { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
button { cursor: pointer; }
img { display: block; max-width: none; }

/* как в Figma: элементы в flex-раскладках не сжимаются (shrink-0) */
.page * { flex-shrink: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* На промежуточных экранах страница пропорционально уменьшается через zoom.
   overflow: clip на том же элементе отрезал верхние выносы букв у display-заголовков.
   Горизонтальный выход уже ограничен body, поэтому здесь клип не нужен. */
div.page { position: relative; min-width: 1512px; overflow: visible; zoom: var(--page-zoom, 1); }
.container { width: 1512px; margin: 0 auto; position: relative; }

/* Legal documents use the same restrained page card and typography as the
   informational sections; their copy remains comfortably readable. */
.legal-page { margin-top: 89px; }
.legal-page .info-head { width: auto; margin-right: 0; margin-left: 0; }
.legal-page .info-head__title { height: auto; min-height: 0; padding: .06em 0 .14em; font-size: 56px; line-height: 1.06; letter-spacing: 0; white-space: normal; }
.legal-doc { box-sizing: border-box; width: auto; max-width: none; margin: 38px 0 0; padding: 56px 68px 64px; border-radius: 24px; background: #fff; box-shadow: 0 16px 40px rgba(36, 38, 39, .06); color: #4d4d4d; }
.legal-doc h2 { margin: 44px 0 18px; color: var(--dark); font-size: 28px; font-weight: 700; line-height: 1.18; letter-spacing: 0; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p, .legal-doc li { font-size: 18px; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
.legal-doc p + p { margin-top: 18px; }
.legal-doc ul { margin: 18px 0 0; padding-left: 28px; }
.legal-doc li + li { margin-top: 10px; }
.legal-doc__meta { margin-top: 40px; color: #858585; font-size: 15px !important; }

/* Vacancies: relies on the shared 1512px container, site fonts and buttons. */
.vac-page { padding-bottom: 1px; }
.vac-hero { display: grid; grid-template-columns: 1fr 700px; gap: 42px; margin-top: 48px; padding: 44px; border-radius: 26px; background: var(--orange-grad); color: #fff; overflow: hidden; }
.vac-kicker { color: inherit; font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .78; }
.vac-hero h2, .vac-career h2, .vac-apply h2 { margin-top: 18px; font-family: var(--font-display); font-size: 68px; font-weight: 700; line-height: 1.02; letter-spacing: 0; }
.vac-facts { display: flex; gap: 10px; margin-top: 30px; }
.vac-facts span, .vac-cities button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 999px; font: 600 16px var(--font); }
.vac-facts span { background: rgba(255,255,255,.2); }
.vac-hero__text { max-width: 515px; margin-top: 24px; font-size: 20px; line-height: 1.35; }
.vac-hero .btn-grad { width: 330px; margin-top: 34px; background: #fff; color: var(--text); }
.vac-hero .btn-grad { gap: 14px; }
.vac-hero .btn-grad > span:first-child { height: auto; }
.vac-hero .btn-grad > .arr { position: static; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 22px; font-size: 22px; line-height: 1; }
.vac-hero__media { position: relative; min-height: 490px; overflow: hidden; border-radius: 20px; background: #eee; }
.vac-hero__media > img { width: 100%; height: 100%; object-fit: cover; }
.vac-hero__media > img[hidden] { display: none; }
.vac-cities { position: absolute; z-index: 1; top: 18px; left: 18px; display: flex; gap: 8px; }
.vac-cities button { min-height: 38px; color: var(--text); background: rgba(255,255,255,.88); transition: background var(--t), color var(--t); }
.vac-cities button.is-active { color: #fff; background: var(--dark); }
.vac-place { position: absolute; right: 18px; bottom: 18px; padding: 13px 18px; border-radius: 999px; color: var(--text); background: rgba(255,255,255,.92); font-size: 16px; }
.vac-intro, .vac-process { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; margin-top: 110px; }
.vac-intro > div, .vac-process > div { font-size: 22px; line-height: 1.38; color: #5f5f5f; }
.vac-intro p + p, .vac-process p + p { margin-top: 22px; }
.vac-section { margin-top: 110px; }
.vac-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 38px; }
.vac-benefits article { min-height: 280px; padding: 28px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.vac-benefits b { display: block; color: var(--orange); font-size: 26px; font-weight: 700; }
.vac-benefits h3 { margin-top: 36px; font-size: 23px; font-weight: 700; }
.vac-benefits p { margin-top: 12px; color: #707070; font-size: 17px; line-height: 1.35; }
.vac-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 110px; }
.vac-columns article { padding: 40px; border-radius: 20px; background: #fff; }
.vac-columns .sec-title { font-size: 42px; }
.vac-columns ul { margin-top: 28px; }
.vac-columns li { position: relative; padding-left: 24px; color: #5f5f5f; font-size: 18px; line-height: 1.38; }
.vac-columns li + li { margin-top: 14px; }
.vac-columns li::before { position: absolute; left: 0; color: var(--orange); content: '•'; }
.vac-career { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: end; margin-top: 110px; padding: 48px; border-radius: 24px; color: #fff; background: var(--dark); }
.vac-career h2 { font-size: 48px; }
.vac-career > p { font-size: 20px; line-height: 1.38; opacity: .8; }
.vac-apply { display: grid; grid-template-columns: 1fr 520px; gap: 80px; align-items: start; margin-top: 110px; padding: 52px; border-radius: 24px; background: #fff; }
.vac-apply h2 { color: var(--text); font-size: 58px; }
.vac-apply > div > p:last-child { margin-top: 24px; color: #717171; font-size: 19px; line-height: 1.38; }
.vac-form { display: grid; gap: 24px; padding: 32px; border-radius: 20px; background: var(--bg); }
.vac-form .vac-field { box-sizing: border-box; width: 100%; height: 75px; }
.vac-form .vac-field .field__patch { width: auto; right: auto; min-width: 0; background: var(--bg); }
.vac-form .vac-field:nth-child(1) .field__patch { width: 75px; }.vac-form .vac-field:nth-child(2) .field__patch { width: 104px; }.vac-form .vac-field:nth-child(3) .field__patch { width: 87px; }
.vac-form .vac-field:hover, .vac-form .vac-field:focus-within { border-color: var(--orange); }
.vac-form .cart-form__btn { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 75px; margin-top: 2px; }
.vac-form .cart-form__btn > span:first-child { position: static; display: block; height: auto; }
.vac-form .cart-form__btn > .arr { position: static; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 22px; font-size: 22px; line-height: 1; }
.vac-form .cart-form__btn:disabled { opacity: .7; cursor: default; }.vac-form > p { color: #888; font-size: 13px; line-height: 1.3; }.vac-form a { text-decoration: underline; }

/* ---------- утилиты для слоёв макета ---------- */
.abs { position: absolute; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover { object-fit: cover; }
.flip-y { transform: scaleY(-1); }
.flip-x { transform: scaleX(-1); }
.rot { position: absolute; display: flex; align-items: center; justify-content: center; }
.rot > * { flex: none; display: block; object-fit: cover; }
.blur-ellipse { position: absolute; }
.abs, .rot, .blur-ellipse { pointer-events: none; }
.bg-patch { background: var(--bg); }

/* Иконки из Figma: контейнер N×N, внутри обёртка с процентным inset */
.ico { position: relative; display: block; flex: none; overflow: hidden; }
.ico__in { position: absolute; display: block; }
.ico__in img { width: 100%; height: 100%; }

/* стрелка ↗ 7×7.505 у кнопок */
.arr { position: relative; flex: none; width: 7px; height: 7.505px; }
.arr img { position: absolute; left: -0.25px; top: -0.25px; width: 7.5px; height: 8.005px; }

.vk-btn { position: relative; display: block; }
.vk-btn__ico { position: absolute; }

/* ---------- общие блоки секций ---------- */
.sec-head { display: flex; align-items: center; justify-content: space-between; }
.sec-title, .promo-main__title, .promo-main__brand, .promo-narrow__title, .tradein__title,
.bonus__title, .about__title, .cta__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase;
}
.sec-title { min-height: 1.12em; padding-top: .08em; font-size: 55px; line-height: 1.04; color: var(--dark); white-space: nowrap; overflow: visible; }
.btn-more {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex: none;
  height: 56px; border-radius: 1111px; background: #fff;
  font-size: 16px; font-weight: 600; line-height: normal; white-space: nowrap;
}
.btn-more > span:first-child { display: block; height: 20px; text-align: center; }

.btn-grad {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  height: 70px; border-radius: 1111px; background-image: var(--orange-grad);
  filter: drop-shadow(0 13px 21.05px rgba(255, 123, 49, .25));
  font-size: 18px; font-weight: 600; line-height: normal; color: #fff; white-space: nowrap;
}
.btn-grad > span:first-child, .btn-white2 > span:first-child { display: block; height: 22px; text-align: center; }
.btn-white2 {
  display: flex; align-items: center; justify-content: center; gap: 25px;
  height: 70px; border-radius: 1111px; background: #fff;
  filter: drop-shadow(0 13px 21.05px rgba(255, 123, 49, .25));
  font-size: 18px; font-weight: 600; line-height: normal; color: #373737; white-space: nowrap;
}

.pills { display: flex; gap: 15px; }
.pill {
  display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 1111px; background: #fff;
  font-size: 13px; font-weight: 500; line-height: normal; color: #383838; white-space: nowrap;
}

/* ==========================================================
   Шапка
   ========================================================== */
.header { padding-top: 15px; }
.header::before {
  content: ""; position: absolute; top: 75px; left: 50%;
  width: 100vw; transform: translateX(-50%); height: 1px; background: #ebebeb;
}
.topbar { position: relative; z-index: 500; display: flex; align-items: center; justify-content: space-between; height: 45px; }
.topbar__addr { display: flex; gap: 28px; align-items: center; width: auto; }
.select { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.select__label { height: 14px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--muted); white-space: nowrap; }
.select__value {
  position: relative; display: inline-flex; align-items: center; width: auto; max-width: 260px; gap: 10px; text-align: left; height: 21px;
  padding-right: 0; overflow: visible; text-overflow: ellipsis;
  font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0.16px; color: var(--text); white-space: nowrap;
}
.select__value span { display: block; flex: 0 1 auto; max-width: 230px; height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select__chevron { position: static; flex: 0 0 auto; width: 5.018px; height: 8.837px; transform: rotate(90deg); transform-origin: center; }
.store-select { position: relative; width: fit-content !important; max-width: 260px; }
.store-select .select__chevron { right: auto; left: auto; }
.store-select__menu { position: absolute; z-index: 510; top: calc(100% + 8px); left: -12px; min-width: 230px; padding: 8px; border-radius: 12px; background: #fff; opacity: 1; isolation: isolate; box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.store-select__menu[hidden] { display: none; }
.store-select__option { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--text); text-align: left; font: inherit; font-size: 14px; line-height: 1.2; }
.store-select__option:hover, .store-select__option:focus-visible { background: #f5f5f5; color: var(--orange); }
.store-select__option.network-city-option { text-decoration: none; }
.store-select .select__value:disabled { cursor: default; opacity: .55; }

/* центр верхней полосы: x=443.78 в макете */
.topnav { position: absolute; left: 443.78px; top: 12.5px; display: flex; gap: 35px; height: 20px; }
.topnav a { font-size: 14px; font-weight: 500; line-height: 1.4; color: #898989; white-space: nowrap; }

.topbar__contacts { display: flex; align-items: center; gap: 35px; height: 45px; }
.messengers { display: flex; align-items: center; gap: 15px; position: relative; top: -0.5px; }
.messengers img { width: 36px; height: 36px; }
.messengers .vk-btn__ico { left: 9px; top: 9px; }
.messengers .vk-btn__ico img { width: 100%; height: 100%; }
.phone { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 9px; height: 45px; width: 169px; text-align: right; line-height: 1.4; }
.phone__num { display: block; flex: none; height: 20px; width: 189px; font-size: 21px; font-weight: 600; letter-spacing: 0.21px; color: var(--text); white-space: nowrap; }
.phone__hours { flex: none; height: 16px; width: 163px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }

.menu { position: relative; z-index: 200; display: flex; align-items: center; height: 58px; margin-top: 35px; }
/* целые промежутки вместо 24.33px из Figma: 24 / 25 / 24 */
.menu > .btn-catalog { margin-left: 24px; } .menu > .search { margin-left: 25px; } .menu > .user-nav { margin-left: 24px; }
.logo img { width: 301px; height: 53px; object-fit: cover; }
.btn-catalog {
  --grad-angle: 66.2deg;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  width: 275px; height: 58px; border-radius: 1111px; background-image: var(--orange-grad);
}
.btn-catalog__text { height: 18px; font-size: 18px; font-weight: 600; line-height: normal; color: #fff; text-align: center; white-space: nowrap; }
.search { display: flex; align-items: center; justify-content: space-between; width: 639px; height: 58px; padding: 0 30px; border-radius: 1111px; background: #fff; }
.search__input { flex: 1; min-width: 0; height: 18px; outline: 0; font: 500 17px/normal var(--font); color: #575757; }
.search__input::placeholder { color: #575757; opacity: 1; }
.search__input::-webkit-search-cancel-button { display: none; }
.user-nav { display: flex; align-items: center; gap: 25px; }
.circle-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 1111px; background: #fff; }
.badge-count {
  position: absolute; left: 42px; top: 0; width: 20px; height: 20px; border-radius: 11111px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.11px; line-height: normal;
}
.ico-compare { display: flex; align-items: center; justify-content: center; width: 17.937px; height: 19px; }
.ico-compare img { flex: none; width: 19px; height: 17.937px; transform: rotate(-90deg) scaleY(-1); }
.cats { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; height: 29px; }
.cats a { font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--text); white-space: nowrap; }
.cats i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #d9d9d9; }
/* Second level of the catalogue. Parent category links still navigate; the chevron only opens the product list. */
.cats--dropdown { position: relative; z-index: 70; overflow: visible; }
.cats__entry { position: relative; display: flex; align-items: center; min-height: 34px; }
.cats__link { display: block; }
.cats__toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 26px; margin-left: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cats__toggle span { display: block; width: 8px; height: 8px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); transform-origin: 50% 50%; transition: transform var(--t); }
.cats__dropdown {
  position: absolute; top: calc(100% + 10px); left: -16px; width: 350px; max-height: min(70vh, 650px); overflow-y: auto; padding: 16px;
  border: 1px solid #ececec; border-radius: 16px; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.12);
  /* Firefox */
  scrollbar-width: thin; scrollbar-color: #bcbcbc #f3f3f3;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--t), transform var(--t), visibility var(--t);
}
/* Chromium/Edge on Windows: do not show the default black native scrollbar. */
.cats__dropdown::-webkit-scrollbar { width: 8px; }
.cats__dropdown::-webkit-scrollbar-track { margin: 10px 4px 10px 0; border-radius: 999px; background: #f3f3f3; }
.cats__dropdown::-webkit-scrollbar-thumb { border: 2px solid #f3f3f3; border-radius: 999px; background: #bcbcbc; }
.cats__dropdown::-webkit-scrollbar-thumb:hover { background: var(--orange); }
.cats__dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.cats__entry--has-sub:hover .cats__dropdown, .cats__entry--has-sub:focus-within .cats__dropdown, .cats__entry--has-sub.is-open .cats__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.cats__entry--has-sub.is-open .cats__toggle span { transform: rotate(225deg); }
.cats__dropdown ul { display: grid; gap: 3px; margin: 10px 0 0; padding: 0; list-style: none; }
.cats__dropdown a { display: block; padding: 8px 10px; border-radius: 9px; font-size: 14px; line-height: 1.28; font-weight: 600; white-space: normal; }
.cats__dropdown a:hover, .cats__dropdown a:focus-visible { background: #f4f4f4; }
.cats__dropdown .cats__all { display: flex; align-items: center; box-sizing: border-box; min-height: 42px; margin: 0; padding: 0 14px; border-bottom: 0; border-radius: 12px; color: var(--accent, #f04c34); font-size: 15px; line-height: 1; }

/* ==========================================================
   1 экран
   ========================================================== */
.hero { margin-top: 35px; }
.hero__row { display: flex; align-items: flex-start; gap: 35px; width: 1510px; margin-left: 1px; }
.promo-main, .promo-pre, .promo-stock { position: relative; flex: none; height: 485px; border-radius: 20px; overflow: hidden; isolation: isolate; }
.promo-main { --grad-angle: 80.164deg; width: 904px; background-image: var(--orange-grad); }
.promo-pre { width: 230px; background: #1b1b1b; }
.promo-stock { width: 231px; background: #343bd4; }
.promo-main__noise { position: absolute; left: -70px; top: -23px; width: 1046px; height: 523px; mix-blend-mode: soft-light; }
.promo-main__noise img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .1; }
.promo-main__texture { position: absolute; left: 9.63px; top: -91px; width: 988.747px; height: 659px; transform: scaleX(-1); opacity: .7; }
.promo-main__texture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .03; mix-blend-mode: hard-light; }
.promo-main__content { position: absolute; left: 50px; top: 64px; width: 467px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.tag { display: flex; align-items: center; justify-content: center; width: 109px; height: 35px; border-radius: 11111px; background: #fff; font-size: 14px; font-weight: 500; line-height: normal; color: #424242; }
.promo-main__text { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.promo-main__head { position: relative; display: flex; flex-direction: column; gap: 20px; width: 438px; height: 203px; }
.promo-main__title { display: flex; flex-direction: column; width: 626px; height: 128px; font-size: 70px; line-height: 0.97; color: #fff; white-space: pre; }
.promo-main__sub { width: 431px; height: 45px; font-size: 19px; font-weight: 500; line-height: 1.37; color: #fff; }
.promo-main__mark { position: absolute; left: 59px; top: 84px; width: 42px; height: 45px; object-fit: cover; }
.promo-main__brand { position: absolute; left: 120px; top: 65px; width: 299px; height: 57px; font-size: 70px; line-height: 1.02; color: #fff; white-space: nowrap; }
.pill-model { position: absolute; left: 218px; top: 10px; width: 232px; height: 51px; display: flex; align-items: center; justify-content: center; gap: 13px; border-radius: 1111px; background: #fff; }
.pill-model__text { height: 23px; font-size: 22px; font-weight: 700; line-height: normal; letter-spacing: 0.66px; text-transform: uppercase; color: #3a3a3a; text-align: center; white-space: nowrap; }
.btn-white { display: flex; align-items: center; justify-content: center; gap: 25px; width: 350px; height: 75px; border-radius: 1111px; background: #fff; filter: drop-shadow(0 13px 21.05px rgba(255, 123, 49, .25)); }
.btn-white__text { height: 25px; font-size: 19px; font-weight: 600; line-height: normal; color: #262626; text-align: center; white-space: nowrap; }
.btn-white__ico { position: relative; width: 10px; height: 10.721px; }
.btn-white__ico img { position: absolute; left: -0.25px; top: -0.25px; width: 10.5px; height: 11.221px; }
.promo-narrow__title { position: absolute; left: 114px; top: 21px; transform: translateX(-50%); font-size: 36px; line-height: 0.95; text-align: center; color: #fff; }
.pill-pre {
  position: absolute; left: 28px; top: 107px; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 15px;
  width: 173px; height: 47px; border-radius: 1111px; background: linear-gradient(to right, #9c6490, #68375e);
  filter: drop-shadow(0 13px 21.05px rgba(149, 94, 137, .5));
}
.pill-pre__text { height: 19px; font-size: 18px; font-weight: 700; line-height: normal; letter-spacing: 0.54px; text-transform: uppercase; color: #fff; text-align: center; white-space: nowrap; }
.watch-btn {
  position: absolute; left: 55px; top: 336px; width: 119px; height: 119px; border-radius: 1111px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px;
  background: #fff; filter: drop-shadow(0 13px 27.5px rgba(246, 247, 255, .15));
}
.watch-btn__text { width: 94px; height: 35px; font-size: 15px; font-weight: 700; line-height: normal; letter-spacing: 0.45px; text-transform: uppercase; color: #4c4c4c; text-align: center; }
.watch-btn__ring { position: absolute; left: 60px; top: 341px; width: 109px; height: 109px; border-radius: 1111px; border: 1px solid rgba(0, 0, 0, .05); pointer-events: none; }
.hero-nav { flex: none; width: 40px; height: 485px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.hero-nav__dots { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.hero-nav__arrows { display: flex; flex-direction: column; gap: 20px; width: 40px; }

/* ==========================================================
   2 экран — каталог (плитки)
   ========================================================== */
.catalog { margin-top: 123px; display: flex; flex-direction: column; gap: 40px; }
.tiles { display: flex; align-items: flex-start; gap: 30px; width: 1512px; }
.tiles__col { display: flex; flex-direction: column; gap: 30px; flex: none; }
.tile { position: relative; display: block; flex: none; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.tile > img { position: absolute; object-fit: cover; }
.tile--big { width: 522px; height: 696px; }
.tile--s { width: 300px; height: 285px; }
.tile--m { width: 300px; height: 382px; }
.tile__title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 28px; font-weight: 600; line-height: 0.82; color: var(--text); white-space: nowrap;
}
.tile__title--long { font-size: 24px; line-height: 1; }
.tile__price {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; width: 148px; height: 45px; border-radius: 1111px; background: #f3f3f3;
  font-size: 16px; font-weight: 500; line-height: normal; color: #1d1d1d; white-space: nowrap;
}

/* ==========================================================
   3 экран — Trade-in
   ========================================================== */
.tradein { margin-top: 110px; }
.tradein__box { position: relative; height: 430px; border-radius: 20px; overflow: hidden; background: #fff; isolation: isolate; }
.tradein__content { position: absolute; left: 509px; top: 40px; width: 494px; display: flex; flex-direction: column; align-items: center; gap: 37px; }
.tradein__text { position: relative; display: flex; flex-direction: column; align-items: center; gap: 25px; }
.tradein__title { display: flex; flex-direction: column; align-items: center; width: 494px; height: 162px; font-size: 55px; line-height: 1.07; text-align: center; color: var(--dark); white-space: pre; }
.tradein__sub { width: 452px; height: 47px; font-size: 20px; font-weight: 500; line-height: 1.4; text-align: center; color: #5e5e5e; }
.tradein__swap { position: absolute; left: 340px; top: 130px; width: 40px; height: 40px; }
.tradein__swap .ico { position: absolute; left: 10.5px; top: 10.5px; }

/* ==========================================================
   Карточки товаров (новинки / популярные / выгодные)
   ========================================================== */
.products { margin-top: 110px; display: flex; flex-direction: column; gap: 40px; }
.prods { display: flex; align-items: flex-start; justify-content: space-between; }
.prod { flex: none; width: 276px; display: flex; flex-direction: column; gap: 20px; }
.prod__top { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.prod__badges, .prod__acts { display: flex; align-items: center; gap: 7px; }
.badge {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 104px; height: 30px; border-radius: 1111px; background: #fff;
  font-size: 12px; font-weight: 600; line-height: normal; color: #272727; white-space: nowrap;
}
.badge--hit { background: #fb4040; color: #fff; }
.badge--deal { color: #2f2f2f; }
.badge--stock { width: 86px; color: #4c4c4c; }
.badge--stock span { height: 16px; text-align: center; }
.prod__act { position: relative; display: block; width: 30px; height: 30px; border-radius: 1111px; background: #fff; }
/* иконка — svg 30×30 с рисунком ровно по центру: без вложенных обёрток и сдвигов, у всех карточек одинаково при любом масштабе */
.prod__ico { position: absolute; left: 0; top: 0; width: 30px; height: 30px; }
.prod__card { position: relative; width: 276px; height: 536px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.prod__img { position: absolute; left: 20px; top: 15px; width: 236px; height: 292px; overflow: hidden; }
.prod__img img { position: absolute; }
.prod__body { position: absolute; left: 16px; top: 327px; width: 244px; display: flex; flex-direction: column; gap: 20px; }
.prod__name { width: 228px; height: 67px; font-size: 20px; font-weight: 600; line-height: 1.24; color: var(--text); }
.prod__prices { display: flex; align-items: center; gap: 19px; width: 233px; margin-top: 0; }
.prod__price { width: 99px; height: 25px; font-size: 23px; font-weight: 700; line-height: 1.12; color: var(--text); white-space: nowrap; }
.prod__old { display: flex; align-items: center; gap: 17px; }
.prod__old s { display: block; width: 62px; height: 13px; font-size: 14px; font-weight: 400; line-height: 1.12; color: #5e5e5e; white-space: nowrap; text-decoration-thickness: from-font; }
.prod__sale { display: flex; align-items: center; justify-content: center; width: 33px; height: 19px; border-radius: 3px; background: #fe4949; font-size: 11px; font-weight: 600; line-height: normal; color: #fff; }
.prod__btnwrap { display: flex; height: 47px; width: 244px; }
.prod__btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; flex: none;
  width: 244px; height: 49px; border-radius: 1111px; background: #f8f8f8;
  font-size: 15px; font-weight: 600; line-height: normal; color: #484848;
}
.prod__btn > span:first-child { height: 17px; text-align: center; white-space: nowrap; }
/* Catalogue actions: text and icon share one real flex baseline; no optical nudges. */
.prod__btn { gap: 12px; line-height: 1; }
.prod__btn > span:first-child,
.cmp-remove > span:last-child,
.cmp-cart > span:first-child,
.cart-form__btn > span,
.badge > span:last-child,
.flt-tag > span:first-child { top: 0 !important; }
.prod__btn .ico, .cmp-remove .ico, .cmp-cart .ico { margin-top: 0 !important; }
/* блок «название + цены» в макете — одна колонка с gap 20 */
.prod__body > .prod__name + .prod__prices { margin-top: 0; }

/* ==========================================================
   6 экран — бонусы
   ========================================================== */
.bonus { margin-top: 110px; }
.bonus__box { position: relative; height: 382px; border-radius: 20px; overflow: hidden; background: var(--orange); isolation: isolate; }
.bonus__content { position: absolute; left: 60px; top: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 37px; }
.bonus__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.bonus__title { display: flex; flex-direction: column; width: 747px; height: 103px; font-size: 55px; line-height: 1.04; color: #fff; white-space: pre; }
.bonus__mark { position: absolute; left: 338px; top: 70px; width: 33px; height: 36px; object-fit: cover; }
.bonus__sub { width: 634px; height: 47px; font-size: 20px; line-height: 1.4; color: #fff; }
.bonus__sub b { font-weight: 700; }
.bonus__sub b.m { font-weight: 500; }
.bonus__pill {
  position: absolute; left: 256px; top: 7px; width: 130px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: 1111px; background: #fff; font-size: 30px; font-weight: 700; line-height: normal; letter-spacing: 0.3px; color: #3a3a3a;
}

/* ==========================================================
   9 экран — о компании
   ========================================================== */
.about { margin-top: 110px; width: 1512px; display: flex; align-items: flex-start; gap: 70px; min-height: 618px; }
.about__left { flex: none; width: 607px; display: flex; flex-direction: column; align-items: flex-start; gap: 45px; }
.about__text { display: flex; flex-direction: column; gap: 35px; }
.about__title { width: 605px; height: auto; font-size: 55px; line-height: 1.04; color: var(--dark); }
.about__title em { color: var(--orange); }
.about__desc { display: flex; flex-direction: column; gap: 35px; font-size: 20px; font-weight: 400; line-height: 1.4; color: #5e5e5e; }
.about__photo { position: relative; flex: none; margin-right: 1px; width: 479px; height: 618px; overflow: hidden; border-radius: 20px; background: #ddd; }
.stats { flex: none; display: flex; flex-direction: column; gap: 28px; height: 618px; }
.stat { position: relative; width: 285px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: var(--shadow-soft); }
.stat__text { position: absolute; left: 29px; display: flex; flex-direction: column; gap: 13px; line-height: 1.4; white-space: nowrap; }
.stat__num { height: 51px; font-size: 50px; font-weight: 700; color: var(--orange); }
.stat__label { height: 21px; font-size: 17px; font-weight: 400; color: #5e5e5e; }

/* ==========================================================
   10 экран — видео и новости
   ========================================================== */
.blog { margin-top: 110px; height: 929px; display: flex; align-items: flex-start; justify-content: space-between; }
.blog__videos { width: 708px; display: flex; flex-direction: column; gap: 45px; }
.blog__news { width: 744px; display: flex; flex-direction: column; gap: 45px; }
.blog__head { display: flex; align-items: flex-start; justify-content: space-between; height: 56px; }
.blog__list { display: flex; flex-direction: column; gap: 35px; }
.video { position: relative; display: block; width: 708px; height: 396px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.video__shade { position: absolute; left: -138px; top: 222px; width: 572px; height: 194px; background: rgba(0, 0, 0, .5); filter: blur(125px); }
.video__play { position: absolute; right: 30px; bottom: 30px; width: 66px; height: 66px; }
.video__text { position: absolute; left: 30px; top: 261px; width: 345px; display: flex; flex-direction: column; gap: 20px; }
.video__title { display: block; height: 51px; font-size: 22px; font-weight: 600; line-height: 1.31; color: #fff; }
.news-grid { display: flex; flex-direction: column; gap: 45px; }
.news-row { display: flex; gap: 35px; height: 249px; }
.news { display: flex; flex-direction: column; gap: 22px; height: 219px; }
.news__img { position: relative; display: block; width: 354px; height: 120px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: var(--shadow-card); }
.news__img img { position: absolute; object-fit: cover; }
.news__title { display: block; width: 345px; height: 51px; font-size: 22px; font-weight: 600; line-height: 1.31; color: var(--text); }

/* ==========================================================
   11 экран — отзывы
   ========================================================== */
.reviews { margin-top: 110px; display: flex; flex-direction: column; gap: 40px; }
.reviews__row { display: flex; align-items: flex-start; gap: 40px; }
.reviews__videos { display: flex; align-items: center; gap: 40px; }
.review { display: flex; flex-direction: column; gap: 32px; }
.review__video { position: relative; display: block; width: 345px; height: 455px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.review__video > img:first-child { position: absolute; object-fit: cover; }
.review__play { position: absolute; left: 127.5px; top: 183px; width: 90px; height: 90px; }
.review__cap { display: flex; flex-direction: column; gap: 13px; height: 51px; }
.review__name { font-size: 24px; font-weight: 600; line-height: 0.82; color: var(--text); white-space: nowrap; }
.review__city { width: 228px; height: 19px; font-size: 18px; font-weight: 500; line-height: 1.12; color: #707070; }
.ratings { display: flex; flex-direction: column; justify-content: center; gap: 35px; }
.rating { position: relative; width: 357px; height: 156px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: var(--shadow-soft); }
.rating__head { position: absolute; left: 22px; top: 22px; width: 313px; display: flex; align-items: center; justify-content: space-between; }
.rating__brand { display: flex; align-items: center; gap: 25px; width: 106px; }
.rating__name { height: 19px; font-size: 23px; font-weight: 600; line-height: 0.98; color: var(--text); white-space: nowrap; }
.rating__count { font-size: 15px; font-weight: 500; line-height: 0.98; color: var(--text); text-align: right; white-space: nowrap; }
.rating__line { position: absolute; left: 0; top: 69px; width: 359px; height: 1px; }
.rating__row { position: absolute; left: 22px; top: 87px; width: 313px; display: flex; align-items: center; justify-content: space-between; }
.rating__value { height: 30px; font-size: 40px; font-weight: 600; line-height: 0.98; color: var(--text); }
.stars { display: flex; align-items: center; gap: 15px; width: 229px; height: 46px; }
.star { position: relative; display: block; flex: 1 0 0; aspect-ratio: 1; overflow: hidden; }
.r-2gis { display: block; flex: none; width: 28px; height: 28px; overflow: hidden; }
.r-2gis img { width: 28px; height: 28px; -webkit-mask: url("../assets/icons/2gis-mask.svg") 0 0 / 28px 28px no-repeat; mask: url("../assets/icons/2gis-mask.svg") 0 0 / 28px 28px no-repeat; }
.r-yandex { flex: none; width: 23px; height: 29px; transform: scaleX(-1); }
.r-avito { position: relative; display: block; flex: none; width: 27px; height: 24px; overflow: hidden; }
.r-avito img { position: absolute; left: 0; top: 0; width: 26.902px; height: 24px; }

/* ==========================================================
   12 экран — магазины
   ========================================================== */
.shops { margin-top: 110px; display: flex; flex-direction: column; gap: 40px; }
.shops__row { position: relative; display: flex; align-items: flex-start; gap: 40px; height: 559px; }
.shop { position: relative; flex: none; width: 376px; height: 559px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: var(--shadow-soft); }
.shop__photos { position: absolute; left: 25px; top: 21px; display: flex; gap: 20px; }
.shop__photos > span { position: relative; display: block; height: 143px; overflow: hidden; border-radius: 10px; background: #000; }
.shop__photos img { position: absolute; object-fit: cover; }
.shop__info { position: absolute; left: 25px; top: 191px; width: 299px; display: flex; flex-direction: column; gap: 26px; }
.shop__lines { display: flex; flex-direction: column; gap: 23px; }
.shop__line { display: flex; flex-direction: column; width: 231px; }
.shop__label { width: 228px; height: 14px; font-size: 16px; font-weight: 400; line-height: 1.12; color: #8e8e8e; }
.shop__phone { font-size: 27px; font-weight: 600; line-height: 0.82; color: var(--text); white-space: nowrap; }
.shop__val { width: 100%; max-width: 100%; font-size: 21px; font-weight: 500; line-height: 1.16; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
.socials { display: flex; align-items: center; gap: 15px; }
.socials img { width: 40px; height: 40px; }
.socials .shop__whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; }
.socials .shop__whatsapp img { display: block; width: 40px; height: 40px; }
.socials .footer__whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.socials .footer__whatsapp img { width: 40px; height: 40px; }
.socials .vk-btn__ico { left: 9.5px; top: 9.5px; }
.socials .vk-btn__ico img { width: 100%; height: 100%; }
.shop__route {
  position: absolute; left: 25px; top: 468px; display: flex; align-items: center; justify-content: center; gap: 20px;
  width: 326px; height: 60px; border-radius: 1111px; background: var(--orange);
  font-size: 16px; font-weight: 600; line-height: normal; color: #fff; white-space: nowrap;
}
.shop__route > .arr, .shop-card__btn > .arr { position: static; top: auto; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; line-height: 1; }
.shop__route > .arr img, .shop-card__btn > .arr img { position: static; display: block; flex: none; margin: 0; }
/* A real store address may wrap. Let the line grow in document flow so the
   working-hours line below cannot overlap it. */
.shops .shop__line:has(.shop__val) { height: auto !important; }
.shops .shop__line:has(.shop__val) .shop__label,
.shops .shop__line:has(.shop__val) .shop__val { height: auto !important; }
.map { position: relative; flex: none; width: 1098px; height: 559px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.map__pin { position: absolute; width: 75px; height: 75px; }
.map__c { position: absolute; left: 0; top: 0; width: 75px; height: 75px; }
.map__mark { position: absolute; width: 31.765px; height: 33.75px; object-fit: cover; }
.map.dz-live-map { isolation: isolate; background: #edf0ee; }
.dz-live-map__frame { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; border: 0; background: #edf0ee; }
.dz-live-map__preview { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; background: #edf0ee; cursor: pointer; }
.dz-live-map__preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dz-live-map__preview > span { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; transform: translate(-50%, -50%); background: var(--orange); box-shadow: 0 8px 24px rgba(0,0,0,.2); color: #fff; font: 600 15px/1 var(--font); white-space: nowrap; }
.dz-live-map__preview:hover > span, .dz-live-map__preview:focus-visible > span { background: #ef6820; }
.dz-live-map__switcher { position: absolute; z-index: 3; top: 18px; left: 18px; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 36px); }
.dz-live-map__city { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 15px; border: 1px solid rgba(29,29,29,.08); border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(0,0,0,.12); color: #3b3b3b; font: 600 14px/1 var(--font); white-space: nowrap; transition: background var(--t), color var(--t), border-color var(--t); }
.dz-live-map__city:hover, .dz-live-map__city.is-active { border-color: var(--orange); background: var(--orange); color: #fff; }
.dz-live-map__route { position: absolute; z-index: 3; right: 18px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 15px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(0,0,0,.12); color: #3b3b3b; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dz-live-map__route:hover { color: var(--orange); }

/* ==========================================================
   13 экран — финальный CTA
   ========================================================== */
.cta {
  margin-top: 110px; height: 450px; border-radius: 20px; overflow: visible; background: #fc7e33; z-index: 1;
  /* The handset intentionally rises above the CTA in the original layout.
     Keep the lower edge clipped so decorative assets cannot bleed below it. */
  clip-path: inset(-120px 0 0 0 round 20px);
}
.cta__head { position: absolute; left: 50px; top: 74px; display: flex; flex-direction: column; gap: 25px; color: #fff; }
.cta__title { width: 520px; height: 226px; font-size: 55px; line-height: 1.07; }
.cta__sub { width: 344px; height: 47px; font-size: 20px; font-weight: 500; line-height: 1.4; }
.cta__form { position: absolute; left: 1049px; top: 42px; width: 413px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cta__fields { display: flex; flex-direction: column; gap: 23px; }
.cta__group { display: flex; flex-direction: column; gap: 20px; }
.field {
  position: relative; display: flex; align-items: center; width: 413px; height: 70px; padding: 14px 35px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 1111px; box-shadow: 0 13px 42.1px rgba(255, 123, 49, .25);
}
.field input { width: 100%; height: 22px; outline: 0; font-size: 18px; font-weight: 500; line-height: normal; color: #fff; }
.field input::placeholder { color: #fff; opacity: 1; }
.field__patch { position: absolute; left: 33px; top: -11px; height: 23px; background: #fc7e33; }
.field__label { position: absolute; left: 44px; top: -9px; height: 22px; white-space: nowrap; font-size: 13px; font-weight: 400; line-height: normal; color: #fff; }
.channels { display: flex; gap: 22px; }
.channel input { position: absolute; opacity: 0; pointer-events: none; }
.channel__in {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 123px; height: 45px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 1111px; box-shadow: 0 13px 42.1px rgba(255, 123, 49, .25);
  font-size: 15px; font-weight: 500; line-height: normal; color: #fff; white-space: nowrap;
}
.channel__in > span:last-child { height: 15px; }
.channel input:checked + .channel__in { background: #fff; color: #515151; box-shadow: none; filter: drop-shadow(0 13px 21.05px rgba(255, 123, 49, .25)); }
/* иконка: белая на оранжевом, тёмно-серая (#515151) на выбранной белой плашке */
.channel__in img { filter: brightness(0) invert(1); transition: filter var(--t); }
.channel input:checked + .channel__in img { filter: brightness(0) invert(.32); }
.channel input:focus-visible + .channel__in { outline: 2px solid #fff; outline-offset: 2px; }
.cta__consent { width: 344px; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: center; color: #fff; }
.cta__consent a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }

/* ==========================================================
   Футер
   ========================================================== */
.footer { position: relative; width: 2002px; height: 640px; margin: -77px 0 0 calc(50% - 1001px); border-radius: 20px; overflow: hidden; background: #141414; }
.footer__top { position: absolute; left: 250px; top: 168px; width: 1504px; display: flex; align-items: flex-start; justify-content: space-between; }
.footer__brand { display: flex; flex-direction: column; justify-content: space-between; height: 185px; }
.footer__brand > img { width: 293px; height: 52px; object-fit: cover; }
.footer__legal { display: flex; flex-direction: column; gap: 22px; font-size: 15px; line-height: 1.12; color: #949494; white-space: nowrap; }
.footer__cols { display: flex; align-items: flex-start; gap: 140px; }
.fcol { display: flex; flex-direction: column; gap: 18px; min-height: 289px; flex: none; }
.fcol__title { height: 18px; font-size: 22px; font-weight: 600; line-height: 0.82; color: #fff; white-space: nowrap; }
.fcol__list { display: flex; flex-direction: column; gap: 20px; font-size: 16px; line-height: 1.12; color: #a3a3a3; }
.fcol__list a { display: block; width: 228px; height: 14px; }
.fcontacts { display: flex; flex-direction: column; gap: 26px; width: 299px; }
.fc__label { width: 228px; height: 14px; font-size: 16px; font-weight: 500; line-height: 1.12; color: #a3a3a3; }
.fc__phone { font-size: 23px; font-weight: 600; line-height: 0.82; color: #fff; white-space: nowrap; }
.fc__val { width: 382px; font-size: 19px; font-weight: 500; line-height: 1.16; color: #fff; white-space: nowrap; }
.footer__line { position: absolute; left: 41px; top: 560px; width: 1920px; height: 1px; }
.footer__bottom { position: absolute; left: 251px; top: 590px; width: 1502px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; line-height: 1.12; white-space: nowrap; }
.footer__link { color: #fc7e33; text-decoration: underline; text-decoration-thickness: from-font; text-underline-position: from-font; }
.footer__dev { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: #666; font-size: 13px; line-height: 1; text-decoration: none; transition: color var(--t), opacity var(--t); }
.footer__dev:hover { color: #aaa; }
.footer__dev-logo { display: block; width: 72px; height: 22px; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* обводка только при переходе с клавиатуры (Tab); при нажатии мышью/пальцем — никогда */
html.is-pointer :focus, html.is-pointer :focus-visible { outline: none !important; }
* { -webkit-tap-highlight-color: transparent; }
/* у полей ввода рамки нет — фокус виден по курсору; поле поиска оформлено как плашка */
input:focus, input:focus-visible { outline: none; }

/* ==========================================================
   Оптическое выравнивание текста в кнопках и плашках.
   У Gilroy заглавные стоят на 0.076em выше середины строки — в однострочных
   кнопках сдвигаем текст вниз, чтобы отступы сверху и снизу были равными.
   ========================================================== */
.btn-more > span:first-child, .btn-grad > span:first-child, .btn-white2 > span:first-child, .btn-white__text,
.btn-catalog__text, .shop__route > span, .pill-model__text, .pill-pre__text, .badge > span:last-child,
.prod__btn > span:first-child, .channel__in > span:last-child, .watch-btn__text, .search__input {
  position: relative; top: 0.076em;
}
.tile__price, .pill, .badge-count { padding-top: 0.24em; }
/* Hero label is a flex pill: inherited optical padding visibly shifts it
   at wide zoom levels, so its text must use the real geometric centre. */
.tag { padding-top: 0; line-height: 1; }
.bonus__pill { padding-top: 0; line-height: 1; }
/* Цифра счётчика — самостоятельный flex-элемент: ей не нужен общий
   «оптический» padding текстовых плашек. */
.badge-count { padding-top: 0 !important; line-height: 1; font-variant-numeric: tabular-nums; }
/* высоты текстовых блоков из Figma меньше реальной строки — строка вылезала вниз; центрируем саму строку */
.btn-more > span:first-child, .btn-grad > span:first-child, .btn-white2 > span:first-child, .btn-white__text,
.btn-catalog__text, .pill-model__text, .pill-pre__text, .prod__btn > span:first-child,
.channel__in > span:last-child, .badge > span:last-child, .shop__route > span { height: auto !important; line-height: 1.2; }
.pill-pre > * { translate: 1px 0; }
.btn-grad > * { translate: -1px 0; }
.badge > span:last-child { height: auto !important; }
/* иконки в круглых кнопках — по центру (в исходных SVG смещены) */
/* иконки в кружках 30×30 — по центру по пикселям (замер при 4×) */
.circle-btn[aria-label="Сравнение"] .ico-compare { translate: -0.5px 0; }

/* ==========================================================
   Состояния наведения (hover) — единые для всего сайта.
   Основа — состояние карточки товара из макета: белая кнопка → оранжевая,
   текст и иконки → белые. Новые кнопки на внутренних страницах
   собирать из этих же классов, тогда ховер появится сам.
   ========================================================== */
:root { --orange-hover: #f06a1d; --dark-hover: #262626; --t: .2s ease; }

/* 1. Белые кнопки на светлом фоне → оранжевые */
.btn-more, .circle-btn, .prod__act, .hero-nav button img {
  transition: background-color var(--t), color var(--t), filter var(--t);
}
.btn-more:hover, .circle-btn:hover { background: var(--orange); color: #fff !important; }
.btn-more:hover img, .circle-btn:hover img { filter: brightness(0) invert(1); }
.circle-btn:hover .badge-count { background: #fff; color: var(--orange); }
.hero-nav button:hover img { filter: brightness(.92); }

/* 2. Белые кнопки на оранжевом/цветном фоне (баннеры, бонусы, форма) → тёмные, иначе сливаются с фоном */
.btn-white2, .btn-white, .pill-model, .watch-btn { transition: background-color var(--t), color var(--t); }
.btn-white2:hover, .btn-white:hover, .pill-model:hover { background: var(--dark-hover); color: #fff; }
.btn-white2:hover img, .btn-white:hover img, .pill-model:hover img { filter: brightness(0) invert(1); }
.btn-white:hover .btn-white__text, .pill-model:hover .pill-model__text { color: #fff; }
.watch-btn:hover { background: var(--dark-hover); }
.watch-btn:hover .watch-btn__text { color: #fff; }
.watch-btn:hover img { filter: brightness(0) invert(1); }

/* 3. Оранжевые и градиентные кнопки → темнее */
.btn-catalog, .btn-grad, .shop__route, .pill-pre { transition: filter var(--t), background-color var(--t); }
.btn-catalog:hover { filter: brightness(.93); }

/* Mega menu of visual catalogue categories. */
.dz-catalog-menu { position: relative; z-index: 120; flex: none; }
.dz-catalog-menu::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 18px; }
.dz-catalog-menu > .btn-catalog { margin-left: 0 !important; }
.dz-catalog-menu__panel {
  position: absolute; top: calc(100% + 14px); left: 0; width: min(1000px, calc(100vw - 48px));
  padding: 24px; border: 1px solid rgba(0,0,0,.06); border-radius: 24px; background: rgba(255,255,255,.98);
  box-shadow: 0 12px 28px rgba(0,0,0,.10); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px); transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.dz-catalog-menu:hover .dz-catalog-menu__panel,
.dz-catalog-menu:focus-within .dz-catalog-menu__panel,
.dz-catalog-menu.is-open .dz-catalog-menu__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dz-catalog-menu__head { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 18px; font-size: 21px; font-weight: 600; line-height: 1; }
.dz-catalog-menu__head a { display: inline-flex; align-items: center; gap: 9px; color: var(--orange); font-size: 14px; font-weight: 600; }
.dz-catalog-menu__head b { font-size: 17px; font-weight: 500; line-height: 1; }
.dz-catalog-menu__close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 10px; border: 0; border-radius: 50%; background: #f1f1f1; color: #333; font: 400 27px/1 Arial, sans-serif; }
.dz-catalog-menu__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dz-catalog-menu__card {
  position: relative; min-height: 132px; overflow: hidden;
  border-radius: 18px; background: linear-gradient(135deg,#f7f8f8,#eceeee); color: var(--text);
  transition: transform var(--t), background-color var(--t), box-shadow var(--t);
}
.dz-catalog-menu__card:nth-child(5n+2) { background: linear-gradient(135deg,#f8f7f4,#ede8e0); }
.dz-catalog-menu__card:nth-child(5n+3) { background: linear-gradient(135deg,#f5f6f7,#e7edf0); }
.dz-catalog-menu__card:hover { color: var(--text); transform: translateY(-1px); box-shadow: 0 7px 16px rgba(0,0,0,.09); }
.dz-catalog-menu__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 58%; min-height: 132px; padding: 15px; }
.dz-catalog-menu__title { color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.1; }
.dz-catalog-menu__models { display: grid; gap: 5px; margin-top: 10px; }
.dz-catalog-menu__models a { overflow: hidden; max-width: 142px; color: #666; font-size: 12px; font-weight: 500; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.dz-catalog-menu__models a:hover, .dz-catalog-menu__title:hover { color: var(--orange); }
.dz-catalog-menu__all { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--orange); font-size: 12px; font-weight: 600; line-height: 1; }
.dz-catalog-menu__all b { font-size: 15px; font-weight: 500; }
.dz-catalog-menu__card img { position: absolute; z-index: 1; right: -8px; bottom: -8px; width: 49%; height: 110%; object-fit: contain; object-position: right bottom; mix-blend-mode: multiply; transition: transform var(--t); }
.dz-catalog-menu__card:hover img { transform: scale(1.06); }
.dz-catalog-menu__card.dz-cat--macbook img { right: -14px; bottom: -3px; width: 61%; height: 116%; }
.dz-catalog-menu__card.dz-cat--accessories img { right: -10px; bottom: -4px; width: 57%; height: 116%; }
.dz-catalog-menu__card.dz-cat--dyson img { right: -10px; bottom: -4px; width: 56%; height: 114%; }
.btn-grad:hover { filter: drop-shadow(0 13px 21.05px rgba(255, 123, 49, .25)) brightness(.93); }
.shop__route:hover { background: var(--orange-hover); }
.pill-pre:hover { filter: drop-shadow(0 13px 21.05px rgba(149, 94, 137, .5)) brightness(1.12); }

/* 4. Переключатели способа связи в форме */
.channel__in { transition: background-color var(--t); }
.channel input:not(:checked) + .channel__in:hover { background: rgba(255, 255, 255, .15); }

/* 5. Кнопка поиска, мессенджеры и соцсети */
.search__btn, .messengers a, .socials a { transition: transform var(--t), opacity var(--t); }
.search__btn:hover { transform: scale(1.12); }
.messengers a:hover, .socials a:hover { transform: translateY(-2px); opacity: .85; }

/* 6. Текстовые ссылки → оранжевые */
.topnav a, .cats a, .fcol__list a, .phone__num, .shop__phone, .fc__phone, .prod__name a, .select__value span { transition: color var(--t); }
.topnav a:hover, .cats a:hover, .fcol__list a:hover, .phone__num:hover, .shop__phone:hover, .fc__phone:hover,
.prod__name a:hover, .select__value:hover span { color: var(--orange); }
.footer__link, .cta__consent a { transition: opacity var(--t); }
.footer__link:hover, .cta__consent a:hover { opacity: .75; }

/* Compact consent notice: deliberately independent from the page-fit layout. */
.dz-cookie { position: fixed; z-index: 2000; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 18px; max-width: 580px; padding: 15px 16px 15px 20px; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 16px 44px rgba(0,0,0,.16); color: #303030; font: 500 14px/1.35 var(--font); }
.dz-cookie[hidden] { display: none !important; }
.dz-cookie p { margin: 0; }
.dz-cookie__accept { flex: 0 0 auto; min-width: 110px; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--orange-grad); color: #fff; font: 600 14px/1 var(--font); cursor: pointer; }
.dz-cookie__accept:hover { filter: brightness(.97); }

/* Trade-in landing page: the page reuses the site type scale, buttons and FAQ
   treatment, while its content has a deliberately calm, readable hierarchy. */
.ti-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); gap: 40px; min-height: 420px; margin-top: 42px; padding: 60px; overflow: hidden; border-radius: 28px; background: var(--orange-grad); color: #fff; }
.ti-hero::after { content: ''; position: absolute; right: -100px; bottom: -180px; width: 560px; height: 560px; border: 70px solid rgba(255,255,255,.13); border-radius: 50%; }
.ti-hero__copy, .ti-hero__facts { position: relative; z-index: 1; }
.ti-hero h2 { max-width: 650px; margin: 0; font: 700 62px/.98 var(--font-display); letter-spacing: 0; }
.ti-hero p { max-width: 570px; margin: 26px 0 0; font-size: 22px; line-height: 1.35; }
.ti-hero .btn-grad { margin-top: 38px; background: #fff; color: #242424; }
.ti-hero .btn-grad img { filter: brightness(0); }
.ti-hero__facts { display: grid; align-content: center; gap: 16px; }
.ti-hero__fact { padding: 21px 24px; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; background: rgba(255,255,255,.11); font-size: 18px; line-height: 1.3; }
.ti-hero__fact b { display: block; margin-bottom: 6px; font-size: 22px; }
.ti-section { margin-top: 110px; }
.ti-section .sec-head { margin-bottom: 30px; }
.ti-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ti-card { min-height: 248px; padding: 28px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); }
.ti-card__num { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 42px; border-radius: 50%; background: var(--orange-grad); color: #fff; font: 700 17px/1 var(--font); }
.ti-card h3 { margin: 0 0 13px; font-size: 23px; line-height: 1.15; }
.ti-card p, .ti-devices__text { margin: 0; color: #707070; font-size: 17px; line-height: 1.42; }
.ti-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: trade-step; }
.ti-step { min-height: 236px; padding: 29px; border-radius: 22px; background: #f0f1f1; }
.ti-step::before { counter-increment: trade-step; content: '0' counter(trade-step); display: block; margin-bottom: 43px; color: var(--orange); font: 700 20px/1 var(--font); }
.ti-step h3 { margin: 0 0 13px; font-size: 23px; line-height: 1.16; }
.ti-step p { margin: 0; color: #626262; font-size: 16px; line-height: 1.42; }
.ti-devices { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; }
.ti-devices__main, .ti-devices__note { box-sizing: border-box; min-width: 0; border-radius: 24px; padding: 40px; }
.ti-devices__main { color: #fff; background: #1d1d1d; }
.ti-devices__main h3 { margin: 0 0 25px; font-size: 30px; }
.ti-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.ti-tags span { padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 600; }
.ti-devices__note { display: flex; align-items: center; background: #fff; box-shadow: var(--shadow-card); }
.ti-devices__note p { min-width: 0; max-width: 100%; margin: 0; overflow-wrap: anywhere; font-size: 21px; line-height: 1.35; white-space: normal; }
.ti-faqs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ti-bottom { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, auto) auto; width: calc(100% - 40px); align-items: center; justify-content: center; gap: 52px; margin: 110px 20px; padding: 52px 60px; border-radius: 28px; background: #1d1d1d; color: #fff; }
.ti-bottom h2 { min-width: 0; max-width: 700px; margin: 0; font: 700 48px/1 var(--font-display); letter-spacing: 0; }
.ti-bottom .btn-grad { align-self: center; }
.ti-hero .btn-grad > .arr, .ti-bottom .btn-grad > .arr { translate: 0; }
.ti-hero .btn-grad > .arr img, .ti-bottom .btn-grad > .arr img { display: block; }

/* Guarantee page: uses the same cards, typography and container as Trade-in. */
.warranty-hero .ti-hero__copy > p + p { margin-top: 14px; }
.warranty-table { overflow-x: auto; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); }
.warranty-table table { width: 100%; min-width: 620px; border-collapse: collapse; text-align: left; }
.warranty-table th, .warranty-table td { padding: 23px 30px; border-bottom: 1px solid #ececec; font-size: 18px; line-height: 1.3; }
.warranty-table th { color: #777; font-weight: 500; }.warranty-table td:last-child, .warranty-table th:last-child { width: 28%; font-weight: 700; }.warranty-table tbody tr:last-child td { border-bottom: 0; }
.warranty-note { margin-top: 24px; color: #6e6e6e; font-size: 17px; line-height: 1.4; }.warranty-note p + p { margin-top: 7px; }
.warranty-wide, .warranty-info { padding: 48px; border-radius: 24px; color: #fff; background: #1d1d1d; }.warranty-wide h2, .warranty-info h2 { margin: 18px 0 26px; font: 700 48px/1 var(--font-display); letter-spacing: 0; }.warranty-wide > p:not(.vac-kicker), .warranty-info p { max-width: 790px; font-size: 19px; line-height: 1.42; opacity: .85; }.warranty-wide > p + p, .warranty-info p + p { margin-top: 13px; }
.warranty-text { box-sizing: border-box; width: 100%; max-width: none; padding: 38px 42px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-card); color: #5f5f5f; font-size: 19px; line-height: 1.42; }.warranty-text p + p, .warranty-text ul + p { margin-top: 18px; }.warranty-text ul { margin-top: 18px; }.warranty-text li { position: relative; padding-left: 22px; }.warranty-text li + li { margin-top: 10px; }.warranty-text li::before { position: absolute; left: 0; color: var(--orange); content: '•'; }
.warranty-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.warranty-final { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; padding: 48px; border-radius: 24px; background: #1d1d1d; color: #fff; }.warranty-final h2 { margin: 0; font: 700 48px/1 var(--font-display); letter-spacing: 0; }.warranty-final p { max-width: 820px; margin-top: 20px; font-size: 19px; line-height: 1.42; opacity: .85; }.warranty-final p + p { margin-top: 10px; }.warranty-final .btn-grad { width: 290px; background: var(--orange-grad); }.warranty-final .arr { position: static; display: inline-flex; align-items: center; justify-content: center; }.warranty-final .arr img { display: block; }

/* 7. Карточки-ссылки: лёгкий подъём, у видео — увеличение кнопки «play» */
.tile, .news__img, .video, .review__video { transition: transform var(--t), box-shadow var(--t); }
.tile:hover, .news:hover .news__img, .video:hover, .review__video:hover { transform: translateY(-4px); box-shadow: 0 29px 70px rgba(0, 0, 0, .08); }
.tile:hover .tile__title, .news:hover .news__title { color: var(--orange); }
.tile__title, .news__title { transition: color var(--t); }
.video__play, .review__play { transition: transform var(--t); }
.video:hover .video__play, .review__video:hover .review__play { transform: scale(1.08); }

/* 8. Карточка товара (по макету: курсор дизайнера на кнопке = её hover).
      «В корзину» → оранжевая с белым текстом и иконкой при наведении на саму кнопку;
      «Избранное» и «Сравнение» — каждая сама по себе. */
.prod__act, .prod__btn { transition: background-color var(--t), color var(--t); }
.prod__btn:hover { background: var(--orange); color: #fff; }
.prod__btn:hover img, .prod__act:hover img { filter: brightness(0) invert(1); }
.prod__act:hover { background: var(--orange); }
/* сама карточка — как плитки каталога: подъём на 4px, тень, название оранжевое */
.prod__card { transition: transform var(--t), box-shadow var(--t); }
.prod__card:hover { transform: translateY(-4px); box-shadow: 0 29px 70px rgba(0, 0, 0, .08); }
.prod__name a { transition: color var(--t); }
.prod__card:hover .prod__name a { color: var(--orange); }

/* 9. Метки на карте: белые, при наведении — оранжевые (так в макете показан hover) */
.map__pin { cursor: pointer; }
.map__c--on, .map__mark--on { opacity: 0; transition: opacity var(--t); }
.map__pin:hover .map__c--on, .map__pin:hover .map__mark--on, .map__pin:focus-visible .map__c--on, .map__pin:focus-visible .map__mark--on { opacity: 1; }
.map__mark:not(.map__mark--on) { transition: opacity var(--t); }
.map__pin:hover .map__mark:not(.map__mark--on) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .page *, .page *::before, .page *::after { transition: none !important; }
}

/* ==========================================================
   Живой поиск — выпадающая плашка под полем
   ========================================================== */
.search { position: relative; z-index: 300; }
.search__drop {
  position: absolute; left: 0; top: calc(100% + 10px); width: 100%; max-height: 520px; overflow: auto;
  padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .12);
}
.search__drop[hidden] { display: none; }
.search__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.search__item { display: flex; align-items: center; gap: 16px; padding: 10px 14px 10px 10px; border-radius: 14px; transition: background-color var(--t); }
.search__item.is-active, .search__item:hover { background: #f6f6f6; }
.search__thumb { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: #f6f6f6; overflow: hidden; }
.search__item.is-active .search__thumb, .search__item:hover .search__thumb { background: #fff; }
.search__thumb img { width: 52px; height: 52px; object-fit: contain; }
.search__info { flex: 1 1 auto !important; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.search__name { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__name mark { background: none; color: var(--orange); }
.search__cat { font-size: 13px; font-weight: 500; line-height: 1.2; color: #8e8e8e; }
.search__price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 16px; font-weight: 700; line-height: 1.1; color: var(--text); white-space: nowrap; }
.search__price s { font-size: 12px; font-weight: 400; color: #8e8e8e; }
.search__all {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 50px; margin-top: 8px;
  border-radius: 1111px; background: #f6f6f6; font-size: 15px; font-weight: 600; color: var(--text); transition: background-color var(--t), color var(--t);
}
.search__all:hover { background: var(--orange); color: #fff; }
.search__all:hover img { filter: brightness(0) invert(1); }
.search__empty { padding: 22px 18px; font-size: 15px; font-weight: 500; line-height: 1.5; color: #5e5e5e; }

/* ==========================================================
   Избранное / сравнение / корзина — нажатое состояние и счётчики
   ========================================================== */
.badge-count[hidden] { display: none; }
.badge-count.is-pulse { animation: dz-pulse .45s ease; }
@keyframes dz-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.prod__act.is-on { background: var(--orange); }
.prod__act.is-on img { filter: brightness(0) invert(1); }
.prod__btn.is-on { background: var(--orange); color: #fff; }
.prod__btn.is-on img { filter: brightness(0) invert(1); }

/* ==========================================================
   Футер без CTA над ним (внутренние страницы)
   ========================================================== */
.footer--plain { height: 520px; margin-top: 110px; }
.footer--plain .footer__top { top: 59px; }
.footer--plain .footer__line { top: 450px; }
.footer--plain .footer__bottom { top: 480px; }

/* ==========================================================
   Страница «О компании» (about.html)
   ========================================================== */
.ab-hero { margin-top: 89px; display: flex; align-items: flex-start; gap: 60px; height: 678px; }
.ab-hero__text { position: relative; z-index: 1; flex: none; width: 607px; display: flex; flex-direction: column; gap: 45px; }
.ab-hero__head { display: flex; flex-direction: column; gap: 15px; }
.crumbs { display: flex; align-items: center; gap: 35px; height: 22px; font-size: 16px; font-weight: 400; line-height: 1.4; color: #5e5e5e; white-space: nowrap; }
/* ширина пунктов — целая (задаётся в разметке), чтобы точки-разделители не стояли на полупикселе */
.crumbs a { color: #ff7c32; transition: color var(--t); }
.crumbs a:hover { color: var(--orange-hover); text-decoration: underline; text-underline-offset: 3px; }
.crumbs i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #ff7b30; }
.ab-hero__title { width: 593px; min-height: 1.12em; padding-top: .08em; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase; font-size: 70px; line-height: 1.04; color: var(--dark); overflow: visible; }
.ab-hero__desc { display: flex; flex-direction: column; gap: 35px; width: 612px; font-size: 20px; font-weight: 400; line-height: 1.4; color: #5e5e5e; }
.ab-hero__desc b.sb { font-weight: 600; }
/* оранжевая подложка под фото повёрнута на −1.2° вокруг центра фото */
.ab-hero__back { position: absolute; left: 667px; top: 0; width: 845px; height: 678px; border-radius: 20px; background: #ff792e; transform: rotate(-1.2deg); }
.ab-hero__photo { position: relative; flex: none; width: 845px; height: 678px; overflow: hidden; border-radius: 20px; background: #ddd; }

.stats2 { margin-top: 80px; display: flex; gap: 44px; }
.stat2 { position: relative; flex: none; width: 345px; height: 142px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: var(--shadow-soft); }
.stat2__text { position: absolute; left: 40px; top: 22px; z-index: 1; display: flex; flex-direction: column; gap: 15px; line-height: 1.4; white-space: nowrap; }
.stat2__num { height: 51px; font-size: 54px; font-weight: 700; color: var(--orange); }
.stat2__label { height: 21px; font-size: 18px; font-weight: 400; color: #5e5e5e; }

.popcats { margin-top: 119px; display: flex; flex-direction: column; gap: 40px; }
.popcats__row { display: flex; gap: 40px; }
.tile--pop { width: 348px; height: 479px; }

.gallery { margin-top: 110px; display: flex; gap: 45px; height: 523px; padding-left: 3px; }
.gallery__photo { position: relative; flex: none; width: 1422px; height: 523px; overflow: hidden; border-radius: 20px; background: #ddd; }
.gallery__slide { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.gallery__slide.is-active { opacity: 1; pointer-events: auto; }
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.gallery__badge { position: absolute; left: 24px; bottom: 24px; z-index: 1; max-width: calc(100% - 48px); padding: 11px 16px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(34,29,25,.15); color: var(--dark); font-size: 16px; font-weight: 600; line-height: 1.2; }
.gallery__nav { height: 523px; }
.gallery__nav .hero-nav__dots { gap: 10px; }
.gallery__nav .hero-nav__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #dedede; cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.gallery__nav .hero-nav__dots button.is-active { background: var(--orange); transform: scale(1.35); }

.advs { margin-top: 110px; display: flex; flex-direction: column; align-items: center; gap: 42px; }
.advs__title { width: 985px; min-height: 1.12em; padding-top: .08em; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase; font-size: 55px; line-height: 1.04; color: var(--dark); text-align: center; overflow: visible; }
.advs__row { display: flex; gap: 42px; }
.adv { position: relative; flex: none; width: 476px; height: 261px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.adv__in { position: absolute; left: 0; right: 0; top: 41px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.adv__icon { position: relative; display: block; width: 80px; height: 80px; border-radius: 50%; background: #ff6a17; }
.adv__icon .ico { position: absolute; }
.adv__icon .ico img { filter: brightness(0) invert(1); }
.adv:nth-child(1) .adv__icon .ico { left: 20px; top: 20px; }
.adv:nth-child(2) .adv__icon .ico { left: 18px; top: 17px; }
.adv:nth-child(3) .adv__icon .ico { left: 24px; top: 23px; }
.adv__text { display: flex; flex-direction: column; align-items: center; gap: 17px; width: 287px; text-align: center; }
.adv__title { height: 20px; font-size: 24px; font-weight: 600; line-height: 1.24; color: var(--text); white-space: nowrap; }
.adv__desc { width: 285px; height: 35px; font-size: 15px; font-weight: 500; line-height: 1.35; color: #8c8c8c; }

.reviews--wide { gap: 50px; }
.reviews--wide > .sec-head { align-items: center; }
.ratings--row { flex-direction: row; align-items: center; gap: 30px; height: 169px; margin-bottom: -8px; }
.ratings--row .rating { width: 484px; height: 159px; }
/* карточка выше домашней на 3px — содержимое по центру по вертикали */
.ratings--row .rating__head { width: 440px; top: 27px; }
.ratings--row .rating__row { top: 92px; }
.ratings--row .rating__line { width: 486px; top: 74px; }
.reviews__videos--4 { justify-content: space-between; gap: 0; }

.services { margin-top: 110px; display: flex; flex-direction: column; gap: 50px; }
.services__row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 391px; }
.services__row:first-child { width: 1508px; margin-left: 2px; }
.srv-card { position: relative; flex: none; height: 391px; overflow: hidden; border-radius: 20px; background: #fff; isolation: isolate; }
.srv-card__text { position: absolute; left: 46px; top: 33px; z-index: 1; width: 315px; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.srv-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.srv-card__head--c { align-items: center; text-align: center; }
.srv__title { height: 106px; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase; font-size: 55px; line-height: 1.07; color: var(--dark); }
.srv__desc { height: 76px; font-size: 20px; font-weight: 500; line-height: 1.4; color: #5e5e5e; }
.srv-side { flex: none; width: 324px; height: 317px; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.srv-side .btn-srv { align-self: flex-start; margin-left: 4px; }
.srv-side[style*="315px"] .btn-srv { margin-left: 0; }
.btn-srv {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex: none;
  width: 315px; height: 70px; border-radius: 1111px; background: #fff;
  font-size: 18px; font-weight: 600; line-height: 1.2; color: #3a3a3a; white-space: nowrap;
  transition: background-color var(--t), color var(--t);
}
.btn-srv > span:first-child { position: relative; top: 0.076em; }
.btn-srv:hover { background: var(--orange); color: #fff; }
.btn-srv:hover img { filter: brightness(0) invert(1); }

/* калькулятор рассрочки */
.calc { position: absolute; left: 429px; top: 44px; z-index: 1; width: 120px; height: 302px; display: flex; flex-direction: column; justify-content: space-between; }
.calc__field { display: flex; flex-direction: column; width: 174px; }
.calc__label { display: block; height: 16px; font-size: 14px; font-weight: 400; line-height: 1.4; color: #767676; white-space: nowrap; }
.calc__value { display: block; height: 23px; margin-top: 8px; font-size: 25px; font-weight: 600; line-height: 1.4; letter-spacing: .25px; color: var(--dark); white-space: nowrap; }
.calc__range {
  --p: 50%;
  display: block; width: 115px; height: 16px; margin: 12px 0 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--orange) var(--p), #ddd var(--p)) 0 6px / 100% 4px no-repeat; border-radius: 2px;
}
.calc__range::-webkit-slider-runnable-track { height: 16px; background: none; }
.calc__range::-moz-range-track { height: 16px; background: none; }
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 0;
  background: radial-gradient(circle, #fff 0 2.67px, var(--orange) 3.17px); transition: transform var(--t);
}
.calc__range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; background: radial-gradient(circle, #fff 0 2.67px, var(--orange) 3.17px); }
.calc__range:hover::-webkit-slider-thumb { transform: scale(1.15); }
.calc__range:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.calc__total { display: flex; flex-direction: column; gap: 7px; }
.calc__total .calc__label { height: 15px; }
.calc__sum { display: block; height: 34px; font-size: 35px; font-weight: 700; line-height: 1.4; letter-spacing: .35px; color: var(--dark); white-space: nowrap; }

/* ответы на вопросы */
.faqs { margin-top: 110px; display: flex; flex-direction: column; gap: 40px; }
.faqs__grid { display: flex; gap: 30px; align-items: flex-start; }
.faqs__col { flex: none; width: 741px; display: flex; flex-direction: column; gap: 30px; }
.faq { position: relative; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; height: 75px; padding: 0 25px;
  text-align: left; font-size: 22px; font-weight: 600; line-height: 1.24; color: var(--text);
}
.faq__q > span:first-child { position: relative; top: 0.5px; transition: color var(--t); }
.faq__plus {
  --grad-angle: 84.69deg;
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 1111px;
  background-image: var(--orange-grad); color: #fff; font-size: 20px; font-weight: 600; line-height: 1;
  margin-top: -1px; padding-top: 3px; transition: filter var(--t), transform var(--t);
}
.faq__q:hover > span:first-child { color: var(--orange); }
.faq__q:hover .faq__plus { filter: brightness(.93); }
.faq__q[aria-expanded="true"] .faq__plus { transform: rotate(45deg); }
.faq__a { padding: 0 25px 25px; font-size: 18px; font-weight: 500; line-height: 1.4; color: #5e5e5e; }
.faq__a[hidden] { display: none; }

/* ==========================================================
   Страница «Сравнение» (compare.html)
   Колонки характеристик выровнены по карточкам (шаг 309px = 276 + 33),
   в макете они шли с шагом 319px и уезжали от своих товаров.
   ========================================================== */
.cmp-head { margin-top: 86px; display: flex; align-items: flex-end; justify-content: space-between; }
.cmp-head__text { display: flex; flex-direction: column; gap: 15px; }
.cmp-head__title { min-height: 1.12em; padding-top: .08em; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase; font-size: 70px; line-height: 1.04; color: var(--dark); white-space: nowrap; overflow: visible; }
.cmp-head .btn-more[hidden] { display: none; }

.cmp { margin-top: 60px; }
.cmp__cards { display: flex; gap: 33px; height: 513px; }
.cmp-card { height: 464px; }
.cmp-col .prod__top { height: 30px; }
.cmp-remove {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 183px; height: 30px; border-radius: 1111px; background: #fff;
  font-size: 12px; font-weight: 600; line-height: 1.2; color: #4c4c4c; white-space: nowrap;
  transition: background-color var(--t), color var(--t);
}
.cmp-remove > span:last-child { position: relative; width: 120px; }
.cmp-remove:hover { background: var(--orange); color: #fff; }
.cmp-remove:hover img { filter: brightness(0) invert(1); }

.cmp__table { margin-top: 60px; display: flex; flex-direction: column; gap: 60px; }
.cmp-row { position: relative; display: flex; flex-direction: column; gap: 21px; height: 61px; }
/* серая полоса на всю ширину экрана под каждой второй строкой */
.cmp-row--alt::before { content: ""; position: absolute; left: calc(50% - 1001px); top: -27px; width: 2002px; height: 115px; background: #f0f0f0; z-index: -1; }
.cmp__table { position: relative; z-index: 0; }
.cmp-row__title { height: 20px; font-size: 21px; font-weight: 600; line-height: 1.24; color: var(--text); white-space: nowrap; }
.cmp-row__vals { display: flex; gap: 33px; height: 20px; font-size: 19px; font-weight: 500; line-height: 1.24; color: var(--text); white-space: nowrap; }
.cmp-row__vals > span { flex: none; width: 276px; }

.cmp__buys { margin-top: 70px; display: flex; gap: 33px; }
.cmp-cart {
  display: flex; align-items: center; justify-content: center; gap: 20px; width: 276px; height: 60px; border-radius: 1111px; background: #fc7e33;
  font-size: 16px; font-weight: 600; line-height: 1.2; color: #fff; white-space: nowrap; transition: background-color var(--t);
}
.cmp-cart > span:first-child { position: relative; width: 75px; text-align: center; }
.cmp-cart .ico { margin-top: 0; }
.cmp-cart img { filter: brightness(0) invert(1); }
.cmp-cart:hover { background: var(--orange-hover); }
.cmp-cart.is-on { background: var(--dark-hover); }
/* убранная колонка плавно гаснет, затем удаляется скриптом */
.cmp [data-col] { transition: opacity .25s ease; }
.cmp [data-col].is-leaving { opacity: 0; }
/* Избранное: та же сетка карточек, что в каталоге. */
.fav { margin-top: 60px; }
.fav .fav__grid { margin-top: 0; }
.fav__grid[hidden] { display: none; }
.fav .prod { transition: opacity var(--t); }
.fav .prod.is-leaving { opacity: 0; }
.fav .cmp-remove > span:last-child { width: 128px; }

.cmp-empty { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 80px 0 40px; text-align: center; }
.cmp-empty[hidden] { display: none; }
.cmp-empty__title { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking); text-transform: uppercase;
  font-size: 40px; line-height: 1.07; color: var(--dark); }
.cmp-empty__text { margin-bottom: 15px; font-size: 20px; font-weight: 500; line-height: 1.4; color: #5e5e5e; }
.cmp.is-empty .cmp__cards, .cmp.is-empty .cmp__table, .cmp.is-empty .cmp__buys { display: none; }
.cmp ~ .cta { margin-top: 133px; }
.cmp-remove .ico { margin-top: 0; }

/* ==========================================================
   Каталог с фильтром (catalog-<категория>.html) — один шаблон на все категории.
   Сетка: фильтр 276 + 4 карточки по 276 с шагом 309 — те же колонки, что у 5 карточек на главной;
   при «Свернуть фильтр» карточек в ряду становится 5.
   ========================================================== */
.flt-head { margin-top: 89px; display: flex; flex-direction: column; gap: 15px; }
.flt-head__row { display: flex; align-items: flex-start; gap: 35px; height: 72px; }
.flt-head__row .flt-count { margin-top: 14px; }
.flt-head__title { height: 72px; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase; font-size: 70px; line-height: 1.02; color: var(--dark); white-space: nowrap; }
.dz-model-page .flt-head__title {
  height: auto;
  padding: 5px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--display-tracking);
  text-transform: none;
}
.dz-model-page .flt-head__row { height: auto; align-items: center; }
/* Font ascenders/descenders exceed the old 72px Figma box in Chromium on
   Windows. Keep catalogue titles in a real content-height row. */
.flt-head__row { height: auto; min-height: 0; align-items: center; }
/* Do not retain Figma's fixed 72px title box: its glyph bounds differ across
   Windows and macOS. The heading now owns a real line box plus breathing room
   above and below, so every catalogue/model title remains fully visible. */
.flt-head__title, .dz-model-page .flt-head__title {
  box-sizing: border-box;
  display: block;
  height: auto;
  min-height: 0;
  padding: .16em 0 .20em;
  overflow: visible;
  line-height: 1.12;
}
/* Заголовок каталога — обычный текстовый блок. Ему нельзя задавать ширину
   скриптом: при zoom это давало некорректную отрисовку части символов. */
.flt-head__title { width: auto !important; text-align: left !important; }
.flt-head__row .flt-count { margin-top: 0; }
.dz-model-page .flt { margin-top: 40px; }
.flt-count { display: flex; align-items: center; justify-content: center; width: 148px; height: 45px; padding-top: 4px; border-radius: 1111px; background: #fff;
  font-size: 16px; font-weight: 500; line-height: normal; color: #1d1d1d; white-space: nowrap; }
.flt-count { padding-top: 0 !important; line-height: 1; }

.flt { margin-top: 50px; display: flex; align-items: flex-start; gap: 33px; }
.flt__side { flex: none; width: 276px; display: flex; flex-direction: column; gap: 20px; }
.flt__main { flex: none; width: 1203px; }
.flt.is-collapsed .flt__side { display: none; }
.flt.is-collapsed .flt__main { width: 1512px; }

.flt-box { border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); padding: 16px 16px 20px; }
.flt-box__title { height: 25px; margin-bottom: 9px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: .18px; color: var(--text); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 15px 8px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 1111px; background: #f6f6f6;
  font-size: 15px; font-weight: 500; line-height: 1; text-align: center; color: #1d1d1d; white-space: nowrap; transition: background-color var(--t), color var(--t);
}
.chip:hover { color: var(--orange); }
.chip[aria-pressed="true"] { background: #252525; color: #fff; }
.chip[aria-pressed="true"]:hover { background: #000; color: #fff; }

.swatches { display: flex; gap: 12px; }
.swatch { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--c); }
/* выбранный цвет — кольцо 44px цвета самой плашки (как в макете) */
.swatch::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; transition: opacity var(--t); }
.swatch:hover::after { opacity: .35; }
.swatch[aria-pressed="true"]::after { opacity: 1; }

.flt-acc { padding: 0; }
.flt-acc__head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 57px; padding: 0 16px;
  font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: .18px; color: var(--text); white-space: nowrap; text-align: left; }
.flt-acc__head > span { position: relative; top: 1px; transition: color var(--t); }
.flt-acc__head:hover > span { color: var(--orange); }
.flt-acc__chev { margin-top: 1px; transition: transform var(--t); }
.flt-acc__head[aria-expanded="true"] .flt-acc__chev { transform: rotate(180deg); }
.flt-acc__body { padding: 0 16px 20px; }
.flt-acc__body[hidden] { display: none; }

.flt-price__fields { display: flex; gap: 10px; }
.flt-price__field { flex: 1 1 0; display: flex; height: 36px; border-radius: 1111px; background: #f6f6f6; }
.flt-price__field input { width: 100%; padding-top: .24em; text-align: center; font-size: 15px; font-weight: 500; color: #1d1d1d; outline: 0; border-radius: 1111px; }
.flt-price__field:focus-within { box-shadow: inset 0 0 0 1px var(--orange); }
.flt-range { --a: 0%; --b: 100%; position: relative; height: 16px; margin-top: 15px;
  background: linear-gradient(to right, #ddd var(--a), var(--orange) var(--a), var(--orange) var(--b), #ddd var(--b)) 0 6px / 100% 4px no-repeat; border-radius: 2px; }
.flt-range__in { position: absolute; inset: 0; width: 100%; height: 16px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.flt-range__in::-webkit-slider-runnable-track { height: 16px; background: none; }
.flt-range__in::-moz-range-track { height: 16px; background: none; }
.flt-range__in::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 0; cursor: pointer; pointer-events: auto;
  background: radial-gradient(circle, #fff 0 2.67px, var(--orange) 3.17px); transition: transform var(--t); }
.flt-range__in::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 0; cursor: pointer; pointer-events: auto; background: radial-gradient(circle, #fff 0 2.67px, var(--orange) 3.17px); }
.flt-range__in:hover::-webkit-slider-thumb { transform: scale(1.15); }

.flt-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 25px; }
.flt-bar__btn { display: flex; align-items: center; gap: 25px; height: 25px; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: .15px; color: var(--text); white-space: nowrap; }
.flt-bar__btn > span { transition: color var(--t); }
.flt-bar__btn:hover > span { color: var(--orange); }
.flt-sort { position: relative; }
.flt-sort .flt-bar__btn { gap: 20px; }
.flt-sort .flt-bar__btn img { margin-top: 1px; }
.flt-sort [data-sort-btn][aria-expanded="true"] img { transform: rotate(180deg); }
.flt-sort img { transition: transform var(--t); }
.flt-sort__menu { position: absolute; right: -8px; top: 37px; margin: 0; padding: 8px; list-style: none; border-radius: 15px; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .12); }
.flt-sort__menu[hidden] { display: none; }
.flt-sort__menu li { padding: 11px 16px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--text); white-space: nowrap; cursor: pointer; transition: background-color var(--t), color var(--t); }
.flt-sort__menu li:hover, .flt-sort__menu li.is-active { background: #f6f6f6; }
.flt-sort__menu li[aria-selected="true"] { color: var(--orange); }

.flt-grid { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 45px 33px; }
.flt-grid > .prod[hidden] { display: none; }
.flt-empty { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 100px 0 60px; text-align: center; }
.flt-empty[hidden] { display: none; }
.flt-empty__title { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking); text-transform: uppercase; font-size: 40px; line-height: 1.07; color: var(--dark); }
.flt-empty__text { margin-bottom: 15px; font-size: 20px; font-weight: 500; line-height: 1.4; color: #5e5e5e; }
.flt ~ .cta { margin-top: 131px; }
/* нечётные иконки в чётных кнопках — на целый пиксель (иначе 13.5 / 15.5 и размытие) */
.circle-btn[aria-label="Корзина"] > .ico { margin: 1px 0 0 1px; }
.pill-model > .ico { margin-top: 1px; }
.pill-pre > .ico { margin-top: 1px; }
.tradein__swap .ico { left: 10px; top: 10px; }
.socials .vk-btn__ico { left: 10px; top: 10px; }
.channel__in > img, .channel__in > .ico { margin-top: 1px; }
.cmp-empty__title { height: 43px; }
.cmp-empty__text, .flt-empty__text { height: 28px; }
.flt-empty__title { height: 43px; }
.channel__in > img[src*="cta-tg"] { margin-top: 0; }

/* ==========================================================
   Карточка товара (product-<товар>.html)
   ========================================================== */
.pc-crumbs { margin-top: 89px; }
.pc { margin-top: 30px; display: flex; align-items: flex-start; gap: 60px; }
.pc__photos { flex: none; width: 644px; display: flex; flex-direction: column; gap: 40px; }
.pc-photo { position: relative; height: 647px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.pc-photo img { object-fit: cover; }
.pc__info { flex: none; width: 808px; display: flex; flex-direction: column; }
.pc__top { display: flex; flex-direction: column; gap: 30px; }
.pc__head { display: flex; align-items: center; justify-content: space-between; width: 805px; height: 40px; }
.pc__badges, .pc__acts { display: flex; align-items: center; gap: 15px; }
.badge--lg { gap: 12px; height: 40px; font-size: 14px; }
.badge--lg.badge--stock { color: #4c4c4c; }
.pc-act { position: relative; width: 40px; height: 40px; border-radius: 50%; background: #fff; transition: background-color var(--t); }
.pc-act img { position: absolute; left: 0; top: 0; }
.pc-act:hover, .pc-act.is-on { background: var(--orange); }
.pc-act:hover img, .pc-act.is-on img { filter: brightness(0) invert(1); }
.pc__main { display: flex; flex-direction: column; gap: 50px; }
/* 2 строки занимают 133px, как в макете (строки 76px, хвост последней уходит в отступ);
   длинное название в 3 строки не наезжает, а сдвигает блок ниже */
.pc__title { width: 805px; margin-bottom: -19px; font-size: 70px; font-weight: 600; line-height: 76px; color: var(--dark); }

/* The desktop canvas is intentionally scaled on ultrawide displays.  A long
   product name otherwise becomes disproportionately large at 2440px+, so
   trim only this heading while keeping the page composition untouched. */
@media (min-width: 2200px) {
  .pc__title { font-size: 60px; line-height: 66px; }
}
.pc__opts { display: flex; flex-direction: column; gap: 33px; }
.pc-opt { display: flex; align-items: center; gap: 30px; }
.pc-opt__label { height: 29px; font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: .22px; color: var(--text); white-space: nowrap; }
.pc-swatches { display: flex; gap: 21px; height: 40px; }
.pc-swatch { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--c); }
.pc-swatch::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; transition: opacity var(--t); }
.pc-swatch:hover::after { opacity: .35; }
.pc-swatch[aria-checked="true"]::after { opacity: 1; }
.pc-mems { display: flex; gap: 15px; }
.pc-mem { display: flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 1111px; background: #fff;
  font-size: 16px; font-weight: 500; line-height: 1; color: #1d1d1d; white-space: nowrap; transition: background-color var(--t), color var(--t); }
.pc-mem:hover { color: var(--orange); }
.pc-mem[aria-checked="true"] { background: #252525; color: #fff; }

.pc__buy { margin-top: 45px; display: flex; flex-direction: column; gap: 45px; }
.pc__prices { display: flex; align-items: center; gap: 30px; }
.pc__price { height: 51px; font-size: 60px; font-weight: 700; line-height: 1.12; color: var(--text); white-space: nowrap; }
.pc__old { display: flex; align-items: center; gap: 20px; }
.pc__old s { display: block; height: 21px; font-size: 28px; font-weight: 500; line-height: 1.12; color: #5e5e5e; white-space: nowrap; text-decoration-thickness: from-font; }
.pc__sale { display: flex; align-items: center; justify-content: center; width: 52px; height: 29px; padding-top: .24em; border-radius: 3px; background: #fe4949;
  font-size: 16px; font-weight: 600; line-height: normal; color: #fff; }
.pc__btns { display: flex; gap: 35px; }
.pc-cart, .pc-quick { display: flex; align-items: center; justify-content: center; gap: 25px; width: 385px; height: 77px; border-radius: 1111px;
  font-size: 19px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color var(--t), color var(--t); }
.pc-cart > span:first-child, .pc-quick > span { position: relative; top: 0.076em; }
.pc-cart { background: #ff7629; color: #fff; }
.pc-cart .ico { margin-top: 0; }
.pc-cart img { filter: brightness(0) invert(1); }
.pc-cart:hover { background: var(--orange-hover); }
.pc-cart.is-on { background: var(--dark-hover); }
.pc-quick { background: #fff; color: #2b2b2b; }
.pc-quick:hover { background: var(--orange); color: #fff; }

.pc__brief { margin-top: 60px; display: flex; flex-direction: column; gap: 30px; }
.pc__brief-head { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.pc__brief-title { height: 28px; font-size: 27px; font-weight: 600; line-height: 1.02; color: var(--dark); white-space: nowrap; }
.specs { display: grid; }
.specs--2 { grid-template-columns: repeat(2, 393px); gap: 22px; }
.specs--3 { grid-template-columns: repeat(3, 490px); gap: 27px 21px; }
.spec { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 62px; padding: 1px 26px 0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-card);
  font-size: 18px; line-height: 1.24; }
.specs--3 .spec { padding: 1px 21px 0; }
.spec__k { font-weight: 500; color: #7c7c7c; }
.spec__v { font-weight: 600; color: var(--text); text-align: right; }

.pc-specs { margin-top: 118px; display: flex; flex-direction: column; gap: 40px; scroll-margin-top: 30px; }

/* окно «Купить в 1 клик» */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 20, 20, .45); }
.modal[hidden] { display: none; }
.modal__box { position: relative; width: 520px; max-width: 100%; padding: 50px 50px 40px; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .2); }
.modal__close { position: absolute; right: 20px; top: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f6f6f6;
  font-size: 26px; line-height: 1; color: #303030; transition: background-color var(--t), color var(--t); }
.modal__close:hover { background: var(--orange); color: #fff; }
.quick { display: flex; flex-direction: column; gap: 15px; }
.quick__title { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking); text-transform: uppercase; font-size: 36px; line-height: 1.05; color: var(--dark); }
.quick__text { margin-bottom: 10px; font-size: 17px; font-weight: 500; line-height: 1.4; color: #5e5e5e; }
.quick__text b { color: var(--text); font-weight: 600; }
.quick__field { display: flex; height: 60px; border-radius: 1111px; background: #f6f6f6; }
.quick__field input { width: 100%; padding: .24em 28px 0; font-size: 17px; font-weight: 500; color: var(--text); outline: 0; border-radius: 1111px; }
.quick__field input::placeholder { color: #8e8e8e; }
.quick__field:focus-within { box-shadow: inset 0 0 0 1px var(--orange); }
.quick__submit { width: 100%; margin-top: 10px; }
.quick__consent { font-size: 13px; line-height: 1.4; text-align: center; color: #8e8e8e; }
.quick__consent a { text-decoration: underline; }
.quick__done[hidden] { display: none; }

/* карточки каталога из данных: фото целиком, название не длиннее 3 строк, «Цена по запросу» */
.prod__photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
a.prod__img { display: block; }
.prod__name a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prod__price--ask { width: auto; font-size: 20px; font-weight: 600; color: var(--text); }
.prod__btn[data-quick-open] { gap: 0; }
.swatches--wrap { flex-wrap: wrap; row-gap: 12px; }
.flt-more { display: flex; justify-content: center; margin-top: 45px; }
.flt-more .btn-more[hidden] { display: none; }
.flt-grid > .prod.is-paged { display: none; }

/* страница товара из данных: варианты — ссылки на соседние товары */
a.pc-swatch, a.pc-mem { display: flex; }
a.pc-swatch { display: block; }
.pc-opt[hidden] { display: none; }
.pc__price--ask { font-size: 44px; height: auto; }
.pc-photo .abs[style*="contain"] { object-fit: contain; }
.flt--stub .flt__side { display: none; }
.flt--stub .flt__main { width: 1512px; }
/* правая колонка карточки товара едет вместе с прокруткой, пока листаются фото */
.pc__info { position: sticky; top: var(--pc-top, 20px); }
/* светлые цвета (белый, серебро) не теряются на фоне */
.swatch, .pc-swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.pc__old[hidden] { display: none; }
/* характеристики: длинные значения переносятся, карточка растёт по высоте (общее правило shrink-0 здесь отменяем) */
.specs .spec { padding-top: 18px; padding-bottom: 17px; }
.spec__k { flex: 1 1 auto; min-width: 0; }
.spec__v { flex: 0 1 auto; max-width: 60%; min-width: 0; overflow-wrap: anywhere; }
/* очень длинное значение (список датчиков и т.п.) — на всю ширину ряда */
.spec--wide { grid-column: 1 / -1; }
.spec--wide .spec__k { flex: 0 0 auto; }
.spec--wide .spec__v { max-width: 75%; }
.specs { align-items: stretch; }
/* длинные значения в фильтре (материалы, навигация, Wi-Fi) переносятся внутри фишки */
.chip--long { height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 7px; border-radius: 18px; white-space: normal; text-align: left; line-height: 1.25; }
/* длинные названия блоков фильтра и длинные значения переносятся (shrink-0 из макета здесь отменяем) */
.flt-acc__head { height: auto; min-height: 57px; padding-top: 14px; padding-bottom: 14px; gap: 12px; }
.flt-acc__head > span { flex: 0 1 auto; min-width: 0; white-space: normal; }
.chip--long { flex-shrink: 1; max-width: 100%; }
/* «Ещё фильтры» — редкие фильтры спрятаны, основные всегда на виду */
.flt-more-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; height: 57px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-card);
  font-size: 18px; font-weight: 600; letter-spacing: .18px; color: var(--text); transition: color var(--t); }
.flt-more-toggle > span { position: relative; top: 1px; }
.flt-more-toggle:hover { color: var(--orange); }
.flt-more-toggle img { transition: transform var(--t); }
.flt-more-toggle[aria-expanded="true"] img { transform: rotate(180deg); }
.flt-extra { display: flex; flex-direction: column; gap: 20px; }
.flt-extra[hidden] { display: none; }
/* полные характеристики товара — группами в две колонки */
.spec-groups { columns: 2; column-gap: 30px; }
.spec-group { break-inside: avoid; margin-bottom: 30px; padding: 28px 32px 14px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.spec-group__title { margin-bottom: 10px; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--dark); }
.spec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; padding: 14px 0; border-top: 1px solid #efefef; font-size: 17px; line-height: 1.35; }
.spec-row:first-of-type { border-top: 0; }
.spec-row__k { flex: 1 1 auto; min-width: 0; font-weight: 500; color: #7c7c7c; }
.spec-row__v { flex: 0 1 auto; max-width: 58%; min-width: 0; font-weight: 600; color: var(--text); text-align: right; overflow-wrap: anywhere; }
/* плашки моделей под заголовком каталога и выбранные фильтры */
.flt-quick { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.flt-quick + .flt { margin-top: 40px; }
.flt-quick__item { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border-radius: 1111px; background: #fff; box-shadow: var(--shadow-card);
  font-size: 18px; font-weight: 600; line-height: 1; text-align: center; color: var(--text); white-space: nowrap; transition: background-color var(--t), color var(--t); }
.flt-quick__item:hover { color: var(--orange); }
.flt-quick__item[aria-pressed="true"] { background: #252525; color: #fff; }
.flt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 25px; }
.flt-tags[hidden] { display: none; }
.flt-tag { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 18px; border-radius: 1111px; background: #fff;
  font-size: 15px; font-weight: 500; line-height: normal; color: var(--text); white-space: nowrap; transition: color var(--t); }
.flt-tag i { font-style: normal; font-size: 18px; line-height: 1; color: #9a9a9a; transition: color var(--t); }
.flt-tag:hover, .flt-tag:hover i { color: var(--orange); }
.flt-tags__clear { padding-top: .24em; font-size: 15px; font-weight: 600; color: var(--orange); }
.flt-tags__clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================
   Страницы «Доставка и оплата» и «Рассрочка и кредит» (delivery.html, installment.html)
   Карточки по 484px: три в ряд с промежутком 30px ровно занимают контейнер 1512px
   (в макете 485 + 484 + 485 — на 2px шире контейнера).
   ========================================================== */
.info-head { margin-top: 89px; display: flex; flex-direction: column; gap: 15px; }
.info-head__title { min-height: 1.12em; padding-top: .08em; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking);
  text-transform: uppercase; font-size: 70px; line-height: 1.04; color: var(--dark); white-space: nowrap; overflow: visible; }
.info { margin-top: 50px; display: flex; flex-direction: column; gap: 45px; }
.info-tabs { display: flex; gap: 30px; }
.info-tab { width: 227px; height: 56px; border-radius: 1111px; background: #fff; font-size: 17px; font-weight: 600; color: #1d1d1d;
  transition: background var(--t), color var(--t); }
.info-tab > span { position: relative; top: 0.076em; }
.info-tab[aria-selected="true"] { background: #222; color: #fff; cursor: default; }
.info-tab[aria-selected="false"]:hover { background: var(--orange); color: #fff; }
.info-cards { display: grid; grid-template-columns: repeat(3, 484px); gap: 30px; }
.info-cards[hidden] { display: none; }
.info-card { height: 187px; padding: 23px 30px 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 17px; }
.info-card--low { padding-top: 25px; }
.info-cards--short .info-card { height: 128px; }
.info-card__title { height: 20px; font-size: 24px; font-weight: 600; line-height: 1.24; color: #303030; white-space: nowrap; }
.info-card__text { font-size: 15px; font-weight: 500; line-height: 1.35; color: #8c8c8c; }
.info-card__text b { font-weight: 700; color: #424242; }
.info-card__text span { color: #424242; }
.info-card__text a { color: var(--orange); transition: color var(--t); }
.info-card__text a:hover { color: var(--orange-hover); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .info-tab { transition: none; } }

/* ==========================================================
   Страница «Корзина» (cart.html): слева товары (951px) и тип доставки, справа итог и форма (511px)
   ========================================================== */
.cart-head { margin-top: 89px; }
.cart-head__title { height: auto; min-height: 1.12em; padding-top: .08em; line-height: 1.04; overflow: visible; }
.cart-head .btn-more[hidden] { display: none; }
.cart { margin-top: 50px; display: flex; align-items: flex-start; justify-content: space-between; }
.cart[hidden], .cart-empty[hidden] { display: none; }
.cart__main { width: 951px; display: flex; flex-direction: column; gap: 40px; }
.cart__side { width: 511px; display: flex; flex-direction: column; gap: 45px; }
.cart__h { height: 28px; padding: 0; font-size: 27px; font-weight: 600; line-height: 1.02; color: #333; white-space: nowrap; }
.cart__list { display: flex; flex-direction: column; gap: 30px; }

.cart-item { position: relative; display: flex; align-items: center; gap: 30px; height: 176px; padding: 0 12px;
  border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); transition: opacity var(--t), transform var(--t); }
.cart-item.is-gone { opacity: 0; transform: translateX(-20px); }
.cart-item__img { flex: none; width: 140px; height: 140px; }
.cart-item__img img { width: 140px; height: 140px; object-fit: contain; }
.cart-item__info { width: 330px; display: flex; flex-direction: column; gap: 20px; }
.cart-item__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  width: 312px; margin-bottom: -5px; font-size: 20px; font-weight: 600; line-height: 1.24; color: #303030; }
.cart-item__name a { transition: color var(--t); }
.cart-item__name a:hover { color: var(--orange); }
.cart-item__prices { display: flex; align-items: center; gap: 19px; height: 25px; }
.cart-item__price { font-size: 23px; font-weight: 700; line-height: 1.12; color: #303030; white-space: nowrap; }
.cart-item__price--ask { font-size: 18px; }
.cart-item__old { display: flex; align-items: center; gap: 17px; }
.cart-item__old s { font-size: 14px; font-weight: 400; line-height: 1.12; color: #5e5e5e; white-space: nowrap; }
.cart-sale { display: flex; align-items: center; justify-content: center; height: 19px; padding: 0 2px; min-width: 33px; border-radius: 3px;
  background: #fe4949; font-size: 11px; font-weight: 600; line-height: normal; color: #fff; white-space: nowrap; }
.cart-sale > span { position: relative; top: 0.076em; }
.qty { position: absolute; right: 192px; top: 64px; display: flex; align-items: center; justify-content: center; width: 182px; height: 49px;
  border-radius: 1111px; background: #f8f8f8; font-weight: 600; color: #484848; }
.qty__btn { width: 52px; height: 49px; font-size: 23px; line-height: 1; color: #484848; transition: color var(--t); }
.qty__btn:hover:not(:disabled) { color: var(--orange); }
.qty__btn:disabled { color: #c4c4c4; cursor: default; }
.qty__val { width: 78px; text-align: center; font-size: 17px; line-height: normal; white-space: nowrap; }
.qty__val > span, .qty__btn > span { position: relative; top: 0.076em; }
.cart-del { position: absolute; right: 29px; top: 64px; width: 49px; height: 49px; border-radius: 50%; background: #f8f8f8;
  transition: background var(--t); }
.cart-del img { display: block; width: 49px; height: 49px; transition: filter var(--t); }
.cart-del:hover { background: var(--orange); }
.cart-del:hover img { filter: brightness(0) invert(1); }

.cart__ship { display: flex; flex-direction: column; gap: 25px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cart__ship legend { float: left; }
.ships { display: flex; gap: 15px; }
.ship { position: relative; flex: none; width: 307px; height: 96px; cursor: pointer; }
.ship input { position: absolute; opacity: 0; pointer-events: none; }
.ship__in { position: relative; display: block; height: 96px; border-radius: 15px; background: #fff; box-shadow: var(--shadow-card); }
.ship__dot { position: absolute; left: 27px; top: 29px; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); transition: background var(--t), box-shadow var(--t); }
.ship input:checked + .ship__in .ship__dot { background: #ff7121; box-shadow: none; }
.ship input:checked + .ship__in .ship__dot::after { content: ''; position: absolute; left: 4px; top: 4px; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.ship__title { position: absolute; left: 55px; top: 23px; height: 20px; font-size: 20px; font-weight: 600; line-height: 1.24; color: #303030; white-space: nowrap; transition: color var(--t); }
.ship__note { position: absolute; left: 55px; top: 54px; height: 13px; font-size: 14px; font-weight: 500; line-height: 1.12; color: #8c8c8c; white-space: nowrap; }
.ship:hover .ship__title { color: var(--orange); }
.ship:hover .ship__dot { box-shadow: inset 0 0 0 1px var(--orange); }
.ship input:focus-visible + .ship__in { outline: 2px solid var(--orange); outline-offset: 2px; }

.cart-sum { height: 93px; display: flex; flex-direction: column; gap: 23px; }
.cart-sum__row { display: flex; align-items: center; gap: 25px; height: 51px; }
.cart-sum__total { font-size: 50px; font-weight: 700; line-height: 1.12; color: #303030; white-space: nowrap; }
.cart-sum__old { display: flex; align-items: center; gap: 20px; }
.cart-sum__old[hidden] { display: none; }
.cart-sum__old s { font-size: 25px; font-weight: 500; line-height: 1.12; color: #5e5e5e; white-space: nowrap; }
.cart-sum__sale { display: flex; align-items: center; justify-content: center; height: 23px; min-width: 40px; padding: 0 4px; border-radius: 3px;
  background: #fe4949; font-size: 12px; font-weight: 600; line-height: normal; color: #fff; padding-top: 0.076em; }

.cart-form { position: relative; height: 526px; padding: 47px 0 0 33px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 25px; }
.cart-form__fields { display: flex; flex-direction: column; gap: 28px; }
.field--light { width: 451px; height: 75px; border-color: rgba(61, 61, 61, .15); box-shadow: none; transition: border-color var(--t); }
.field--light input { color: #535353; }
.field--light input::placeholder { color: #535353; }
.field--light .field__patch { background: #fff; }
.field--light .field__label { color: #535353; }
.field--light:hover, .field--light:focus-within { border-color: var(--orange); }
.field--light.is-error { border-color: #fe4949; }
.cart-form__send { width: 452px; display: flex; flex-direction: column; align-items: center; gap: 21px; }
.cart-form__btn { width: 452px; height: 77px; border-radius: 1111px; background: #ff7629; font-size: 20px; font-weight: 600; color: #fff; transition: background var(--t); }
.cart-form__btn > span { position: relative; top: 0; }
.cart-form__btn:hover { background: var(--orange-hover); }
.cart-form__note { font-size: 13px; font-weight: 400; line-height: 1.4; color: #777; text-align: center; }
.cart-form__note a { text-decoration: underline; text-underline-offset: 2px; transition: color var(--t); }
.cart-form__note a:hover { color: var(--orange); }
.cart-form.is-sent .cart-form__fields, .cart-form.is-sent .cart-form__send { display: none; }
.cart-form__done { width: 451px; display: flex; flex-direction: column; gap: 15px; padding-top: 140px; text-align: center; }
.cart-form__done[hidden] { display: none; }
.cart-form__done-title { font-size: 27px; font-weight: 600; color: #333; }
.cart-form__done-text { font-size: 17px; font-weight: 500; line-height: 1.4; color: #8c8c8c; }
.cart-msg { align-self: center; height: 20px; font-size: 20px; font-weight: 600; line-height: 1.24; color: #303030; white-space: nowrap; transition: color var(--t); }
.cart-msg:hover { color: var(--orange); }

/* Корзина: уточнения из утверждённого макета. */
.cart__side { width: 511px; display: flex; flex-direction: column; gap: 40px; }
.cart-sum { height: auto; display: flex; flex-direction: column; gap: 30px; }
.cart-sum__title { font-size: 30px; }
.cart-sum__rows { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.cart-sum__line { display: flex; align-items: flex-end; gap: 20px; }
.cart-sum__line[hidden] { display: none; }
.cart-sum__line::after { content: ''; order: 1; flex: 1; border-bottom: 1px solid rgba(0,0,0,.2); }
.cart-sum__line dt { height: 20px; font-size: 20px; font-weight: 600; line-height: 1.24; color: #404040; white-space: nowrap; }
.cart-sum__line dd { order: 2; height: 26px; margin: 0; font-size: 25px; font-weight: 600; line-height: 26px; color: #303030; text-align: right; white-space: nowrap; }
.cart-sum__line--total { margin-top: -4px; }
.cart-sum__line--total dd { height: 30px; font-size: 33px; font-weight: 700; line-height: 30px; }
.cart-form__btn > span, .cart-msg__btn > span { position: relative; top: .076em; }
.cart-msg { align-self: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 30px; color: #303030; }
.cart-msg__title { height: 20px; font-size: 20px; font-weight: 600; line-height: 1.24; white-space: nowrap; }
.cart-msg__btns { align-self: stretch; display: flex; justify-content: space-between; }
.cart-msg__btn { display: flex; align-items: center; justify-content: center; gap: 25px; width: 240px; height: 61px; border-radius: 1111px; background: #fff; font-size: 16px; font-weight: 600; color: #484848; transition: background-color var(--t), color var(--t); }
.cart-msg__btn:hover { background: var(--orange); color: #fff; }
.cart-msg__btn:hover img { filter: brightness(0) invert(1); }
.cart-form__error { margin: 12px 0 0; color: #d83b1a; font-size: 14px; text-align: center; }

.cart-empty { margin-top: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.cart-empty__title { font-size: 27px; font-weight: 600; color: #333; }
.cart-empty__text { margin-bottom: 15px; font-size: 17px; font-weight: 500; color: #8c8c8c; }
@media (prefers-reduced-motion: reduce) { .cart-item, .qty__btn, .cart-del, .ship__dot, .cart-form__btn { transition: none; } }

/* ==========================================================
   Страница «Каталог джистор» (catalog.html): плитки категорий .tile--pop по 4 в ряд, промежуток 40px
   ========================================================== */
.ctiles { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 348px); gap: 40px; }
a.fcol__title { transition: color var(--t); }
a.fcol__title:hover { color: var(--orange); }
.call-head { margin-top: 89px; }
.ctiles + .products { margin-top: 118px; }

/* ==========================================================
   Страница «Отзывы клиентов» (reviews.html): рейтинги в ряд, видеоотзывы 4 в ряд (345px, промежутки 40 / 45px),
   «Показать еще» и постраничная навигация
   ========================================================== */
.revs { margin-top: 50px; display: flex; flex-direction: column; }
.revs__grid { margin-top: 45px; display: grid; grid-template-columns: repeat(4, 345px); column-gap: 40px; row-gap: 45px; }
.revs__grid .review[hidden] { display: none; }
.revs__nav { margin-top: 60px; display: flex; align-items: center; justify-content: space-between; height: 56px; }
.revs__nav .btn-more[hidden] { visibility: hidden; display: flex; }
.pager { display: flex; align-items: center; gap: 55px; margin-right: 0; }
.pager__nums { display: flex; align-items: center; gap: 3px; }
.pager__num { width: 37px; height: 37px; border-radius: 50%; font-size: 17px; font-weight: 500; letter-spacing: 0.17px; color: #828282;
  transition: color var(--t), background var(--t); }
.pager__num > span { position: relative; top: 0.076em; }
.pager__num.is-on { background: #e5e5e5; font-weight: 600; color: #404040; cursor: default; }
.pager__num:not(.is-on):hover { color: var(--orange); }
.pager__arrow { width: 56px; height: 56px; border-radius: 50%; background: #fff; transition: background var(--t); }
.pager__arrow img { display: block; transition: filter var(--t); }
.pager__arrow--prev img { transform: rotate(180deg); }
.pager__arrow:hover:not(:disabled) { background: var(--orange); }
.pager__arrow:hover:not(:disabled) img { filter: brightness(0) invert(1); }
.pager__arrow:disabled { opacity: .4; cursor: default; }
.footer--revs { margin-top: 118px; }
.revs .ratings--row { margin-bottom: 0; }

/* ==========================================================
   Страница «Контакты» (contacts.html): карта с карточкой магазина и карточки всех магазинов 4 в ряд (348×389, промежуток 40px)
   ========================================================== */
.shops--page { margin-top: 57px; }
.map__pin.is-active .map__c--on, .map__pin.is-active .map__mark--on { opacity: 1; }
.map__pin.is-active .map__mark:not(.map__mark--on) { opacity: 0; }
.shop-cards { margin-top: 78px; display: grid; grid-template-columns: repeat(4, 348px); gap: 40px; }
.shop-card { position: relative; height: 389px; overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 16px 48.2px 2px rgba(0, 0, 0, .05); }
.shop-card__info { position: absolute; left: 31px; top: 27px; width: 299px; display: flex; flex-direction: column; gap: 23px; }
.shop-card__lines { gap: 21px; }
.shop-card__phone { font-size: 25px; }
.shop-card__val { font-size: 19px; }
.shop-card__btn { position: absolute; left: 30px; top: 298px; display: flex; align-items: center; justify-content: center; gap: 20px;
  width: 283px; height: 58px; border-radius: 1111px; background: #f8f8f8; font-size: 16px; font-weight: 600; line-height: normal; color: #1d1d1d;
  white-space: nowrap; transition: background var(--t), color var(--t); }
.shop-card__btn > span { position: relative; top: 0.076em; }
.shop-card__btn img { transition: filter var(--t); }
.shop-card__btn:hover { background: var(--orange); color: #fff; }
.shop-card__btn:hover img { filter: brightness(0) invert(1); }
.shop__route--page { width: 306px; }
.shop-card__city { margin: 0; font-size: 27px; font-weight: 600; line-height: 1; color: var(--text); }
.shop-card__address-line, .shop-card__phone-line, .shop-card__time-line { height: auto !important; align-items: flex-start; gap: 10px !important; }
.shop-card__address-line .shop__label, .shop-card__time-line .shop__label { width: 100%; height: auto; }
.shop-card__address-line .shop__val, .shop-card__time-line .shop__val { width: 100%; height: auto !important; white-space: normal; }
.shop-card__btn { text-decoration: none; }

/* Сравнение: все характеристики товаров каталога по группам, «Только различия» */
.cmp-head__acts { display: flex; gap: 20px; }
.cmp-head .cmp-diff[hidden] { display: none; }
.cmp-diff[aria-pressed="true"] { background: #222; color: #fff !important; }
.cmp-diff[aria-pressed="true"]:hover { background: var(--dark-hover); }
.cmp__table--full .cmp-row { height: auto; }
.cmp__table--full .cmp-row__vals { height: auto; margin-bottom: -3.56px; white-space: normal; }
.cmp__table--full .cmp-row__vals > span { overflow-wrap: anywhere; }
.cmp__table--full .cmp-row--alt::before { height: calc(100% + 54px); }
.cmp-group { display: flex; flex-direction: column; gap: 60px; }
.cmp-group[hidden], .cmp-row[hidden] { display: none; }
.cmp-group__title { height: 28px; margin-bottom: -20px; font-size: 27px; font-weight: 600; line-height: 1.02; color: #333; white-space: nowrap; }
.cmp-group + .cmp-group { margin-top: 20px; }
/* в полном списке строк много — промежутки плотнее, полоса под строкой по 18px сверху и снизу */
.cmp__table--full .cmp-group { gap: 36px; }
.cmp__table--full .cmp-row { gap: 14px; }
.cmp__table--full .cmp-row--alt::before { top: -18px; height: calc(100% + 36px); }
.cmp__table--full .cmp-group__title { margin-bottom: -6px; }

/* ==========================================================
   «Блог и новости» (blog.html): вкладки рубрик (как на «Доставке»), сетка 4 × 354px с промежутком 32px —
   видео на 2 колонки, широкое видео на все 4. В макете 354 × 4 + 35 × 3 = 1521px — шире контейнера.
   ========================================================== */
.pager[hidden] { display: none; }
.info-tab[aria-pressed="true"] { background: #222; color: #fff; cursor: default; }
.info-tab[aria-pressed="false"]:hover { background: var(--orange); color: #fff; }
.blog-page { margin-top: 45px; display: flex; flex-direction: column; }
.blog-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(4, 354px); column-gap: 32px; row-gap: 40px; align-items: start; }
.blog-grid > [hidden] { display: none; }
.blog-grid > .video--blog { grid-column: span 2; width: 740px; margin-bottom: 5px; }
.blog-grid > .news { height: 249px; }
.video--wide { grid-column: span 4; width: 1512px; height: 494px; margin-top: 20px; }
.video--wide .video__play { bottom: 34px; }
.video--wide .video__text { top: 356px; }
.blog-page .revs__nav { margin-top: 50px; }

/* Published editorial media: supplied photos and hosted videos fill the
   existing cards without relying on hard-coded crop coordinates. */
.news__img > img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video > video.abs { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog .news__title { height: auto; min-height: 51px; }

/* ==========================================================
   Статья (article.html): текст 900px слева, справа содержание и плашка магазина (закреплены при прокрутке)
   ========================================================== */
.art { margin-top: 45px; display: flex; align-items: flex-start; justify-content: space-between; }
.art__body { width: 900px; display: flex; flex-direction: column; gap: 25px; }
.art__meta { margin-bottom: 10px; }
.art__cover { margin: 0 0 15px; height: 460px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.art__cover img { width: 100%; height: 100%; object-fit: cover; }
.art__lead { font-size: 23px; font-weight: 600; line-height: 1.45; color: #303030; }
.art__body h2 { margin-top: 25px; scroll-margin-top: 30px; font-size: 32px; font-weight: 600; line-height: 1.2; color: #303030; }
.art__body p { font-size: 19px; font-weight: 500; line-height: 1.6; color: #424242; }
.art__body p a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t); }
.art__body p a:hover { color: var(--orange-hover); }
.art__quote { margin: 15px 0; padding: 30px 40px; border-left: 4px solid var(--orange); border-radius: 0 20px 20px 0; background: #fff;
  box-shadow: var(--shadow-card); font-size: 24px; font-weight: 600; line-height: 1.4; color: #303030; }
.art__body .art__note { margin-top: 10px; font-size: 15px; color: #8c8c8c; }
.art__side { position: sticky; top: 30px; width: 484px; display: flex; flex-direction: column; gap: 30px; }
.art__toc { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card); }
.art__toc-title { margin-bottom: 4px; font-size: 24px; font-weight: 600; color: #303030; }
.art__toc a { font-size: 17px; font-weight: 500; line-height: 1.35; color: #5e5e5e; transition: color var(--t); }
.art__toc a:hover { color: var(--orange); }
.art__promo { display: flex; flex-direction: column; gap: 15px; padding: 30px; border-radius: 20px; background: #fc7e33; color: #fff; }
.art__promo-title { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--display-tracking); text-transform: uppercase;
  font-size: 34px; line-height: 1.05; }
.art__promo-text { margin-bottom: 10px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.art__promo .btn-grad { background: #fff; color: #1d1d1d; }
.art__promo .btn-grad img { filter: brightness(0); }
.art__promo .btn-grad:hover { background: #262626; color: #fff; filter: none; }
.art__promo .btn-grad:hover img { filter: brightness(0) invert(1); }
.art-more { margin-top: 110px; display: flex; flex-direction: column; gap: 40px; }
.art-more__row { gap: 32px; }
.pc-sims { flex-wrap: wrap; row-gap: 10px; }

/* Ноутбуки: у фото источника нет белых полей (корпус от края до края) — окно фото с отступами 20px от краёв карточки,
   на странице товара — поля 7% */
.prod--laptop .prod__img { left: 20px; top: 43px; width: 236px; height: 236px; }
.pc--laptop .pc-photo img { left: 7% !important; top: 7% !important; width: 86% !important; height: 86% !important; }

/* страница товара из данных: пока скрипт не подставил товар из ?id=, блок скрыт — без мигания заготовки */
html.js .pc[data-pc-data]:not(.is-ready) { visibility: hidden; }

/* варианты переносятся на новую строку внутри колонки, а не уходят за край */
.pc-opt__label { flex: none; }
.pc-mems { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 10px; }
.pc-mem { flex: none; white-space: nowrap; }
.pc-opt { align-items: flex-start; }
.pc-opt__label { display: flex; align-items: center; min-height: 38px; padding-top: 0; }
.pc-opt:has(.pc-swatches) { align-items: center; }

/* Footer: one selected store is shown at a time, so its address uses the
   same readable contact scale as the phone and working-hours values. */
.fc__stores { display: block; width: 382px; font-size: 19px; font-weight: 500; line-height: 1.16; white-space: normal; }
.fc__stores > span { display: block; white-space: nowrap; }
.fc__val:has(.fc__stores) { white-space: normal !important; }
.fc__val:not(:has(.fc__stores)) { white-space: nowrap !important; }

/* FAQ: text and the plus control share one true vertical center. */
.faq__q > span:first-child { top: 0; }
.faq__plus {
  position: relative; flex: 0 0 36px; margin-top: 0; padding-top: 0;
  font-size: 0; line-height: 0; transform: none !important;
}
.faq__plus::before, .faq__plus::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px;
  margin: -1px 0 0 -6.5px; border-radius: 2px; background: currentColor;
  transform-origin: 50% 50%; transition: transform var(--t);
}
.faq__plus::before { transform: rotate(0deg); }
.faq__plus::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__plus::before { transform: rotate(45deg); }
.faq__q[aria-expanded="true"] .faq__plus::after { transform: rotate(-45deg); }
@media (max-width: 767px) {
  .faq__q { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; min-height: 78px; height: auto; padding: 16px 20px 16px 24px; gap: 14px; line-height: 1.28; }
  .faq__plus { justify-self: center; align-self: center; }
}

/* Product photos have different source framing. Give every desktop product
   image the same visual breathing room inside its white gallery card instead
   of letting edge-to-edge source files touch the rounded boundary. */
@media (min-width: 768px) {
  .pc-photo > img.abs[style*="contain"] {
    left: 8% !important;
    top: 8% !important;
    width: 84% !important;
    height: 84% !important;
  }
}

/* Footer branch list: a single selected address needs no reserved rows. */
.footer .shop__line:has(.fc__stores) { height: auto !important; min-height: 0; }
.footer .fc__val:has(.fc__stores) { display: block; width: 100%; height: auto !important; }
.footer .fc__stores { max-width: 100%; }

/* The shared footer must follow page content.  The original static mockup
   pulled it upward with a negative margin, which hid the last row of cards
   on Contacts and other long pages. */
/* Keep a consistent breathing space after page content on every regular page. */
/* One shared vertical rhythm: no footer is allowed to sit on top of content. */
.footer:not(.footer--plain) { margin-top: 72px; }
.footer.footer--plain { margin-top: 72px; }
.footer.footer--revs { margin-top: 72px; }
/* In the supplied desktop composition the dark footer tucks under the last
   orange consultation block. Pages without CTA keep their normal breathing
   room above the footer. Mobile retains its own stacked layout in adaptive. */
/* A modal may be rendered between <main> and <footer>, so use the general
   sibling selector rather than adjacent-sibling: this is what makes the
   consultation card overlap the dark footer on every catalogue page. */
main:has(section.cta) ~ .footer { margin-top: -77px; }
/* The whole desktop page uses --page-zoom below 1920px and above it.
   Match the footer's unscaled width to the viewport at every desktop size;
   otherwise the 2002px source footer overflows at 1170–1920px. */
@media (min-width: 1170px) {
  .footer { width: calc(100vw / var(--page-zoom)); margin-left: calc(50% - (50vw / var(--page-zoom))); }
  /* Use the same 1512px source container as the header and page content.
     Percentages drift when --page-zoom changes on ultrawide displays. */
  .footer__top { left: calc((100vw / var(--page-zoom) - 1512px) / 2); width: 1512px; }
  .footer__line { left: 2%; width: 96%; }
  .footer__bottom { left: calc((100vw / var(--page-zoom) - 1512px) / 2); width: 1512px; }
  .footer .fcontacts { width: 382px; }
}
@media (max-width: 767px) {
  .footer .shop__line:has(.fc__stores) { min-height: 0; }
}

/* Store cards: keep the confirmed working-hours phrase on one desktop line.
   Mobile keeps its natural wrapping through the narrower layout below. */
@media (min-width: 768px) {
  .shop-card__time-line .shop__val {
    white-space: nowrap;
    font-size: 17px;
  }
}

/* Compact navigation which appears only after the full header has scrolled
   away. It deliberately contains just the brand and a direct phone action. */
.dz-sticky-header {
  position: fixed;
  z-index: 1200;
  top: 12px;
  left: 50%;
  display: block;
  width: min(1512px, calc(100vw - 48px));
  height: 64px;
  padding: 0 26px;
  border: 1px solid rgba(31, 31, 31, .05);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 32px rgba(31, 31, 31, .12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -88px);
  transition: transform .22s ease, opacity .18s ease;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.dz-sticky-header.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
/* The fixed bar sits outside div.page. On ultrawide screens the document is
   scaled through --page-zoom, so scale the bar too to preserve alignment. */
@media (min-width: 1170px) {
  .dz-sticky-header {
    width: 1512px;
    zoom: normal;
    transform: translate(-50%, -88px) scale(var(--page-zoom, 1));
    transform-origin: top center;
  }
  .dz-sticky-header.is-visible { transform: translate(-50%, 0) scale(var(--page-zoom, 1)); }
}
.dz-sticky-header__in { display: flex; align-items: center; width: 100%; height: 100%; gap: 18px; }
.dz-sticky-header__logo { display: block; flex: 0 1 auto; min-width: 0; }
.dz-sticky-header__logo img { display: block; width: auto; height: 28px; max-width: min(240px, 46vw); object-fit: contain; }
/* Preserve the original catalogue pill's orange treatment, icon and readable
   text proportions — only make it modestly shorter for the fixed bar. */
.dz-sticky-header__catalog { flex: none; width: 205px; height: 48px; gap: 13px; border-radius: 999px; text-decoration: none; }
.dz-sticky-header__catalog .btn-catalog__text { height: auto; font-size: 16px; }
.dz-sticky-header > .dz-catalog-menu__panel { top: calc(100% + 12px); left: 0; z-index: 1; }
.dz-sticky-header.is-catalog-open > .dz-catalog-menu__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.dz-sticky-header__nav { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; gap: clamp(13px, 1.55vw, 26px); }
.dz-sticky-header__nav a { overflow: hidden; color: #707070; font-size: 13px; font-weight: 500; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.dz-sticky-header__nav a:hover { color: var(--orange); }
/* The fixed header is an action bar, not a second copy of the full navigation. */
.dz-sticky-header__nav { display: none !important; }
.dz-sticky-header__user-nav { display: flex; align-items: center; flex: none; gap: 8px; margin-left: auto; }
.dz-sticky-header__user-nav .circle-btn { display: flex; width: 44px; height: 44px; }
.dz-sticky-header__user-nav .circle-btn .ico { transform: scale(.8); }
.dz-sticky-header__user-nav .ico-compare { transform: scale(.82); }
.dz-sticky-header__user-nav .badge-count { left: 29px; top: -1px; }
.dz-sticky-header__socials { display: flex; align-items: center; flex: none; gap: 8px; }
.dz-sticky-header__socials a { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; }
.dz-sticky-header__socials img { display: block; width: 27px; height: 27px; }
.dz-sticky-header__socials .vk-btn__ico { left: auto; top: auto; }
.dz-sticky-header__socials .vk-btn__ico img { width: 14px; height: 8px; }
.dz-sticky-header__phone { flex: none; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: var(--text); white-space: nowrap; }
.dz-sticky-header__phone:hover { color: var(--orange); }
@media (min-width: 768px) and (max-width: 1250px) {
  .dz-sticky-header { padding-right: 20px; padding-left: 20px; }
  .dz-sticky-header__logo img { height: 26px; }
  .dz-sticky-header__catalog { width: 180px; height: 44px; gap: 10px; }
  .dz-sticky-header__catalog .btn-catalog__text { font-size: 15px; }
  .dz-sticky-header__nav { gap: 13px; }
  .dz-sticky-header__nav a { font-size: 12px; }
  .dz-sticky-header__socials { gap: 5px; }
  .dz-sticky-header__socials a, .dz-sticky-header__socials img { width: 24px; height: 24px; }
  .dz-sticky-header__phone { font-size: 17px; }
}
/* Desktop: social links are a separate, recognisable group rather than tiny
   marks lost between the account actions and the phone number. */
@media (min-width: 1170px) {
  .dz-sticky-header__socials {
    gap: 7px;
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid rgba(31, 31, 31, .12);
  }
  .dz-sticky-header__socials a,
  .dz-sticky-header__socials img { width: 32px; height: 32px; }
  .dz-sticky-header__socials .vk-btn__ico img { width: 16px; height: 9px; }
}
@media (max-width: 1169px) {
  .dz-sticky-header__nav, .dz-sticky-header__socials { display: none; }
  .dz-sticky-header__in { justify-content: space-between; }
  .dz-sticky-header__catalog { display: inline-flex; width: 44px; height: 42px; padding: 0; gap: 0; }
  .dz-sticky-header__catalog .btn-catalog__text { display: none; }
  .dz-sticky-header > .dz-catalog-menu__panel { position: fixed; top: 72px; left: 12px; width: calc(100vw - 24px); max-height: calc(100dvh - 88px); overflow-y: auto; padding: 18px; }
}
@media (max-width: 767px) {
  .dz-sticky-header { top: 8px; width: calc(100vw - 24px); height: 54px; padding: 0 16px; border-radius: 16px; transform: translate(-50%, -72px); }
  .dz-sticky-header__in { gap: 12px; }
  .dz-sticky-header__logo img { height: 22px; max-width: 28vw; }
  .dz-sticky-header__nav, .dz-sticky-header__socials { display: none; }
  .dz-sticky-header__catalog { width: 42px; height: 40px; }
  .dz-sticky-header__phone { font-size: 14px; }
}

/* Editorial cards contain real, non-truncated headlines.  The original mockup
   reserved just two text lines, so its fixed row height made dates overlap the
   next card as soon as a supplied title wrapped to three lines. */
@media (min-width: 1170px) {
  .blog { height: auto; min-height: 970px; }
  .blog__news .news-grid { gap: 20px; }
  .blog__news .news-row { height: auto; min-height: 278px; }
  .blog__news .news { height: auto; gap: 16px; }
  .blog__news .news__title { min-height: 0; line-height: 1.25; }
}

/* The editorial metadata is a card footer, not a continuation of the title.
   This keeps the date and category on one shared baseline even when a headline
   takes two or three lines. The mockup relied on inline widths; real entries
   need their own pill padding. */
.blog__news .news > .pills { margin-top: auto; min-height: 34px; }
.blog__news .news > .pills .pill { padding: 0 14px; }
@media (min-width: 768px) {
  .blog__news .news-row { align-items: stretch; }
  .blog__news .news { min-height: 278px; }
}

/* Video cards are playable in place. The text area stays a normal link to
   the detail page, so opening a file in a separate tab is never required. */
.video__play { z-index: 3; padding: 0; border: 0; background: transparent; cursor: pointer; }
.video__play > img { display: block; }
.video__text { z-index: 2; color: inherit; }
.video__player { position: absolute; z-index: 5; inset: 0; display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.video.is-playing > .cover,
.video.is-playing > .video__shade,
.video.is-playing > .video__play,
.video.is-playing > .video__text { display: none; }
.video-detail { margin: 0; overflow: hidden; border-radius: 20px; background: #000; }
.video-detail video { display: block; width: 100%; height: auto; max-height: 620px; background: #000; }

/* A supplied video title can take three lines. Anchor the whole caption from
   the bottom so the action pill always starts after the text instead of
   occupying a fixed two-line slot. */
@media (min-width: 768px) {
  .blog__videos .video__text { top: auto; bottom: 30px; gap: 16px; }
  .blog__videos .video__title { height: auto; min-height: 51px; }
}

/* Detail pages use real editorial headlines rather than the short product
   labels the old article export was designed for. They may wrap freely inside
   the shared page container. */
.article-detail .cmp-head__text { width: 100%; }
.article-detail .cmp-head__title { width: auto; height: auto; white-space: normal; overflow: visible; }

/* Contact cards: working hours are a single confirmed phrase. On phones the
   inherited 231px line width split the last time onto a second line. */
@media (max-width: 767px) {
  .shop-card__time-line { width: 100% !important; }
  .shop-card__time-line .shop-card__val {
    width: 100% !important;
    font-size: 18px;
    line-height: 1.16;
    white-space: nowrap !important;
  }
}