/* ============================================================
   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; }