/* ============================================================
   160DRIVE — LIGHT REDESIGN v2
   Токены → Навбар → Герой → Бейджи → Секции → Мобайл
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --bg:         oklch(98.5% 0.005 72);
  --bg-2:       oklch(96%   0.008 72);
  --bg-3:       oklch(93%   0.012 72);
  --text:       oklch(13%   0.022 72);
  --text-2:     oklch(38%   0.022 72);
  --text-3:     oklch(58%   0.015 72);
  --accent:     oklch(62%   0.17  42);
  --accent-hi:  oklch(55%   0.15  42);
  --accent-bg:  oklch(96%   0.045 72);
  --border:     oklch(89%   0.013 72);
  --border-2:   oklch(82%   0.018 72);
  --shadow-sm:  0 1px 2px oklch(20% 0.01 72 / .06);
  --shadow-md:  0 2px 8px oklch(20% 0.01 72 / .08), 0 8px 24px oklch(20% 0.01 72 / .05);
  --r:          12px;
  --r-lg:       20px;
}

/* ── BASE ── */
.body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
*, *::before, *::after { box-sizing: border-box; }

/* ── FONT SIZES ── */
.eld-h1-1,
.eld-h1-1.color-wh {
  font-size:      clamp(2rem, 3.5vw + 0.5rem, 3.4rem) !important;
  font-weight:    700 !important;
  line-height:    1.08 !important;
  letter-spacing: -0.035em !important;
  color:          var(--text) !important;
}

/* ── NAVIGATION ── */
.nav_bar {
  background:               var(--bg) !important;
  backdrop-filter:          none !important;
  -webkit-backdrop-filter:  none !important;
  box-shadow:               0 1px 0 var(--border) !important;
  position:                 sticky !important;
  inset:                    auto !important;
}

/* Nav links */
.nav_bar .w-nav-link,
.nav_bar .nav-link,
.nav_bar .nav-menu-link,
.nav_bar .dropdown-link {
  color: var(--text-2) !important;
  font-weight: 500 !important;
}
.nav_bar .w-nav-link:hover { color: var(--accent) !important; }

/* Nav CTA pills */
.nav_bar .btn-outline,
.nav_bar .btn--sm,
.nav_bar .link-block-2 {
  color: var(--text) !important;
  border-color: var(--border-2) !important;
}

/* Рассрочка badge in nav */
.nav_bar .badge-nav,
.nav_bar .btn--accent,
.nav_bar .link-block-3 {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-radius: 100px !important;
}

/* ── HERO ── */
.hero-bg-image-dark-1 {
  background:   var(--bg) !important;
  min-height:   auto !important;
  height:       auto !important;
  padding-top:    5.5rem !important;
  padding-bottom: 5.5rem !important;
  align-items:  center !important;
}

/* Фото машины — только правая половина */
.image_cover_bg {
  inset:      0 0 0 46% !important;
  width:      auto !important;
  object-fit: cover !important;
  object-position: 30% center !important;
  mask-image:         linear-gradient(to right, transparent 0%, oklch(0% 0 0) 30%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, oklch(0% 0 0) 30%) !important;
  border-radius: 0 !important;
}

/* Убираем тёмные оверлеи (не трогаем .div-block-66 — это контейнер машин в слайдере) */
.hero-bg-image-dark-1 > .div-block-65 > div[class*="overlay"],
.hero-bg-image-dark-1 > div[style*="background"] {
  opacity:         0 !important;
  pointer-events:  none !important;
}

/* Hero grid */
.grid-covercopy {
  position: relative !important;
  z-index:  2 !important;
}

/* Rich text под заголовком */
.hero-bg-image-dark-1 .rich-text-bb p,
.hero-bg-image-dark-1 .rich-text-bb li,
.hero-bg-image-dark-1 .text-block-2 {
  color: var(--text-2) !important;
}

/* ── FEATURE BADGES (3 штуки под заголовком) ── */
.eld-badges-row {
  gap: 8px !important;
}

.eld-badge-card {
  background:   var(--bg) !important;
  border:       1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow:   var(--shadow-sm) !important;
  color:        var(--text) !important;
  padding:      10px 14px !important;
  font-weight:  500 !important;
  font-size:    13.5px !important;
  transition:   box-shadow 0.15s, border-color 0.15s !important;
}
.eld-badge-card:hover {
  border-color: var(--border-2) !important;
  box-shadow:   var(--shadow-md) !important;
}

/* Иконки в badge — цвет акцента */
.eld-badge-card svg path,
.eld-badge-card svg rect,
.eld-badge-card svg polyline,
.eld-badge-card svg circle {
  stroke: var(--accent) !important;
}
.eld-badge-card svg path[fill]:not([fill="none"]) {
  fill: var(--accent) !important;
  stroke: none !important;
}

/* ── CTA КНОПКА ── */
.hero-bg-image-dark-1 .w-button,
.hero-bg-image-dark-1 a.w-button,
.hero-bg-image-dark-1 [class*="btn"],
.eld-messenger-btn,
.btn-hero {
  background:    var(--accent) !important;
  color:         oklch(98% 0.004 72) !important;
  border:        none !important;
  border-radius: var(--r) !important;
  font-weight:   700 !important;
  font-size:     1rem !important;
  letter-spacing: 0.01em !important;
  padding:       0.85em 1.8em !important;
  box-shadow:    0 4px 16px oklch(62% 0.17 42 / 0.28) !important;
  transition:    background 0.15s, transform 0.12s, box-shadow 0.15s !important;
  text-decoration: none !important;
}
.hero-bg-image-dark-1 .w-button:hover,
.hero-bg-image-dark-1 a.w-button:hover {
  background:  var(--accent-hi) !important;
  transform:   translateY(-1px) !important;
  box-shadow:  0 6px 22px oklch(62% 0.17 42 / 0.36) !important;
}
.hero-bg-image-dark-1 .w-button:active {
  transform: translateY(0) !important;
}

/* ── SECTIONS (остальная часть страницы) ── */
.sections {
  padding-top:    4rem !important;
  padding-bottom: 4rem !important;
}

/* Белые секции */
.bg-bg-light,
[class*="bg-light"] {
  background-color: var(--bg-2) !important;
}

/* Тёмные секции — инвертируем */
.bg-bg-dark,
[class*="bg-dark"],
[class*="bg-navy"],
.section--dark {
  background-color: oklch(14% 0.025 240) !important;
}

/* Тексты на тёмных секциях — оставляем светлыми (не трогаем) */

/* Карточки */
.car-card,
.blog-card {
  background:    #fff !important;
  border:        1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:    var(--shadow-sm) !important;
  transition:    box-shadow 0.2s, transform 0.15s !important;
  overflow:      hidden !important;
}
.car-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform:  translateY(-2px) !important;
}

/* Заголовки — только в светлых контекстах */
h1:not(.color-white):not(.color-wh),
h2:not(.color-white):not(.color-wh),
h3:not(.color-white):not(.color-wh),
h4:not(.color-white):not(.color-wh) { color: var(--text) !important; }

/* Основной текст на светлых секциях */
p, li { color: var(--text-2) !important; }

/* Тёмные секции (_2222) — возвращаем светлые цвета */
.sections._2222 p,
.sections._2222 li     { color: oklch(84% 0.012 240) !important; }
.sections._2222 h2,
.sections._2222 h3,
.sections._2222 h4     { color: oklch(97% 0.005 72) !important; }

/* Labels / eyebrow */
.eld-label,
[class*="label"],
[class*="eyebrow"] {
  color:          var(--text-3) !important;
  font-size:      0.72rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Разделители */
hr, .divider { border-color: var(--border) !important; }

/* ── ИКОНКИ И АКЦЕНТЫ ── */
/* SVG иконки в секциях */
.section-icon svg path,
.icon svg path {
  stroke: var(--accent) !important;
}

/* Цвет акцента для inline элементов */
.text-accent,
.color-accent,
[class*="accent-txt"],
strong { color: var(--accent) !important; }

/* ── INPUT / FORMS ── */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
  background:    var(--bg) !important;
  border:        1.5px solid var(--border) !important;
  border-radius: var(--r) !important;
  color:         var(--text) !important;
  font-size:     0.95rem !important;
  padding:       0.7em 1em !important;
  outline:       none !important;
  transition:    border-color 0.2s !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px oklch(62% 0.17 42 / 0.12) !important;
}

/* ── FOCUS-VISIBLE (доступность: клавиатурная навигация) ── */
:focus { outline: none; }
:focus-visible {
  outline:        2px solid var(--accent) !important;
  outline-offset: 3px !important;
  border-radius:  4px !important;
}
.w-button:focus-visible,
a[class*="btn"]:focus-visible,
button:focus-visible {
  outline-offset: 4px !important;
  box-shadow: 0 0 0 4px oklch(62% 0.17 42 / 0.2) !important;
}

/* ── КНОПКИ В ФОРМАХ И СЕКЦИЯХ ── */
.w-button,
.btn,
button[type="submit"],
a[class*="btn"] {
  border-radius: var(--r) !important;
  font-weight:   600 !important;
  transition:    background 0.15s, transform 0.1s !important;
}

/* Вторичные кнопки */
.btn--outline,
.w-button.secondary {
  background:    transparent !important;
  color:         var(--text) !important;
  border:        1.5px solid var(--border-2) !important;
}
.btn--outline:hover {
  border-color: var(--accent) !important;
  color:        var(--accent) !important;
}

/* ── ACCORDION — анимация через grid-template-rows (нет Webflow JS) ── */

/* V3 (FAQ) — по умолчанию закрыт */
.acordion-body {
  display:            grid !important;
  grid-template-rows: 0fr !important;
  overflow:           hidden !important;
  opacity:            0 !important;
  transition:         grid-template-rows 0.35s ease, opacity 0.25s ease !important;
}
.acordion-body > * { min-height: 0; }
.accordion-item-wrapper-v3-first.w--open .acordion-body {
  grid-template-rows: 1fr !important;
  opacity:            1 !important;
}

/* V4 — toggleable, открыт по умолчанию через JS (.w--open) */
.acordion-body-v4 {
  display:            grid !important;
  grid-template-rows: 0fr !important;
  overflow:           hidden !important;
  opacity:            0 !important;
  background:         var(--bg) !important;
  transition:         grid-template-rows 0.35s ease, opacity 0.25s ease !important;
  height:             auto !important;
  padding:            0 !important;
}
.acordion-body-v4 > * { min-height: 0; padding: 16px 24px; }
.accordion-item-wrapper-v4.w--open .acordion-body-v4 {
  grid-template-rows: 1fr !important;
  opacity:            1 !important;
}

/* Стрелка v3 — управляется CSS, inline transform убран в JS */
.brix---btn-circle-accordion-btn {
  transition: transform 0.3s ease !important;
  transform:  rotateZ(0deg) !important;
}
.accordion-item-wrapper-v3-first.w--open .brix---btn-circle-accordion-btn {
  transform: rotateZ(90deg) !important;
}

/* Шапка accordion-v4 — светлый стиль */
.accordion-header-v4 {
  background:    var(--bg-2) !important;
  padding:       14px 24px !important;
  border-radius: var(--r) var(--r) 0 0 !important;
  cursor:        pointer !important;
}
.accordion-header,
.accordion-header-v4 { cursor: pointer !important; }

.heading-h6-kak {
  color:       var(--text) !important;
  font-size:   1rem !important;
  font-weight: 600 !important;
}
.accordion-item-wrapper-v4 {
  border:        1px solid var(--border) !important;
  border-radius: var(--r) !important;
  box-shadow:    var(--shadow-sm) !important;
}

/* ── CAR CARDS — внутренние отступы ── */
.car-card .figcaption {
  padding: 0.5rem 1rem 0.5rem !important;
  width: 100% !important;
}
.car-card .rich-text-smail {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: var(--text-2) !important;
}
.car-card .card-btn {
  margin: auto 1rem 1rem !important;
  width: calc(100% - 2rem) !important;
  min-height: 44px !important;
  background: var(--accent) !important;
  background-image: none !important;
  box-shadow: 0 4px 14px oklch(62% 0.17 42 / 0.25) !important;
  border: none !important;
  border-radius: var(--r) !important;
}
.car-card .card-btn:hover {
  background: var(--accent-hi) !important;
  background-image: none !important;
}
/* Фото в карточке — фиксированная высота */
.car-card .lightbox-trigger {
  width: 100% !important;
  height: 200px !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}
.car-card .image_1 {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  transition: opacity 0.25s ease !important;
  will-change: opacity;
}

/* ── HOVER GALLERY STRIPS ── */
.gal-strips {
  position:   absolute;
  bottom:     8px;
  left:       8px;
  right:      8px;
  display:    flex;
  gap:        3px;
  z-index:    5;
  pointer-events: none;
}
.gal-strip {
  flex:          1;
  height:        3px;
  border-radius: 2px;
  background:    rgba(255,255,255,0.35);
  transition:    background 0.15s, flex 0.2s;
}
.gal-strip--on {
  background: rgba(255,255,255,0.95);
  flex: 1.5;
}
.gal-counter {
  position:      absolute;
  top:           8px;
  right:         8px;
  font-size:     0.7rem;
  font-weight:   600;
  color:         rgba(255,255,255,0.9);
  background:    rgba(0,0,0,0.45);
  border-radius: 10px;
  padding:       2px 7px;
  line-height:   1.5;
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index:       5;
  opacity:       0;
  transition:    opacity 0.15s;
}
.car-card .lightbox-trigger:hover .gal-counter {
  opacity: 1;
}
/* Тачскрины — hover не работает, показываем счётчик всегда */
@media (hover: none) {
  .gal-counter { opacity: 1 !important; }
}

/* ── FancyBox / Slider ── */
.car-card .collection-list-wrapper {
  visibility:     visible;
  position:       absolute;
  width:          0;
  height:         0;
  opacity:        0;
  overflow:       hidden;
  z-index:        -1;
  bottom:         0;
  left:           0;
  pointer-events: none !important;
}

.f-carousel__nav {
  display:    flex !important;
  opacity:    1 !important;
  visibility: visible !important;
  position:   absolute !important;
  top:        50% !important;
  left:       0 !important;
  width:      100% !important;
  transform:  translateY(-50%) !important;
  z-index:    1000 !important;
  pointer-events: none !important;
}
.f-button {
  background:    rgba(0,0,0,0.55) !important;
  border-radius: 50% !important;
  width:         44px !important;
  height:        44px !important;
  color:         #fff !important;
  pointer-events: auto !important;
  border:        none !important;
  box-shadow:    none !important;
}
.f-button:hover { background: rgba(0,0,0,0.8) !important; }
.f-carousel__nav .is-prev { position:absolute !important; left:12px !important; right:auto !important; }
.f-carousel__nav .is-next { position:absolute !important; right:12px !important; left:auto !important; }

/* ── YEAR GROUPS (Привозим 3–5 лет) ── */
.year-group { margin-bottom: 3rem; }
.year-group__label {
  display:        flex;
  align-items:    center;
  gap:            14px;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-2) !important;
  margin-bottom:  1.5rem;
  white-space:    nowrap;
}
.year-group__label::before,
.year-group__label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border-2);
}

/* ── HERO YANDEX WIDGET ── */
.hero-widget {
  margin-top: 16px !important;
  display:    inline-block !important;
}
.hero-widget > * {
  transform:        scale(1.05) !important;
  transform-origin: top left !important;
  display:          block !important;
}

/* ── NAV MENU HEIGHT ── */
nav.nav-menu.w-nav-menu { height: auto !important; }

/* Невидимый img.close не должен перехватывать тапы по бургеру */
.menu-button.w-nav-button:not(.w--open) img.close { pointer-events: none !important; }
.menu-button.w-nav-button.w--open img.burger      { pointer-events: none !important; }

/* ── MOBILE NAV — slide-from-right (заменяет Webflow JS анимацию) ── */
@media (max-width: 991px) {
  /* Перехватываем display:none из Webflow main.css */
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display:    block !important;
    position:   fixed !important;
    top:        0 !important;
    right:      0 !important;
    bottom:     0 !important;
    left:       auto !important;
    width:      min(320px, 88vw) !important;
    transform:  translateX(110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: var(--bg) !important;
    box-shadow: -4px 0 40px oklch(13% 0.022 72 / 0.18) !important;
    z-index:    1001;
    overflow-y: auto !important;
    padding:    5rem 1.5rem 2rem !important;
  }
  .w-nav-menu.w--open {
    transform: translateX(0) !important;
  }

  /* Overlay-подложка при открытом меню */
  body.nav-open::before {
    content:    '';
    position:   fixed;
    inset:      0;
    background: oklch(13% 0.022 72 / 0.35);
    z-index:    1000;
    animation:  nav-fade-in 0.25s ease both;
  }
  @keyframes nav-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Сбрасываем стиль бургера из Webflow */
  .w-nav-button.w--open {
    background-color: transparent !important;
    color: inherit !important;
  }
}

/* ── DROPDOWN (мини-корзина) — управляется нашим JS через w--open ── */
.w-dropdown-list {
  display:  none;
}
.w-dropdown.w--open .w-dropdown-list {
  display:   block;
  animation: dropdown-in 0.18s ease both;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE  (≤ 991px)
   ============================================================ */
@media (max-width: 991px) {
  /* Скрываем Яндекс-виджет на мобильных */
  .badge_cover-reiting,
  .hero-widget { display: none !important; }

  /* Герой: фото убираем, чистый фон */
  .image_cover_bg {
    display: none !important;
  }

  .hero-bg-image-dark-1 {
    padding-top:    3rem !important;
    padding-bottom: 3rem !important;
  }

  .eld-h1-1,
  .eld-h1-1.color-wh {
    font-size: clamp(1.75rem, 6vw, 2.4rem) !important;
  }
}

@media (max-width: 767px) {
  .hero-bg-image-dark-1 {
    padding-top:    2.25rem !important;
    padding-bottom: 2.25rem !important;
  }
  .sections { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
}

@media (max-width: 479px) {
  .hero-bg-image-dark-1 {
    padding-top: 1.75rem !important;
    padding-bottom: 2rem !important;
  }
  .eld-badges-row { flex-direction: column !important; }
}

/* ── HERO CAR ANIMATION ── */
@keyframes car-slide-in {
  from { transform: translateX(56px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
/* image_car-copy — реальный контейнер фото машины */
.image_car-copy {
  animation: car-slide-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.12s;
}
/* Скрываем пустой image_car чтобы не занимал место */
.image_car { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   FOOTER — современный дизайн
   ══════════════════════════════════════════════════════════════ */
.footer-wrapper {
  background: oklch(13% 0.018 72) !important;
  padding: 4.5rem 0 2.5rem !important;
}

/* Верхняя часть: телефон + ссылки */
.grid-footer-contact-big {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 2rem 2.5rem !important;
  padding-bottom: 3rem !important;
  border-bottom: 1px solid oklch(26% 0.016 72) !important;
  margin-bottom: 2.5rem !important;
}

.footer-wrapper .card-link-wrapper {
  background:    transparent !important;
  border:        none !important;
  box-shadow:    none !important;
  border-radius: 0 !important;
  padding:       0 !important;
  text-decoration: none !important;
  transition:    opacity 0.15s !important;
}
.footer-wrapper .card-link-wrapper:hover { opacity: 0.75 !important; }

.footer-wrapper .title-footer {
  font-size:      0.7rem !important;
  font-weight:    700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color:          oklch(48% 0.022 72) !important;
  margin:         0 0 6px !important;
}

.footer-wrapper .text-200-medium {
  font-size:   1.05rem !important;
  font-weight: 600 !important;
  color:       oklch(93% 0.008 72) !important;
  margin:      0 !important;
  line-height: 1.3 !important;
}

/* Сетка ссылок (2 колонки) */
.footer-wrapper .form---grid-2-columns {
  display:               grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:                   1rem 2rem !important;
}

/* Нижняя полоса */
.footer-bottom {
  display:     flex !important;
  flex-wrap:   wrap !important;
  align-items: center !important;
  gap:         0.75rem 2rem !important;
}

.footer-wrapper .footer-list-wrapper {
  flex:      0 1 auto !important;
  min-width: 0 !important;
}

/* footer-item: адрес, почта */
.footer-wrapper .footer-item {
  display:         flex !important;
  align-items:     center !important;
  gap:             8px !important;
  text-decoration: none !important;
}

.footer-wrapper .footer-link,
.footer-wrapper a.footer-link {
  color:           oklch(60% 0.016 72) !important;
  font-size:       0.85rem !important;
  font-weight:     400 !important;
  margin:          0 !important;
  text-decoration: none !important;
  transition:      color 0.15s !important;
}
.footer-wrapper a.footer-link:hover { color: oklch(88% 0.01 72) !important; }

.footer-wrapper .paragraph-default {
  color:       oklch(44% 0.018 72) !important;
  font-size:   0.78rem !important;
  margin:      0 !important;
  line-height: 1.6 !important;
}

/* Скрываем сломанные иконки-картинки */
.footer-wrapper .icon { display: none !important; }

/* Разделитель */
.footer-wrapper .divaider {
  width:      100% !important;
  height:     1px !important;
  background: oklch(26% 0.016 72) !important;
}

/* Ссылки на документы */
.footer-list-wrapper a:not(.footer-item):not(.card-link-wrapper):not(.n-footer-link) {
  color:           oklch(50% 0.018 72) !important;
  font-size:       0.8rem !important;
  text-decoration: none !important;
  transition:      color 0.15s !important;
  display:         block !important;
  margin-bottom:   4px !important;
}
.footer-list-wrapper a:not(.footer-item):not(.card-link-wrapper):not(.n-footer-link):hover {
  color: oklch(78% 0.012 72) !important;
}

@media (max-width: 767px) {
  .footer-wrapper { padding: 3rem 0 2rem !important; }
  .grid-footer-contact-big { grid-template-columns: 1fr 1fr !important; }
  .footer-bottom { gap: 0.75rem 1.5rem !important; }
}

@media (max-width: 479px) {
  .grid-footer-contact-big { grid-template-columns: 1fr !important; }
  .footer-wrapper .form---grid-2-columns { grid-template-columns: 1fr !important; }
}

/* ── BLOG LISTING ── */
.blog-listing-page { padding-top: 4rem; }

.blog-listing-header {
  margin-bottom: 3rem;
}
.blog-listing-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--text) !important;
  margin: 0 0 0.5rem;
  letter-spacing: -0.03em;
}
.blog-listing-subtitle {
  color: var(--text-3) !important;
  font-size: 1.05rem;
  margin: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.blog-card { overflow: hidden !important; }
.blog-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}
.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-3);
  flex-shrink: 0;
}
.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }

.blog-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
}

.blog-card-cat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2em 0.65em;
  border-radius: 100px;
  background: var(--accent-bg);
  color: var(--accent-hi) !important;
  align-self: flex-start;
}

.blog-card-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--text) !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-excerpt {
  font-size: 0.875rem !important;
  color: var(--text-3) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.blog-card-date {
  font-size: 0.75rem;
  color: var(--text-3) !important;
  margin-top: auto;
  padding-top: 0.5rem;
}

.blog-empty {
  color: var(--text-3) !important;
  padding: 4rem 0;
  text-align: center;
}

/* Blog pagination */
.blog-pagination {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 4rem;
}
.blog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-2) !important;
  background: var(--bg-2);
  border: 1px solid var(--border);
  transition: background 0.15s, color 0.15s;
}
.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
  background: var(--accent);
  color: #fff !important;
  border-color: var(--accent);
}

/* ── SINGLE POST ── */
.single-post-page { padding-top: 3rem; }

.single-post {
  max-width: 760px;
  margin: 0 auto;
}

.single-post-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-3) !important;
  margin-bottom: 2rem;
}
.single-post-breadcrumb a {
  color: var(--text-3) !important;
  text-decoration: none;
}
.single-post-breadcrumb a:hover { color: var(--accent) !important; }

.single-post-header { margin-bottom: 2rem; }

.single-post-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.single-post-date {
  font-size: 0.8rem;
  color: var(--text-3) !important;
}

.single-post-title {
  font-size: clamp(1.6rem, 3vw + 0.5rem, 2.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
  margin: 0 !important;
}

.single-post-cover {
  margin-bottom: 2.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.single-post-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.single-post-content {
  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  margin-bottom: 3rem;
}
.single-post-content h2 { font-size: 1.5rem !important; font-weight: 700 !important; margin-top: 2.5rem !important; margin-bottom: 0.75rem !important; }
.single-post-content h3 { font-size: 1.2rem !important; font-weight: 700 !important; margin-top: 2rem !important; margin-bottom: 0.5rem !important; }
.single-post-content p { margin-bottom: 1.2em !important; }
.single-post-content ul, .single-post-content ol { margin-bottom: 1.2em !important; padding-left: 1.5em !important; }
.single-post-content li { margin-bottom: 0.4em !important; }
.single-post-content strong { color: var(--text) !important; }
.single-post-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.92rem; }
.single-post-content th, .single-post-content td { text-align: left; padding: 0.6em 0.9em; border: 1px solid var(--border); }
.single-post-content th { background: var(--bg-2); font-weight: 700; color: var(--text) !important; }

.single-post-footer { padding-top: 1rem; border-top: 1px solid var(--border); margin-bottom: 4rem; }
.single-post-back {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-2) !important;
  text-decoration: none;
  padding: 0.5rem 0;
}
.single-post-back:hover { color: var(--accent) !important; }

@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr !important; }
  .single-post-title { font-size: 1.5rem !important; }
  .blog-listing-title { font-size: 1.75rem !important; }
}

/* WordPress emoji fix — SVG emojis must stay inline and 1em tall */
img.emoji, img.wp-smiley {
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 0.07em !important;
  vertical-align: -0.1em !important;
  background: none !important;
  padding: 0 !important;
  max-width: none !important;
}

/* ══ REVIEWS SECTION ══════════════════════════════════════════════════════ */
.reviews-section { background: var(--neutral-100, #f7f5f2); }

.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.reviews-meta {
  color: var(--text-muted, #888);
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
}
.reviews-yandex-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent, #c84b11);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.reviews-yandex-link:hover { text-decoration: underline; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.review-card {
  background: #fff;
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.review-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent, #c84b11);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.review-name {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--text-primary, #1a1a1a);
}
.review-date {
  font-size: 0.75rem;
  color: var(--text-muted, #999);
  margin-top: 2px;
}
.review-stars {
  margin-left: auto;
  color: #f5a623;
  font-size: 0.85rem;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.review-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary, #444);
  margin: 0;
}

@media (max-width: 767px) {
  .reviews-head { flex-direction: column; align-items: flex-start; }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ══ FAQ — NATIVE DETAILS/SUMMARY ACCORDION ══════════════════════════════ */
.faq-section { background: #fff; }
.faq-heading { margin-bottom: 0.5rem; }

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid oklch(88% 0.006 72);
}

.faq-item {
  border-bottom: 1px solid oklch(88% 0.006 72);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: oklch(15% 0.012 72);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  color: oklch(55% 0.012 72);
  transition: transform 0.2s ease, color 0.15s;
  width: 28px;
  text-align: center;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent, #c84b11);
}

.faq-item summary:hover::after {
  color: var(--accent, #c84b11);
}

.faq-body {
  padding: 0 0 1.5rem;
  color: oklch(38% 0.01 72);
  font-size: 0.95rem;
  line-height: 1.7;
}
.faq-body p { margin: 0 0 0.75rem; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul { margin: 0.5rem 0 0.75rem 1.25rem; }
.faq-body li { margin-bottom: 0.25rem; }
.faq-body strong { color: oklch(22% 0.012 72); }

@media (max-width: 767px) {
  .faq-item summary { font-size: 0.95rem; padding: 1rem 0; }
  .faq-body { font-size: 0.9rem; }
}

/* ══ BLOG POST — FAQ ACCORDION ══════════════════════════════════════════ */
.blog-faq {
  margin: 2.5rem 0;
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 2rem 2rem 0.5rem;
}
.blog-faq-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.blog-faq-icon { font-size: 1.25rem; line-height: 1; }
.blog-faq-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.015em;
}
.blog-faq-list {
  border-top: 1px solid var(--border);
}
.blog-faq-item {
  border-bottom: 1px solid var(--border);
}
.blog-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::marker { display: none; }
.blog-faq-item summary::after {
  content: '+';
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1), color 0.15s;
  width: 26px;
  text-align: center;
}
.blog-faq-item[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}
.blog-faq-item summary:hover::after { color: var(--accent); }
.blog-faq-answer {
  padding: 0 0 1.25rem;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.72;
}
@media (max-width: 600px) {
  .blog-faq { padding: 1.5rem 1.25rem 0.25rem; }
  .blog-faq-item summary { font-size: 0.9rem; }
}

/* ══ BLOG POST — REACTIONS WIDGET ═══════════════════════════════════════ */
.blog-reactions {
  margin: 2rem 0 1.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-2);
  border-radius: var(--r-lg);
}
.blog-reactions-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  margin-bottom: 0.875rem;
}
.blog-reactions-hint {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.75rem;
}
.blog-reactions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rx-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-2);
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.rx-btn:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.rx-btn.rx-on {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.rx-btn.rx-pop {
  animation: rx-bounce 0.28s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes rx-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.rx-emoji { font-size: 1.2rem; line-height: 1; }
.rx-count { font-variant-numeric: tabular-nums; min-width: 1.5ch; }
@media (max-width: 480px) {
  .blog-reactions { padding: 1.25rem; }
  .rx-btn { padding: 8px 12px; font-size: 0.8125rem; }
}

/* ══ BURGER BUTTON — CSS replace ══════════════════════════════════════════════
   jg.png/cl.png — белые иконки, невидимые на светлом фоне --bg.
   Скрываем img и рисуем гамбургер через pseudo-elements.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .menu-button.w-nav-button {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:  48px !important;
    height: 48px !important;
    cursor: pointer !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    z-index: 1002 !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Скрыть белые PNG-иконки */
  .menu-button.w-nav-button img.burger,
  .menu-button.w-nav-button img.close {
    display: none !important;
  }

  /* Верхняя + средняя полоски */
  .menu-button.w-nav-button::before {
    content:      '';
    position:     absolute;
    width:        24px;
    height:       2px;
    background:   var(--text);
    border-radius: 2px;
    top:          17px;
    left:         50%;
    transform:    translateX(-50%);
    box-shadow:   0 7px 0 var(--text);
    transition:   transform 0.28s cubic-bezier(0.16,1,0.3,1),
                  top       0.28s cubic-bezier(0.16,1,0.3,1),
                  box-shadow 0.2s ease;
  }

  /* Нижняя полоска */
  .menu-button.w-nav-button::after {
    content:      '';
    position:     absolute;
    width:        24px;
    height:       2px;
    background:   var(--text);
    border-radius: 2px;
    top:          31px;
    left:         50%;
    transform:    translateX(-50%);
    transition:   transform 0.28s cubic-bezier(0.16,1,0.3,1),
                  top       0.28s cubic-bezier(0.16,1,0.3,1);
  }

  /* Состояние X (открыто) */
  .menu-button.w-nav-button.w--open::before {
    top:        24px !important;
    box-shadow: none !important;
    transform:  translateX(-50%) rotate(45deg) !important;
  }
  .menu-button.w-nav-button.w--open::after {
    top:        24px !important;
    transform:  translateX(-50%) rotate(-45deg) !important;
  }
}

/* ── Category color pills ─────────────────────────────── */
.blog-card-cat--obzory       { background: oklch(0.92 0.04 250); color: oklch(0.28 0.14 250) !important; }
.blog-card-cat--nalogi       { background: oklch(0.93 0.07 60);  color: oklch(0.32 0.16 55)  !important; }
.blog-card-cat--kak-kupit    { background: oklch(0.92 0.06 150); color: oklch(0.30 0.14 150) !important; }
.blog-card-cat--tekhnologii  { background: oklch(0.92 0.05 295); color: oklch(0.30 0.12 295) !important; }
.blog-card-cat--obsluzhivanie{ background: oklch(0.92 0.05 185); color: oklch(0.30 0.12 185) !important; }
.blog-card-cat--rynok        { background: oklch(0.93 0.06 20);  color: oklch(0.32 0.16 18)  !important; }
/* ══ COMMENTS SECTION ════════════════════════════════════════════════════════ */
.blog-comments {
  margin: 0 0 2rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg-2);
  border-radius: var(--r-lg);
}
.blog-comments-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  color: var(--text-1, #1a1a1a);
}
.blog-comments-count {
  font-weight: 400;
  color: var(--text-3);
}
.blog-comments-loading,
.blog-comments-empty {
  color: var(--text-3);
  font-size: 0.9rem;
  margin: 0;
}
.blog-comment-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.blog-comment-item:last-child { border-bottom: none; }
.blog-comment-meta {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.375rem;
}
.blog-comment-author {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
}
.blog-comment-date {
  font-size: 0.75rem;
  color: var(--text-3);
}
.blog-comment-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
  white-space: pre-line;
}
.blog-comment-form {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blog-comment-form-title {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-1, #1a1a1a);
}
.blog-comment-name,
.blog-comment-body {
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-1, #1a1a1a);
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.blog-comment-name:focus,
.blog-comment-body:focus { border-color: var(--accent); }
.blog-comment-body { resize: vertical; }
.blog-comment-submit {
  align-self: flex-start;
  padding: 0.625rem 1.5rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.blog-comment-submit:hover { opacity: 0.88; }
.blog-comment-submit:disabled { opacity: 0.55; cursor: default; }
.blog-comment-msg {
  font-size: 0.875rem;
  min-height: 1.25rem;
  line-height: 1.4;
}
.blog-comment-msg.ok { color: var(--accent); }
.blog-comment-msg.err { color: #d93025; }
@media (max-width: 480px) {
  .blog-comments { padding: 1.25rem; }
}
/* ══ Q&A — READERS ASK / 160DRIVE ANSWERS ════════════════════════════════════ */
.blog-qa {
  margin: 0 0 2rem;
}
.blog-qa-header {
  margin-bottom: 1.25rem;
}
.blog-qa-title {
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0 0 0.25rem;
  color: var(--text-1, #1a1a1a);
  letter-spacing: -0.01em;
}
.blog-qa-subtitle {
  font-size: 0.8rem;
  color: var(--text-3);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Each Q&A pair */
.qa-item {
  border: 1.5px solid var(--border, #e8e0d8);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;
  margin-bottom: 1rem;
  background: #fff;
}
.qa-item:last-child { margin-bottom: 0; }

/* Question row */
.qa-question-block {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  align-items: flex-start;
}

/* Answer row */
.qa-answer-block {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  align-items: flex-start;
  background: var(--bg-2, #f8f6f2);
  border-top: 1.5px solid var(--border, #e8e0d8);
}

/* Avatars */
.qa-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.qa-avatar--user {
  background: #e8e0d8;
  color: var(--text-2, #555);
}
.qa-avatar--brand {
  background: var(--accent, #c0392b);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: -0.02em;
}

/* Question body */
.qa-question-body,
.qa-answer-body {
  flex: 1;
  min-width: 0;
}
.qa-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.375rem;
}
.qa-author {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
}
.qa-author-loc {
  font-size: 0.75rem;
  color: var(--text-3, #999);
}
.qa-date {
  font-size: 0.75rem;
  color: var(--text-3, #999);
}
.qa-brand-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent, #c0392b);
}
.qa-question-text {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-1, #1a1a1a);
  margin: 0;
  font-weight: 500;
}
.qa-answer-text {
  font-size: 0.9125rem;
  line-height: 1.65;
  color: var(--text-2, #444);
}
.qa-answer-text p {
  margin: 0 0 0.625rem;
}
.qa-answer-text p:last-child { margin-bottom: 0; }

/* Ask button & form */
.blog-qa-ask {
  margin-top: 1.25rem;
}
.blog-qa-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.625rem 1.25rem;
  border: 1.5px solid var(--border-2, #c8b8a8);
  border-radius: 100px;
  background: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-1, #1a1a1a);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.blog-qa-ask-btn::before { content: '+ '; }
.blog-qa-ask-btn:hover {
  border-color: var(--accent, #c0392b);
  color: var(--accent, #c0392b);
  background: #fff8f7;
}

.blog-qa-form {
  margin-top: 1rem;
  padding: 1.25rem;
  border: 1.5px solid var(--border, #e8e0d8);
  border-radius: var(--r-lg, 14px);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.blog-qa-input,
.blog-qa-textarea {
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border, #e8e0d8);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-1, #1a1a1a);
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}
.blog-qa-input:focus,
.blog-qa-textarea:focus { border-color: var(--accent, #c0392b); }
.blog-qa-textarea { resize: vertical; }

.blog-qa-form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.blog-qa-submit {
  padding: 0.625rem 1.5rem;
  background: var(--accent, #c0392b);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.blog-qa-submit:hover { opacity: 0.88; }
.blog-qa-submit:disabled { opacity: 0.55; cursor: default; }
.blog-qa-note {
  font-size: 0.8rem;
  color: var(--text-3, #999);
}
.blog-qa-msg {
  font-size: 0.875rem;
  min-height: 1rem;
  line-height: 1.4;
}
.blog-qa-msg.ok { color: #2e7d32; }
.blog-qa-msg.err { color: #d93025; }

@media (max-width: 560px) {
  .qa-question-block,
  .qa-answer-block { padding: 0.875rem 1rem; }
  .blog-qa-form { padding: 1rem; }
  .blog-qa-form-row { flex-direction: column; align-items: flex-start; }
}
/* ══ MOBILE REACTION FIX — fit 5 buttons in one row on iPhone ════════════ */
@media (max-width: 430px) {
  .blog-reactions { padding: 1rem; }
  .blog-reactions-row { gap: 5px; }
  .rx-btn { padding: 7px 9px; gap: 5px; font-size: 0.75rem; }
  .rx-emoji { font-size: 1.05rem; }
}

/* ══ QA MOBILE TWEAKS ════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  .qa-question-block,
  .qa-answer-block { padding: 0.75rem 0.875rem; gap: 0.625rem; }
  .qa-avatar { width: 30px; height: 30px; font-size: 0.7rem; }
  .qa-avatar--brand { font-size: 0.6rem; }
  .qa-question-text { font-size: 0.875rem; }
  .qa-answer-text { font-size: 0.875rem; }
  .blog-qa-ask-btn { font-size: 0.875rem; padding: 0.5rem 1rem; }
}
/* ══ QA PENDING STATE ════════════════════════════════════════════════════ */
.qa-answer-block--pending {
  background: #fafafa;
  border-top: 1.5px dashed var(--border, #e8e0d8);
}
.qa-avatar--pending {
  background: #e8e0d8;
  color: #aaa;
  font-size: 1rem;
  font-weight: 400;
}
.qa-pending-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #aaa;
  font-style: italic;
}
.qa-pending-text {
  font-size: 0.875rem;
  color: #bbb;
  margin: 0;
  font-style: italic;
}
/* ══ CARS WIDGET ═══════════════════════════════════════════════════════════ */
.cars-widget {
  margin: 0 0 1.75rem;
}
.cw-header { margin-bottom: 1rem; }
.cw-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.cw-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* Grid */
.cw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 0.75rem;
}

/* Card */
.cw-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.875rem 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg, 20px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  cursor: pointer;
  position: relative;
}
.cw-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px var(--accent-bg, oklch(96% 0.045 72));
  transform: translateY(-2px);
}
.cw-card-brand {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cw-card-model {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cw-card-engine {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: -0.125rem;
}
.cw-card-price-wrap {
  margin-top: auto;
  padding-top: 0.5rem;
}
.cw-card-price-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cw-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cw-card-delivery {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--text-3);
  padding-top: 0.4rem;
  margin-top: 0.125rem;
  border-top: 1px solid var(--border);
}

/* TG Banner */
.cw-tg-banner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  background: oklch(96% 0.025 225);
  border: 1.5px solid oklch(87% 0.04 225);
  border-radius: var(--r-lg, 20px);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.cw-tg-banner:hover {
  border-color: oklch(58% 0.18 225);
  box-shadow: 0 2px 12px oklch(58% 0.18 225 / .1);
}
.cw-tg-icon {
  width: 36px;
  height: 36px;
  background: oklch(58% 0.18 225);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.cw-tg-body { flex: 1; }
.cw-tg-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1px;
}
.cw-tg-sub {
  font-size: 0.75rem;
  color: var(--text-3);
}
.cw-tg-arrow {
  color: oklch(58% 0.18 225);
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.15s, opacity 0.15s;
}
.cw-tg-banner:hover .cw-tg-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Mobile */
@media (max-width: 560px) {
  .cw-grid { grid-template-columns: 1fr; gap: 6px; }
  .cw-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.75rem 0.875rem;
    border-radius: var(--r, 12px);
    gap: 0.25rem;
  }
  .cw-card-brand { flex: 0 0 100%; font-size: 0.6rem; }
  .cw-card-model { flex: 1; font-size: 0.8375rem; }
  .cw-card-engine { display: none; }
  .cw-card-price-wrap { padding-top: 0; margin-top: 0; text-align: right; }
  .cw-card-price-label { display: none; }
  .cw-card-price { font-size: 0.9rem; }
  .cw-card-delivery { flex: 0 0 100%; padding-top: 0.3rem; margin-top: 0.2rem; font-size: 0.65rem; }
  .cw-tg-banner { padding: 0.75rem; gap: 0.625rem; border-radius: var(--r, 12px); }
  .cw-tg-icon { width: 30px; height: 30px; }
  .cw-tg-title { font-size: 0.8125rem; }
  .cw-tg-sub { font-size: 0.7rem; }
}
@media (max-width: 430px) {
  .cw-card { border-radius: 10px; }
}
/* ══ CW PHOTO CARDS UPDATE ══════════════════════════════════════════════════ */
.cw-card { flex-direction: column; padding: 0; overflow: hidden; }
.cw-card-photo { height: 140px; overflow: hidden; background: var(--bg-3); flex-shrink: 0; }
.cw-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.cw-card:hover .cw-card-img { transform: scale(1.04); }
.cw-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.cw-card-img-brand {
  color: rgba(255,255,255,.9);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cw-card-body { padding: .75rem .875rem .875rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.cw-card-brand { margin-bottom: 0; }
.cw-card-engine { margin-top: -.125rem; }
.cw-card-price-wrap { margin-top: auto; padding-top: .4rem; }
.cw-card-delivery { margin-top: .25rem; }

@media (max-width: 560px) {
  .cw-card { flex-direction: row; }
  .cw-card-photo { width: 80px; height: auto; min-height: 80px; flex-shrink: 0; }
  .cw-card-body { padding: .625rem .75rem; }
}

/* ══ DARK CTA BLOCK — CONTRAST FIX ══════════════════════════════════════ */
/* p,li{color:var(--text-2)!important} at line 225 breaks text in dark blocks */
.single-post-content div[style*='#1a1a1a'] p,
.single-post-content div[style*='#1a1a1a'] li,
.rich-text div[style*='#1a1a1a'] p,
.rich-text div[style*='#1a1a1a'] li,
.w-richtext div[style*='#1a1a1a'] p,
.w-richtext div[style*='#1a1a1a'] li {
  color: #fff !important;
}
.single-post-content div[style*='#1a1a1a'] p[style*='color:#ccc'],
.rich-text div[style*='#1a1a1a'] p[style*='color:#ccc'],
.w-richtext div[style*='#1a1a1a'] p[style*='color:#ccc'] {
  color: rgba(255,255,255,.82) !important;
}
.single-post-content div[style*='#1a1a1a'] a,
.rich-text div[style*='#1a1a1a'] a,
.w-richtext div[style*='#1a1a1a'] a {
  color: #fff !important;
}

/* ══ TELEGRAM CTA WIDGET ═════════════════════════════════════════════════ */
.tg-cta {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg,#0e1621 0%,#17212d 100%);
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(41,165,224,.22);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tg-cta-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: #2CA5E0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-cta-icon svg { display: block; }
.tg-cta-body { flex: 1; min-width: 0; }
.tg-cta-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff !important;
  margin-bottom: 0.2rem;
}
.tg-cta-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,.55) !important;
  line-height: 1.45;
}
.tg-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #2CA5E0;
  color: #fff !important;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, transform .12s;
}
.tg-cta-btn:hover { background: #2595c8; transform: translateY(-1px); }
@media (max-width: 600px) {
  .tg-cta { flex-wrap: wrap; gap: 0.75rem; }
  .tg-cta-btn { width: 100%; justify-content: center; padding: 11px 18px; }
}

/* ══ TELEGRAM FLOATING BUTTON (mobile only) ══════════════════════════════ */
.tg-float {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(90px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: #2CA5E0;
  color: #fff !important;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 24px rgba(44,165,224,.45);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s;
  opacity: 0;
  pointer-events: none;
}
.tg-float.tg-float--on {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tg-float-x {
  margin-left: 4px;
  font-size: 1rem;
  opacity: .75;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.tg-float-x:hover { opacity: 1; }
@media (min-width: 768px) { .tg-float { display: none !important; } }